mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
93 lines (92 loc) • 4.22 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["value", "format", "readOnly", "visible", "placeholder", "longTermValue", "longTermLabel", "onConfirm", "onClose", "renderLabel"];
import React, { useMemo } from 'react';
import classNames from 'classnames';
import { Checkbox, DatePicker, Input } from 'antd-mobile';
import { ChevronRight } from 'doly-icons';
import { safeDate } from 'util-helpers';
import labelRenderer from "../utils/labelRenderer";
import { dayjs } from "../../../utils/dayjsUtil";
import { useConfig } from "../../BizConfigProvider";
import { prefixClass } from "../../../config";
import "./ExpireDatePicker.css";
var prefixCls = "".concat(prefixClass, "-date-picker-expired");
export var DefaultFormat = 'YYYY-MM-DD';
/**内置最小可选日期，往前20年 */
export var MinDate = safeDate(dayjs().subtract(20, 'year').format(DefaultFormat));
/**内置最大可选日期，往后50年 */
export var MaxDate = safeDate(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 dayjs(date).format(format);
}
return date;
};
var ExpireDatePicker = function ExpireDatePicker(props) {
var _useConfig = 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 labelRenderer(type, data, locale);
} : _props$renderLabel,
restProps = _objectWithoutProperties(props, _excluded);
var longTermValueFormatString = useMemo(function () {
return formatDate(longTermValue, format);
}, [longTermValue, format]);
var isForever = formatDate(outValue, format) === longTermValueFormatString;
var handleChange = function handleChange(checked) {
onClose === null || onClose === void 0 || onClose();
if (!readOnly) {
// @ts-ignore
onConfirm === null || onConfirm === 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(DatePicker, _extends({
value: typeof outValue === 'string' ? safeDate(outValue) : outValue,
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(Input, {
value: fmtVal || '',
placeholder: placeholder,
readOnly: true
});
}), /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement("div", {
className: classNames("".concat(prefixCls, "-checkbox"), _defineProperty({}, "".concat(prefixCls, "-checkbox-checked"), isForever)),
onClick: function onClick(e) {
if (!readOnly) {
e.stopPropagation();
}
}
}, /*#__PURE__*/React.createElement(Checkbox, {
checked: isForever,
onChange: handleChange
}, longTermLabel)));
};
export default ExpireDatePicker;