@td-design/react-native-picker/lib/module/date-period-input/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 { StyleSheet } from 'react-native';
import { Box, Brief, Flex, helpers, Label, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native';
import dayjs from 'dayjs';
import DatePicker from '../date-picker';
import useDatePeriodInput from './useDatePeriodInput';
const {
  ONE_PIXEL
} = helpers;

/** 适用于筛选条件下的日期区间选择 */
const DatePeriodInput = _ref => {
  let {
    label,
    labelPosition = 'left',
    required = false,
    colon = false,
    placeholders = ['请选择', '请选择'],
    format = 'YYYY-MM-DD',
    value,
    onChange,
    allowClear = true,
    disabled = false,
    itemHeight,
    activeOpacity = 0.6,
    brief,
    ...restProps
  } = _ref;
  const theme = useTheme();
  const {
    dates,
    order,
    datePickerRef,
    handleChange,
    handleStartPress,
    handleEndPress,
    clearStartDate,
    clearEndDate
  } = useDatePeriodInput({
    value,
    onChange
  });
  const styles = StyleSheet.create({
    content: {
      paddingVertical: theme.spacing.x2,
      paddingHorizontal: theme.spacing.x1,
      justifyContent: 'space-between',
      alignItems: 'center',
      flexDirection: 'row'
    },
    icon: {
      alignItems: 'flex-end'
    }
  });
  const Content = /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "space-between",
    alignItems: "center",
    borderWidth: ONE_PIXEL,
    borderColor: "border",
    borderRadius: "x1",
    style: {
      ...(itemHeight ? {
        height: itemHeight
      } : {}),
      ...(labelPosition === 'top' ? {} : {
        flex: 1
      })
    }
  }, /*#__PURE__*/React.createElement(Pressable, {
    disabled: disabled,
    onPress: handleStartPress,
    activeOpacity: activeOpacity,
    style: styles.content
  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(SvgIcon, {
    name: "date",
    color: theme.colors.icon
  }), /*#__PURE__*/React.createElement(Text, {
    variant: "p2",
    color: disabled ? 'disabled' : dates[0] ? 'text' : 'gray300',
    marginLeft: "x2"
  }, dates[0] ? dayjs(dates[0]).format(format) : placeholders[0])), !disabled && allowClear && dates[0] && /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: 1,
    onPress: clearStartDate,
    hitOffset: 10,
    style: styles.icon
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: "closecircleo",
    color: theme.colors.icon
  }))), /*#__PURE__*/React.createElement(Box, {
    paddingHorizontal: "x2"
  }, /*#__PURE__*/React.createElement(Text, {
    variant: "p1",
    color: "text"
  }, "~")), /*#__PURE__*/React.createElement(Pressable, {
    disabled: disabled,
    onPress: handleEndPress,
    activeOpacity: activeOpacity,
    style: styles.content
  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(SvgIcon, {
    name: "date",
    color: theme.colors.icon
  }), /*#__PURE__*/React.createElement(Text, {
    variant: "p2",
    color: disabled ? 'disabled' : dates[1] ? 'text' : 'gray300',
    marginLeft: "x2"
  }, dates[1] ? dayjs(dates[1]).format(format) : placeholders[1])), !disabled && allowClear && dates[1] && /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: 1,
    onPress: clearEndDate,
    hitOffset: 10,
    style: styles.icon
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: "closecircleo",
    color: theme.colors.icon
  }))));
  return /*#__PURE__*/React.createElement(React.Fragment, null, labelPosition === 'top' ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Label, {
    label,
    colon,
    required
  }), Content, /*#__PURE__*/React.createElement(Brief, {
    brief: brief
  })) : /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Label, {
    label,
    colon,
    required
  }), Content), /*#__PURE__*/React.createElement(Brief, {
    brief: brief
  })), /*#__PURE__*/React.createElement(DatePicker, _extends({
    ref: datePickerRef,
    value: order === 'start' ? dates[0] : dates[1],
    onChange: handleChange
  }, restProps, {
    minDate: order === 'end' ? dates[0] : undefined,
    maxDate: order === 'start' ? dates[1] : undefined
  })));
};
export default DatePeriodInput;
//# sourceMappingURL=index.js.map