Skip to content

Commit c7566ed

Browse files
penicillin0penicillin0
committed
component 分けた
1 parent 7c60cf4 commit c7566ed

File tree

2 files changed

+163
-139
lines changed

2 files changed

+163
-139
lines changed

‎src/components/Console.tsx‎

Lines changed: 7 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
11
import React, { useEffect, useState } from 'react';
2-
import { IconContext } from 'react-icons';
3-
import { MdOutlineColorLens } from 'react-icons/md';
4-
import Select, { ActionMeta, SingleValue } from 'react-select';
5-
import Switch from 'react-switch';
62
import styled from 'styled-components';
73
import { IndentOptionsType } from '../utils/types';
84
import { Demonstration } from './Demonstration';
9-
10-
const options = [
11-
{ value: '●', label: '●' },
12-
{ value: '○', label: '○' },
13-
{ value: '■', label: '■' },
14-
{ value: '□', label: '□' },
15-
];
5+
import { MakerConsole } from './MakerConsole';
166

177
const initialState: IndentOptionsType = [
188
{ value: '●', label: 'indent-1' },
@@ -67,143 +57,21 @@ export const Console: React.FC<Props> = () => {
6757
});
6858
};
6959

70-
const handleOnChange = (
71-
newValue: SingleValue<{
72-
value: string;
73-
label: string;
74-
}>,
75-
metaAction: ActionMeta<{
76-
value: string;
77-
label: string;
78-
}>
79-
) => {
80-
// eslint-disable-next-line
81-
const value = newValue!.value;
82-
const label = metaAction.name;
83-
84-
const newIndentOptions = indentOptions.map((option) => {
85-
if (option.label === label) {
86-
return { value, label };
87-
}
88-
return option;
89-
});
90-
91-
setIndentOptions(newIndentOptions);
92-
93-
chrome.storage.local.set({ scrapboxIndentOption: newIndentOptions });
94-
95-
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
96-
tabs.forEach((tab) => {
97-
if (tab.url === undefined || tab.id === undefined) return;
98-
const url = new URL(tab.url);
99-
if (url.hostname === 'scrapbox.io') {
100-
chrome.tabs.sendMessage(tab.id, 'scrapbox_list_maker');
101-
}
102-
});
103-
});
104-
};
105-
10660
return (
10761
<MainContainer>
108-
<TitleWrapper>
109-
<Title>Select Favorite Maker</Title>
110-
<SwitchLabel>
111-
<Switch
112-
checked={indentLining}
113-
onChange={handleIndentLiningChange}
114-
onColor="#00b428"
115-
boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
116-
height={16}
117-
width={30}
118-
handleDiameter={18}
119-
checkedIcon={false}
120-
uncheckedIcon={false}
121-
/>
122-
<Spacer width={6} />
123-
<span>Indent Visible</span>
124-
</SwitchLabel>
125-
<IconContext.Provider
126-
value={{ size: '20px', style: { padding: '2px' } }}
127-
>
128-
<ColorLens />
129-
</IconContext.Provider>
130-
</TitleWrapper>
131-
<IndentContainer>
132-
{indentOptions.map((indentOption) => {
133-
const spaceNum = +indentOption.label.replace(/[^0-9]/g, '') - 1;
134-
135-
return (
136-
<>
137-
<IndentRow spaceNum={spaceNum}>
138-
<Select
139-
value={{
140-
value: indentOption.value,
141-
label: indentOption.value,
142-
}}
143-
onChange={handleOnChange}
144-
key={indentOption.label}
145-
name={indentOption.label}
146-
options={options}
147-
></Select>
148-
<Label>{indentOption.label}</Label>
149-
</IndentRow>
150-
</>
151-
);
152-
})}
153-
</IndentContainer>
62+
<MakerConsole
63+
indentOptions={indentOptions}
64+
setIndentOptions={setIndentOptions}
65+
indentLining={indentLining}
66+
handleIndentLiningChange={handleIndentLiningChange}
67+
/>
15468
<Demonstration hasLine={indentLining} indentOptions={indentOptions} />
15569
</MainContainer>
15670
);
15771
};
15872

159-
const ColorLens = styled(MdOutlineColorLens)`
160-
color: #00b428;
161-
:hover {
162-
color: #b4008c;
163-
cursor: pointer;
164-
}
165-
`;
166-
16773
const MainContainer = styled.div`
16874
background-color: #dcdde0;
16975
padding: 4px;
17076
padding-bottom: 8px;
17177
`;
172-
173-
const Spacer = styled.div<{ width: number }>`
174-
width: ${(props) => props.width}px;
175-
`;
176-
177-
const TitleWrapper = styled.div`
178-
display: flex;
179-
align-items: center;
180-
`;
181-
182-
const Title = styled.div`
183-
font-size: 16px;
184-
text-align: left;
185-
margin: 10px 12px;
186-
`;
187-
188-
const SwitchLabel = styled.label`
189-
margin-left: 8px;
190-
display: flex;
191-
align-items: center;
192-
`;
193-
194-
const Label = styled.div`
195-
font-size: 14px;
196-
margin-left: 12px;
197-
`;
198-
199-
const IndentContainer = styled.div`
200-
margin: 0px 10px;
201-
`;
202-
203-
const IndentRow = styled.div<{ spaceNum: number }>`
204-
margin-left: ${(props) => `${props.spaceNum * 30}px`};
205-
margin-top: 4px;
206-
margin-bottom: 4px;
207-
display: flex;
208-
align-items: center;
209-
`;

