Skip to content

Commit

Permalink
refactor(ui): toggle icon refactor (#310)
Browse files Browse the repository at this point in the history
  • Loading branch information
@32penkin
32penkin authored Mar 15, 2019
1 parent 6b4d0f4 commit d88b048
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 28 deletions.
2 changes: 1 addition & 1 deletion src/framework/ui/drawable/checkmark/checkmark.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export class CheckMark extends React.Component<Props> {
},
// the dependence of the variables was determined experimentally. Changes may be needed later.
shape: {
width: source.width * 0.25,
width: source.width * 0.2,
height: source.height * 0.833,
borderTopLeftRadius: source.height * 0.333,
borderTopRightRadius: source.height * 0.333,
Expand Down
9 changes: 4 additions & 5 deletions src/framework/ui/toggle/toggle.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,15 +167,14 @@ export class Toggle extends React.Component<Props> {
},
switchOffsetValue: container.offsetValue,
thumbComponentSize: thumbComponentSize,
checkMarkSize: container.iconSize,
colors: {
onTint: container.borderColor,
thumb: thumb.backgroundColor,
tint: container.tintColor,
},
checkmark: {
width: container.iconSize,
height: container.iconSize,
checkMark: {
width: thumbComponentSize / 2,
height: thumbComponentSize / 2,
},
};
};
Expand Down Expand Up @@ -295,7 +294,7 @@ export class Toggle extends React.Component<Props> {
},
]}>
<CheckMark
style={[componentStyle.checkmark, { backgroundColor: interpolatedCheckColor }]}
style={[componentStyle.checkMark, { backgroundColor: interpolatedCheckColor }]}
isAnimated={true}
/>
</Animated.View>
Expand Down
32 changes: 16 additions & 16 deletions src/framework/ui/toggle/toggle.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,8 +165,8 @@ exports[`@toggle: matches snapshot active 1`] = `
style={
Array [
Object {
"height": undefined,
"width": undefined,
"height": 14.5,
"width": 14.5,
},
Object {
"backgroundColor": "rgba(255, 255, 255, 1)",
Expand Down Expand Up @@ -345,8 +345,8 @@ exports[`@toggle: matches snapshot active checked 1`] = `
style={
Array [
Object {
"height": undefined,
"width": undefined,
"height": 14.5,
"width": 14.5,
},
Object {
"backgroundColor": "rgba(51, 102, 255, 1)",
Expand Down Expand Up @@ -525,8 +525,8 @@ exports[`@toggle: matches snapshot active checked: checked 1`] = `
style={
Array [
Object {
"height": undefined,
"width": undefined,
"height": 14.5,
"width": 14.5,
},
Object {
"backgroundColor": "rgba(51, 102, 255, 1)",
Expand Down Expand Up @@ -705,8 +705,8 @@ exports[`@toggle: matches snapshot active: default 1`] = `
style={
Array [
Object {
"height": undefined,
"width": undefined,
"height": 14.5,
"width": 14.5,
},
Object {
"backgroundColor": "rgba(255, 255, 255, 1)",
Expand Down Expand Up @@ -885,8 +885,8 @@ exports[`@toggle: matches snapshot checked 1`] = `
style={
Array [
Object {
"height": undefined,
"width": undefined,
"height": 14.5,
"width": 14.5,
},
Object {
"backgroundColor": "rgba(51, 102, 255, 1)",
Expand Down Expand Up @@ -1049,8 +1049,8 @@ exports[`@toggle: matches snapshot checked disabled 1`] = `
style={
Array [
Object {
"height": undefined,
"width": undefined,
"height": 14.5,
"width": 14.5,
},
Object {
"backgroundColor": "rgba(137, 146, 163, 1)",
Expand Down Expand Up @@ -1229,8 +1229,8 @@ exports[`@toggle: matches snapshot default 1`] = `
style={
Array [
Object {
"height": undefined,
"width": undefined,
"height": 14.5,
"width": 14.5,
},
Object {
"backgroundColor": "rgba(255, 255, 255, 1)",
Expand Down Expand Up @@ -1393,8 +1393,8 @@ exports[`@toggle: matches snapshot disabled 1`] = `
style={
Array [
Object {
"height": undefined,
"width": undefined,
"height": 14.5,
"width": 14.5,
},
Object {
"backgroundColor": "rgba(255, 255, 255, 1)",
Expand Down
93 changes: 87 additions & 6 deletions src/playground/src/ui/screen/toggle.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ class Toggle extends React.Component<Props, State> {
return (
<View style={this.props.themedStyle.container}>
<View style={this.props.themedStyle.containerSection}>
<Text style={this.props.themedStyle.textDescription}>Interactive</Text>
<Text style={this.props.themedStyle.textDescription}>Primary</Text>
<View style={this.props.themedStyle.containerPreview}>
<ToggleComponent
value={this.state.toggle1Checked}
Expand All @@ -86,26 +86,107 @@ class Toggle extends React.Component<Props, State> {
</View>
</View>
<View style={this.props.themedStyle.containerSection}>
<Text style={this.props.themedStyle.textDescription}>Error</Text>
<Text style={this.props.themedStyle.textDescription}>Danger</Text>
<View style={this.props.themedStyle.containerPreview}>
<ToggleComponent
status='error'
status='danger'
style={this.props.themedStyle.component}
value={this.state.toggleErrorChecked}
onValueChange={this.onToggleErrorChange}
/>
<ToggleComponent
status='error'
status='danger'
style={this.props.themedStyle.component}
value={true}
/>
<ToggleComponent
status='error'
status='danger'
style={this.props.themedStyle.component}
disabled={true}
/>
<ToggleComponent
status='error'
status='danger'
style={this.props.themedStyle.component}
value={true}
disabled={true}
/>
</View>
</View>
<View style={this.props.themedStyle.containerSection}>
<Text style={this.props.themedStyle.textDescription}>Success</Text>
<View style={this.props.themedStyle.containerPreview}>
<ToggleComponent
status='success'
style={this.props.themedStyle.component}
value={this.state.toggleErrorChecked}
onValueChange={this.onToggleErrorChange}
/>
<ToggleComponent
status='success'
style={this.props.themedStyle.component}
value={true}
/>
<ToggleComponent
status='success'
style={this.props.themedStyle.component}
disabled={true}
/>
<ToggleComponent
status='success'
style={this.props.themedStyle.component}
value={true}
disabled={true}
/>
</View>
</View>
<View style={this.props.themedStyle.containerSection}>
<Text style={this.props.themedStyle.textDescription}>Warning</Text>
<View style={this.props.themedStyle.containerPreview}>
<ToggleComponent
status='warning'
style={this.props.themedStyle.component}
value={this.state.toggleErrorChecked}
onValueChange={this.onToggleErrorChange}
/>
<ToggleComponent
status='warning'
style={this.props.themedStyle.component}
value={true}
/>
<ToggleComponent
status='warning'
style={this.props.themedStyle.component}
disabled={true}
/>
<ToggleComponent
status='warning'
style={this.props.themedStyle.component}
value={true}
disabled={true}
/>
</View>
</View>
<View style={this.props.themedStyle.containerSection}>
<Text style={this.props.themedStyle.textDescription}>Info</Text>
<View style={this.props.themedStyle.containerPreview}>
<ToggleComponent
status='info'
style={this.props.themedStyle.component}
value={this.state.toggleErrorChecked}
onValueChange={this.onToggleErrorChange}
/>
<ToggleComponent
status='info'
style={this.props.themedStyle.component}
value={true}
/>
<ToggleComponent
status='info'
style={this.props.themedStyle.component}
disabled={true}
/>
<ToggleComponent
status='info'
style={this.props.themedStyle.component}
value={true}
disabled={true}
Expand Down

0 comments on commit d88b048

Please sign in to comment.