Remove all buildProps functions, support rn 0.58, up to 0.6.0

rilyu · Jan 31, 2019 · d36cb7b · d36cb7b
1 parent 4d4af36
commit d36cb7b
Show file tree

Hide file tree

Showing 107 changed files with 7,974 additions and 5,912 deletions.
diff --git a/README.md b/README.md
@@ -25,11 +25,18 @@ react-native run-android
 **Tips: In the Android system, the animations is not smooth, switch to the release mode can be resolved.**
 
 ## iPhoneX
-Add the following code to support iPhoneX
-```javascript
-Theme.set ({fitIPhoneX: true});
+iPhoneX and iPhoneXS are fully supported after 0.6.0, and this option is **true** by default.
+
+If SafeAreaView is used, please use ```Theme.set({fitIPhoneX: false})``` to manually turn off it.
+
+## Redux
+If you use Redux, you need to use the ```<TopView>``` package container (thanks [@Alexorz](https://github.com/Alexorz) ).
+
+```
+import { TopView } from 'teaset';
+
+container => () => <Provider store={store}><TopView>{container}</TopView></Provider>
 ```
-** Note: This option is false by default, don't open it if SafeAreaView is used. **
 
 # Documentation
 The document is being written, please refer to the example source code.

diff --git a/components/ActionPopover/ActionPopoverItem.js b/components/ActionPopover/ActionPopoverItem.js
@@ -21,16 +21,8 @@ export default class ActionPopoverItem extends Component {
     ...TouchableOpacity.defaultProps,
   };
 
-  buildProps() {
-    let {style, title, leftSeparator, rightSeparator, ...others} = this.props;
-
-    style = [{
-      paddingVertical: Theme.apItemPaddingVertical,
-      paddingHorizontal: Theme.apItemPaddingHorizontal,
-      borderColor: Theme.apSeparatorColor,
-      borderLeftWidth: leftSeparator ? Theme.apSeparatorWidth : 0,
-      borderRightWidth: rightSeparator ? Theme.apSeparatorWidth : 0,
-    }].concat(style);
+  renderTitle() {
+    let {title} = this.props;
 
     if ((title || title === '' || title === 0) && !React.isValidElement(title)) {
       let textStyle = {
@@ -41,16 +33,23 @@ export default class ActionPopoverItem extends Component {
       title = <Text style={textStyle} numberOfLines={1}>{title}</Text>;
     }
 
-    this.props = {style, title, leftSeparator, rightSeparator, ...others};
+    return title;
   }
 
   render() {
-    this.buildProps();
+    let {style, title, leftSeparator, rightSeparator, ...others} = this.props;
+
+    style = [{
+      paddingVertical: Theme.apItemPaddingVertical,
+      paddingHorizontal: Theme.apItemPaddingHorizontal,
+      borderColor: Theme.apSeparatorColor,
+      borderLeftWidth: leftSeparator ? Theme.apSeparatorWidth : 0,
+      borderRightWidth: rightSeparator ? Theme.apSeparatorWidth : 0,
+    }].concat(style);
 
-    let {title, ...others} = this.props;
     return (
-      <TouchableOpacity {...others}>
-        {title}
+      <TouchableOpacity style={style} {...others}>
+        {this.renderTitle()}
       </TouchableOpacity>
     );
   }

diff --git a/components/ActionPopover/ActionPopoverView.js b/components/ActionPopover/ActionPopoverView.js
@@ -34,25 +34,25 @@ export default class ActionPopoverView extends Overlay.PopoverView {
     item.onPress && item.onPress();
   }
 
-  buildProps() {
-    let {popoverStyle, directionInsets, items, children, ...others} = this.props;
-
+  buildPopoverStyle() {
+    this.defaultDirectionInsets = Theme.apDirectionInsets;
+    let {popoverStyle, arrow} = super.buildPopoverStyle();
     popoverStyle = [{
       backgroundColor: Theme.apColor,
       paddingVertical: Theme.apPaddingVertical,
       paddingHorizontal: Theme.apPaddingHorizontal,
       borderRadius: Theme.apBorderRadius,
       flexDirection: 'row',
     }].concat(popoverStyle);
+    return {popoverStyle, arrow};
+  }
 
-    if (!directionInsets && directionInsets !== 0) {
-      directionInsets = Theme.apDirectionInsets;
-    }
-
-    children = [];
+  renderContent() {
+    let {items} = this.props;
+    let list = [];
     for (let i = 0; items && i < items.length; ++i) {
       let item = items[i];
-      children.push(
+      list.push(
         <this.constructor.Item
           key={'item' + i}
           title={item.title}
@@ -61,9 +61,7 @@ export default class ActionPopoverView extends Overlay.PopoverView {
           />
       );
     }
-
-    this.props = {popoverStyle, directionInsets, items, children, ...others} ;
-
-    super.buildProps();
+    return super.renderContent(list);
   }
+
 }
diff --git a/components/ActionSheet/ActionSheetItem.js b/components/ActionSheet/ActionSheetItem.js
@@ -27,9 +27,8 @@ export default class ActionSheetItem extends Component {
     disabled: false,
   };
 
-  buildProps() {
-    let {style, type, title, topSeparator, bottomSeparator, disabled, activeOpacity, onPress, ...others} = this.props;
-
+  buildStyle() {
+    let {style, type} = this.props;
     style = [{
       backgroundColor: type === 'cancel' ? Theme.asCancelItemColor : Theme.asItemColor,
       paddingLeft: Theme.asItemPaddingLeft,
@@ -40,8 +39,40 @@ export default class ActionSheetItem extends Component {
       overflow: 'hidden',
       justifyContent: 'center',
     }].concat(style);
+    return style;
+  }
+
+  renderSeparator(separator) {
+    let {type} = this.props;
+
+    let indentViewStyle = {
+      backgroundColor: 'rgba(0,0,0,0)',
+      paddingLeft: Theme.asItemPaddingLeft,
+    }
+    let separatorStyle;
+    if (type === 'cancel') {
+      separatorStyle = {
+        backgroundColor: Theme.asCancelItemSeparatorColor,
+        height: Theme.asCancelItemSeparatorLineWidth,
+      }
+    } else {
+      separatorStyle = {
+        backgroundColor: Theme.asItemSeparatorColor,
+        height:Theme.asItemSeparatorLineWidth,
+      }
+    }
+    switch (separator) {
+      case 'full': return <View style={separatorStyle} />;
+      case 'indent': return <View style={indentViewStyle}><View style={separatorStyle} /></View>;
+      default: return null;
+    }
+  }
+
+  renderTitle() {
+    let {type, title, disabled} = this.props;
+    if (title === null || title === undefined || React.isValidElement(title)) return title;
 
-    let textStyle, separatorStyle;
+    let textStyle;
     if (type === 'cancel') {
       textStyle = {
         backgroundColor: 'rgba(0, 0, 0, 0)',
@@ -51,10 +82,6 @@ export default class ActionSheetItem extends Component {
         opacity: disabled ? Theme.asItemDisabledOpacity : 1,
         overflow: 'hidden',
       };
-      separatorStyle = {
-        backgroundColor:Theme.asCancelItemSeparatorColor,
-        height: Theme.asCancelItemSeparatorLineWidth,
-      }
     } else {
       textStyle = {
         backgroundColor: 'rgba(0, 0, 0, 0)',
@@ -64,69 +91,22 @@ export default class ActionSheetItem extends Component {
         opacity: disabled ? Theme.asItemDisabledOpacity : 1,
         overflow: 'hidden',
       };
-      separatorStyle = {
-        backgroundColor: Theme.asItemSeparatorColor,
-        height:Theme.asItemSeparatorLineWidth,
-      }
     }
-
-    if ((title || title === '' || title === 0) && !React.isValidElement(title)) {
-      title = <Text style={textStyle} numberOfLines={1}>{title}</Text>;
-    }
-
-    let indentViewStyle = {
-      backgroundColor: StyleSheet.flatten(style).backgroundColor,
-      paddingLeft: Theme.asItemPaddingLeft,
-    }
-    switch (topSeparator) {
-      case 'none':
-        topSeparator = null;
-        break;
-      case 'full':
-        topSeparator = <View style={separatorStyle} />;
-        break;
-      case 'indent':
-        topSeparator = (
-          <View style={indentViewStyle}>
-            <View style={separatorStyle} />
-          </View>
-        );
-        break;        
-    }
-    switch (bottomSeparator) {
-      case 'none':
-        bottomSeparator = null;
-        break;
-      case 'full':
-        bottomSeparator = <View style={separatorStyle} />;
-        break;
-      case 'indent':
-        bottomSeparator = (
-          <View style={indentViewStyle}>
-            <View style={separatorStyle} />
-          </View>
-        );
-        break;        
-    }
-
-    if (disabled) activeOpacity = 1;
-
-    this.props = {style, type, title, topSeparator, bottomSeparator, disabled, activeOpacity, onPress, ...others};
+    return <Text style={textStyle} numberOfLines={1}>{title}</Text>;
   }
 
   render() {
-    this.buildProps();
-
-    let {style, title, topSeparator, bottomSeparator, ...others} = this.props;
+    let {style, children, type, title, topSeparator, bottomSeparator, disabled, activeOpacity, ...others} = this.props;
     return (
       <View style={{backgroundColor: 'rgba(0, 0, 0, 0)'}} >
-        {topSeparator}
-        <TouchableOpacity style={style} {...others}>
-          {title}
+        {this.renderSeparator(topSeparator)}
+        <TouchableOpacity style={this.buildStyle()} activeOpacity={disabled ? 1 : activeOpacity} {...others}>
+          {this.renderTitle()}
         </TouchableOpacity>
-        {bottomSeparator}
+        {this.renderSeparator(bottomSeparator)}
       </View>
     );
   }
 
 }
+
diff --git a/components/ActionSheet/ActionSheetView.js b/components/ActionSheet/ActionSheetView.js
@@ -46,15 +46,13 @@ export default class ActionSheetView extends Overlay.PullView {
     this.close(true);
   }
 
-  buildProps() {
-    super.buildProps();
+  renderContent() {
+    let {items, cancelItem} = this.props;
 
-    let {items, cancelItem, children, ...others} = this.props;
-
-    children = [];
+    let list = [];
     for (let i = 0; items && i < items.length; ++i) {
       let item = items[i];
-      children.push(
+      list.push(
         <this.constructor.Item
           key={'item' + i}
           title={item.title}
@@ -65,7 +63,7 @@ export default class ActionSheetView extends Overlay.PullView {
       );
     }
     if (cancelItem) {
-      children.push(
+      list.push(
         <this.constructor.Item
           key={'cancelItem'}
           type='cancel'
@@ -76,7 +74,7 @@ export default class ActionSheetView extends Overlay.PullView {
           />
       );
     }
-    children.push(
+    list.push(
       <View
         style={{
           backgroundColor: cancelItem ? Theme.asCancelItemColor : Theme.asItemColor,
@@ -86,7 +84,7 @@ export default class ActionSheetView extends Overlay.PullView {
         />
     );
 
-    this.props = {items, cancelItem, children, ...others};
+    return super.renderContent(list);
   }
 
 }

diff --git a/components/AlbumView/AlbumSheet.js b/components/AlbumView/AlbumSheet.js
@@ -270,11 +270,19 @@ export default class AlbumSheet extends TransformView {
     });
   }
 
-  buildProps() {
-    let {style, image, thumb, load, children, onLayout, ...others} = this.props;
-    let {position, imageLoaded, thumbLoaded, fitWidth, fitHeight} = this.state;
+  buildStyle() {
+    return [{backgroundColor: 'rgba(0, 0, 0, 0)'}].concat(super.buildStyle());
+  }
 
-    style = [{backgroundColor: 'rgba(0, 0, 0, 0)'}].concat(style);
+  onLayout(e) {
+    let {width, height} = e.nativeEvent.layout;
+    this.layoutChange(width, height);
+    super.onLayout(e);
+  }
+
+  renderContent() {
+    let {image, thumb, children} = this.props;
+    let {position, imageLoaded, thumbLoaded, fitWidth, fitHeight} = this.state;
 
     let childrenStyle = {width: fitWidth, height: fitHeight};
     if (React.isValidElement(image)) {
@@ -287,15 +295,7 @@ export default class AlbumSheet extends TransformView {
       }
     }
 
-    let saveOnLayout = onLayout;
-    onLayout = e => {
-      let {width, height} = e.nativeEvent.layout;
-      this.layoutChange(width, height);
-      saveOnLayout && saveOnLayout(e);
-    };
-
-    this.props = {style, image, thumb, load, children, onLayout, ...others};
-    super.buildProps();
+    return children;
   }
 
 }