mobile-more/lib/components/BizForm/ItemExpireDatePicker/ExpireDatePicker.js

基于 antd-mobile v5 扩展移动端 UI 组件

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.MinDate = exports.MaxDate = exports.DefaultFormat = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _antdMobile = require("antd-mobile");
var _dolyIcons = require("doly-icons");
var _utilHelpers = require("util-helpers");
var _date = require("../utils/date");
var _dayjs = require("../../../utils/dayjs.util");
var _BizConfigProvider = require("../../BizConfigProvider");
var _config = require("../../../config");
require("./ExpireDatePicker.css");
var _excluded = ["value", "format", "readOnly", "visible", "placeholder", "longTermValue", "longTermLabel", "onConfirm", "onClose", "renderLabel"];
var prefixCls = "".concat(_config.prefixClass, "-date-picker-expired");
var DefaultFormat = exports.DefaultFormat = 'YYYY-MM-DD';
// 内置最大/最小可选日期
var MinDate = exports.MinDate = (0, _utilHelpers.safeDate)((0, _dayjs.dayjs)().subtract(20, 'year').format(DefaultFormat));
var MaxDate = exports.MaxDate = (0, _utilHelpers.safeDate)((0, _dayjs.dayjs)().add(50, 'year').format(DefaultFormat));
var formatDate = function formatDate(date) {
  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DefaultFormat;
  if (date) {
    return (0, _dayjs.dayjs)(date).format(format);
  }
  return date;
};
var ExpireDatePicker = function ExpireDatePicker(props) {
  var _useConfig = (0, _BizConfigProvider.useConfig)(),
    locale = _useConfig.locale;
  var outValue = props.value,
    _props$format = props.format,
    format = _props$format === void 0 ? DefaultFormat : _props$format,
    _props$readOnly = props.readOnly,
    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
    visible = props.visible,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? locale.form.common.selectPlaceholder : _props$placeholder,
    _props$longTermValue = props.longTermValue,
    longTermValue = _props$longTermValue === void 0 ? '9999-12-31' : _props$longTermValue,
    _props$longTermLabel = props.longTermLabel,
    longTermLabel = _props$longTermLabel === void 0 ? locale.form.date.longTerm : _props$longTermLabel,
    onConfirm = props.onConfirm,
    onClose = props.onClose,
    _props$renderLabel = props.renderLabel,
    renderLabel = _props$renderLabel === void 0 ? function (type, data) {
      return (0, _date.labelRenderer)(type, data, locale);
    } : _props$renderLabel,
    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  var internalValue = React.useMemo(function () {
    return typeof outValue === 'string' ? (0, _utilHelpers.safeDate)(outValue) : outValue;
  }, [outValue]);
  var isForever = React.useMemo(function () {
    return formatDate(outValue, format) === formatDate(longTermValue, format);
  }, [outValue, format, longTermValue]);
  var handleChange = function handleChange(checked) {
    onClose === null || onClose === void 0 ? void 0 : onClose();
    if (!readOnly) {
      // @ts-ignore
      onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(checked ? longTermValue : undefined);
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: prefixCls
  }, !isForever && (/*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-picker")
  }, /*#__PURE__*/React.createElement(_antdMobile.DatePicker, (0, _objectSpread2.default)({
    value: internalValue,
    onConfirm: onConfirm,
    onClose: onClose,
    renderLabel: renderLabel,
    visible: visible && !isForever,
    min: MinDate,
    max: MaxDate
  }, restProps), function (val) {
    var fmtVal = val ? formatDate(val, format) : val;
    return /*#__PURE__*/React.createElement(_antdMobile.Input, {
      value: fmtVal || '',
      placeholder: placeholder,
      readOnly: true
    });
  }), /*#__PURE__*/React.createElement(_dolyIcons.ChevronRight, null))), /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames.default)("".concat(prefixCls, "-checkbox"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-checkbox-checked"), isForever)),
    onClick: function onClick(e) {
      !readOnly && e.stopPropagation();
    }
  }, /*#__PURE__*/React.createElement(_antdMobile.Checkbox, {
    checked: isForever,
    onChange: handleChange
  }, longTermLabel)));
};
var _default = exports.default = ExpireDatePicker;