@cloud-ru/uikit-product-mobile-table 0.11.3

package/src/components/hooks.tsx

@@ -0,0 +1,60 @@
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { useMemo } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
+import { SkeletonText } from '@snack-uikit/skeleton';
+import { TableProps } from '@snack-uikit/table';
+
+import { ROW_ACTIONS_COLUMN_ID } from '../constants';
+
+export function useStateControl<TState>(
+  control: { initialState?: TState; state?: TState; onChange?(state: TState): void } | undefined,
+  defaultState: TState,
+) {
+  const [state, onStateChange] = useUncontrolledProp<TState>(
+    control?.state,
+    control?.state ?? control?.initialState ?? defaultState,
+    (controlState: TState) => {
+      const newState = typeof controlState === 'function' ? controlState(state) : controlState;
+
+      control?.onChange?.(newState);
+    },
+  );
+
+  return {
+    state,
+    onStateChange,
+  };
+}
+
+type UseLoadingTableProps<TData extends object, TFilters extends FiltersState> = {
+  columnDefinitions: TableProps<TData, TFilters>['columnDefinitions'];
+  pageSize: number;
+};
+
+export function useLoadingTable<TData extends object, TFilters extends FiltersState>({
+  pageSize,
+  columnDefinitions,
+}: UseLoadingTableProps<TData, TFilters>) {
+  const data = useMemo(() => (Array.from({ length: pageSize }).map(() => ({})) || []) as TData[], [pageSize]);
+  const columns = useMemo(
+    () =>
+      columnDefinitions
+        .filter(column => column.id !== ROW_ACTIONS_COLUMN_ID)
+        .map(column => ({
+          ...column,
+          cell: () => <SkeletonText lines={1} width={'100%'} />,
+        })),
+    [columnDefinitions],
+  );
+
+  const loadingTable = useReactTable<TData>({
+    data,
+    columns,
+
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return { loadingTable };
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './AdaptiveTable';
+export * from './AdaptiveServerTable';
+export * from './MobileTable';

package/src/components/styles.module.scss

@@ -0,0 +1,50 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ds;
+
+.tableWrapper {
+  position: relative;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 0;
+  margin-top: calc(-1 * #{ds.$dimension-1m});
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: ds.$dimension-1m;
+  position: sticky;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 1;
+  top: 0;
+  padding-top: ds.$dimension-1m;
+  padding-bottom: ds.$dimension-1m;
+  margin-bottom: calc(-1 * #{ds.$dimension-1m});
+
+  &[data-background='default'] {
+    background-color: ds.$sys-neutral-background;
+  }
+
+  &[data-background='1-level'] {
+    background-color: ds.$sys-neutral-background1-level;
+  }
+
+  &[data-background='2-level'] {
+    background-color: ds.$sys-neutral-background2-level;
+  }
+}
+
+.table {
+  box-sizing: border-box;
+  border: ds.$border-width-012m solid ds.$sys-neutral-decor-default;
+  border-radius: ds.$dimension-050m;
+  background: ds.$sys-neutral-background1-level;
+  margin-top: ds.$dimension-1m;
+}
+
+.filtersWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: ds.$dimension-050m;
+  align-items: center;
+  justify-content: flex-start;
+}
+

package/src/components/utils.ts

@@ -0,0 +1,20 @@
+import { RankingInfo, rankItem } from '@tanstack/match-sorter-utils';
+import { FilterFn } from '@tanstack/react-table';
+import debounce from 'lodash.debounce';
+
+import { SEARCH_DELAY } from './constants';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  const itemRank: RankingInfo = rankItem(row.getValue(columnId), value);
+
+  addMeta({
+    itemRank,
+  });
+
+  return itemRank.passed;
+};
+
+export const onSearchDebounced = debounce((newValue: string, onChange: (newValue: string) => void) => {
+  onChange(newValue);
+}, SEARCH_DELAY);

package/src/constants.ts

@@ -0,0 +1,18 @@
+export const TEST_IDS = {
+  headerSortIndicator: 'table__header__sort-indicator',
+  headerRow: 'table__header-row',
+  headerCell: 'table__header-cell',
+  bodyRow: 'table__body-row',
+  bodyCell: 'table__body-cell',
+  pinnedCells: 'table__pinned-cells',
+  rowSelect: 'table__row-select',
+  rowActions: {
+    droplistTrigger: 'table__body-row__droplistTrigger',
+    droplist: 'table__body-row__actions-droplist',
+    option: 'list__base-item-option',
+  },
+  statusIndicator: 'table__status-indicator',
+  statusLabel: 'table__status-label',
+};
+
+export const ROW_ACTIONS_COLUMN_ID = 'rowActions';

package/src/helperComponents/RowActionsCell/RowActionsCell.tsx

@@ -0,0 +1,86 @@
+import { CellContext, Row } from '@tanstack/react-table';
+import { MouseEvent, MouseEventHandler, useCallback, useMemo, useState } from 'react';
+
+import { MoreSVG } from '@cloud-ru/uikit-product-icons';
+import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
+import { isBaseItemProps, MobileDroplist, MobileDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { ButtonFunction } from '@snack-uikit/button';
+
+import { MobileTableProps } from '../../components';
+import { ROW_ACTIONS_COLUMN_ID, TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+type RowActionsCellProps<TData> = {
+  actions: MobileDroplistProps['items'];
+  row: Row<TData>;
+};
+
+function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
+  const [dropListOpened, setDropListOpen] = useState(false);
+
+  const patchItem = useCallback(
+    (item: MobileDroplistProps['items'][0], cb: MouseEventHandler): MobileDroplistProps['items'][0] => {
+      if (isBaseItemProps(item)) {
+        return {
+          ...item,
+          onClick(e) {
+            item.onClick?.(e);
+            cb(e);
+          },
+        };
+      }
+
+      return { ...item, items: item.items.map(i => patchItem(i, cb)) };
+    },
+    [],
+  );
+
+  const disabled = !row.getCanSelect();
+
+  const stopPropagationClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  const patchedItems = useMemo(
+    () => actions.map(item => patchItem(item, () => setDropListOpen(false))),
+    [actions, patchItem, setDropListOpen],
+  );
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div onClick={stopPropagationClick} className={styles.rowActionsCellWrap} data-open={dropListOpened || undefined}>
+      {!disabled && Boolean(actions.length) && (
+        <MobileDroplist
+          open={dropListOpened}
+          onOpenChange={setDropListOpen}
+          data-test-id={TEST_IDS.rowActions.droplist}
+          items={patchedItems}
+        >
+          <ButtonFunction icon={<MoreSVG size={24} />} data-test-id={TEST_IDS.rowActions.droplistTrigger} />
+        </MobileDroplist>
+      )}
+    </div>
+  );
+}
+
+export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => MobileDroplistProps['items'];
+
+export type RowActionsColumnDefProps<TData> = {
+  /** Действия для строки */
+  actionsGenerator: ActionsGenerator<TData>;
+  /** Закрепление колонки справа в таблице */
+  pinned?: boolean;
+};
+
+/** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
+export function getRowActionsColumnDef<TData extends object, TFilters extends FiltersState>({
+  actionsGenerator,
+}: RowActionsColumnDefProps<TData>): MobileTableProps<TData, TFilters>['columnDefinitions'][0] {
+  return {
+    id: ROW_ACTIONS_COLUMN_ID,
+    meta: {
+      skipOnExport: true,
+    },
+    cell: cell => <RowActionsCell row={cell.row} actions={actionsGenerator(cell)} />,
+  };
+}

package/src/helperComponents/RowActionsCell/index.ts

@@ -0,0 +1 @@
+export * from './RowActionsCell';

package/src/helperComponents/RowActionsCell/styles.module.scss

@@ -0,0 +1,38 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-table';
+
+.rowActionsCell {
+  position: relative;
+  border-color: inherit;
+
+  &::after {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    top: calc(0px - styles-tokens-table.$border-width-table);
+    bottom: calc(0px - styles-tokens-table.$border-width-table);
+    left: 0;
+
+    box-sizing: border-box;
+    width: 100%;
+
+    /* stylelint-disable */
+    border-left: styles-tokens-table.$border-width-table solid;
+    border-color: inherit;
+    /* stylelint-enable */
+  }
+}
+
+.rowActionsCellWrap {
+  --offset: 0px;
+  cursor: pointer;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  @include styles-tokens-table.composite-var(styles-tokens-table.$table-cells-action);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/helperComponents/TableCard/TableCard.tsx

@@ -0,0 +1,75 @@
+import { flexRender, Row, Table } from '@tanstack/react-table';
+import { useCallback } from 'react';
+
+import { Checkbox, Radio } from '@snack-uikit/toggles';
+
+import { ROW_ACTIONS_COLUMN_ID } from '../../constants';
+import styles from './styles.module.scss';
+
+type TableCardProps<TData extends object> = {
+  headlineId?: string;
+  row: Row<TData>;
+  table: Table<TData>;
+  selection: 'multiple' | 'single' | 'none';
+};
+
+export function TableCard<TData extends object>({ headlineId, table, row, selection }: TableCardProps<TData>) {
+  const headerGroups = table.getHeaderGroups();
+
+  const headerCell = row._getAllCellsByColumnId()[headlineId ?? ''];
+  const headerColumn = table.getFlatHeaders().find(header => header.id === headlineId);
+
+  const actionsCell = row._getAllCellsByColumnId()[ROW_ACTIONS_COLUMN_ID];
+  const actionsColumn = table.getFlatHeaders().find(header => header.id === ROW_ACTIONS_COLUMN_ID);
+
+  const isSelected = row.getIsSelected();
+
+  const handleSelection = useCallback(() => {
+    if (selection === 'single') row.toggleSelected(true);
+    if (selection === 'multiple') row.toggleSelected(!isSelected);
+  }, [isSelected, row, selection]);
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      className={styles.card}
+      data-is-selected={isSelected ?? undefined}
+      data-selection-mode={selection}
+      onClick={handleSelection}
+    >
+      <div className={styles.content}>
+        {headerCell && headerColumn && (
+          <div className={styles.headline}>
+            {flexRender(headerColumn.column.columnDef.cell, headerCell.getContext())}
+          </div>
+        )}
+
+        <div className={styles.body}>
+          {headerGroups.map(group =>
+            group.headers.map((header, index) => {
+              if ([headlineId, ROW_ACTIONS_COLUMN_ID].includes(header.id)) {
+                return null;
+              }
+
+              const column = header.column.columnDef;
+              const cell = row._getAllCellsByColumnId()[header.column.id];
+
+              return (
+                <div className={styles.cardRow} key={header.id || index}>
+                  <div className={styles.cardRowHeader}>{flexRender(column.header, header.getContext())}</div>
+                  <div className={styles.cardRowContent}>{flexRender(column.cell, cell.getContext())}</div>
+                </div>
+              );
+            }),
+          )}
+        </div>
+      </div>
+
+      {selection === 'single' && <Radio size='m' className={styles.selectionController} checked={isSelected} />}
+      {selection === 'multiple' && <Checkbox size='m' className={styles.selectionController} checked={isSelected} />}
+      {actionsCell && actionsColumn && (
+        <div className={styles.button}>{flexRender(actionsColumn.column.columnDef.cell, actionsCell.getContext())}</div>
+      )}
+    </div>
+  );
+}

package/src/helperComponents/TableCard/index.ts

@@ -0,0 +1 @@
+export * from './TableCard';

package/src/helperComponents/TableCard/styles.module.scss

@@ -0,0 +1,79 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.selectionController {
+  position: absolute;
+  bottom: styles-theme-variables.$dimension-2m;
+  right: styles-theme-variables.$dimension-2m;
+}
+
+.content {
+  position: relative;
+}
+
+.card {
+  position: relative;
+  box-sizing: border-box;
+  padding: styles-theme-variables.$dimension-2m;
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-2m;
+
+  &:not(:last-child) {
+    border-bottom: styles-theme-variables.$border-width-general-xs solid styles-theme-variables.$sys-neutral-decor-default;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    opacity: 0;
+    background-color: styles-theme-variables.$sys-primary-background1-level;
+  }
+
+  &[data-selection-mode='multiple'],
+  &[data-selection-mode='single'] {
+    &[data-is-selected=true]::before {
+      opacity: 1;
+    }
+  }
+}
+
+.button {
+  position: absolute;
+  top: styles-theme-variables.$dimension-1m;
+  right: styles-theme-variables.$dimension-1m;
+}
+
+.headline {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-title-m);
+
+  color: styles-theme-variables.$sys-neutral-text-main;
+  padding-right: styles-theme-variables.$dimension-4m;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-2m;
+}
+
+.cardRow {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-050m;
+}
+
+.cardRowHeader {
+  color: styles-theme-variables.$sys-neutral-text-light;
+  word-break: break-word;
+}
+
+.cardRowContent {
+  color: styles-theme-variables.$sys-neutral-text-main;
+  word-break: break-word;
+}

