chore(ActionSheet): Add (textStyle,containerStyle,activeOpacity,underlayColor) of props

cuilanxin · cuilanxin · commit fc0a9d97ef62 · 2021-10-12T14:23:53.000+08:00
diff --git a/example/examples/src/routes/ActionSheet/index.tsx b/example/examples/src/routes/ActionSheet/index.tsx
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, Text} from 'react-native';
 import Layout, {Container} from '../../Layout';
 import {ActionSheet, Button, ActionSheetItem, Toast} from '@uiw/react-native';
 import {ComProps} from '../../routes';
@@ -36,7 +36,12 @@ export default class Index extends Component<IndexProps, IndexState> {
           <Body>
             <View style={styles.divider} />
             <Button onPress={this.onOpen}>打开 ActionSheet</Button>
-            <ActionSheet visible={this.state.visible} onCancel={true}>
+            <ActionSheet
+              visible={this.state.visible}
+              onCancel={true}
+              dividerStyle={{
+                itemDivider: {height: 2},
+              }}>
               <ActionSheetItem
                 onPress={() => Toast.info('你点击了按钮一', 2, 'info')}>
                 按钮一
diff --git a/packages/core/src/ActionSheet/README.md b/packages/core/src/ActionSheet/README.md
@@ -50,23 +50,42 @@ function Demo() {
 ## Props
 
 ```ts
-import { ModalProps } from 'react-native';
+import { ModalProps, StyleProp, ViewStyle } from 'react-native';
+
+export interface DividerStyle {
+  itemDivider?: StyleProp<ViewStyle>,
+  actionDivider?: StyleProp<ViewStyle>,
+}
 
 export interface ActionSheetProps extends ModalProps {
   /** 点击蒙层是否关闭 */
-  onCancel?: Boolean,
-  /** 是否展示元素 */
-  visible: Boolean,
+  onCancel?: Boolean;
+  /** 分割线样式 */
+  dividerStyle?: DividerStyle;
+  /** 取消的容器样式 */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** 动作在被触摸操作激活时以多少不透明度显示 默认 1 */
+  activeOpacity?: number;
+  /** 动作有触摸操作时显示出来的底层的颜色 默认 #f1f1f1 */
+  underlayColor?: string;
+  /** 取消的文本样式 */
+  textStyle?: StyleProp<TextStyle>;
   /** 取消的文本 */
-  cancelText?: React.ReactNode
+  cancelText?: React.ReactNode;
 }
 ```
 
 ## ActionSheetItem Props
 
 ```ts
-export interface ActionSheetProps extends ModalProps {
-  /** 点击 Item 触发的事件 */
+import { TextStyle, StyleProp, ViewStyle } from 'react-native';
+
+export interface ActionSheetItemProps {
+  /** 容器样式 */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** 文本样式 */
+  textStyle?: StyleProp<TextStyle>;
+  /** 点击 ActionSheetItem 触发的事件 */
   onPress?: ((event: GestureResponderEvent) => void),
 }
 ```
diff --git a/packages/core/src/ActionSheet/index.tsx b/packages/core/src/ActionSheet/index.tsx
@@ -1,12 +1,40 @@
 import React from 'react';
-import { View, Dimensions, StyleSheet, Text, TouchableOpacity, Modal, ModalProps, Animated } from 'react-native';
+import {
+  View,
+  Dimensions,
+  StyleSheet,
+  TextStyle,
+  StyleProp,
+  ViewStyle,
+  TouchableOpacity,
+  Modal,
+  ModalProps,
+  Animated,
+} from 'react-native';
 export { default as ActionSheetItem } from './item';
+import ActionSheetItem from './item';
 
 let MainWidth = Dimensions.get('window').width;
 let MainHeight = Dimensions.get('window').height;
+
+export interface DividerStyle {
+  itemDivider?: StyleProp<ViewStyle>;
+  actionDivider?: StyleProp<ViewStyle>;
+}
+
 export interface ActionSheetProps extends ModalProps {
   /** 点击蒙层是否关闭 */
   onCancel?: Boolean;
+  /** 分割线样式 */
+  dividerStyle?: DividerStyle;
+  /** 取消的容器样式 */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** 取消的文本样式 */
+  textStyle?: StyleProp<TextStyle>;
+  /** 动作在被触摸操作激活时以多少不透明度显示 默认 1 */
+  activeOpacity?: number;
+  /** 动作有触摸操作时显示出来的底层的颜色 */
+  underlayColor?: string;
   /** 取消的文本 */
   cancelText?: React.ReactNode;
 }
@@ -23,7 +51,7 @@ export default class ActionSheet extends React.Component<ActionSheetProps, Actio
     super(props);
     this.state = {
       animatedHeight: 0,
-      stateVisible: false,
+      stateVisible: !!props.visible,
     };
   }
 
@@ -62,7 +90,18 @@ export default class ActionSheet extends React.Component<ActionSheetProps, Actio
     }
   }
   render() {
-    const { children, visible, cancelText = '取消', onCancel, ...other } = this.props;
+    const {
+      children,
+      visible,
+      activeOpacity,
+      underlayColor,
+      cancelText = '取消',
+      dividerStyle,
+      onCancel,
+      containerStyle,
+      textStyle,
+      ...other
+    } = this.props;
     const { stateVisible } = this.state;
     return (
       <Modal
@@ -88,20 +127,22 @@ export default class ActionSheet extends React.Component<ActionSheetProps, Actio
         >
           {React.Children.toArray(children).map((item, index) => (
             <View key={index}>
-              {index !== 0 && <View style={styles.actionSheetItemDivider} />}
-              {item}
+              {index !== 0 && <View style={StyleSheet.flatten([styles.itemDivider, dividerStyle?.itemDivider])} />}
+              {React.cloneElement(item as React.DetailedReactHTMLElement<any, HTMLElement>, {
+                activeOpacity: activeOpacity,
+                underlayColor: underlayColor,
+              })}
             </View>
           ))}
-          <View style={styles.divider} />
-          {typeof cancelText !== 'object' ? (
-            <TouchableOpacity activeOpacity={1} onPress={this.onClose}>
-              <View style={styles.actionSheetItem}>
-                <Text style={styles.actionSheetItemText}>{cancelText}</Text>
-              </View>
-            </TouchableOpacity>
-          ) : (
-            <View>{cancelText}</View>
-          )}
+          <View style={StyleSheet.flatten([styles.actionDivider, dividerStyle?.actionDivider])} />
+          <ActionSheetItem
+            activeOpacity={activeOpacity}
+            underlayColor={underlayColor}
+            onPress={this.onClose}
+            children={cancelText}
+            containerStyle={containerStyle}
+            textStyle={textStyle}
+          />
         </Animated.View>
       </Modal>
     );
@@ -134,24 +175,14 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     zIndex: 9999,
   },
