Merged PR 186: Implement filterlists

src/Components/Sidebar/Sidebar.tsx

@@ -1,10 +1,13 @@
+import { EyeIcon, EyeOffIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
 import { ICategory } from '../../Interfaces/ICategory';
+import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { TruncateString } from '../../utils/stringtools';
 import { Category } from '../Category/Category';
 
 interface ISidebarProps {
+  selectedContainer: IContainerModel | undefined
   componentOptions: IAvailableContainer[]
   categories: ICategory[]
   isOpen: boolean
@@ -21,6 +24,8 @@ interface SidebarCategory {
 }
 
 export function Sidebar(props: ISidebarProps): JSX.Element {
+  const [hideDisabled, setHideDisabled] = React.useState<boolean>(false);
+
   const rootElements: Array<JSX.Element | undefined> = [];
   const categories = new Map<string, SidebarCategory>(props.categories.map(category => [
     category.Type,
@@ -41,12 +46,25 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
       </Category>);
   });
 
+  const selectedContainer = props.selectedContainer;
+  const config = props.componentOptions.find(option => option.Type === selectedContainer?.properties.type);
   // build the components
   props.componentOptions.forEach(componentOption => {
     if (componentOption.IsHidden === true) {
       return;
     }
 
+    let disabled = false;
+    if (config?.Whitelist !== undefined) {
+      disabled = config.Whitelist?.find(type => type === componentOption.Type) === undefined;
+    } else if (config?.Blacklist !== undefined) {
+      disabled = config.Blacklist?.find(type => type === componentOption.Type) !== undefined ?? false;
+    }
+
+    if (disabled && hideDisabled) {
+      return;
+    }
+
     const componentButton = (<button
       key={componentOption.Type}
       type="button"
@@ -56,9 +74,11 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
       onClick={() => props.buttonOnClick(componentOption.Type)}
       draggable={true}
       onDragStart={(event) => HandleDragStart(event)}
+      disabled={disabled}
     >
       {TruncateString(componentOption.DisplayedText ?? componentOption.Type, 25)}
     </button>);
+
     if (componentOption.Category === null || componentOption.Category === undefined) {
       rootElements.push(componentButton);
       return;
@@ -69,6 +89,7 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
       console.error(`[Category] Category does not exists in configuration.Categories: ${componentOption.Category}`);
       return;
     }
+
     category.children.push(componentButton);
   });
 
@@ -77,10 +98,22 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
     <div className={`fixed z-10 bg-slate-200
       text-gray-700 transition-all h-full w-64
       overflow-y-auto ${isOpenClasses}`}>
-      <div className='bg-slate-100 sidebar-title'>
+      <div className='bg-slate-100 sidebar-title flex place-content-between'>
           Components
+        <button
+          onClick={() => { setHideDisabled(!hideDisabled); }}
+          className='h-6'
+          aria-label='Hide disabled component'
+          title='Hide disabled component'
+        >
+          {
+            hideDisabled
+              ? <EyeOffIcon className='heroicon'></EyeOffIcon>
+              : <EyeIcon className='heroicon'></EyeIcon>
+          }
+        </button>
       </div>
-      <div className='grid grid-cols-1 md:grid-cols-1 gap-2
+      <div className='transition-all grid grid-cols-1 md:grid-cols-1 gap-2
          m-2 md:text-xs font-bold'>
         {rootElements}
       </div>