package/src/helperComponents/TableEmptyState/TableEmptyState.tsx

@@ -0,0 +1,29 @@
+import { InfoBlock } from '@snack-uikit/info-block';
+
+import styles from './styles.module.scss';
+import { EmptyStateProps } from './types';
+
+export type TableEmptyState = {
+  emptyStates: {
+    noDataState: EmptyStateProps;
+    noResultsState: EmptyStateProps;
+    errorDataState: EmptyStateProps;
+  };
+  dataError?: boolean;
+  dataFiltered?: boolean;
+  tableRowsLength: number;
+};
+
+export function TableEmptyState({ dataError, dataFiltered, tableRowsLength, emptyStates }: TableEmptyState) {
+  if (tableRowsLength) {
+    return null;
+  }
+
+  return (
+    <div className={styles.tableEmptyStateWrapper}>
+      {dataError && <InfoBlock {...emptyStates.errorDataState} size='m' align='vertical' />}
+      {!dataError && dataFiltered && <InfoBlock {...emptyStates.noResultsState} size='m' align='vertical' />}
+      {!dataError && !dataFiltered && <InfoBlock {...emptyStates.noDataState} size='m' align='vertical' />}
+    </div>
+  );
+}

package/src/helperComponents/TableEmptyState/hooks.ts

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+
+import { CrossSVG, SearchSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+
+import { EmptyStateProps } from './types';
+
+export function useEmptyState({
+  noDataState: noDataStateProp,
+  noResultsState: noResultsStateProp,
+  errorDataState: errorDataStateProp,
+}: {
+  noDataState?: EmptyStateProps;
+  noResultsState?: EmptyStateProps;
+  errorDataState?: EmptyStateProps;
+}) {
+  const { t } = useLocale('Table');
+
+  return useMemo(() => {
+    const noDataState: EmptyStateProps = {
+      icon: { icon: SearchSVG, appearance: 'neutral', decor: true },
+      title: t('noData.title'),
+      ...noDataStateProp,
+    };
+
+    const noResultsState: EmptyStateProps = {
+      icon: { icon: SearchSVG, appearance: 'neutral', decor: true },
+      title: t('noResults.title'),
+      description: t('noResults.description'),
+      ...noResultsStateProp,
+    };
+
+    const errorDataState: EmptyStateProps = {
+      icon: { icon: CrossSVG, appearance: 'red', decor: true },
+      title: t('errorData.title'),
+      description: t('errorData.description'),
+      ...errorDataStateProp,
+    };
+
+    return {
+      noDataState,
+      noResultsState,
+      errorDataState,
+    };
+  }, [errorDataStateProp, noDataStateProp, noResultsStateProp, t]);
+}

package/src/helperComponents/TableEmptyState/index.ts

@@ -0,0 +1,2 @@
+export * from './TableEmptyState';
+export * from './hooks';

package/src/helperComponents/TableEmptyState/styles.module.scss

@@ -0,0 +1,12 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-table';
+
+.tableEmptyStateWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  height: calc((var(--page-size, 10) * styles-tokens-table.$size-table-line-height) + styles-tokens-table.$size-table-line-height);
+  padding: styles-tokens-table.$dimension-3m;
+}

