Skip to content

Commit 53748c7

Browse files
su-usu-u
committed
ダミーデータの種類追加
1 parent d77eb1a commit 53748c7

5 files changed

Lines changed: 231 additions & 57 deletions

File tree

‎src/app/dummy_generator/DummyGenerator.tsx‎

Lines changed: 60 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,28 @@
11
'use client';
2+
import { DeleteOutlined } from '@ant-design/icons';
23
import PlusIcon from '@rsuite/icons/legacy/Plus';
3-
import { Table, Form } from 'antd';
4+
import { Table, Form, Popconfirm, Button } from 'antd';
45
import type { DefaultOptionType } from 'antd/es/select';
56
import type { ColumnsType } from 'antd/es/table';
67
import React, { FC } from 'react';
78
import { FormProvider, Controller } from 'react-hook-form';
9+
import type { Control, UseFormWatch } from 'react-hook-form/dist/types/form';
810
import { Grid, Row, Col, PanelGroup, Panel, IconButton } from 'rsuite';
911
import { AppLayout } from '@/Layout/App';
1012
import { dataTypeOptions } from '@/app/dummy_generator/facker';
1113
import type { DataType } from '@/app/dummy_generator/facker';
1214
import { NameOptions } from '@/app/dummy_generator/options/NameOptions';
13-
import { useDummy, RecordType } from '@/app/dummy_generator/useDummy';
15+
import { useDummy, RecordType, DummyForm } from '@/app/dummy_generator/useDummy';
1416
import { FormRow } from '@/components/common/Form/FormRow';
1517
import { Select } from '@/components/common/Form/Select';
18+
import { TextArea } from '@/components/common/Form/TextArea';
1619
import { PageTitle } from '@/components/common/PageTitle';
1720
import { PanelHeader } from '@/components/common/PanelHeader';
18-
19-
const columns: ColumnsType<RecordType> = [
20-
{
21-
title: 'ID',
22-
key: 'key',
23-
dataIndex: 'key',
24-
width: '5%',
25-
},
26-
{
27-
title: 'Content',
28-
key: 'content',
29-
dataIndex: 'content',
30-
},
31-
{
32-
title: '削除',
33-
key: 'action',
34-
dataIndex: 'action',
35-
width: '15%',
36-
},
37-
];
21+
import { AddressOptions } from '@/app/dummy_generator/options/AddressOptions';
3822

