chore(SelectCascader): add activeOpacity and underlayColor of props

Author: cuilanxin

packages/core/src/SelectCascader/README.md

@@ -130,18 +130,44 @@ export default class SelectCascaderDemo extends Component {
 
 ## Props
 
-| 参数      | 说明            | 类型      | 默认值 |
-| --------- | --------------------- | --------- | ------ |
-| `data`    | 列表数据 | array | -  |
-| `value`   | 选中的值 | array | -  |
-| `cols`   | 列数 | number | 3  |
-| `defaultValue` | 默认选择的值 | array | -  |
-| `onChange` | 选中时执行此回调 | Function(value, label) | -  |
-| `onOk` | 确定选中的值 | Function(value, label) | -  |
-| `onDismiss` | 隐藏 | Function() | -  |
-| `maskClosable` | 点击蒙层是否关闭 | boolean | `true` |
-| `okText` | 确定button文字 | string | 确定  |
-| `dismissText` | 取消button文字 | string | 取消  |
-| `title` | 弹框标题 | string | 请选择  |
-| `pickerItemStyle` | 选择器样式 | object | -  |
-| `headerStyle` | 选择器头部样式 | object | -  |
+```ts
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export type SelectCascaderOneValue = string | number | undefined;
+export type SelectCascaderValue = SelectCascaderOneValue[];
+
+export interface SelectCascaderProps {
+  /** 隐藏 */
+  onDismiss?: () => void;
+  /** 弹框标题 */
+  title?: string;
+  /** 取消button文字 */
+  dismissText?: string;
+  /** 确定button文字 */
+  okText?: string;
+  /** 选中的值 */
+  value?: SelectCascaderValue;
+  /** 选中时执行此回调 */
+  onChange?: (value: SelectCascaderValue, label: string) => void;
+  /** 显示隐藏控制值 */
+  visible: boolean;
+  /** 列表数据 */
+  data: ICascaderDataItem[];
+  /** 默认选择的值 */
+  defaultValue?: SelectCascaderValue | undefined;
+  /** 确定选中的值 */
+  onOk?: (value: SelectCascaderValue, label: string) => void;
+  /** 列数 默认 3 */
+  cols?: number;
+  /** 选择器样式 */
+  pickerItemStyle?: StyleProp<TextStyle>;
+  /** 选择器头部样式 */
+  headerStyle?: StyleProp<ViewStyle>;
+  /** 点击蒙层是否关闭 */
+  maskClosable?: boolean;
+  /** 动作在被触摸操作激活时以多少不透明度显示 默认 1 */
+  activeOpacity?: number;
+  /** 动作有触摸操作时显示出来的底层的颜色 默认 #f1f1f1 */
+  underlayColor?: string;
+}
+```   

packages/core/src/SelectCascader/index.tsx

@@ -15,22 +15,38 @@ export interface ICascaderDataItem {
 }
 
 export interface SelectCascaderProps {
+  /** 隐藏 */
   onDismiss?: () => void;
+  /** 弹框标题 */
   title?: string;
+  /** 取消button文字 */
   dismissText?: string;
+  /** 确定button文字 */
   okText?: string;
+  /** 选中的值 */
   value?: SelectCascaderValue;
+  /** 选中时执行此回调 */
   onChange?: (value: SelectCascaderValue, label: string) => void;
+  /** 显示隐藏控制值 */
   visible: boolean;
-  onVisibleChange?: () => {};
+  /** 列表数据 */
   data: ICascaderDataItem[];
+  /** 默认选择的值 */
   defaultValue?: SelectCascaderValue | undefined;
+  /** 确定选中的值 */
   onOk?: (value: SelectCascaderValue, label: string) => void;
-  disabled?: boolean;
+  /** 列数 默认 3 */
   cols?: number;
+  /** 选择器样式 */
   pickerItemStyle?: StyleProp<TextStyle>;
+  /** 选择器头部样式 */
   headerStyle?: StyleProp<ViewStyle>;
+  /** 点击蒙层是否关闭 */
   maskClosable?: boolean;
+  /** 动作在被触摸操作激活时以多少不透明度显示 默认 1 */
+  activeOpacity?: number;
+  /** 动作有触摸操作时显示出来的底层的颜色 */
+  underlayColor?: string;
 }
 
 export interface Istate {
@@ -44,7 +60,6 @@ export default class SelectCascader extends Component<SelectCascaderProps, Istat
     dismissText: '取消',
     okText: '确定',
     title: '请选择',
-    disabled: false,
     cols: 3,
     maskClosable: true,
   };
@@ -178,7 +193,16 @@ export default class SelectCascader extends Component<SelectCascaderProps, Istat
   };
 
   render() {
-    const { title, dismissText, okText, onDismiss, headerStyle, visible, maskClosable } = this.props;
+    const {
+      title,
+      dismissText,
+      okText,
+      activeOpacity = 1,
+      underlayColor = '#f1f1f1',
+      onDismiss,
+      headerStyle,
+      maskClosable,
+    } = this.props;
     const cols = this.getCols();
     return (
       <Modal
@@ -189,13 +213,23 @@ export default class SelectCascader extends Component<SelectCascaderProps, Istat
       >
         <>
           <View style={[styles.header, headerStyle]}>
-            <TouchableHighlight onPress={onDismiss} style={[styles.headerItem]}>
+            <TouchableHighlight
+              activeOpacity={activeOpacity}
+              underlayColor={underlayColor}
+              onPress={onDismiss}
+              style={[styles.headerItem]}
+            >
               <Text>{dismissText}</Text>
             </TouchableHighlight>
             <View style={[styles.headerItem]}>
               <Text>{title}</Text>
             </View>
-            <TouchableHighlight onPress={this.onOk} style={[styles.headerItem]}>
+            <TouchableHighlight
+              activeOpacity={activeOpacity}
+              underlayColor={underlayColor}
+              onPress={this.onOk}
+              style={[styles.headerItem]}
+            >
               <Text>{okText}</Text>
             </TouchableHighlight>
           </View>