mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
98 lines • 4.02 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["precision", "format", "renderLabel", "readOnly", "placeholder", "datePickerProps", "disabled", "onClick", "title", "required", "transform"];
import * as React from 'react';
import SuperDatePicker from './SuperDatePicker';
import BizFormItem from '../FormItem';
import { useConfig } from '../../BizConfigProvider';
import getDefaultPopupTitle from '../utils/getDefaultPopupTitle';
import { dayjs } from '../../../utils/dayjs.util';
var BizFormItemDatePicker = function BizFormItemDatePicker(props) {
var _useConfig = useConfig(),
locale = _useConfig.locale;
var _props$precision = props.precision,
precision = _props$precision === void 0 ? 'day' : _props$precision,
outFormat = props.format,
renderLabel = props.renderLabel,
_props$readOnly = props.readOnly,
readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
_props$placeholder = props.placeholder,
placeholder = _props$placeholder === void 0 ? locale.form.common.selectPlaceholder : _props$placeholder,
datePickerProps = props.datePickerProps,
disabled = props.disabled,
onClick = props.onClick,
_props$title = props.title,
title = _props$title === void 0 ? getDefaultPopupTitle(props, locale) : _props$title,
required = props.required,
outTransform = props.transform,
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 defaultFormat = React.useMemo(function () {
return {
year: 'YYYY',
quarter: 'YYYY-Q',
month: 'YYYY-MM',
day: 'YYYY-MM-DD',
hour: 'YYYY-MM-DD HH',
minute: 'YYYY-MM-DD HH:mm',
second: 'YYYY-MM-DD HH:mm:ss',
week: function week(date) {
var d = dayjs(date);
return d.format('YYYY-W') + locale.form.date.unit.week;
},
'week-day': function weekDay(date) {
var d = dayjs(date);
var fmtStr = d.format('YYYY-W') + locale.form.date.unit.week;
var day = d.day();
day = day === 0 ? 7 : day; // fix: 兼容处理
return "".concat(fmtStr, " ").concat(locale.form.date.weekday(day));
}
};
}, [locale.form.date]);
var format = React.useMemo(function () {
return outFormat || defaultFormat[precision] || defaultFormat.day;
}, [outFormat, precision, defaultFormat]);
var transform = React.useCallback(function (value) {
if (typeof outTransform === 'function') {
return outTransform(value);
}
if (precision !== 'week' && precision !== 'week-day' && format && value) {
return typeof format === 'function' ? format(value, precision) : dayjs(value).format(format);
}
return value;
}, [format, outTransform, precision]);
var handleClick = React.useCallback(function (e, widgetRef) {
if (!readOnly && !disabled) {
setVisible(true);
}
onClick === null || onClick === void 0 ? void 0 : onClick(e, widgetRef);
}, [disabled, onClick, readOnly]);
return /*#__PURE__*/React.createElement(BizFormItem, _objectSpread(_objectSpread({
transform: transform,
disabled: disabled,
required: required,
rules: [{
required: required,
message: locale.form.common.selectRequired
}],
onClick: handleClick
}, restProps), {}, {
trigger: "onConfirm",
validateTrigger: "onConfirm"
}), /*#__PURE__*/React.createElement(SuperDatePicker, _objectSpread({
visible: visible,
onClose: function onClose() {
setVisible(false);
},
renderLabel: renderLabel,
placeholder: placeholder,
format: format,
precision: precision,
title: title
}, datePickerProps)));
};
export default BizFormItemDatePicker;