├── .DS_Store ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── .npmrc ├── .travis.yml ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── app ├── src │ ├── api │ │ ├── SP.Taxonomy.testInBrowser.js │ │ ├── SP.Taxonomy.ts │ │ └── __tests__ │ │ │ └── SP.Taxonomy.spec.ts │ ├── apiMock │ │ └── SP.Taxonomy.ts │ ├── components │ │ └── TaxonomyPicker │ │ │ ├── ITaxonomyPickerProps.ts │ │ │ ├── ITaxonomyPickerState.ts │ │ │ ├── TaxonomyPicker.module.css │ │ │ ├── TaxonomyPicker.module.css.d.ts │ │ │ ├── TaxonomyPicker.tsx │ │ │ └── __tests__ │ │ │ ├── TaxonomyPicker.spec.ts │ │ │ └── __snapshots__ │ │ │ └── TaxonomyPicker.spec.ts.snap │ ├── containers │ │ └── App.tsx │ ├── index.dev.tsx │ ├── index.ts │ └── utils │ │ ├── Cache.ts │ │ └── Utils.ts └── stylesheets │ ├── 1_Settings │ ├── _settings.breakpoints.css │ ├── _settings.colors.css │ └── _settings.global.css │ ├── 5_Objects │ └── _objects.reactSelect.css │ ├── 7_Trumps │ └── _trumps.utilities.css │ └── main.css ├── assets ├── react-taxonomy-picker.gif └── react-taxonomy-picker.png ├── dist ├── React.TaxonomyPicker.css ├── React.TaxonomyPicker.css.map ├── React.TaxonomyPicker.js ├── React.TaxonomyPicker.js.map ├── api │ └── SP.Taxonomy.d.ts ├── apiMock │ └── SP.Taxonomy.d.ts ├── components │ └── TaxonomyPicker │ │ ├── ITaxonomyPickerProps.d.ts │ │ ├── ITaxonomyPickerState.d.ts │ │ └── TaxonomyPicker.d.ts ├── containers │ └── App.d.ts ├── index.d.ts ├── index.dev.d.ts └── utils │ ├── Cache.d.ts │ └── Utils.d.ts ├── docs └── NPMPackage.md ├── gatsby ├── .gitignore ├── gatsby-config.js ├── package-lock.json ├── package.json └── src │ └── pages │ └── index.tsx ├── package-lock.json ├── package.json ├── public └── index.html ├── test ├── setup │ ├── setupTests.ts │ └── tempPolyfills.ts └── unit │ ├── __mocks__ │ └── fileMock.js │ └── helpers │ └── ComponentHelper.tsx ├── tsconfig.json ├── tsconfig.pkg.json ├── tslint.json └── webpack ├── .DS_Store ├── stats ├── statistics-7-1-2017-20-55-34.html └── stats.json ├── webpack.config.dev.js ├── webpack.config.prod.js └── webpack.config.stats.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jquintozamora/react-taxonomypicker/ef277a662f0d0cc6ba6e2353e1f1e75450631b7a/.DS_Store -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # Browsers that we support 2 | 3 | last 2 version 4 | ie >= 9 5 | maintained node versions 6 | not dead -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # What is Editorconfig? 2 | # EditorConfig helps developers define and maintain consistent 3 | # coding styles between different editors and IDEs 4 | # editorconfig.org 5 | # https://www.topbug.net/blog/2012/03/14/use-editorconfig-to-maintain-consistent-coding-styles-between-different-editors-and-ides/ 6 | # Sample files: 7 | # https://github.com/airbnb/javascript/blob/master/.editorconfig 8 | # https://github.com/rcorp/standard-project-structure/blob/master/generators/linter/templates/.editorconfig 9 | # https://github.com/palantir/blueprint/blob/master/.editorconfig 10 | root = true 11 | 12 | [*] 13 | # Change these settings to your own preference 14 | indent_style = space 15 | indent_size = 2 16 | # We recommend you to keep these unchanged 17 | end_of_line = crlf 18 | charset = utf-8 19 | trim_trailing_whitespace = true 20 | insert_final_newline = true 21 | 22 | # some files use 4 spaces for indentation 23 | [*.{js,jsx,ts,tsx,xml}] 24 | indent_size = 4 25 | 26 | [tsconfig.json] 27 | indent_size = 4 28 | 29 | # Ignore paths 30 | [/node_modules/**] 31 | charset = none 32 | end_of_line = none 33 | insert_final_newline = none 34 | trim_trailing_whitespace = none 35 | indent_style = none 36 | indent_size = none 37 | 38 | [*.d.ts] 39 | charset = none 40 | end_of_line = none 41 | insert_final_newline = none 42 | trim_trailing_whitespace = none 43 | indent_style = none 44 | indent_size = none 45 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib/ 2 | node_modules/ 3 | *.tgz 4 | 5 | # Coverage 6 | coverage 7 | 8 | */.DS_Store 9 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | save-exact=true 2 | registry=https://registry.npmjs.org -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "stable" 4 | install: 5 | - npm install 6 | script: 7 | - npm run test:coverage 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "vsicons.presets.angular": false, 3 | "search.exclude": { 4 | "**/node_modules": true, 5 | "**/lib": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 José Quinto (https://blog.josequinto.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-TaxonomyPicker 2 | A Taxonomy Picker control built with [TypeScript](https://www.typescriptlang.org) for [React](https://facebook.github.io/react) based on [React-Select](https://github.com/JedWatson/react-select). 3 | Initially built for use in Office 365 / SharePoint. 4 | 5 | ![React-Taxonomy-Picker-gif](./assets/react-taxonomy-picker.gif) 6 | 7 | [![npm version](https://badge.fury.io/js/react-taxonomypicker.svg)](https://badge.fury.io/js/react-taxonomypicker) 8 | [![NSP Status](https://nodesecurity.io/orgs/jquinto/projects/7dd23805-b74a-4409-9f6f-b9fd0c835cea/badge)](https://nodesecurity.io/orgs/jquinto/projects/7dd23805-b74a-4409-9f6f-b9fd0c835cea) 9 | [![Code Climate](https://codeclimate.com/github/jquintozamora/react-taxonomypicker/badges/gpa.svg)](https://codeclimate.com/github/jquintozamora/react-taxonomypicker) 10 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/jquintozamora/react-taxonomypicker/master/LICENSE) 11 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](Readme.md#want-to-contribute) 12 | [![Greenkeeper badge](https://badges.greenkeeper.io/jquintozamora/react-taxonomypicker.svg)](https://greenkeeper.io/) 13 | [![codecov](https://codecov.io/gh/jquintozamora/react-taxonomypicker/branch/master/graph/badge.svg)](https://codecov.io/gh/jquintozamora/react-taxonomypicker) 14 | 15 | [![NPM](https://nodei.co/npm/react-taxonomypicker.png?downloads=true)](https://nodei.co/npm/react-taxonomypicker/) 16 | 17 | 18 | ## DEMO 19 | [https://jquintozamora.github.io/react-taxonomypicker](https://jquintozamora.github.io/react-taxonomypicker) 20 | 21 | ## Features 22 | - Retrieve Terms from a Term Set by Term Set GUID. 23 | - Support for large Term Set using Async mode 24 | - Configurable via termSetCountMaxSwapToAsync property 25 | - Use SP.Taxonomy.js 26 | - Use Promise (polyfill it if needed IE) 27 | 28 | ## Features not supported 29 | - Add new Terms (Open TermSets) 30 | 31 | 32 | ## Scenarios supported 33 | - SharePoint Web Part using Script Editor or Content Editor Web Part 34 | - SharePoint Framework Web Part (SPFx) 35 | - [ES6 project](https://github.com/jquintozamora/react-taxonomypicker-consume-es6) consumer sample 36 | - [TypeScript project](https://github.com/jquintozamora/react-taxonomypicker-consume-typescript) consumer sample 37 | - [SPFx project](https://github.com/jquintozamora/spfx-react-taxonomypicker) consumer sample 38 | 39 | ## Scenarios not supported 40 | - SharePoint Provider-hosted app 41 | - Other environment in which we are not allowed to use JSOM 42 | - Add new terms to the Taxonomy Store (specific for get terms by now) 43 | 44 | ## Installation 45 | Steps to use react-taxonomypicker in your React project 46 | ### 1.Install from NPM 47 | ``` 48 | npm install --save react-taxonomypicker 49 | ``` 50 | 51 | ### 2. Import and use in your application 52 | ``` 53 | import TaxonomyPicker from "react-taxonomypicker"; 54 | // Include its styles in you build process as well 55 | import "react-taxonomypicker/dist/React.TaxonomyPicker.css"; 56 | ``` 57 | 58 | ### 3. Usage 59 | #### Mock / Local mode 60 | Don't configure termSetGuid and load the options from defaultOptions object. 61 | ```js 62 | 73 | ``` 74 | 75 | ##### Show path as label 76 | ```js 77 | 89 | ``` 90 | 91 | #### SharePoint environment mode 92 | Configure termSetGuid with the desired term set 93 | ```js 94 | 103 | ``` 104 | 105 | 106 | ## Done 107 | - Expose as a Module / Global / UMD library 108 | - Upload to npm 109 | - Create [ES6 sample application](https://github.com/jquintozamora/react-taxonomypicker-consume-es6) for usage 110 | - Create [TypeScript sample application](https://github.com/jquintozamora/react-taxonomypicker-consume-typescript) for usage 111 | - Create [SPFx webpart sample for usage](https://github.com/jquintozamora/spfx-react-taxonomypicker) 112 | - Create types and include them with the npm package 113 | - onPickerChange event handler exposed 114 | - react-select properties exposed (extends them) 115 | - termSetCountMaxSwapToAsync property exposed to choose between Sync / Async modes 116 | - defaultOptions array exposed to enable input mock data when no termSetGuid configured 117 | - Create and Expose properties for custom styles 118 | 119 | ## TODOs 120 | - Create types to allow people include with @types 121 | 122 | 123 | ## Want to contribute? 124 | Anyone can help make this project better 125 | 126 | 127 | ## License 128 | MIT License 129 | 130 | Copyright (c) 2017 - 2018 [José Quinto](https://blog.josequinto.com) 131 | 132 | Permission is hereby granted, free of charge, to any person obtaining a copy 133 | of this software and associated documentation files (the "Software"), to deal 134 | in the Software without restriction, including without limitation the rights 135 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 136 | copies of the Software, and to permit persons to whom the Software is 137 | furnished to do so, subject to the following conditions: 138 | 139 | The above copyright notice and this permission notice shall be included in all 140 | copies or substantial portions of the Software. 141 | 142 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 143 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 144 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 145 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 146 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 147 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 148 | SOFTWARE. 149 | -------------------------------------------------------------------------------- /app/src/api/SP.Taxonomy.testInBrowser.js: -------------------------------------------------------------------------------- 1 | // Get Default Term Store 2 | (function () { 3 | var ctx = SP.ClientContext.get_current(); 4 | var session = SP.Taxonomy.TaxonomySession.getTaxonomySession(ctx); 5 | var termStore = session.getDefaultSiteCollectionTermStore(); 6 | ctx.load(session); 7 | ctx.load(termStore); 8 | ctx.executeQueryAsync( 9 | function () { 10 | console.log('TermStore is here!'); 11 | console.log(termStore); 12 | }, 13 | function (sender, args) { 14 | console.log('Error: ' + args.get_message()); 15 | } 16 | ); 17 | })(); 18 | 19 | // Get Specific TermSet items count 20 | (function () { 21 | var termSetGuid = "7c16e180-d093-4709-8426-e7997acb4302"; //Locations TermSet GUID 22 | var ctx = SP.ClientContext.get_current(); 23 | var session = SP.Taxonomy.TaxonomySession.getTaxonomySession(ctx); 24 | var termStore = session.getDefaultSiteCollectionTermStore(); 25 | var termSet = termStore.getTermSet(new SP.Guid(termSetGuid)); 26 | var terms = termSet.getAllTerms(); 27 | ctx.load(terms, 'Include()'); 28 | ctx.executeQueryAsync( 29 | function () { 30 | console.log('TermSet count: '); 31 | var termCount = terms.get_count(); 32 | console.log(termCount); 33 | }, 34 | function (sender, args) { 35 | console.log('Error: ' + args.get_message()); 36 | } 37 | ); 38 | })(); 39 | 40 | // Search taxonomy Terms using LabelMatchInformation 41 | (function () { 42 | var termSetGuid = "7c16e180-d093-4709-8426-e7997acb4302"; //Locations TermSet GUID 43 | var ctx = SP.ClientContext.get_current(); 44 | var session = SP.Taxonomy.TaxonomySession.getTaxonomySession(ctx); 45 | var termStore = session.getDefaultSiteCollectionTermStore(); 46 | var termSet = termStore.getTermSet(new SP.Guid(termSetGuid)); 47 | var lmi = new SP.Taxonomy.LabelMatchInformation(ctx); 48 | //Populate the various properties 49 | lmi.set_termLabel("s"); //search terms. 50 | lmi.set_defaultLabelOnly(true); 51 | lmi.set_stringMatchOption(SP.Taxonomy.StringMatchOption.startsWith); 52 | lmi.set_resultCollectionSize(10); //terms to bring back 53 | lmi.set_trimUnavailable(true); 54 | var terms = termSet.getTerms(lmi); 55 | ctx.load(terms, "Include(IsRoot, TermsCount, Id, Name, PathOfTerm, IsAvailableForTagging)"); 56 | ctx.executeQueryAsync( 57 | function () { 58 | console.log('Terms: '); 59 | var termEnumerator = terms.getEnumerator(); 60 | while (termEnumerator.moveNext()) { 61 | var currentTerm = termEnumerator.get_current(); 62 | var termObj = { 63 | label: currentTerm.get_name(), 64 | value: currentTerm.get_name(), 65 | path: currentTerm.get_pathOfTerm(), 66 | name: currentTerm.get_name(), 67 | guid: currentTerm.get_id().toString(), 68 | }; 69 | console.log(termObj); 70 | } 71 | var termCount = terms.get_count(); 72 | console.log(termCount); 73 | }, 74 | function (sender, args) { 75 | console.log('Error: ' + args.get_message()); 76 | } 77 | ); 78 | })(); 79 | 80 | -------------------------------------------------------------------------------- /app/src/api/SP.Taxonomy.ts: -------------------------------------------------------------------------------- 1 | import { Cache } from "../utils/Cache"; 2 | import { Utils } from "../utils/Utils"; 3 | 4 | export default class TaxonomyAPI { 5 | /* 6 | * Function to get the number of terms of a given taxonomy Term Set 7 | * It will be used to decide if the TaxonomyPicker control renders as async or async 8 | * It will use Session Storage Cache to keep the results. Cache will expire in 1 week = 10080 minutes 9 | */ 10 | public static getTermSetCount(termSetGuid: string, termSetName: string) { 11 | return new Promise((resolve: any, reject: any) => { 12 | const termSetCountCacheExpiresMin: number = 10080; 13 | const termSetCountCacheKey: string = "TermSetCount_" + termSetName + termSetGuid; 14 | const termSetCountCache: any = Cache.getStoredDataByKey(termSetCountCacheKey); 15 | // Try get Term Set count from the cache 16 | if (termSetCountCache) { return resolve(termSetCountCache); } 17 | 18 | // If Term Set count is not in the cache, do the query using JSOM 19 | SP.SOD.executeFunc("sp.js", "SP.ClientContext", () => { 20 | // Utils.getLayoutsPageUrl replaces SP.Utilities.Utility.getLayoutsPageUrl 21 | SP.SOD.registerSod("sp.taxonomy.js", Utils.getLayoutsPageUrl("sp.taxonomy.js")); 22 | SP.SOD.executeFunc("sp.taxonomy.js", "SP.Taxonomy.TaxonomySession", 23 | () => { 24 | const ctx = SP.ClientContext.get_current(); 25 | const session = SP.Taxonomy.TaxonomySession.getTaxonomySession(ctx); 26 | const termStore = session.getDefaultSiteCollectionTermStore(); 27 | const termSet = termStore.getTermSet(new SP.Guid(termSetGuid)); 28 | const terms = termSet.getAllTerms(); 29 | ctx.load(terms, "Include()"); 30 | ctx.executeQueryAsync( 31 | () => { 32 | const termCount = terms.get_count(); 33 | Cache.setStoredDataByKey(termSetCountCacheKey, termCount, termSetCountCacheExpiresMin); 34 | return resolve(termCount); 35 | }, 36 | (sender, args) => { 37 | return reject("Error in getTermSetCount. Message: " + args.get_message()); 38 | } 39 | ); 40 | } 41 | ); 42 | }); 43 | }); 44 | } 45 | 46 | /* 47 | * Function to get all terms of a given taxonomy Term Set 48 | * It will be used to get all terms when a TaxonomyPicker is Sync 49 | * Session Storage Cache will expire in 1 day = 1440 minutes 50 | */ 51 | public static getAllTermsByTermSet(termSetGuid: string, termSetName: string, showOnlyAvailableForTag: boolean) { 52 | return new Promise((resolve, reject) => { 53 | const termSetDataCacheExpiresMin: number = 1440; 54 | const termSetDataCacheKey: string = "TermSetData_" + termSetName + termSetGuid; 55 | const termSetDataCache: any = Cache.getStoredDataByKey(termSetDataCacheKey); 56 | 57 | // Try get Term Set data from the cache 58 | if (termSetDataCache) { return resolve(termSetDataCache); } 59 | 60 | // If Term Set data is not in the cache, do the query using JSOM 61 | SP.SOD.executeFunc("sp.js", "SP.ClientContext", () => { 62 | // Utils.getLayoutsPageUrl replaces SP.Utilities.Utility.getLayoutsPageUrl 63 | SP.SOD.registerSod("sp.taxonomy.js", Utils.getLayoutsPageUrl("sp.taxonomy.js")); 64 | SP.SOD.executeFunc("sp.taxonomy.js", "SP.Taxonomy.TaxonomySession", 65 | () => { 66 | const ctx = SP.ClientContext.get_current(); 67 | const taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(ctx); 68 | const termStore = taxSession.getDefaultSiteCollectionTermStore(); 69 | const termSet = termStore.getTermSet(new SP.Guid(termSetGuid)); 70 | const terms = termSet.getAllTerms(); 71 | ctx.load(terms, "Include(IsRoot, TermsCount, Id, Name, PathOfTerm, IsAvailableForTagging)"); 72 | ctx.executeQueryAsync( 73 | () => { 74 | let items: Array<{}> = []; 75 | const termEnumerator = terms.getEnumerator(); 76 | while (termEnumerator.moveNext()) { 77 | const currentTerm: any = termEnumerator.get_current(); 78 | const isAvailableForTagging: boolean = showOnlyAvailableForTag ? currentTerm.get_isAvailableForTagging() : true; 79 | if (isAvailableForTagging) { 80 | const termObj: any = { 81 | label: currentTerm.get_name(), 82 | value: currentTerm.get_id().toString(), 83 | path: currentTerm.get_pathOfTerm() 84 | }; 85 | items = [...items, termObj]; 86 | } 87 | } 88 | Cache.setStoredDataByKey(termSetDataCacheKey, items, termSetDataCacheExpiresMin); 89 | return resolve(items); 90 | }, 91 | (sender, args) => { 92 | return reject(args.get_message()); 93 | }); 94 | } 95 | ); 96 | }); 97 | }); 98 | } 99 | 100 | /* 101 | * Function to search terms in a given taxonomy Term Set 102 | * It will be used to get all terms when a TaxonomyPicker is Async 103 | * NO Session Storage Cache ENABLED 104 | */ 105 | public static getSearchTermsByText(termSetGuid: string, termSetName: string, keyword: string, resultCollectionSize: number = 10, showOnlyAvailableForTag: boolean = true) { 106 | return new Promise((resolve, reject) => { 107 | if (keyword === "") { return resolve([]); } 108 | SP.SOD.executeFunc("sp.js", "SP.ClientContext", () => { 109 | // Utils.getLayoutsPageUrl replaces SP.Utilities.Utility.getLayoutsPageUrl 110 | SP.SOD.registerSod("sp.taxonomy.js", Utils.getLayoutsPageUrl("sp.taxonomy.js")); 111 | SP.SOD.executeFunc("sp.taxonomy.js", "SP.Taxonomy.TaxonomySession", 112 | () => { 113 | const ctx = SP.ClientContext.get_current(); 114 | const taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(ctx); 115 | const termStore = taxSession.getDefaultSiteCollectionTermStore(); 116 | const termSet = termStore.getTermSet(new SP.Guid(termSetGuid)); 117 | const lmi = new SP.Taxonomy.LabelMatchInformation(ctx); 118 | lmi.set_termLabel(keyword); 119 | lmi.set_defaultLabelOnly(true); 120 | lmi.set_stringMatchOption(SP.Taxonomy.StringMatchOption.startsWith); 121 | lmi.set_resultCollectionSize(resultCollectionSize); 122 | lmi.set_trimUnavailable(true); 123 | const terms = termSet.getTerms(lmi); 124 | ctx.load(terms, "Include(IsRoot, TermsCount, Id, Name, PathOfTerm, IsAvailableForTagging)"); 125 | ctx.executeQueryAsync( 126 | () => { 127 | let items: Array<{}> = []; 128 | const termEnumerator = terms.getEnumerator(); 129 | while (termEnumerator.moveNext()) { 130 | const currentTerm: any = termEnumerator.get_current(); 131 | const isAvailableForTagging: boolean = showOnlyAvailableForTag ? currentTerm.get_isAvailableForTagging() : true; 132 | if (isAvailableForTagging) { 133 | const termObj: any = { 134 | label: currentTerm.get_name(), 135 | value: currentTerm.get_id().toString(), 136 | path: currentTerm.get_pathOfTerm() 137 | }; 138 | items = [...items, termObj]; 139 | } 140 | } 141 | return resolve(items); 142 | }, 143 | (sender, args) => { 144 | return reject(args.get_message()); 145 | }); 146 | } 147 | ); 148 | }); 149 | }); 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /app/src/api/__tests__/SP.Taxonomy.spec.ts: -------------------------------------------------------------------------------- 1 | import TaxonomyAPI from "../SP.Taxonomy"; 2 | 3 | declare global { 4 | namespace NodeJS { 5 | interface Global { 6 | SP: any; 7 | } 8 | } 9 | } 10 | global.SP = { 11 | SOD: { 12 | executeFunc: (a, b, callback) => { 13 | Promise.resolve(callback(1)); 14 | }, 15 | registerSod: () => {} 16 | }, 17 | ClientContext: { 18 | get_current: () => { 19 | return { 20 | load: () => {}, 21 | executeQueryAsync: callback => { 22 | return Promise.resolve(callback(1)); 23 | } 24 | }; 25 | } 26 | }, 27 | Taxonomy: { 28 | TaxonomySession: { 29 | getTaxonomySession: () => { 30 | return { 31 | getDefaultSiteCollectionTermStore: () => { 32 | return { 33 | getTermSet: () => { 34 | return { 35 | getAllTerms: () => { 36 | return { 37 | get_count: () => { 38 | return 1; 39 | } 40 | }; 41 | } 42 | }; 43 | } 44 | }; 45 | } 46 | }; 47 | } 48 | } 49 | }, 50 | Guid: () => {} 51 | }; 52 | 53 | describe("TaxonomyAPI", () => { 54 | describe("getTermSetCount", () => { 55 | it("return count", async () => { 56 | const counter = await TaxonomyAPI.getTermSetCount("guid", "name"); 57 | expect(counter).toBe(1); 58 | }); 59 | }); 60 | }); 61 | -------------------------------------------------------------------------------- /app/src/apiMock/SP.Taxonomy.ts: -------------------------------------------------------------------------------- 1 | const delay: number = 500; 2 | const numberOfItems = 1500; 3 | 4 | let items: Array<{}> = []; 5 | for (let i = 0; i <= numberOfItems; i++) { 6 | const tempLabel = "Word " + i; 7 | const termObj: any = { 8 | guid: newGuid(), 9 | label: tempLabel, 10 | name: tempLabel, 11 | path: "path" + i, 12 | value: tempLabel, 13 | }; 14 | items = [...items, termObj]; 15 | } 16 | 17 | function newGuid() { 18 | return "xxxxxxxx-xxxx-5xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => { 19 | const r = Math.random() * 16 | 0; 20 | const v = c === "x" ? r : (r & 0x3 | 0x8); 21 | return v.toString(16); 22 | }); 23 | } 24 | 25 | function getTermsCount(termSetGuid: string): number { 26 | let termCount = 0; 27 | switch (termSetGuid) { 28 | case "7c16e180-d093-4709-8426-e7997acb4302": 29 | termCount = 314; 30 | break; 31 | case "dc85f60c-1a19-4be0-ad20-544bbca0b1b4": 32 | termCount = 1500; 33 | break; 34 | case "26ebf149-101a-4996-9df2-8179a537350d": 35 | termCount = 80; 36 | default: 37 | break; 38 | } 39 | return termCount; 40 | } 41 | 42 | export default class TaxonomyAPI { 43 | /* 44 | * Function to get the number of items of a given taxonomy Term Set 45 | * It will be used to decide if the TaxonomyPicker control renders as async or async 46 | * It will use Session Storage Cache to keep the results. Cache will expire in 1 week = 10080 minutes 47 | */ 48 | public static getTermSetCount(termSetGuid: string, termSetName: string) { 49 | return new Promise((resolve: any, reject: any) => { 50 | setTimeout(() => { 51 | const termCount = getTermsCount(termSetGuid); 52 | resolve(termCount); 53 | }, delay); 54 | }); 55 | } 56 | 57 | public static getAllTermsByTermSet(termSetGuid: string, termSetName: string, showOnlyAvailableForTag: boolean) { 58 | return new Promise((resolve, reject) => { 59 | setTimeout(() => { 60 | resolve(items.slice(0, getTermsCount(termSetGuid))); 61 | }, delay); 62 | }); 63 | } 64 | 65 | /* 66 | * Function to search terms in a given taxonomy Term Set 67 | * It will be used to get all terms when a TaxonomyPicker is Async 68 | * NO Session Storage Cache ENABLED 69 | */ 70 | public static getSearchTermsByText(termSetGuid: string, termSetName: string, keyword: string, resultCollectionSize: number = 10, showOnlyAvailableForTag: boolean = true) { 71 | return new Promise((resolve, reject) => { 72 | setTimeout(() => { 73 | // reject("error"); 74 | resolve(items 75 | .filter((item: any) => { 76 | return (item.name.search(keyword) > -1); 77 | }) 78 | .slice(0, resultCollectionSize) 79 | ); 80 | }, delay); 81 | }); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /app/src/components/TaxonomyPicker/ITaxonomyPickerProps.ts: -------------------------------------------------------------------------------- 1 | import { OptionProps } from "react-select/lib/types"; 2 | import { Props as SelectProps } from "react-select/lib/Select"; 3 | import { AsyncProps } from "react-select/lib/Async"; 4 | 5 | type OptionValue = 6 | | ITaxonomyValue 7 | | ITaxonomyValue[] 8 | | OptionProps 9 | | OptionProps[] 10 | | string 11 | | string[] 12 | | number 13 | | number[] 14 | | boolean; 15 | 16 | export interface ITaxonomyPickerProps 17 | extends SelectProps, 18 | AsyncProps { 19 | /** 20 | * The internal name of the Taxonomy Picker (nothing to do with TermSet name). 21 | */ 22 | name: string; 23 | 24 | /** 25 | * A Boolean value that specifies whether the Taxonomy Picker has multiple or single values to be selected. 26 | */ 27 | multi: boolean; 28 | 29 | /** 30 | * The display name to be show as a control label. 31 | */ 32 | displayName?: string; 33 | 34 | /** 35 | * The term set id to get the terms. 36 | * Is it's not specified, then will be used defaultOptions as a fallback 37 | */ 38 | termSetGuid?: string; 39 | 40 | /** 41 | * The term set name. 42 | */ 43 | termSetName?: string; 44 | 45 | /** 46 | * The maximun number of terms from which convert the control from Sync to Asycn. 47 | * Sync means all the terms will be gathered. 48 | * Async means no terms will be gotten until first user search. 49 | */ 50 | termSetCountMaxSwapToAsync?: number; 51 | 52 | /** 53 | * The quantity of minutes to expire the Term Set Counters cache. 54 | * That is the cache used by TaxonomyAPI.getTermSetCount method to get the quantity of terms. 55 | * Default value is 10080 minutes / 1 week 56 | * @default 10080 57 | */ 58 | termSetCountCacheExpiresMin?: number; 59 | 60 | /** 61 | * The quantity of minutes to expire the Get All Terms cache. 62 | * That is the cache used by TaxonomyAPI.getAllTermsByTermSet method to get the quantity of terms. 63 | * Default value is 1440 minutes / 1 day 64 | * @default 1440 65 | */ 66 | termSetAllTermsCacheExpiresMin?: number; 67 | 68 | /** 69 | * The defaultOptions values to be used as a Mock values 70 | */ 71 | defaultOptions: ITaxonomyValue[] | OptionProps[]; 72 | 73 | /** 74 | * initial Taxonomy Picker value 75 | */ 76 | defaultValue?: OptionValue; 77 | 78 | /** 79 | * field placeholder, displayed when there's no value 80 | * @default "Type here to search..." 81 | */ 82 | placeholder?: string; 83 | 84 | /** 85 | * Function (event handler which triggers when the selected value/s change/s. 86 | */ 87 | onPickerChange?: ( 88 | taxonomyPickerName: string, 89 | newValue: OptionValue 90 | ) => void; 91 | 92 | /** 93 | * Show term path ? 94 | */ 95 | showPath?: boolean; 96 | 97 | /** 98 | * Log Errors in console 99 | */ 100 | logErrorsConsole?: boolean; 101 | 102 | /** 103 | * Log Errors in screen using div 104 | */ 105 | logErrorsDiv?: boolean; 106 | } 107 | 108 | /** 109 | * Defines basic taxonomy value data structure. 110 | */ 111 | export interface ITaxonomyValue { 112 | /** 113 | * The name for a Term. 114 | */ 115 | label: string; 116 | 117 | /** 118 | * The GUID for a Term. 119 | */ 120 | value: string; 121 | 122 | /** 123 | * The Path for a Term. 124 | */ 125 | path: string; 126 | } 127 | -------------------------------------------------------------------------------- /app/src/components/TaxonomyPicker/ITaxonomyPickerState.ts: -------------------------------------------------------------------------------- 1 | export interface ITaxonomyPickerState { 2 | errors: string[]; 3 | options: any[]; 4 | value: any; 5 | disabled: boolean; 6 | termSetCount: number; 7 | asyncLoad: boolean; 8 | } 9 | -------------------------------------------------------------------------------- /app/src/components/TaxonomyPicker/TaxonomyPicker.module.css: -------------------------------------------------------------------------------- 1 | .label { 2 | font-family: 'Segoe UI WestEuropean','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif; 3 | text-align: left; 4 | font-size: 16px; 5 | display: block; 6 | color: black; 7 | margin-top: 10px; 8 | padding: 5px 0; 9 | -webkit-font-smoothing: antialiased; 10 | box-shadow: none; 11 | box-sizing: border-box; 12 | } 13 | -------------------------------------------------------------------------------- /app/src/components/TaxonomyPicker/TaxonomyPicker.module.css.d.ts: -------------------------------------------------------------------------------- 1 | // This file is automatically generated. 2 | // Please do not change this file! 3 | interface CssExports { 4 | 'label': string; 5 | } 6 | declare const cssExports: CssExports; 7 | export = cssExports; 8 | -------------------------------------------------------------------------------- /app/src/components/TaxonomyPicker/TaxonomyPicker.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Select from "react-select"; 3 | import TaxonomyAPI from "../../api/SP.Taxonomy"; 4 | import { ITaxonomyPickerProps, ITaxonomyValue } from "./ITaxonomyPickerProps"; 5 | import { ITaxonomyPickerState } from "./ITaxonomyPickerState"; 6 | 7 | /* tslint:disable:no-var-requires */ 8 | const styles: any = require("./TaxonomyPicker.module.css"); 9 | /* tslint:enable:no-var-requires */ 10 | 11 | class TaxonomyPicker extends React.Component< 12 | ITaxonomyPickerProps, 13 | ITaxonomyPickerState 14 | > { 15 | public static defaultProps: ITaxonomyPickerProps = { 16 | name: "Taxonomy_Picker_Name", 17 | multi: true, 18 | termSetGuid: null, 19 | termSetName: null, 20 | termSetCountMaxSwapToAsync: 300, 21 | termSetCountCacheExpiresMin: 10080, 22 | termSetAllTermsCacheExpiresMin: 1440, 23 | defaultOptions: null, 24 | defaultValue: null, 25 | onPickerChange: null, 26 | placeholder: "Type here to search...", 27 | showPath: false, 28 | logErrorsConsole: false, 29 | logErrorsDiv: false, 30 | loadOptions: () => {}, 31 | cacheOptions: false 32 | }; 33 | 34 | constructor(props: any, context: any) { 35 | super(props, context); 36 | this.state = { 37 | asyncLoad: false, 38 | disabled: false, 39 | errors: [], 40 | options: [], 41 | termSetCount: 0, 42 | value: props.defaultValue 43 | }; 44 | } 45 | 46 | // Initial Async Loading here. Only in Container Components 47 | public componentDidMount() { 48 | const { 49 | termSetGuid, 50 | termSetName, 51 | termSetCountMaxSwapToAsync, 52 | defaultOptions, 53 | logErrorsConsole 54 | } = this.props; 55 | 56 | termSetGuid !== null 57 | ? TaxonomyAPI.getTermSetCount(termSetGuid, termSetName) 58 | .then((termSetCount: number) => { 59 | termSetCount > termSetCountMaxSwapToAsync 60 | ? this.setState({ 61 | ...this.state, 62 | asyncLoad: true, 63 | termSetCount 64 | }) 65 | : this.getAllTerms() 66 | .then((options: any) => { 67 | this.setState({ 68 | ...this.state, 69 | options, 70 | termSetCount 71 | }); 72 | }) 73 | .catch((reason: any) => { 74 | if (logErrorsConsole) { 75 | console.error(reason); 76 | } 77 | this.setState({ 78 | ...this.state, 79 | errors: [...this.state.errors, reason] 80 | }); 81 | }); 82 | }) 83 | .catch((reason: any) => { 84 | if (logErrorsConsole) { 85 | console.error(reason); 86 | } 87 | this.setState({ 88 | ...this.state, 89 | errors: [...this.state.errors, reason] 90 | }); 91 | }) 92 | : defaultOptions !== null 93 | ? this.setState({ 94 | ...this.state, 95 | options: defaultOptions, 96 | termSetCount: defaultOptions.length 97 | }) 98 | : this.setState({ 99 | ...this.state, 100 | errors: [ 101 | ...this.state.errors, 102 | "Please choose termSetId or provide defaultOptions." 103 | ] 104 | }); 105 | } 106 | 107 | public render() { 108 | const { asyncLoad } = this.state; 109 | return ( 110 |
115 | {this._getLabel()} 116 | {this._getSelectControl(asyncLoad, 1)} 117 | {this.state.errors.length > 0 118 | ? this.renderErrorMessage() 119 | : null} 120 |
121 | ); 122 | } 123 | 124 | private _getLabel() { 125 | const { displayName, name } = this.props; 126 | // string.isNullOrUndefinedOrEmpty 127 | return !( 128 | typeof displayName === "string" && displayName.length > 0 129 | ) ? null : ( 130 | 133 | ); 134 | } 135 | 136 | private customFilter = Select.createFilter({ 137 | ignoreCase: true, 138 | ignoreAccents: true, 139 | stringify: option => 140 | this.props.showPath 141 | ? `${option.label} ${option.value} ${option.path}` 142 | : `${option.label} ${option.value}` 143 | }); 144 | 145 | private renderOptionLabel = option => { 146 | const fullPath = 147 | (option.path && option.path.split(";").join(" > ") + " > ") || 148 | undefined; 149 | return this.props.showPath && fullPath 150 | ? fullPath + option.label 151 | : option.label; 152 | }; 153 | 154 | private _getSelectControl(async: boolean, minimumInput?: number) { 155 | const { placeholder, name, multi } = this.props; 156 | const { options, value } = this.state; 157 | return async ? ( 158 | 174 | ) : ( 175 | 190 | ); 191 | } 192 | 193 | private _asyncLoadOptions = input => { 194 | return this.getSearchTerms(input) 195 | .then((options: any) => { 196 | this.setState({ 197 | ...this.state, 198 | options 199 | }); 200 | return { options }; 201 | }) 202 | .catch((reason: any) => { 203 | if (this.props.logErrorsConsole) { 204 | console.error(reason); 205 | } 206 | this.setState({ 207 | ...this.state, 208 | errors: [...this.state.errors, reason] 209 | }); 210 | }); 211 | }; 212 | 213 | private _handleSelectChange = (value: any) => { 214 | this.setState({ ...this.state, value }); 215 | if (typeof this.props.onPickerChange === "function") { 216 | this.props.onPickerChange(this.props.name, value); 217 | } 218 | }; 219 | 220 | private getSearchTerms(input: string) { 221 | const termFetcher = TaxonomyAPI.getSearchTermsByText( 222 | this.props.termSetGuid, 223 | this.props.termSetName, 224 | input 225 | ); 226 | return termFetcher; 227 | } 228 | 229 | private getAllTerms() { 230 | const termFetcher = TaxonomyAPI.getAllTermsByTermSet( 231 | this.props.termSetGuid, 232 | this.props.termSetName, 233 | false 234 | ); 235 | return termFetcher; 236 | } 237 | 238 | private renderErrorMessage() { 239 | return this.props.logErrorsDiv ? ( 240 |
{this.state.errors}
241 | ) : null; 242 | } 243 | } 244 | 245 | export default TaxonomyPicker; 246 | -------------------------------------------------------------------------------- /app/src/components/TaxonomyPicker/__tests__/TaxonomyPicker.spec.ts: -------------------------------------------------------------------------------- 1 | import testComponentHelper from "../../../../../test/unit/helpers/ComponentHelper"; 2 | import TaxonomyPicker from "../TaxonomyPicker"; 3 | 4 | describe("", () => { 5 | const renderComponent = testComponentHelper(TaxonomyPicker); 6 | 7 | describe("@renders", () => { 8 | it("in default state", () => { 9 | expect(renderComponent().getHtml()) 10 | .toMatchSnapshot(); 11 | }); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /app/src/components/TaxonomyPicker/__tests__/__snapshots__/TaxonomyPicker.spec.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` @renders in default state 1`] = ` 4 |
9 | 37 | 38 | 39 | 40 |
41 | `; 42 | -------------------------------------------------------------------------------- /app/src/containers/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import TaxonomyPicker from "../components/TaxonomyPicker/TaxonomyPicker"; 3 | 4 | export default class App extends React.Component<{}, {}> { 5 | 6 | public render() { 7 | return ( 8 |
9 | 27 |
28 | ); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /app/src/index.dev.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | // AppContainer is a necessary wrapper component for HMR. 5 | // We use require because TypeScript type warning, 6 | // tslint:disable 7 | const { AppContainer } = require("react-hot-loader"); 8 | // tslint:enable 9 | 10 | import "../stylesheets/main.css"; 11 | 12 | /* 13 | Main App Container 14 | */ 15 | import App from "./containers/App"; 16 | 17 | // Render function containing the HMR AppContainer 18 | const render = (Component: any) => { 19 | ReactDOM.render( 20 | 21 | 22 | , 23 | // HTML root element for React app 24 | document.getElementById("reactContainer") 25 | ); 26 | }; 27 | 28 | render(App); 29 | 30 | // TypeScript declaration for module.hot 31 | declare var module: { hot: any }; 32 | // Hot Module Replacement API 33 | if (module.hot) { 34 | module.hot.accept("./containers/App", () => { 35 | // If we receive a HMR request for our App container, 36 | // then reload it using require (we can't do this dynamically with import) 37 | const NextApp = require("./containers/App").default; 38 | render(NextApp); 39 | }); 40 | } 41 | -------------------------------------------------------------------------------- /app/src/index.ts: -------------------------------------------------------------------------------- 1 | import "../stylesheets/main.css"; 2 | export { ITaxonomyPickerProps, ITaxonomyValue } from "./components/TaxonomyPicker/ITaxonomyPickerProps"; 3 | import TaxonomyPicker from "./components/TaxonomyPicker/TaxonomyPicker"; 4 | export default TaxonomyPicker; 5 | -------------------------------------------------------------------------------- /app/src/utils/Cache.ts: -------------------------------------------------------------------------------- 1 | export class Cache { 2 | 3 | public static buildStorageKey(key: string) { 4 | let prefix: string = ""; 5 | if (window && window.hasOwnProperty("location") && window.location.hasOwnProperty("host") && window.location.hasOwnProperty("pathname")) { 6 | prefix = window.location.host + window.location.pathname; 7 | } 8 | return `${prefix}_${key}`.replace(/[^a-zA-Z0-9]/g, "."); 9 | } 10 | 11 | public static clearStoredDataByKey(key: string): void { 12 | if (window.sessionStorage) { 13 | const newKey: string = Cache.buildStorageKey(key); 14 | sessionStorage.removeItem(newKey); 15 | } 16 | } 17 | 18 | public static getStoredDataByKey(key: string): any { 19 | let returnData: any = null; 20 | if (window.sessionStorage) { 21 | 22 | const newKey: string = Cache.buildStorageKey(key); 23 | const sessionCache: any = window.sessionStorage.getItem(newKey); 24 | if (sessionCache !== null) { 25 | const nowDt = new Date(); 26 | const cachedData = JSON.parse(sessionCache); 27 | if (cachedData.expiryTime > nowDt) { 28 | returnData = cachedData.data; 29 | } 30 | } 31 | } 32 | return returnData; 33 | } 34 | 35 | public static setStoredDataByKey(key: string, dataToStore: any, expireMinutes: number) { 36 | if (window.sessionStorage) { 37 | const newKey: string = Cache.buildStorageKey(key); 38 | const nowDt = new Date(); 39 | const expiryTime = nowDt.setMinutes(nowDt.getMinutes() + 2); 40 | const data: any = { data: dataToStore, expiryTime }; 41 | window.sessionStorage.setItem(newKey, JSON.stringify(data)); 42 | } 43 | } 44 | 45 | } 46 | -------------------------------------------------------------------------------- /app/src/utils/Utils.ts: -------------------------------------------------------------------------------- 1 | export class Utils { 2 | /* 3 | * Function to get Site Collection URL 4 | * Samples: 5 | * "https://domain.sharepoint.com/sites/intranet" 6 | */ 7 | public static getSiteCollectionUrl(): string { 8 | let baseUrl = window.location.protocol + "//" + window.location.host; 9 | const pathname = window.location.pathname; 10 | const siteCollectionDetector = "/sites/"; 11 | if (pathname.indexOf(siteCollectionDetector) >= 0) { 12 | baseUrl += pathname.substring( 13 | 0, 14 | pathname.indexOf("/", siteCollectionDetector.length) 15 | ); 16 | } 17 | return baseUrl; 18 | } 19 | 20 | /* 21 | * Function to get Current Site Url 22 | * Samples: 23 | * "https://domain.sharepoint.com/sites/intranet/subsite/Pages/Home.aspx" 24 | */ 25 | public static getCurrentAbsoluteSiteUrl(): string { 26 | if ( 27 | window && 28 | window.hasOwnProperty("location") && 29 | window.location.hasOwnProperty("protocol") && 30 | window.location.hasOwnProperty("host") && 31 | window.location.hasOwnProperty("pathname") 32 | ) { 33 | return ( 34 | window.location.protocol + 35 | "//" + 36 | window.location.host + 37 | window.location.pathname 38 | ); 39 | } 40 | return null; 41 | } 42 | 43 | /* 44 | * Function to get Current Site Url 45 | * Samples: 46 | * "/sites/intranet" 47 | */ 48 | public static getWebServerRelativeUrl(): string { 49 | if ( 50 | window && 51 | window.hasOwnProperty("location") && 52 | window.location.hasOwnProperty("pathname") 53 | ) { 54 | return window.location.pathname.replace(/\/$/, ""); 55 | } 56 | return null; 57 | } 58 | 59 | /* 60 | * Function to get Layout Page Url 61 | * Replacement in SPFx for SP.Utilities.Utility.getLayoutsPageUrl('sp.js') 62 | * Samples: 63 | * getLayoutsPageUrl('sp.js') 64 | * "/sites/intranet/_layouts/15/sp.js" 65 | */ 66 | public static getLayoutsPageUrl(libraryName: string): string { 67 | if ( 68 | window && 69 | window.hasOwnProperty("location") && 70 | window.location.hasOwnProperty("pathname") && 71 | libraryName !== "" 72 | ) { 73 | if (window.location.pathname.indexOf(".aspx") > -1) { 74 | return window.location.pathname 75 | .split("/") 76 | .slice(0, -1) 77 | .join("/") 78 | .concat("/_layouts/15/", libraryName); 79 | } 80 | return ( 81 | window.location.pathname.replace(/\/$/, "") + 82 | "/_layouts/15/" + 83 | libraryName 84 | ); 85 | } 86 | return null; 87 | } 88 | 89 | /* 90 | * Function to get Current Domain Url 91 | * Samples: 92 | * "https://domain.sharepoint.com" 93 | */ 94 | public static getAbsoluteDomainUrl(): string { 95 | if ( 96 | window && 97 | window.hasOwnProperty("location") && 98 | window.location.hasOwnProperty("protocol") && 99 | window.location.hasOwnProperty("host") 100 | ) { 101 | return window.location.protocol + "//" + window.location.host; 102 | } 103 | return null; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /app/stylesheets/1_Settings/_settings.breakpoints.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Break Points used in Media Queriess 3 | 768px; ipad 4 | 320px; iphone 5 5 | 6 | :root { 7 | --maxWitdh: 1280px; 8 | --breakPointOne: 768px; 9 | --breakPointTwo: 320px; 10 | } 11 | 12 | */ 13 | -------------------------------------------------------------------------------- /app/stylesheets/1_Settings/_settings.colors.css: -------------------------------------------------------------------------------- 1 | /* 2 | * SETTINGS-COLORS 3 | */ 4 | 5 | /* 6 | * Primary colors 7 | */ 8 | :root { 9 | --bodyBackground: #e5e5e5; 10 | --newsImageBackground: #ebebeb; 11 | } 12 | -------------------------------------------------------------------------------- /app/stylesheets/1_Settings/_settings.global.css: -------------------------------------------------------------------------------- 1 | /* 2 | * SETTINGS-GLOBAL 3 | */ 4 | 5 | :root { 6 | --fontDefault: Arial, Verdana, helvetica, clean, sans-serif; 7 | } 8 | -------------------------------------------------------------------------------- /app/stylesheets/5_Objects/_objects.reactSelect.css: -------------------------------------------------------------------------------- 1 | /** 2 | * React Select 3 | * ============ 4 | * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/ 5 | * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs 6 | * MIT License: https://github.com/JedWatson/react-select 7 | */ 8 | .Select { 9 | position: relative; 10 | font-family: 'Segoe UI WestEuropean','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif; 11 | } 12 | 13 | .Select, 14 | .Select div, 15 | .Select input, 16 | .Select span { 17 | -webkit-box-sizing: border-box; 18 | -moz-box-sizing: border-box; 19 | box-sizing: border-box; 20 | } 21 | 22 | .Select.is-disabled > .Select-control { 23 | background-color: #f9f9f9; 24 | } 25 | 26 | .Select.is-disabled > .Select-control:hover { 27 | box-shadow: none; 28 | } 29 | 30 | .Select.is-disabled .Select-arrow-zone { 31 | cursor: default; 32 | pointer-events: none; 33 | opacity: .35; 34 | } 35 | 36 | .Select-control { 37 | background-color: #ffffff; 38 | border-color: #d9d9d9 #cccccc #b3b3b3; 39 | border: 1px solid #cccccc; 40 | color: #333333; 41 | cursor: default; 42 | display: table; 43 | border-spacing: 0; 44 | border-collapse: separate; 45 | height: 32px; 46 | outline: none; 47 | overflow: hidden; 48 | position: relative; 49 | width: 100%; 50 | } 51 | 52 | .Select-control:hover { 53 | box-shadow: 0 1px 0 rgba(0, 0, 0, .06); 54 | } 55 | 56 | .Select-control .Select-input:focus { 57 | outline: none; 58 | } 59 | 60 | .is-searchable.is-open > .Select-control { 61 | cursor: text; 62 | } 63 | 64 | .is-open > .Select-control { 65 | border-bottom-right-radius: 0; 66 | border-bottom-left-radius: 0; 67 | background: #ffffff; 68 | border-color: #b3b3b3 #cccccc #d9d9d9; 69 | } 70 | 71 | .is-open > .Select-control .Select-arrow { 72 | top: -2px; 73 | border-color: transparent transparent #999999; 74 | border-width: 0 5px 5px; 75 | } 76 | 77 | .is-searchable.is-focused:not(.is-open) > .Select-control { 78 | cursor: text; 79 | } 80 | 81 | .is-focused:not(.is-open) > .Select-control { 82 | border-color: #666666; 83 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 3px rgba(0, 126, 255, .1); 84 | } 85 | 86 | .Select-placeholder { 87 | font-size: 14px; 88 | color: #333333; 89 | text-align: left; 90 | } 91 | 92 | .Select-placeholder, 93 | .Select--single > .Select-control .Select-value { 94 | bottom: 0; 95 | color: #333333; 96 | left: 0; 97 | line-height: 30px; 98 | padding-left: 10px; 99 | padding-right: 10px; 100 | position: absolute; 101 | right: 0; 102 | top: 0; 103 | max-width: 100%; 104 | overflow: hidden; 105 | text-overflow: ellipsis; 106 | white-space: nowrap; 107 | } 108 | 109 | .has-value.Select--single > .Select-control .Select-value .Select-value-label, 110 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { 111 | color: #333333; 112 | } 113 | 114 | .has-value.Select--single > .Select-control .Select-value a.Select-value-label, 115 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label { 116 | cursor: pointer; 117 | text-decoration: none; 118 | } 119 | 120 | .has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, 121 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover, 122 | .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, 123 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { 124 | color: #666666; 125 | outline: none; 126 | text-decoration: underline; 127 | } 128 | 129 | .Select-input { 130 | height: 26px; 131 | padding-left: 10px; 132 | padding-right: 10px; 133 | vertical-align: middle; 134 | } 135 | 136 | .Select-input > input { 137 | width: 100%; 138 | background: none transparent; 139 | border: 0 none; 140 | box-shadow: none; 141 | cursor: default; 142 | display: inline-block; 143 | font-family: inherit; 144 | font-size: inherit; 145 | margin: 0; 146 | outline: none; 147 | line-height: 14px; 148 | /* For IE 8 compatibility */ 149 | padding: 4px 0 5px; 150 | /* For IE 8 compatibility */ 151 | -webkit-appearance: none; 152 | } 153 | 154 | .is-focused .Select-input > input { 155 | cursor: text; 156 | } 157 | 158 | .has-value.is-pseudo-focused .Select-input { 159 | opacity: 0; 160 | } 161 | 162 | .Select-control:not(.is-searchable) > .Select-input { 163 | outline: none; 164 | } 165 | 166 | .Select-loading-zone { 167 | cursor: pointer; 168 | display: table-cell; 169 | position: relative; 170 | text-align: center; 171 | vertical-align: middle; 172 | width: 16px; 173 | } 174 | 175 | .Select-loading { 176 | -webkit-animation: Select-animation-spin 400ms infinite linear; 177 | -o-animation: Select-animation-spin 400ms infinite linear; 178 | animation: Select-animation-spin 400ms infinite linear; 179 | width: 16px; 180 | height: 16px; 181 | box-sizing: border-box; 182 | border-radius: 50%; 183 | border: 2px solid #cccccc; 184 | border-right-color: #333333; 185 | display: inline-block; 186 | position: relative; 187 | vertical-align: middle; 188 | } 189 | 190 | .Select-clear-zone { 191 | -webkit-animation: Select-animation-fadeIn 200ms; 192 | -o-animation: Select-animation-fadeIn 200ms; 193 | animation: Select-animation-fadeIn 200ms; 194 | color: #999999; 195 | cursor: pointer; 196 | display: table-cell; 197 | position: relative; 198 | text-align: center; 199 | vertical-align: middle; 200 | width: 17px; 201 | } 202 | 203 | .Select-clear-zone:hover { 204 | color: #d0021b; 205 | } 206 | 207 | .Select-clear { 208 | display: inline-block; 209 | font-size: 18px; 210 | line-height: 1; 211 | } 212 | 213 | .Select--multi .Select-clear-zone { 214 | width: 17px; 215 | } 216 | 217 | .Select-arrow-zone { 218 | cursor: pointer; 219 | display: table-cell; 220 | position: relative; 221 | text-align: center; 222 | vertical-align: middle; 223 | width: 25px; 224 | padding-right: 5px; 225 | } 226 | 227 | .Select-arrow { 228 | border-color: #999999 transparent transparent; 229 | border-style: solid; 230 | border-width: 5px 5px 2.5px; 231 | display: inline-block; 232 | height: 0; 233 | width: 0; 234 | position: relative; 235 | } 236 | 237 | .is-open .Select-arrow, 238 | .Select-arrow-zone:hover > .Select-arrow { 239 | border-top-color: #666666; 240 | } 241 | 242 | .Select--multi .Select-multi-value-wrapper { 243 | display: inline-table; 244 | } 245 | 246 | .Select .Select-aria-only { 247 | display: inline-block; 248 | height: 1px; 249 | width: 1px; 250 | margin: -1px; 251 | clip: rect(0, 0, 0, 0); 252 | overflow: hidden; 253 | float: left; 254 | } 255 | 256 | @-webkit-keyframes Select-animation-fadeIn { 257 | from { 258 | opacity: 0; 259 | } 260 | 261 | to { 262 | opacity: 1; 263 | } 264 | } 265 | 266 | @keyframes Select-animation-fadeIn { 267 | from { 268 | opacity: 0; 269 | } 270 | 271 | to { 272 | opacity: 1; 273 | } 274 | } 275 | 276 | .Select-menu-outer { 277 | background-color: #ffffff; 278 | border: 1px solid #cccccc; 279 | border-top-color: #e6e6e6; 280 | box-shadow: 0 1px 0 rgba(0, 0, 0, .06); 281 | box-sizing: border-box; 282 | margin-top: -1px; 283 | max-height: 200px; 284 | position: absolute; 285 | top: 100%; 286 | width: 100%; 287 | z-index: 1; 288 | -webkit-overflow-scrolling: touch; 289 | } 290 | 291 | .Select-menu { 292 | max-height: 198px; 293 | overflow-y: auto; 294 | } 295 | 296 | .Select-option { 297 | box-sizing: border-box; 298 | background-color: #ffffff; 299 | color: #666666; 300 | cursor: pointer; 301 | display: block; 302 | padding: 8px 10px; 303 | font-size: 14px; 304 | } 305 | 306 | .Select-option.is-selected { 307 | background: #dadada; 308 | color: #333333; 309 | } 310 | 311 | .Select-option.is-focused { 312 | background: #dadada; 313 | color: #333333; 314 | } 315 | 316 | .Select-option.is-disabled { 317 | color: #cccccc; 318 | cursor: default; 319 | } 320 | 321 | .Select-noresults { 322 | box-sizing: border-box; 323 | color: #999999; 324 | cursor: default; 325 | display: block; 326 | padding: 8px 10px; 327 | font-size: 14px; 328 | } 329 | 330 | .Select--multi .Select-input { 331 | vertical-align: middle; 332 | margin-left: 10px; 333 | padding: 0; 334 | float: left; 335 | } 336 | 337 | .Select--multi.has-value .Select-input { 338 | margin-left: 5px; 339 | } 340 | 341 | .Select--multi .Select-value { 342 | border: 1px solid #dadada; 343 | background: #dadada; 344 | color: #666666; 345 | flex-shrink: 0; 346 | vertical-align: top; 347 | background: #f4f4f4; 348 | margin: 1px; 349 | height: 28px; 350 | line-height: 28px; 351 | vertical-align: top; 352 | white-space: nowrap; 353 | cursor: default; 354 | -webkit-user-select: none; 355 | -moz-user-select: none; 356 | -ms-user-select: none; 357 | user-select: none; 358 | float: left; 359 | } 360 | 361 | .Select--multi .Select-value-label { 362 | overflow: hidden; 363 | text-overflow: ellipsis; 364 | white-space: nowrap; 365 | display: inline-block; 366 | margin: 0 5px; 367 | font-size: 13px; 368 | } 369 | 370 | .Select--multi a.Select-value-label { 371 | color: #666666; 372 | cursor: pointer; 373 | text-decoration: none; 374 | } 375 | 376 | .Select--multi a.Select-value-label:hover { 377 | text-decoration: underline; 378 | } 379 | 380 | .Select--multi .Select-value-icon { 381 | background: #dadada; 382 | padding: 0; 383 | cursor: pointer; 384 | color: #666666; 385 | font-size: 12px; 386 | display: inline-block; 387 | text-align: center; 388 | vertical-align: top; 389 | width: 20px; 390 | height: 100%; 391 | float: left; 392 | line-height: 24px; 393 | } 394 | 395 | .Select--multi .Select-value-icon:hover, 396 | .Select--multi .Select-value-icon:focus { 397 | background: #dadada; 398 | color: #666666; 399 | } 400 | 401 | .Select--multi .Select-value-icon:active { 402 | background: #dadada; 403 | } 404 | 405 | .Select--multi.is-disabled .Select-value { 406 | background-color: #fcfcfc; 407 | border: 1px solid #e3e3e3; 408 | color: #333333; 409 | } 410 | 411 | .Select--multi.is-disabled .Select-value-icon { 412 | cursor: not-allowed; 413 | border-right: 1px solid #e3e3e3; 414 | } 415 | 416 | .Select--multi.is-disabled .Select-value-icon:hover, 417 | .Select--multi.is-disabled .Select-value-icon:focus, 418 | .Select--multi.is-disabled .Select-value-icon:active { 419 | background-color: #fcfcfc; 420 | } 421 | 422 | @keyframes Select-animation-spin { 423 | to { 424 | transform: rotate(1turn); 425 | } 426 | } 427 | 428 | @-webkit-keyframes Select-animation-spin { 429 | to { 430 | -webkit-transform: rotate(1turn); 431 | } 432 | } 433 | -------------------------------------------------------------------------------- /app/stylesheets/7_Trumps/_trumps.utilities.css: -------------------------------------------------------------------------------- 1 | /* 2 | * UTILITIES 3 | */ 4 | 5 | .u_divClear { 6 | clear: both; 7 | font-size: 0; 8 | } 9 | -------------------------------------------------------------------------------- /app/stylesheets/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | CSS Architecture framework: ITCSS 3 | 4 | Inverted Triangle Cascading Style Sheets 5 | 1. Settings: variables, configs 6 | 2. Tools: functions. clearfix, hidden, font-size 7 | 3. Generic: 3rd party, normalize.css, reset, shared, box-sizing 8 | 4. Base: bare elements, Unclassed HTML elements (type selectors), Page, Headings, Images, Tables 9 | 5. Objects: layout classes, wrapper, layout, media 10 | 6. Components: UI Classes 11 | 7. Trumps: Overrides, IDs and !important (Rules with high specificity) 12 | 13 | https://github.com/inuitcss/inuitcss 14 | */ 15 | 16 | /* 17 | * 1. SETTINGS 18 | */ 19 | @import '1_Settings/_settings.global.css'; 20 | @import '1_Settings/_settings.breakpoints.css'; 21 | @import '1_Settings/_settings.colors.css'; 22 | 23 | 24 | /** 25 | * 2. TOOLS 26 | Node Modules Styles 27 | 28 | @import 'react-select/dist/react-select.css'; 29 | */ 30 | /* 31 | @import 'office-ui-fabric-core/dist/css/fabric.min.css'; 32 | */ 33 | 34 | /** 35 | * 3. GENERIC 36 | */ 37 | /* 38 | @import '3_Generic/_generic.reset.css'; 39 | */ 40 | 41 | 42 | /** 43 | * 4. BASE 44 | */ 45 | 46 | /** 47 | * 5. OBJECTS 48 | */ 49 | @import '5_Objects/_objects.reactSelect.css'; 50 | 51 | 52 | 53 | /** 54 | * 6. COMPONENTS 55 | * NOTE: On this project, we decided to use CSS-Modules for components, 56 | * Then, every React component will have Component.module.css under its folder 57 | */ 58 | 59 | 60 | /** 61 | * 7. TRUMPS 62 | */ 63 | @import '7_Trumps/_trumps.utilities.css'; 64 | -------------------------------------------------------------------------------- /assets/react-taxonomy-picker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jquintozamora/react-taxonomypicker/ef277a662f0d0cc6ba6e2353e1f1e75450631b7a/assets/react-taxonomy-picker.gif -------------------------------------------------------------------------------- /assets/react-taxonomy-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jquintozamora/react-taxonomypicker/ef277a662f0d0cc6ba6e2353e1f1e75450631b7a/assets/react-taxonomy-picker.png -------------------------------------------------------------------------------- /dist/React.TaxonomyPicker.css: -------------------------------------------------------------------------------- 1 | /* 2 | CSS Architecture framework: ITCSS 3 | 4 | Inverted Triangle Cascading Style Sheets 5 | 1. Settings: variables, configs 6 | 2. Tools: functions. clearfix, hidden, font-size 7 | 3. Generic: 3rd party, normalize.css, reset, shared, box-sizing 8 | 4. Base: bare elements, Unclassed HTML elements (type selectors), Page, Headings, Images, Tables 9 | 5. Objects: layout classes, wrapper, layout, media 10 | 6. Components: UI Classes 11 | 7. Trumps: Overrides, IDs and !important (Rules with high specificity) 12 | 13 | https://github.com/inuitcss/inuitcss 14 | */ 15 | 16 | /* 17 | * 1. SETTINGS 18 | */ 19 | 20 | /* 21 | * SETTINGS-GLOBAL 22 | */ 23 | 24 | :root { 25 | --fontDefault: Arial, Verdana, helvetica, clean, sans-serif; 26 | } 27 | 28 | /* 29 | * Break Points used in Media Queriess 30 | 768px; ipad 31 | 320px; iphone 5 32 | 33 | :root { 34 | --maxWitdh: 1280px; 35 | --breakPointOne: 768px; 36 | --breakPointTwo: 320px; 37 | } 38 | 39 | */ 40 | 41 | /* 42 | * SETTINGS-COLORS 43 | */ 44 | 45 | /* 46 | * Primary colors 47 | */ 48 | 49 | :root { 50 | --bodyBackground: #e5e5e5; 51 | --newsImageBackground: #ebebeb; 52 | } 53 | 54 | /** 55 | * 2. TOOLS 56 | Node Modules Styles 57 | 58 | @import 'react-select/dist/react-select.css'; 59 | */ 60 | 61 | /* 62 | @import 'office-ui-fabric-core/dist/css/fabric.min.css'; 63 | */ 64 | 65 | /** 66 | * 3. GENERIC 67 | */ 68 | 69 | /* 70 | @import '3_Generic/_generic.reset.css'; 71 | */ 72 | 73 | /** 74 | * 4. BASE 75 | */ 76 | 77 | /** 78 | * 5. OBJECTS 79 | */ 80 | 81 | /** 82 | * React Select 83 | * ============ 84 | * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/ 85 | * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs 86 | * MIT License: https://github.com/JedWatson/react-select 87 | */ 88 | 89 | .Select { 90 | position: relative; 91 | font-family: 'Segoe UI WestEuropean','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif; 92 | } 93 | 94 | .Select, 95 | .Select div, 96 | .Select input, 97 | .Select span { 98 | box-sizing: border-box; 99 | } 100 | 101 | .Select.is-disabled > .Select-control { 102 | background-color: #f9f9f9; 103 | } 104 | 105 | .Select.is-disabled > .Select-control:hover { 106 | box-shadow: none; 107 | } 108 | 109 | .Select.is-disabled .Select-arrow-zone { 110 | cursor: default; 111 | pointer-events: none; 112 | opacity: .35; 113 | } 114 | 115 | .Select-control { 116 | background-color: #ffffff; 117 | border-color: #d9d9d9 #cccccc #b3b3b3; 118 | border: 1px solid #cccccc; 119 | color: #333333; 120 | cursor: default; 121 | display: table; 122 | border-spacing: 0; 123 | border-collapse: separate; 124 | height: 32px; 125 | outline: none; 126 | overflow: hidden; 127 | position: relative; 128 | width: 100%; 129 | } 130 | 131 | .Select-control:hover { 132 | box-shadow: 0 1px 0 rgba(0, 0, 0, .06); 133 | } 134 | 135 | .Select-control .Select-input:focus { 136 | outline: none; 137 | } 138 | 139 | .is-searchable.is-open > .Select-control { 140 | cursor: text; 141 | } 142 | 143 | .is-open > .Select-control { 144 | border-bottom-right-radius: 0; 145 | border-bottom-left-radius: 0; 146 | background: #ffffff; 147 | border-color: #b3b3b3 #cccccc #d9d9d9; 148 | } 149 | 150 | .is-open > .Select-control .Select-arrow { 151 | top: -2px; 152 | border-color: transparent transparent #999999; 153 | border-width: 0 5px 5px; 154 | } 155 | 156 | .is-searchable.is-focused:not(.is-open) > .Select-control { 157 | cursor: text; 158 | } 159 | 160 | .is-focused:not(.is-open) > .Select-control { 161 | border-color: #666666; 162 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 3px rgba(0, 126, 255, .1); 163 | } 164 | 165 | .Select-placeholder { 166 | font-size: 14px; 167 | color: #333333; 168 | text-align: left; 169 | } 170 | 171 | .Select-placeholder, 172 | .Select--single > .Select-control .Select-value { 173 | bottom: 0; 174 | color: #333333; 175 | left: 0; 176 | line-height: 30px; 177 | padding-left: 10px; 178 | padding-right: 10px; 179 | position: absolute; 180 | right: 0; 181 | top: 0; 182 | max-width: 100%; 183 | overflow: hidden; 184 | text-overflow: ellipsis; 185 | white-space: nowrap; 186 | } 187 | 188 | .has-value.Select--single > .Select-control .Select-value .Select-value-label, 189 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { 190 | color: #333333; 191 | } 192 | 193 | .has-value.Select--single > .Select-control .Select-value a.Select-value-label, 194 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label { 195 | cursor: pointer; 196 | text-decoration: none; 197 | } 198 | 199 | .has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, 200 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover, 201 | .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, 202 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { 203 | color: #666666; 204 | outline: none; 205 | text-decoration: underline; 206 | } 207 | 208 | .Select-input { 209 | height: 26px; 210 | padding-left: 10px; 211 | padding-right: 10px; 212 | vertical-align: middle; 213 | } 214 | 215 | .Select-input > input { 216 | width: 100%; 217 | background: none transparent; 218 | border: 0 none; 219 | box-shadow: none; 220 | cursor: default; 221 | display: inline-block; 222 | font-family: inherit; 223 | font-size: inherit; 224 | margin: 0; 225 | outline: none; 226 | line-height: 14px; 227 | /* For IE 8 compatibility */ 228 | padding: 4px 0 5px; 229 | /* For IE 8 compatibility */ 230 | -webkit-appearance: none; 231 | } 232 | 233 | .is-focused .Select-input > input { 234 | cursor: text; 235 | } 236 | 237 | .has-value.is-pseudo-focused .Select-input { 238 | opacity: 0; 239 | } 240 | 241 | .Select-control:not(.is-searchable) > .Select-input { 242 | outline: none; 243 | } 244 | 245 | .Select-loading-zone { 246 | cursor: pointer; 247 | display: table-cell; 248 | position: relative; 249 | text-align: center; 250 | vertical-align: middle; 251 | width: 16px; 252 | } 253 | 254 | .Select-loading { 255 | -webkit-animation: Select-animation-spin 400ms infinite linear; 256 | animation: Select-animation-spin 400ms infinite linear; 257 | width: 16px; 258 | height: 16px; 259 | box-sizing: border-box; 260 | border-radius: 50%; 261 | border: 2px solid #cccccc; 262 | border-right-color: #333333; 263 | display: inline-block; 264 | position: relative; 265 | vertical-align: middle; 266 | } 267 | 268 | .Select-clear-zone { 269 | -webkit-animation: Select-animation-fadeIn 200ms; 270 | animation: Select-animation-fadeIn 200ms; 271 | color: #999999; 272 | cursor: pointer; 273 | display: table-cell; 274 | position: relative; 275 | text-align: center; 276 | vertical-align: middle; 277 | width: 17px; 278 | } 279 | 280 | .Select-clear-zone:hover { 281 | color: #d0021b; 282 | } 283 | 284 | .Select-clear { 285 | display: inline-block; 286 | font-size: 18px; 287 | line-height: 1; 288 | } 289 | 290 | .Select--multi .Select-clear-zone { 291 | width: 17px; 292 | } 293 | 294 | .Select-arrow-zone { 295 | cursor: pointer; 296 | display: table-cell; 297 | position: relative; 298 | text-align: center; 299 | vertical-align: middle; 300 | width: 25px; 301 | padding-right: 5px; 302 | } 303 | 304 | .Select-arrow { 305 | border-color: #999999 transparent transparent; 306 | border-style: solid; 307 | border-width: 5px 5px 2.5px; 308 | display: inline-block; 309 | height: 0; 310 | width: 0; 311 | position: relative; 312 | } 313 | 314 | .is-open .Select-arrow, 315 | .Select-arrow-zone:hover > .Select-arrow { 316 | border-top-color: #666666; 317 | } 318 | 319 | .Select--multi .Select-multi-value-wrapper { 320 | display: inline-table; 321 | } 322 | 323 | .Select .Select-aria-only { 324 | display: inline-block; 325 | height: 1px; 326 | width: 1px; 327 | margin: -1px; 328 | clip: rect(0, 0, 0, 0); 329 | overflow: hidden; 330 | float: left; 331 | } 332 | 333 | @-webkit-keyframes Select-animation-fadeIn { 334 | from { 335 | opacity: 0; 336 | } 337 | 338 | to { 339 | opacity: 1; 340 | } 341 | } 342 | 343 | @keyframes Select-animation-fadeIn { 344 | from { 345 | opacity: 0; 346 | } 347 | 348 | to { 349 | opacity: 1; 350 | } 351 | } 352 | 353 | .Select-menu-outer { 354 | background-color: #ffffff; 355 | border: 1px solid #cccccc; 356 | border-top-color: #e6e6e6; 357 | box-shadow: 0 1px 0 rgba(0, 0, 0, .06); 358 | box-sizing: border-box; 359 | margin-top: -1px; 360 | max-height: 200px; 361 | position: absolute; 362 | top: 100%; 363 | width: 100%; 364 | z-index: 1; 365 | -webkit-overflow-scrolling: touch; 366 | } 367 | 368 | .Select-menu { 369 | max-height: 198px; 370 | overflow-y: auto; 371 | } 372 | 373 | .Select-option { 374 | box-sizing: border-box; 375 | background-color: #ffffff; 376 | color: #666666; 377 | cursor: pointer; 378 | display: block; 379 | padding: 8px 10px; 380 | font-size: 14px; 381 | } 382 | 383 | .Select-option.is-selected { 384 | background: #dadada; 385 | color: #333333; 386 | } 387 | 388 | .Select-option.is-focused { 389 | background: #dadada; 390 | color: #333333; 391 | } 392 | 393 | .Select-option.is-disabled { 394 | color: #cccccc; 395 | cursor: default; 396 | } 397 | 398 | .Select-noresults { 399 | box-sizing: border-box; 400 | color: #999999; 401 | cursor: default; 402 | display: block; 403 | padding: 8px 10px; 404 | font-size: 14px; 405 | } 406 | 407 | .Select--multi .Select-input { 408 | vertical-align: middle; 409 | margin-left: 10px; 410 | padding: 0; 411 | float: left; 412 | } 413 | 414 | .Select--multi.has-value .Select-input { 415 | margin-left: 5px; 416 | } 417 | 418 | .Select--multi .Select-value { 419 | border: 1px solid #dadada; 420 | background: #dadada; 421 | color: #666666; 422 | flex-shrink: 0; 423 | vertical-align: top; 424 | background: #f4f4f4; 425 | margin: 1px; 426 | height: 28px; 427 | line-height: 28px; 428 | vertical-align: top; 429 | white-space: nowrap; 430 | cursor: default; 431 | -webkit-user-select: none; 432 | -moz-user-select: none; 433 | -ms-user-select: none; 434 | user-select: none; 435 | float: left; 436 | } 437 | 438 | .Select--multi .Select-value-label { 439 | overflow: hidden; 440 | text-overflow: ellipsis; 441 | white-space: nowrap; 442 | display: inline-block; 443 | margin: 0 5px; 444 | font-size: 13px; 445 | } 446 | 447 | .Select--multi a.Select-value-label { 448 | color: #666666; 449 | cursor: pointer; 450 | text-decoration: none; 451 | } 452 | 453 | .Select--multi a.Select-value-label:hover { 454 | text-decoration: underline; 455 | } 456 | 457 | .Select--multi .Select-value-icon { 458 | background: #dadada; 459 | padding: 0; 460 | cursor: pointer; 461 | color: #666666; 462 | font-size: 12px; 463 | display: inline-block; 464 | text-align: center; 465 | vertical-align: top; 466 | width: 20px; 467 | height: 100%; 468 | float: left; 469 | line-height: 24px; 470 | } 471 | 472 | .Select--multi .Select-value-icon:hover, 473 | .Select--multi .Select-value-icon:focus { 474 | background: #dadada; 475 | color: #666666; 476 | } 477 | 478 | .Select--multi .Select-value-icon:active { 479 | background: #dadada; 480 | } 481 | 482 | .Select--multi.is-disabled .Select-value { 483 | background-color: #fcfcfc; 484 | border: 1px solid #e3e3e3; 485 | color: #333333; 486 | } 487 | 488 | .Select--multi.is-disabled .Select-value-icon { 489 | cursor: not-allowed; 490 | border-right: 1px solid #e3e3e3; 491 | } 492 | 493 | .Select--multi.is-disabled .Select-value-icon:hover, 494 | .Select--multi.is-disabled .Select-value-icon:focus, 495 | .Select--multi.is-disabled .Select-value-icon:active { 496 | background-color: #fcfcfc; 497 | } 498 | 499 | @keyframes Select-animation-spin { 500 | to { 501 | transform: rotate(1turn); 502 | } 503 | } 504 | 505 | @-webkit-keyframes Select-animation-spin { 506 | to { 507 | -webkit-transform: rotate(1turn); 508 | } 509 | } 510 | 511 | /** 512 | * 6. COMPONENTS 513 | * NOTE: On this project, we decided to use CSS-Modules for components, 514 | * Then, every React component will have Component.module.css under its folder 515 | */ 516 | 517 | /** 518 | * 7. TRUMPS 519 | */ 520 | 521 | /* 522 | * UTILITIES 523 | */ 524 | 525 | .u_divClear { 526 | clear: both; 527 | font-size: 0; 528 | } 529 | 530 | .TaxonomyPicker-module_label_3PMfL { 531 | font-family: 'Segoe UI WestEuropean','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif; 532 | text-align: left; 533 | font-size: 16px; 534 | display: block; 535 | color: black; 536 | margin-top: 10px; 537 | padding: 5px 0; 538 | -webkit-font-smoothing: antialiased; 539 | box-shadow: none; 540 | box-sizing: border-box; 541 | } 542 | 543 | 544 | /*# sourceMappingURL=React.TaxonomyPicker.css.map*/ -------------------------------------------------------------------------------- /dist/React.TaxonomyPicker.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack://TaxonomyPicker/./app/stylesheets/main.css","webpack://TaxonomyPicker/main.css","webpack://TaxonomyPicker/./app/stylesheets/1_Settings/_settings.global.css","webpack://TaxonomyPicker/./app/stylesheets/1_Settings/_settings.breakpoints.css","webpack://TaxonomyPicker/./app/stylesheets/1_Settings/_settings.colors.css","webpack://TaxonomyPicker/./app/stylesheets/5_Objects/_objects.reactSelect.css","webpack://TaxonomyPicker/./app/stylesheets/7_Trumps/_trumps.utilities.css","webpack://TaxonomyPicker/TaxonomyPicker.module.css"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;ECaE;;ADEF;;ECEE;;ACjBF;;EDqBE;;ACjBF;EACE;ADoBF;;AEzBA;;;;;;;;;;;CFsCC;;AGtCD;;EH0CE;;AGtCF;;GH0CG;;AGvCH;EACE;EACA;AH0CF;;AD5BA;;;;;ECmCE;;AD7BF;;CCiCC;;AD7BD;;ECiCE;;AD9BF;;CCkCC;;AD7BD;;ECiCE;;AD7BF;;ECiCE;;AI9EF;;;;;;CJsFC;;AI/ED;EACE;EACA;AJkFF;;AI/EA;;;;EAME;AJgFF;;AI7EA;EACE;AJgFF;;AI7EA;EACE;AJgFF;;AI7EA;EACE;EACA;EACA;AJgFF;;AI7EA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AJgFF;;AI7EA;EACE;AJgFF;;AI7EA;EACE;AJgFF;;AI7EA;EACE;AJgFF;;AI7EA;EACE;EACA;EACA;EACA;AJgFF;;AI7EA;EACE;EACA;EACA;AJgFF;;AI7EA;EACE;AJgFF;;AI7EA;EACE;EACA;AJgFF;;AI7EA;EACE;EACA;EACA;AJgFF;;AI7EA;;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AJgFF;;AI7EA;;EAEE;AJgFF;;AI7EA;;EAEE;EACA;AJgFF;;AI7EA;;;;EAIE;EACA;EACA;AJgFF;;AI7EA;EACE;EACA;EACA;EACA;AJgFF;;AI7EA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AJgFF;;AI7EA;EACE;AJgFF;;AI7EA;EACE;AJgFF;;AI7EA;EACE;AJgFF;;AI7EA;EACE;EACA;EACA;EACA;EACA;EACA;AJgFF;;AI7EA;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AJ+EF;;AI5EA;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AJ8EF;;AI3EA;EACE;AJ8EF;;AI3EA;EACE;EACA;EACA;AJ8EF;;AI3EA;EACE;AJ8EF;;AI3EA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AJ8EF;;AI3EA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AJ8EF;;AI3EA;;EAEE;AJ8EF;;AI3EA;EACE;AJ8EF;;AI3EA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AJ8EF;;AI3EA;EACE;IACE;EJ8EF;;EI3EA;IACE;EJ8EF;AACF;;AI3EA;EACE;IACE;EJ8EF;;EI3EA;IACE;EJ8EF;AACF;;AI3EA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AJ8EF;;AI3EA;EACE;EACA;AJ8EF;;AI3EA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AJ8EF;;AI3EA;EACE;EACA;AJ8EF;;AI3EA;EACE;EACA;AJ8EF;;AI3EA;EACE;EACA;AJ8EF;;AI3EA;EACE;EACA;EACA;EACA;EACA;EACA;AJ8EF;;AI3EA;EACE;EACA;EACA;EACA;AJ8EF;;AI3EA;EACE;AJ8EF;;AI3EA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AJ8EF;;AI3EA;EACE;EACA;EACA;EACA;EACA;EACA;AJ8EF;;AI3EA;EACE;EACA;EACA;AJ8EF;;AI3EA;EACE;AJ8EF;;AI3EA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AJ8EF;;AI3EA;;EAEE;EACA;AJ8EF;;AI3EA;EACE;AJ8EF;;AI3EA;EACE;EACA;EACA;AJ8EF;;AI3EA;EACE;EACA;AJ8EF;;AI3EA;;;EAGE;AJ8EF;;AI3EA;EACE;IACE;EJ8EF;AACF;;AI3EA;EACE;IACE;EJ8EF;AACF;;ADxcA;;;;EC8cE;;ADvcF;;EC2cE;;AKtgBF;;EL0gBE;;AKtgBF;EACE;EACA;ALygBF;;AM/gBA;EACE,mHAAmH;EACnH,gBAAgB;EAChB,eAAe;EACf,cAAc;EACd,YAAY;EACZ,gBAAgB;EAChB,cAAc;EACd,mCAAmC;EACnC,gBAAgB;EAChB,sBAAsB;AACxB","file":"../dist/React.TaxonomyPicker.css","sourcesContent":["/*\n CSS Architecture framework: ITCSS\n\n Inverted Triangle Cascading Style Sheets\n 1. Settings: variables, configs\n 2. Tools: functions. clearfix, hidden, font-size\n 3. Generic: 3rd party, normalize.css, reset, shared, box-sizing\n 4. Base: bare elements, Unclassed HTML elements (type selectors), Page, Headings, Images, Tables\n 5. Objects: layout classes, wrapper, layout, media\n 6. Components: UI Classes\n 7. Trumps: Overrides, IDs and !important (Rules with high specificity)\n\n https://github.com/inuitcss/inuitcss\n */\n\n/*\n * 1. SETTINGS\n */\n@import '1_Settings/_settings.global.css';\n@import '1_Settings/_settings.breakpoints.css';\n@import '1_Settings/_settings.colors.css';\n\n\n/**\n * 2. TOOLS\n Node Modules Styles\n\n @import 'react-select/dist/react-select.css';\n */\n/*\n@import 'office-ui-fabric-core/dist/css/fabric.min.css';\n*/\n\n/**\n * 3. GENERIC\n */\n/*\n@import '3_Generic/_generic.reset.css';\n*/\n\n\n/**\n * 4. BASE\n */\n\n/**\n * 5. OBJECTS\n */\n@import '5_Objects/_objects.reactSelect.css';\n\n\n\n/**\n * 6. COMPONENTS\n * NOTE: On this project, we decided to use CSS-Modules for components,\n * Then, every React component will have Component.module.css under its folder\n */\n\n\n/**\n * 7. TRUMPS\n */\n@import '7_Trumps/_trumps.utilities.css';\n","/*\n CSS Architecture framework: ITCSS\n\n Inverted Triangle Cascading Style Sheets\n 1. Settings: variables, configs\n 2. Tools: functions. clearfix, hidden, font-size\n 3. Generic: 3rd party, normalize.css, reset, shared, box-sizing\n 4. Base: bare elements, Unclassed HTML elements (type selectors), Page, Headings, Images, Tables\n 5. Objects: layout classes, wrapper, layout, media\n 6. Components: UI Classes\n 7. Trumps: Overrides, IDs and !important (Rules with high specificity)\n\n https://github.com/inuitcss/inuitcss\n */\n\n/*\n * 1. SETTINGS\n */\n\n/*\n * SETTINGS-GLOBAL\n */\n\n:root {\n --fontDefault: Arial, Verdana, helvetica, clean, sans-serif;\n}\n\n/*\n * Break Points used in Media Queriess\n 768px; ipad\n 320px; iphone 5\n\n:root {\n --maxWitdh: 1280px;\n --breakPointOne: 768px;\n --breakPointTwo: 320px;\n}\n\n*/\n\n/*\n * SETTINGS-COLORS\n */\n\n/*\n * Primary colors\n */\n\n:root {\n --bodyBackground: #e5e5e5;\n --newsImageBackground: #ebebeb;\n}\n\n/**\n * 2. TOOLS\n Node Modules Styles\n\n @import 'react-select/dist/react-select.css';\n */\n\n/*\n@import 'office-ui-fabric-core/dist/css/fabric.min.css';\n*/\n\n/**\n * 3. GENERIC\n */\n\n/*\n@import '3_Generic/_generic.reset.css';\n*/\n\n/**\n * 4. BASE\n */\n\n/**\n * 5. OBJECTS\n */\n\n/**\n * React Select\n * ============\n * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/\n * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs\n * MIT License: https://github.com/JedWatson/react-select\n*/\n\n.Select {\n position: relative;\n font-family: 'Segoe UI WestEuropean','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;\n}\n\n.Select,\n.Select div,\n.Select input,\n.Select span {\n box-sizing: border-box;\n}\n\n.Select.is-disabled > .Select-control {\n background-color: #f9f9f9;\n}\n\n.Select.is-disabled > .Select-control:hover {\n box-shadow: none;\n}\n\n.Select.is-disabled .Select-arrow-zone {\n cursor: default;\n pointer-events: none;\n opacity: .35;\n}\n\n.Select-control {\n background-color: #ffffff;\n border-color: #d9d9d9 #cccccc #b3b3b3;\n border: 1px solid #cccccc;\n color: #333333;\n cursor: default;\n display: table;\n border-spacing: 0;\n border-collapse: separate;\n height: 32px;\n outline: none;\n overflow: hidden;\n position: relative;\n width: 100%;\n}\n\n.Select-control:hover {\n box-shadow: 0 1px 0 rgba(0, 0, 0, .06);\n}\n\n.Select-control .Select-input:focus {\n outline: none;\n}\n\n.is-searchable.is-open > .Select-control {\n cursor: text;\n}\n\n.is-open > .Select-control {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n background: #ffffff;\n border-color: #b3b3b3 #cccccc #d9d9d9;\n}\n\n.is-open > .Select-control .Select-arrow {\n top: -2px;\n border-color: transparent transparent #999999;\n border-width: 0 5px 5px;\n}\n\n.is-searchable.is-focused:not(.is-open) > .Select-control {\n cursor: text;\n}\n\n.is-focused:not(.is-open) > .Select-control {\n border-color: #666666;\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 3px rgba(0, 126, 255, .1);\n}\n\n.Select-placeholder {\n font-size: 14px;\n color: #333333;\n text-align: left;\n}\n\n.Select-placeholder,\n.Select--single > .Select-control .Select-value {\n bottom: 0;\n color: #333333;\n left: 0;\n line-height: 30px;\n padding-left: 10px;\n padding-right: 10px;\n position: absolute;\n right: 0;\n top: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.has-value.Select--single > .Select-control .Select-value .Select-value-label,\n.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {\n color: #333333;\n}\n\n.has-value.Select--single > .Select-control .Select-value a.Select-value-label,\n.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {\n cursor: pointer;\n text-decoration: none;\n}\n\n.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,\n.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,\n.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,\n.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {\n color: #666666;\n outline: none;\n text-decoration: underline;\n}\n\n.Select-input {\n height: 26px;\n padding-left: 10px;\n padding-right: 10px;\n vertical-align: middle;\n}\n\n.Select-input > input {\n width: 100%;\n background: none transparent;\n border: 0 none;\n box-shadow: none;\n cursor: default;\n display: inline-block;\n font-family: inherit;\n font-size: inherit;\n margin: 0;\n outline: none;\n line-height: 14px;\n /* For IE 8 compatibility */\n padding: 4px 0 5px;\n /* For IE 8 compatibility */\n -webkit-appearance: none;\n}\n\n.is-focused .Select-input > input {\n cursor: text;\n}\n\n.has-value.is-pseudo-focused .Select-input {\n opacity: 0;\n}\n\n.Select-control:not(.is-searchable) > .Select-input {\n outline: none;\n}\n\n.Select-loading-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 16px;\n}\n\n.Select-loading {\n -webkit-animation: Select-animation-spin 400ms infinite linear;\n animation: Select-animation-spin 400ms infinite linear;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border-radius: 50%;\n border: 2px solid #cccccc;\n border-right-color: #333333;\n display: inline-block;\n position: relative;\n vertical-align: middle;\n}\n\n.Select-clear-zone {\n -webkit-animation: Select-animation-fadeIn 200ms;\n animation: Select-animation-fadeIn 200ms;\n color: #999999;\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 17px;\n}\n\n.Select-clear-zone:hover {\n color: #d0021b;\n}\n\n.Select-clear {\n display: inline-block;\n font-size: 18px;\n line-height: 1;\n}\n\n.Select--multi .Select-clear-zone {\n width: 17px;\n}\n\n.Select-arrow-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 25px;\n padding-right: 5px;\n}\n\n.Select-arrow {\n border-color: #999999 transparent transparent;\n border-style: solid;\n border-width: 5px 5px 2.5px;\n display: inline-block;\n height: 0;\n width: 0;\n position: relative;\n}\n\n.is-open .Select-arrow,\n.Select-arrow-zone:hover > .Select-arrow {\n border-top-color: #666666;\n}\n\n.Select--multi .Select-multi-value-wrapper {\n display: inline-table;\n}\n\n.Select .Select-aria-only {\n display: inline-block;\n height: 1px;\n width: 1px;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n overflow: hidden;\n float: left;\n}\n\n@-webkit-keyframes Select-animation-fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes Select-animation-fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.Select-menu-outer {\n background-color: #ffffff;\n border: 1px solid #cccccc;\n border-top-color: #e6e6e6;\n box-shadow: 0 1px 0 rgba(0, 0, 0, .06);\n box-sizing: border-box;\n margin-top: -1px;\n max-height: 200px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: 1;\n -webkit-overflow-scrolling: touch;\n}\n\n.Select-menu {\n max-height: 198px;\n overflow-y: auto;\n}\n\n.Select-option {\n box-sizing: border-box;\n background-color: #ffffff;\n color: #666666;\n cursor: pointer;\n display: block;\n padding: 8px 10px;\n font-size: 14px;\n}\n\n.Select-option.is-selected {\n background: #dadada;\n color: #333333;\n}\n\n.Select-option.is-focused {\n background: #dadada;\n color: #333333;\n}\n\n.Select-option.is-disabled {\n color: #cccccc;\n cursor: default;\n}\n\n.Select-noresults {\n box-sizing: border-box;\n color: #999999;\n cursor: default;\n display: block;\n padding: 8px 10px;\n font-size: 14px;\n}\n\n.Select--multi .Select-input {\n vertical-align: middle;\n margin-left: 10px;\n padding: 0;\n float: left;\n}\n\n.Select--multi.has-value .Select-input {\n margin-left: 5px;\n}\n\n.Select--multi .Select-value {\n border: 1px solid #dadada;\n background: #dadada;\n color: #666666;\n flex-shrink: 0;\n vertical-align: top;\n background: #f4f4f4;\n margin: 1px;\n height: 28px;\n line-height: 28px;\n vertical-align: top;\n white-space: nowrap;\n cursor: default;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n float: left;\n}\n\n.Select--multi .Select-value-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n margin: 0 5px;\n font-size: 13px;\n}\n\n.Select--multi a.Select-value-label {\n color: #666666;\n cursor: pointer;\n text-decoration: none;\n}\n\n.Select--multi a.Select-value-label:hover {\n text-decoration: underline;\n}\n\n.Select--multi .Select-value-icon {\n background: #dadada;\n padding: 0;\n cursor: pointer;\n color: #666666;\n font-size: 12px;\n display: inline-block;\n text-align: center;\n vertical-align: top;\n width: 20px;\n height: 100%;\n float: left;\n line-height: 24px;\n}\n\n.Select--multi .Select-value-icon:hover,\n.Select--multi .Select-value-icon:focus {\n background: #dadada;\n color: #666666;\n}\n\n.Select--multi .Select-value-icon:active {\n background: #dadada;\n}\n\n.Select--multi.is-disabled .Select-value {\n background-color: #fcfcfc;\n border: 1px solid #e3e3e3;\n color: #333333;\n}\n\n.Select--multi.is-disabled .Select-value-icon {\n cursor: not-allowed;\n border-right: 1px solid #e3e3e3;\n}\n\n.Select--multi.is-disabled .Select-value-icon:hover,\n.Select--multi.is-disabled .Select-value-icon:focus,\n.Select--multi.is-disabled .Select-value-icon:active {\n background-color: #fcfcfc;\n}\n\n@keyframes Select-animation-spin {\n to {\n transform: rotate(1turn);\n }\n}\n\n@-webkit-keyframes Select-animation-spin {\n to {\n -webkit-transform: rotate(1turn);\n }\n}\n\n/**\n * 6. COMPONENTS\n * NOTE: On this project, we decided to use CSS-Modules for components,\n * Then, every React component will have Component.module.css under its folder\n */\n\n/**\n * 7. TRUMPS\n */\n\n/*\n * UTILITIES\n */\n\n.u_divClear {\n clear: both;\n font-size: 0;\n}\n","/*\n * SETTINGS-GLOBAL\n */\n\n:root {\n --fontDefault: Arial, Verdana, helvetica, clean, sans-serif;\n}\n","/*\n * Break Points used in Media Queriess\n 768px; ipad\n 320px; iphone 5\n\n:root {\n --maxWitdh: 1280px;\n --breakPointOne: 768px;\n --breakPointTwo: 320px;\n}\n\n*/\n","/*\n * SETTINGS-COLORS\n */\n\n/*\n * Primary colors\n */\n:root {\n --bodyBackground: #e5e5e5;\n --newsImageBackground: #ebebeb;\n}\n","/**\n * React Select\n * ============\n * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/\n * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs\n * MIT License: https://github.com/JedWatson/react-select\n*/\n.Select {\n position: relative;\n font-family: 'Segoe UI WestEuropean','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;\n}\n\n.Select,\n.Select div,\n.Select input,\n.Select span {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.Select.is-disabled > .Select-control {\n background-color: #f9f9f9;\n}\n\n.Select.is-disabled > .Select-control:hover {\n box-shadow: none;\n}\n\n.Select.is-disabled .Select-arrow-zone {\n cursor: default;\n pointer-events: none;\n opacity: .35;\n}\n\n.Select-control {\n background-color: #ffffff;\n border-color: #d9d9d9 #cccccc #b3b3b3;\n border: 1px solid #cccccc;\n color: #333333;\n cursor: default;\n display: table;\n border-spacing: 0;\n border-collapse: separate;\n height: 32px;\n outline: none;\n overflow: hidden;\n position: relative;\n width: 100%;\n}\n\n.Select-control:hover {\n box-shadow: 0 1px 0 rgba(0, 0, 0, .06);\n}\n\n.Select-control .Select-input:focus {\n outline: none;\n}\n\n.is-searchable.is-open > .Select-control {\n cursor: text;\n}\n\n.is-open > .Select-control {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n background: #ffffff;\n border-color: #b3b3b3 #cccccc #d9d9d9;\n}\n\n.is-open > .Select-control .Select-arrow {\n top: -2px;\n border-color: transparent transparent #999999;\n border-width: 0 5px 5px;\n}\n\n.is-searchable.is-focused:not(.is-open) > .Select-control {\n cursor: text;\n}\n\n.is-focused:not(.is-open) > .Select-control {\n border-color: #666666;\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 3px rgba(0, 126, 255, .1);\n}\n\n.Select-placeholder {\n font-size: 14px;\n color: #333333;\n text-align: left;\n}\n\n.Select-placeholder,\n.Select--single > .Select-control .Select-value {\n bottom: 0;\n color: #333333;\n left: 0;\n line-height: 30px;\n padding-left: 10px;\n padding-right: 10px;\n position: absolute;\n right: 0;\n top: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.has-value.Select--single > .Select-control .Select-value .Select-value-label,\n.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {\n color: #333333;\n}\n\n.has-value.Select--single > .Select-control .Select-value a.Select-value-label,\n.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {\n cursor: pointer;\n text-decoration: none;\n}\n\n.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,\n.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,\n.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,\n.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {\n color: #666666;\n outline: none;\n text-decoration: underline;\n}\n\n.Select-input {\n height: 26px;\n padding-left: 10px;\n padding-right: 10px;\n vertical-align: middle;\n}\n\n.Select-input > input {\n width: 100%;\n background: none transparent;\n border: 0 none;\n box-shadow: none;\n cursor: default;\n display: inline-block;\n font-family: inherit;\n font-size: inherit;\n margin: 0;\n outline: none;\n line-height: 14px;\n /* For IE 8 compatibility */\n padding: 4px 0 5px;\n /* For IE 8 compatibility */\n -webkit-appearance: none;\n}\n\n.is-focused .Select-input > input {\n cursor: text;\n}\n\n.has-value.is-pseudo-focused .Select-input {\n opacity: 0;\n}\n\n.Select-control:not(.is-searchable) > .Select-input {\n outline: none;\n}\n\n.Select-loading-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 16px;\n}\n\n.Select-loading {\n -webkit-animation: Select-animation-spin 400ms infinite linear;\n -o-animation: Select-animation-spin 400ms infinite linear;\n animation: Select-animation-spin 400ms infinite linear;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border-radius: 50%;\n border: 2px solid #cccccc;\n border-right-color: #333333;\n display: inline-block;\n position: relative;\n vertical-align: middle;\n}\n\n.Select-clear-zone {\n -webkit-animation: Select-animation-fadeIn 200ms;\n -o-animation: Select-animation-fadeIn 200ms;\n animation: Select-animation-fadeIn 200ms;\n color: #999999;\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 17px;\n}\n\n.Select-clear-zone:hover {\n color: #d0021b;\n}\n\n.Select-clear {\n display: inline-block;\n font-size: 18px;\n line-height: 1;\n}\n\n.Select--multi .Select-clear-zone {\n width: 17px;\n}\n\n.Select-arrow-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 25px;\n padding-right: 5px;\n}\n\n.Select-arrow {\n border-color: #999999 transparent transparent;\n border-style: solid;\n border-width: 5px 5px 2.5px;\n display: inline-block;\n height: 0;\n width: 0;\n position: relative;\n}\n\n.is-open .Select-arrow,\n.Select-arrow-zone:hover > .Select-arrow {\n border-top-color: #666666;\n}\n\n.Select--multi .Select-multi-value-wrapper {\n display: inline-table;\n}\n\n.Select .Select-aria-only {\n display: inline-block;\n height: 1px;\n width: 1px;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n overflow: hidden;\n float: left;\n}\n\n@-webkit-keyframes Select-animation-fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes Select-animation-fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.Select-menu-outer {\n background-color: #ffffff;\n border: 1px solid #cccccc;\n border-top-color: #e6e6e6;\n box-shadow: 0 1px 0 rgba(0, 0, 0, .06);\n box-sizing: border-box;\n margin-top: -1px;\n max-height: 200px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: 1;\n -webkit-overflow-scrolling: touch;\n}\n\n.Select-menu {\n max-height: 198px;\n overflow-y: auto;\n}\n\n.Select-option {\n box-sizing: border-box;\n background-color: #ffffff;\n color: #666666;\n cursor: pointer;\n display: block;\n padding: 8px 10px;\n font-size: 14px;\n}\n\n.Select-option.is-selected {\n background: #dadada;\n color: #333333;\n}\n\n.Select-option.is-focused {\n background: #dadada;\n color: #333333;\n}\n\n.Select-option.is-disabled {\n color: #cccccc;\n cursor: default;\n}\n\n.Select-noresults {\n box-sizing: border-box;\n color: #999999;\n cursor: default;\n display: block;\n padding: 8px 10px;\n font-size: 14px;\n}\n\n.Select--multi .Select-input {\n vertical-align: middle;\n margin-left: 10px;\n padding: 0;\n float: left;\n}\n\n.Select--multi.has-value .Select-input {\n margin-left: 5px;\n}\n\n.Select--multi .Select-value {\n border: 1px solid #dadada;\n background: #dadada;\n color: #666666;\n flex-shrink: 0;\n vertical-align: top;\n background: #f4f4f4;\n margin: 1px;\n height: 28px;\n line-height: 28px;\n vertical-align: top;\n white-space: nowrap;\n cursor: default;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n float: left;\n}\n\n.Select--multi .Select-value-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n margin: 0 5px;\n font-size: 13px;\n}\n\n.Select--multi a.Select-value-label {\n color: #666666;\n cursor: pointer;\n text-decoration: none;\n}\n\n.Select--multi a.Select-value-label:hover {\n text-decoration: underline;\n}\n\n.Select--multi .Select-value-icon {\n background: #dadada;\n padding: 0;\n cursor: pointer;\n color: #666666;\n font-size: 12px;\n display: inline-block;\n text-align: center;\n vertical-align: top;\n width: 20px;\n height: 100%;\n float: left;\n line-height: 24px;\n}\n\n.Select--multi .Select-value-icon:hover,\n.Select--multi .Select-value-icon:focus {\n background: #dadada;\n color: #666666;\n}\n\n.Select--multi .Select-value-icon:active {\n background: #dadada;\n}\n\n.Select--multi.is-disabled .Select-value {\n background-color: #fcfcfc;\n border: 1px solid #e3e3e3;\n color: #333333;\n}\n\n.Select--multi.is-disabled .Select-value-icon {\n cursor: not-allowed;\n border-right: 1px solid #e3e3e3;\n}\n\n.Select--multi.is-disabled .Select-value-icon:hover,\n.Select--multi.is-disabled .Select-value-icon:focus,\n.Select--multi.is-disabled .Select-value-icon:active {\n background-color: #fcfcfc;\n}\n\n@keyframes Select-animation-spin {\n to {\n transform: rotate(1turn);\n }\n}\n\n@-webkit-keyframes Select-animation-spin {\n to {\n -webkit-transform: rotate(1turn);\n }\n}\n","/*\n * UTILITIES\n */\n\n.u_divClear {\n clear: both;\n font-size: 0;\n}\n",".label {\n font-family: 'Segoe UI WestEuropean','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;\n text-align: left;\n font-size: 16px;\n display: block;\n color: black;\n margin-top: 10px;\n padding: 5px 0;\n -webkit-font-smoothing: antialiased;\n box-shadow: none;\n box-sizing: border-box;\n}\n"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/api/SP.Taxonomy.d.ts: -------------------------------------------------------------------------------- 1 | export default class TaxonomyAPI { 2 | static getTermSetCount(termSetGuid: string, termSetName: string): Promise; 3 | static getAllTermsByTermSet(termSetGuid: string, termSetName: string, showOnlyAvailableForTag: boolean): Promise; 4 | static getSearchTermsByText(termSetGuid: string, termSetName: string, keyword: string, resultCollectionSize?: number, showOnlyAvailableForTag?: boolean): Promise; 5 | } 6 | -------------------------------------------------------------------------------- /dist/apiMock/SP.Taxonomy.d.ts: -------------------------------------------------------------------------------- 1 | export default class TaxonomyAPI { 2 | static getTermSetCount(termSetGuid: string, termSetName: string): Promise; 3 | static getAllTermsByTermSet(termSetGuid: string, termSetName: string, showOnlyAvailableForTag: boolean): Promise; 4 | static getSearchTermsByText(termSetGuid: string, termSetName: string, keyword: string, resultCollectionSize?: number, showOnlyAvailableForTag?: boolean): Promise; 5 | } 6 | -------------------------------------------------------------------------------- /dist/components/TaxonomyPicker/ITaxonomyPickerProps.d.ts: -------------------------------------------------------------------------------- 1 | import { OptionProps } from "react-select/lib/types"; 2 | import { Props as SelectProps } from "react-select/lib/Select"; 3 | import { AsyncProps } from "react-select/lib/Async"; 4 | declare type OptionValue = ITaxonomyValue | ITaxonomyValue[] | OptionProps | OptionProps[] | string | string[] | number | number[] | boolean; 5 | export interface ITaxonomyPickerProps extends SelectProps, AsyncProps { 6 | name: string; 7 | multi: boolean; 8 | displayName?: string; 9 | termSetGuid?: string; 10 | termSetName?: string; 11 | termSetCountMaxSwapToAsync?: number; 12 | termSetCountCacheExpiresMin?: number; 13 | termSetAllTermsCacheExpiresMin?: number; 14 | defaultOptions: ITaxonomyValue[] | OptionProps[]; 15 | defaultValue?: OptionValue; 16 | placeholder?: string; 17 | onPickerChange?: (taxonomyPickerName: string, newValue: OptionValue) => void; 18 | showPath?: boolean; 19 | logErrorsConsole?: boolean; 20 | logErrorsDiv?: boolean; 21 | } 22 | export interface ITaxonomyValue { 23 | label: string; 24 | value: string; 25 | path: string; 26 | } 27 | export {}; 28 | -------------------------------------------------------------------------------- /dist/components/TaxonomyPicker/ITaxonomyPickerState.d.ts: -------------------------------------------------------------------------------- 1 | export interface ITaxonomyPickerState { 2 | errors: string[]; 3 | options: any[]; 4 | value: any; 5 | disabled: boolean; 6 | termSetCount: number; 7 | asyncLoad: boolean; 8 | } 9 | -------------------------------------------------------------------------------- /dist/components/TaxonomyPicker/TaxonomyPicker.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { ITaxonomyPickerProps } from "./ITaxonomyPickerProps"; 3 | import { ITaxonomyPickerState } from "./ITaxonomyPickerState"; 4 | declare class TaxonomyPicker extends React.Component { 5 | static defaultProps: ITaxonomyPickerProps; 6 | constructor(props: any, context: any); 7 | componentDidMount(): void; 8 | render(): JSX.Element; 9 | private _getLabel; 10 | private customFilter; 11 | private renderOptionLabel; 12 | private _getSelectControl; 13 | private _asyncLoadOptions; 14 | private _handleSelectChange; 15 | private getSearchTerms; 16 | private getAllTerms; 17 | private renderErrorMessage; 18 | } 19 | export default TaxonomyPicker; 20 | -------------------------------------------------------------------------------- /dist/containers/App.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | export default class App extends React.Component<{}, {}> { 3 | render(): JSX.Element; 4 | } 5 | -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import "../stylesheets/main.css"; 2 | export { ITaxonomyPickerProps, ITaxonomyValue } from "./components/TaxonomyPicker/ITaxonomyPickerProps"; 3 | import TaxonomyPicker from "./components/TaxonomyPicker/TaxonomyPicker"; 4 | export default TaxonomyPicker; 5 | -------------------------------------------------------------------------------- /dist/index.dev.d.ts: -------------------------------------------------------------------------------- 1 | import "../stylesheets/main.css"; 2 | -------------------------------------------------------------------------------- /dist/utils/Cache.d.ts: -------------------------------------------------------------------------------- 1 | export declare class Cache { 2 | static buildStorageKey(key: string): string; 3 | static clearStoredDataByKey(key: string): void; 4 | static getStoredDataByKey(key: string): any; 5 | static setStoredDataByKey(key: string, dataToStore: any, expireMinutes: number): void; 6 | } 7 | -------------------------------------------------------------------------------- /dist/utils/Utils.d.ts: -------------------------------------------------------------------------------- 1 | export declare class Utils { 2 | static getSiteCollectionUrl(): string; 3 | static getCurrentAbsoluteSiteUrl(): string; 4 | static getWebServerRelativeUrl(): string; 5 | static getLayoutsPageUrl(libraryName: string): string; 6 | static getAbsoluteDomainUrl(): string; 7 | } 8 | -------------------------------------------------------------------------------- /docs/NPMPackage.md: -------------------------------------------------------------------------------- 1 | #Create NPM Package 2 | - http://frontendinsights.com/how-create-react-component-publish-npm/ 3 | - https://medium.com/@mweststrate/how-to-create-strongly-typed-npm-modules-1e1bda23a7f4#.2citshhp7 4 | - https://shellmonger.com/2016/03/11/creating-javascript-libraries-with-typescript-and-webpack/ 5 | - https://webpack.js.org/guides/author-libraries/ 6 | 7 | ##Starter TypeScript project 8 | - https://github.com/DxCx/ts-library-starter 9 | - https://github.com/kalcifer/webpack-library-example 10 | - https://github.com/nkbt/react-component-template 11 | - https://github.com/kriasoft/react-component-starter 12 | - https://github.com/survivejs/react-component-boilerplate 13 | - https://github.com/dantrain/react-stonecutter 14 | - https://github.com/basarat/ts-npm-module 15 | -------------------------------------------------------------------------------- /gatsby/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | public/ 3 | .cache 4 | -------------------------------------------------------------------------------- /gatsby/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: `/react-taxonomypicker`, 3 | plugins: [ 4 | // Add typescript stack into webpack 5 | `gatsby-plugin-typescript` 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /gatsby/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-taxonomypicker-static-page-generator", 3 | "scripts": { 4 | "gatsby:deploy": "gatsby build --prefix-paths && gh-pages -d public", 5 | "gatsby:develop": "gatsby develop" 6 | }, 7 | "author": "Jose Quinto ", 8 | "license": "MIT", 9 | "devDependencies": { 10 | "gatsby": "1.9.271", 11 | "gatsby-link": "1.6.46", 12 | "gatsby-plugin-typescript": "1.4.20", 13 | "gh-pages": "1.2.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /gatsby/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import "../../../app/stylesheets/main.css"; 2 | 3 | import App from "../../../app/src/containers/App"; 4 | export default App; 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-taxonomypicker", 3 | "version": "0.0.45", 4 | "description": "Office 365 - SharePoint React Taxonomy Picker", 5 | "main": "dist/React.TaxonomyPicker.js", 6 | "module": "src/index.package.ts", 7 | "style": "dist/React.TaxonomyPicker.css", 8 | "types": "dist/index.d.ts", 9 | "scripts": { 10 | "start": "set NODE_ENV=development && webpack-dev-server --open --mode=development --config ./webpack/webpack.config.dev.js", 11 | "prebuild": "npm install", 12 | "test": "jest --env=jsdom", 13 | "test:coverage": "npm run test && codecov --token=0c91b47b-0df7-40fc-a3a7-1d963103bd22", 14 | "build": "set NODE_ENV=production && webpack --progress --mode=production --config ./webpack/webpack.config.prod.js", 15 | "stats": "set NODE_ENV=production && webpack --progress --config ./webpack/webpack.config.stats.js --profile --json > ./webpack/stats/stats.json" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/jquintozamora/react-taxonomypicker.git" 20 | }, 21 | "keywords": [ 22 | "React", 23 | "Taxonomy", 24 | "Picker", 25 | "Managed", 26 | "Metadata", 27 | "TermSet", 28 | "TermStore", 29 | "SharePoint", 30 | "Office", 31 | "365" 32 | ], 33 | "author": "Jose Quinto ", 34 | "license": "MIT", 35 | "bugs": { 36 | "url": "https://github.com/jquintozamora/react-taxonomypicker/issues" 37 | }, 38 | "homepage": "https://github.com/jquintozamora/react-taxonomypicker#readme", 39 | "engines": { 40 | "node": "^10.16.x", 41 | "npm": "6.4.1" 42 | }, 43 | "dependencies": { 44 | "react-select": "2.1.1", 45 | "@types/react-select": "2.0.6" 46 | }, 47 | "peerDependencies": { 48 | "react": ">=16.0.0", 49 | "react-dom": ">=16.0.0" 50 | }, 51 | "devDependencies": { 52 | "@types/jest": "24.0.18", 53 | "@types/node": "12.7.8", 54 | "@types/react": "16.9.4", 55 | "@types/react-dom": "16.9.1", 56 | "@types/sharepoint": "2016.1.5", 57 | "autoprefixer": "9.6.1", 58 | "codecov": "3.6.1", 59 | "css-loader": "3.2.0", 60 | "css-modules-typescript-loader": "3.0.1", 61 | "enzyme": "3.10.0", 62 | "enzyme-adapter-react-16": "1.14.0", 63 | "enzyme-to-json": "3.4.0", 64 | "html-webpack-plugin": "4.0.0-beta.8", 65 | "identity-obj-proxy": "3.0.0", 66 | "jest": "24.9.0", 67 | "mini-css-extract-plugin": "0.8.0", 68 | "postcss-custom-properties": "9.0.2", 69 | "postcss-import": "12.0.1", 70 | "postcss-loader": "3.0.0", 71 | "postcss-nesting": "7.0.1", 72 | "react": "16.10.1", 73 | "react-dom": "16.10.1", 74 | "react-hot-loader": "4.12.14", 75 | "source-map-loader": "0.2.4", 76 | "style-loader": "1.0.0", 77 | "ts-jest": "24.1.0", 78 | "ts-loader": "6.2.0", 79 | "tslint": "5.20.0", 80 | "tslint-react": "4.1.0", 81 | "typescript": "3.6.3", 82 | "uglifyjs-webpack-plugin": "2.2.0", 83 | "webpack": "4.41.0", 84 | "webpack-cli": "3.3.9", 85 | "webpack-dev-server": "3.8.1", 86 | "webpack-visualizer-plugin": "0.1.11" 87 | }, 88 | "jest": { 89 | "transform": { 90 | "^.+\\.tsx?$": "ts-jest" 91 | }, 92 | "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$", 93 | "testPathIgnorePatterns": [ 94 | "/node_modules/", 95 | "/.cache/" 96 | ], 97 | "moduleFileExtensions": [ 98 | "ts", 99 | "tsx", 100 | "js", 101 | "jsx", 102 | "json", 103 | "node" 104 | ], 105 | "moduleNameMapper": { 106 | "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/test/unit/__mocks__/fileMock.js", 107 | "\\.(css)$": "identity-obj-proxy" 108 | }, 109 | "snapshotSerializers": [ 110 | "enzyme-to-json/serializer" 111 | ], 112 | "setupFiles": [ 113 | "/test/setup/setupTests.ts" 114 | ], 115 | "testURL": "http://localhost", 116 | "testEnvironment": "node", 117 | "coverageDirectory": "./coverage/", 118 | "collectCoverage": true 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | React Taxonomy Picker consumer 9 | 10 | 11 | 12 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /test/setup/setupTests.ts: -------------------------------------------------------------------------------- 1 | import { raf } from './tempPolyfills' 2 | import * as Enzyme from 'enzyme' 3 | const Adapter = require('enzyme-adapter-react-16') 4 | import toJson from 'enzyme-to-json' 5 | 6 | // React 16 Enzyme adapter 7 | Enzyme.configure({ adapter: new Adapter() }) 8 | 9 | // Make Enzyme functions available in all test files without importing 10 | declare var global: any 11 | global.shallow = Enzyme.shallow 12 | global.render = Enzyme.render 13 | global.mount = Enzyme.mount 14 | global.toJson = toJson 15 | -------------------------------------------------------------------------------- /test/setup/tempPolyfills.ts: -------------------------------------------------------------------------------- 1 | declare var global: any 2 | export const raf = global.requestAnimationFrame = (cb: any) => { 3 | setTimeout(cb, 0) 4 | } 5 | -------------------------------------------------------------------------------- /test/unit/__mocks__/fileMock.js: -------------------------------------------------------------------------------- 1 | module.exports = 'test-file-stub'; -------------------------------------------------------------------------------- /test/unit/helpers/ComponentHelper.tsx: -------------------------------------------------------------------------------- 1 | import { shallow } from "enzyme"; 2 | import * as React from "react"; 3 | 4 | const renderComponentHelper = (Component: any, mountOptions = {}) => { 5 | return ({ children = null, ...props } = {}) => { 6 | const wrapper = shallow( 7 | {children} , 8 | { ...mountOptions } 9 | ); 10 | 11 | const component = { 12 | wrapper, 13 | instance: wrapper.instance(), 14 | // requires "snapshotSerializers": ["enzyme-to-json/serializer"] in jest config to extract just the html 15 | getHtml: () => wrapper 16 | }; 17 | 18 | return { 19 | ...component 20 | }; 21 | }; 22 | }; 23 | 24 | export default renderComponentHelper; 25 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "declaration": false, 6 | "noImplicitAny": false, 7 | "suppressImplicitAnyIndexErrors": true, 8 | "removeComments": true, 9 | "noLib": false, 10 | "outDir": "./dist", 11 | "lib": [ 12 | "dom", 13 | "es5", 14 | "scripthost", 15 | "es2015.promise" 16 | ], 17 | "preserveConstEnums": true, 18 | "sourceMap": true, 19 | "jsx": "react", 20 | "typeRoots": [ 21 | "./node_modules/@types" 22 | ], 23 | "types": [ 24 | "node", 25 | "react", 26 | "react-dom", 27 | "sharepoint", 28 | "jest" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /tsconfig.pkg.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "declaration": true, 6 | "outDir": "./dist", 7 | "noImplicitAny": false, 8 | "suppressImplicitAnyIndexErrors": true, 9 | "removeComments": true, 10 | "noLib": false, 11 | "lib": [ 12 | "dom", 13 | "es5", 14 | "scripthost", 15 | "es2015.promise" 16 | ], 17 | "preserveConstEnums": true, 18 | "sourceMap": true, 19 | "jsx": "react", 20 | "typeRoots": [ 21 | "./node_modules/@types" 22 | ], 23 | "types": [ 24 | "node", 25 | "react", 26 | "react-dom", 27 | "sharepoint" 28 | ] 29 | }, 30 | "filesGlob": [ 31 | "./**/*.ts", 32 | "!./node_modules/**/*.ts" 33 | ], 34 | "files": [ 35 | "./app/src/index.ts", 36 | "./app/src/components/TaxonomyPicker/TaxonomyPicker.tsx" 37 | ], 38 | "include": [ 39 | "app/src/**/*" 40 | ], 41 | "exclude": [ 42 | "node_modules", 43 | "**/*.spec.ts" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["tslint:latest", "tslint-react"], 3 | "rules": { 4 | "ban": [true, 5 | ["Object", "assign", "use TS2.1 object spread { ...a, ...b }"], 6 | ["describe", "only"], 7 | ["it", "only"] 8 | ], 9 | "linebreak-style": [true, "CRLF"], 10 | "no-invalid-this": [true, "check-function-in-method"], 11 | "variable-name": [ 12 | "ban-keywords", 13 | "check-format", 14 | "allow-leading-underscore", 15 | "allow-pascal-case" 16 | ], 17 | "trailing-comma": [ 18 | false 19 | ], 20 | "max-line-length": [ 180 ], 21 | "max-classes-per-file": [true, 5], 22 | "object-literal-sort-keys": false, 23 | "jsx-no-multiline-js": false, 24 | "jsx-boolean-value": false 25 | }, 26 | "jsRules": { 27 | "object-literal-shorthand": true, 28 | "trailing-comma": [false] 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /webpack/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jquintozamora/react-taxonomypicker/ef277a662f0d0cc6ba6e2353e1f1e75450631b7a/webpack/.DS_Store -------------------------------------------------------------------------------- /webpack/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////////////////////////// 2 | // WebPack 2 DEV Config 3 | /////////////////////////////////////////////////////////////////////////////////////////////////// 4 | // author: Jose Quinto - https://blogs.josequinto.com 5 | /////////////////////////////////////////////////////////////////////////////////////////////////// 6 | 7 | const resolve = require("path").resolve; 8 | const webpack = require("webpack"); 9 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 10 | 11 | module.exports = { 12 | // To enhance the debugging process. More info: https://webpack.js.org/configuration/devtool/ 13 | devtool: "inline-source-map", 14 | target: "web", 15 | entry: { 16 | "React.TaxonomyPicker": [ 17 | // Our app main entry 18 | "./app/src/index.dev.tsx" 19 | ] 20 | }, 21 | output: { 22 | // Next line is not used in dev but WebpackDevServer crashes without it 23 | path: resolve(__dirname, "./../build"), 24 | // Add /* filename */ comments to generated require()s in the output. 25 | pathinfo: true, 26 | // This does not produce a real file. It's just the virtual path that is 27 | // served by WebpackDevServer in development. This is the JS bundle 28 | // containing code from all our entry points, and the Webpack runtime. 29 | filename: "static/js/[name].js", 30 | // There are also additional JS chunk files if you use code splitting. 31 | chunkFilename: "static/js/[name].chunk.js", 32 | // This is the URL that app is served from. We use "/" in development. 33 | publicPath: "/" 34 | }, 35 | 36 | devServer: { 37 | // All options here: https://webpack.js.org/configuration/dev-server/ 38 | 39 | // enable HMR on the server 40 | hot: true, 41 | // match the output path 42 | contentBase: resolve(__dirname, "../dist"), 43 | // match the output `publicPath` 44 | publicPath: "/", 45 | 46 | // Enable to integrate with Docker 47 | //host:"0.0.0.0", 48 | 49 | port: 3000, 50 | historyApiFallback: true, 51 | // All the stats options here: https://webpack.js.org/configuration/stats/ 52 | stats: { 53 | colors: true, // color is life 54 | chunks: false, // this reduces the amount of stuff I see in my terminal; configure to your needs 55 | "errors-only": true 56 | } 57 | }, 58 | 59 | context: resolve(__dirname, "../"), 60 | resolve: { 61 | // Add '.ts' and '.tsx' as resolvable extensions. 62 | extensions: [".ts", ".tsx", ".js"] 63 | }, 64 | plugins: [ 65 | // replacement for Mock APIs 66 | new webpack.NormalModuleReplacementPlugin(/(\.*)\/api\/(\.*)/, function( 67 | resource 68 | ) { 69 | resource.request = resource.request.replace(/api/, `/apiMock/`); 70 | }), 71 | 72 | // Generates an `index.html` file with the