nntc-ui 0.2.4 → 0.2.6

package/src/components/view/VirtualTable/ui/DefaultColumn/DefaultColumn.tsx

@@ -0,0 +1,144 @@
+import { ColumnDef } from '@tanstack/react-table';
+import classnames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+
+import { Input } from '@components/common/Input';
+import { Surface } from '@components/layout/Surface/Surface';
+import { Modal } from '@components/view/Modal';
+import { Tooltip } from '@components/view/Tooltip/Tooltip';
+
+import { TableRow } from '../../models/TableRow';
+import * as styles from '../../virtualTable.module.css';
+
+export const DefaultColumn: Partial<ColumnDef<TableRow, unknown>> = {
+  cell: ({ getValue, row: { index, original }, column: { id, columnDef }, table }) => {
+    const initialValue = getValue<string | number | undefined>();
+    const { meta } = columnDef;
+    const tableMeta = table.options.meta;
+
+    const [value, setValue] = useState<string | undefined>(initialValue as string | undefined);
+    const [isEdit, setIsEdit] = useState<boolean>(false);
+    const [showModal, setShowModal] = useState<boolean>(false);
+
+    const closeModalRef = useRef<() => void>();
+
+    closeModalRef.current = () => {
+      setShowModal(false);
+    };
+
+    useEffect(() => {
+      setValue(initialValue as string | undefined);
+    }, [initialValue]);
+
+    const additionalViewResult = tableMeta?.additionalColumnsViews?.(id, initialValue, original[id]?.payload);
+
+    if (isEdit && meta?.editable) {
+      const onBlur = () => {
+        tableMeta?.updateData(index, id, value, original);
+        setIsEdit(false);
+      };
+
+      const onChange = (changeValue?: string, withBlur?: boolean) => {
+        setValue(changeValue);
+        if (withBlur) {
+          tableMeta?.updateData(index, id, changeValue, original);
+          setIsEdit(false);
+        }
+      };
+
+      return (
+        <Tooltip
+          label={original[id]?.tooltip ?? ''}
+          alertType={
+            original[id]?.fill === 'error' ? 'error' : original[id]?.fill === 'success' ? 'success' : 'default'
+          }
+        >
+          {additionalViewResult?.edit !== null && additionalViewResult?.edit !== undefined ? (
+            additionalViewResult.edit(onChange, onBlur)
+          ) : (
+            <>
+              <Input
+                classes={{ input: styles.input }}
+                componentSize="small"
+                variant="outlined"
+                onChange={(e) => onChange(e.target.value)}
+                onBlur={onBlur}
+                value={value ?? ''}
+                type={meta.inputType}
+                fullWidth
+                autoFocus
+              />
+            </>
+          )}
+        </Tooltip>
+      );
+    }
+
+    const shownValue =
+      additionalViewResult?.view !== null && additionalViewResult?.view !== undefined
+        ? additionalViewResult.view
+        : meta?.valueFormat
+          ? meta.valueFormat(initialValue)
+          : meta?.toFixed !== undefined && !Number.isNaN(parseFloat(initialValue as string))
+            ? parseFloat(Number(initialValue).toFixed(meta.toFixed))
+            : initialValue;
+
+    const hasCellAction = Boolean(meta?.editable || meta?.showInModal || (meta?.onClick && original[id]?.payload));
+
+    return (
+      <Tooltip
+        label={original[id]?.tooltip ?? ''}
+        alertType={original[id]?.fill === 'error' ? 'error' : original[id]?.fill === 'success' ? 'success' : 'default'}
+      >
+        <div
+          className={classnames(
+            styles.viewCell,
+            !!meta?.rowsAlign ? styles[`align${meta?.rowsAlign}` as keyof typeof styles] : undefined,
+            meta?.showInModal ? styles.showInModal : undefined,
+            meta?.onClick && original[id]?.payload ? styles.clickable : undefined,
+            !!original[id]?.fill ? styles[original[id].fill as keyof typeof styles] : undefined,
+            !!meta?.editable ? styles.editable : undefined,
+            !!meta?.verticalAlign ? styles[`verticalAlign${meta?.verticalAlign}` as keyof typeof styles] : undefined,
+          )}
+          {...(hasCellAction ? { 'data-vt-cell-action': '' } : undefined)}
+          onClick={
+            hasCellAction
+              ? (event) => {
+                  if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                    return;
+                  }
+
+                  if (meta?.editable) {
+                    setIsEdit(true);
+                    return;
+                  }
+
+                  if (meta?.showInModal) {
+                    setShowModal(true);
+                    return;
+                  }
+
+                  if (meta?.onClick && original[id]?.payload) {
+                    meta.onClick(original[id]?.payload ?? {});
+                  }
+                }
+              : undefined
+          }
+        >
+          <span className={styles.viewSpan}>{shownValue}</span>
+          {showModal && (
+            <Modal
+              root={tableMeta?.tableContainerRef?.current}
+              open={showModal}
+              onClose={() => closeModalRef.current?.()}
+            >
+              <Surface type="panel">
+                <div className={styles.modalContent}>{shownValue}</div>
+              </Surface>
+            </Modal>
+          )}
+        </div>
+      </Tooltip>
+    );
+  },
+};