package/src/helperComponents/TableEmptyState/types.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
+
+export type EmptyStateProps = {
+  title?: string;
+  description?: string;
+  icon?: Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
+  footer?: ReactNode;
+  className?: string;
+};

package/src/helperComponents/TablePagination/TablePagination.tsx

@@ -0,0 +1,39 @@
+import { Table } from '@tanstack/react-table';
+import { useCallback } from 'react';
+
+import { Pagination } from '@snack-uikit/pagination';
+
+import styles from './styles.module.scss';
+
+export type TablePaginationProps<TData> = {
+  table: Table<TData>;
+};
+
+export function TablePagination<TData>({ table }: TablePaginationProps<TData>) {
+  const handlePaginationOnChange = useCallback(
+    (pageIndex: number) => {
+      table.setPageIndex(pageIndex - 1);
+    },
+    [table],
+  );
+
+  const tablePaginationState = table.getState().pagination;
+
+  if (table.getPageCount() <= 1) {
+    return null;
+  }
+
+  return (
+    <div className={styles.pagination}>
+      {table.getPageCount() > 1 && (
+        <Pagination
+          maxLength={6}
+          total={table.getPageCount()}
+          page={tablePaginationState.pageIndex + 1}
+          onChange={handlePaginationOnChange}
+          size='s'
+        />
+      )}
+    </div>
+  );
+}

package/src/helperComponents/TablePagination/index.ts

@@ -0,0 +1 @@
+export * from './TablePagination';

package/src/helperComponents/TablePagination/styles.module.scss

@@ -0,0 +1,8 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: styles-theme-variables.$dimension-1m;
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,4 @@
+export * from './RowActionsCell';
+export * from './TableCard';
+export * from './TablePagination';
+export * from './TableEmptyState';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';