修正

Author: su-u

src/app/dummy_generator/DummyGenerator.tsx

@@ -18,10 +18,13 @@ import { Select } from '@/components/common/Form/Select';
 import { TextArea } from '@/components/common/Form/TextArea';
 import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
+import { InputNumber } from '@/components/common/Form/InputNumber';
+import { COUNT_LIMIT, DEFAULT_VALUES } from '@/app/dummy_generator/useDummy';
 
 export const DummyGenerator: FC = () => {
   const title = 'ダミー情報の生成';
-  const { methods, fields, output, onClickAdd, onClickClear, onClickDelete } = useDummy();
+  const width = 250;
+  const { methods, fields, output, onClickAdd, onClickClear, onClickDelete, onClickGenerate } = useDummy();
   const { watch, control } = methods;
 
   const source = fields.map((value, index) => {
@@ -63,7 +66,27 @@ export const DummyGenerator: FC = () => {
             <Col md={12} xs={24}>
               <Form layout="horizontal">
                 <PanelGroup bordered>
-                  <Panel bordered header={<PanelHeader title="管理" />}></Panel>
+                  <Panel bordered header={<PanelHeader title="管理" />}>
+                    <FormRow label="生成数">
+                      <Controller
+                        render={({ field: { ref, ...field } }) => (
+                          <InputNumber
+                            {...field}
+                            style={{ width }}
+                            min={COUNT_LIMIT.min}
+                            max={COUNT_LIMIT.max}
+                            defaultValue={DEFAULT_VALUES.count}
+                          />
+                        )}
+                        name="count"
+                        control={control}
+                      />
+
+                    </FormRow>
+                    <Button type="primary" onClick={onClickGenerate}>
+                      生成
+                    </Button>
+                  </Panel>
                   <Panel
                     bordered
                     header={

src/app/dummy_generator/useDummy.ts

@@ -1,13 +1,25 @@
 import { useCallback } from 'react';
 import { useFieldArray } from 'react-hook-form';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
+import { useState } from 'react';
 
 export type DummyForm = {
   count: number;
   format: 'csv' | 'tsv' | 'json';
-  items: any;
+  items: any[];
 };
 
+export const COUNT_LIMIT = {
+  min: 1,
+  max: 1000,
+};
+
+export const DEFAULT_VALUES: DummyForm = {
+  count: 1,
+  format: 'csv',
+  items: [],
+}
+
 export interface RecordType {
   key: number;
   content: any;
@@ -18,11 +30,12 @@ export const useDummy = () => {
   const methods = useCustomForm<DummyForm>({
     shouldUnregister: true,
   });
-  const { control } = methods;
+  const { control, getValues } = methods;
   const { fields, append, remove } = useFieldArray({
     control,
     name: 'items',
   });
+  const [output, setOutput] = useState<string>('');
 
   const onClickAdd = useCallback(() => {
     append({ dataType: '' });
@@ -39,7 +52,11 @@ export const useDummy = () => {
     [remove],
   );
 
-  const output = JSON.stringify(methods.watch(), null, `  `);
+  const onClickGenerate = useCallback(() => {
+    const values = getValues();
+    setOutput(JSON.stringify(values, null, `  `));
+  }, [getValues]);
+
 
   return {
     methods,
@@ -48,5 +65,6 @@ export const useDummy = () => {
     onClickAdd,
     onClickClear,
     onClickDelete,
+    onClickGenerate,
   };
 };