64 lines
2.0 KiB
TypeScript
Executable File
64 lines
2.0 KiB
TypeScript
Executable File
import { Card, Flex, Typography } from 'antd';
|
|
import { useMemo, useState } from 'react';
|
|
import type { SampleMeta } from '../../../../widgets/core';
|
|
import { plugins } from '../../../../types/component-plugin';
|
|
import { createSelectPlaceholderPlugin, createSelectSortPlugin } from '../plugins';
|
|
import { SelectUI } from '../SelectUI';
|
|
import type { SelectOptionItem, SelectUIProps } from '../types';
|
|
|
|
const { Paragraph, Text } = Typography;
|
|
|
|
export const sampleMeta: SampleMeta = {
|
|
id: 'select-input',
|
|
componentId: 'select-input',
|
|
title: 'Select Input',
|
|
description: 'code/value 데이터를 받아 code를 값으로 유지하는 필터형 select combo 샘플입니다.',
|
|
category: 'Inputs',
|
|
kind: 'feature',
|
|
variantLabel: 'Showcase',
|
|
order: 41,
|
|
features: ['docs'],
|
|
};
|
|
|
|
export function Sample() {
|
|
const [selectedCode, setSelectedCode] = useState<string | undefined>('WH-001');
|
|
|
|
const data = useMemo<SelectOptionItem[]>(
|
|
() => [
|
|
{ code: 'WH-001', value: '서울 물류센터' },
|
|
{ code: 'WH-002', value: '김포 물류센터' },
|
|
{ code: 'WH-003', value: '부산 물류센터' },
|
|
{ code: 'WH-004', value: '대전 허브센터' },
|
|
],
|
|
[],
|
|
);
|
|
|
|
const selectProps = plugins<SelectUIProps>(
|
|
{
|
|
data,
|
|
value: selectedCode,
|
|
onChange: (nextCode) => {
|
|
setSelectedCode(nextCode);
|
|
},
|
|
},
|
|
[createSelectPlaceholderPlugin('센터명을 검색하세요'), createSelectSortPlugin()],
|
|
);
|
|
|
|
const selectedItem = data.find((item) => item.code === selectedCode);
|
|
|
|
return (
|
|
<Card title="Select Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
|
|
<Paragraph>
|
|
`value`는 실제 저장값인 <Text strong>code</Text>를 유지하고, 드롭다운 표시 및 검색은
|
|
<Text strong> value</Text> 기준으로 동작합니다.
|
|
</Paragraph>
|
|
|
|
<Flex vertical gap="small">
|
|
<SelectUI {...selectProps} />
|
|
<Text>선택 code: {selectedCode ?? '-'}</Text>
|
|
<Text>선택 value: {selectedItem?.value ?? '-'}</Text>
|
|
</Flex>
|
|
</Card>
|
|
);
|
|
}
|