クリアボタンを追加

Author: su-u

src/app/dummy_generator/DummyGenerator.tsx

@@ -1,16 +1,15 @@
 'use client';
-import { DeleteOutlined } from '@ant-design/icons';
-import PlusIcon from '@rsuite/icons/legacy/Plus';
-import { Table, Form, Popconfirm, Button } from 'antd';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { Table, Form, Popconfirm, Button, Space } 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 type { Control, UseFormWatch } from 'react-hook-form/dist/types/form';
-import { Grid, Row, Col, PanelGroup, Panel, IconButton } from 'rsuite';
+import { Grid, Row, Col, PanelGroup, Panel } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
-import { dataTypeOptions } from '@/app/dummy_generator/facker';
-import type { DataType } from '@/app/dummy_generator/facker';
+import { dataTypeOptions } from '@/app/dummy_generator/options';
+import type { DataType } from '@/app/dummy_generator/options';
 import { AddressOptions } from '@/app/dummy_generator/options/AddressOptions';
 import { NameOptions } from '@/app/dummy_generator/options/NameOptions';
 import { useDummy, RecordType, DummyForm } from '@/app/dummy_generator/useDummy';
@@ -22,7 +21,7 @@ import { PanelHeader } from '@/components/common/PanelHeader';
 
 export const DummyGenerator: FC = () => {
   const title = 'ダミー情報の生成';
-  const { methods, fields, output, onClickAdd, onClickDelete } = useDummy();
+  const { methods, fields, output, onClickAdd, onClickClear, onClickDelete } = useDummy();
   const { watch, control } = methods;
 
   const source = fields.map((value, index) => {
@@ -64,25 +63,41 @@ export const DummyGenerator: FC = () => {
             <Col md={12} xs={24}>
               <Form layout="horizontal">
                 <PanelGroup bordered>
-                  <Panel bordered header={<PanelHeader title="管理" />}>
-                    <IconButton
-                      icon={<PlusIcon />}
-                      placement="right"
-                      size="xs"
-                      onClick={onClickAdd}
-                    >
-                      追加
-                    </IconButton>
-                  </Panel>
-                  <Panel bordered header={<PanelHeader title="設定" />}>
-                    <Table columns={columns} dataSource={source} />
+                  <Panel bordered header={<PanelHeader title="管理" />}></Panel>
+                  <Panel
+                    bordered
+                    header={
+                      <PanelHeader
+                        title="設定"
+                        right={
+                          <Space.Compact block>
+                            <Button icon={<PlusOutlined />} size="small" onClick={onClickAdd}>
+                              追加
+                            </Button>
+                            <Popconfirm title="全て削除していいですか？" onConfirm={onClickClear}>
+                              <Button icon={<DeleteOutlined />} danger size="small">
+                                クリア
+                              </Button>
+                            </Popconfirm>
+                          </Space.Compact>
+                        }
+                      />
+                    }
+                  >
+                    <Table
+                      pagination={{
+                        pageSize: 20,
+                      }}
+                      columns={columns}
+                      dataSource={source}
+                    />
                   </Panel>
                 </PanelGroup>
               </Form>
             </Col>
             <Col md={12} xs={24}>
               <Panel bordered header={<PanelHeader title="テストデータ" />}>
-                <TextArea value={output} readOnly rows={20} />
+                <TextArea value={output} readOnly rows={30} />
               </Panel>
             </Col>
           </Row>

src/app/dummy_generator/facker.ts src/app/dummy_generator/options.tssrc/app/dummy_generator/facker.ts renamed to src/app/dummy_generator/options.ts

@@ -1,6 +1,3 @@
-import { faker } from '@faker-js/faker/locale/ja';
-import type { DefaultOptionType } from 'antd/es/select';
-
 export const dataTypeOptions = [
   {
     label: '個人情報',

src/app/dummy_generator/options/AddressOptions.tsx

@@ -2,7 +2,7 @@ import { Radio, Form } from 'antd';
 import React, { FC } from 'react';
 import { Controller } from 'react-hook-form';
 import type { Control } from 'react-hook-form/dist/types/form';
-import { addressOptions } from '@/app/dummy_generator/facker';
+import { addressOptions } from '@/app/dummy_generator/options';
 import { DummyForm } from '@/app/dummy_generator/useDummy';
 
 type Props<TFieldValues> = {

src/app/dummy_generator/options/NameOptions.tsx

@@ -2,7 +2,7 @@ import { Radio, Form } from 'antd';
 import React, { FC } from 'react';
 import { Controller } from 'react-hook-form';
 import type { Control } from 'react-hook-form/dist/types/form';
-import { nameOptions, nameDataOptions } from '@/app/dummy_generator/facker';
+import { nameOptions, nameDataOptions } from '@/app/dummy_generator/options';
 import { DummyForm } from '@/app/dummy_generator/useDummy';
 
 type Props<TFieldValues> = {

src/app/dummy_generator/useDummy.ts

@@ -28,6 +28,10 @@ export const useDummy = () => {
     append({ dataType: '' });
   }, [append]);
 
+  const onClickClear = useCallback(() => {
+    remove();
+  }, [remove]);
+
   const onClickDelete = useCallback(
     (index: number) => () => {
       remove(index);
@@ -42,6 +46,7 @@ export const useDummy = () => {
     fields,
     output,
     onClickAdd,
+    onClickClear,
     onClickDelete,
   };
 };