Added ModernTaxonomyPicker to ControlsTest

Author: patrikhellgren

src/webparts/controlsTest/ControlsTestWebPart.ts

@@ -19,6 +19,7 @@ import {
   ThemeProvider,
 } from "@microsoft/sp-component-base";
 import ControlsTest from './components/ControlsTest';
+import ControlsTest_SingleComponent from './components/ControlsTest_SingleComponent';
 /**
  * Web part to test the React controls
  */

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -178,6 +178,7 @@ import { DynamicForm } from '../../../controls/dynamicForm';
 import { LocationPicker } from "../../../controls/locationPicker/LocationPicker";
 import { ILocationPickerItem } from "../../../controls/locationPicker/ILocationPicker";
 import { debounce } from "lodash";
+import { ModernTaxonomyPicker } from "../../../controls/modernTaxonomyPicker/ModernTaxonomyPicker";
 
 
 
@@ -1926,6 +1927,17 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           </AnimatedDialog>
 
           <LocationPicker context={this.props.context} label="Location" onChange={(locValue: ILocationPickerItem) => { console.log(locValue.DisplayName + ", " + locValue.Address.Street); }}></LocationPicker>
+
+          <ModernTaxonomyPicker
+            allowMultipleSelections={true}
+            termSetId={"7b84b0b6-50b8-4d26-8098-029eba42fe8a"}
+            panelTitle="Panel title"
+            label={"Modern Taxonomy Picker"}
+            context={this.props.context}
+            required={false}
+            disabled={false}
+            customPanelWidth={400}
+          />
         </div>
 
       </div>

src/webparts/controlsTest/components/ControlsTest_SingleComponent.tsx

@@ -57,6 +57,7 @@ import { ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { FilePicker, IFilePickerResult } from '../../../FilePicker';
 import { FolderExplorer, IFolder, IBreadcrumbItem } from '../../../FolderExplorer';
 import { Pagination } from '../../../controls/pagination';
+import { ModernTaxonomyPicker } from '../../../ModernTaxonomyPicker';
 
 /**
  * The sample data below was randomly generated (except for the title). It is used by the grid layout
@@ -459,16 +460,20 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
     }];
 
     return (
-      <div className={styles.controlsTest}>
-        <DynamicForm
-          context={this.props.context}
-          listId={"b1416fca-dc77-4198-a082-62a7657dcfa9"}
-          //contentTypeId={"0x0104003FD42C31C9FABD4E8D2821289F34BBEF"}
-          //listItemId={13}
-          onCancelled={() => { console.log('Cancelled'); }}
-          onSubmitted={async (listItem) => { console.log(listItem); }}>
-
-        </DynamicForm>
+      <div>
+      <ModernTaxonomyPicker
+        allowMultipleSelections={true}
+        termSetId={"7b84b0b6-50b8-4d26-8098-029eba42fe8a"}
+        panelTitle="Panel title"
+        label={"Field title"}
+        context={this.props.context}
+        required={false}
+        initialValues={[{labels: [{name: "Test term", isDefault: true, languageTag: "en-US"}], id: "95f6991b-a0d7-492b-b211-091db33762ac", childrenCount: 0, createdDateTime: "", lastModifiedDateTime: "", descriptions: [], customSortOrder: [], properties: [], localProperties: [], isDeprecated: false, isAvailableForTagging: [], topicRequested: false}]}
+        onChange={(values) => alert(values.map((value) => `${value?.id} - ${value?.labels[0].name}`).join("\n"))}
+        disabled={false}
+        customPanelWidth={400}
+      />
+
       </div>
     );
   }