@flatbiz/antd
Version:
169 lines (165 loc) • 6.7 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { _ as _objectWithoutProperties, a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { hooks } from '@wove/react/hooks';
import { useState, useMemo } from 'react';
import { DatePicker } from 'antd';
import dayjs from 'dayjs';
import { flatbizDate } from '@flatbiz/utils';
import { D as DayjsDateTypeEnum, g as getDisabledHour, a as getDisabledMinute, b as getDisabledSecond } from './time-CeL7904f.js';
import { jsx } from 'react/jsx-runtime';
var _excluded = ["value", "onChange", "style", "format", "onOpenChange", "outputNormalize", "inputNormalize"];
/**
* DatePicker.RangePicker包装组件
* ```
* 1. value类型为 [string, string],可以通过 inputNormalize来进行自定义转换
* 2. onChange返回类型 [string, string]，可以通过 outputNormalize来进行自定义转换
* 3. 默认格式化类型 YYYY-MM-DD； 当showTime===true时，默认格式化类型YYYY-MM-DD HH:mm:ss；其他格式化类型自定义format
* 4. 可设置disabledDateConfig，来控制日期项的disbaled状态
* 5. 设置 disabledDate 后，disabledDateConfig配置将失效
* 6. 设置 disabledTime 后，内置的disabledTime逻辑将失效
*
* TODO: 存在场景缺陷，当设置maxDays、showTime后，在选择单个日期不通过确认按钮直接切换输入框，无法获取回调，无法约束disabledDate
* ```
*/
var DateRangePickerWrapper = function DateRangePickerWrapper(props) {
var value = props.value,
onChange = props.onChange,
style = props.style,
format = props.format,
onAntdOpenChange = props.onOpenChange,
outputNormalize = props.outputNormalize,
inputNormalize = props.inputNormalize,
otherProps = _objectWithoutProperties(props, _excluded);
var _ref = props.disabledDateConfig || {},
maxDays = _ref.maxDays,
minDate = _ref.minDate,
maxDate = _ref.maxDate,
disabledHourList = _ref.disabledHourList,
disabledMinuteList = _ref.disabledMinuteList,
disabledSecondList = _ref.disabledSecondList;
var minDateTimeDayInst = minDate ? dayjs(minDate) : undefined;
var maxDateTimeDayInst = maxDate ? dayjs(maxDate) : undefined;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
dates = _useState2[0],
setDates = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
hackValue = _useState4[0],
setHackValue = _useState4[1];
var _useMemo = useMemo(function () {
if (inputNormalize) {
return inputNormalize(value) || [];
}
return value || [];
}, [value]),
_useMemo2 = _slicedToArray(_useMemo, 2),
date1 = _useMemo2[0],
date2 = _useMemo2[1];
var rangePickerValue = useMemo(function () {
if (date1 && date2) {
var newDate1 = flatbizDate.dateNormalize(date1);
var newDate2 = flatbizDate.dateNormalize(date2);
return [dayjs(newDate1), dayjs(newDate2)];
}
return undefined;
}, [date1, date2]);
var customFormat = useMemo(function () {
if (format) return format;
if (props.showTime === true) return DayjsDateTypeEnum.YMDHms;
return DayjsDateTypeEnum.YMD;
}, [props.showTime, format]);
var showTime = useMemo(function () {
if (props.showTime) return props.showTime;
if (customFormat && customFormat.includes('HH')) {
return true;
}
return false;
}, [props.showTime, customFormat]);
var onChangeDate = hooks.useCallbackRef(function (dates, dateStrings) {
if (dates && dates[0] && dates[1]) {
if (outputNormalize) {
onChange === null || onChange === void 0 || onChange(outputNormalize(dateStrings));
} else {
onChange === null || onChange === void 0 || onChange(dateStrings);
}
} else {
onChange === null || onChange === void 0 || onChange(undefined);
}
});
var getDisabledDate = hooks.useCallbackRef(function (current) {
var currentDate = current.format(DayjsDateTypeEnum.YMD);
if (!props.disabledDateConfig) {
return false;
}
if (minDateTimeDayInst && maxDateTimeDayInst) {
if (!flatbizDate.in(currentDate, minDateTimeDayInst.format(DayjsDateTypeEnum.YMD), maxDateTimeDayInst.format(DayjsDateTypeEnum.YMD))) {
return true;
}
} else if (minDateTimeDayInst) {
if (!flatbizDate.gte(currentDate, minDateTimeDayInst.format(DayjsDateTypeEnum.YMD))) {
return true;
}
} else if (maxDateTimeDayInst) {
if (!flatbizDate.gte(maxDateTimeDayInst.format(DayjsDateTypeEnum.YMD), currentDate)) {
return true;
}
}
if (!maxDays || !(dates !== null && dates !== void 0 && dates[0]) && !(dates !== null && dates !== void 0 && dates[1])) {
return false;
}
var tooLate = (dates === null || dates === void 0 ? void 0 : dates[0]) && current.diff(dates[0], 'days') > maxDays - 1;
var tooEarly = (dates === null || dates === void 0 ? void 0 : dates[1]) && dates[1].diff(current, 'days') > maxDays - 1;
return !!tooEarly || !!tooLate;
});
var onOpenChange = function onOpenChange(open) {
if (maxDays && maxDays > 0) {
if (open) {
setHackValue([null, null]);
setDates([null, null]);
} else {
setHackValue(null);
}
}
onAntdOpenChange === null || onAntdOpenChange === void 0 || onAntdOpenChange(open);
};
var getDisabledTime = hooks.useCallbackRef(function (current) {
var options = {
minDateTime: minDateTimeDayInst,
maxDateTime: maxDateTimeDayInst,
disabledHourList: disabledHourList,
disabledMinuteList: disabledMinuteList,
disabledSecondList: disabledSecondList
};
current = current || dayjs(date1 || new Date());
return {
disabledHours: function disabledHours() {
return getDisabledHour(current, options);
},
disabledMinutes: function disabledMinutes() {
return getDisabledMinute(current, options);
},
disabledSeconds: function disabledSeconds() {
return getDisabledSecond(current, options);
}
};
});
return /*#__PURE__*/jsx(DatePicker.RangePicker, _objectSpread2(_objectSpread2({
disabledDate: getDisabledDate,
disabledTime: getDisabledTime
}, otherProps), {}, {
showTime: showTime,
format: customFormat,
style: _objectSpread2({
width: '100%'
}, style),
value: hackValue || rangePickerValue,
onChange: onChangeDate,
onOpenChange: onOpenChange,
onCalendarChange: function onCalendarChange(val) {
return setDates(val);
}
}));
};
export { DateRangePickerWrapper as D };
//# sourceMappingURL=date-range-picker-wrapper-COuR09V1.js.map