@addev-be/ui 0.2.5 → 0.2.7

package/src/components/data/DataGrid/DataGridFilterMenu/styles.ts

@@ -1,100 +1,49 @@
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../../../providers/ThemeProvider/types';
-
-export const Menu = styled.div.attrs({
-  className: 'Menu',
-})`
-  position: absolute;
-  inset: 0;
-  color: var(--color-neutral-900);
-  border-radius: var(--rounded-md);
-  padding: var(--space-1) 0;
-  box-shadow: var(--shadow-lg);
-  background-color: var(--color-neutral-100);
-  min-width: 20em;
-  outline: 1px solid var(--color-neutral-200);
-  display: flex;
-  flex-direction: column;
-`;
-
-export const MenuItem = styled.button.attrs({
-  className: 'MenuItem',
-})<{ $color?: ThemeColor }>`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  font-family: var(--font-sans);
-  font-weight: normal;
-  text-align: left;
-  padding: var(--space-1) var(--space-2);
-  font-size: var(--text-base);
-  line-height: var(--leading-6);
-  border: none;
-  cursor: pointer;
-
-  ${({ $color }) =>
-    $color
-      ? css`
-          color: var(--color-${$color}-600);
-          background-color: var(--color-neutral-100);
-          &:hover {
-            background-color: var(--color-${$color}-200);
-          }
-        `
-      : css`
-          color: var(--color-neutral-900);
-          background-color: var(--color-neutral-100);
-          &:hover {
-            background-color: var(--color-neutral-200);
-          }
-        `}
-
-  svg {
-    fill: currentColor;
-    width: var(--space-4);
-    height: var(--space-4);
-    margin-right: var(--space-2);
-  }
-`;
-
-export const InputContainer = styled.div.attrs({
-  className: 'InputContainer',
-})`
-  position: relative;
-  border-radius: var(--rounded-md);
-  padding: 0 var(--space-2);
-  margin-top: var(--space-1);
-
-  svg {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: var(--space-4);
-    display: flex;
-    align-items: center;
-    fill: var(--color-neutral-400);
-    width: var(--space-4);
-    height: var(--space-4);
-  }
-
-  input {
-    padding-left: var(--space-8);
-  }
-`;
-
-export const CheckboxesContainer = styled.div.attrs({
-  className: 'CheckboxesContainer',
-})`
-  font-weight: normal;
-  user-select: none;
-  padding: var(--space-2);
-  margin: var(--space-2);
-  border: 1px solid var(--color-neutral-200);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-inner);
-  background-color: var(--color-neutral-50);
-  height: 20em;
-  overflow-y: hidden;
-  white-space: nowrap;
-`;
+import styled from 'styled-components';
+
+export const InputContainer = styled.div.attrs({
+  className: 'InputContainer',
+})`
+  position: relative;
+  border-radius: var(--rounded-md);
+  padding: 0 var(--space-1);
+
+  svg {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: var(--space-4);
+    display: flex;
+    align-items: center;
+    fill: var(--color-neutral-400);
+    width: var(--space-4);
+    height: var(--space-4);
+  }
+
+  input {
+    padding-left: var(--space-8);
+  }
+`;
+
+export const CheckboxesContainer = styled.div.attrs({
+  className: 'CheckboxesContainer',
+})`
+  font-weight: normal;
+  user-select: none;
+  padding: var(--space-2);
+  margin: var(--space-1);
+  margin-bottom: 0;
+  border: 1px solid var(--color-neutral-300);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-inner);
+  background-color: var(--color-neutral-0);
+  height: 20em;
+  overflow-y: hidden;
+  white-space: nowrap;
+`;
+
+export const Separator = styled.div.attrs({
+  className: 'Separator',
+})`
+  border-top: 1px solid var(--color-neutral-200);
+  margin: var(--space-1) 0;
+`;

package/src/components/data/DataGrid/DataGridFooter.tsx

