Skip to content

Commit a1067bb

Browse files
itsrachelfishitsrachelfish
committed
deps: Installed rc-switch and terminal-web FormSwitch component
1 parent bf11e17 commit a1067bb

File tree

5 files changed

+158
-0
lines changed

5 files changed

+158
-0
lines changed

‎app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"qrcode.react": "^3.1.0",
4141
"rc-dialog": "^8.9.0",
4242
"rc-select": "11.5.0",
43+
"rc-switch": "^4.0.0",
4344
"rc-tooltip": "4.2.1",
4445
"react": "17.0.2",
4546
"react-dom": "17.0.2",

‎app/src/App.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
@import '../node_modules/rc-tooltip/assets/bootstrap_white.css';
1919
@import '../node_modules/rc-dialog/assets/index.css';
2020
@import './assets/styles/rc-select.scss';
21+
@import './assets/styles/rc-switch.scss';
2122

2223
// react-toastify styles
2324
@import '../node_modules/react-toastify/dist/ReactToastify.css';

‎app/src/assets/styles/rc-switch.scss‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
$switchPrefixCls: rc-switch;
2+
3+
$duration: 0.3s;
4+
5+
.rc-switch {
6+
position: relative;
7+
display: inline-block;
8+
box-sizing: border-box;
9+
width: 44px;
10+
height: 22px;
11+
line-height: 20px;
12+
padding: 0;
13+
vertical-align: middle;
14+
border-radius: 20px 20px;
15+
border: 1px solid #ccc;
16+
background-color: #ccc;
17+
cursor: pointer;
18+
transition: all $duration cubic-bezier(0.35, 0, 0.25, 1);
19+
20+
&-inner {
21+
color: #fff;
22+
font-size: 12px;
23+
position: absolute;
24+
left: 24px;
25+
top: 0;
26+
}
27+
28+
&:after {
29+
position: absolute;
30+
width: 18px;
31+
height: 18px;
32+
left: 2px;
33+
top: 1px;
34+
border-radius: 50% 50%;
35+
background-color: #fff;
36+
content: ' ';
37+
cursor: pointer;
38+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
39+
transform: scale(1);
40+
transition: left $duration cubic-bezier(0.35, 0, 0.25, 1);
41+
animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
42+
animation-duration: $duration;
43+
animation-name: rcSwitchOff;
44+
}
45+
46+
&:hover:after {
47+
transform: scale(1.1);
48+
animation-name: rcSwitchOn;
49+
}
50+
51+
&:focus {
52+
box-shadow: 0 0 0 2px tint(#2db7f5, 80%);
53+
outline: none;
54+
}
55+
56+
&-checked {
57+
border: 1px solid #87d068;
58+
background-color: #87d068;
59+
60+
.rc-switch-inner {
61+
left: 6px;
62+
}
63+
64+
&:after {
65+
left: 22px;
66+
}
67+
}
68+
69+
&-disabled {
70+
cursor: no-drop;
71+
background: #ccc;
72+
border-color: #ccc;
73+
74+
&:after {
75+
background: #9e9e9e;
76+
animation-name: none;
77+
cursor: no-drop;
78+
}
79+
80+
&:hover:after {
81+
transform: scale(1);
82+
animation-name: none;
83+
}
84+
}
85+
86+
&-label {
87+
display: inline-block;
88+
line-height: 20px;
89+
font-size: 14px;
90+
padding-left: 10px;
91+
vertical-align: middle;
92+
white-space: normal;
93+
pointer-events: none;
94+
user-select: text;
95+
}
96+
}
97+
98+
@keyframes rcSwitchOn {
99+
0% {
100+
transform: scale(1);
101+
}
102+
50% {
103+
transform: scale(1.25);
104+
}
105+
100% {
106+
transform: scale(1.1);
107+
}
108+
}
109+
110+
@keyframes rcSwitchOff {
111+
0% {
112+
transform: scale(1.1);
113+
}
114+
100% {
115+
transform: scale(1);
116+
}
117+
}

‎app/src/components/common/v2/FormSwitch.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import { observer } from 'mobx-react-lite';
3+
import styled from '@emotion/styled';
4+
import Switch from 'rc-switch';
5+
6+
const Styled = {
7+
Wrapper: styled.div``,
8+
Switch: styled(Switch)`
9+
&.rc-switch-checked {
10+
border: 1px solid ${props => props.theme.colors.iris};
11+
background-color: ${props => props.theme.colors.iris};
12+
}
13+
`,
14+
};
15+
16+
interface Props {
17+
checked?: boolean;
18+
onChange?: (checked: boolean) => void;
19+
}
20+
21+
const FormSelect: React.FC<Props> = ({ checked, onChange }) => {
22+
const { Wrapper, Switch } = Styled;
23+
return (
24+
<Wrapper>
25+
<Switch checked={checked} onChange={v => onChange && onChange(v)} />
26+
</Wrapper>
27+
);
28+
};
29+
30+
export default observer(FormSelect);

‎app/yarn.lock‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13005,6 +13005,15 @@ [email protected]:
1300513005
rc-virtual-list "^3.2.0"
1300613006
warning "^4.0.3"
1300713007

13008+
rc-switch@^4.0.0:
13009+
version "4.0.0"
13010+
resolved "https://registry.yarnpkg.com/rc-switch/-/rc-switch-4.0.0.tgz#55fbf99fc2d680791175037d379e170ba51fbe78"
13011+
integrity sha512-IfrYC99vN0gKaTyjQdqYuADU0eH00SAFHg3jOp8HrmUpJruhV1SohJzrCbPqPraZeX/6X/QKkdLfkdnUub05WA==
13012+
dependencies:
13013+
"@babel/runtime" "^7.10.1"
13014+
classnames "^2.2.1"
13015+
rc-util "^5.0.1"
13016+
1300813017
[email protected]:
1300913018
version "4.2.1"
1301013019
resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-4.2.1.tgz#c1a2d5017ee03a771a9301c0dfdb46dfdf8fef94"

0 commit comments

Comments
 (0)