Fix: ヘッダー周りのボタンを修正

su-u · Dec 16, 2023 · 5a04425 · 5a04425
1 parent 4cc7a59
commit 5a04425
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 121 deletions.
diff --git a/src/app/base64/Base64.tsx b/src/app/base64/Base64.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { FC } from 'react';
 import { FormProvider, Controller } from 'react-hook-form';
-import { Grid, Row, Col, Panel, ButtonToolbar } from 'rsuite';
+import { Grid, Row, Col, Panel } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
 import { useBase64 } from '@/app/base64/useBase64';
 import { Editor, ex } from '@/components/common/Editor';
@@ -23,16 +23,7 @@ export const Base64: FC = () => {
             <Col xs={24} md={12}>
               <Panel
                 bordered
-                header={
-                  <PanelHeader
-                    title="入力文字"
-                    right={
-                      <ButtonToolbar>
-                        <ClearButton name="input" />
-                      </ButtonToolbar>
-                    }
-                  />
-                }
+                header={<PanelHeader title="入力文字" right={<ClearButton name="input" />} />}
               >
                 <Controller
                   render={({ field }) => <Editor {...field} ref={null} />}
@@ -47,11 +38,7 @@ export const Base64: FC = () => {
                 header={
                   <PanelHeader
                     title="base64エンコード"
-                    right={
-                      <ButtonToolbar>
-                        <CopyButton copyText={output} />
-                      </ButtonToolbar>
-                    }
+                    right={<CopyButton size="small" copyText={output} />}
                   />
                 }
               >

diff --git a/src/app/character_count/CharacterCount.tsx b/src/app/character_count/CharacterCount.tsx
@@ -1,8 +1,7 @@
 'use client';
-import styled from '@emotion/styled';
 import React, { FC } from 'react';
 import { Controller, FormProvider } from 'react-hook-form';
-import { Col, Grid, Panel, Row, ButtonToolbar } from 'rsuite';
+import { Col, Grid, Panel, Row } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
 import {
   characterCountWithoutSpace,
@@ -52,14 +51,7 @@ export const CharacterCount: FC = () => {
               <Panel
                 bordered
                 header={
-                  <PanelHeader
-                    title="カウントする文字列"
-                    right={
-                      <ButtonToolbar>
-                        <ClearButton name="input" />
-                      </ButtonToolbar>
-                    }
-                  />
+                  <PanelHeader title="カウントする文字列" right={<ClearButton name="input" />} />
                 }
               >
                 <Controller

diff --git a/src/app/character_replace/CharacterReplace.tsx b/src/app/character_replace/CharacterReplace.tsx
@@ -29,16 +29,7 @@ export const CharacterReplace: FC = () => {
               <PanelGroup bordered>
                 <Panel
                   bordered
-                  header={
-                    <PanelHeader
-                      title="入力文字"
-                      right={
-                        <ButtonToolbar>
-                          <ClearButton name="input" />
-                        </ButtonToolbar>
-                      }
-                    />
-                  }
+                  header={<PanelHeader title="入力文字" right={<ClearButton name="input" />} />}
                 >
                   <Controller
                     render={({ field }) => <Editor {...field} ref={null} />}
@@ -74,11 +65,7 @@ export const CharacterReplace: FC = () => {
                 header={
                   <PanelHeader
                     title="置換後"
-                    right={
-                      <ButtonToolbar>
-                        <CopyButton copyText={output} />
-                      </ButtonToolbar>
-                    }
+                    right={<CopyButton size="small" copyText={output} />}
                   />
                 }
               >

diff --git a/src/app/date_converter/DateConverter.tsx b/src/app/date_converter/DateConverter.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { FC } from 'react';
 import { Controller } from 'react-hook-form';
-import { Col, Grid, Panel, PanelGroup, Row, Form, InputPicker } from 'rsuite';
+import { Col, Grid, Panel, PanelGroup, Row, Form } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
 import { useDateConverter } from '@/app/date_converter/useDateConverter';
 import { DatePicker } from '@/components/common/Form/DatePicker';

diff --git a/src/app/diff/Diff.tsx b/src/app/diff/Diff.tsx
@@ -1,19 +1,19 @@
 'use client';
 import React, { FC } from 'react';
 import { Controller, FormProvider } from 'react-hook-form';
-import { ButtonToolbar, Col, Grid, Panel, PanelGroup, Row, FlexboxGrid } from 'rsuite';
+import { ButtonToolbar, Col, Grid, Panel, PanelGroup, Row } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
 import { DiffEditor } from '@/app/diff/DiffEditor';
 import { useDiff } from '@/app/diff/useDiff';
 import { ClearButton } from '@/components/common/Form/ClearButton';
-import { Input } from '@/components/common/Form/Input';
+import { TextArea } from '@/components/common/Form/TextArea';
 import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
 
 export const Diff: FC = () => {
   const title = 'テキスト差分';
-  const { methods, original, modified } = useDiff();
   const INPUT_ROWS = 10;
+  const { methods, original, modified } = useDiff();
 
   return (
     <FormProvider {...methods}>
@@ -37,7 +37,7 @@ export const Diff: FC = () => {
                   }
                 >
                   <Controller
-                    render={({ field }) => <Input {...field} />}
+                    render={({ field }) => <TextArea rows={INPUT_ROWS} {...field} />}
                     name="original"
                     control={methods.control}
                   />
@@ -59,7 +59,7 @@ export const Diff: FC = () => {
                 }
               >
                 <Controller
-                  render={({ field }) => <Input {...field} />}
+                  render={({ field }) => <TextArea rows={INPUT_ROWS} {...field} />}
                   name="modified"
                   control={methods.control}
                 />

diff --git a/src/app/json_formatter/JsonFormatter.tsx b/src/app/json_formatter/JsonFormatter.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { FC } from 'react';
 import { Controller, FormProvider } from 'react-hook-form';
-import { ButtonToolbar, Col, Grid, Panel, PanelGroup, Row } from 'rsuite';
+import { Col, Grid, Panel, PanelGroup, Row } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
 import { useJsonFormatter } from '@/app/json_formatter/useJsonFormatter';
 import { Editor, ex } from '@/components/common/Editor';
@@ -26,16 +26,7 @@ export const JsonFormatter: FC = () => {
               <PanelGroup bordered>
                 <Panel
                   bordered
-                  header={
-                    <PanelHeader
-                      title="入力文字"
-                      right={
-                        <ButtonToolbar>
-                          <ClearButton name="input" />
-                        </ButtonToolbar>
-                      }
-                    />
-                  }
+                  header={<PanelHeader title="入力文字" right={<ClearButton name="input" />} />}
                 >
                   <Controller
                     render={({ field }) => <Editor extensions={[ex.json]} {...field} />}
@@ -68,11 +59,7 @@ export const JsonFormatter: FC = () => {
                 header={
                   <PanelHeader
                     title="フォーマット"
-                    right={
-                      <ButtonToolbar>
-                        <CopyButton copyText={output} />
-                      </ButtonToolbar>
-                    }
+                    right={<CopyButton size="small" copyText={output} />}
                   />
                 }
               >

diff --git a/src/app/punycode/Punycode.tsx b/src/app/punycode/Punycode.tsx
@@ -1,36 +1,22 @@
 'use client';
-import CopyIcon from '@rsuite/icons/Copy';
 import { Space } from 'antd';
-import { toASCII, encode } from 'punycode/';
 import React, { FC } from 'react';
 import { Controller, FormProvider } from 'react-hook-form';
-import { Col, Grid, InputGroup, Panel, PanelGroup, Row, ButtonToolbar } from 'rsuite';
+import { Col, Grid, Panel, PanelGroup, Row, ButtonToolbar } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
+import { usePunycode } from '@/app/punycode/usePunycode';
 import { Editor } from '@/components/common/Editor';
 import { ClearButton } from '@/components/common/Form/ClearButton';
 import { CopyButton } from '@/components/common/Form/CopyButton';
-import { Input } from '@/components/common/Form/Input';
-import { useCustomForm } from '@/components/common/Form/useCustomForm';
+import { TextArea } from '@/components/common/Form/TextArea';
 import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
-import { useCopy } from '@/hooks/useCopy';
-
-type PunycodeForm = {
-  input: string;
-};
 
 export const Punycode: FC = () => {
   const title = 'punycode変換（日本語ドメイン変換）';
-  const methods = useCustomForm<PunycodeForm>({
-    defaultValues: {
-      input: '',
-    },
-  });
-  const { control, watch } = methods;
-  const { copy } = useCopy();
-
-  const converted_ascii = toASCII(watch('input', ''));
-  const converted_punycode = encode(watch('input', ''));
+  const INPUT_ROWS = 5;
+  const { methods, converted_ascii, converted_punycode } = usePunycode();
+  const { control } = methods;
 
   return (
     <FormProvider {...methods}>
@@ -61,16 +47,28 @@ export const Punycode: FC = () => {
             </Col>
             <Col xs={24} md={12}>
               <PanelGroup bordered>
-                <Panel header={<PanelHeader title="ドメイン変換" />}>
+                <Panel
+                  header={
+                    <PanelHeader
+                      title="ドメイン変換"
+                      right={<CopyButton size="small" copyText={converted_punycode} />}
+                    />
+                  }
+                >
                   <Space.Compact block>
-                    <Input readOnly value={converted_ascii} />
-                    <CopyButton copyText={converted_punycode} />
+                    <TextArea rows={INPUT_ROWS} readOnly value={converted_ascii} />
                   </Space.Compact>
                 </Panel>
-                <Panel header={<PanelHeader title="punycode変換" />}>
+                <Panel
+                  header={
+                    <PanelHeader
+                      title="punycode変換"
+                      right={<CopyButton size="small" copyText={converted_punycode} />}
+                    />
+                  }
+                >
                   <Space.Compact block>
-                    <Input readOnly value={converted_punycode} />
-                    <CopyButton copyText={converted_punycode} />
+                    <TextArea rows={INPUT_ROWS} readOnly value={converted_punycode} />
                   </Space.Compact>
                 </Panel>
               </PanelGroup>

diff --git a/src/app/punycode/usePunycode.ts b/src/app/punycode/usePunycode.ts
@@ -0,0 +1,24 @@
+import { toASCII, encode } from 'punycode/';
+import { useCustomForm } from '@/components/common/Form/useCustomForm';
+
+type PunycodeForm = {
+  input: string;
+};
+
+export const usePunycode = () => {
+  const methods = useCustomForm<PunycodeForm>({
+    defaultValues: {
+      input: '',
+    },
+  });
+  const { watch } = methods;
+
+  const converted_ascii = toASCII(watch('input', ''));
+  const converted_punycode = encode(watch('input', ''));
+
+  return {
+    methods,
+    converted_ascii,
+    converted_punycode,
+  };
+};
diff --git a/src/app/urlencode/UrlEncode.tsx b/src/app/urlencode/UrlEncode.tsx
@@ -1,18 +1,7 @@
 'use client';
-import CopyIcon from '@rsuite/icons/Copy';
 import React, { FC } from 'react';
 import { Controller, FormProvider } from 'react-hook-form';
-import {
-  Col,
-  Grid,
-  Panel,
-  Row,
-  Form,
-  ButtonToolbar,
-  IconButton,
-  PanelGroup,
-  SelectPicker,
-} from 'rsuite';
+import { Col, Grid, Panel, Row, Form, PanelGroup } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
 import { useUrlEncode } from '@/app/urlencode/useUrlEncode';
 import { Editor } from '@/components/common/Editor';
@@ -22,6 +11,7 @@ import { Select } from '@/components/common/Form/Select';
 import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
 import { useCopy } from '@/hooks/useCopy';
+import { CopyButton } from '@/components/common/Form/CopyButton';
 
 export const UrlEncode: FC = () => {
   const title = 'URLエンコード';
@@ -38,16 +28,7 @@ export const UrlEncode: FC = () => {
               <PanelGroup bordered>
                 <Panel
                   bordered
-                  header={
-                    <PanelHeader
-                      title="入力"
-                      right={
-                        <ButtonToolbar>
-                          <ClearButton name="input" />
-                        </ButtonToolbar>
-                      }
-                    />
-                  }
+                  header={<PanelHeader title="入力" right={<ClearButton name="input" />} />}
                 >
                   <Controller
                     render={({ field }) => <Editor {...field} />}
@@ -81,16 +62,7 @@ export const UrlEncode: FC = () => {
                 header={
                   <PanelHeader
                     title="エンコード"
-                    right={
-                      <ButtonToolbar>
-                        <IconButton
-                          icon={<CopyIcon />}
-                          placement="right"
-                          size="xs"
-                          onClick={copy(output)}
-                        ></IconButton>
-                      </ButtonToolbar>
-                    }
+                    right={<CopyButton size="small" copyText={output} />}
                   />
                 }
               >