mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
71 lines • 2.91 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["datePickerProps", "format", "readOnly", "disabled", "placeholder", "title", "longTermValue", "longTermLabel", "required"];
import React from 'react';
import { dayjs } from "../../../utils/dayjsUtil";
import BizFormItem from "../FormItem";
import ExpireDatePicker, { DefaultFormat, MaxDate, MinDate } from "./ExpireDatePicker";
import getDefaultPopupTitle from "../utils/getDefaultPopupTitle";
import { useConfig } from "../../BizConfigProvider";
var BizFormItemExpireDatePicker = function BizFormItemExpireDatePicker(props) {
var _useConfig = useConfig(),
locale = _useConfig.locale;
var datePickerProps = props.datePickerProps,
_props$format = props.format,
format = _props$format === void 0 ? DefaultFormat : _props$format,
readOnly = props.readOnly,
disabled = props.disabled,
placeholder = props.placeholder,
_props$title = props.title,
title = _props$title === void 0 ? getDefaultPopupTitle(props, locale) : _props$title,
longTermValue = props.longTermValue,
longTermLabel = props.longTermLabel,
required = props.required,
restProps = _objectWithoutProperties(props, _excluded);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visible = _React$useState2[0],
setVisible = _React$useState2[1];
var transform = React.useCallback(function (value) {
if (format && value) {
return dayjs(value).format(format);
}
return value;
}, [format]);
return /*#__PURE__*/React.createElement(BizFormItem, _extends({
trigger: "onConfirm",
validateTrigger: "onConfirm",
arrow: false,
arrowIcon: false,
transform: transform,
disabled: disabled,
rules: [{
required: required,
message: locale.form.common.selectRequired
}],
required: required
}, restProps, {
onClick: function onClick(e, widgetRef) {
var _restProps$onClick;
if (!disabled && !readOnly) {
setVisible(true);
}
restProps === null || restProps === void 0 || (_restProps$onClick = restProps.onClick) === null || _restProps$onClick === void 0 || _restProps$onClick.call(restProps, e, widgetRef);
}
}), /*#__PURE__*/React.createElement(ExpireDatePicker, _extends({
visible: visible,
onClose: function onClose() {
return setVisible(false);
},
placeholder: placeholder,
longTermLabel: longTermLabel,
longTermValue: longTermValue,
readOnly: disabled || readOnly,
format: format,
title: title
}, datePickerProps)));
};
BizFormItemExpireDatePicker.MinDate = MinDate;
BizFormItemExpireDatePicker.MaxDate = MaxDate;
export default BizFormItemExpireDatePicker;