migrate Switch to TS (#991)

lidord-wix · web-flow · commit 5554e438fdfe · 2020-10-21T16:46:36.000+03:00
* migrate Switch to TS

* TS fixes

* fix style type
diff --git a/demo/src/screens/componentScreens/SwitchScreen.tsx b/demo/src/screens/componentScreens/SwitchScreen.tsx
@@ -15,20 +15,20 @@ class SwitchScreen extends Component {
     return (
       <View flex bottom padding-20>
         <View flex center>
-          <Switch testID="switch" value={this.state.value1} onValueChange={value1 => this.setState({value1})} style={{marginBottom: 20}}/>
+          <Switch testID="switch" value={this.state.value1} onValueChange={(value1: boolean) => this.setState({value1})} style={{marginBottom: 20}}/>
           <Switch
             onColor={Colors.purple30}
             offColor={Colors.purple60}
             value={this.state.value2}
-            onValueChange={value2 => this.setState({value2})}
+            onValueChange={(value2: boolean) => this.setState({value2})}
             style={{marginBottom: 20}}
           />
           <Switch
             width={80}
             height={38}
             thumbSize={34}
             value={this.state.value3}
-            onValueChange={value3 => this.setState({value3})}
+            onValueChange={(value3: boolean) => this.setState({value3})}
             style={{marginBottom: 20}}
           />
           <Switch
@@ -39,21 +39,21 @@ class SwitchScreen extends Component {
             offColor={Colors.dark60}
             thumbColor={Colors.dark10}
             value={this.state.value4}
-            onValueChange={value4 => this.setState({value4})}
+            onValueChange={(value4: boolean) => this.setState({value4})}
             style={{marginBottom: 20}}
           />
           <View row marginB-20>
             <Text text70 centerV>Disabled: </Text>
             <Switch
               disabled
               value={this.state.value5}
-              onValueChange={value5 => this.setState({value5})}
+              onValueChange={(value5: boolean) => this.setState({value5})}
               style={{marginRight: 10}}
             />
             <Switch
               disabled
               value={!this.state.value5}
-              onValueChange={value5 => this.setState({value5})}
+              onValueChange={(value5: boolean) => this.setState({value5})}
             />
           </View>
         </View>
diff --git a/generatedTypes/components/switch/index.d.ts b/generatedTypes/components/switch/index.d.ts
@@ -0,0 +1,54 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export declare type SwitchProps = {
+    /**
+     * The value of the switch. If true the switch will be turned on. Default value is false
+     */
+    value?: boolean;
+    /**
+     * Invoked with the new value when the value changes
+     */
+    onValueChange?: (value: boolean) => void;
+    /**
+     * Whether the switch should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * The Switch width
+     */
+    width?: number;
+    /**
+     * The Switch height
+     */
+    height?: number;
+    /**
+     * The Switch background color when it's turned on
+     */
+    onColor?: string;
+    /**
+     * The Switch background color when it's turned off
+     */
+    offColor?: string;
+    /**
+     * The Switch background color when it's disabled
+     */
+    disabledColor?: string;
+    /**
+     * The Switch's thumb color
+     */
+    thumbColor?: string;
+    /**
+     * The Switch's thumb size (width & height)
+     */
+    thumbSize?: number;
+    /**
+     * The Switch's thumb style
+     */
+    thumbStyle?: object | number | [];
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+declare const _default: React.ComponentClass<SwitchProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;
diff --git a/generatedTypes/index.d.ts b/generatedTypes/index.d.ts
@@ -21,6 +21,7 @@ export {default as Image, ImageProps} from './components/image';
 export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as RadioButton, RadioButtonPropTypes} from './components/radioButton/RadioButton';
 export {default as RadioGroup, RadioGroupPropTypes} from './components/radioButton/RadioGroup';
+export {default as Switch, SwitchProps} from './components/switch';
 export {default as TabBar} from './components/TabBar';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';
 export {default as ExpandableSection, ExpandableSectionProps } from './components/ExpandableSection';
@@ -98,7 +99,6 @@ export const SafeAreaInsetsManager;
 export const SafeAreaSpacerView;
 export const ScrollBar;
 export const SelectableComponent;
-export const Switch;
 export const TabController;
 export const TextField;
 export const Wizard;
diff --git a/src/components/switch/index.tsx b/src/components/switch/index.tsx
@@ -1,87 +1,86 @@
 import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {StyleSheet, Animated, Easing} from 'react-native';
+import React, {Component} from 'react';
+import {StyleSheet, Animated, Easing, StyleProp, ViewStyle} from 'react-native';
 import {Constants} from '../../helpers';
 import {Colors, BorderRadiuses} from '../../style';
-import {BaseComponent} from '../../commons';
+import {asBaseComponent} from '../../commons/new';
 import TouchableOpacity from '../touchableOpacity';
 
 const INNER_PADDING = 2;
 const DEFAULT_WIDTH = 42;
 const DEFAULT_HEIGHT = 24;
 const DEFAULT_THUMB_SIZE = 20;
 
+export type SwitchProps = {
+  /**
+   * The value of the switch. If true the switch will be turned on. Default value is false
+   */
+  value?: boolean;
+  /**
+   * Invoked with the new value when the value changes
+   */
+  onValueChange?: (value: boolean) => void;
+  /**
+   * Whether the switch should be disabled
+   */
+  disabled?: boolean;
+  /**
+   * The Switch width
+   */
+  width?: number;
+  /**
+   * The Switch height
+   */
+  height?: number;
+  /**
+   * The Switch background color when it's turned on
+   */
+  onColor?: string;
+  /**
+   * The Switch background color when it's turned off
+   */
+  offColor?: string;
+  /**
+   * The Switch background color when it's disabled
+   */
+  disabledColor?: string;
+  /**
+   * The Switch's thumb color
+   */
+  thumbColor?: string;
+  /**
+   * The Switch's thumb size (width & height)
+   */
+  thumbSize?: number;
+  /**
+   * The Switch's thumb style
+   */
+  thumbStyle?: object | number | []; 
+  style?: StyleProp<ViewStyle>;
+  testID?: string; 
+}
+
 /**
  * Switch component for toggling boolean value related to some context
  */
-class Switch extends BaseComponent {
+class Switch extends Component<SwitchProps> {
   static displayName = 'Switch';
-
-  static propTypes = {
-    /**
-     * The value of the switch. If true the switch will be turned on. Default value is false
-     */
-    value: PropTypes.bool,
-    /**
-     * Invoked with the new value when the value changes
-     */
-    onValueChange: PropTypes.func,
-    /**
-     * Whether the switch should be disabled
-     */
-    disabled: PropTypes.bool,
-    /**
-     * The Switch width
-     */
-    width: PropTypes.number,
-    /**
-     * The Switch height
-     */
-    height: PropTypes.number,
-    /**
-     * The Switch background color when it's turned on
-     */
-    onColor: PropTypes.string,
-    /**
-     * The Switch background color when it's turned off
-     */
-    offColor: PropTypes.string,
-    /**
-     * The Switch background color when it's disabled
-     */
-    disabledColor: PropTypes.string,
-    /**
-     * The Switch's thumb color
-     */
-    thumbColor: PropTypes.string,
-    /**
-     * The Switch's thumb size (width & height)
-     */
-    thumbSize: PropTypes.number,
-    /**
-     * The Switch's thumb style
-     */
-    thumbStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array])
-  };
-
+  
   state = {
     thumbPosition: new Animated.Value(this.props.value ? 1 : 0)
   };
 
-  generateStyles() {
-    this.styles = createStyles(this.getThemeProps());
-  }
-
-  componentDidUpdate(prevProps) {
-    const {value} = this.getThemeProps();
+  styles = createStyles(this.props);
+  
+  componentDidUpdate(prevProps: SwitchProps) {
+    const {value} = this.props;
     if (prevProps.value !== value) {
       this.toggle(value);
     }
   }
 
   getAccessibilityProps() {
-    const {disabled, value} = this.getThemeProps();
+    const {disabled, value} = this.props;
 
     
     return {
@@ -92,7 +91,7 @@ class Switch extends BaseComponent {
     };
   }
 
-  toggle(value) {
+  toggle(value?: boolean) {
     const {thumbPosition} = this.state;
 
     Animated.timing(thumbPosition, {
@@ -104,15 +103,15 @@ class Switch extends BaseComponent {
   }
 
   onPress = () => {
-    const {disabled} = this.getThemeProps();
+    const {disabled} = this.props;
 
     if (!disabled) {
-      _.invoke(this.getThemeProps(), 'onValueChange', !this.props.value);
+      _.invoke(this.props, 'onValueChange', !this.props.value);
     }
   };
 
   calcThumbOnPosition() {
-    const props = this.getThemeProps();
+    const props = this.props;
     const width = props.width || DEFAULT_WIDTH;
     const thumbSize = props.thumbSize || DEFAULT_THUMB_SIZE;
     let position = width - (2 * INNER_PADDING + thumbSize);
@@ -121,8 +120,8 @@ class Switch extends BaseComponent {
   }
 
   getSwitchStyle() {
-    const {value, onColor, offColor, style: propsStyle, disabled, disabledColor} = this.getThemeProps();
-    const style = [this.styles.switch];
+    const {value, onColor, offColor, style: propsStyle, disabled, disabledColor} = this.props;
+    const style: SwitchProps['style'] = [this.styles.switch];
 
     if (disabled) {
       style.push(disabledColor ? {backgroundColor: disabledColor} : this.styles.switchDisabled);
@@ -137,7 +136,7 @@ class Switch extends BaseComponent {
   }
 
   renderThumb() {
-    const {thumbStyle} = this.getThemeProps();
+    const {thumbStyle} = this.props;
     const {thumbPosition} = this.state;
 
     const interpolatedTranslateX = thumbPosition.interpolate({
@@ -153,9 +152,9 @@ class Switch extends BaseComponent {
   }
 
   render() {
-    const {...others} = this.getThemeProps();
-
+    const {...others} = this.props;
     return (
+      // @ts-ignore
       <TouchableOpacity
         {...this.getAccessibilityProps()}
         activeOpacity={1}
@@ -204,4 +203,4 @@ function createStyles({
   });
 }
 
-export default Switch;
+export default asBaseComponent<SwitchProps>(Switch);
diff --git a/src/index.ts b/src/index.ts
@@ -23,6 +23,7 @@ export {default as Image, ImageProps} from './components/image';
 export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as RadioButton, RadioButtonPropTypes} from './components/radioButton/RadioButton';
 export {default as RadioGroup, RadioGroupPropTypes} from './components/radioButton/RadioGroup';
+export {default as Switch, SwitchProps} from './components/switch';
 export {default as TabBar} from './components/TabBar';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';
 export {default as ExpandableSection, ExpandableSectionProps} from './components/expandableSection';
