Skip to content

Commit 06cde0d

Browse files
penicillin0penicillin0
committed
Demonstration 分割
1 parent 8826a0a commit 06cde0d

File tree

3 files changed

+117
-82
lines changed

3 files changed

+117
-82
lines changed

‎src/components/Console.tsx‎

Lines changed: 6 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
22
import Select, { ActionMeta, SingleValue } from 'react-select';
33
import Switch from 'react-switch';
44
import styled from 'styled-components';
5+
import { IndentOptionsType } from '../utils/types';
6+
import { Demonstration } from './Demonstration';
57

68
const options = [
79
{ value: '●', label: '●' },
@@ -10,7 +12,7 @@ const options = [
1012
{ value: '□', label: '□' },
1113
];
1214

13-
const initialState = [
15+
const initialState: IndentOptionsType = [
1416
{ value: '●', label: 'indent-1' },
1517
{ value: '●', label: 'indent-2' },
1618
{ value: '●', label: 'indent-3' },
@@ -20,12 +22,8 @@ const initialState = [
2022
type Props = Record<string, never>;
2123

2224
export const Console: React.FC<Props> = () => {
23-
const [indentOptions, setIndentOptions] = useState<
24-
{
25-
value: string;
26-
label: string;
27-
}[]
28-
>(initialState);
25+
const [indentOptions, setIndentOptions] =
26+
useState<IndentOptionsType>(initialState);
2927
const [indentColoring, setIndentColoring] = useState<boolean>(false);
3028

3129
useEffect(() => {
@@ -146,35 +144,7 @@ export const Console: React.FC<Props> = () => {
146144
);
147145
})}
148146
</IndentContainer>
149-
<DemonstrationContainer>
150-
<Demonstration>
151-
<Title>Demonstration</Title>
152-
<IndentContainer>
153-
{indentOptions.map((indentOption) => {
154-
const spaceNum = +indentOption.label.replace(/[^0-9]/g, '') - 1;
155-
return [...Array(spaceNum + 1)].map((i) => {
156-
return (
157-
<Row key={i}>
158-
{[...Array(spaceNum)].map((j) => {
159-
return (
160-
<VerticalLineIndentContainer key={j}>
161-
{indentColoring && <VerticalLine />}
162-
<Indent isGey={indentColoring} />
163-
</VerticalLineIndentContainer>
164-
);
165-
})}
166-
<IndentContent>
167-
{indentOption.value}
168-
&nbsp;&nbsp;&nbsp;
169-
{indentOption.label}
170-
</IndentContent>
171-
</Row>
172-
);
173-
});
174-
})}
175-
</IndentContainer>
176-
</Demonstration>
177-
</DemonstrationContainer>
147+
<Demonstration isGrey={indentColoring} indentOptions={indentOptions} />
178148
</MainContainer>
179149
);
180150
};
@@ -211,30 +181,6 @@ const Label = styled.div`
211181
margin-left: 12px;
212182
`;
213183

214-
const VerticalLineIndentContainer = styled.div`
215-
position: relative;
216-
`;
217-
218-
const VerticalLine = styled.div`
219-
width: 0.2px;
220-
height: 27px;
221-
position: absolute;
222-
top: -40%;
223-
left: 52%;
224-
background-color: #dcdcdc;
225-
`;
226-
227-
const Indent = styled.div<{ isGey: boolean }>`
228-
width: 24px;
229-
height: 15px;
230-
background-color: ${(props) => (props.isGey ? '#f5f5f5' : '#fff')};
231-
`;
232-
233-
const Row = styled.div`
234-
display: flex;
235-
align-items: center;
236-
`;
237-
238184
const IndentContainer = styled.div`
239185
margin: 0px 10px;
240186
`;
@@ -246,25 +192,3 @@ const IndentRow = styled.div<{ spaceNum: number }>`
246192
display: flex;
247193
align-items: center;
248194
`;
249-
250-
const IndentContent = styled.div`
251-
margin-left: 6px;
252-
margin-top: 1.8px;
253-
margin-bottom: 1.8px;
254-
display: flex;
255-
align-items: center;
256-
`;
257-
258-
const DemonstrationContainer = styled.div`
259-
margin: 12px 14px;
260-
padding: 6px 0px;
261-
background-color: #fefefe;
262-
border-radius: 2%;
263-
box-shadow: 0px 5px 5px -3px #9e9e9e;
264-
`;
265-
266-
const Demonstration = styled.div`
267-
padding: 0px 12px;
268-
border-left: 5px solid #808b8c;
269-
box-sizing: border-box;
270-
`;

‎src/components/Demonstration.tsx‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { IndentOptionsType } from '../utils/types';
4+
5+
type Props = {
6+
isGrey: boolean;
7+
indentOptions: IndentOptionsType;
8+
};
9+
10+
export const Demonstration: React.FC<Props> = (props) => {
11+
return (
12+
<MainContainer>
13+
<Main>
14+
<Title>Demonstration</Title>
15+
<IndentContainer>
16+
{props.indentOptions.map((indentOption) => {
17+
const spaceNum = +indentOption.label.replace(/[^0-9]/g, '') - 1;
18+
return [...Array(spaceNum + 1)].map((i) => {
19+
return (
20+
<Row key={i}>
21+
{[...Array(spaceNum)].map((j) => {
22+
return (
23+
<VerticalLineIndentContainer key={j}>
24+
{props.isGrey && <VerticalLine />}
25+
<Indent isGrey={props.isGrey} />
26+
</VerticalLineIndentContainer>
27+
);
28+
})}
29+
<IndentContent>
30+
<IndentValue>{indentOption.value}</IndentValue>
31+
&nbsp;&nbsp;&nbsp;
32+
<IndentOption>{indentOption.label}</IndentOption>
33+
</IndentContent>
34+
</Row>
35+
);
36+
});
37+
})}
38+
</IndentContainer>
39+
</Main>
40+
</MainContainer>
41+
);
42+
};
43+
44+
const MainContainer = styled.div`
45+
margin: 12px 14px;
46+
padding: 6px 0px;
47+
background-color: #fefefe;
48+
border-radius: 2%;
49+
box-shadow: 0px 5px 5px -3px #9e9e9e;
50+
`;
51+
52+
const Main = styled.div`
53+
padding: 0px 12px;
54+
border-left: 5px solid #808b8c;
55+
box-sizing: border-box;
56+
`;
57+
58+
const Title = styled.div`
59+
font-size: 16px;
60+
text-align: left;
61+
margin: 10px 12px;
62+
`;
63+
64+
const IndentContainer = styled.div`
65+
margin: 0px 10px;
66+
`;
67+
68+
const Row = styled.div`
69+
display: flex;
70+
align-items: center;
71+
`;
72+
73+
const VerticalLineIndentContainer = styled.div`
74+
position: relative;
75+
`;
76+
77+
const VerticalLine = styled.div`
78+
width: 0.2px;
79+
height: 27px;
80+
position: absolute;
81+
top: -40%;
82+
left: 50%;
83+
background-color: #dcdcdc;
84+
`;
85+
86+
const Indent = styled.div<{ isGrey: boolean }>`
87+
width: 24px;
88+
height: 15px;
89+
background-color: ${(props) => (props.isGrey ? '#f5f5f5' : '#fff')};
90+
`;
91+
92+
const IndentContent = styled.div`
93+
margin-left: 6px;
94+
margin-top: 1.8px;
95+
margin-bottom: 1.8px;
96+
display: flex;
97+
align-items: center;
98+
`;
99+
100+
const IndentValue = styled.span`
101+
font-size: 10px;
102+
transform: scale(0.8);
103+
`;
104+
105+
const IndentOption = styled.span`
106+
font-size: 12px;
107+
`;

‎src/utils/types.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export type IndentOptionsType = {
2+
value: string;
3+
label: string;
4+
}[];

0 commit comments

Comments
 (0)