@addev-be/ui 0.2.16 → 0.2.18

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

@@ -0,0 +1,96 @@
+import styled from 'styled-components';
+
+export const DEFAULT_FILTER_ROW_HEIGHT = 24;
+
+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;
+`;
+
+export const FilterValueContainer = styled.div.attrs({
+  className: 'FilterValueContainer',
+})`
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--color-neutral-50);
+  }
+`;
+
+export const FilterValuesScrollerContainer = styled.div.attrs({
+  className: 'FilterValuesScrollerContainer',
+})<{
+  $rowHeight?: number;
+}>`
+  display: block;
+  font-size: var(--text-base);
+  background-color: var(--color-neutral-0);
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 100%;
+
+  & > div {
+    position: relative;
+  }
+
+  & ${FilterValueContainer} {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: ${({ $rowHeight = DEFAULT_FILTER_ROW_HEIGHT }) =>
+      `${$rowHeight}px`};
+
+    input[type='checkbox'] {
+      margin-right: var(--space-1);
+    }
+  }
+`;

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

@@ -0,0 +1,42 @@
+/* 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

@@ -0,0 +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}
+            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>
+    </>
+  );
+};

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

@@ -0,0 +1,132 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
+
+import { ChevronDownIcon } from '../../../Icons';
+import { DataGridFilterMenu } from './DataGridFilterMenu';
+import { DataGridHeaderCellProps } from './types';
+import { Dropdown } from '../../layout';
+import { IconButton } from '../../forms/IconButton';
+import { useDataGridContext } from './hooks';
+import { useUi } from '../../../providers';
+
+export const DataGridHeaderCell = <R,>({
+  columnKey,
+  columnIndex,
+  column,
+  context,
+}: DataGridHeaderCellProps<R>) => {
+  const { getElementScreenRect } = useUi();
+  const contextValue = useDataGridContext(context);
+  const {
+    filters = {},
+    setColumnWidth,
+    saveSettings,
+    headerColor,
+  } = contextValue;
+  const filterButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  /** RESIZING */
+
+  const [isResizing, setIsResizing] = useState(false);
+  const resizingOffset = useRef(0);
+
+  const onResizeStart = useCallback(
+    (e: MouseEvent) => {
+      resizingOffset.current = e.screenX - (column.width || 150);
+      setIsResizing(true);
+    },
+    [column.width]
+  );
+
+  const onResizeMove = useCallback(
+    (e: MouseEvent) => {
+      if (isResizing) {
+        const newWidth = Math.max(86, e.screenX - resizingOffset.current);
+        setColumnWidth(columnKey, newWidth);
+      }
+    },
+    [columnKey, isResizing, setColumnWidth]
+  );
+
+  const onResizeEnd = useCallback(() => {
+    setIsResizing(false);
+    saveSettings();
+  }, [saveSettings]);
+
+  const [isFilterDropdownVisible, setIsFilterDropdownVisible] = useState(false);
+  const filterDropdown = useMemo(() => {
+    if (!isFilterDropdownVisible || !filterButtonRef.current || !columnKey) {
+      return null;
+    }
+    const filterButtonRect = getElementScreenRect(filterButtonRef.current);
+    filterButtonRect.x += window.scrollX;
+    filterButtonRect.y += window.scrollY;
+    return (
+      <Dropdown
+        $sourceRect={filterButtonRect}
+        onClose={() => setIsFilterDropdownVisible(false)}
+        $width={320}
+        $height={[250, 400]}
+        $autoPositionX
+      >
+        <DataGridFilterMenu
+          columnKey={columnKey}
+          columnIndex={columnIndex}
+          context={context}
+          onClose={() => setIsFilterDropdownVisible(false)}
+        />
+      </Dropdown>
+    );
+  }, [
+    columnIndex,
+    columnKey,
+    context,
+    getElementScreenRect,
+    isFilterDropdownVisible,
+  ]);
+
+  const onFilterButtonClicked = useCallback(() => {
+    setIsFilterDropdownVisible(true);
+  }, []);
+
+  const hasFilters = filters[columnKey]?.values.length > 0;
+
+  return (
+    <styles.DataGridHeaderCellContainer
+      $headerColor={headerColor}
+      $isResizing={isResizing}
+    >
+      {filterDropdown}
+      <span>{column.name}</span>
+      {!!column.filter && (
+        <IconButton
+          size="small"
+          className={hasFilters ? 'danger' : ''}
+          ref={filterButtonRef}
+          icon={ChevronDownIcon}
+          color={hasFilters ? 'danger' : headerColor}
+          onClick={onFilterButtonClicked}
+        />
+      )}
+      {column.resizable !== false && (
+        <>
+          <styles.DataGridResizeGrip
+            className={isResizing ? 'active' : ''}
+            $headerColor={headerColor}
+            onMouseDown={onResizeStart}
+          />
+          {isResizing && (
+            <styles.ResizeBackdrop
+              onMouseMove={onResizeMove}
+              onMouseUp={onResizeEnd}
+            />
+          )}
+        </>
+      )}
+    </styles.DataGridHeaderCellContainer>
+  );
+};

package/src/components/data/DataGrid/FilterModalContent/index.tsx

@@ -0,0 +1,136 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import {
+  DataGridFilter,
+  DataGridFilterOperator,
+  DataGridFilterType,
+} from '../types';
+import { Input, Select } from '../../../forms';
+import { useEffect, useRef } from 'react';
+
+// import { Select } from '../../Select';
+// import clx from 'classnames';
+
+const filterOperators: {
+  [K in DataGridFilterType]: Partial<{
+    [K2 in DataGridFilterOperator<K>]: string;
+  }>;
+} = {
+  date: {
+    after: 'Après',
+    before: 'Avant',
+    equals: 'Égal à',
+    notEquals: 'Différent de',
+    inRange: "Dans l'intervalle",
+  },
+  number: {
+    equals: 'Égal à',
+    notEquals: 'Différent de',
+    greaterThan: 'Supérieur à',
+    greaterThanOrEqual: 'Supérieur ou égal à',
+    lessThan: 'Inférieur à',
+    lessThanOrEqual: 'Inférieur ou égal à',
+    inRange: "Dans l'intervalle",
+  },
+  text: {
+    equals: 'Égal à',
+    notEquals: 'Différent de',
+    contains: 'Contient',
+    notContains: 'Ne contient pas',
+    startsWith: 'Commence par',
+    endsWith: 'Finit par',
+  },
+};
+
+type FilterModalContentProps = {
+  filter: DataGridFilter;
+  onFilterChanged: (filter: DataGridFilter) => void;
+};
+
+export const FilterModalContent = ({
+  filter,
+  onFilterChanged,
+}: FilterModalContentProps) => {
+  const value1Ref = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    setTimeout(() => value1Ref.current?.focus(), 100);
+  }, []);
+
+  if (!filter) return null;
+
+  const { operator, type, values } = filter;
+  return (
+    <styles.FilterModalContentContainer>
+      <label htmlFor="filterOperator">
+        <span>Opérateur :</span>
+        <Select
+          name="filterOperator"
+          items={Object.entries(filterOperators[filter.type])}
+          itemKey={0}
+          itemLabel={1}
+          value={String(operator)}
+          className="text-sm"
+          onChange={(e) =>
+            onFilterChanged({ ...filter, operator: e.target.value as any })
+          }
+        />
+      </label>
+      <label htmlFor="filterValue1">
+        <span>{operator === 'inRange' ? 'Entre' : 'Valeur'} :</span>
+        <Input
+          ref={value1Ref}
+          name="filterValue1"
+          type={filter.type}
+          value={values[0] ?? ''}
+          onChange={(e) => {
+            if (type === 'number') {
+              const newValues = [...values];
+              newValues[0] = Number(e.target.value);
+              onFilterChanged({
+                ...filter,
+                values: newValues,
+              });
+            } else {
+              const newValues = [...values];
+              newValues[0] = String(e.target.value) as any;
+              onFilterChanged({
+                ...filter,
+                values: newValues,
+              });
+            }
+          }}
+        />
+      </label>
+      {operator === 'inRange' && (
+        <label htmlFor="filterValue2">
+          <span>et</span>
+          <Input
+            name="filterValue2"
+            type={filter.type}
+            value={values[1] ?? ''}
+            onChange={(e) => {
+              if (type === 'number') {
+                const newValues = [...values];
+                newValues[1] = Number(e.target.value);
+                onFilterChanged({
+                  ...filter,
+                  values: newValues,
+                });
+              } else {
+                const newValues = [...values];
+                newValues[1] = String(e.target.value) as any;
+                onFilterChanged({
+                  ...filter,
+                  values: newValues,
+                });
+              }
+            }}
+          />
+        </label>
+      )}
+    </styles.FilterModalContentContainer>
+  );
+};

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const FilterModalContentContainer = styled.div.attrs({
+  className: 'FilterModalContentContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  font-size: var(--text-base);
+  gap: var(--space-1);
+
+  & > label {
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-1);
+    align-items: center;
+
+    & > span {
+      font-weight: bold;
+      width: var(--space-32);
+    }
+  }
+`;

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

