Skip to content

Commit d88b048

Browse files
32penkin32penkin
authored
refactor(ui): toggle icon refactor (#310)
1 parent 6b4d0f4 commit d88b048

File tree

4 files changed

+108
-28
lines changed

4 files changed

+108
-28
lines changed

‎src/framework/ui/drawable/checkmark/checkmark.component.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export class CheckMark extends React.Component<Props> {
2727
},
2828
// the dependence of the variables was determined experimentally. Changes may be needed later.
2929
shape: {
30-
width: source.width * 0.25,
30+
width: source.width * 0.2,
3131
height: source.height * 0.833,
3232
borderTopLeftRadius: source.height * 0.333,
3333
borderTopRightRadius: source.height * 0.333,

‎src/framework/ui/toggle/toggle.component.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -167,15 +167,14 @@ export class Toggle extends React.Component<Props> {
167167
},
168168
switchOffsetValue: container.offsetValue,
169169
thumbComponentSize: thumbComponentSize,
170-
checkMarkSize: container.iconSize,
171170
colors: {
172171
onTint: container.borderColor,
173172
thumb: thumb.backgroundColor,
174173
tint: container.tintColor,
175174
},
176-
checkmark: {
177-
width: container.iconSize,
178-
height: container.iconSize,
175+
checkMark: {
176+
width: thumbComponentSize / 2,
177+
height: thumbComponentSize / 2,
179178
},
180179
};
181180
};
@@ -295,7 +294,7 @@ export class Toggle extends React.Component<Props> {
295294
},
296295
]}>
297296
<CheckMark
298-
style={[componentStyle.checkmark, { backgroundColor: interpolatedCheckColor }]}
297+
style={[componentStyle.checkMark, { backgroundColor: interpolatedCheckColor }]}
299298
isAnimated={true}
300299
/>
301300
</Animated.View>

