@td-design/react-native-picker/lib/module/cascade-picker/index.js

基于 @td-design/react-native 的 picker 组件

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { Modal, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Box, Flex, helpers, Pressable, Text } from '@td-design/react-native';
import WheelPicker from '../components/WheelPicker';
import useCascader from './useCascader';
const {
  ONE_PIXEL,
  px
} = helpers;
function Cascader(_ref, ref) {
  let {
    data,
    cols = 3,
    activeOpacity = 0.6,
    title,
    cancelText = '取消',
    okText = '确定',
    value,
    onChange,
    ...restProps
  } = _ref;
  const {
    childrenTree,
    stateValue,
    handleValueChange,
    handleOk,
    handleClose,
    visible
  } = useCascader({
    data,
    cols,
    value,
    onChange,
    ref
  });
  const {
    bottom
  } = useSafeAreaInsets();
  if (childrenTree.length === 0) return null;
  return /*#__PURE__*/React.createElement(Modal, {
    visible: visible,
    statusBarTranslucent: true,
    animationType: "none",
    transparent: true
  }, /*#__PURE__*/React.createElement(GestureHandlerRootView, {
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement(Box, {
    flex: 1,
    justifyContent: 'flex-end',
    style: {
      backgroundColor: 'rgba(0, 0, 0, 0.5)'
    }
  }, /*#__PURE__*/React.createElement(Flex, {
    borderBottomWidth: ONE_PIXEL,
    borderBottomColor: "border",
    backgroundColor: "white",
    paddingVertical: "x3",
    paddingHorizontal: "x3"
  }, /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    onPress: handleClose,
    style: styles.cancel
  }, /*#__PURE__*/React.createElement(Text, {
    variant: "p0",
    color: "primary200"
  }, cancelText)), /*#__PURE__*/React.createElement(Flex.Item, {
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Text, {
    variant: "p0",
    color: "text"
  }, title)), /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    onPress: handleOk,
    style: styles.submit
  }, /*#__PURE__*/React.createElement(Text, {
    variant: "p0",
    color: "primary200"
  }, okText))), /*#__PURE__*/React.createElement(Flex, {
    backgroundColor: 'white',
    height: px(200),
    style: {
      paddingBottom: bottom
    }
  }, childrenTree.map((item, index) => /*#__PURE__*/React.createElement(WheelPicker, _extends({
    key: index
  }, restProps, {
    data: item.map(el => ({
      ...el,
      value: el.value
    })),
    value: stateValue[index],
    onChange: value => handleValueChange(value, index)
  })))))));
}
const styles = StyleSheet.create({
  cancel: {
    justifyContent: 'center',
    alignItems: 'flex-start'
  },
  submit: {
    justifyContent: 'center',
    alignItems: 'flex-end'
  }
});
export default /*#__PURE__*/React.forwardRef(Cascader);
//# sourceMappingURL=index.js.map