@@ -0,0 +1,46 @@
+import * as styles from './styles';
+
+import { ReactNode, useContext } from 'react';
+
+import { DataGridContext } from './types';
+
+type VirtualScrollerProps<R> = {
+  showAllRows?: boolean;
+  rowTemplate: (row: R, index: number) => ReactNode;
+  hasFooter?: boolean;
+  context: DataGridContext<R>;
+  onRangeChange?: (startIndex: number, length: number) => void;
+};
+
+export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
+  const {
+    rowHeight = styles.DEFAULT_ROW_HEIGHT,
+    // headerRowHeight = styles.DEFAULT_HEADER_ROW_HEIGHT,
+    sortedRows,
+    index,
+    visibleRows,
+    gridTemplateColumns,
+  } = useContext(props.context);
+  const {
+    rowTemplate,
+    // hasFooter, onRangeChange
+  } = props;
+
+  const totalHeight = sortedRows.length * rowHeight;
+  const topPadding =
+    Math.max(0, index - styles.VIRTUAL_SCROLL_TOLERANCE) * rowHeight;
+  // const headerAndFooterHeight =
+  //   2 * headerRowHeight + (hasFooter ? rowHeight : 0) + 2;
+
+  return (
+    <styles.VirtualScrollerContainer $height={totalHeight}>
+      <styles.VirtualScrollerRowsContainer
+        $gridTemplateColumns={gridTemplateColumns}
+        $topPadding={topPadding}
+        $rowHeight={rowHeight}
+      >
+        {visibleRows.map(rowTemplate)}
+      </styles.VirtualScrollerRowsContainer>
+    </styles.VirtualScrollerContainer>
+  );
+};