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

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

import React, { forwardRef } from 'react';
import { StyleSheet } from 'react-native';
import { Box, Brief, Flex, helpers, Label, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native';
import usePicker from '../usePicker';
const {
  ONE_PIXEL
} = helpers;
function PickerInputInner(_ref, ref) {
  let {
    label,
    labelPosition = 'left',
    placeholder = '请选择',
    required = false,
    colon = false,
    cascade,
    value,
    data,
    onChange,
    style,
    brief,
    allowClear = true,
    disabled = false,
    itemHeight,
    hyphen = ',',
    activeOpacity = 0.6,
    ...restProps
  } = _ref;
  const theme = useTheme();
  const {
    currentText,
    handlePress,
    handleInputClear
  } = usePicker({
    data,
    cascade,
    value,
    onChange,
    placeholder,
    hyphen,
    ref,
    ...restProps
  });
  const styles = StyleSheet.create({
    content: {
      paddingVertical: theme.spacing.x2,
      paddingHorizontal: theme.spacing.x1,
      justifyContent: 'space-between',
      alignItems: 'center',
      flexDirection: 'row',
      borderWidth: ONE_PIXEL,
      borderColor: theme.colors.border,
      borderRadius: theme.borderRadii.x1
    },
    top: {},
    left: {
      flex: 1
    },
    icon: {
      alignItems: 'flex-end'
    }
  });
  const BaseContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
    flex: 1
  }, /*#__PURE__*/React.createElement(Text, {
    variant: "p1",
    color: disabled ? 'disabled' : currentText === placeholder ? 'gray300' : 'text',
    marginLeft: "x2"
  }, currentText)), /*#__PURE__*/React.createElement(Flex, null, !disabled && allowClear && !!currentText && currentText !== placeholder && /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: 1,
    onPress: handleInputClear,
    hitOffset: 10,
    style: styles.icon
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: "closecircleo",
    color: theme.colors.icon
  })), /*#__PURE__*/React.createElement(SvgIcon, {
    name: "right",
    color: theme.colors.icon
  })));
  const Content = !disabled ? /*#__PURE__*/React.createElement(Pressable, {
    onPress: handlePress,
    activeOpacity: activeOpacity,
    style: [itemHeight ? {
      height: itemHeight
    } : {}, styles.content, style, labelPosition === 'top' ? styles.top : styles.left]
  }, BaseContent) : /*#__PURE__*/React.createElement(Box, {
    style: [itemHeight ? {
      height: itemHeight
    } : {}, styles.content, style, labelPosition === 'top' ? styles.top : styles.left]
  }, BaseContent);
  return /*#__PURE__*/React.createElement(React.Fragment, null, labelPosition === 'top' ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Label, {
    label,
    required,
    colon
  }), Content, /*#__PURE__*/React.createElement(Brief, {
    brief: brief
  })) : /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Label, {
    label,
    required,
    colon
  }), Content), /*#__PURE__*/React.createElement(Brief, {
    brief: brief
  })));
}
const PickerInput = /*#__PURE__*/forwardRef(PickerInputInner);
export default PickerInput;
//# sourceMappingURL=index.js.map