@td-design/react-native-picker
Version:
基于 @td-design/react-native 的 picker 组件
112 lines (111 loc) • 3.41 kB
JavaScript
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 useDatePicker from '../useDatePicker';
const {
ONE_PIXEL
} = helpers;
/** 适用于筛选条件下的日期选择 */
const DatePickerInput = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
label,
labelPosition = 'left',
placeholder = '请选择',
required = false,
colon = false,
format = 'YYYY-MM-DD',
value,
onChange,
style,
brief,
allowClear = true,
disabled = false,
itemHeight,
activeOpacity = 0.6,
...restProps
} = _ref;
const theme = useTheme();
const {
currentText,
handleInputClear,
handlePress
} = useDatePicker({
value,
format,
onChange,
placeholder,
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 Content = !disabled ? /*#__PURE__*/React.createElement(Pressable, {
onPress: handlePress,
activeOpacity: activeOpacity,
style: [itemHeight ? {
height: itemHeight
} : {}, styles.content, style, labelPosition === 'top' ? styles.top : styles.left]
}, /*#__PURE__*/React.createElement(Flex, {
flex: 1
}, /*#__PURE__*/React.createElement(SvgIcon, {
name: "date",
color: theme.colors.icon
}), /*#__PURE__*/React.createElement(Text, {
variant: "p1",
color: currentText === placeholder ? 'gray300' : 'text',
marginLeft: "x2"
}, currentText)), /*#__PURE__*/React.createElement(Flex, null, allowClear && !!currentText && currentText !== placeholder && /*#__PURE__*/React.createElement(Pressable, {
activeOpacity: 1,
onPress: handleInputClear,
style: styles.icon
}, /*#__PURE__*/React.createElement(SvgIcon, {
name: "closecircleo",
color: theme.colors.icon
})), /*#__PURE__*/React.createElement(SvgIcon, {
name: "right",
color: theme.colors.icon
}))) : /*#__PURE__*/React.createElement(Box, {
style: [styles.content, style, labelPosition === 'top' ? styles.top : styles.left]
}, /*#__PURE__*/React.createElement(Flex, {
flex: 1
}, /*#__PURE__*/React.createElement(SvgIcon, {
name: "date",
color: theme.colors.icon
}), /*#__PURE__*/React.createElement(Text, {
variant: "p1",
color: 'disabled',
marginLeft: "x2"
}, currentText)));
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
})));
});
export default DatePickerInput;
//# sourceMappingURL=index.js.map