@max-ts/components 0.0.2

package/src/components/DataGrid/Row/Row.tsx

@@ -0,0 +1,307 @@
+import { type ChangeEvent, type ReactNode, useCallback } from 'react';
+
+import { Checkbox } from '../../Checkbox';
+import { Tooltip } from '../../Tooltip';
+import type { Variant } from '../enums';
+import type { CellValue, DataGridColumns, DataGridRowOptions } from '../types';
+
+import { NestedChildren } from './NestedChildren';
+import { DISABLE_ROW_ATTR } from './constants';
+import {
+	CellStyled,
+	CheckboxCell,
+	ChevronIcon,
+	CollapseButton,
+	CollapseCell,
+	ContentWrapper,
+	Wrapper,
+} from './styles';
+import { useLogic } from './useLogic';
+import { checkIsDisabled } from './utils';
+
+export type RowProps<TData extends Record<string, CellValue>> = {
+	/**
+	 * Название класса, применяется к корневому компоненту
+	 */
+	className?: string;
+
+	/**
+	 * Поле, которое будет использоваться в качестве ключа
+	 */
+	keyId: keyof TData;
+
+	/**
+	 * Данные строки для отображения
+	 */
+	row: TData;
+
+	/**
+	 * Конфигурация колонок для таблицы
+	 */
+	columns: DataGridColumns<TData>[];
+
+	/**
+	 * Вариант отображения вложенных элементов
+	 */
+	variant: `${Variant}`;
+
+	/**
+	 * Конфигурация ширины колонок
+	 */
+	gridColumns: string;
+
+	/**
+	 * Уровень вложенности в дереве
+	 */
+	level: number;
+
+	/**
+	 * Вложенные элементы
+	 */
+	nestedChildren: Array<TData & { options?: DataGridRowOptions<TData> }>;
+
+	/**
+	 * Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
+	 */
+	activeRowId?: string;
+
+	/**
+	 * Если true, то дерево будет раскрыто по умолчанию
+	 */
+	isInitialExpanded: boolean;
+
+	/**
+	 * Уровень раскрытия дерева по умолчанию, при isInitialExpanded=true
+	 */
+	expandedLevel: number;
+
+	/**
+	 * Количество отображаемых по умолчанию дочерних элементов
+	 */
+	initialVisibleChildrenCount: number;
+
+	/**
+	 * Номер колонки, в которой будет расположена кнопка "Показать все"
+	 * Работает только для `variant="subrows"`
+	 */
+	moreButtonColumnPosition: number;
+
+	/**
+	 * Если false, кнопка разворачивания элементов не показывается
+	 * Работает только для `variant="subrows"`
+	 */
+	isVisibleCollapseButton: boolean;
+
+	/**
+	 * Если true, то будет отображаться чекбокс для выбора элемента
+	 */
+	isSelectable?: boolean;
+
+	/**
+	 * Массив выбранных строк
+	 */
+	selectedRows?: Array<TData>;
+
+	/**
+	 * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
+	 * @default '-'
+	 */
+	emptyCellValue?: ReactNode;
+
+	/**
+	 * Дополнительные настройки строки
+	 */
+	options?: DataGridRowOptions<TData>;
+
+	/**
+	 * Обработчик выбора строки
+	 */
+	onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
+
+	/**
+	 * Обработчик клика строки таблицы
+	 */
+	onRowClick?: (row: TData) => void;
+};
+
+export const Row = <TData extends Record<string, CellValue>>(
+	props: RowProps<TData>,
+) => {
+	const {
+		isOpen,
+		isShowConnector,
+		childrenColumns,
+		rowId,
+		handleToggle,
+		checkboxProps,
+		rowProps,
+		tooltipProps,
+		nestedChildrenProps,
+		disabled,
+		isRenderCollapseButton,
+	} = useLogic(props);
+
+	const {
+		className,
+		row,
+		options,
+		variant,
+		isSelectable,
+		gridColumns,
+		isInitialExpanded,
+		expandedLevel,
+		level,
+		nestedChildren,
+		initialVisibleChildrenCount,
+		moreButtonColumnPosition,
+		isVisibleCollapseButton,
+		columns,
+		emptyCellValue,
+		selectedRows,
+		activeRowId,
+		keyId,
+		onSelectRow,
+		onRowClick,
+		// В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
+		// Необходимы для NewDataGridInfinite
+		...selfProps
+	} = props;
+
+	const { isDisabledLastCell = true, isNotSelectable } = options || {};
+
+	const renderStartAdornment = () => {
+		if (!isRenderCollapseButton && (!isSelectable || isNotSelectable)) {
+			return null;
+		}
+
+		return (
+			<>
+				{isRenderCollapseButton && (
+					<CollapseCell>
+						<CollapseButton variant='text' onClick={handleToggle}>
+							<ChevronIcon $isActive={isOpen} />
+						</CollapseButton>
+					</CollapseCell>
+				)}
+
+				{isSelectable && !isNotSelectable && (
+					<CheckboxCell
+						{...{ inert: disabled ? true : undefined }}
+						onClick={(event) => event.stopPropagation()}
+					>
+						<Checkbox {...checkboxProps} />
+					</CheckboxCell>
+				)}
+			</>
+		);
+	};
+
+	const renderCells = useCallback(() => {
+		const availableCellsByIndex = !isDisabledLastCell
+			? [columns.length - 1]
+			: undefined;
+
+		return columns?.map((cell, index) => {
+			const cellId = `${rowId}-${index}`;
+
+			const isDisabledCell = checkIsDisabled(
+				disabled,
+				availableCellsByIndex,
+				index,
+			);
+
+			const isFirstCell = !index;
+
+			return (
+				<CellStyled
+					key={cellId}
+					$level={isFirstCell ? level : 0}
+					row={row}
+					cell={cell as DataGridColumns<Record<string, CellValue>>}
+					emptyCellValue={emptyCellValue}
+					startAdornment={isFirstCell && renderStartAdornment()}
+					isDisabled={isDisabledCell}
+				/>
+			);
+		});
+	}, [isOpen, columns, disabled]);
+
+	const renderRow = useCallback(
+		({
+			key,
+			...nestedRowProps
+		}: { key: string } & Pick<
+			RowProps<TData>,
+			'row' | 'options' | 'nestedChildren' | 'level' | 'className'
+		>) => (
+			<Row<TData>
+				key={key}
+				keyId={keyId}
+				{...nestedRowProps}
+				variant={variant}
+				isSelectable={isSelectable}
+				selectedRows={selectedRows}
+				gridColumns={gridColumns}
+				isInitialExpanded={isInitialExpanded}
+				expandedLevel={expandedLevel}
+				initialVisibleChildrenCount={initialVisibleChildrenCount}
+				moreButtonColumnPosition={moreButtonColumnPosition}
+				isVisibleCollapseButton={isVisibleCollapseButton}
+				activeRowId={activeRowId}
+				columns={childrenColumns}
+				onSelectRow={onSelectRow}
+				onRowClick={onRowClick}
+			/>
+		),
+		[
+			keyId,
+			variant,
+			isSelectable,
+			selectedRows,
+			gridColumns,
+			isInitialExpanded,
+			expandedLevel,
+			initialVisibleChildrenCount,
+			moreButtonColumnPosition,
+			activeRowId,
+			childrenColumns,
+			onSelectRow,
+			onRowClick,
+		],
+	);
+
+	return (
+		<Wrapper
+			$level={level}
+			$isShowConnector={isShowConnector}
+			$gridColumns={gridColumns}
+			className={className}
+			{...selfProps}
+		>
+			<Tooltip followCursor arrow={false} {...tooltipProps}>
+				<ContentWrapper
+					$level={level}
+					$isShowConnector={isShowConnector}
+					$gridColumns={gridColumns}
+					{...{ [DISABLE_ROW_ATTR]: disabled }}
+					{...rowProps}
+				>
+					{renderCells()}
+				</ContentWrapper>
+			</Tooltip>
+
+			<NestedChildren
+				{...nestedChildrenProps}
+				data={nestedChildren as Array<TData>}
+				keyId={keyId as string}
+				level={level}
+				variant={variant}
+				gridColumns={gridColumns}
+				initialVisibleChildrenCount={initialVisibleChildrenCount}
+				moreButtonColumnPosition={moreButtonColumnPosition}
+				// @ts-ignore
+				renderRow={renderRow}
+			/>
+		</Wrapper>
+	);
+};