-  divider: {
+  actionDivider: {
     backgroundColor: 'rgba(197,217,232,.3)',
     width: MainWidth,
     height: 6,
   },
-  actionSheetItemDivider: {
-    borderBottomColor: 'rgba(197,217,232,.3)',
-    borderBottomWidth: 2,
-    width: MainWidth,
-  },
-  actionSheetItem: {
+  itemDivider: {
+    backgroundColor: 'rgba(197,217,232,.3)',
+    height: 2,
     width: MainWidth,
-    height: 50,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  actionSheetItemText: {
-    fontSize: 20,
-    fontWeight: '400',
   },
 });
diff --git a/packages/core/src/ActionSheet/item.tsx b/packages/core/src/ActionSheet/item.tsx
@@ -1,22 +1,48 @@
 import React from 'react';
-import { View, Dimensions, StyleSheet, Text, TouchableOpacity, GestureResponderEvent } from 'react-native';
+import {
+  View,
+  Dimensions,
+  TouchableHighlight,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  GestureResponderEvent,
+} from 'react-native';
 
 let MainWidth = Dimensions.get('window').width;
 export interface ActionSheetItemProps {
+  /** 容器样式 */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** 文本样式 */
+  textStyle?: StyleProp<TextStyle>;
+  /** 指定封装的视图在被触摸操作激活时以多少不透明度显示 默认 1 */
+  activeOpacity?: number;
+  /** 有触摸操作时显示出来的底层的颜色 */
+  underlayColor?: string;
   onPress?: (event: GestureResponderEvent) => void;
 }
 
 export interface ActionSheetItemState {}
 
 export default class ActionSheetItem extends React.Component<ActionSheetItemProps, ActionSheetItemState> {
   render() {
-    const { onPress = () => {}, children } = this.props;
+    const {
+      onPress = () => {},
+      activeOpacity = 1,
+      underlayColor = '#f1f1f1',
+      containerStyle,
+      textStyle,
+      children,
+    } = this.props;
     return (
-      <TouchableOpacity activeOpacity={1} onPress={onPress}>
-        <View style={styles.actionSheetItem}>
-          <Text style={styles.actionSheetItemText}>{children}</Text>
+      <TouchableHighlight activeOpacity={activeOpacity} underlayColor={underlayColor} onPress={onPress}>
+        <View style={StyleSheet.flatten([styles.actionSheetItem, containerStyle])}>
+          <Text style={StyleSheet.flatten([styles.actionSheetItemText, textStyle])}>{children}</Text>
         </View>
-      </TouchableOpacity>
+      </TouchableHighlight>
     );
   }
 }
