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
--- a/front/src/modules/ui/data/data-table/table-cell/components/TableCellContainer.tsx
+++ b/front/src/modules/ui/data/data-table/table-cell/components/TableCellContainer.tsx
@ -0,0 +1,146 @@
+import { ReactElement, useContext, useState } from 'react';
+import styled from '@emotion/styled';
+
+import { useIsFieldEmpty } from '@/ui/data/field/hooks/useIsFieldEmpty';
+import { useIsFieldInputOnly } from '@/ui/data/field/hooks/useIsFieldInputOnly';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+
+import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
+import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
+import { useGetIsSomeCellInEditMode } from '../../hooks/useGetIsSomeCellInEditMode';
+import { useMoveSoftFocusToCurrentCellOnHover } from '../../hooks/useMoveSoftFocusToCurrentCellOnHover';
+import { TableHotkeyScope } from '../../types/TableHotkeyScope';
+import { useCurrentTableCellEditMode } from '../hooks/useCurrentTableCellEditMode';
+import { useIsSoftFocusOnCurrentTableCell } from '../hooks/useIsSoftFocusOnCurrentTableCell';
+import { useSetSoftFocusOnCurrentTableCell } from '../hooks/useSetSoftFocusOnCurrentTableCell';
+import { useTableCell } from '../hooks/useTableCell';
+
+import { TableCellButton } from './TableCellButton';
+import { TableCellDisplayMode } from './TableCellDisplayMode';
+import { TableCellEditMode } from './TableCellEditMode';
+import { TableCellSoftFocusMode } from './TableCellSoftFocusMode';
+
+const StyledCellBaseContainer = styled.div`
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  height: 32px;
+  position: relative;
+  user-select: none;
+`;
+
+export type TableCellContainerProps = {
+  editModeContent: ReactElement;
+  nonEditModeContent: ReactElement;
+  editModeHorizontalAlign?: 'left' | 'right';
+  editModeVerticalPosition?: 'over' | 'below';
+  editHotkeyScope?: HotkeyScope;
+  transparent?: boolean;
+  maxContentWidth?: number;
+  buttonIcon?: IconComponent;
+  onSubmit?: () => void;
+  onCancel?: () => void;
+};
+
+const DEFAULT_CELL_SCOPE: HotkeyScope = {
+  scope: TableHotkeyScope.CellEditMode,
+};
+
+export const TableCellContainer = ({
+  editModeHorizontalAlign = 'left',
+  editModeVerticalPosition = 'over',
+  editModeContent,
+  nonEditModeContent,
+  editHotkeyScope,
+  transparent = false,
+  maxContentWidth,
+  buttonIcon,
+}: TableCellContainerProps) => {
+  const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
+
+  const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode();
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const moveSoftFocusToCurrentCellOnHover =
+    useMoveSoftFocusToCurrentCellOnHover();
+
+  const hasSoftFocus = useIsSoftFocusOnCurrentTableCell();
+
+  const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
+
+  const { openTableCell } = useTableCell();
+
+  const handleButtonClick = () => {
+    setSoftFocusOnCurrentTableCell();
+    openTableCell();
+  };
+
+  const handleContainerMouseEnter = () => {
+    const isSomeCellInEditMode = getIsSomeCellInEditMode();
+
+    if (!isHovered && !isSomeCellInEditMode) {
+      setIsHovered(true);
+      moveSoftFocusToCurrentCellOnHover();
+    }
+  };
+
+  const handleContainerMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const editModeContentOnly = useIsFieldInputOnly();
+
+  const isFirstColumnCell = useContext(ColumnIndexContext) === 0;
+
+  const isEmpty = useIsFieldEmpty();
+
+  const showButton =
+    !!buttonIcon &&
+    hasSoftFocus &&
+    !isCurrentTableCellInEditMode &&
+    !editModeContentOnly &&
+    (!isFirstColumnCell || !isEmpty);
+
+  return (
+    <CellHotkeyScopeContext.Provider
+      value={editHotkeyScope ?? DEFAULT_CELL_SCOPE}
+    >
+      <StyledCellBaseContainer
+        onMouseEnter={handleContainerMouseEnter}
+        onMouseLeave={handleContainerMouseLeave}
+      >
+        {isCurrentTableCellInEditMode ? (
+          <TableCellEditMode
+            maxContentWidth={maxContentWidth}
+            transparent={transparent}
+            editModeHorizontalAlign={editModeHorizontalAlign}
+            editModeVerticalPosition={editModeVerticalPosition}
+          >
+            {editModeContent}
+          </TableCellEditMode>
+        ) : hasSoftFocus ? (
+          <>
+            {showButton && (
+              <TableCellButton onClick={handleButtonClick} Icon={buttonIcon} />
+            )}
+            <TableCellSoftFocusMode>
+              {editModeContentOnly ? editModeContent : nonEditModeContent}
+            </TableCellSoftFocusMode>
+          </>
+        ) : (
+          <>
+            {showButton && (
+              <TableCellButton onClick={handleButtonClick} Icon={buttonIcon} />
+            )}
+            <TableCellDisplayMode>
+              {editModeContentOnly ? editModeContent : nonEditModeContent}
+            </TableCellDisplayMode>
+          </>
+        )}
+      </StyledCellBaseContainer>
+    </CellHotkeyScopeContext.Provider>
+  );
+};