feat(playground): toggle playground add

akveo · Jan 18, 2019 · 02a51b9 · 02a51b9
1 parent 7ba2ca8
commit 02a51b9
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 16 deletions.
diff --git a/src/framework/ui/toggle/toggle.component.tsx b/src/framework/ui/toggle/toggle.component.tsx
@@ -224,14 +224,10 @@ export class Toggle extends React.Component<ToggleProps> {
 
   render() {
     const componentStyle: StyleType = this.getComponentStyle(this.props.themedStyle);
-    const {
-      disabled,
-      value,
-      style,
-    } = this.props;
+    const { disabled, value, style } = this.props;
     const interpolatedTintColor = this.switchAnimation.interpolate({
       inputRange: value ?
-        [-componentStyle.switchOffsetValue, 0] :[0, componentStyle.switchOffsetValue],
+        [-componentStyle.switchOffsetValue, 0] : [0, componentStyle.switchOffsetValue],
       outputRange: [
         componentStyle.colors.tint,
         componentStyle.colors.onTint,
@@ -242,7 +238,7 @@ export class Toggle extends React.Component<ToggleProps> {
       outputRange: [1, 0.01],
     });
     return (
-      <View style={[componentStyle.wrapper, styles.wrapper]}>
+      <View style={[componentStyle.wrapper, styles.wrapper, style]}>
         {!this.props.disabled && <View style={[styles.highlight, componentStyle.highlight]}/>}
         <Animated.View
           style={[
@@ -254,8 +250,10 @@ export class Toggle extends React.Component<ToggleProps> {
           <Animated.View style={[
             styles.ellipse,
             componentStyle.componentEllipse,
-            { transform: [{ scale: value ? returnScale : this.ellipseAnimation }],
-              backgroundColor: interpolatedTintColor, },
+            {
+              transform: [{ scale: value ? returnScale : this.ellipseAnimation }],
+              backgroundColor: interpolatedTintColor,
+            },
           ]}
           />
           <Animated.View style={[

diff --git a/src/playground/src/ui/screen/toggle.component.tsx b/src/playground/src/ui/screen/toggle.component.tsx
@@ -14,7 +14,10 @@ import { Toggle as ToggleComponent } from '@kitten/ui';
 type Props = & ThemedComponentProps & NavigationScreenProps;
 
 interface State {
-  value: boolean;
+  toggle1Checked: boolean;
+  toggle2Checked: boolean;
+  toggle3Checked: boolean;
+  toggle4Checked: boolean;
 }
 
 class Toggle extends React.Component<Props, State> {
@@ -24,17 +27,102 @@ class Toggle extends React.Component<Props, State> {
   };
 
   state: State = {
-    value: true,
+    toggle1Checked: false,
+    toggle2Checked: true,
+    toggle3Checked: false,
+    toggle4Checked: true,
+  };
+
+  onToggle1Change = () => {
+    this.setState({ toggle1Checked: !this.state.toggle1Checked });
+  };
+
+  onToggle2Change = () => {
+    this.setState({ toggle2Checked: !this.state.toggle2Checked });
+  };
+
+  onToggle3Change = () => {
+    this.setState({ toggle3Checked: !this.state.toggle3Checked });
+  };
+
+  onToggle4Change = () => {
+    this.setState({ toggle4Checked: !this.state.toggle4Checked });
   };
 
   render() {
     return (
       <View style={this.props.themedStyle.container}>
-        <ToggleComponent
-          value={this.state.value}
-          onValueChange={(value: boolean) => this.setState({value: !this.state.value})}
-          status='error'
-        />
+        <View style={this.props.themedStyle.containerSection}>
+          <Text style={this.props.themedStyle.textDescription}>Interactive</Text>
+          <View style={this.props.themedStyle.containerPreview}>
+            <ToggleComponent
+              value={this.state.toggle1Checked}
+              onValueChange={this.onToggle1Change}
+              style={this.props.themedStyle.component}
+            />
+            <ToggleComponent
+              value={this.state.toggle2Checked}
+              onValueChange={this.onToggle2Change}
+              style={this.props.themedStyle.component}
+            />
+            <ToggleComponent
+              value={this.state.toggle3Checked}
+              onValueChange={this.onToggle3Change}
+              disabled={true}
+              style={this.props.themedStyle.component}
+            />
+            <ToggleComponent
+              value={this.state.toggle4Checked}
+              onValueChange={this.onToggle4Change}
+              disabled={true}
+              style={this.props.themedStyle.component}
+            />
+          </View>
+        </View>
+        <View style={this.props.themedStyle.containerSection}>
+          <Text style={this.props.themedStyle.textDescription}>Error</Text>
+          <View style={this.props.themedStyle.containerPreview}>
+            <ToggleComponent
+              status='error'
+              style={this.props.themedStyle.component}
+            />
+            <ToggleComponent
+              status='error'
+              style={this.props.themedStyle.component}
+              value={true}
+            />
+            <ToggleComponent
+              status='error'
+              style={this.props.themedStyle.component}
+              disabled={true}
+            />
+            <ToggleComponent
+              status='error'
+              style={this.props.themedStyle.component}
+              value={true}
+              disabled={true}
+            />
+          </View>
+        </View>
+        <View style={this.props.themedStyle.containerSection}>
+          <Text style={this.props.themedStyle.textDescription}>Size</Text>
+          <View style={this.props.themedStyle.containerPreview}>
+            <ToggleComponent
+              size='big'
+              style={this.props.themedStyle.component}
+              value={true}
+            />
+            <ToggleComponent
+              style={this.props.themedStyle.component}
+              value={true}
+            />
+            <ToggleComponent
+              size='small'
+              style={this.props.themedStyle.component}
+              value={true}
+            />
+          </View>
+        </View>
       </View>
     )
   }
@@ -46,4 +134,18 @@ export const ToggleScreen = withStyles(Toggle, (theme: ThemeType) => ({
     paddingVertical: 8,
     paddingHorizontal: 16,
   },
+  containerSection: {
+    marginVertical: 16,
+  },
+  containerPreview: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 4,
+  },
+  textDescription: {
+    fontSize: 18,
+  },
+  component: {
+    marginHorizontal: 4,
+  },
 }));