From f287d585b3077f75ef2101a86c0442ab94515144 Mon Sep 17 00:00:00 2001
From: Derek Leadbetter <dleadbetter55@gmail.com>
Date: Mon, 2 Nov 2020 09:20:26 -0500
Subject: [PATCH] Archnet #60 - Updating to hide unlabeled columns from the
 column configuration menu

---
 src/semantic-ui/DataTable.js                  | 57 ++++++++++++-------
 .../semantic-ui/EmbeddedList.stories.js       | 12 +++-
 2 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/src/semantic-ui/DataTable.js b/src/semantic-ui/DataTable.js
index dd3083d4..3f46414b 100644
--- a/src/semantic-ui/DataTable.js
+++ b/src/semantic-ui/DataTable.js
@@ -261,12 +261,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 };
     });
   }
@@ -514,25 +527,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
index d14705ec..e0c0d70d 100644
--- 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 AddModal from '../AddModal';
 import Colors from '../../services/Colors';
 import EmbeddedList from '../../../src/semantic-ui/EmbeddedList';
@@ -169,7 +169,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];