@max-ts/components 0.1.1 → 0.2.0

package/src/components/DataGrid/Body/Body.tsx

@@ -1,185 +0,0 @@
-import { type ChangeEvent, type ReactNode, useContext, useMemo } from 'react';
-
-import { ConfigContext } from '../../ConfigProvider';
-import { ContentState } from '../../ContentState';
-import { Row } from '../Row';
-import { RowContextProvider } from '../Row/RowContext';
-import type { Variant } from '../enums';
-import type { CellValue, DataGridColumns, DataGridRowOptions } from '../types';
-
-import { Wrapper } from './styles';
-import { useLogic } from './useLogic';
-
-export type BodyProps<TData extends Record<string, CellValue>> = {
-	/**
-	 * Конфигурация колонок для таблицы
-	 */
-	columns: DataGridColumns<TData>[];
-
-	/**
-	 * Поле, которое будет использоваться в качестве ключа
-	 */
-	keyId: keyof TData;
-
-	/**
-	 * Конфигурация ширины колонок
-	 */
-	gridColumns: string;
-
-	/**
-	 * Если true, показывается анимация загрузки
-	 */
-	isLoading?: boolean;
-
-	/**
-	 * Флаг состояния ошибки
-	 */
-	isError?: boolean;
-
-	/**
-	 * Текст ошибки
-	 */
-	errorMsg?: string;
-
-	/**
-	 * Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
-	 */
-	activeRowId?: string;
-
-	/**
-	 * Если true, то дерево будет раскрыто по умолчанию
-	 * @default 'false'
-	 */
-	isInitialExpanded: boolean;
-
-	/**
-	 * Уровень раскрытия дерева по умолчанию, при isInitialExpanded=true
-	 */
-	expandedLevel: number;
-
-	/**
-	 * Количество отображаемых по умолчанию дочерних элементов
-	 */
-	initialVisibleChildrenCount: number;
-
-	/**
-	 * Номер колонки, в которой будет расположена кнопка "Показать все"
-	 * Работает только для `variant="subrows"`
-	 */
-	moreButtonColumnPosition: number;
-
-	/**
-	 * Если false, кнопка разворачивания элементов не показывается
-	 * Работает только для `variant="subrows"`
-	 */
-	isVisibleCollapseButton: boolean;
-
-	/**
-	 * Если true, то будет отображаться чекбокс для выбора элемента
-	 */
-	isSelectable?: boolean;
-
-	/**
-	 * Массив выбранных строк
-	 */
-	selectedRows?: Array<TData>;
-
-	/**
-	 * Массив данных для отображения
-	 */
-	rows: Array<TData & { options?: DataGridRowOptions<TData> }>;
-
-	/**
-	 * Вариант отображения вложенных элементов
-	 */
-	variant: `${Variant}`;
-
-	/**
-	 * Используется для отображения переданного кол-ва строк при отсутствии данных
-	 */
-	minDisplayRows: number;
-
-	/**
-	 * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
-	 */
-	emptyCellValue?: ReactNode;
-
-	/**
-	 *  Используется для отображения placeholder при отсутствии данных в таблице
-	 */
-	noDataPlaceholder?: ReactNode;
-
-	/**
-	 * Обработчик выбора строки
-	 */
-	onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
-
-	/**
-	 * Функция обработки нажатия на кнопку "Повторить запрос"
-	 */
-	onRetry: () => void;
-
-	/**
-	 * Обработчик клика строки таблицы
-	 */
-	onRowClick?: (row: TData) => void;
-};
-
-const INITIAL_LEVEL = 0;
-
-export const Body = <TData extends Record<string, CellValue>>(
-	props: BodyProps<TData>,
-) => {
-	const { imagesMap } = useContext(ConfigContext);
-
-	const { isNoData, contentStateProps } = useLogic(props);
-
-	const {
-		rows,
-		selectedRows = [],
-		isLoading,
-		isError,
-		errorMsg,
-		minDisplayRows,
-		keyId,
-		noDataPlaceholder,
-		onRetry,
-		...rowProps
-	} = props;
-
-	const renderedRows = useMemo(() => {
-		return rows.map(({ children, options, ...row }) => {
-			const rowId = (row as TData)[keyId] as string;
-
-			return (
-				<RowContextProvider key={rowId}>
-					<Row
-						row={row as TData}
-						selectedRows={selectedRows}
-						options={options}
-						keyId={keyId}
-						level={INITIAL_LEVEL}
-						nestedChildren={children as Array<TData>}
-						{...rowProps}
-					/>
-				</RowContextProvider>
-			);
-		});
-	}, [rows, keyId, selectedRows, rowProps]);
-
-	return (
-		<Wrapper $isEmpty={isNoData} $minDisplayRows={minDisplayRows}>
-			<ContentState
-				{...contentStateProps}
-				errorState={{
-					imgAlt: 'Что-то пошло не так',
-					errorList: [errorMsg || ''],
-					imgSrc: imagesMap.defaultErrorImgSrc,
-					onRetry,
-				}}
-			>
-				{rows.length ? renderedRows : noDataPlaceholder}
-			</ContentState>
-		</Wrapper>
-	);
-};

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

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