package/{components/view/VirtualTable/ui/DefaultColumn/index.d.ts → src/components/view/VirtualTable/ui/DefaultColumn/index.ts}

@@ -1,2 +1 @@
 export { DefaultColumn } from './DefaultColumn';
-//# sourceMappingURL=index.d.ts.map

package/src/components/view/VirtualTable/ui/HeaderDropdown/HeaderDropdown.tsx

@@ -0,0 +1,359 @@
+import { ColumnMeta } from '@tanstack/react-table';
+import classnames from 'classnames';
+import { Dispatch, MutableRefObject, ReactNode, SetStateAction, useMemo } from 'react';
+
+import { Button } from '@components/common/Button';
+import { Item, SelectedItems } from '@components/common/Checklist';
+import { Checklist } from '@components/common/Checklist/Checklist';
+import { Menu, Divider as MenuDivider, Item as MenuItem } from '@components/navigation/Menu';
+import { Popover } from '@components/view/Popover/Popover';
+import { Tooltip } from '@components/view/Tooltip/Tooltip';
+import { useTranslation } from '@hooks/useTranslation';
+import { ArrowDropDownIcon, FilterIcon, SelectUniqueIcon, SortDownIcon, SortUpIcon } from '@icons/index';
+
+import * as styles from './headerDropdown.module.css';
+import { FilterBy } from '../../models/FilterBy';
+import { SortBy } from '../../models/SortBy';
+import { TableRow } from '../../models/TableRow';
+import { alphanumericCompare } from '../../utils/alphanumericCompare';
+import { DateFiltration } from '../DateFiltration';
+import { NumberFiltration } from '../NumberFiltration';
+
+interface HeaderDropdownProps {
+  headerMeta: ColumnMeta<TableRow, unknown>;
+  sortBy: SortBy[];
+  setSortBy: Dispatch<SetStateAction<SortBy[]>>;
+  filterBy: FilterBy[];
+  setFilterBy: Dispatch<SetStateAction<FilterBy[]>>;
+  headerName: string;
+  rows: TableRow[];
+  rowsForUniqueCount?: TableRow[];
+  containerRef?: HTMLElement | MutableRefObject<HTMLElement | null> | null;
+  showUniqueValuesCount?: boolean;
+  leftAdditionalContent?: (headerName: string) => ReactNode;
+  rightAdditionalContent?: (headerName: string) => ReactNode;
+  children?: (afterNode?: ReactNode) => ReactNode;
+}
+
+export function HeaderDropdown(props: HeaderDropdownProps) {
+  const {
+    headerMeta: {
+      sortable = false,
+      selectUnique = false,
+      sortType,
+      sortAnotherName,
+      filtrationByNumber = false,
+      filtrationByDate = false,
+      filtrationByValue = false,
+      valueFormat,
+      toFixed,
+    },
+    sortBy,
+    setSortBy,
+    filterBy,
+    setFilterBy,
+    headerName,
+    containerRef,
+    showUniqueValuesCount,
+    leftAdditionalContent,
+    rightAdditionalContent,
+    children,
+    rows,
+    rowsForUniqueCount,
+  } = props;
+
+  const headerResultName = sortAnotherName ?? headerName;
+
+  const filterItems = useMemo(() => {
+    // rows приходят из VirtualTable: для колонки без фильтра — все текущие фильтры,
+    // для колонки с фильтром — строки «до добавления» фильтра этой колонки (по порядку в filterBy).
+    const checklistItems = rows
+      .map(
+        (i) =>
+          ({
+            name: i[headerResultName]
+              ? valueFormat
+                ? valueFormat(i[headerResultName].value)
+                : toFixed !== undefined && !Number.isNaN(parseFloat(i[headerResultName].value as string))
+                  ? parseFloat(Number(i[headerResultName].value).toFixed(toFixed)).toString()
+                  : i[headerResultName].value?.toString() || '< нет значения >'
+              : '< нет значения >',
+            value: i[headerResultName]?.value?.toString() || '',
+          }) as Item,
+      )
+      .sort((a, b) => {
+        const aName = a.name.toString();
+        const bName = b.name.toString();
+        const noValue = '< нет значения >';
+
+        if (aName === noValue) return -1;
+        if (bName === noValue) return 1;
+
+        return alphanumericCompare(aName, bName);
+      });
+
+    const uniqueChecklistItems = [
+      ...checklistItems
+        .reduce((a, c) => {
+          a.set(c.value, c);
+          return a;
+        }, new Map<string, Item>())
+        .values(),
+    ];
+
+    return uniqueChecklistItems;
+  }, [rows, headerResultName, valueFormat, toFixed]);
+
+  const uniqueValuesCount = useMemo(() => {
+    const sourceRows = rowsForUniqueCount ?? rows;
+    const unique = new Set<string>();
+
+    sourceRows.forEach((sr) => {
+      const cell = sr?.[headerResultName];
+      unique.add(cell ? (cell.value ?? '')?.toString() : '');
+    });
+
+    const valueFilter = filterBy.find((fb) => fb.columnName === headerResultName && fb.type === 'value');
+    const selected = (valueFilter?.values ?? []).map((v) => (v ?? '')?.toString());
+
+    // Для отфильтрованных по значениям колонок показываем не "все уникальные",
+    // а только количество выбранных значений, которые реально присутствуют в итоговой выдаче.
+    if (selected.length > 0) {
+      const selectedSet = new Set(selected);
+      let count = 0;
+      unique.forEach((u) => {
+        if (selectedSet.has(u)) count += 1;
+      });
+      return count;
+    }
+
+    return unique.size;
+  }, [rowsForUniqueCount, rows, headerResultName, filterBy]);
+
+  const filterSelectedItems = useMemo(() => {
+    const result: SelectedItems = {};
+    filterBy
+      .find((fb) => fb.columnName === headerResultName)
+      ?.values.forEach((v) => {
+        result[v] = true;
+      });
+    return result;
+  }, [filterBy, headerResultName]);
+
+  const filterNumbers = useMemo(() => {
+    return filterBy.find((fb) => fb.columnName === headerResultName && fb.type === 'numberRange')?.values as
+      | number[]
+      | undefined;
+  }, [filterBy, headerResultName]);
+
+  const filterDates = useMemo(() => {
+    return filterBy.find((fb) => fb.columnName === headerResultName && fb.type === 'dateRange')?.values as
+      | string[]
+      | undefined;
+  }, [filterBy, headerResultName]);
+
+  const handleSortClick = (direction: 'asc' | 'desc') => () => {
+    setSortBy((prev) => {
+      if (prev.some((p) => p.columnName === headerResultName && p.direction === direction)) {
+        return prev.filter((p) => !(p.columnName === headerResultName && p.direction === direction));
+      } else {
+        if (prev.some((p) => p.columnName === headerResultName)) {
+          return prev.map((p) => (p.columnName === headerResultName ? { ...p, direction } : { ...p }));
+        } else {
+          return prev.concat([{ columnName: headerResultName, direction, sortType }]);
+        }
+      }
+    });
+  };
+
+  const actionWithSelectedNumbers = (values: number[]) => {
+    setFilterBy((prev) => {
+      if (values[0] === -Infinity && values[1] === Infinity) {
+        return [...prev.filter((p) => !(p.columnName === headerResultName && p.type === 'numberRange'))];
+      } else {
+        const newResult = [...prev];
+        const existIndex = newResult.findIndex((p) => p.columnName === headerResultName && p.type === 'numberRange');
+        if (existIndex !== -1) {
+          newResult[existIndex] = { ...newResult[existIndex], values };
+        } else {
+          newResult.push({
+            columnName: headerResultName,
+            type: 'numberRange',
+            values,
+          });
+        }
+        return newResult;
+      }
+    });
+  };
+
+  const actionWithSelectedDates = (values: (string | undefined)[]) => {
+    setFilterBy((prev) => {
+      if (values[0] === undefined || values[1] === undefined) {
+        return [...prev.filter((p) => !(p.columnName === headerResultName && p.type === 'dateRange'))];
+      } else {
+        const newResult = [...prev];
+        const existIndex = newResult.findIndex((p) => p.columnName === headerResultName && p.type === 'dateRange');
+        if (existIndex !== -1) {
+          newResult[existIndex] = { ...newResult[existIndex], values: values as string[] };
+        } else {
+          newResult.push({
+            columnName: headerResultName,
+            type: 'dateRange',
+            values: values as string[],
+          });
+        }
+        return newResult;
+      }
+    });
+  };
+
+  const actionWithSelectedObjects = (selected: SelectedItems) => {
+    Object.entries(selected).forEach(([key, value]) => {
+      if (!value) {
+        delete selected[key];
+      }
+    });
+    const selectedValues = Object.keys(selected);
+    setFilterBy((prev) => {
+      if (selectedValues.length === 0) {
+        return prev
+          .map((p) => {
+            if (p.columnName !== headerResultName || p.type !== 'value') {
+              return p;
+            }
+            return p.uniqueFirstPerValue ? { ...p, values: [] } : null;
+          })
+          .filter((p): p is FilterBy => p !== null);
+      }
+      const newResult = [...prev];
+      const existIndex = newResult.findIndex((p) => p.columnName === headerResultName && p.type === 'value');
+      if (existIndex !== -1) {
+        newResult[existIndex] = { ...newResult[existIndex], values: selectedValues };
+      } else {
+        newResult.push({ columnName: headerResultName, type: 'value', values: selectedValues });
+      }
+      return newResult;
+    });
+  };
+
+  const uniqueFirstPerValue = filterBy.some(
+    (fb) => fb.columnName === headerResultName && fb.type === 'value' && fb.uniqueFirstPerValue,
+  );
+
+  const toggleUniqueFirstPerValue = () => {
+    setFilterBy((prev) => {
+      const existIndex = prev.findIndex((p) => p.columnName === headerResultName && p.type === 'value');
+      if (existIndex !== -1) {
+        const current = prev[existIndex];
+        const nextFlag = !current.uniqueFirstPerValue;
+        if (!nextFlag && current.values.length === 0) {
+          return prev.filter((_, i) => i !== existIndex);
+        }
+        return prev.map((p, i) => {
+          if (i !== existIndex) {
+            return p;
+          }
+          if (nextFlag) {
+            return { ...p, uniqueFirstPerValue: true };
+          }
+          return { columnName: p.columnName, type: p.type, values: p.values };
+        });
+      }
+      return [...prev, { columnName: headerResultName, type: 'value', values: [], uniqueFirstPerValue: true }];
+    });
+  };
+
+  const hasAnyFilter = Object.keys(filterSelectedItems).length > 0 || uniqueFirstPerValue;
+  const sortUp = sortBy.some((sb) => sb.columnName === headerResultName && sb.direction === 'desc');
+  const sortDown = sortBy.some((sb) => sb.columnName === headerResultName && sb.direction === 'asc');
+
+  const { t } = useTranslation();
+
+  const headerActionMenuItems: (MenuItem | MenuDivider)[] = [];
+  if (selectUnique) {
+    headerActionMenuItems.push({ type: 'divider', name: t('Уникальность значений') });
+    headerActionMenuItems.push({
+      type: 'item',
+      name: t('Только уникальные'),
+      icon: <SelectUniqueIcon />,
+      selected: uniqueFirstPerValue,
+      onClick: toggleUniqueFirstPerValue,
+    });
+  }
+  if (sortable) {
+    headerActionMenuItems.push({ type: 'divider', name: t('Сортировка') });
+    headerActionMenuItems.push({
+      type: 'item',
+      name: t('По возрастанию'),
+      icon: <SortDownIcon />,
+      selected: sortBy.some((sb) => sb.columnName === headerResultName && sb.direction === 'asc'),
+      onClick: handleSortClick('asc'),
+    });
+    headerActionMenuItems.push({
+      type: 'item',
+      name: t('По убыванию'),
+      icon: <SortUpIcon />,
+      selected: sortBy.some((sb) => sb.columnName === headerResultName && sb.direction === 'desc'),
+      onClick: handleSortClick('desc'),
+    });
+  }
+
+  return (
+    <div className={classnames(styles.root)}>
+      {leftAdditionalContent?.(headerResultName)}
+      {children?.(showUniqueValuesCount && <div>{`(${uniqueValuesCount})`}</div>)}
+      {rightAdditionalContent?.(headerResultName)}
+      {(sortable || selectUnique || filtrationByValue || filtrationByDate || filtrationByNumber) && (
+        <Popover
+          placement="bottom-end"
+          wrapTrigger
+          root={containerRef}
+          description={
+            <>
+              {filtrationByNumber && (
+                <NumberFiltration defaultValues={filterNumbers} actionWithSelected={actionWithSelectedNumbers} />
+              )}
+              {filtrationByDate && (
+                <DateFiltration defaultValues={filterDates} actionWithSelected={actionWithSelectedDates} />
+              )}
+              {filtrationByValue && (
+                <div className={classnames(styles.checklistWrap)}>
+                  <Checklist
+                    items={filterItems}
+                    selected={filterSelectedItems}
+                    actionWithSelected={actionWithSelectedObjects}
+                  />
+                </div>
+              )}
+              {(sortable || selectUnique) && (
+                <div>
+                  <Menu items={headerActionMenuItems} />
+                </div>
+              )}
+            </>
+          }
+        >
+          <Tooltip label={t('Сортировка и фильтрация')} placement="bottom-end" root={containerRef}>
+            <Button
+              componentSize="small"
+              variant="text"
+              textSecondary={!hasAnyFilter && !sortUp && !sortDown}
+              icon={
+                hasAnyFilter ? (
+                  <FilterIcon />
+                ) : sortUp ? (
+                  <SortUpIcon />
+                ) : sortDown ? (
+                  <SortDownIcon />
+                ) : (
+                  <ArrowDropDownIcon />
+                )
+              }
+            />
+          </Tooltip>
+        </Popover>
+      )}
+    </div>
+  );
+}

