gui-one-nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
173 lines (172 loc) • 6.68 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React__default, { useState, useEffect } from 'react';
import { P as Popup } from './popup.taro-33d0bbc8.js';
import { T as TimePannel } from './timepannel.taro-9904f6e6.js';
import { T as TimeDetail } from './timedetail.taro-519808cf.js';
import { c as cn } from './bem-893ad28d.js';
import { u as useConfig } from './configprovider.taro-6c7b3056.js';
var defaultProps = {
className: '',
style: {},
visible: false,
height: '20%',
multiple: false,
currentKey: 0,
currentTime: [],
title: '取件时间',
dates: [],
times: []
};
var TimeSelect = function TimeSelect(props) {
useConfig();
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
visible = _defaultProps$props.visible,
className = _defaultProps$props.className,
height = _defaultProps$props.height,
title = _defaultProps$props.title,
currentKey = _defaultProps$props.currentKey,
currentTime = _defaultProps$props.currentTime,
dates = _defaultProps$props.dates,
times = _defaultProps$props.times,
multiple = _defaultProps$props.multiple,
select = _defaultProps$props.select,
pannelChange = _defaultProps$props.pannelChange,
timeChange = _defaultProps$props.timeChange,
onSelect = _defaultProps$props.onSelect,
onPannelChange = _defaultProps$props.onPannelChange,
onTimeChange = _defaultProps$props.onTimeChange;
var _useState = useState(currentKey),
_useState2 = _slicedToArray(_useState, 2),
activeKey = _useState2[0],
setActiveKey = _useState2[1];
var _useState3 = useState(currentTime.length ? currentTime : [{
key: currentKey,
list: []
}]),
_useState4 = _slicedToArray(_useState3, 2),
activeTime = _useState4[0],
setActiveTime = _useState4[1];
var _useState5 = useState(visible),
_useState6 = _slicedToArray(_useState5, 2),
popVisible = _useState6[0],
setPopVisible = _useState6[1];
var popStyle = {
width: '100%',
height: height
};
var b = cn('timeselect');
// popup 的关闭回调, 执行 select 函数更改外部 visible
var closeFun = function closeFun() {
if (onSelect) {
onSelect(activeTime);
} else if (select) {
select(activeTime);
}
};
// 选择配送时间回调
var handleSelectTime = function handleSelectTime(time) {
var curTimeData = {};
var curIndex = -1;
for (var i = 0; i < activeTime.length; i++) {
if (String(activeTime[i].key) === String(activeKey)) {
curTimeData = activeTime[i];
curIndex = i;
break;
}
}
var curTimeIndex = curTimeData.list.findIndex(function (item) {
return String(item) === String(time);
});
if (curTimeIndex === -1) {
curTimeData.list.push(time);
} else {
curTimeData.list.splice(curTimeIndex, 1);
}
var resultTimeData = _toConsumableArray(activeTime);
resultTimeData.splice(curIndex, 1, curTimeData);
setActiveTime(resultTimeData);
if (onTimeChange) {
onTimeChange(time, resultTimeData);
} else if (timeChange) {
timeChange(time, resultTimeData);
}
};
// 选择日期的回调
var handleChange = function handleChange(pannelKey) {
var resultTimeData = _toConsumableArray(activeTime);
if (String(pannelKey) !== String(activeKey)) {
setActiveKey === null || setActiveKey === void 0 ? void 0 : setActiveKey(pannelKey);
if (multiple) {
var curTimeDataIndex = activeTime.findIndex(function (item) {
return String(item.key) === String(pannelKey);
});
if (curTimeDataIndex === -1) {
resultTimeData.push({
key: pannelKey,
list: []
});
setActiveTime(resultTimeData);
}
} else {
setActiveTime([{
key: pannelKey,
list: []
}]);
}
}
if (onPannelChange) {
onPannelChange(pannelKey, resultTimeData);
} else if (pannelChange) {
pannelChange(pannelKey, resultTimeData);
}
};
// 选中的日期增加 active 类名
var getTimePannelClass = function getTimePannelClass(dataItem) {
if (String(dataItem['pannel-key']) === String(activeKey)) {
return 'nut-timepannel-active';
}
return '';
};
// 根据外部传入 visible 进行组件的显隐展示
useEffect(function () {
setPopVisible(visible);
}, [visible]);
return React__default.createElement(React__default.Fragment, null, React__default.createElement(Popup, {
closeable: true,
round: true,
visible: popVisible,
position: "bottom",
style: popStyle,
onClose: function onClose() {
closeFun();
}
}, React__default.createElement("div", {
className: "".concat(b(), " ").concat(className || '')
}, React__default.createElement("div", {
className: "nut-timeselect__title"
}, title), React__default.createElement("div", {
className: "nut-timeselect__content"
}, React__default.createElement("div", {
className: "nut-timeselect__content-left"
}, dates.map(function (dataItem, index) {
return React__default.createElement(TimePannel, {
date: dataItem.date,
className: getTimePannelClass(dataItem),
key: String(dataItem['pannel-key'] || index),
curKey: String(dataItem['pannel-key'] || index),
change: handleChange
});
})), React__default.createElement(TimeDetail, {
times: times,
currentKey: String(activeKey),
currentTime: activeTime,
select: handleSelectTime
})))));
};
TimeSelect.defaultProps = defaultProps;
TimeSelect.displayName = 'NutTimeSelect';
export { TimeSelect as T };