Merge pull request #35 from performant-software/feature/archnet60_dra…

…g_drop_handle Archnet #60 - Drag drop handle
performant-software · Nov 13, 2020 · b9b69f1 · b9b69f1
2 parents 406c4fa + 3921338
commit b9b69f1
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 23 deletions.
diff --git a/src/semantic-ui/DataTable.js b/src/semantic-ui/DataTable.js
@@ -339,12 +339,25 @@ class DataTable extends Component<Props, State> {
    */
   onDrag(dragIndex: number, hoverIndex: number) {
     this.setState((state) => {
-      const columns = [...state.columns];
-      const column = columns[dragIndex];
+      const columns = [];
+      const anchoredColumns = [];
+
+      // Preserve the index of any unlabeled columns
+      _.each(state.columns, (column, index) => {
+        if (column.label && column.label.length) {
+          columns.push(column);
+        } else {
+          anchoredColumns.push({ index, column });
+        }
+      });
 
+      const column = columns[dragIndex];
       columns.splice(dragIndex, 1);
       columns.splice(hoverIndex, 0, column);
 
+      // Add the unlabeled columns back in
+      _.each(anchoredColumns, (c) => columns.splice(c.index, 0, c.column));
+
       return { columns };
     });
   }
@@ -649,25 +662,27 @@ class DataTable extends Component<Props, State> {
         simple
       >
         <Dropdown.Menu>
-          { this.state.columns.map((c, index) => (
-            <Draggable
-              id={c.name}
-              index={index}
-              key={c.name}
-              onDrag={this.onDrag.bind(this)}
-            >
-              <Dropdown.Item>
-                <Icon
-                  name='bars'
-                />
-                <Checkbox
-                  checked={!c.hidden}
-                  label={c.label}
-                  onClick={this.onColumnCheckbox.bind(this, c)}
-                />
-              </Dropdown.Item>
-            </Draggable>
-          ))}
+          { this.state.columns
+            .filter((c) => c.label && c.label.length)
+            .map((c, index) => (
+              <Draggable
+                id={c.name}
+                index={index}
+                key={c.name}
+                onDrag={this.onDrag.bind(this)}
+              >
+                <Dropdown.Item>
+                  <Icon
+                    name='bars'
+                  />
+                  <Checkbox
+                    checked={!c.hidden}
+                    label={c.label}
+                    onClick={this.onColumnCheckbox.bind(this, c)}
+                  />
+                </Dropdown.Item>
+              </Draggable>
+            ))}
         </Dropdown.Menu>
       </Dropdown>
     );

diff --git a/stories/components/semantic-ui/EmbeddedList.stories.js b/stories/components/semantic-ui/EmbeddedList.stories.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, optionsKnob as options } from '@storybook/addon-knobs';
-import { Button, Container } from 'semantic-ui-react';
+import { Button, Container, Icon } from 'semantic-ui-react';
 import _ from 'underscore';
 import AddModal from '../AddModal';
 import Colors from '../../services/Colors';
@@ -170,7 +170,15 @@ export const DragAndDropRows = useDragDrop(() => {
     <EmbeddedList
       actions={actions}
       onDelete={action('delete')}
-      columns={columns}
+      columns={[{
+        name: 'drag-drop',
+        label: '',
+        render: () => (
+          <div 
+            style={{ textAlign: 'center'}}>
+            <Icon name='bars' />
+          </div>)
+      }, ...columns]}
       items={list}
       onDrag={(dragIndex, hoverIndex) => {
         const temp = [...list];