package/src/components/DataGrid/Body/styles.tsx

@@ -1,16 +0,0 @@
-import { styled } from '@mui/material';
-import { MIN_ROW_HEIGHT } from '../constants';
-
-export const Wrapper = styled('ul', {
-	shouldForwardProp: (prop) =>
-		!['$isEmpty', '$minDisplayRows'].includes(prop.toString()),
-})<{ $isEmpty: boolean; $minDisplayRows: number }>`
-  overflow-y: auto;
-
-  height: ${({ $isEmpty, $minDisplayRows }) =>
-		$isEmpty ? `${MIN_ROW_HEIGHT * $minDisplayRows}px` : '100%'};
-  margin: 0;
-  padding: 0;
-
-  list-style-type: none;
-`;

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

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

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

@@ -1,20 +0,0 @@
-import type { CellValue } from '../../types';
-import type { BodyProps } from '../Body';
-
-type UseLogicParams<TData extends Record<string, CellValue>> = BodyProps<TData>;
-
-export const useLogic = <TData extends Record<string, CellValue>>({
-	isLoading,
-	isError,
-	rows,
-}: UseLogicParams<TData>) => {
-	const isNoData = !rows.length;
-
-	return {
-		isNoData,
-		contentStateProps: {
-			isLoading: isLoading && isNoData,
-			isError: isError && isNoData,
-		},
-	};
-};

package/src/components/DataGrid/Cell/Cell.tsx

@@ -1,63 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { OverflowTypography } from '../../OverflowTypography';
-import type { CellValue, DataGridColumns } from '../types';
-
-import { Wrapper } from './styles';
-import { useLogic } from './useLogic';
-
-export type CellProps<TData extends Record<string, CellValue>> = {
-	/**
-	 * Название класса, применяется к корневому компоненту
-	 */
-	className?: string;
-
-	/**
-	 * Данные строки для отображения
-	 */
-	row: TData;
-
-	cell: DataGridColumns<TData>;
-
-	/**
-	 * Дополнительное содержимое ячейки, которое будет распложено справа
-	 */
-	startAdornment?: ReactNode;
-
-	/**
-	 * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
-	 */
-	emptyCellValue?: ReactNode;
-
-	/**
-	 * Если true, ячейка будет недоступна для взаимодействия
-	 */
-	isDisabled?: boolean;
-};
-
-export const Cell = <TData extends Record<string, CellValue>>(
-	props: CellProps<TData>,
-) => {
-	const { formattedValue, hasStartAdornment } = useLogic(props);
-
-	const { className, startAdornment, row, cell, isDisabled } = props;
-	const { renderCell, align = 'left' } = cell;
-
-	return (
-		<Wrapper
-			$isDisabled={isDisabled}
-			$align={align}
-			$hasStartAdornment={hasStartAdornment}
-			className={className}
-			{...{ inert: isDisabled ? true : undefined }}
-		>
-			{startAdornment && startAdornment}
-			{renderCell?.(row)}
-			{!renderCell && (
-				<OverflowTypography rowsCount={2}>
-					{formattedValue as ReactNode}
-				</OverflowTypography>
-			)}
-		</Wrapper>
-	);
-};

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

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

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

@@ -1,26 +0,0 @@
-import { styled } from '@mui/material';
-import { MIN_ROW_HEIGHT } from '../constants';
-import type { AlignVariant } from '../types';
-import { alignToJustifyContent } from '../utils';
-
-type HeadCellProps = {
-	$align?: AlignVariant;
-	$isDisabled?: boolean;
-	$hasStartAdornment?: boolean;
-};
-
-export const Wrapper = styled('div', {
-	shouldForwardProp: (prop) =>
-		!['$align', '$isDisabled', '$hasStartAdornment'].includes(prop.toString()),
-})<HeadCellProps>`
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: ${({ $align }) => alignToJustifyContent($align)};
-
-  min-height: ${MIN_ROW_HEIGHT}px;
-  padding: ${({ theme, $hasStartAdornment }) =>
-		$hasStartAdornment ? theme.spacing(1, 2, 1, 0) : theme.spacing(1, 2)};
-
-  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};
-`;

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

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

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

@@ -1,35 +0,0 @@
-import { useMemo } from 'react';
-
-import type { CellValue } from '../../types';
-import type { CellProps } from '../Cell';
-
-type UseLogicParams<TData extends Record<string, CellValue>> = CellProps<TData>;
-
-export const useLogic = <TData extends Record<string, CellValue>>({
-	row,
-	cell,
-	emptyCellValue,
-	startAdornment,
-}: UseLogicParams<TData>) => {
-	const { format, field } = cell;
-
-	const isValidValue = (value: CellValue): boolean => {
-		return Boolean(value) || value === 0;
-	};
-
-	const formattedValue = useMemo(() => {
-		if (format && isValidValue(format(row))) {
-			return format(row);
-		}
-
-		if (field && isValidValue(row[field])) {
-			return row[field];
-		}
-
-		return emptyCellValue;
-	}, [field, format, row, emptyCellValue]);
-
-	const hasStartAdornment = Boolean(startAdornment);
-
-	return { formattedValue, hasStartAdornment };
-};