@@ -1,64 +1,42 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import { DataGridContext } from './types';
-import { getScrollBarSize } from '../../../helpers/getScrollbarSize';
-import { join } from 'lodash';
-import { useDataGridContext } from './hooks';
-
-const SCROLL_BAR_SIZE = getScrollBarSize();
-
-export const DataGridFooter = <R,>({
-  context,
-}: {
-  context: DataGridContext<R>;
-}) => {
-  const {
-    visibleColumns,
-    rows,
-    selectedRows,
-    sortedRows,
-    rowHeight = 48,
-    selectable,
-  } = useDataGridContext(context);
-
-  return (
-    <tfoot
-      // className="block border-t border-t-gray-300"
-      style={{
-        paddingRight: `${SCROLL_BAR_SIZE[0]}px`,
-      }}
-    >
-      <tr
-        // className="grid bg-gray-100"
-        style={{
-          height: `${rowHeight}px`,
-        }}
-      >
-        {!!selectable && (
-          <div
-            // className="inline-block w-12 select-none"
-            key="__select_checkbox__"
-          ></div>
-        )}
-        {visibleColumns.map(([key, col]) => (
-          <div
-            key={key}
-            className={join(
-              [
-                // 'inline-block relative group px-3 py-0 text-left text-sm hover:bg-gray-50 leading-6',
-                col.className,
-                col.footerClassName,
-                // '!overflow-visible',
-              ],
-              ' '
-            )}
-            style={{ width: (col.width ?? 150) + 'px' }}
-          >
-            {col.footer?.(rows, sortedRows, selectedRows)}
-          </div>
-        ))}
-      </tr>
-    </tfoot>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import { DataGridContext } from './types';
+import { useDataGridContext } from './hooks';
+
+export const DataGridFooter = <R,>({
+  context,
+}: {
+  context: DataGridContext<R>;
+}) => {
+  const {
+    visibleColumns,
+    rows,
+    selectedRows,
+    sortedRows,
+    selectable,
+    footers = {},
+    gridTemplateColumns,
+    footerFunctions,
+  } = useDataGridContext(context);
+
+  if (!Object.keys(footers).length) {
+    return null;
+  }
+
+  return (
+    <styles.DataGridFooterRow $gridTemplateColumns={gridTemplateColumns}>
+      {!!selectable && <styles.HeaderSelectionCell />}
+      {visibleColumns.map(([key, col]) => (
+        <styles.DataGridHeaderCellContainer
+          key={key}
+          style={{ width: (col.width ?? 150) + 'px' }}
+        >
+          {footerFunctions?.[key]?.(rows, sortedRows, selectedRows)}
+        </styles.DataGridHeaderCellContainer>
+      ))}
+    </styles.DataGridFooterRow>
+  );
+};

package/src/components/data/DataGrid/DataGridHeader.tsx

@@ -1,126 +1,126 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import * as styles from './styles';
-
-import {
-  ArrowsRotateIcon,
-  CopyIcon,
-  FilterSlashIcon,
-  TableColumnsIcon,
-} from '../../../Icons';
-import { useCallback, useState } from 'react';
-
-import { Button } from '../../forms';
-import { DataGridContext } from './types';
-import { DataGridHeaderCell } from './DataGridHeaderCell';
-import { IndeterminateCheckbox } from '../../forms/IndeterminateCheckbox';
-import { Loading } from '../../layout';
-import { useDataGridColumnsModal } from './DataGridColumnsModal/hooks';
-import { useDataGridContext } from './hooks';
-
-export const DataGridHeader = <R,>({
-  context,
-}: {
-  context: DataGridContext<R>;
-}) => {
-  const {
-    name,
-    visibleColumns,
-    selectable,
-    rows,
-    selectedKeys,
-    setSelectedKeys,
-    copyTable,
-    setFilters,
-    refresh,
-    headerColor,
-    rowKeyGetter,
-    gridTemplateColumns,
-    getAllIds,
-  } = useDataGridContext(context);
-  const [visibleFilter, setVisibleFilter] = useState<string | undefined>();
-
-  const { openModal, modal } = useDataGridColumnsModal<R>(context);
-
-  const checkboxStatus =
-    selectedKeys.length === 0
-      ? false
-      : selectedKeys.length === rows.length
-      ? true
-      : undefined;
-  const toggleAll = useCallback(
-    async (newStatus: boolean) => {
-      const allIds = getAllIds ? await getAllIds() : rows.map(rowKeyGetter);
-      setSelectedKeys(newStatus ? allIds : []);
-    },
-    [getAllIds, rowKeyGetter, rows, setSelectedKeys]
-  );
-
-  const onFilterButtonClicked = useCallback((columnKey: string) => {
-    setVisibleFilter((prev) => (prev === columnKey ? undefined : columnKey));
-  }, []);
-
-  const [isLoadingVisible, setIsLoadingVisible] = useState(false);
-  const runCopyTable = useCallback(() => {
-    setIsLoadingVisible(true);
-    copyTable().then(() => setIsLoadingVisible(false));
-  }, [copyTable]);
-
-  const toolsRow = (
-    <styles.DataGridToolsRow>
-      <Loading visible={isLoadingVisible} />
-      {refresh && (
-        <Button size="small" onClick={refresh}>
-          <ArrowsRotateIcon />
-          Rafraîchir
-        </Button>
-      )}
-      <Button color="emerald" size="small" onClick={runCopyTable}>
-        <CopyIcon />
-        Copier la table
-      </Button>
-      <Button size="small" color="danger" onClick={() => setFilters({})}>
-        <FilterSlashIcon />
-        Supprimer les filtres
-      </Button>
-      {name && (
-        <Button color="info" size="small" onClick={openModal}>
-          <TableColumnsIcon />
-          Paramètres des colonnes
-        </Button>
-      )}
-    </styles.DataGridToolsRow>
-  );
-
-  return (
-    <>
-      {modal}
-      {toolsRow}
-      <styles.DataGridHeaderRow
-        $gridTemplateColumns={gridTemplateColumns}
-        $headerColor={headerColor}
-      >
-        {!!selectable && (
-          <styles.HeaderSelectionCell $headerColor={headerColor}>
-            <IndeterminateCheckbox
-              checked={checkboxStatus}
-              onChange={() => toggleAll(!(checkboxStatus ?? true))}
-            />
-          </styles.HeaderSelectionCell>
-        )}
-        {visibleColumns.map(([key, col], index) => (
-          <DataGridHeaderCell
-            key={key}
-            columnKey={key}
-            column={col}
-            context={context}
-            columnIndex={index}
-            isFilterOpen={visibleFilter === key}
-            onFilterButtonClicked={onFilterButtonClicked}
-          />
-        ))}
-      </styles.DataGridHeaderRow>
-    </>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import {
+  ArrowsRotateIcon,
+  CopyIcon,
+  FilterSlashIcon,
+  TableColumnsIcon,
+} from '../../../Icons';
+import { useCallback, useState } from 'react';
+
+import { Button } from '../../forms';
+import { DataGridContext } from './types';
+import { DataGridHeaderCell } from './DataGridHeaderCell';
+import { IndeterminateCheckbox } from '../../forms/IndeterminateCheckbox';
+import { Loading } from '../../layout';
+import { useDataGridColumnsModal } from './DataGridColumnsModal/hooks';
+import { useDataGridContext } from './hooks';
+
+export const DataGridHeader = <R,>({
+  context,
+}: {
+  context: DataGridContext<R>;
+}) => {
+  const {
+    name,
+    visibleColumns,
+    selectable,
+    rows,
+    selectedKeys,
+    setSelectedKeys,
+    copyTable,
+    setFilters,
+    refresh,
+    headerColor,
+    rowKeyGetter,
+    gridTemplateColumns,
+    getAllIds,
+  } = useDataGridContext(context);
+  const [visibleFilter, setVisibleFilter] = useState<string | undefined>();
+
+  const { openModal, modal } = useDataGridColumnsModal<R>(context);
+
+  const checkboxStatus =
+    selectedKeys.length === 0
+      ? false
+      : selectedKeys.length === rows.length
+      ? true
+      : undefined;
+  const toggleAll = useCallback(
+    async (newStatus: boolean) => {
+      const allIds = getAllIds ? await getAllIds() : rows.map(rowKeyGetter);
+      setSelectedKeys(newStatus ? allIds : []);
+    },
+    [getAllIds, rowKeyGetter, rows, setSelectedKeys]
+  );
+
+  const onFilterButtonClicked = useCallback((columnKey: string) => {
+    setVisibleFilter((prev) => (prev === columnKey ? undefined : columnKey));
+  }, []);
+
+  const [isLoadingVisible, setIsLoadingVisible] = useState(false);
+  const runCopyTable = useCallback(() => {
+    setIsLoadingVisible(true);
+    copyTable().then(() => setIsLoadingVisible(false));
+  }, [copyTable]);
+
+  const toolsRow = (
+    <styles.DataGridToolsRow>
+      <Loading visible={isLoadingVisible} />
+      {refresh && (
+        <Button size="small" onClick={refresh}>
+          <ArrowsRotateIcon />
+          Rafraîchir
+        </Button>
+      )}
+      <Button color="emerald" size="small" onClick={runCopyTable}>
+        <CopyIcon />
+        Copier la table
+      </Button>
+      <Button size="small" color="danger" onClick={() => setFilters({})}>
+        <FilterSlashIcon />
+        Supprimer les filtres
+      </Button>
+      {name && (
+        <Button color="info" size="small" onClick={openModal}>
+          <TableColumnsIcon />
+          Paramètres des colonnes
+        </Button>
+      )}
+    </styles.DataGridToolsRow>
+  );
+
+  return (
+    <>
+      {modal}
+      {toolsRow}
+      <styles.DataGridHeaderRow
+        $gridTemplateColumns={gridTemplateColumns}
+        $headerColor={headerColor}
+      >
+        {!!selectable && (
+          <styles.HeaderSelectionCell
+            $headerColor={headerColor}
+            onClick={() => toggleAll(!(checkboxStatus ?? true))}
+          >
+            <IndeterminateCheckbox checked={checkboxStatus} readOnly />
+          </styles.HeaderSelectionCell>
+        )}
+        {visibleColumns.map(([key, col], index) => (
+          <DataGridHeaderCell
+            key={key}
+            columnKey={key}
+            column={col}
+            context={context}
+            columnIndex={index}
+            isFilterOpen={visibleFilter === key}
+            onFilterButtonClicked={onFilterButtonClicked}
+          />
+        ))}
+      </styles.DataGridHeaderRow>
+    </>
+  );
+};