package/src/components/view/VirtualTable/ui/HeaderDropdown/headerDropdown.module.css

@@ -0,0 +1,20 @@
+.root {
+  position: relative;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.checklist-wrap {
+  display: flex;
+  flex-direction: column;
+  height: 300px;
+  padding: 16px;
+}
+
+.icon-button > span {
+  background: none !important;
+}

package/{components/view/VirtualTable/ui/HeaderDropdown/index.d.ts → src/components/view/VirtualTable/ui/HeaderDropdown/index.ts}

@@ -1,2 +1 @@
 export { HeaderDropdown } from './HeaderDropdown';
-//# sourceMappingURL=index.d.ts.map

package/src/components/view/VirtualTable/ui/NumberFiltration/NumberFiltration.tsx

@@ -0,0 +1,168 @@
+import classnames from 'classnames';
+import { useCallback, useState } from 'react';
+
+import { Button } from '@components/common/Button';
+import { Input } from '@components/common/Input';
+import { Item, MaybeItem, Select } from '@components/common/Select';
+import { Tooltip } from '@components/view/Tooltip';
+import { CloseIcon } from '@icons/CloseIcon';
+
+import * as styles from './numberFiltration.module.css';
+
+interface Props {
+  defaultValues?: number[];
+  actionWithSelected: (values: number[]) => void;
+}
+
+const items: Item[] = [
+  { type: 'item', name: 'От — до', value: 'range' },
+  { type: 'item', name: 'Больше', value: 'more' },
+  { type: 'item', name: 'Меньше', value: 'less' },
+  { type: 'item', name: 'Равно', value: 'equal' },
+];
+
+export function NumberFiltration(props: Props) {
+  const { defaultValues = [-Infinity, Infinity], actionWithSelected } = props;
+
+  const [selectedItem, setSelectedItem] = useState<Item>(
+    defaultValues[0] === -Infinity && defaultValues[1] === Infinity
+      ? items[0]
+      : defaultValues[0] === defaultValues[1]
+        ? items[3]
+        : defaultValues[0] === -Infinity
+          ? items[2]
+          : defaultValues[1] === Infinity
+            ? items[1]
+            : items[0],
+  );
+  const [values, setValues] = useState<number[]>(defaultValues);
+
+  const handleSelect = (item: MaybeItem) => {
+    if (!!item) {
+      const newValues = [...values];
+      switch (item.value) {
+        case 'more':
+          newValues[1] = Infinity;
+          break;
+        case 'less':
+          newValues[0] = -Infinity;
+          break;
+        case 'equal':
+          const val = newValues[0] !== -Infinity ? newValues[0] : newValues[1];
+          newValues[0] = val;
+          newValues[1] = val;
+          break;
+        default:
+          break;
+      }
+      setValues(newValues);
+      actionWithSelected(newValues);
+      setSelectedItem(item);
+    }
+  };
+
+  const handleChangeNumber = (type: 'more' | 'less' | 'equal', value: string) => {
+    setValues((prev) =>
+      type === 'equal'
+        ? [value.length ? +value : -Infinity, value.length ? +value : Infinity]
+        : type === 'more'
+          ? [value.length ? +value : -Infinity, prev[1]]
+          : [prev[0], value.length ? +value : Infinity],
+    );
+  };
+
+  const resetValues = useCallback(() => {
+    setValues([-Infinity, Infinity]);
+    actionWithSelected([-Infinity, Infinity]);
+  }, []);
+
+  return (
+    <div className={classnames(styles.root)}>
+      <Select
+        items={items}
+        componentSize="small"
+        variant="filled"
+        selected={selectedItem}
+        onValueChange={handleSelect}
+        classes={{ root: styles.select }}
+        tabIndex={-1}
+      />
+      <div className={classnames(styles.inputsContainer)}>
+        {selectedItem.value === 'range' ? (
+          <>
+            <Input
+              componentSize="small"
+              variant="outlined"
+              type="number"
+              classes={{ root: styles.input }}
+              value={values[0] > -Infinity && values[0] < Infinity ? values[0] : ''}
+              onChange={(e) => {
+                handleChangeNumber('more', e.target.value);
+              }}
+              onBlur={() => actionWithSelected(values)}
+              onKeyUp={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  actionWithSelected(values);
+                }
+              }}
+            />
+            <Input
+              componentSize="small"
+              variant="outlined"
+              type="number"
+              classes={{ root: styles.input }}
+              value={values[1] > -Infinity && values[1] < Infinity ? values[1] : ''}
+              onChange={(e) => {
+                handleChangeNumber('less', e.target.value);
+              }}
+              onBlur={() => actionWithSelected(values)}
+              onKeyUp={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  actionWithSelected(values);
+                }
+              }}
+            />
+          </>
+        ) : (
+          <Input
+            componentSize="small"
+            variant="outlined"
+            type="number"
+            classes={{ root: styles.input }}
+            value={
+              selectedItem.value === 'more'
+                ? values[0] > -Infinity && values[0] < Infinity
+                  ? values[0]
+                  : ''
+                : values[1] > -Infinity && values[1] < Infinity
+                  ? values[1]
+                  : ''
+            }
+            onChange={(e) => {
+              handleChangeNumber(selectedItem.value as 'more' | 'less' | 'equal', e.target.value);
+            }}
+            onBlur={() => actionWithSelected(values)}
+            onKeyUp={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                actionWithSelected(values);
+              }
+            }}
+          />
+        )}
+      </div>
+      <Tooltip label="Сбросить">
+        <Button
+          onClick={resetValues}
+          className={classnames(styles.button)}
+          variant="text"
+          componentSize="small"
+          textSecondary
+          icon={<CloseIcon />}
+        />
+      </Tooltip>
+    </div>
+  );
+}