@aliretail/react-materials-components/es/FormComponents/datePicker/index.js

B 端物料组件库

import _Checkbox from "@alifd/next/es/checkbox";
import _DatePicker from "@alifd/next/es/date-picker";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["value", "canSetForever", "onChange", "disabled", "foreverLebel"];
import * as React from 'react';
import { connect } from '@formily/next';
import { isStr } from '@formily/shared';
import { mapTextComponent, mapStyledProps, compose } from "../shared";
import moment from 'moment';
import { PreviewText } from "../PreviewText";

var transformMoment = function transformMoment(value, format) {
  if (format === void 0) {
    format = 'YYYY-MM-DD HH:mm:ss';
  }

  return value && value.format ? value.format(format) : value;
}; // showTime可以是非单纯的布尔值，里面还可以设置时间的format


var getFormatFromProps = function getFormatFromProps(props) {
  if (props.showTime) {
    if (typeof props.showTime === 'boolean') {
      return 'YYYY-MM-DD HH:mm:ss';
    } else if ('format' in props.showTime) {
      return "YYYY-MM-DD " + props.showTime.format;
    }
  } else if (props.format) {
    return props.format;
  } else {
    return 'YYYY-MM-DD';
  }
};

var DateRangePickerWithForeverSwitch = function DateRangePickerWithForeverSwitch(props) {
  var _props$value = props.value,
      value = _props$value === void 0 ? [] : _props$value,
      canSetForever = props.canSetForever,
      onChange = props.onChange,
      disabled = props.disabled,
      _props$foreverLebel = props.foreverLebel,
      foreverLebel = _props$foreverLebel === void 0 ? '永久生效' : _props$foreverLebel,
      rest = _objectWithoutPropertiesLoose(props, _excluded);

  var start = value[0],
      end = value[1],
      forever = value[2];

  var handleForeverChange = function handleForeverChange() {
    onChange([undefined, undefined, !forever]);
  };

  var handleDatePickerChange = function handleDatePickerChange(values) {
    onChange([].concat(values, [false]));
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DatePicker.RangePicker, _extends({}, rest, {
    value: [start, end],
    onChange: handleDatePickerChange,
    disabled: disabled || forever
  })), /*#__PURE__*/React.createElement(_Checkbox, {
    checked: forever,
    onChange: handleForeverChange,
    disabled: disabled,
    style: {
      marginLeft: '16px'
    }
  }, foreverLebel));
};

var DateRangePickerWithForeverSwitchPreview = function DateRangePickerWithForeverSwitchPreview(props) {
  var _props$value2 = props.value,
      value = _props$value2 === void 0 ? [] : _props$value2,
      canSetForever = props.canSetForever,
      _props$foreverLebel2 = props.foreverLebel,
      foreverLebel = _props$foreverLebel2 === void 0 ? '永久生效' : _props$foreverLebel2;
  var foreverSwitchValue = value[2];

  if (!canSetForever || !foreverSwitchValue) {
    return /*#__PURE__*/React.createElement(PreviewText, props);
  } else {
    return /*#__PURE__*/React.createElement("p", {
      style: {
        padding: 0,
        margin: 0
      },
      className: "aliretail-preview-text"
    }, foreverLebel);
  }
};

var mapDateRangePickerWithForeverSwitch = function mapDateRangePickerWithForeverSwitch(Target, props, fieldProps) {
  if (fieldProps === void 0) {
    fieldProps = {};
  }

  var _fieldProps = fieldProps,
      editable = _fieldProps.editable;

  var _ref = props['x-component-props'] || {},
      canSetForever = _ref.canSetForever;

  if (editable !== undefined) {
    if (editable === false) {
      var _props$xComponentPr;

      // 进入到预览态
      // 如果 props 中有 readOnlyRender，使用 readOnlyRender 的展示，否则使用 PreviewText
      if ((_props$xComponentPr = props['x-component-props']) !== null && _props$xComponentPr !== void 0 && _props$xComponentPr.readOnlyRender) {
        return props['x-component-props'].readOnlyRender;
      } else if (canSetForever) {
        return DateRangePickerWithForeverSwitchPreview;
      }

      return PreviewText;
    }
  }

  if (canSetForever) {
    return DateRangePickerWithForeverSwitch;
  }

  return Target;
};

export var DatePicker = connect({
  getValueFromEvent: function getValueFromEvent(value) {
    return transformMoment(value, getFormatFromProps(this.props));
  },
  getProps: mapStyledProps,
  getComponent: mapTextComponent,
  defaultProps: {
    hasClear: true
  }
})(_DatePicker);
export var RangeDatePicker = connect({
  getValueFromEvent: function getValueFromEvent(_ref2) {
    var startDate = _ref2[0],
        endDate = _ref2[1],
        forever = _ref2[2];
    var format = getFormatFromProps(this.props);
    var canSetForever = this.props.canSetForever;
    var formatValue = [transformMoment(startDate, format), transformMoment(endDate, format)];

    if (canSetForever) {
      formatValue.push(forever);
    }

    return formatValue;
  },
  defaultProps: {
    // footerRender: () => <div />,
    inputProps: {
      hasClear: true
    }
  },
  getProps: mapStyledProps,
  getComponent: mapDateRangePickerWithForeverSwitch
})(_DatePicker.RangePicker);
export var WeekDatePicker = connect({
  defaultProps: {
    hasClear: true
  },
  getValueFromEvent: function getValueFromEvent(value) {
    return transformMoment(value, this.props.format || 'gggg-wo');
  },
  getProps: compose(mapStyledProps, function (props, fieldProps) {
    if (!fieldProps.editable) return props;

    if (isStr(props.value) && props.value) {
      var parsed = props.value.match(/\D*(\d+)\D*(\d+)\D*/) || ['', '', ''];
      props.value = moment(parsed[1], 'YYYY').add(parsed[2] - 1, 'weeks');
    }

    return props;
  }),
  getComponent: mapTextComponent
})(_DatePicker.WeekPicker);
export var MonthDatePicker = connect({
  defaultProps: {
    hasClear: true
  },
  getValueFromEvent: function getValueFromEvent(value) {
    return transformMoment(value, this.props.format || 'YYYY-MM');
  },
  getProps: mapStyledProps,
  getComponent: mapTextComponent
})(_DatePicker.MonthPicker);
export var YearDatePicker = connect({
  defaultProps: {
    hasClear: true
  },
  getValueFromEvent: function getValueFromEvent(value) {
    return transformMoment(value, this.props.format || 'YYYY');
  },
  getProps: mapStyledProps,
  getComponent: mapTextComponent
})(_DatePicker.YearPicker);
export default DatePicker;