@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
119 lines (118 loc) • 6.63 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DatePickerView", {
enumerable: true,
get: function() {
return DatePickerView;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _reactfastcompare = /*#__PURE__*/ _interop_require_default._(require("react-fast-compare"));
var _padzero = require("../../utils/pad-zero");
var _index = /*#__PURE__*/ _interop_require_default._(require("../pickerview/index"));
var _configprovider = require("../configprovider");
var _usepropsvalue = require("../../hooks/use-props-value");
var _typings = require("../../utils/typings");
var _isdate = require("../../utils/is-date");
var _utils = require("../datepicker/utils");
var currentYear = new Date().getFullYear();
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
type: 'date',
showChinese: false,
threeDimensional: true,
minuteStep: 1,
startDate: new Date(currentYear - 10, 0, 1),
endDate: new Date(currentYear + 10, 11, 31)
});
var DatePickerView = function DatePickerView(props) {
var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, type = _$_object_spread.type, showChinese = _$_object_spread.showChinese, minuteStep = _$_object_spread.minuteStep, defaultValue = _$_object_spread.defaultValue, formatter = _$_object_spread.formatter, filter = _$_object_spread.filter, onChange = _$_object_spread.onChange, threeDimensional = _$_object_spread.threeDimensional, className = _$_object_spread.className, style = _$_object_spread.style;
var classPrefix = 'nut-datepickerview';
var cls = (0, _classnames.default)(classPrefix, className);
var locale = (0, _configprovider.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 _useState = (0, _sliced_to_array._)((0, _react.useState)([]), 2), pickerValue = _useState[0], setPickerValue = _useState[1];
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), pickerOptions = _useState1[0], setPickerOptions = _useState1[1];
var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
value: props.value && (0, _utils.formatValue)(props.value, startDate, endDate),
defaultValue: defaultValue && (0, _utils.formatValue)(defaultValue, startDate, endDate),
finalValue: 0
}), 2), selectedDate = _usePropsValue[0], setSelectedDate = _usePropsValue[1];
var handleDateComparison = function handleDateComparison(newDate, selectedOptions, index) {
if (newDate && (0, _isdate.isDate)(newDate)) {
var _this;
if (!(0, _reactfastcompare.default)((_this = new Date(selectedDate)) === null || _this === void 0 ? void 0 : _this.getTime(), newDate === null || newDate === void 0 ? void 0 : newDate.getTime())) {
setSelectedDate((0, _utils.formatValue)(newDate, startDate, endDate));
onChange === null || onChange === void 0 ? void 0 : onChange(selectedOptions, [
String(newDate.getFullYear()),
(0, _padzero.padZero)(newDate.getMonth() + 1),
(0, _padzero.padZero)(newDate.getDate())
], index);
}
}
};
var handleChange = function handleChange(selectedOptions, selectedValue, index) {
(0, _utils.handlePickerValueChange)(selectedOptions, selectedValue, index, type, defaultValue || startDate || endDate, handleDateComparison);
};
var generatePickerColumns = function generatePickerColumns() {
var dateRanges = (0, _utils.generateDatePickerRanges)(type, selectedDate, startDate, endDate);
var columns = dateRanges.map(function(rangeConfig, columnIndex) {
var columnType = rangeConfig.type, range = rangeConfig.range;
var selectedValue = (0, _utils.getDatePartValue)(columnType, selectedDate);
var pickerColumn = (0, _utils.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((0, _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 || [];
};
(0, _react.useEffect)(function() {
var _this, _this1;
if (!(0, _reactfastcompare.default)((_this = new Date(selectedDate)) === null || _this === void 0 ? void 0 : _this.getTime(), (_this1 = new Date(selectedDate)) === null || _this1 === void 0 ? void 0 : _this1.getTime())) {
setSelectedDate(selectedDate);
}
}, [
selectedDate
]);
(0, _react.useEffect)(function() {
setPickerOptions(generatePickerColumns());
}, [
selectedDate,
startDate,
endDate
]);
return /*#__PURE__*/ _react.default.createElement("div", {
className: cls,
style: style
}, pickerOptions.length && /*#__PURE__*/ _react.default.createElement(_index.default, {
value: pickerValue,
options: pickerOptions,
onChange: function onChange(param) {
var selectedOptions = param.selectedOptions, value = param.value, index = param.index;
handleChange(selectedOptions, value, index);
},
threeDimensional: threeDimensional
}));
};
DatePickerView.displayName = 'NutDatePickerView';