Refactored TaxonomyTree into a separate component

Author: patrikhellgren

docs/documentation/docs/controls/ModernTaxonomyPicker.md

@@ -68,7 +68,7 @@ Custom rendering of a More actions button that displays a context menu for each
   customPanelWidth={700}
   isLightDismiss={false}
   isBlocking={false}
-  onRenderActionButton={(termStoreInfo: ITermStoreInfo, termSetInfo: ITermSetInfo, termInfo?: ITermInfo) => {
+  onRenderActionButton={(termStoreInfo: ITermStoreInfo, termSetInfo: ITermSetInfo, termInfo?: ITermInfo): JSX.Element => {
     const menuIcon: IIconProps = { iconName: 'MoreVertical', "aria-label": "More actions", style: { fontSize: "medium" } };
     if (termInfo) {
       const menuProps: IContextualMenuProps = {
@@ -147,4 +147,45 @@ The ModernTaxonomyPicker control can be configured with the following properties
 | isBlocking | boolean | no | Whether the panel uses a modal overlay or not. |
 | onRenderActionButton | function | no | Optional custom renderer for adding e.g. a button with additional actions to the terms in the tree view. |
 
-![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/TaxonomyPicker)
+## Standalone TaxonomyTree control
+
+You can also use the `TaxonomyTree` control separately to just render a stand-alone tree-view of a term set with action buttons.
+
+- Use the `TaxonomyTree` control in your code as follows:  
+  Initialize the taxonomy service and state, load basic info from term store and display the `TaxonomyTree` component.
+
+```TypeScript
+      const taxonomyService = new SPTaxonomyService(props.context);
+      const [terms, setTerms] = React.useState<ITermInfo[]>();
+      const [currentTermStoreInfo, setCurrentTermStoreInfo] = React.useState<ITermStoreInfo>();
+      const [currentTermSetInfo, setCurrentTermSetInfo] = React.useState<ITermSetInfo>();
+      const [currentLanguageTag, setCurrentLanguageTag] = React.useState<string>("");
+
+      React.useEffect(() => {
+        sp.setup(props.context);
+        taxonomyService.getTermStoreInfo()
+          .then((termStoreInfo) => {
+            setCurrentTermStoreInfo(termStoreInfo);
+            setCurrentLanguageTag(props.context.pageContext.cultureInfo.currentUICultureName !== '' ?
+              props.context.pageContext.cultureInfo.currentUICultureName :
+              currentTermStoreInfo.defaultLanguageTag);
+          });
+        taxonomyService.getTermSetInfo(Guid.parse(props.termSetId))
+          .then((termSetInfo) => {
+            setCurrentTermSetInfo(termSetInfo);
+          });
+      }, []);
+
+      <TaxonomyTree
+        languageTag={currentLanguageTag}
+        onLoadMoreData={taxonomyService.getTerms}
+        pageSize={50}
+        setTerms={setTerms}
+        termSetInfo={currentTermSetInfo}
+        termStoreInfo={currentTermStoreInfo}
+        terms={terms}
+        onRenderActionButton={onRenderActionButton}
+      />
+```
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ModernTaxonomyPicker)

src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx

@@ -66,7 +66,7 @@ export interface IModernTaxonomyPickerProps {
 }
 
 export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
-  const [taxonomyService] = React.useState(() => new SPTaxonomyService(props.context));
+  const taxonomyService = new SPTaxonomyService(props.context);
   const [panelIsOpen, setPanelIsOpen] = React.useState(false);
   const [selectedOptions, setSelectedOptions] = React.useState<ITermInfo[]>([]);
   const [selectedPanelOptions, setSelectedPanelOptions] = React.useState<ITermInfo[]>([]);
@@ -265,8 +265,6 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
                 anchorTermInfo={currentAnchorTermInfo}
                 termSetInfo={currentTermSetInfo}
                 termStoreInfo={currentTermStoreInfo}
-                context={props.context}
-                termSetId={Guid.parse(props.termSetId)}
                 pageSize={50}
                 selectedPanelOptions={selectedPanelOptions}
                 setSelectedPanelOptions={setSelectedPanelOptions}

src/controls/modernTaxonomyPicker/taxonomyPanelContents/TaxonomyPanelContents.module.scss

@@ -1,36 +1,6 @@
 @import '~office-ui-fabric-react/dist/sass/References.scss';
 
 .taxonomyPanelContents {
-  .choiceOption {
-    color: "[theme: bodyText, default: #323130]";
-    display: inline-block;
-    padding-inline-start: 26px;
-  }
-
-  .disabledChoiceOption {
-    color: "[theme: disabledBodyText, default: #323130]";
-    display: inline-block;
-    padding-inline-start: 26px;
-  }
-
-  .selectedChoiceOption {
-    font-weight: bold;
-  }
-
-  .checkbox {
-    color: "[theme: bodyText, default: #323130]";
-    margin-inline-start: 4px;
-  }
-
-  .disabledCheckbox {
-    color: "[theme: disabledBodyText, default: #323130]";
-    margin-inline-start: 4px;
-  }
-
-  .selectedCheckbox {
-    font-weight: bold;
-  }
-
   .taxonomyTreeSelector {
     border-bottom-color: blue;
     border-bottom-style: solid;
@@ -42,35 +12,4 @@
     font-size: 18px;
     font-weight: 100;
   }
-
-  .spinnerContainer {
-    height: 48px;
-    line-height: 48px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .loadMoreContainer {
-    height: 48px;
-    line-height: 48px;
-  }
-
-  .taxonomyItemFocusZone {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-
-  .taxonomyItemHeader {
-    width: 100%;
-  }
-
-  .taxonomyItemHeader .actionButtonContainer > * {
-    opacity: 0;
-  }
-
-  .taxonomyItemHeader:hover .actionButtonContainer > *, .taxonomyItemHeader:focus .actionButtonContainer > *, .taxonomyItemHeader .actionButtonContainer:focus-within > * {
-    opacity: 1;
-  }
 }