package/src/components/DataGrid/Row/RowContext/RowContext.ts

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+export type RowContextProps = {
+	isDisabled: boolean;
+	disabledReason?: string;
+	addDisabledRow: (disabledReason?: string) => void;
+	removeDisabledRow: () => void;
+};
+
+export const RowContext = createContext<RowContextProps>({
+	isDisabled: false,
+	addDisabledRow: () => {},
+	removeDisabledRow: () => {},
+});

package/src/components/DataGrid/Row/RowContext/RowProvider/RowProvider.tsx

@@ -0,0 +1,35 @@
+import { type ReactNode, useState } from 'react';
+
+import { RowContext } from '../RowContext';
+
+type RowContextProviderProps = {
+	children: ReactNode;
+};
+
+export const RowContextProvider = ({ children }: RowContextProviderProps) => {
+	const [isDisabled, setDisabled] = useState<boolean>(false);
+	const [disabledReason, setDisabledReason] = useState<string | undefined>();
+
+	const addDisabledRow = (reason?: string) => {
+		setDisabled(true);
+		setDisabledReason(reason);
+	};
+
+	const removeDisabledRow = () => {
+		setDisabled(false);
+		setDisabledReason(undefined);
+	};
+
+	return (
+		<RowContext.Provider
+			value={{
+				isDisabled,
+				disabledReason,
+				addDisabledRow,
+				removeDisabledRow,
+			}}
+		>
+			{children}
+		</RowContext.Provider>
+	);
+};

