氏名

Author: su-u

src/app/dummy_generator/DummyGenerator.tsx

@@ -1,67 +1,62 @@
 'use client';
 import PlusIcon from '@rsuite/icons/legacy/Plus';
-import { Table } from 'antd';
+import { Table, Form } from 'antd';
+import type { DefaultOptionType } from 'antd/es/select';
 import type { ColumnsType } from 'antd/es/table';
 import React, { FC } from 'react';
 import { FormProvider, Controller } from 'react-hook-form';
-import { Grid, Row, Col, Form, PanelGroup, Panel, IconButton } from 'rsuite';
+import { Grid, Row, Col, PanelGroup, Panel, IconButton } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
-import { useDummy, DataType } from '@/app/dummy_generator/useDummy';
-import { Input } from '@/components/common/Form/Input';
+import { dataTypeOptions } from '@/app/dummy_generator/facker';
+import type { DataType } from '@/app/dummy_generator/facker';
+import { NameOptions } from '@/app/dummy_generator/options/NameOptions';
+import { useDummy, RecordType } from '@/app/dummy_generator/useDummy';
+import { FormRow } from '@/components/common/Form/FormRow';
+import { Select } from '@/components/common/Form/Select';
 import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
 
-const columns: ColumnsType<DataType> = [
+const columns: ColumnsType<RecordType> = [
   {
     title: 'ID',
     key: 'key',
     dataIndex: 'key',
+    width: '5%',
   },
   {
     title: 'Content',
     key: 'content',
     dataIndex: 'content',
   },
   {
-    title: 'Action',
+    title: '削除',
     key: 'action',
     dataIndex: 'action',
+    width: '15%',
   },
 ];
 
 export const DummyGenerator: FC = () => {
   const title = 'ダミー情報の生成';
   const { methods, fields, onClickAdd } = useDummy();
+  const { watch, control } = methods;
 
   const source = fields.map((value, index) => {
     return {
       key: index,
-      content: <ConfigRow id={value.id} index={index} control={methods.control} />,
+      content: <ConfigRow id={value.id} index={index} control={control} watch={watch} />,
       action: null,
     };
   });
 
-  // const source: DataType[] = [
-  //   {
-  //     key: 1,
-  //     content: '1',
-  //     action: 'a',
-  //   },
-  //   {
-  //     key: 2,
-  //     content: '2',
-  //     action: 'a',
-  //   }
-  // ];
-
   return (
     <FormProvider {...methods}>
       <AppLayout>
         <Grid fluid>
           <PageTitle title={title} />
           <Row gutter={5}>
             <Col md={12} xs={24}>
-              <Form fluid layout="horizontal">
+              <Form layout="horizontal">
                 <PanelGroup bordered>
                   <Panel bordered header={<PanelHeader title="管理" />}>
                     <IconButton
@@ -93,13 +88,40 @@ const ConfigRow: FC<{
   id: string;
   index: number;
   control: any;
-}> = ({ id, index, control }) => {
+  watch: any;
+}> = ({ id, index, control, watch }) => {
   return (
-    <Controller
-      key={id}
-      name={`items.${index}.firstName`}
-      control={control}
-      render={({ field: { ref, ...field } }) => <Input {...field} />}
-    />
+    <FormRow label="形式">
+      <Controller
+        key={id}
+        name={`items.${index}.dataType`}
+        control={control}
+        render={({ field: { ref, ...field } }) => (
+          <Select
+            style={{ width: 250 }}
+            options={dataTypeOptions as unknown as DefaultOptionType[]}
+            defaultValue={undefined}
+            showSearch
+            {...field}
+          />
+        )}
+      />
+      <Options dataType={watch(`items.${index}.dataType`)} index={index} control={control} />
+    </FormRow>
   );
 };
+
+const Options: FC<{ dataType: DataType; index: number; control: any }> = ({
+  dataType,
+  index,
+  control,
+}) => {
+  switch (dataType) {
+    case 'name': {
+      return <NameOptions />;
+    }
+    default: {
+      return null;
+    }
+  }
+};

src/app/dummy_generator/facker.ts

@@ -1 +1,46 @@
 import { faker } from '@faker-js/faker/locale/ja';
+import type { DefaultOptionType } from 'antd/es/select';
+
+export const dataTypeOptions = [
+  {
+    label: '氏名',
+    options: [
+      {
+        label: '氏名',
+        value: 'name',
+      },
+    ],
+  },
+] as const;
+
+export type DataType = (typeof dataTypeOptions)[number]['options'][number]['value'];
+
+export const nameOptions = [
+  {
+    label: '姓名',
+    value: 'name',
+  },
+  {
+    label: '名字',
+    value: 'lastName',
+  },
+  {
+    label: '名前',
+    value: 'firstName',
+  },
+] as const;
+
+export const nameDataOptions = [
+  {
+    label: '漢字',
+    value: 'ja',
+  },
+  {
+    label: 'カタカナ',
+    value: 'jaKana',
+  },
+  {
+    label: 'ローマ字',
+    value: 'jaRomazi',
+  },
+] as const;

src/app/dummy_generator/options/NameOptions.tsx

@@ -0,0 +1,32 @@
+import { Radio, Form } from 'antd';
+import React, { FC } from 'react';
+import { nameOptions, nameDataOptions } from '@/app/dummy_generator/facker';
+
+export const NameOptions: FC = () => {
+  return (
+    <>
+      <Form.Item style={{ marginTop: 12, marginBottom: 0 }}>
+        <Radio.Group defaultValue={nameOptions[0].value} buttonStyle="outline">
+          {nameOptions.map(({ label, value }) => {
+            return (
+              <Radio.Button key={label} value={value}>
+                {label}
+              </Radio.Button>
+            );
+          })}
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item style={{ marginTop: 12, marginBottom: 0 }}>
+        <Radio.Group defaultValue={nameDataOptions[0].value} buttonStyle="outline">
+          {nameDataOptions.map(({ label, value }) => {
+            return (
+              <Radio.Button key={label} value={value}>
+                {label}
+              </Radio.Button>
+            );
+          })}
+        </Radio.Group>
+      </Form.Item>
+    </>
+  );
+};

src/app/dummy_generator/useDummy.ts

@@ -8,7 +8,7 @@ type DummyForm = {
   items: any;
 };
 
-export interface DataType {
+export interface RecordType {
   key: number;
   content: any;
   action: string;
@@ -23,7 +23,7 @@ export const useDummy = () => {
   });
 
   const onClickAdd = useCallback(() => {
-    append({ firstName: '' });
+    append({ dataType: '' });
   }, [append]);
 
   console.log(methods.watch());