Skip to content

Commit 5a04425

Browse files
su-usu-u
committed
Fix: ヘッダー周りのボタンを修正
1 parent 4cc7a59 commit 5a04425

9 files changed

Lines changed: 68 additions & 121 deletions

File tree

‎src/app/base64/Base64.tsx‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22
import React, { FC } from 'react';
33
import { FormProvider, Controller } from 'react-hook-form';
4-
import { Grid, Row, Col, Panel, ButtonToolbar } from 'rsuite';
4+
import { Grid, Row, Col, Panel } from 'rsuite';
55
import { AppLayout } from '@/Layout/App';
66
import { useBase64 } from '@/app/base64/useBase64';
77
import { Editor, ex } from '@/components/common/Editor';
@@ -23,16 +23,7 @@ export const Base64: FC = () => {
2323
<Col xs={24} md={12}>
2424
<Panel
2525
bordered
26-
header={
27-
<PanelHeader
28-
title="入力文字"
29-
right={
30-
<ButtonToolbar>
31-
<ClearButton name="input" />
32-
</ButtonToolbar>
33-
}
34-
/>
35-
}
26+
header={<PanelHeader title="入力文字" right={<ClearButton name="input" />} />}
3627
>
3728
<Controller
3829
render={({ field }) => <Editor {...field} ref={null} />}
@@ -47,11 +38,7 @@ export const Base64: FC = () => {
4738
header={
4839
<PanelHeader
4940
title="base64エンコード"
50-
right={
51-
<ButtonToolbar>
52-
<CopyButton copyText={output} />
53-
</ButtonToolbar>
54-
}
41+
right={<CopyButton size="small" copyText={output} />}
5542
/>
5643
}
5744
>

‎src/app/character_count/CharacterCount.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
'use client';
2-
import styled from '@emotion/styled';
32
import React, { FC } from 'react';
43
import { Controller, FormProvider } from 'react-hook-form';
5-
import { Col, Grid, Panel, Row, ButtonToolbar } from 'rsuite';
4+
import { Col, Grid, Panel, Row } from 'rsuite';
65
import { AppLayout } from '@/Layout/App';
76
import {
87
characterCountWithoutSpace,
@@ -52,14 +51,7 @@ export const CharacterCount: FC = () => {
5251
<Panel
5352
bordered
5453
header={
55-
<PanelHeader
56-
title="カウントする文字列"
57-
right={
58-
<ButtonToolbar>
59-
<ClearButton name="input" />
60-
</ButtonToolbar>
61-
}
62-
/>
54+
<PanelHeader title="カウントする文字列" right={<ClearButton name="input" />} />
6355
}
6456
>
6557
<Controller

‎src/app/character_replace/CharacterReplace.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,7 @@ export const CharacterReplace: FC = () => {
2929
<PanelGroup bordered>
3030
<Panel
3131
bordered
32-
header={
33-
<PanelHeader
34-
title="入力文字"
35-
right={
36-
<ButtonToolbar>
37-
<ClearButton name="input" />
38-
</ButtonToolbar>
39-
}
40-
/>
41-
}
32+
header={<PanelHeader title="入力文字" right={<ClearButton name="input" />} />}
4233
>
4334
<Controller
4435
render={({ field }) => <Editor {...field} ref={null} />}
@@ -74,11 +65,7 @@ export const CharacterReplace: FC = () => {
7465
header={
7566
<PanelHeader
7667
title="置換後"
77-
right={
78-
<ButtonToolbar>
79-
<CopyButton copyText={output} />
80-
</ButtonToolbar>
81-
}
68+
right={<CopyButton size="small" copyText={output} />}
8269
/>
8370
}
8471
>

‎src/app/date_converter/DateConverter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22
import React, { FC } from 'react';
33
import { Controller } from 'react-hook-form';
4-
import { Col, Grid, Panel, PanelGroup, Row, Form, InputPicker } from 'rsuite';
4+
import { Col, Grid, Panel, PanelGroup, Row, Form } from 'rsuite';
55
import { AppLayout } from '@/Layout/App';
66
import { useDateConverter } from '@/app/date_converter/useDateConverter';
77
import { DatePicker } from '@/components/common/Form/DatePicker';

‎src/app/diff/Diff.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
'use client';
22
import React, { FC } from 'react';
33
import { Controller, FormProvider } from 'react-hook-form';
4-
import { ButtonToolbar, Col, Grid, Panel, PanelGroup, Row, FlexboxGrid } from 'rsuite';
4+
import { ButtonToolbar, Col, Grid, Panel, PanelGroup, Row } from 'rsuite';
55
import { AppLayout } from '@/Layout/App';
66
import { DiffEditor } from '@/app/diff/DiffEditor';
77
import { useDiff } from '@/app/diff/useDiff';
88
import { ClearButton } from '@/components/common/Form/ClearButton';
9-
import { Input } from '@/components/common/Form/Input';
9+
import { TextArea } from '@/components/common/Form/TextArea';
1010
import { PageTitle } from '@/components/common/PageTitle';
1111
import { PanelHeader } from '@/components/common/PanelHeader';
1212

1313
export const Diff: FC = () => {
1414
const title = 'テキスト差分';
15-
const { methods, original, modified } = useDiff();
1615
const INPUT_ROWS = 10;
16+
const { methods, original, modified } = useDiff();
1717

1818
return (
1919
<FormProvider {...methods}>
@@ -37,7 +37,7 @@ export const Diff: FC = () => {
3737
}
3838
>
3939
<Controller
40-
render={({ field }) => <Input {...field} />}
40+
render={({ field }) => <TextArea rows={INPUT_ROWS} {...field} />}
4141
name="original"
4242
control={methods.control}
4343
/>
@@ -59,7 +59,7 @@ export const Diff: FC = () => {
5959
}
6060
>
6161
<Controller
62-
render={({ field }) => <Input {...field} />}
62+
render={({ field }) => <TextArea rows={INPUT_ROWS} {...field} />}
6363
name="modified"
6464
control={methods.control}
6565
/>

‎src/app/json_formatter/JsonFormatter.tsx‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22
import React, { FC } from 'react';
33
import { Controller, FormProvider } from 'react-hook-form';
4-
import { ButtonToolbar, Col, Grid, Panel, PanelGroup, Row } from 'rsuite';
4+
import { Col, Grid, Panel, PanelGroup, Row } from 'rsuite';
55
import { AppLayout } from '@/Layout/App';
66
import { useJsonFormatter } from '@/app/json_formatter/useJsonFormatter';
77
import { Editor, ex } from '@/components/common/Editor';
@@ -26,16 +26,7 @@ export const JsonFormatter: FC = () => {
2626
<PanelGroup bordered>
2727
<Panel
2828
bordered
29-
header={
30-
<PanelHeader
31-
title="入力文字"
32-
right={
33-
<ButtonToolbar>
34-
<ClearButton name="input" />
35-
</ButtonToolbar>
36-
}
37-
/>
38-
}
29+
header={<PanelHeader title="入力文字" right={<ClearButton name="input" />} />}
3930
>
4031
<Controller
4132
render={({ field }) => <Editor extensions={[ex.json]} {...field} />}
@@ -68,11 +59,7 @@ export const JsonFormatter: FC = () => {
6859
header={
6960
<PanelHeader
7061
title="フォーマット"
71-
right={
72-
<ButtonToolbar>
73-
<CopyButton copyText={output} />
74-
</ButtonToolbar>
75-
}
62+
right={<CopyButton size="small" copyText={output} />}
7663
/>
7764
}
7865
>

‎src/app/punycode/Punycode.tsx‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,22 @@
11
'use client';
2-
import CopyIcon from '@rsuite/icons/Copy';
32
import { Space } from 'antd';
4-
import { toASCII, encode } from 'punycode/';
53
import React, { FC } from 'react';
64
import { Controller, FormProvider } from 'react-hook-form';
7-
import { Col, Grid, InputGroup, Panel, PanelGroup, Row, ButtonToolbar } from 'rsuite';
5+
import { Col, Grid, Panel, PanelGroup, Row, ButtonToolbar } from 'rsuite';
86
import { AppLayout } from '@/Layout/App';
7+
import { usePunycode } from '@/app/punycode/usePunycode';
98
import { Editor } from '@/components/common/Editor';
109
import { ClearButton } from '@/components/common/Form/ClearButton';
1110
import { CopyButton } from '@/components/common/Form/CopyButton';
12-
import { Input } from '@/components/common/Form/Input';
13-
import { useCustomForm } from '@/components/common/Form/useCustomForm';
11+
import { TextArea } from '@/components/common/Form/TextArea';
1412
import { PageTitle } from '@/components/common/PageTitle';
1513
import { PanelHeader } from '@/components/common/PanelHeader';
16-
import { useCopy } from '@/hooks/useCopy';
17-
18-
type PunycodeForm = {
19-
input: string;
20-
};
2114

2215
export const Punycode: FC = () => {
2316
const title = 'punycode変換（日本語ドメイン変換）';
24-
const methods = useCustomForm<PunycodeForm>({
25-
defaultValues: {
26-
input: '',
27-
},
28-
});
29-
const { control, watch } = methods;
30-
const { copy } = useCopy();
31-
32-
const converted_ascii = toASCII(watch('input', ''));
33-
const converted_punycode = encode(watch('input', ''));
17+
const INPUT_ROWS = 5;
18+
const { methods, converted_ascii, converted_punycode } = usePunycode();
19+
const { control } = methods;
3420

3521
return (
3622
<FormProvider {...methods}>
@@ -61,16 +47,28 @@ export const Punycode: FC = () => {
6147
</Col>
6248
<Col xs={24} md={12}>
6349
<PanelGroup bordered>
64-
<Panel header={<PanelHeader title="ドメイン変換" />}>
50+
<Panel
51+
header={
52+
<PanelHeader
53+
title="ドメイン変換"
54+
right={<CopyButton size="small" copyText={converted_punycode} />}
55+
/>
56+
}
57+
>
6558
<Space.Compact block>
66-
<Input readOnly value={converted_ascii} />
67-
<CopyButton copyText={converted_punycode} />
59+
<TextArea rows={INPUT_ROWS} readOnly value={converted_ascii} />
6860
</Space.Compact>
6961
</Panel>
70-
<Panel header={<PanelHeader title="punycode変換" />}>
62+
<Panel
63+
header={
64+
<PanelHeader
65+
title="punycode変換"
66+
right={<CopyButton size="small" copyText={converted_punycode} />}
67+
/>
68+
}
69+
>
7170
<Space.Compact block>
72-
<Input readOnly value={converted_punycode} />
73-
<CopyButton copyText={converted_punycode} />
71+
<TextArea rows={INPUT_ROWS} readOnly value={converted_punycode} />
7472
</Space.Compact>
7573
</Panel>
7674
</PanelGroup>

‎src/app/punycode/usePunycode.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { toASCII, encode } from 'punycode/';
2+
import { useCustomForm } from '@/components/common/Form/useCustomForm';
3+
4+
type PunycodeForm = {
5+
input: string;
6+
};
7+
8+
export const usePunycode = () => {
9+
const methods = useCustomForm<PunycodeForm>({
10+
defaultValues: {
11+
input: '',
12+
},
13+
});
14+
const { watch } = methods;
15+
16+
const converted_ascii = toASCII(watch('input', ''));
17+
const converted_punycode = encode(watch('input', ''));
18+
19+
return {
20+
methods,
21+
converted_ascii,
22+
converted_punycode,
23+
};
24+
};

‎src/app/urlencode/UrlEncode.tsx‎

Lines changed: 4 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,7 @@
11
'use client';
2-
import CopyIcon from '@rsuite/icons/Copy';
32
import React, { FC } from 'react';
43
import { Controller, FormProvider } from 'react-hook-form';
5-
import {
6-
Col,
7-
Grid,
8-
Panel,
9-
Row,
10-
Form,
11-
ButtonToolbar,
12-
IconButton,
13-
PanelGroup,
14-
SelectPicker,
15-
} from 'rsuite';
4+
import { Col, Grid, Panel, Row, Form, PanelGroup } from 'rsuite';
165
import { AppLayout } from '@/Layout/App';
176
import { useUrlEncode } from '@/app/urlencode/useUrlEncode';
187
import { Editor } from '@/components/common/Editor';
@@ -22,6 +11,7 @@ import { Select } from '@/components/common/Form/Select';
2211
import { PageTitle } from '@/components/common/PageTitle';
2312
import { PanelHeader } from '@/components/common/PanelHeader';
2413
import { useCopy } from '@/hooks/useCopy';
14+
import { CopyButton } from '@/components/common/Form/CopyButton';
2515

2616
export const UrlEncode: FC = () => {
2717
const title = 'URLエンコード';
@@ -38,16 +28,7 @@ export const UrlEncode: FC = () => {
3828
<PanelGroup bordered>
3929
<Panel
4030
bordered
41-
header={
42-
<PanelHeader
43-
title="入力"
44-
right={
45-
<ButtonToolbar>
46-
<ClearButton name="input" />
47-
</ButtonToolbar>
48-
}
49-
/>
50-
}
31+
header={<PanelHeader title="入力" right={<ClearButton name="input" />} />}
5132
>
5233
<Controller
5334
render={({ field }) => <Editor {...field} />}
@@ -81,16 +62,7 @@ export const UrlEncode: FC = () => {
8162
header={
8263
<PanelHeader
8364
title="エンコード"
84-
right={
85-
<ButtonToolbar>
86-
<IconButton
87-
icon={<CopyIcon />}
88-
placement="right"
89-
size="xs"
90-
onClick={copy(output)}
91-
></IconButton>
92-
</ButtonToolbar>
93-
}
65+
right={<CopyButton size="small" copyText={output} />}
9466
/>
9567
}
9668
>

0 commit comments

Comments
 (0)