@addev-be/ui 0.1.18

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

@@ -0,0 +1,64 @@
+/* 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 && (
+          <th
+            // className="inline-block w-12 select-none"
+            key="__select_checkbox__"
+          ></th>
+        )}
+        {visibleColumns.map(([key, col]) => (
+          <th
+            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)}
+          </th>
+        ))}
+      </tr>
+    </tfoot>
+  );
+};

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

@@ -0,0 +1,129 @@
+/* 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, useMemo, 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,
+    selectedRows,
+    setSelectedRows,
+    copyTable,
+    setFilters,
+    refresh,
+    headerColor,
+  } = useDataGridContext(context);
+  const [visibleFilter, setVisibleFilter] = useState<string | undefined>();
+
+  const { openModal, modal } = useDataGridColumnsModal<R>(context);
+
+  const checkboxStatus =
+    selectedRows.length === 0
+      ? false
+      : selectedRows.length === rows.length
+      ? true
+      : undefined;
+  const toggleAll = useCallback(
+    (newStatus: boolean) => {
+      setSelectedRows(newStatus ? rows : []);
+    },
+    [rows, setSelectedRows]
+  );
+
+  const onFilterButtonClicked = useCallback((columnKey: string) => {
+    setVisibleFilter((prev) => (prev === columnKey ? undefined : columnKey));
+  }, []);
+
+  const gridTemplateColumns = useMemo(
+    () => visibleColumns.map(([, col]) => `${col.width ?? 150}px`).join(' '),
+    [visibleColumns]
+  );
+
+  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 && (
+          <th
+          //  className="inline-flex items-center justify-center w-12 select-none"
+          >
+            <IndeterminateCheckbox
+              checked={checkboxStatus}
+              onChange={() => toggleAll(!checkboxStatus)}
+            />
+          </th>
+        )}
+        {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,166 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import {
+  ArrowDownAZIcon,
+  ArrowUpZAIcon,
+  ArrowsUpDownIcon,
+  FilterFullIcon,
+  FilterIcon,
+} from '../../../Icons';
+import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
+
+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 = {},
+    sorts = {},
+    setSorts,
+    setColumnWidth,
+    saveSettings,
+    headerColor,
+  } = contextValue;
+  const filterButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  /** SORTING */
+  const SortIcon = sorts[columnKey]
+    ? sorts[columnKey] === 'desc'
+      ? ArrowUpZAIcon
+      : ArrowDownAZIcon
+    : ArrowsUpDownIcon;
+
+  const onSortButtonClicked = useCallback(
+    (columnKey: string) => {
+      const sort = sorts[columnKey];
+      if (!sort || sort === 'desc') {
+        setSorts({ [columnKey]: 'asc' });
+      } else {
+        setSorts({ [columnKey]: 'desc' });
+      }
+    },
+    [setSorts, sorts]
+  );
+
+  /** 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={[200, 320]}
+        $autoPositionX
+      >
+        <DataGridFilterMenu
+          columnKey={columnKey}
+          columnIndex={columnIndex}
+          context={context}
+          onClose={() => setIsFilterDropdownVisible(false)}
+        />
+      </Dropdown>
+    );
+  }, [
+    columnIndex,
+    columnKey,
+    context,
+    getElementScreenRect,
+    isFilterDropdownVisible,
+  ]);
+
+  const onFilterButtonClicked = useCallback(() => {
+    setIsFilterDropdownVisible(true);
+  }, []);
+
+  return (
+    <styles.DataGridHeaderCellContainer
+      $headerColor={headerColor}
+      $isResizing={isResizing}
+    >
+      {filterDropdown}
+      <span>{column.name}</span>
+      {!!column.sortGetter && (
+        <IconButton
+          color={headerColor}
+          size="small"
+          icon={SortIcon}
+          onClick={() => onSortButtonClicked?.(columnKey)}
+        />
+      )}
+      {!!column.filter && (
+        <IconButton
+          size="small"
+          ref={filterButtonRef}
+          icon={
+            filters[columnKey]?.values.length > 0 ? FilterFullIcon : FilterIcon
+          }
+          color={filters[columnKey]?.values.length > 0 ? '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,125 @@
+/* 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;
+  }>;
+} = {
+  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<
+  R,
+  T extends DataGridFilterType = DataGridFilterType
+> = {
+  filter: DataGridFilter<R, T>;
+  onFilterChanged: (filter: DataGridFilter<R, T>) => void;
+};
+
+export const FilterModalContent = <
+  R,
+  T extends DataGridFilterType = DataGridFilterType
+>({
+  filter,
+  onFilterChanged,
+}: FilterModalContentProps<R, T>) => {
+  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] ?? ''}
+          // className={(type === 'number' ? 'w-24 ' : '') + 'text-sm'}
+          onChange={(e) => {
+            const newValues = [...values];
+            newValues[0] =
+              type === 'number'
+                ? Number(e.target.value)
+                : (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] ?? ''}
+            // className="text-sm w-24"
+            onChange={(e) => {
+              const newValues = [...values];
+              newValues[0] =
+                type === 'number'
+                  ? Number(e.target.value)
+                  : (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/FilterValuesScroller.tsx

@@ -0,0 +1,131 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import * as styles from './styles';
+
+import {
+  DataGridFilterCheckbox,
+  DataGridFilterFormatter,
+  DataGridFilterGroup,
+} from './types';
+import { debounce, join } from 'lodash';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { getCheckboxes } from './helpers';
+import { useElementSize } from '../../../hooks';
+
+const defaultFormatter = (value: any) => (value == null ? null : String(value));
+
+const CheckboxTemplate = <R extends string | number | null>({
+  selectedValues,
+  value,
+  index,
+  className,
+  style,
+  onToggle,
+}: {
+  selectedValues: R[];
+  value: DataGridFilterCheckbox<R>;
+  index: number;
+  className?: string;
+  style?: React.CSSProperties;
+  onToggle?: (values: R[]) => void;
+}) => (
+  <div
+    key={index}
+    className={join(
+      [
+        // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
+        className,
+      ],
+      ' '
+    )}
+    style={{ ...style, paddingLeft: `${value.level}rem` }}
+    title={value.displayValue || '(Vides)'}
+    onClick={() => onToggle?.(value.values)}
+  >
+    <input
+      type="checkbox"
+      checked={selectedValues.includes(value.values[0])}
+      readOnly
+      // className="inline-block mr-2"
+    />
+    <span
+    // className="mr-2 truncate"
+    >
+      {value.displayValue || '(Vides)'}
+    </span>
+  </div>
+);
+
+type FilterValuesScrollerProps<R extends string | number | null> = {
+  values: R[];
+  rowHeight?: number;
+  formatter: DataGridFilterFormatter;
+  onRangeChange?: (startIndex: number, length: number) => void;
+  onToggle?: (values: R[]) => void;
+  selectedValues?: R[];
+  groups?: DataGridFilterGroup<R>[];
+};
+
+export const FilterValuesScroller = <R extends string | number | null>({
+  values,
+  rowHeight = styles.DEFAULT_FILTER_ROW_HEIGHT,
+  onRangeChange,
+  onToggle,
+  formatter = defaultFormatter,
+  selectedValues = [],
+  groups,
+}: FilterValuesScrollerProps<R>) => {
+  const scrollableRef = useRef<HTMLDivElement | null>(null);
+  const { height } = useElementSize(scrollableRef.current);
+
+  const tolerance = 20;
+  const [scrollTop, setScrollTop] = useState(0);
+  const index = Math.floor(scrollTop / rowHeight);
+  const length = Math.ceil(height / rowHeight);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onScroll = useCallback(
+    debounce((e: React.UIEvent<HTMLDivElement>) => {
+      const target = e.target as HTMLDivElement;
+      setScrollTop(() => target.scrollTop);
+    }, 50),
+    []
+  );
+
+  const checkboxes = useMemo(
+    () => getCheckboxes(values, formatter ?? defaultFormatter, groups),
+    [values, groups, formatter]
+  );
+  const visibleCheckboxes = checkboxes.slice(
+    Math.max(0, index - tolerance),
+    index + length + 1 + tolerance
+  );
+  const firstCheckboxTop = Math.max(0, index - tolerance) * rowHeight;
+
+  useEffect(() => {
+    onRangeChange?.(index, length);
+  }, [index, length, onRangeChange]);
+
+  return (
+    <styles.FilterValuesScrollerContainer
+      ref={scrollableRef}
+      onScroll={onScroll}
+      $rowHeight={rowHeight}
+    >
+      <div style={{ height: `${values.length * rowHeight}px` }}>
+        {visibleCheckboxes.map((value, index) => (
+          <CheckboxTemplate
+            className="checkbox"
+            style={{ top: firstCheckboxTop + index * rowHeight + 'px' }}
+            key={index}
+            selectedValues={selectedValues}
+            value={value}
+            index={index}
+            onToggle={onToggle}
+          />
+        ))}
+      </div>
+    </styles.FilterValuesScrollerContainer>
+  );
+};

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

@@ -0,0 +1,51 @@
+import * as styles from './styles';
+
+import { ReactNode, useContext, useMemo } 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,
+    visibleColumns,
+    index,
+    visibleRows,
+  } = 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;
+
+  const gridTemplateColumns = useMemo(
+    () => visibleColumns.map(([, col]) => `${col.width ?? 150}px`).join(' '),
+    [visibleColumns]
+  );
+
+  return (
+    <styles.VirtualScrollerContainer $height={totalHeight}>
+      <styles.VirtualScrollerRowsContainer
+        $gridTemplateColumns={gridTemplateColumns}
+        $topPadding={topPadding}
+        $rowHeight={rowHeight}
+      >
+        {visibleRows.map(rowTemplate)}
+      </styles.VirtualScrollerRowsContainer>
+    </styles.VirtualScrollerContainer>
+  );
+};