nntc-ui 0.2.6 → 0.2.7

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

@@ -1,144 +0,0 @@
-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/src/components/view/VirtualTable/ui/HeaderDropdown/HeaderDropdown.tsx

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

@@ -1,20 +0,0 @@
-.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/src/components/view/VirtualTable/ui/NumberFiltration/NumberFiltration.tsx

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