@addev-be/ui 0.2.13 → 0.2.15

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

@@ -1,360 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import * as styles from './styles';
-
-import {
-  ArrowDown19Icon,
-  ArrowDownAZIcon,
-  ArrowDownBigSmallIcon,
-  ArrowUp91Icon,
-  ArrowUpBigSmallIcon,
-  ArrowUpZAIcon,
-  FilterIcon,
-  FilterSlashIcon,
-  IconFC,
-  MagnifierIcon,
-  SigmaIcon,
-  SortCalendarAscendingIcon,
-  SortCalendarDescendingIcon,
-  TableFooterIcon,
-  TableFooterSlashIcon,
-  TallyIcon,
-  XBarIcon,
-} from '../../../../Icons';
-import {
-  DataGridContext,
-  DataGridFilterType,
-  DataGridFilterValue,
-  DataGridFooterPredefinedFunction,
-} from '../types';
-import {
-  applyFilters,
-  defaultRendererAndFormatter,
-  getDateGroups,
-} from '../helpers';
-import { intersection, uniq, without } from 'lodash';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-
-import { ContextMenu } from '../../../ui/ContextMenu';
-import { FilterValuesScroller } from './FilterValuesScroller';
-import { Input } from '../../../forms';
-import { useFilterModal } from './hooks';
-
-type FilterValuesProps<R> = {
-  columnKey: string;
-  columnIndex: number;
-  context: DataGridContext<R>;
-  onClose?: () => void;
-};
-
-const sortAsc: Record<DataGridFilterType, [string, IconFC]> = {
-  number: ['Trier du plus petit au plus grand', ArrowDown19Icon],
-  text: ['Trier de A à Z', ArrowDownAZIcon],
-  date: ['Trier du plus ancien au plus récent', SortCalendarAscendingIcon],
-};
-const sortDesc: Record<DataGridFilterType, [string, IconFC]> = {
-  number: ['Trier du plus grand au plus petit', ArrowUp91Icon],
-  text: ['Trier de Z à A', ArrowUpZAIcon],
-  date: ['Trier du plus récent au plus ancien', SortCalendarDescendingIcon],
-};
-
-const footerFunctionsTexts: Record<DataGridFooterPredefinedFunction, string> = {
-  average: 'Moyenne',
-  avg: 'Moyenne',
-  count: 'Nombre',
-  max: 'Maximum',
-  min: 'Minimum',
-  sum: 'Somme',
-};
-const footerFunctionsIcons: Record<DataGridFooterPredefinedFunction, IconFC> = {
-  average: XBarIcon,
-  avg: XBarIcon,
-  count: TallyIcon,
-  max: ArrowUpBigSmallIcon,
-  min: ArrowDownBigSmallIcon,
-  sum: SigmaIcon,
-};
-
-export const DataGridFilterMenu = <R,>({
-  columnKey,
-  context,
-  onClose,
-}: FilterValuesProps<R>) => {
-  const { openModal, modal } = useFilterModal({ columnKey, context });
-  const {
-    filters = {},
-    footers = {},
-    rows,
-    columns,
-    setFilters,
-    filterValuesLoader,
-    setSorts,
-    setFooters,
-  } = useContext(context);
-  const column = columns[columnKey] ?? {};
-  const textFilterInputRef = useRef<HTMLInputElement>(null);
-  const [textFilter, setTextFilter] = useState('');
-
-  const [availableValues, setAvailableValues] = useState<DataGridFilterValue[]>(
-    []
-  );
-
-  useEffect(() => {
-    if (filterValuesLoader) {
-      filterValuesLoader(columnKey).then((values) => {
-        setAvailableValues(() => values);
-      });
-    } else {
-      const otherFilters = Object.entries(filters)
-        .filter(([key]) => key !== columnKey)
-        .map(([, filter]) => filter);
-      const availableRows = applyFilters(rows, otherFilters);
-      const values = availableRows.map((row) => column.filter!.getter(row));
-      setAvailableValues(() =>
-        uniq(values).sort(
-          column.filter?.type === 'number'
-            ? (a, b) => (a as number) - (b as number)
-            : (a, b) => (a as string).localeCompare(b as string)
-        )
-      );
-    }
-  }, [column.filter, columnKey, filterValuesLoader, filters, rows]);
-
-  const selectedValues = useMemo(
-    () => filters?.[columnKey]?.values ?? [],
-    [columnKey, filters]
-  );
-
-  const clearFilter = useCallback(() => {
-    const newFilters = { ...filters };
-    delete newFilters[columnKey];
-    setFilters(newFilters);
-    onClose?.();
-  }, [filters, columnKey, setFilters, onClose]);
-
-  const setValuesChecked = useCallback(
-    (values: any[], checked?: boolean) => {
-      setFilters((prevFilters) => {
-        const newValues = checked
-          ? [...(prevFilters[columnKey]?.values ?? []), ...values]
-          : without(prevFilters[columnKey]?.values ?? [], ...values);
-        const newFilters = {
-          ...prevFilters,
-        };
-        if (newValues.length === 0) {
-          delete newFilters[columnKey];
-        } else {
-          newFilters[columnKey] = {
-            ...(prevFilters[columnKey] ?? column.filter),
-            operator: 'inArray',
-            values: newValues,
-          };
-        }
-        return newFilters;
-      });
-    },
-    [setFilters, columnKey, column.filter]
-  );
-
-  const toggleValues = useCallback(
-    (values: DataGridFilterValue[]) => {
-      const checked =
-        intersection(selectedValues, values).length === values.length;
-      setValuesChecked(values, !checked);
-    },
-    [setValuesChecked, selectedValues]
-  );
-
-  const formatter = useMemo(
-    () => column.filter?.formatter ?? defaultRendererAndFormatter,
-    [column.filter?.formatter]
-  );
-  const renderer = useMemo(
-    () => column.filter?.renderer ?? defaultRendererAndFormatter,
-    [column.filter?.renderer]
-  );
-
-  const filteredAvailableValues = useMemo(
-    () =>
-      !textFilter
-        ? availableValues
-        : availableValues.filter((value) =>
-            formatter(value)?.toLowerCase().includes(textFilter.toLowerCase())
-          ),
-    [availableValues, formatter, textFilter]
-  );
-
-  useEffect(() => {
-    if (textFilterInputRef.current) {
-      textFilterInputRef.current.focus();
-    }
-  }, []);
-
-  const checkboxesComponent = useMemo(() => {
-    const groups =
-      column.type === 'date'
-        ? getDateGroups(filteredAvailableValues)
-        : undefined;
-    return (
-      <FilterValuesScroller
-        values={filteredAvailableValues}
-        selectedValues={selectedValues}
-        onToggle={toggleValues}
-        formatter={formatter}
-        renderer={renderer}
-        groups={groups}
-      />
-    );
-  }, [
-    column.type,
-    filteredAvailableValues,
-    formatter,
-    renderer,
-    selectedValues,
-    toggleValues,
-  ]);
-
-  const onSortAscClicked = useCallback(() => {
-    setSorts({ [columnKey]: 'asc' });
-    onClose?.();
-  }, [columnKey, onClose, setSorts]);
-  const onSortDescClicked = useCallback(() => {
-    setSorts({ [columnKey]: 'desc' });
-    onClose?.();
-  }, [columnKey, onClose, setSorts]);
-
-  const hasFilters = filters[columnKey]?.values.length > 0;
-  const [[sortAscText, SortAscIcon], [sortDescText, SortDescIcon]] = [
-    sortAsc[column.filter?.type ?? 'text'],
-    sortDesc[column.filter?.type ?? 'text'],
-  ];
-
-  const isFooterVisible =
-    columnKey in footers && footers[columnKey] !== undefined;
-  const showFooter = useCallback(
-    (key: string) => {
-      setFooters((prevFooters) => ({
-        ...prevFooters,
-        [columnKey]: key,
-      }));
-      onClose?.();
-    },
-    [columnKey, onClose, setFooters]
-  );
-  const hideFooter = useCallback(() => {
-    setFooters((prevFooters) => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { [columnKey]: _, ...newFooters } = prevFooters;
-      return newFooters;
-    });
-    onClose?.();
-  }, [columnKey, onClose, setFooters]);
-
-  return (
-    <ContextMenu>
-      {modal}
-      {column.sortGetter && (
-        <>
-          <ContextMenu.Item onClick={onSortAscClicked}>
-            <SortAscIcon />
-            {sortAscText}
-          </ContextMenu.Item>
-          <ContextMenu.Item onClick={onSortDescClicked}>
-            <SortDescIcon />
-            {sortDescText}
-          </ContextMenu.Item>
-          <ContextMenu.Divider />
-        </>
-      )}
-      {isFooterVisible && typeof column.footer === 'function' && (
-        <>
-          <ContextMenu.Item onClick={hideFooter}>
-            <TableFooterSlashIcon />
-            Masquer le total
-          </ContextMenu.Item>
-          <ContextMenu.Divider />
-        </>
-      )}
-      {!isFooterVisible && typeof column.footer === 'function' && (
-        <>
-          <ContextMenu.Item onClick={() => showFooter('count')}>
-            <TableFooterIcon />
-            Afficher le total
-          </ContextMenu.Item>
-          <ContextMenu.Divider />
-        </>
-      )}
-      {typeof column.footer === 'object' && (
-        <>
-          <ContextMenu.ParentItem>
-            <TableFooterIcon />
-            Afficher le total
-            <ContextMenu.SubMenu>
-              {Object.keys(column.footer).map((key) => {
-                const TotalIcon =
-                  footerFunctionsIcons[
-                    key as DataGridFooterPredefinedFunction
-                  ] ?? TableFooterIcon;
-                return (
-                  <ContextMenu.Item key={key} onClick={() => showFooter(key)}>
-                    <TotalIcon />
-                    {key in footerFunctionsTexts
-                      ? footerFunctionsTexts[
-                          key as DataGridFooterPredefinedFunction
-                        ]
-                      : key}
-                  </ContextMenu.Item>
-                );
-              })}
-              <ContextMenu.Divider />
-              <ContextMenu.Item
-                onClick={hideFooter}
-                disabled={!isFooterVisible}
-              >
-                <TableFooterSlashIcon />
-                Masquer le total
-              </ContextMenu.Item>
-            </ContextMenu.SubMenu>
-          </ContextMenu.ParentItem>
-          <ContextMenu.Divider />
-        </>
-      )}
-      <ContextMenu.Item onClick={openModal}>
-        <FilterIcon />
-        Filtrer ...
-      </ContextMenu.Item>
-      <ContextMenu.Item
-        $color="danger"
-        onClick={clearFilter}
-        disabled={!hasFilters}
-      >
-        <FilterSlashIcon />
-        Supprimer le filtre
-      </ContextMenu.Item>
-      <ContextMenu.Divider />
-      <styles.InputContainer>
-        <MagnifierIcon />
-        <Input
-          ref={textFilterInputRef}
-          type="text"
-          name="search"
-          id="search"
-          placeholder="Rechercher ..."
-          value={textFilter}
-          onChange={(e) => setTextFilter(e.target.value)}
-        />
-      </styles.InputContainer>
-      <styles.CheckboxesContainer>
-        {checkboxesComponent}
-      </styles.CheckboxesContainer>
-    </ContextMenu>
-  );
-};

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

@@ -1,96 +0,0 @@
-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

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