Fix: 削除ボタンの追加

Author: su-u

src/app/number_comma/NumberComma.tsx

@@ -1,11 +1,12 @@
 'use client';
 import { Space } from 'antd';
 import React, { FC } from 'react';
-import { Controller } from 'react-hook-form';
+import { Controller , FormProvider } from 'react-hook-form';
 import { Col, Grid, Panel, PanelGroup, Row, Form } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
 import { useNumberComma } from '@/app/number_comma/useNumberComma';
 import { CopyButton } from '@/components/common/CopyButton';
+import { ClearButton } from '@/components/common/Form/ClearButton';
 import { FormRow } from '@/components/common/Form/FormRow';
 import { Input } from '@/components/common/Form/Input';
 import { Select } from '@/components/common/Form/Select';
@@ -14,53 +15,59 @@ import { PanelHeader } from '@/components/common/PanelHeader';
 
 export const NumberComma: FC = () => {
   const title = '数値区切り';
-  const { control, output, SEPARATOR_LIST, DEFAULT_VALUES } = useNumberComma();
+  const { methods, output, SEPARATOR_LIST, DEFAULT_VALUES } = useNumberComma();
 
   return (
-    <AppLayout>
-      <Grid fluid>
-        <PageTitle title={title} />
-        <Row gutter={5}>
-          <Col xs={24} md={12}>
-            <PanelGroup bordered>
-              <Panel header={<PanelHeader title="区切りたい数値" />}>
-                <Controller
-                  render={({ field }) => <Input noResize="none" {...field} />}
-                  name="input"
-                  control={control}
-                  defaultValue={DEFAULT_VALUES.input}
-                />
+    <FormProvider {...methods}>
+      <AppLayout>
+        <Grid fluid>
+          <PageTitle title={title} />
+          <Row gutter={5}>
+            <Col xs={24} md={12}>
+              <PanelGroup bordered>
+                <Panel
+                  header={
+                    <PanelHeader title="区切りたい数値" right={<ClearButton name="input" />} />
+                  }
+                >
+                  <Controller
+                    render={({ field }) => <Input noResize="none" {...field} />}
+                    name="input"
+                    control={methods.control}
+                    defaultValue={DEFAULT_VALUES.input}
+                  />
+                </Panel>
+                <Panel bordered header={<PanelHeader title="設定" />}>
+                  <Form fluid layout="horizontal">
+                    <FormRow label="区切り文字">
+                      <Controller
+                        render={({ field }) => (
+                          <Select
+                            style={{ width: 250 }}
+                            options={SEPARATOR_LIST}
+                            defaultValue={DEFAULT_VALUES.separator}
+                            {...field}
+                          />
+                        )}
+                        name="separator"
+                        control={methods.control}
+                      />
+                    </FormRow>
+                  </Form>
+                </Panel>
+              </PanelGroup>
+            </Col>
+            <Col xs={24} md={12}>
+              <Panel bordered header={<PanelHeader title="区切った数値" />}>
+                <Space.Compact block>
+                  <Input noResize="none" readOnly value={output} />
+                  <CopyButton copyText={output} />
+                </Space.Compact>
               </Panel>
-              <Panel bordered header={<PanelHeader title="設定" />}>
-                <Form fluid layout="horizontal">
-                  <FormRow label="区切り文字">
-                    <Controller
-                      render={({ field }) => (
-                        <Select
-                          style={{ width: 250 }}
-                          options={SEPARATOR_LIST}
-                          defaultValue={DEFAULT_VALUES.separator}
-                          {...field}
-                        />
-                      )}
-                      name="separator"
-                      control={control}
-                    />
-                  </FormRow>
-                </Form>
-              </Panel>
-            </PanelGroup>
-          </Col>
-          <Col xs={24} md={12}>
-            <Panel bordered header={<PanelHeader title="区切った数値" />}>
-              <Space.Compact block>
-                <Input noResize="none" readOnly value={output} />
-                <CopyButton copyText={output} />
-              </Space.Compact>
-            </Panel>
-          </Col>
-        </Row>
-      </Grid>
-    </AppLayout>
+            </Col>
+          </Row>
+        </Grid>
+      </AppLayout>
+    </FormProvider>
   );
 };

src/app/number_comma/useNumberComma.ts

@@ -22,16 +22,17 @@ const DEFAULT_VALUES: NumberCommaForm = {
 };
 
 export const useNumberComma = () => {
-  const { control, watch } = useCustomForm<NumberCommaForm>({
+  const methods = useCustomForm<NumberCommaForm>({
     defaultValues: DEFAULT_VALUES,
   });
+  const { control, watch } = methods;
 
   const input = watch('input', DEFAULT_VALUES.input);
   const separator = watch('separator', DEFAULT_VALUES.separator);
   const output = comma(input, separator);
 
   return {
-    control,
+    methods,
     output,
     SEPARATOR_LIST,
     DEFAULT_VALUES,