3923
export const DummyGenerator: FC = () => {
4024
const title = 'ダミー情報の生成';
41-
const { methods, fields, onClickAdd } = useDummy();
25+
const { methods, fields, output, onClickAdd, onClickDelete } = useDummy();
4226
const { watch, control } = methods;
4327

4428
const source = fields.map((value, index) => {
@@ -49,6 +33,28 @@ export const DummyGenerator: FC = () => {
4933
};
5034
});
5135

36+
const columns: ColumnsType<RecordType> = [
37+
{
38+
title: 'ID',
39+
key: 'key',
40+
dataIndex: 'key',
41+
width: '5%',
42+
},
43+
{
44+
title: 'データ',
45+
key: 'content',
46+
dataIndex: 'content',
47+
},
48+
{
49+
key: 'action',
50+
dataIndex: 'action',
51+
width: '5%',
52+
render: (_, record: RecordType) => (
53+
<DeleteAction key={record.key} onClick={onClickDelete(record.key)} />
54+
),
55+
},
56+
];
57+
5258
return (
5359
<FormProvider {...methods}>
5460
<AppLayout>
@@ -75,7 +81,9 @@ export const DummyGenerator: FC = () => {
7581
</Form>
7682
</Col>
7783
<Col md={12} xs={24}>
78-
<Panel bordered header={<PanelHeader title="UUID" />}></Panel>
84+
<Panel bordered header={<PanelHeader title="UUID" />}>
85+
<TextArea value={output} readOnly rows={20} />
86+
</Panel>
7987
</Col>
8088
</Row>
8189
</Grid>
@@ -87,8 +95,8 @@ export const DummyGenerator: FC = () => {
8795
const ConfigRow: FC<{
8896
id: string;
8997
index: number;
90-
control: any;
91-
watch: any;
98+
control: Control<DummyForm>;
99+
watch: UseFormWatch<DummyForm>;
92100
}> = ({ id, index, control, watch }) => {
93101
return (
94102
<FormRow label="形式">
@@ -101,27 +109,46 @@ const ConfigRow: FC<{
101109
style={{ width: 250 }}
102110
options={dataTypeOptions as unknown as DefaultOptionType[]}
103111
defaultValue={undefined}
112+
listHeight={512}
113+
listItemHeight={12}
104114
showSearch
105115
{...field}
106116
/>
107117
)}
108118
/>
109-
<Options dataType={watch(`items.${index}.dataType`)} index={index} control={control} />
119+
<Options
120+
dataType={watch(`items.${index}.dataType`)}
121+
id={id}
122+
index={index}
123+
control={control}
124+
/>
110125
</FormRow>
111126
);
112127
};
113128

114-
const Options: FC<{ dataType: DataType; index: number; control: any }> = ({
115-
dataType,
116-
index,
117-
control,
118-
}) => {
129+
const Options: FC<{
130+
dataType: DataType;
131+
id: string;
132+
index: number;
133+
control: Control<DummyForm>;
134+
}> = ({ dataType, id: id, index, control }) => {
119135
switch (dataType) {
120136
case 'name': {
121-
return <NameOptions />;
137+
return <NameOptions id={id} index={index} control={control} />;
138+
}
139+
case 'address': {
140+
return <AddressOptions id={id} index={index} control={control} />;
122141
}
123142
default: {
124143
return null;
125144
}
126145
}
127146
};
147+
148+
const DeleteAction: FC<{ key: number; onClick: any }> = ({ key, onClick }) => {
149+
return (
150+
<Popconfirm title="本当に削除していいですか？" onConfirm={onClick}>
151+
<Button icon={<DeleteOutlined />} danger />
152+
</Popconfirm>
153+
);
154+
};

‎src/app/dummy_generator/facker.ts‎

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,62 @@ import type { DefaultOptionType } from 'antd/es/select';
33

44
export const dataTypeOptions = [
55
{
6-
label: '氏名',
6+
label: '個人情報',
77
options: [
88
{
99
label: '氏名',
1010
value: 'name',
1111
},
12+
{
13+
label: '電話番号',
14+
value: 'phoneNumber',
15+
},
16+
{
17+
label: '郵便番号',
18+
value: 'zipcode',
19+
},
20+
{
21+
label: '住所',
22+
value: 'address',
23+
},
24+
],
25+
},
26+
{
27+
label: 'インターネット',
28+
options: [
29+
{
30+
label: 'Eメールアドレス',
31+
value: 'email',
32+
},
33+
{
34+
label: 'URI',
35+
value: 'uri',
36+
},
37+
{
38+
label: 'IPv4アドレス',
39+
value: 'ipv4',
40+
},
41+
{
42+
label: 'IPv6アドレス',
43+
value: 'ipv6',
44+
},
45+
],
46+
},
47+
{
48+
label: '会社',
49+
options: [
50+
{
51+
label: '会社名',
52+
value: 'companyName',
53+
},
54+
{
55+
label: '会社カテゴリ',
56+
value: 'companyCategory',
57+
},
58+
{
59+
label: '会社メールアドレス',
60+
value: 'companyEmail',
61+
},
1262
],
1363
},
1464
] as const;
@@ -44,3 +94,30 @@ export const nameDataOptions = [
4494
value: 'jaRomazi',
4595
},
4696
] as const;
97+
98+
export const addressOptions = [
99+
{
100+
label: 'フル',
101+
value: 'full',
102+
},
103+
{
104+
label: '県',
105+
value: 'prefecture',
106+
},
107+
{
108+
label: '市区町村',
109+
value: 'city',
110+
},
111+
{
112+
label: '丁目',
113+
value: 'chome',
114+
},
115+
{
116+
label: '番',
117+
value: 'ban',
118+
},
119+
{
120+
label: '号',
121+
value: 'gou',
122+
},
123+
] as const;

‎src/app/dummy_generator/options/AddressOptions.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Radio, Form } from 'antd';
2+
import React, { FC } from 'react';
3+
import { Controller } from 'react-hook-form';
4+
import type { Control } from 'react-hook-form/dist/types/form';
5+
import { addressOptions } from '@/app/dummy_generator/facker';
6+
import { DummyForm } from '@/app/dummy_generator/useDummy';
7+
8+
type Props<TFieldValues> = {
9+
id: string;
10+
index: number;
11+
control: Control<TFieldValues>;
12+
};
13+
14+
export const AddressOptions: FC<Props<DummyForm>> = ({ id, index, control }) => {
15+
return (
16+
<Form.Item style={{ marginTop: 12, marginBottom: 0 }}>
17+
<Controller
18+
key={id}
19+
name={`items.${index}.addressType`}
20+
control={control}
21+
defaultValue={addressOptions[0].value}
22+
render={({ field: { ref, ...field } }) => (
23+
<Radio.Group {...field} defaultValue={addressOptions[0].value} buttonStyle="outline">
24+
{addressOptions.map(({ label, value }) => {
25+
return (
26+
<Radio.Button key={label} value={value}>
27+
{label}
28+
</Radio.Button>
29+
);
30+
})}
31+
</Radio.Group>
32+
)}
33+
/>
34+
</Form.Item>
35+
);
36+
};

‎src/app/dummy_generator/options/NameOptions.tsx‎

Lines changed: 44 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,56 @@
11
import { Radio, Form } from 'antd';
22
import React, { FC } from 'react';
3+
import { Controller } from 'react-hook-form';
4+
import type { Control } from 'react-hook-form/dist/types/form';
35
import { nameOptions, nameDataOptions } from '@/app/dummy_generator/facker';
6+
import { DummyForm } from '@/app/dummy_generator/useDummy';
47

5-
export const NameOptions: FC = () => {
8+
type Props<TFieldValues> = {
9+
id: string;
10+
index: number;
11+
control: Control<TFieldValues>;
12+
};
13+
14+
export const NameOptions: FC<Props<DummyForm>> = ({ id, index, control }) => {
615
return (
716
<>
817
<Form.Item style={{ marginTop: 12, marginBottom: 0 }}>
9-
<Radio.Group defaultValue={nameOptions[0].value} buttonStyle="outline">
10-
{nameOptions.map(({ label, value }) => {
11-
return (
12-
<Radio.Button key={label} value={value}>
13-
{label}
14-
</Radio.Button>
15-
);
16-
})}
17-
</Radio.Group>
18+
<Controller
19+
key={id}
20+
name={`items.${index}.nameType`}
21+
control={control}
22+
defaultValue={nameOptions[0].value}
23+
render={({ field: { ref, ...field } }) => (
24+
<Radio.Group {...field} defaultValue={nameOptions[0].value} buttonStyle="outline">
25+
{nameOptions.map(({ label, value }) => {
26+
return (
27+
<Radio.Button key={label} value={value}>
28+
{label}
29+
</Radio.Button>
30+
);
31+
})}
32+
</Radio.Group>
33+
)}
34+
/>
1835
</Form.Item>
1936
<Form.Item style={{ marginTop: 12, marginBottom: 0 }}>
20-
<Radio.Group defaultValue={nameDataOptions[0].value} buttonStyle="outline">
21-
{nameDataOptions.map(({ label, value }) => {
22-
return (
23-
<Radio.Button key={label} value={value}>
24-
{label}
25-
</Radio.Button>
26-
);
27-
})}
28-
</Radio.Group>
37+
<Controller
38+
key={id}
39+
name={`items.${index}.nameDataType`}
40+
control={control}
41+
defaultValue={nameDataOptions[0].value}
42+
render={({ field: { ref, ...field } }) => (
43+
<Radio.Group {...field} defaultValue={nameDataOptions[0].value} buttonStyle="outline">
44+
{nameDataOptions.map(({ label, value }) => {
45+
return (
46+
<Radio.Button key={label} value={value}>
47+
{label}
48+
</Radio.Button>
49+
);
50+
})}
51+
</Radio.Group>
52+
)}
53+
/>
2954
</Form.Item>
3055
</>
3156
);

0 commit comments

Comments
 (0)