mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
91 lines • 4.22 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["value", "format", "readOnly", "visible", "placeholder", "longTermValue", "longTermLabel", "onConfirm", "onClose", "renderLabel"];
import * as React 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/date';
import { dayjs } from '../../../utils/dayjs.util';
import { useConfig } from '../../BizConfigProvider';
import { prefixClass } from '../../../config';
import "./ExpireDatePicker.css";
var prefixCls = "".concat(prefixClass, "-date-picker-expired");
export var DefaultFormat = 'YYYY-MM-DD';
// 内置最大/最小可选日期
export var MinDate = safeDate(dayjs().subtract(20, 'year').format(DefaultFormat));
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 internalValue = React.useMemo(function () {
return typeof outValue === 'string' ? 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(DatePicker, _objectSpread({
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(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) {
!readOnly && e.stopPropagation();
}
}, /*#__PURE__*/React.createElement(Checkbox, {
checked: isForever,
onChange: handleChange
}, longTermLabel)));
};
export default ExpireDatePicker;