‎src/framework/ui/toggle/toggle.spec.tsx.snap

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,8 @@ exports[`@toggle: matches snapshot active 1`] = `
165165
style={
166166
Array [
167167
Object {
168-
"height": undefined,
169-
"width": undefined,
168+
"height": 14.5,
169+
"width": 14.5,
170170
},
171171
Object {
172172
"backgroundColor": "rgba(255, 255, 255, 1)",
@@ -345,8 +345,8 @@ exports[`@toggle: matches snapshot active checked 1`] = `
345345
style={
346346
Array [
347347
Object {
348-
"height": undefined,
349-
"width": undefined,
348+
"height": 14.5,
349+
"width": 14.5,
350350
},
351351
Object {
352352
"backgroundColor": "rgba(51, 102, 255, 1)",
@@ -525,8 +525,8 @@ exports[`@toggle: matches snapshot active checked: checked 1`] = `
525525
style={
526526
Array [
527527
Object {
528-
"height": undefined,
529-
"width": undefined,
528+
"height": 14.5,
529+
"width": 14.5,
530530
},
531531
Object {
532532
"backgroundColor": "rgba(51, 102, 255, 1)",
@@ -705,8 +705,8 @@ exports[`@toggle: matches snapshot active: default 1`] = `
705705
style={
706706
Array [
707707
Object {
708-
"height": undefined,
709-
"width": undefined,
708+
"height": 14.5,
709+
"width": 14.5,
710710
},
711711
Object {
712712
"backgroundColor": "rgba(255, 255, 255, 1)",
@@ -885,8 +885,8 @@ exports[`@toggle: matches snapshot checked 1`] = `
885885
style={
886886
Array [
887887
Object {
888-
"height": undefined,
889-
"width": undefined,
888+
"height": 14.5,
889+
"width": 14.5,
890890
},
891891
Object {
892892
"backgroundColor": "rgba(51, 102, 255, 1)",
@@ -1049,8 +1049,8 @@ exports[`@toggle: matches snapshot checked disabled 1`] = `
10491049
style={
10501050
Array [
10511051
Object {
1052-
"height": undefined,
1053-
"width": undefined,
1052+
"height": 14.5,
1053+
"width": 14.5,
10541054
},
10551055
Object {
10561056
"backgroundColor": "rgba(137, 146, 163, 1)",
@@ -1229,8 +1229,8 @@ exports[`@toggle: matches snapshot default 1`] = `
12291229
style={
12301230
Array [
12311231
Object {
1232-
"height": undefined,
1233-
"width": undefined,
1232+
"height": 14.5,
1233+
"width": 14.5,
12341234
},
12351235
Object {
12361236
"backgroundColor": "rgba(255, 255, 255, 1)",
@@ -1393,8 +1393,8 @@ exports[`@toggle: matches snapshot disabled 1`] = `
13931393
style={
13941394
Array [
13951395
Object {
1396-
"height": undefined,
1397-
"width": undefined,
1396+
"height": 14.5,
1397+
"width": 14.5,
13981398
},
13991399
Object {
14001400
"backgroundColor": "rgba(255, 255, 255, 1)",

‎src/playground/src/ui/screen/toggle.component.tsx

Lines changed: 87 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ class Toggle extends React.Component<Props, State> {
5959
return (
6060
<View style={this.props.themedStyle.container}>
6161
<View style={this.props.themedStyle.containerSection}>
62-
<Text style={this.props.themedStyle.textDescription}>Interactive</Text>
62+
<Text style={this.props.themedStyle.textDescription}>Primary</Text>
6363
<View style={this.props.themedStyle.containerPreview}>
6464
<ToggleComponent
6565
value={this.state.toggle1Checked}
@@ -86,26 +86,107 @@ class Toggle extends React.Component<Props, State> {
8686
</View>
8787
</View>
8888
<View style={this.props.themedStyle.containerSection}>
89-
<Text style={this.props.themedStyle.textDescription}>Error</Text>
89+
<Text style={this.props.themedStyle.textDescription}>Danger</Text>
9090
<View style={this.props.themedStyle.containerPreview}>
9191
<ToggleComponent
92-
status='error'
92+
status='danger'
9393
style={this.props.themedStyle.component}
9494
value={this.state.toggleErrorChecked}
9595
onValueChange={this.onToggleErrorChange}
9696
/>
9797
<ToggleComponent
98-
status='error'
98+
status='danger'
9999
style={this.props.themedStyle.component}
100100
value={true}
101101
/>
102102
<ToggleComponent
103-
status='error'
103+
status='danger'
104104
style={this.props.themedStyle.component}
105105
disabled={true}
106106
/>
107107
<ToggleComponent
108-
status='error'
108+
status='danger'
109+
style={this.props.themedStyle.component}
110+
value={true}
111+
disabled={true}
112+
/>
113+
</View>
114+
</View>
115+
<View style={this.props.themedStyle.containerSection}>
116+
<Text style={this.props.themedStyle.textDescription}>Success</Text>
117+
<View style={this.props.themedStyle.containerPreview}>
118+
<ToggleComponent
119+
status='success'
120+
style={this.props.themedStyle.component}
121+
value={this.state.toggleErrorChecked}
122+
onValueChange={this.onToggleErrorChange}
123+
/>
124+
<ToggleComponent
125+
status='success'
126+
style={this.props.themedStyle.component}
127+
value={true}
128+
/>
129+
<ToggleComponent
130+
status='success'
131+
style={this.props.themedStyle.component}
132+
disabled={true}
133+
/>
134+
<ToggleComponent
135+
status='success'
136+
style={this.props.themedStyle.component}
137+
value={true}
138+
disabled={true}
139+
/>
140+
</View>
141+
</View>
142+
<View style={this.props.themedStyle.containerSection}>
143+
<Text style={this.props.themedStyle.textDescription}>Warning</Text>
144+
<View style={this.props.themedStyle.containerPreview}>
145+
<ToggleComponent
146+
status='warning'
147+
style={this.props.themedStyle.component}
148+
value={this.state.toggleErrorChecked}
149+
onValueChange={this.onToggleErrorChange}
150+
/>
151+
<ToggleComponent
152+
status='warning'
153+
style={this.props.themedStyle.component}
154+
value={true}
155+
/>
156+
<ToggleComponent
157+
status='warning'
158+
style={this.props.themedStyle.component}
159+
disabled={true}
160+
/>
161+
<ToggleComponent
162+
status='warning'
163+
style={this.props.themedStyle.component}
164+
value={true}
165+
disabled={true}
166+
/>
167+
</View>
168+
</View>
169+
<View style={this.props.themedStyle.containerSection}>
170+
<Text style={this.props.themedStyle.textDescription}>Info</Text>
171+
<View style={this.props.themedStyle.containerPreview}>
172+
<ToggleComponent
173+
status='info'
174+
style={this.props.themedStyle.component}
175+
value={this.state.toggleErrorChecked}
176+
onValueChange={this.onToggleErrorChange}
177+
/>
178+
<ToggleComponent
179+
status='info'
180+
style={this.props.themedStyle.component}
181+
value={true}
182+
/>
183+
<ToggleComponent
184+
status='info'
185+
style={this.props.themedStyle.component}
186+
disabled={true}
187+
/>
188+
<ToggleComponent
189+
status='info'
109190
style={this.props.themedStyle.component}
110191
value={true}
111192
disabled={true}

0 commit comments

Comments
 (0)