‎src/components/MakerConsole.tsx‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React from 'react';
2+
import { IconContext } from 'react-icons';
3+
import { MdOutlineColorLens } from 'react-icons/md';
4+
import Select, { ActionMeta, SingleValue } from 'react-select';
5+
import Switch from 'react-switch';
6+
import styled from 'styled-components';
7+
import { IndentOptionsType } from '../utils/types';
8+
9+
const options = [
10+
{ value: '●', label: '●' },
11+
{ value: '○', label: '○' },
12+
{ value: '■', label: '■' },
13+
{ value: '□', label: '□' },
14+
];
15+
16+
type Props = {
17+
indentOptions: IndentOptionsType;
18+
setIndentOptions: React.Dispatch<React.SetStateAction<IndentOptionsType>>;
19+
indentLining: boolean;
20+
handleIndentLiningChange: (checked: boolean) => void;
21+
};
22+
23+
export const MakerConsole: React.FC<Props> = (props) => {
24+
const handleOnChange = (
25+
newValue: SingleValue<{
26+
value: string;
27+
label: string;
28+
}>,
29+
metaAction: ActionMeta<{
30+
value: string;
31+
label: string;
32+
}>
33+
) => {
34+
// eslint-disable-next-line
35+
const value = newValue!.value;
36+
const label = metaAction.name;
37+
38+
const newIndentOptions = props.indentOptions.map((option) => {
39+
if (option.label === label) {
40+
return { value, label };
41+
}
42+
return option;
43+
});
44+
45+
props.setIndentOptions(newIndentOptions);
46+
47+
chrome.storage.local.set({ scrapboxIndentOption: newIndentOptions });
48+
49+
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
50+
tabs.forEach((tab) => {
51+
if (tab.url === undefined || tab.id === undefined) return;
52+
const url = new URL(tab.url);
53+
if (url.hostname === 'scrapbox.io') {
54+
chrome.tabs.sendMessage(tab.id, 'scrapbox_list_maker');
55+
}
56+
});
57+
});
58+
};
59+
60+
return (
61+
<>
62+
<TitleWrapper>
63+
<Title>Select Favorite Maker</Title>
64+
<SwitchLabel>
65+
<Switch
66+
checked={props.indentLining}
67+
onChange={props.handleIndentLiningChange}
68+
onColor="#00b428"
69+
boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
70+
height={16}
71+
width={30}
72+
handleDiameter={18}
73+
checkedIcon={false}
74+
uncheckedIcon={false}
75+
/>
76+
<Spacer width={6} />
77+
<span>Indent Visible</span>
78+
</SwitchLabel>
79+
<IconContext.Provider
80+
value={{ size: '20px', style: { padding: '2px' } }}
81+
>
82+
<ColorLens />
83+
</IconContext.Provider>
84+
</TitleWrapper>
85+
<IndentContainer>
86+
{props.indentOptions.map((indentOption) => {
87+
const spaceNum = +indentOption.label.replace(/[^0-9]/g, '') - 1;
88+
89+
return (
90+
<>
91+
<IndentRow spaceNum={spaceNum}>
92+
<Select
93+
value={{
94+
value: indentOption.value,
95+
label: indentOption.value,
96+
}}
97+
onChange={handleOnChange}
98+
key={indentOption.label}
99+
name={indentOption.label}
100+
options={options}
101+
></Select>
102+
<Label>{indentOption.label}</Label>
103+
</IndentRow>
104+
</>
105+
);
106+
})}
107+
</IndentContainer>
108+
</>
109+
);
110+
};
111+
112+
const TitleWrapper = styled.div`
113+
display: flex;
114+
align-items: center;
115+
`;
116+
117+
const Title = styled.div`
118+
font-size: 16px;
119+
text-align: left;
120+
margin: 10px 12px;
121+
`;
122+
123+
const ColorLens = styled(MdOutlineColorLens)`
124+
color: #00b428;
125+
:hover {
126+
color: #b4008c;
127+
cursor: pointer;
128+
}
129+
`;
130+
131+
const SwitchLabel = styled.label`
132+
margin-left: 8px;
133+
display: flex;
134+
align-items: center;
135+
`;
136+
137+
const IndentContainer = styled.div`
138+
margin: 0px 10px;
139+
`;
140+
141+
const Spacer = styled.div<{ width: number }>`
142+
width: ${(props) => props.width}px;
143+
`;
144+
145+
const IndentRow = styled.div<{ spaceNum: number }>`
146+
margin-left: ${(props) => `${props.spaceNum * 30}px`};
147+
margin-top: 4px;
148+
margin-bottom: 4px;
149+
display: flex;
150+
align-items: center;
151+
`;
152+
153+
const Label = styled.div`
154+
font-size: 14px;
155+
margin-left: 12px;
156+
`;

0 commit comments

Comments
 (0)