Тимур Городецкий
102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
import * as React from 'react';
|
|
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { useState } from 'react';
|
|
import { DataTable, IDataTableColumn } from './DataTable';
|
|
import { Badge } from '../Badge/Badge';
|
|
import { TextInput } from '../TextInput/TextInput';
|
|
|
|
const meta: Meta = {
|
|
title: 'Таблицы/DataTable',
|
|
tags: ['autodocs']
|
|
};
|
|
|
|
export default meta;
|
|
|
|
// --- Пример 1: список (только чтение, кликабельные строки, бейдж в ячейке) ---
|
|
interface IRequestRow {
|
|
id: number;
|
|
type: string;
|
|
title: string;
|
|
status: string;
|
|
}
|
|
|
|
const REQUESTS: IRequestRow[] = [
|
|
{ id: 3, type: 'Заявка на отпуск', title: 'Отпуск — Тимур Городецкий', status: 'Согласовано' },
|
|
{ id: 7, type: 'Заявка в отдел 1С', title: 'ТЕСТ СОГЛАСОВАНИЯ', status: 'На согласовании' },
|
|
{ id: 18, type: 'Рабочее место', title: 'Раб. место — Тестов Т.Т.', status: 'Выполнение' }
|
|
];
|
|
|
|
export const RequestList: StoryObj = {
|
|
render: () => {
|
|
const columns: IDataTableColumn<IRequestRow>[] = [
|
|
{ key: 'id', title: 'ID', width: '64px' },
|
|
{ key: 'type', title: 'Тип' },
|
|
{ key: 'title', title: 'Название' },
|
|
{
|
|
key: 'status',
|
|
title: 'Статус',
|
|
render: (r) => (
|
|
<Badge variant={r.status === 'Согласовано' ? 'success' : r.status === 'Выполнение' ? 'primary' : 'info'}>
|
|
{r.status}
|
|
</Badge>
|
|
)
|
|
}
|
|
];
|
|
return (
|
|
<DataTable
|
|
columns={columns}
|
|
rows={REQUESTS}
|
|
rowKey={(r) => r.id}
|
|
onRowClick={(r) => window.alert(`Открыть заявку #${r.id}`)}
|
|
/>
|
|
);
|
|
}
|
|
};
|
|
|
|
// --- Пример 2: редактируемая табличная часть (инпуты в ячейках) ---
|
|
interface IItem {
|
|
name: string;
|
|
qty: string;
|
|
}
|
|
|
|
export const Editable: StoryObj = {
|
|
render: () => {
|
|
const [items, setItems] = useState<IItem[]>([
|
|
{ name: 'Ноутбук', qty: '2' },
|
|
{ name: 'Мышь', qty: '5' }
|
|
]);
|
|
const setCell = (i: number, key: keyof IItem, value: string): void =>
|
|
setItems(items.map((r, idx) => (idx === i ? { ...r, [key]: value } : r)));
|
|
|
|
const columns: IDataTableColumn<IItem>[] = [
|
|
{ key: 'n', title: '№', width: '48px', render: (_r, i) => i + 1 },
|
|
{
|
|
key: 'name',
|
|
title: 'Наименование',
|
|
render: (r, i) => <TextInput value={r.name} onChange={(v) => setCell(i, 'name', v)} />
|
|
},
|
|
{
|
|
key: 'qty',
|
|
title: 'Кол-во',
|
|
width: '120px',
|
|
render: (r, i) => <TextInput value={r.qty} onChange={(v) => setCell(i, 'qty', v)} />
|
|
}
|
|
];
|
|
return <DataTable columns={columns} rows={items} />;
|
|
}
|
|
};
|
|
|
|
// --- Пример 3: пустое состояние ---
|
|
export const Empty: StoryObj = {
|
|
render: () => (
|
|
<DataTable
|
|
columns={[
|
|
{ key: 'id', title: 'ID' },
|
|
{ key: 'title', title: 'Название' }
|
|
]}
|
|
rows={[]}
|
|
emptyText="Заявок пока нет"
|
|
/>
|
|
)
|
|
};
|