@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
151 lines (150 loc) • 6.95 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TimeSelect", {
enumerable: true,
get: function() {
return TimeSelect;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
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 _popup = /*#__PURE__*/ _interop_require_default._(require("../popup"));
var _timedetail = /*#__PURE__*/ _interop_require_default._(require("../timedetail"));
var _typings = require("../../utils/typings");
var _configprovider = require("../configprovider");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
visible: false,
multiple: false,
defaultValue: [],
options: [],
optionKey: {
valueKey: 'value',
textKey: 'text',
childrenKey: 'children'
}
});
var TimeSelect = function TimeSelect(props) {
var locale = (0, _configprovider.useConfig)().locale;
var _ref = (0, _object_spread._)({}, defaultProps, props), visible = _ref.visible, className = _ref.className, style = _ref.style, title = _ref.title, defaultValue = _ref.defaultValue, options = _ref.options, optionKey = _ref.optionKey, multiple = _ref.multiple, onSelect = _ref.onSelect, onDateChange = _ref.onDateChange, onTimeChange = _ref.onTimeChange, rest = (0, _object_without_properties._)(_ref, [
"visible",
"className",
"style",
"title",
"defaultValue",
"options",
"optionKey",
"multiple",
"onSelect",
"onDateChange",
"onTimeChange"
]);
var _useState = (0, _sliced_to_array._)((0, _react.useState)(function() {
// 设置 defaultValue 时，默认展示选中的第一个 date
if (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) {
return defaultValue[0][optionKey.valueKey];
}
// 否则展示 options 中第一个 date
if (options === null || options === void 0 ? void 0 : options.length) {
return options[0][optionKey.valueKey];
}
return '';
}), 2), activeDate = _useState[0], setActiveDate = _useState[1];
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(function() {
return defaultValue || [];
}), 2), activeTime = _useState1[0], setActiveTime = _useState1[1];
var classPrefix = 'nut-timeselect';
var closeFun = function closeFun() {
onSelect && onSelect(activeTime);
};
var handleSelectTime = function handleSelectTime(selectTime) {
var newActiveTime = (0, _to_consumable_array._)(activeTime);
var date = newActiveTime.find(function(item) {
return item[optionKey.valueKey] === activeDate;
});
if (date) {
var timeIndex = date[optionKey.childrenKey].findIndex(function(time) {
return time[optionKey.valueKey] === selectTime[optionKey.valueKey];
});
if (timeIndex > -1) {
if (multiple) {
date[optionKey.childrenKey].splice(timeIndex, 1);
} else {
newActiveTime = [];
}
} else if (multiple) {
date[optionKey.childrenKey].push((0, _object_spread._)({}, selectTime));
} else {
var _obj;
newActiveTime = [
(_obj = {}, (0, _define_property._)(_obj, optionKey.valueKey, activeDate), (0, _define_property._)(_obj, optionKey.childrenKey, [
(0, _object_spread._)({}, selectTime)
]), _obj)
];
}
} else if (multiple) {
var _obj1;
newActiveTime.push((_obj1 = {}, (0, _define_property._)(_obj1, optionKey.valueKey, activeDate), (0, _define_property._)(_obj1, optionKey.childrenKey, [
(0, _object_spread._)({}, selectTime)
]), _obj1));
} else {
var _obj2;
newActiveTime = [
(_obj2 = {}, (0, _define_property._)(_obj2, optionKey.valueKey, activeDate), (0, _define_property._)(_obj2, optionKey.childrenKey, [
(0, _object_spread._)({}, selectTime)
]), _obj2)
];
}
newActiveTime = newActiveTime.filter(function(item) {
var _item_optionKey_childrenKey;
return ((_item_optionKey_childrenKey = item[optionKey.childrenKey]) === null || _item_optionKey_childrenKey === void 0 ? void 0 : _item_optionKey_childrenKey.length) > 0;
});
setActiveTime(newActiveTime);
onTimeChange && onTimeChange(selectTime, newActiveTime);
};
var handleChange = function handleChange(date) {
setActiveDate(date[optionKey.valueKey]);
onDateChange && onDateChange(date, activeTime);
};
return /*#__PURE__*/ _react.default.createElement(_popup.default, (0, _object_spread._)({
closeable: true,
round: true,
visible: visible,
position: "bottom",
title: title || locale.timeselect.pickupTime,
style: (0, _object_spread._)({}, style),
onClose: closeFun
}, rest), /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)(classPrefix, className)
}, /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-content")
}, /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-content-left")
}, options.map(function(item) {
return /*#__PURE__*/ _react.default.createElement("div", {
key: item[optionKey.valueKey],
className: (0, _classnames.default)('nut-timepannel', {
active: item[optionKey.valueKey] === activeDate
}),
onClick: function onClick() {
return handleChange(item);
}
}, item[optionKey.textKey]);
})), /*#__PURE__*/ _react.default.createElement(_timedetail.default, {
options: options,
optionKey: optionKey,
activeDate: activeDate,
activeTime: activeTime,
onSelect: handleSelectTime
}))));
};
TimeSelect.displayName = 'NutTimeSelect';