Refactor UI folder (#2016)

* Added Overview page * Revised Getting Started page * Minor revision * Edited readme, minor modifications to docs * Removed sweep.yaml, .devcontainer, .ergomake * Moved security.md to .github, added contributing.md * changes as per code review * updated contributing.md * fixed broken links & added missing links in doc, improved structure * fixed link in wsl setup * fixed server link, added https cloning in yarn-setup * removed package-lock.json * added doc card, admonitions * removed underline from nav buttons * refactoring modules/ui * refactoring modules/ui * Change folder case * Fix theme location * Fix case 2 * Fix storybook --------- Co-authored-by: Nimra Ahmed <nimra1408@gmail.com> Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>
2023-10-14 00:04:29 +02:00
parent a35ea5e8f9
commit 258685467b
732 changed files with 1106 additions and 1010 deletions
@@ -0,0 +1,79 @@
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
+import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/display/icon';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+
+import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
+import { useTableColumns } from '../hooks/useTableColumns';
+import { ColumnDefinition } from '../types/ColumnDefinition';
+
+export type DataTableColumnDropdownMenuProps = {
+  column: ColumnDefinition<FieldMetadata>;
+  isFirstColumn: boolean;
+  isLastColumn: boolean;
+  primaryColumnKey: string;
+};
+
+export const DataTableColumnDropdownMenu = ({
+  column,
+  isFirstColumn,
+  isLastColumn,
+  primaryColumnKey,
+}: DataTableColumnDropdownMenuProps) => {
+  const { handleColumnVisibilityChange, handleMoveTableColumn } =
+    useTableColumns();
+
+  const { closeDropdown } = useDropdown({
+    dropdownScopeId: ColumnHeadDropdownId,
+  });
+
+  const handleColumnMoveLeft = () => {
+    closeDropdown();
+    if (isFirstColumn) {
+      return;
+    }
+    handleMoveTableColumn('left', column);
+  };
+
+  const handleColumnMoveRight = () => {
+    closeDropdown();
+    if (isLastColumn) {
+      return;
+    }
+    handleMoveTableColumn('right', column);
+  };
+
+  const handleColumnVisibility = () => {
+    handleColumnVisibilityChange(column);
+  };
+
+  return column.key === primaryColumnKey ? (
+    <></>
+  ) : (
+    <StyledDropdownMenu>
+      <DropdownMenuItemsContainer>
+        {!isFirstColumn && (
+          <MenuItem
+            LeftIcon={IconArrowLeft}
+            onClick={handleColumnMoveLeft}
+            text="Move left"
+          />
+        )}
+        {!isLastColumn && (
+          <MenuItem
+            LeftIcon={IconArrowRight}
+            onClick={handleColumnMoveRight}
+            text="Move right"
+          />
+        )}
+        <MenuItem
+          LeftIcon={IconEyeOff}
+          onClick={handleColumnVisibility}
+          text="Hide"
+        />
+      </DropdownMenuItemsContainer>
+    </StyledDropdownMenu>
+  );
+};