@max-ts/components 0.0.2

package/src/components/DataGridActionCell/DataGridActionCell.stories.tsx

@@ -0,0 +1,271 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { DataGrid, type DataGridColumns } from '../DataGrid';
+
+import { Pencil, Save, Trash } from 'lucide-react';
+import {
+	DataGridActionCell,
+	type DataGridActionCellProps,
+	type DataGridActions,
+} from './DataGridActionCell';
+
+const meta: Meta<typeof DataGridActionCell> = {
+	title: 'Components/DataGridActionCell',
+	component: DataGridActionCell,
+};
+
+export default meta;
+
+type DataType = {
+	id: string;
+	documentName: string;
+};
+
+const FAKE_ACTIONS = {
+	main: [
+		{
+			icon: <Pencil />,
+			name: 'Редактировать',
+			onClick: () => {
+				console.log('Редактировать');
+			},
+		},
+		{
+			icon: <Trash />,
+			name: 'Удалить',
+			onClick: () => {
+				console.log('Удалить');
+			},
+		},
+	],
+	secondary: [
+		{
+			name: 'Подписать',
+			onClick: () => {
+				console.log('Подписать');
+			},
+		},
+	],
+};
+
+const FAKE_DATA = [
+	{
+		id: '1',
+		documentName: 'Документ 1',
+	},
+	{
+		id: '2',
+		documentName: 'Документ 2',
+	},
+	{
+		id: '3',
+		documentName: 'Документ 3',
+	},
+];
+
+type Story = StoryObj<typeof DataGridActionCell>;
+
+export const Interaction: Story = {
+	args: {
+		actions: FAKE_ACTIONS,
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	type FakeActionCellProps<TRow> = Pick<DataGridActionCellProps<TRow>, 'row'>;
+
+	const FakeActionCell = <TRow,>({ row }: FakeActionCellProps<TRow>) => {
+		const [isEditing, setIsEditing] = useState(false);
+		const [isDeleting, setIsDeleting] = useState(false);
+		const [isSigning, setIsSigning] = useState(false);
+
+		const handleEdit = () => {
+			setIsEditing(true);
+		};
+
+		const handleDelete = () => {
+			setIsDeleting(true);
+		};
+
+		const handleSign = () => {
+			setIsSigning(true);
+		};
+
+		useEffect(() => {
+			if (isEditing) {
+				setTimeout(() => setIsEditing(false), 1500);
+			}
+
+			if (isDeleting) {
+				setTimeout(() => setIsDeleting(false), 1500);
+			}
+
+			if (isSigning) {
+				setTimeout(() => setIsSigning(false), 1500);
+			}
+		}, [isEditing, isDeleting, isSigning]);
+
+		const fakeActions = useMemo(
+			() => ({
+				main: [
+					{
+						icon: <Pencil />,
+						name: 'Редактировать',
+						loading: isEditing,
+						onClick: handleEdit,
+					},
+					{
+						icon: <Trash />,
+						name: 'Удалить',
+						loading: isDeleting,
+						loadingNote: 'Происходит удаление',
+						isBlockingOperation: true,
+						onClick: handleDelete,
+					},
+				],
+				secondary: [
+					{
+						name: 'Подписать',
+						loading: isSigning,
+						loadingNote: 'Происходит подписание',
+						isBlockingOperation: true,
+						onClick: handleSign,
+					},
+				],
+			}),
+			[isEditing, isDeleting, isSigning],
+		);
+
+		return <DataGridActionCell actions={fakeActions} row={row} />;
+	};
+
+	const columns: DataGridColumns<DataType>[] = [
+		{
+			field: 'documentName',
+			label: 'Документ',
+			sortable: false,
+		},
+		{
+			label: 'Действия',
+			sortable: false,
+			width: '120px',
+			align: 'right',
+			renderCell: (row) => <FakeActionCell row={row} />,
+		},
+	];
+
+	return (
+		<DataGrid
+			rows={FAKE_DATA}
+			columns={columns}
+			keyId='id'
+			onRetry={() => {}}
+		/>
+	);
+};
+
+export const LoaderActions = () => {
+	type DataTypeActions = {
+		id: string;
+		actions?: object;
+	};
+
+	const [deleteLoading, setDeleteLoading] = useState(false);
+	const [saveLoading, setSaveLoading] = useState(false);
+
+	useEffect(() => {
+		if (deleteLoading) {
+			setTimeout(() => {
+				setDeleteLoading(false);
+			}, 1500);
+		}
+
+		if (saveLoading) {
+			setTimeout(() => {
+				setSaveLoading(false);
+			}, 1500);
+		}
+	}, [deleteLoading, saveLoading]);
+
+	const fakeActions: DataGridActions<DataTypeActions> = {
+		main: [
+			{
+				icon: <Trash />,
+				name: 'Удалить',
+				onClick: () => setDeleteLoading((prevState) => !prevState),
+				loading: deleteLoading,
+			},
+			{
+				icon: <Save />,
+				name: 'Сохранить',
+				loading: saveLoading,
+				onClick: () => setSaveLoading((prevState) => !prevState),
+			},
+		],
+	};
+
+	const fakeData: DataTypeActions = {
+		id: '123456789',
+	};
+
+	return <DataGridActionCell actions={fakeActions} row={fakeData} />;
+};
+
+export const BlockingOperations = () => {
+	type DataTypeActions = {
+		id: string;
+		actions?: object;
+	};
+
+	const [deleteLoading, setDeleteLoading] = useState(false);
+	const [saveLoading, setSaveLoading] = useState(false);
+
+	useEffect(() => {
+		if (deleteLoading) {
+			setTimeout(() => {
+				setDeleteLoading(false);
+			}, 1500);
+		}
+
+		if (saveLoading) {
+			setTimeout(() => {
+				setSaveLoading(false);
+			}, 1500);
+		}
+	}, [deleteLoading, saveLoading]);
+
+	const fakeActions: DataGridActions<DataTypeActions> = {
+		main: [
+			{
+				icon: <Trash />,
+				name: 'Удалить',
+				onClick: () => setDeleteLoading((prevState) => !prevState),
+				loading: deleteLoading,
+				isBlockingOperation: true,
+			},
+			{
+				icon: <Save />,
+				name: 'Сохранить',
+				needConfirm: true,
+				onClick: () => setSaveLoading((prevState) => !prevState),
+				loading: saveLoading,
+			},
+		],
+		secondary: [
+			{ name: 'Редактировать', onClick: () => console.log('secondary 1') },
+		],
+	};
+
+	const fakeData: DataTypeActions = {
+		id: '123456789',
+	};
+
+	return <DataGridActionCell actions={fakeActions} row={fakeData} />;
+};

package/src/components/DataGridActionCell/DataGridActionCell.tsx

@@ -0,0 +1,70 @@
+import type { TooltipProps } from '../Tooltip';
+
+import { MainAction } from './MainAction';
+import { SecondaryActions } from './SecondaryAction';
+import { Wrapper } from './styles';
+import type { MainActionKind, SecondaryActionKind } from './types';
+import { useLogic } from './useLogic';
+
+export type DataGridActions<TAction> = {
+	/**
+	 * Основные действия
+	 */
+	main: MainActionKind<TAction>[];
+
+	/**
+	 * Вторичные действия
+	 */
+	secondary?: SecondaryActionKind<TAction>[];
+};
+
+export type DataGridActionCellProps<TRow> = {
+	/**
+	 * Действия
+	 */
+	actions: DataGridActions<TRow>;
+
+	/**
+	 * Данные строки
+	 */
+	row: TRow;
+};
+
+const TOOLTIP_PLACEMENT: Record<string, TooltipProps['placement']> = {
+	mainAction: 'top',
+	secondaryAction: 'left',
+};
+
+export const DataGridActionCell = <TRow,>(
+	props: DataGridActionCellProps<TRow>,
+) => {
+	const { isDisabledAction, handleWrapperClick, handleActionClick } =
+		useLogic(props);
+
+	const { actions } = props;
+	const { main, secondary } = actions;
+
+	return (
+		<Wrapper onClick={handleWrapperClick}>
+			{main.map((action) => {
+				return (
+					<MainAction
+						key={action.name}
+						action={action}
+						onActionClick={handleActionClick}
+						isDisabled={isDisabledAction}
+						tooltipPlacement={TOOLTIP_PLACEMENT.mainAction}
+					/>
+				);
+			})}
+			{secondary && (
+				<SecondaryActions
+					actions={secondary}
+					onActionClick={handleActionClick}
+					tooltipPlacement={TOOLTIP_PLACEMENT.secondaryAction}
+					isDisabled={isDisabledAction}
+				/>
+			)}
+		</Wrapper>
+	);
+};

package/src/components/DataGridActionCell/MainAction/MainAction.tsx

@@ -0,0 +1,76 @@
+import { IconDropdownButton } from '../../IconDropdownButton';
+import { MenuItem } from '../../MenuItem';
+import { Tooltip, type TooltipProps } from '../../Tooltip';
+import type { ActionCellHandler, MainActionKind } from '../types';
+
+import { MainIconButton } from './MainIconButton';
+
+type MainActionProps<TAction> = {
+	/**
+	 *  Основные действия
+	 */
+	action: MainActionKind<TAction>;
+
+	/**
+	 *  Обработчик клика на действие
+	 */
+	onActionClick: ActionCellHandler<TAction>;
+
+	/**
+	 *  Если true, action не доступен
+	 */
+	isDisabled?: boolean;
+
+	/**
+	 *  Положение тултипа
+	 */
+	tooltipPlacement?: TooltipProps['placement'];
+};
+
+export const MainAction = <TAction,>({
+	action,
+	onActionClick,
+	isDisabled,
+	tooltipPlacement,
+}: MainActionProps<TAction>) => {
+	if ('actions' in action) {
+		const { disabled, icon, name, disabledReason, actions } = action;
+
+		return (
+			<Tooltip
+				key={name}
+				title={disabledReason || name}
+				withoutContainer={!disabled}
+				placement={tooltipPlacement}
+			>
+				<IconDropdownButton
+					icon={icon}
+					variant='text'
+					disabled={isDisabled || disabled}
+				>
+					{actions.map(
+						// @ts-ignore
+						({ name: nestedActionName, onClick: onClickNested, ...props }) => (
+							<MenuItem
+								{...props}
+								key={nestedActionName}
+								onClick={onActionClick(onClickNested)}
+							>
+								{nestedActionName}
+							</MenuItem>
+						),
+					)}
+				</IconDropdownButton>
+			</Tooltip>
+		);
+	}
+
+	return (
+		<MainIconButton
+			action={action}
+			onActionClick={onActionClick}
+			isDisabled={isDisabled}
+			tooltipPlacement={tooltipPlacement}
+		/>
+	);
+};

package/src/components/DataGridActionCell/MainAction/MainIconButton/MainIconButton.tsx

@@ -0,0 +1,88 @@
+import {
+	type ActionComponentParams,
+	ConfirmAction,
+	type ConfirmActionProps,
+} from '../../../ConfirmAction';
+import { IconButton, type IconButtonProps } from '../../../IconButton';
+import { Tooltip, type TooltipProps } from '../../../Tooltip';
+import type { ActionCellHandler, SingleAction } from '../../types';
+
+import { useLogic } from './useLogic';
+
+export type MainIconButtonProps<TAction> = {
+	action: IconButtonProps<'button'> & SingleAction<TAction>;
+	/**
+	 *  Обработчик клика на действие
+	 */
+	onActionClick: ActionCellHandler<TAction>;
+
+	/**
+	 *  Если true, action не доступен
+	 */
+	isDisabled?: boolean;
+
+	/**
+	 *  Положение тултипа
+	 */
+	tooltipPlacement?: TooltipProps['placement'];
+};
+
+export const MainIconButton = <TAction,>(
+	props: MainIconButtonProps<TAction>,
+) => {
+	const { tooltipProps } = useLogic(props);
+	const { action, onActionClick, isDisabled, tooltipPlacement } = props;
+
+	const {
+		name,
+		icon,
+		needConfirm,
+		confirmText,
+		confirmButtonProps,
+		disabledReason,
+		disabled,
+		loading,
+		isBlockingOperation,
+		loadingNote,
+		onClick,
+		...actions
+	} = action;
+
+	const renderButton = (
+		renderProps: ActionComponentParams | ActionCellHandler<TAction>,
+	) => (
+		<Tooltip
+			key={name}
+			withoutContainer={!disabled}
+			placement={tooltipPlacement}
+			{...tooltipProps}
+		>
+			<IconButton
+				disabled={isDisabled || disabled}
+				loading={loading}
+				{...actions}
+				variant='text'
+				{...renderProps}
+			>
+				{icon}
+			</IconButton>
+		</Tooltip>
+	);
+
+	return (
+		<>
+			{needConfirm ? (
+				<ConfirmAction
+					text={confirmText}
+					confirmButtonProps={confirmButtonProps}
+					actionComponent={(renderProps) => renderButton(renderProps)}
+					onConfirm={onActionClick(onClick) as ConfirmActionProps['onConfirm']}
+				/>
+			) : (
+				renderButton({
+					onClick: onActionClick(onClick) as ConfirmActionProps['onConfirm'],
+				})
+			)}
+		</>
+	);
+};

package/src/components/DataGridActionCell/MainAction/MainIconButton/index.ts

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

package/src/components/DataGridActionCell/MainAction/MainIconButton/useLogic/index.ts

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

package/src/components/DataGridActionCell/MainAction/MainIconButton/useLogic/useLogic.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+import type { MainIconButtonProps } from '../MainIconButton';
+
+type UseLogicParam<TAction> = MainIconButtonProps<TAction>;
+
+export const useLogic = <TAction>({ action }: UseLogicParam<TAction>) => {
+	const { loading, disabledReason, name } = action;
+	const [isVisibleTooltip, setVisibleTooltip] = useState(false);
+
+	const handleOpenTooltip = () => setVisibleTooltip(true);
+
+	const handleCloseTooltip = () => setVisibleTooltip(false);
+
+	useEffect(() => {
+		if (loading) {
+			setVisibleTooltip(false);
+		}
+	}, [loading]);
+
+	const title = disabledReason || name;
+
+	return {
+		tooltipProps: {
+			title,
+			open: isVisibleTooltip,
+			onOpen: handleOpenTooltip,
+			onClose: handleCloseTooltip,
+		},
+	};
+};

package/src/components/DataGridActionCell/MainAction/index.ts

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

package/src/components/DataGridActionCell/SecondaryAction/SecondaryAction.tsx

@@ -0,0 +1,54 @@
+import { EllipsisVertical } from 'lucide-react';
+import { IconDropdownButton } from '../../IconDropdownButton';
+import { MenuItem } from '../../MenuItem';
+import type { TooltipProps } from '../../Tooltip';
+import type { ActionCellHandler, SecondaryActionKind } from '../types';
+
+type SecondaryActionProps<TAction> = {
+	/**
+	 *  Вторичные действия
+	 */
+	actions: SecondaryActionKind<TAction>[];
+	/**
+	 *  Обработчик нажатия на действие
+	 */
+	onActionClick: ActionCellHandler<TAction>;
+	/**
+	 *  Если true, action не доступен
+	 */
+	isDisabled?: boolean;
+	/**
+	 *  Положение тултипа
+	 */
+	tooltipPlacement?: TooltipProps['placement'];
+};
+
+export const SecondaryActions = <TAction,>({
+	actions,
+	onActionClick,
+	tooltipPlacement,
+	isDisabled,
+}: SecondaryActionProps<TAction>) => {
+	return (
+		<IconDropdownButton
+			icon={<EllipsisVertical />}
+			variant='text'
+			disabled={isDisabled}
+		>
+			{actions.map((action) => {
+				const { onClick, name } = action;
+
+				return (
+					<MenuItem
+						{...action}
+						key={name}
+						tooltipPlacement={tooltipPlacement}
+						onClick={onActionClick(onClick)}
+					>
+						{name}
+					</MenuItem>
+				);
+			})}
+		</IconDropdownButton>
+	);
+};

package/src/components/DataGridActionCell/SecondaryAction/index.ts

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

package/src/components/DataGridActionCell/index.ts

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

package/src/components/DataGridActionCell/styles.ts

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+
+export const Wrapper = styled('div')`
+  display: inline-flex;
+  align-items: center;
+`;