@max-ts/components 0.0.2

package/src/components/DataGridPagination/DataGridPagination.stories.tsx

@@ -0,0 +1,206 @@
+import type { Meta } from '@storybook/react';
+import { type ChangeEvent, useEffect, useState } from 'react';
+
+import {
+	DataGrid,
+	type DataGridColumns,
+	type DataGridRowWithOptions,
+} from '../DataGrid';
+
+import { styled } from '@mui/material';
+import { SearchField } from '../SearchField';
+import { DataGridPagination } from './DataGridPagination';
+import { makeDataList, makeRandomDate } from './faker';
+
+const meta: Meta<typeof DataGridPagination> = {
+	title: 'Components/Data Display/DataGridPagination',
+	component: DataGridPagination,
+};
+
+export default meta;
+
+const Wrapper = styled('footer')`
+  width: 800px;
+`;
+
+type DataType = {
+	id: string;
+	documentName: string;
+	recipient: string;
+	createDate: string;
+};
+
+const FAKE_DATA_TEMPLATE: DataType = {
+	id: '1',
+	documentName: 'Договор №1',
+	recipient: 'ИП Иванов О.В.',
+	createDate: '2022-03-24T17:50:40.206Z',
+};
+
+const fakeData: DataGridRowWithOptions<DataType>[] = [
+	{
+		id: '123456789',
+		documentName: 'Договор №12345678',
+		recipient: 'ПАО "Первый завод"',
+		createDate: makeRandomDate(),
+	},
+	{
+		id: '1111111',
+		documentName: 'Договор №12345678',
+		recipient: 'ПАО "Первый завод"',
+		createDate: makeRandomDate(),
+	},
+	{
+		id: '1111',
+		documentName: 'Договор №12345678',
+		recipient: 'ПАО "Первый завод"',
+		createDate: makeRandomDate(),
+	},
+	{
+		id: '1111111',
+		documentName: 'Договор №12345678',
+		recipient: 'ПАО "Первый завод"',
+		createDate: makeRandomDate(),
+	},
+	{
+		id: '111111111',
+		documentName: 'Договор №12345678',
+		recipient: 'ПАО "Первый завод"',
+		createDate: makeRandomDate(),
+	},
+	...makeDataList(FAKE_DATA_TEMPLATE),
+];
+
+export const Example = () => {
+	const columns: DataGridColumns<DataType>[] = [
+		{
+			field: 'documentName',
+			label: 'Наименование документа',
+		},
+		{
+			field: 'recipient',
+			label: 'Получатель',
+		},
+		{
+			field: 'createDate',
+			label: 'Дата создания',
+			sortable: true,
+			format: ({ createDate }) => new Date(createDate).toLocaleDateString(),
+		},
+	];
+
+	const [isLoading, setLoading] = useState(true);
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [page, setPage] = useState<number>(1);
+	const [documentName, setDocumentName] = useState('');
+	const [filteredData, setFilteredData] = useState<DataType[]>(fakeData);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice((page - 1) * 10, page * 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	useEffect(() => {
+		setLoading(true);
+
+		setTimeout(() => {
+			const updatedFilteredData = documentName
+				? fakeData.filter((row) =>
+						row.documentName.toLowerCase().includes(documentName.toLowerCase()),
+					)
+				: fakeData;
+
+			setFilteredData(updatedFilteredData);
+			setSlicedData(updatedFilteredData.slice((page - 1) * 10, page * 10));
+			setLoading(false);
+		}, 1500);
+	}, [documentName]);
+
+	const handleChangePage = (
+		_event: ChangeEvent<unknown>,
+		newPage: number,
+	): void => {
+		setLoading(true);
+		setPage(newPage);
+
+		setTimeout(() => {
+			setLoading(false);
+			setSlicedData(filteredData.slice((newPage - 1) * 10, newPage * 10));
+		}, 1500);
+	};
+
+	return (
+		<Wrapper>
+			<SearchField
+				placeholder='Введите название документа'
+				value={documentName}
+				onChange={(event) => setDocumentName(event.target.value)}
+			/>
+			<DataGrid<DataType>
+				keyId='id'
+				rows={slicedData}
+				columns={columns}
+				isLoading={isLoading}
+				footer={
+					<DataGridPagination
+						rowsPerPage={10}
+						page={page}
+						disabled={isLoading}
+						totalCount={filteredData.length}
+						onChange={handleChangePage}
+					/>
+				}
+				onRetry={() => {}}
+			/>
+		</Wrapper>
+	);
+};
+
+/**
+ * onSetCountPerPage позволяет пользователю настраивать кол-во записей на странице
+ */
+export const OnSetCountPerPage = () => {
+	const [page, setPage] = useState<number>(1);
+	const [countPerPage, setCountPerPage] = useState<number>();
+
+	const handleChangePage = (_event: ChangeEvent<unknown>, newPage: number) =>
+		setPage(newPage);
+
+	const handleSetCountPerPage = (rowsPerPage: number) =>
+		setCountPerPage(rowsPerPage);
+
+	return (
+		<Wrapper>
+			<DataGridPagination
+				totalCount={100}
+				page={page}
+				rowsPerPage={countPerPage}
+				onSetCountPerPage={handleSetCountPerPage}
+				onChange={handleChangePage}
+			/>
+		</Wrapper>
+	);
+};
+
+/**
+ * `isForceCounter` позволяет отобразить информацию о кол-ве элементом на странице, даже если всего 1 страница
+ */
+export const IsForceCounter = () => {
+	const [page, setPage] = useState<number>(1);
+
+	const handleChangePage = (_event: ChangeEvent<unknown>, newPage: number) =>
+		setPage(newPage);
+
+	return (
+		<Wrapper>
+			<DataGridPagination
+				totalCount={8}
+				page={page}
+				isForceCounter
+				onChange={handleChangePage}
+			/>
+		</Wrapper>
+	);
+};

package/src/components/DataGridPagination/DataGridPagination.tsx

@@ -0,0 +1,102 @@
+import { MenuItem } from '../MenuItem';
+import { Pagination, type PaginationProps } from '../Pagination';
+import { Select } from '../Select';
+import { Typography } from '../Typography';
+
+import {
+	DEFAULT_ROWS_PER_PAGE,
+	DEFAULT_ROWS_PER_PAGE_OPTION,
+} from './constants';
+import { PaginationWrapper, Range, RangeWrapper } from './styles';
+import { useLogic } from './useLogic';
+
+export type DataGridPaginationProps = Omit<PaginationProps, 'count'> & {
+	/**
+	 * Количество всех записей
+	 */
+	totalCount: number;
+
+	/**
+	 * Текущая страница
+	 */
+	page: number;
+
+	/**
+	 * Максимальное количество записей на страницу
+	 */
+	rowsPerPage?: number;
+
+	/**
+	 * Конфигурация списка кол-ва элементов, отображаемых на одной странице
+	 */
+	rowsPerPageOptions?: number[];
+
+	// Если `true` информация о кол-ве элементом на странице будет отображаться, даже если всего 1 страница
+	isForceCounter?: boolean;
+
+	/**
+	 * Коллбэк для установки количества отображаемых элементов на странице
+	 */
+	onSetCountPerPage?: (rowsPerPage: number) => void;
+};
+
+export const DataGridPagination = (props: DataGridPaginationProps) => {
+	const {
+		isVisiblePagination,
+		pageCount,
+		formattedRange,
+		handleChangeRowsPerPage,
+	} = useLogic(props);
+
+	const {
+		page,
+		totalCount,
+		className,
+		rowsPerPage = DEFAULT_ROWS_PER_PAGE,
+		rowsPerPageOptions = DEFAULT_ROWS_PER_PAGE_OPTION,
+		isForceCounter,
+		disabled,
+		onSetCountPerPage,
+		...restProps
+	} = props;
+
+	if ((!isVisiblePagination && !isForceCounter) || !Boolean(totalCount)) {
+		return null;
+	}
+
+	return (
+		<PaginationWrapper className={className}>
+			<RangeWrapper>
+				{onSetCountPerPage && (
+					<>
+						<Typography variant='body1'>Строк на странице:</Typography>
+						<Select
+							size='small'
+							value={rowsPerPage}
+							disabled={disabled}
+							isShowClearButton={false}
+							onChange={handleChangeRowsPerPage}
+						>
+							{rowsPerPageOptions.map((option) => (
+								<MenuItem value={option} key={option}>
+									{option}
+								</MenuItem>
+							))}
+						</Select>
+					</>
+				)}
+
+				<Range variant='h6'>{formattedRange()}</Range>
+			</RangeWrapper>
+
+			{isVisiblePagination && (
+				<Pagination
+					disabled={disabled}
+					count={pageCount}
+					page={page}
+					{...restProps}
+				/>
+			)}
+		</PaginationWrapper>
+	);
+};

package/src/components/DataGridPagination/constants.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_ROWS_PER_PAGE = 20;
+
+export const DEFAULT_ROWS_PER_PAGE_OPTION = [20, 50, 100];

package/src/components/DataGridPagination/faker.ts

@@ -0,0 +1,36 @@
+import { faker } from '@faker-js/faker';
+
+import type {
+	CellValue,
+	DataGridRowOptions,
+	DataGridRowWithOptions,
+} from '../DataGrid';
+
+const RECIPIENTS = [
+	'ИП Иванов О.В.',
+	'ООО "Новая организация"',
+	'ООО "Волшебные документы"',
+];
+
+export const makeRandomDate = () => {
+	const randomDate = faker.date.recent();
+
+	return randomDate.toISOString();
+};
+
+export const makeDataList = <TData extends Record<string, CellValue>>(
+	dataObjTemplate: TData,
+	options?: DataGridRowOptions<TData>,
+): DataGridRowWithOptions<TData>[] => {
+	const DATA_ARRAY_LENGTH = 16;
+
+	return Array.from({ length: DATA_ARRAY_LENGTH })
+		.fill(dataObjTemplate)
+		.map((_, i) => ({
+			id: String(i + 1),
+			documentName: `Договор №${i + 1}`,
+			recipient: RECIPIENTS[Math.floor(Math.random() * RECIPIENTS.length)],
+			createDate: makeRandomDate(),
+			options: Math.random() < 0.5 ? options : {},
+		})) as unknown as DataGridRowWithOptions<TData>[];
+};

package/src/components/DataGridPagination/index.ts

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

package/src/components/DataGridPagination/styles.ts

@@ -0,0 +1,26 @@
+import { formControlClasses, styled } from '@mui/material';
+
+import { Typography } from '../Typography';
+
+export const PaginationWrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 48px;
+  padding-top: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const Range = styled(Typography)`
+  color: ${({ theme }) => theme.palette.grey['700']};
+`;
+
+export const RangeWrapper = styled('div')`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(3)};
+  align-items: center;
+
+  .${formControlClasses.root} {
+    flex-direction: unset;
+  }
+`;

package/src/components/DataGridPagination/useLogic/index.ts

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

package/src/components/DataGridPagination/useLogic/useLogic.ts

@@ -0,0 +1,53 @@
+import type { SelectChangeEvent } from '@mui/material';
+import { useEffect, useRef } from 'react';
+
+import type { DataGridPaginationProps } from '../DataGridPagination';
+import { DEFAULT_ROWS_PER_PAGE } from '../constants';
+
+type UseLogicParams = DataGridPaginationProps;
+
+export const useLogic = ({
+	totalCount,
+	rowsPerPage = DEFAULT_ROWS_PER_PAGE,
+	page,
+	onSetCountPerPage,
+}: UseLogicParams) => {
+	const prevTotalCountRef = useRef<number>(0);
+
+	useEffect(() => {
+		if (totalCount) {
+			prevTotalCountRef.current = totalCount;
+		}
+	}, [totalCount]);
+
+	const actualTotalCount = totalCount || prevTotalCountRef.current;
+
+	const pageCount = Math.ceil(actualTotalCount / rowsPerPage);
+
+	const rangeStart = (page - 1) * rowsPerPage + 1;
+
+	const rangeEnd = () => {
+		const end = page * rowsPerPage;
+
+		return end < actualTotalCount ? end : actualTotalCount;
+	};
+
+	const formattedRange = () => {
+		return `${rangeStart} — ${rangeEnd()} из ${actualTotalCount} записей`;
+	};
+
+	const isVisiblePagination = !(
+		!onSetCountPerPage && actualTotalCount <= rowsPerPage
+	);
+
+	const handleChangeRowsPerPage = (event: SelectChangeEvent<unknown>) => {
+		onSetCountPerPage?.(Number(event.target.value));
+	};
+
+	return {
+		isVisiblePagination,
+		pageCount,
+		formattedRange,
+		handleChangeRowsPerPage,
+	};
+};