@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
169 lines (168 loc) • 8.1 kB
JavaScript
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
import React, { useState, useEffect, useImperativeHandle } from "react";
import isEqual from "react-fast-compare";
import classNames from "classnames";
import Picker from "../picker";
import { useConfig } from "../configprovider";
import { usePropsValue } from "../../hooks/use-props-value";
import { ComponentDefaults } from "../../utils/typings";
import { isDate } from "../../utils/is-date";
import { formatValue, generateDatePickerRanges, generatePickerColumnWithCallback, getDatePartValue, handlePickerValueChange } from "./utils";
var currentYear = new Date().getFullYear();
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
visible: false,
title: '',
type: 'date',
showChinese: false,
threeDimensional: true,
minuteStep: 1,
startDate: new Date(currentYear - 10, 0, 1),
endDate: new Date(currentYear + 10, 11, 31)
});
var InternalPicker = function(props, ref) {
var _ref = _object_spread({}, defaultProps, props), startDate = _ref.startDate, endDate = _ref.endDate, type = _ref.type, showChinese = _ref.showChinese, minuteStep = _ref.minuteStep, visible = _ref.visible, title = _ref.title, defaultValue = _ref.defaultValue, _ref_pickerProps = _ref.pickerProps, pickerProps = _ref_pickerProps === void 0 ? {} : _ref_pickerProps, formatter = _ref.formatter, onClose = _ref.onClose, onCancel = _ref.onCancel, onConfirm = _ref.onConfirm, filter = _ref.filter, onChange = _ref.onChange, threeDimensional = _ref.threeDimensional, className = _ref.className, style = _ref.style, children = _ref.children, rest = _object_without_properties(_ref, [
"startDate",
"endDate",
"type",
"showChinese",
"minuteStep",
"visible",
"title",
"defaultValue",
"pickerProps",
"formatter",
"onClose",
"onCancel",
"onConfirm",
"filter",
"onChange",
"threeDimensional",
"className",
"style",
"children"
]);
var locale = useConfig().locale;
var lang = locale.datepicker;
var zhCNType = {
day: lang.day,
year: lang.year,
month: lang.month,
hour: lang.hour,
minute: lang.min,
seconds: lang.seconds
};
var classPrefix = 'nut-datepicker';
var cls = classNames(classPrefix, className);
var _useState = _sliced_to_array(useState([]), 2), pickerValue = _useState[0], setPickerValue = _useState[1];
var _useState1 = _sliced_to_array(useState([]), 2), pickerOptions = _useState1[0], setPickerOptions = _useState1[1];
var _usePropsValue = _sliced_to_array(usePropsValue({
value: props.value && formatValue(props.value, startDate, endDate),
defaultValue: props.defaultValue && formatValue(props.defaultValue, startDate, endDate),
finalValue: 0
}), 2), selectedDate = _usePropsValue[0], setSelectedDate = _usePropsValue[1];
var _useState2 = _sliced_to_array(useState(selectedDate), 2), innerDate = _useState2[0], setInnerDate = _useState2[1];
var _usePropsValue1 = _sliced_to_array(usePropsValue({
value: props.visible,
defaultValue: false,
finalValue: false
}), 2), innerVisible = _usePropsValue1[0], setInnerVisible = _usePropsValue1[1];
var actions = {
open: function() {
setInnerVisible(true);
},
close: function() {
setInnerVisible(false);
}
};
useImperativeHandle(ref, function() {
return actions;
});
var handleDateComparison = function(newDate, selectedOptions, index) {
if (newDate && isDate(newDate)) {
var _this;
if (!isEqual((_this = new Date(selectedDate)) === null || _this === void 0 ? void 0 : _this.getTime(), newDate === null || newDate === void 0 ? void 0 : newDate.getTime())) {
setInnerDate(formatValue(newDate, startDate, endDate));
}
onChange === null || onChange === void 0 ? void 0 : onChange(selectedOptions, [
String(newDate.getFullYear()),
String(newDate.getMonth() + 1),
String(newDate.getDate())
], index);
}
};
var handleConfirmDateComparison = function(newDate) {
if (newDate && isDate(newDate)) {
var _this;
if (!isEqual((_this = new Date(selectedDate)) === null || _this === void 0 ? void 0 : _this.getTime(), newDate === null || newDate === void 0 ? void 0 : newDate.getTime())) {
setSelectedDate(formatValue(newDate, startDate, endDate));
}
}
};
var handleCancel = function() {
setInnerDate(selectedDate);
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
};
var handleClose = function() {
setInnerVisible(false);
onClose === null || onClose === void 0 ? void 0 : onClose();
};
var handleConfirm = function(options, value) {
handlePickerValueChange(options, value, 0, type, defaultValue || startDate || endDate, handleConfirmDateComparison);
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(options, value);
};
var handleChange = function(selectedOptions, selectedValue, index) {
innerVisible && handlePickerValueChange(selectedOptions, selectedValue, index, type, defaultValue || startDate || endDate, handleDateComparison);
};
var generatePickerColumns = function() {
var dateRanges = generateDatePickerRanges(type, innerDate, startDate, endDate);
var columns = dateRanges.map(function(rangeConfig, columnIndex) {
var columnType = rangeConfig.type, range = rangeConfig.range;
var selectedValue = getDatePartValue(columnType, innerDate);
var pickerColumn = generatePickerColumnWithCallback(range[0], range[1], selectedValue, columnType, minuteStep, function(selectedIndex, options) {
var _options_selectedIndex;
pickerValue[columnIndex] = (_options_selectedIndex = options[selectedIndex]) === null || _options_selectedIndex === void 0 ? void 0 : _options_selectedIndex.value;
setPickerValue(_to_consumable_array(pickerValue));
}, showChinese, zhCNType, formatter);
if (filter === null || filter === void 0 ? void 0 : filter(columnType, pickerColumn)) {
return filter(columnType, pickerColumn);
}
return pickerColumn;
});
return columns || [];
};
useEffect(function() {
setInnerDate(selectedDate);
}, [
selectedDate
]);
useEffect(function() {
setPickerOptions(generatePickerColumns());
}, [
innerDate,
startDate,
endDate
]);
return /*#__PURE__*/ React.createElement(React.Fragment, null, typeof children === 'function' && children(selectedDate), /*#__PURE__*/ React.createElement("div", _object_spread({
className: cls,
style: style
}, rest), pickerOptions.length && /*#__PURE__*/ React.createElement(Picker, _object_spread_props(_object_spread({}, pickerProps), {
title: title,
visible: innerVisible,
value: pickerValue,
options: pickerOptions,
onClose: handleClose,
onCancel: handleCancel,
onConfirm: handleConfirm,
onChange: function(param) {
var value = param.value, index = param.index, selectedOptions = param.selectedOptions;
handleChange(selectedOptions, value, index);
},
threeDimensional: threeDimensional
}))));
};
var DatePicker = /*#__PURE__*/ React.forwardRef(InternalPicker);
export default DatePicker;