support rn0.62, up to 0.7.4

rilyu · Apr 1, 2020 · 8b9c5c0 · 8b9c5c0
1 parent 645a1db
commit 8b9c5c0
Show file tree

Hide file tree

Showing 20 changed files with 274 additions and 78 deletions.
diff --git a/components/AlbumView/AlbumSheet.js b/components/AlbumView/AlbumSheet.js
@@ -189,11 +189,13 @@ export default class AlbumSheet extends TransformView {
             toValue: valueX,
             easing: Easing.elastic(0),
             duration: 200,
+            useNativeDriver: false,
           }),
           Animated.timing(translateY, {
             toValue: valueY,
             easing: Easing.elastic(0),
             duration: 200,
+            useNativeDriver: false,
           }),          
         ]).start();
       } else {
@@ -219,6 +221,7 @@ export default class AlbumSheet extends TransformView {
         toValue: toValue,
         easing: Easing.elastic(0),
         duration: 200,
+        useNativeDriver: false,
       }).start();
     } else {
       translateX.setValue(toValue);

diff --git a/components/AlbumView/AlbumView.js b/components/AlbumView/AlbumView.js
@@ -83,7 +83,7 @@ export default class AlbumView extends Component {
     if (this.animateActions.length === 0) return;
 
     Animated.parallel(this.animateActions.map((item, index) =>
-      Animated.spring(item.variable, {toValue: item.toValue, friction: 9})
+      Animated.spring(item.variable, {toValue: item.toValue, friction: 9, useNativeDriver: false})
     )).start(e => {
       this.props.onChange && this.props.onChange(newIndex, index);
     });

diff --git a/components/Button/Button.js b/components/Button/Button.js
@@ -8,31 +8,26 @@ import {StyleSheet, Text, TouchableOpacity} from 'react-native';
 
 import Theme from 'teaset/themes/Theme';
 
-export default class Button extends TouchableOpacity {
+export default class Button extends Component {
 
   static propTypes = {
-    ...TouchableOpacity.propTypes,
     type: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'link']),
     size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs']),
     title: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number]),
     titleStyle: Text.propTypes.style,
   };
 
   static defaultProps = {
-    ...TouchableOpacity.defaultProps,
     type: 'default',
     size: 'md',
   };
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.disabled != this.props.disabled) {
-      let opacity = Theme.btnDisabledOpacity;
-      if (!this.props.disabled) {
-        let fs = StyleSheet.flatten(this.props.style);
-        opacity = fs && (fs.opacity || fs.opacity === 0) ? fs.opacity : 1;
-      }
-      this.state.anim.setValue(opacity);
-    }
+  measureInWindow(callback) {
+    this.refs.touchableOpacity && this.refs.touchableOpacity.measureInWindow(callback);
+  }
+
+  measure(callback) {
+    this.refs.touchableOpacity && this.refs.touchableOpacity.measure(callback);
   }
 
   buildStyle() {
@@ -104,7 +99,6 @@ export default class Button extends TouchableOpacity {
     if (disabled) {
       style.opacity = Theme.btnDisabledOpacity;
     }
-    this.state.anim._value = style.opacity === undefined ? 1 : style.opacity;
 
     return style;
   }
@@ -140,9 +134,11 @@ export default class Button extends TouchableOpacity {
   }
 
   render() {
-    let {style, type, size, title, titleStyle, children, ...others} = this.props;
+    let {style, type, size, title, titleStyle, disabled, activeOpacity, children, ...others} = this.props;
+    style = this.buildStyle();
+    if (disabled) activeOpacity = style.opacity;
     return (
-      <TouchableOpacity style={this.buildStyle()} {...others}>
+      <TouchableOpacity style={style} disabled={disabled} activeOpacity={activeOpacity} {...others} ref='touchableOpacity'>
         {this.renderTitle()}
       </TouchableOpacity>
     );

diff --git a/components/Checkbox/Checkbox.js b/components/Checkbox/Checkbox.js
@@ -8,10 +8,9 @@ import {StyleSheet, Text, Image, TouchableOpacity} from 'react-native';
 
 import Theme from 'teaset/themes/Theme';
 
-export default class Checkbox extends TouchableOpacity {
+export default class Checkbox extends Component {
 
   static propTypes = {
-    ...TouchableOpacity.propTypes,
     checked: PropTypes.bool,
     defaultChecked: PropTypes.bool,
     size: PropTypes.oneOf(['lg', 'md', 'sm']),
@@ -25,7 +24,6 @@ export default class Checkbox extends TouchableOpacity {
   };
 
   static defaultProps = {
-    ...TouchableOpacity.defaultProps,
     defaultChecked: false,
     size: 'md',
     checkedIcon: require('../../icons/checked.png'),
@@ -35,9 +33,10 @@ export default class Checkbox extends TouchableOpacity {
 
   constructor(props) {
     super(props);
-    this.state = Object.assign(this.state, {
+    this.state = {
+      ...this.state,
       checked: props.checked === true || props.checked === false ? props.checked : props.defaultChecked,
-    });
+    };
   }
 
   componentDidUpdate(prevProps) {
@@ -47,14 +46,6 @@ export default class Checkbox extends TouchableOpacity {
         this.setState({checked});
       }
     }
-    if (disabled !== prevProps.disabled) {
-      let opacity = Theme.cbDisabledOpacity;
-      if (!disabled) {
-        let fs = StyleSheet.flatten(this.props.style);
-        opacity = fs && (fs.opacity || fs.opacity === 0) ? fs.opacity : 1;
-      }
-      this.state.anim.setValue(opacity);
-    }
   }
 
   buildStyle() {
@@ -70,7 +61,6 @@ export default class Checkbox extends TouchableOpacity {
     if (disabled) {
       style.opacity = Theme.cbDisabledOpacity;
     }
-    this.state.anim._value = style.opacity === undefined ? 1 : style.opacity;
 
     return style;
   }
@@ -139,11 +129,14 @@ export default class Checkbox extends TouchableOpacity {
   }
 
   render() {
-    let {style, children, checked, defaultChecked, size, title, titleStyle, checkedIcon, checkedIconStyle, uncheckedIcon, uncheckedIconStyle, onChange, onPress, ...others} = this.props;
-
+    let {style, children, checked, defaultChecked, size, title, titleStyle, checkedIcon, checkedIconStyle, uncheckedIcon, uncheckedIconStyle, disabled, activeOpacity, onChange, onPress, ...others} = this.props;
+    style = this.buildStyle();
+    if (disabled) activeOpacity = style.opacity;
     return (
       <TouchableOpacity
-        style={this.buildStyle()}
+        style={style}
+        disabled={disabled}
+        activeOpacity={activeOpacity}
         onPress={e => {
           this.setState({checked: !checked});
           onChange && onChange(!checked);

diff --git a/components/Input/Input.js b/components/Input/Input.js
@@ -8,16 +8,14 @@ import {StyleSheet, TextInput} from 'react-native';
 
 import Theme from 'teaset/themes/Theme';
 
-export default class Input extends TextInput {
+export default class Input extends Component {
 
   static propTypes = {
-    ...TextInput.propTypes,
     size: PropTypes.oneOf(['lg', 'md', 'sm']),
     disabled: PropTypes.bool,
   };
 
   static defaultProps = {
-    ...TextInput.defaultProps,
     size: 'md',
     disabled: false,
     underlineColorAndroid: 'rgba(0, 0, 0, 0)',

diff --git a/components/ListRow/SwipeActionButton.js b/components/ListRow/SwipeActionButton.js
@@ -8,17 +8,15 @@ import {View, Text, TouchableOpacity} from 'react-native';
 
 import Theme from 'teaset/themes/Theme';
 
-export default class SwipeActionButton extends TouchableOpacity {
+export default class SwipeActionButton extends Component {
 
   static propTypes = {
-    ...TouchableOpacity.propTypes,
     type: PropTypes.oneOf(['default', 'danger']),
     title: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number]),
     titleStyle: Text.propTypes.style,
   };
 
   static defaultProps = {
-    ...TouchableOpacity.defaultProps,
     type: 'default',
   };
 

diff --git a/components/ListRow/SwipeTouchableOpacity.js b/components/ListRow/SwipeTouchableOpacity.js
@@ -4,21 +4,21 @@
 
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {StyleSheet, View, Text, TouchableOpacity, Animated} from 'react-native';
+import {StyleSheet, View, Text, Animated} from 'react-native';
 
 import Theme from 'teaset/themes/Theme';
 
+import TouchableOpacity from './TouchableOpacity';
+
 export default class SwipeTouchableOpacity extends TouchableOpacity {
 
   static propTypes = {
-    ...TouchableOpacity.propTypes,
     swipeable: PropTypes.bool,
     swipeWidth: PropTypes.number,
     onSwipeStsChange: PropTypes.func, //(swipeSts), - none, - moving, - closing, - opening, - opened
   };
 
   static defaultProps = {
-    ...TouchableOpacity.defaultProps,
     swipeable: true,
     swipeWidth: 100,
   };
@@ -29,9 +29,10 @@ export default class SwipeTouchableOpacity extends TouchableOpacity {
     this.translateX = 0;
     this.prevTouches = [];
     this.replaceSuperFunction();
-    Object.assign(this.state, {
+    this.state = {
+      ...this.state,
       translateX: new Animated.Value(0),
-    });
+    };
   }
 
   get swipeSts() {
@@ -46,24 +47,24 @@ export default class SwipeTouchableOpacity extends TouchableOpacity {
   replaceSuperFunction() {
     let touchableHandleResponderMove = this.touchableHandleResponderMove;
     this.touchableHandleResponderMove = (e) => {
-      touchableHandleResponderMove(e);
+      touchableHandleResponderMove.call(this, e);
       this.swiping(e);
     }
 
     let touchableHandleActivePressOut = this.touchableHandleActivePressOut;
     this.touchableHandleActivePressOut = (e) => {
       this.swipeOver();
-      touchableHandleActivePressOut(e);
+      touchableHandleActivePressOut.call(this, e);
     }
 
     let touchableHandlePress = this.touchableHandlePress;
     this.touchableHandlePress = (e) => {
-      if (!this.checkPress()) touchableHandlePress(e);
+      if (!this.checkPress()) touchableHandlePress.call(this, e);
     }
 
     let touchableHandleLongPress = this.touchableHandleLongPress;
     this.touchableHandleLongPress = (e) => {
-      if (!this.checkPress()) touchableHandleLongPress(e);
+      if (!this.checkPress()) touchableHandleLongPress.call(this, e);
     }
 
   }