fix(table): update draggable dropdown

Current PR fixes the foll owing: - update draggable dropdown trigger background color on open state. - update reorder icon color to #868686(night-lighter). - update apply button to be disabled by default. - update overflow behaviour of draggable dropdown options. - update Table with header pattern.
innovaccer · Jun 26, 2023 · 8419339 · 8419339
1 parent 3a77a52
commit 8419339
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 15 deletions.
diff --git a/core/components/organisms/table/DraggableDropdown.tsx b/core/components/organisms/table/DraggableDropdown.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import { Button, Checkbox, Popover, Icon } from '@/index';
 import { DropdownProps } from '@/index.type';
 import { moveToIndex, getPluralSuffix } from '../grid/utility';
+import { _isEqual } from './utility';
 
 interface DraggableDropdownProps {
   options: DropdownProps['options'];
@@ -12,13 +14,23 @@ export const DraggableDropdown = (props: DraggableDropdownProps) => {
   const { options, onChange } = props;
 
   const [open, setOpen] = React.useState<boolean>(false);
+  const [prevOptions, setPrevOptions] = React.useState(options);
   const [tempOptions, setTempOptions] = React.useState(options);
   const [triggerWidth, setTriggerWidth] = React.useState('var(--spacing-8)');
 
   React.useEffect(() => {
     setTempOptions(options);
+    setPrevOptions(options);
   }, [open]);
 
+  const draggableDropdownButtonClasses = classNames({
+    ['DraggableDropdown--open']: open,
+  });
+
+  const reorderIconClasses = classNames({
+    ['reorderIcon mr-4']: true,
+  });
+
   const handleParentChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setTempOptions(tempOptions.map((option) => ({ ...option, selected: e.target.checked })));
   };
@@ -47,6 +59,8 @@ export const DraggableDropdown = (props: DraggableDropdownProps) => {
     if (onChange) onChange(tempOptions);
   };
 
+  const disable = _isEqual(prevOptions, tempOptions);
+
   return (
     <div className="Dropdown">
       <Popover
@@ -62,6 +76,7 @@ export const DraggableDropdown = (props: DraggableDropdownProps) => {
             appearance="transparent"
             icon="keyboard_arrow_down_filled"
             iconAlign="right"
+            className={draggableDropdownButtonClasses}
           >
             {`Showing ${options.filter((option) => option.selected).length} of ${
               options.length
@@ -95,23 +110,28 @@ export const DraggableDropdown = (props: DraggableDropdownProps) => {
                 draggable={true}
                 onDragStart={(e) => {
                   e.dataTransfer.setData('index', `${index}`);
+                  e.dataTransfer.setData('isSelected', `${option.selected}`);
                 }}
                 onDragOver={(e) => e.preventDefault()}
                 onDrop={(e) => {
                   const from = +e.dataTransfer.getData('index');
                   const to = index;
+                  const isSelected = e.dataTransfer.getData('isSelected');
 
-                  if (from !== to) setTempOptions(moveToIndex(tempOptions, from, to));
+                  if (from !== to) {
+                    setTempOptions(moveToIndex(tempOptions, from, to));
+                    if (isSelected === 'false') setPrevOptions(moveToIndex(prevOptions, from, to));
+                  }
                 }}
               >
                 <Checkbox
-                  className="OptionCheckbox"
+                  className="OptionCheckbox overflow-hidden"
                   name={option.value as string}
                   label={option.label}
                   checked={tempOptions[index].selected}
                   onChange={(e) => handleChildChange(e, index)}
                 />
-                <Icon name="drag_handle" className="mr-4" />
+                <Icon name="drag_handle" className={reorderIconClasses} />
               </div>
             );
           })}
@@ -120,7 +140,7 @@ export const DraggableDropdown = (props: DraggableDropdownProps) => {
           <Button type="button" className="mr-4" size="tiny" onClick={onCancelHandler}>
             Cancel
           </Button>
-          <Button type="button" appearance="primary" size="tiny" onClick={onApplyHandler}>
+          <Button disabled={disable} type="button" appearance="primary" size="tiny" onClick={onApplyHandler}>
             Apply
           </Button>
         </div>

diff --git a/core/components/organisms/table/__tests__/Table.test.tsx b/core/components/organisms/table/__tests__/Table.test.tsx
@@ -159,6 +159,18 @@ describe('render Table component with header', () => {
 });
 
 describe('render Table component with DraggableDropdown', () => {
+  it('render table : draggableDropDown Apply button is enabled on change', () => {
+    const schema = [{ name: 'name', displayName: 'Name', width: '50%' }];
+    const { getAllByTestId } = render(<Table withHeader={true} data={tableData} schema={schema} />);
+    const draggableDropdown = getAllByTestId('DesignSystem-Button')[0];
+    fireEvent.click(draggableDropdown);
+    const draggableApplyButton = getAllByTestId('DesignSystem-Button')[3];
+    expect(draggableApplyButton).toHaveAttribute('disabled');
+    const draggableDropdownCheckbox = getAllByTestId('DesignSystem-Checkbox-InputBox')[0];
+    fireEvent.click(draggableDropdownCheckbox);
+    expect(draggableApplyButton).not.toHaveAttribute('disabled');
+  });
+
   it('render table : draggableDropDown Apply button is triggered', () => {
     const schema = [{ name: 'name', displayName: 'Name', width: '50%' }];
     const { getAllByTestId } = render(<Table withHeader={true} data={tableData} schema={schema} />);

diff --git a/core/components/organisms/table/utility.tsx b/core/components/organisms/table/utility.tsx
@@ -0,0 +1,8 @@
+import { OptionSchema as Option } from '@/components/atoms/dropdown/option';
+
+export const _isEqual = (firstList: Option[], secondList: Option[]) => {
+  return (
+    firstList.every((option, index) => option.selected === secondList[index].selected) &&
+    firstList.every((option, index) => option.value === secondList[index].value)
+  );
+};
diff --git a/core/components/patterns/table/TableWithHeader/style.css b/core/components/patterns/table/TableWithHeader/style.css
@@ -16,6 +16,13 @@
   padding: 0 var(--spacing-l);
 }
 
+.Table-filters--horizontal {
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  padding: 0 var(--spacing-l);
+}
+
 .Table-filtersHeading {
   display: flex;
   align-items: center;
@@ -39,7 +46,7 @@
 }
 
 .Table-filters--horizontal .Table-filter {
-  padding: 0 var(--spacing-m);
+  padding: 0 var(--spacing);
 }
 
 .Table-filters--horizontal .Table-filter:first-of-type {

diff --git a/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx b/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx
@@ -46,6 +46,13 @@ import './style.css';
   padding: 0 var(--spacing-l);
 }
 
+.Table-filters--horizontal {
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  padding: 0 var(--spacing-l);
+}
+
 .Table-filtersHeading {
   display: flex;
   align-items: center;
@@ -69,7 +76,7 @@ import './style.css';
 }
 
 .Table-filters--horizontal .Table-filter {
-  padding: 0 var(--spacing-m);
+  padding: 0 var(--spacing);
 }
 
 .Table-filters--horizontal .Table-filter:first-of-type {
@@ -83,6 +90,14 @@ import './style.css';
 .Table-filter .Input {
   min-width: unset;
 }
+
+.DraggableDropdown--open {
+  background-color: var(--secondary-dark) !important;
+}
+
+.reorderIcon {
+  color: var(--inverse-lighter);
+}
 */
 
 () => {
@@ -147,11 +162,13 @@ import './style.css';
     } = props;
   
     const [open, setOpen] = React.useState(false);
+    const [prevOptions, setPrevOptions] = React.useState(options);
     const [tempOptions, setTempOptions] = React.useState(options);
     const [triggerWidth, setTriggerWidth] = React.useState('var(--spacing-8)');
   
     React.useEffect(() => {
       setTempOptions(options);
+      setPrevOptions(options);
     }, [open]);
   
     const handleParentChange = (e) => {
@@ -181,6 +198,15 @@ import './style.css';
   
       if (onChange) onChange(tempOptions);
     };
+
+    const _isEqual = (firstList, secondList) => {
+      return (
+        firstList.every((option, index) => option.selected === secondList[index].selected) &&
+        firstList.every((option, index) => option.value === secondList[index].value)
+      );
+    };
+
+    const disable = _isEqual(prevOptions, tempOptions);
   
     return (
       <div className="Dropdown">
@@ -189,13 +215,14 @@ import './style.css';
           onToggle={onToggleHandler}
           trigger={(
             <Button
-              ref={el => {
-                // setTriggerWidth(\`\${el.clientWidth}px\`);
-              }}
+            ref={(el) => {
+              el ? setTriggerWidth(\`\${el.clientWidth}px\`) : null
+            }}
               size="tiny"
               appearance="transparent"
               icon="keyboard_arrow_down_filled"
               iconAlign="right"
+              className={ open ? 'DraggableDropdown--open' : ''}
             >
               {\`Showing \${options.filter(option => option.selected).length} of \${options.length} column\${getPluralSuffix(options.length)}\`}
             </Button>
@@ -225,30 +252,35 @@ import './style.css';
                   draggable={true}
                   onDragStart={e => {
                     e.dataTransfer.setData('index', \`\${index}\`);
+                    e.dataTransfer.setData('isSelected', \`\${option.selected}\`);
                   }}
                   onDragOver={e => e.preventDefault()}
                   onDrop={e => {
                     const from = +e.dataTransfer.getData('index');
                     const to = index;
+                    const isSelected = e.dataTransfer.getData('isSelected');
   
-                    if (from !== to) setTempOptions(moveToIndex(tempOptions, from, to));
+                    if (from !== to) {
+                      setTempOptions(moveToIndex(tempOptions, from, to));
+                      if (isSelected === 'false') setPrevOptions(moveToIndex(prevOptions, from, to));
+                    }
                   }}
                 >
                   <Checkbox
-                    className="OptionCheckbox"
+                    className="OptionCheckbox overflow-hidden"
                     name={option.value}
                     label={option.label}
                     checked={tempOptions[index].selected}
                     onChange={e => handleChildChange(e, index)}
                   />
-                  <Icon name="drag_handle" className="mr-4" />
+                  <Icon name="drag_handle" className="reorderIcon mr-4" />
                 </div>
               );
             })}
           </div>
           <div className="Dropdown-buttonWrapper">
             <Button className="mr-4" size="tiny" onClick={onCancelHandler}>Cancel</Button>
-            <Button appearance="primary" size="tiny" onClick={onApplyHandler}>Apply</Button>
+            <Button disabled={disable} appearance="primary" size="tiny" onClick={onApplyHandler}>Apply</Button>
           </div>
         </Popover>
       </div>
@@ -385,8 +417,6 @@ import './style.css';
               </div>
             </div>
           </div>
-          <div className="Header-actions">
-          </div>
         </div>
         <div className="Header-content Header-content--bottom">
           <div className="Header-label">

diff --git a/css/src/components/grid.css b/css/src/components/grid.css
@@ -503,3 +503,11 @@
 .Header-actions {
   margin-bottom: var(--spacing-2);
 }
+
+.DraggableDropdown--open {
+  background-color: var(--secondary-dark) !important;
+}
+
+.reorderIcon {
+  color: var(--inverse-lighter);
+}