Merged PR 186: Implement filterlists

src/Components/Category/Category.tsx

@@ -4,7 +4,7 @@ import { ICategory } from '../../Interfaces/ICategory';
 import { TruncateString } from '../../utils/stringtools';
 
 interface ICategoryProps {
-  children: JSX.Element | JSX.Element[]
+  children: JSX.Element[]
   category: ICategory
 }
 
@@ -22,7 +22,7 @@ export function Category(props: ICategoryProps): JSX.Element {
       title={categoryDisplayedText}
     >
       <div
-        className='flex flex-row group cursor-pointer h-16'
+        className={'flex flex-row group h-16 cursor-pointer'}
         onClick={() => setIsOpen(!isOpen)}
       >
         <span className={`transition-all flex-1 h-full justify-center sidebar-component-left ${isOpen ? 'rounded-b-none bg-slate-400/80 group-hover:bg-blue-600' : ''}`}>

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>

src/Components/UI/UI.tsx

@@ -84,6 +84,7 @@ export function UI(props: IUIProps): JSX.Element {
         } }/>
 
       <Sidebar
+        selectedContainer={props.selectedContainer}
         componentOptions={props.availableContainers}
         categories={props.categories}
         isOpen={isSidebarOpen}

src/Interfaces/IAvailableContainer.ts

@@ -118,6 +118,18 @@ export interface IAvailableContainer {
    */
   IsHidden?: boolean
 
+  /**
+   * Disable a list of available container to be added inside
+   */
+  Blacklist?: string[]
+
+  /**
+   * Cannot be used with blacklist. Whitelist will be prioritized.
+   * To disable the whitelist, Whitelist must be undefined.
+   * Only allow a set of available container to be added inside
+   */
+  Whitelist?: string[]
+
   /**
    * (optional)
    * Style of the <rect>

src/index.scss

@@ -8,7 +8,9 @@
   }
 
   .sidebar-component {
-    @apply transition-all px-2 py-6 text-sm rounded-lg bg-slate-300/80 hover:bg-blue-500 hover:text-slate-50
+    @apply transition-all px-2 py-6 text-sm rounded-lg
+      bg-slate-300/80 hover:bg-blue-500 hover:text-slate-50
+      disabled:bg-slate-400 disabled:text-slate-500
   }
 
   .sidebar-component-left {

test-server/http.js

@@ -65,6 +65,7 @@ const GetSVGLayoutConfiguration = () => {
       {
         Type: 'Chassis',
         DisplayedText: 'Chassis?',
+        Whitelist: ["Trou"],
         MaxWidth: 500,
         MinWidth: 200,
         Width: 200,
@@ -81,6 +82,7 @@ const GetSVGLayoutConfiguration = () => {
       },
       {
         Type: 'Trou',
+        Blacklist: ["Chassis"],
         DefaultX: 0,
         DefaultY: 0,
         Margin: {