package/src/components/DataGrid/Row/RowContext/RowProvider/index.ts

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

package/src/components/DataGrid/Row/RowContext/index.ts

@@ -0,0 +1,3 @@
+export * from './RowContext';
+
+export * from './RowProvider';

package/src/components/DataGrid/Row/constants.ts

@@ -0,0 +1,3 @@
+export const DISABLE_ROW_ATTR = 'data-row-disable';
+
+export const HIDDEN_CHILDREN_ROW_CLASSNAME = 'astral-ui_datagrid_row_hidden';

package/src/components/DataGrid/Row/index.ts

@@ -0,0 +1,3 @@
+export * from './Row';
+
+export * from './RowContext';

package/src/components/DataGrid/Row/styles.ts

@@ -0,0 +1,124 @@
+import { ChevronRight } from 'lucide-react';
+import { IconButton } from '../../IconButton';
+import { Cell } from '../Cell';
+import { ROOT_ACTION_CELL_WIDTH, TREE_LINE_WIDTH } from '../constants';
+
+import { styled } from '@mui/material';
+import { HIDDEN_CHILDREN_ROW_CLASSNAME } from './constants';
+
+export const Wrapper = styled('li')<{
+	$isShowConnector: boolean;
+	$gridColumns: string;
+	$level: number;
+}>`
+  position: relative;
+
+  &:not(:last-of-type)::before,
+  &.${HIDDEN_CHILDREN_ROW_CLASSNAME}::before {
+    content: '';
+
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    transform: ${({ $level }) =>
+			`translateX(calc(${ROOT_ACTION_CELL_WIDTH}px * ${$level} - ${TREE_LINE_WIDTH}px))`};
+
+    display: ${({ $isShowConnector }) => ($isShowConnector ? 'block' : 'none')};
+
+    width: 0;
+    height: 100%;
+
+    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+  }
+`;
+
+export const ContentWrapper = styled('div')<{
+	$isShowConnector: boolean;
+	$isHovered?: boolean;
+	$isSelected?: boolean;
+	$gridColumns: string;
+	$level: number;
+}>`
+  position: relative;
+
+  display: grid;
+  grid-template-columns: ${({ $gridColumns }) => $gridColumns};
+
+  background-color: ${({ theme, $isSelected }) =>
+		$isSelected ? theme.palette.primary[100] : 'transparent'};
+
+  transition: ${({ theme }) => {
+		return theme.transitions.create(['background-color'], {
+			duration: theme.transitions.duration.short,
+		});
+	}};
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    transform: ${({ $level }) =>
+			`translateX(calc(${ROOT_ACTION_CELL_WIDTH}px * ${$level} - ${TREE_LINE_WIDTH}px))`};
+
+    display: ${({ $isShowConnector }) => ($isShowConnector ? 'block' : 'none')};
+
+    width: ${TREE_LINE_WIDTH}px;
+    height: 50%;
+
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
+  }
+
+  &:hover {
+    cursor: ${({ $isHovered }) => ($isHovered ? 'pointer' : 'default')};
+
+    background-color: ${({ theme, $isHovered }) =>
+			$isHovered ? theme.palette.background.elementHover : 'transparent'};
+  }
+`;
+
+export const CellStyled = styled(Cell)<{ $level: number }>`
+  margin-left: ${({ $level }) => `${$level * ROOT_ACTION_CELL_WIDTH}px`};
+`;
+
+export const CheckboxCell = styled('div')`
+  display: flex;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+
+  width: ${ROOT_ACTION_CELL_WIDTH}px;
+`;
+
+export const CollapseCell = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${ROOT_ACTION_CELL_WIDTH}px;
+`;
+
+export const CollapseButton = styled(IconButton)`
+  width: 24px;
+  height: 24px;
+
+  color: inherit;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.grey[300]};
+  }
+`;
+
+export const ChevronIcon = styled(ChevronRight, {
+	shouldForwardProp: (prop) => prop !== '$isActive',
+})<{ $isActive?: boolean }>`
+  transform: rotateZ(${({ $isActive }) => ($isActive ? 90 : 0)}deg);
+
+  transition: ${({ theme }) =>
+		theme.transitions.create('transform', {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.short,
+		})};
+`;

package/src/components/DataGrid/Row/useLogic/index.ts

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

package/src/components/DataGrid/Row/useLogic/useLogic.ts

@@ -0,0 +1,144 @@
+import {
+	type MouseEvent,
+	type SyntheticEvent,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
+
+import { DataGridContext } from '../../DataGridContext';
+import { Variant } from '../../enums';
+import type { CellValue } from '../../types';
+import type { RowProps } from '../Row';
+import { RowContext } from '../RowContext';
+import { DISABLE_ROW_ATTR } from '../constants';
+
+import { mergeColumnsOptions } from './utils';
+
+type UseLogicParams<TData extends Record<string, CellValue>> = RowProps<TData>;
+
+export const useLogic = <TData extends Record<string, CellValue>>({
+	keyId,
+	columns,
+	row,
+	nestedChildren,
+	level,
+	variant,
+	activeRowId,
+	options,
+	isInitialExpanded = false,
+	expandedLevel,
+	isSelectable,
+	selectedRows,
+	onSelectRow,
+	onRowClick,
+	isVisibleCollapseButton,
+}: UseLogicParams<TData>) => {
+	const isDefaultExpanded =
+		isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length;
+
+	const { checkIsOpened, toggleOpenItems } = useContext(DataGridContext);
+	const { isDisabled, disabledReason } = useContext(RowContext);
+
+	const [isVisibleTooltip, setVisibleTooltip] = useState<boolean>(false);
+
+	const rowId = row[keyId] as string;
+
+	const {
+		isDisabled: isExternalDisabled,
+		disabledReason: externalDisabledReason,
+	} = options || {};
+
+	const disabled = isDisabled || isExternalDisabled;
+
+	const isOpen = checkIsOpened(rowId);
+
+	useEffect(() => {
+		// Проверка на isOpen необходима для infinite версии с виртуализацией, когда происходит размонтировании компонента
+		if (isDefaultExpanded && !isOpen) {
+			toggleOpenItems(rowId);
+		}
+	}, []);
+
+	const isChecked =
+		isSelectable &&
+		Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
+
+	const isShowConnector = Object.is(variant, Variant.Tree);
+
+	const childrenColumns = useMemo(
+		() => mergeColumnsOptions(columns, options?.childrenColumns),
+		[columns, options],
+	);
+
+	const handleToggle = (event: MouseEvent<HTMLButtonElement>) => {
+		event.stopPropagation();
+		toggleOpenItems(rowId);
+	};
+
+	const handleOpenTooltip = (event: SyntheticEvent<Element, Event>) => {
+		const element = event.target as HTMLElement;
+		const isDisabledCell = element.getAttribute(DISABLE_ROW_ATTR) === 'true';
+
+		if (isDisabledCell) {
+			setVisibleTooltip(true);
+		}
+	};
+	const handleCloseTooltip = () => setVisibleTooltip(false);
+
+	const handleMouseMove = (event: MouseEvent<HTMLElement>) => {
+		if (!disabled) {
+			return;
+		}
+
+		const element = event.target as HTMLElement;
+		const isDisabledCell = element.getAttribute(DISABLE_ROW_ATTR) === 'true';
+
+		if (!isDisabledCell) {
+			setVisibleTooltip(false);
+		}
+	};
+
+	const handleRowClick = () => {
+		if (disabled) {
+			return undefined;
+		}
+
+		onRowClick?.(row);
+	};
+
+	const isRenderCollapseButton =
+		Boolean(nestedChildren?.length) && isVisibleCollapseButton;
+
+	return {
+		isOpen,
+		isShowConnector,
+		childrenColumns,
+		rowId,
+		disabled,
+		isRenderCollapseButton,
+		handleToggle,
+		rowProps: {
+			$isHovered: Boolean(!disabled && onRowClick),
+			$isSelected: activeRowId === rowId,
+			onClick: handleRowClick,
+			onMouseMove: handleMouseMove,
+		},
+		tooltipProps: {
+			open: isVisibleTooltip,
+			title: disabled ? externalDisabledReason || disabledReason : undefined,
+			onOpen: handleOpenTooltip,
+			onClose: handleCloseTooltip,
+		},
+		checkboxProps: {
+			checked: isChecked,
+			disabled: disabled,
+			onChange: onSelectRow(row),
+		},
+		nestedChildrenProps: {
+			isOpen,
+			rowId,
+		},
+	};
+};

package/src/components/DataGrid/Row/useLogic/utils/getColumnsMap/getColumnsMap.ts

@@ -0,0 +1,20 @@
+import type { CellValue, DataGridRowOptionColumns } from '../../../../types';
+
+type GetColumnsMapResult<TData> =
+	| Record<keyof TData, Omit<TData, 'field'>>
+	| object;
+
+export const getColumnsMap = <TData extends Record<string, CellValue>>(
+	columns: DataGridRowOptionColumns<TData>[],
+): GetColumnsMapResult<TData> =>
+	columns.reduce((acc, { field, ...childrenColumnsOptions }) => {
+		if (field) {
+			return {
+				// biome-ignore lint/performance/noAccumulatingSpread: <explanation>
+				...acc,
+				[field as string]: childrenColumnsOptions,
+			};
+		}
+
+		return acc;
+	}, {});

package/src/components/DataGrid/Row/useLogic/utils/getColumnsMap/index.ts

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

package/src/components/DataGrid/Row/useLogic/utils/index.ts

@@ -0,0 +1,3 @@
+export { getColumnsMap } from './getColumnsMap';
+
+export { mergeColumnsOptions } from './mergeColumnsOptions';

package/src/components/DataGrid/Row/useLogic/utils/mergeColumnsOptions/index.ts

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