@nutui/nutui-react 2.0.0-alpha.14 → 2.0.0-alpha.15

package/dist/esm/TimeDetail.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -21,54 +20,53 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useEffect } from "react";
-import { c as cn } from "./bem.js";
-import { useConfig } from "./ConfigProvider.js";
-import "@bem-react/classname";
-var defaultProps = {
-  className: "",
-  currentKey: 0,
-  currentTime: [],
-  times: [],
-  select: function select() {
-    return null;
+import React__default, { useMemo, useCallback } from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  activeDate: "",
+  activeTime: [],
+  options: [],
+  optionKey: {
+    valueKey: "value",
+    textKey: "text",
+    childrenKey: "children"
+  },
+  onSelect: function onSelect() {
   }
-};
+});
 var TimeDetail = function TimeDetail2(props) {
-  useConfig();
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, times = _defaultProps$props.times, className = _defaultProps$props.className, currentKey = _defaultProps$props.currentKey, currentTime = _defaultProps$props.currentTime, select2 = _defaultProps$props.select;
-  var b = cn("timedetail");
-  var _useState = useState([]), _useState2 = _slicedToArray(_useState, 2), renderData = _useState2[0], setRenderData = _useState2[1];
-  useEffect(function() {
-    var currentData = times.find(function(timesItem) {
-      return String(timesItem.key) === String(currentKey);
-    });
-    var renderData2 = currentData ? currentData.list : [];
-    setRenderData(renderData2);
-  }, [times, currentKey]);
-  var handleTime = function handleTime2(time) {
-    select2(time);
-  };
-  var getDetailClass = function getDetailClass2(item) {
-    var initClass = "nut-timedetail__item";
-    var curTimeData = currentTime.find(function(item2) {
-      return String(item2.key) === String(currentKey);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), options = _defaultProps$props.options, optionKey = _defaultProps$props.optionKey, className = _defaultProps$props.className, activeDate = _defaultProps$props.activeDate, activeTime = _defaultProps$props.activeTime, onSelect2 = _defaultProps$props.onSelect;
+  var classPrefix = "nut-timedetail";
+  var timeList = useMemo(function() {
+    return (options === null || options === void 0 ? void 0 : options.find(function(item) {
+      return item[optionKey.valueKey] === activeDate;
+    })) || _defineProperty({}, optionKey.childrenKey, []);
+  }, [options, optionKey, activeDate]);
+  var isActive = useCallback(function(timeKey) {
+    var date = activeTime.find(function(item) {
+      return item[optionKey.valueKey] === activeDate;
     });
-    if (curTimeData && curTimeData.list && curTimeData.list.includes(item)) {
-      initClass += " nut-timedetail__item-active";
+    if (date !== null && date !== void 0 && date[optionKey.childrenKey]) {
+      var time = date === null || date === void 0 ? void 0 : date[optionKey.childrenKey].find(function(time2) {
+        return time2[optionKey.valueKey] === timeKey;
+      });
+      return time;
     }
-    return initClass;
-  };
+    return false;
+  }, [activeTime, optionKey, activeDate]);
   return React__default.createElement("div", {
-    className: "".concat(b(), " ").concat(className || "")
-  }, renderData.map(function(item, index) {
+    className: classNames(classPrefix, className)
+  }, timeList[optionKey.childrenKey].map(function(item) {
     return React__default.createElement("span", {
-      className: getDetailClass(item),
-      key: item,
+      className: classNames("".concat(classPrefix, "__item"), {
+        active: isActive(item[optionKey.valueKey])
+      }),
+      key: item[optionKey.valueKey],
       onClick: function onClick() {
-        return handleTime(item);
+        return onSelect2(item);
       }
-    }, item);
+    }, item[optionKey.textKey]);
   }));
 };
 TimeDetail.defaultProps = defaultProps;

package/dist/esm/TimeSelect/style/index.js

@@ -1,4 +1,3 @@
 import '../../Popup/style'
-import '../../TimePannel/style'
 import '../../TimeDetail/style'
 import '../../../packages/timeselect/timeselect.scss'

package/dist/esm/TimeSelect/style/style.css

@@ -1 +1 @@
-.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 20px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 20px) 0 0 var(--nutui-popup-border-radius, 20px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}.nut-theme-dark .nut-timepannel{background-color:#141414;color:#828282}.nut-theme-dark .nut-timepannel--curr{background-color:#141414;color:#e6e6e6}.nut-timepannel{height:var(--nutui-timeselect-timepannel-height, 40px);line-height:40px;text-align:center;color:var(--nutui-timeselect-timepannel-text-color, var(--nutui-gray-2, #757575));font-size:var(--nutui-timeselect-timepannel-font-size, var(--nutui-font-size-2, 14px))}.nut-theme-dark .nut-timedetail{background-color:#1f1f1f}.nut-theme-dark .nut-timedetail__detail__list__item{background-color:#0a0a0a;color:#e6e6e6}.nut-theme-dark .nut-timedetail__detail__list__item--curr{color:var(--nutui-timeselect-timedetail-item-cur-text-color, var(--nutui-brand-color, #fa2c19))}.nut-timedetail{display:flex;align-content:flex-start;flex-wrap:wrap;padding:0 0 50px 13px}.nut-timedetail__item{width:100px;height:50px;line-height:50px;text-align:center;margin-right:10px;margin-bottom:10px;background-color:var(--nutui-gray-4, #f4f4f4);color:var(--nutui-gray-1, #1a1a1a);border-radius:5px;font-size:14px;border:1px solid transparent;font-weight:700}.nut-timedetail__item-active{background-color:#fa2c19}.nut-timedetail__item-active{background-color:var(--nutui-brand-color-opacity);border:1px solid var(--nutui-brand-color, #fa2c19);color:var(--nutui-brand-color, #fa2c19)}.nut-theme-dark .nut-timeselect{background-color:#1f1f1f}.nut-theme-dark .nut-timeselect__title{background-color:#1f1f1f;color:#e6e6e6}.nut-theme-dark .nut-timeselect__content-left{background-color:#141414;color:#e6e6e6}.nut-theme-dark .nut-timeselect__content-left .nut-timepannel-active{background-color:#1f1f1f;color:#e6e6e6}.nut-theme-dark .nut-timedetail__item{background-color:#0a0a0a;color:#e6e6e6}.nut-theme-dark .nut-timedetail__item-active{background-color:#fa2c19}.nut-timeselect{background-color:var(--nutui-gray-6, #ffffff);display:flex;flex-direction:column;height:100%}.nut-timeselect__title{height:var(--nutui-timeselect-title-height, 50px);line-height:var(--nutui-timeselect-title-line-height, 50px);margin-bottom:10px;font-size:var(--nutui-timeselect-title-font-size, var(--nutui-font-size-2, 14px));background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);text-align:center}.nut-timeselect__content{display:flex;flex:1}.nut-timeselect__content-left{width:140px;min-width:140px;height:100%;overflow:auto;background-color:var(--nutui-gray-5, #f8f8f8);color:var(--nutui-gray-1, #1a1a1a)}.nut-timeselect__content-left .nut-timepannel-active{background-color:var(--nutui-brand-color, #fa2c19)}.nut-timeselect .nut-timepannel-active{background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);font-weight:700}
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 20px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 20px) 0 0 var(--nutui-popup-border-radius, 20px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}.nut-timedetail{display:flex;align-content:flex-start;flex-wrap:wrap;padding:0 0 50px 13px}.nut-timedetail__item{width:var(--nutui-timeselect-time-width, 100px);height:var(--nutui-timeselect-time-height, 50px);line-height:var(--nutui-timeselect-time-line-height, 50px);text-align:center;margin:var(--nutui-timeselect-time-margin, 0 10px 10px 0);background:var(--nutui-timeselect-time-background, var(--nutui-gray-4, #f4f4f4));color:var(--nutui-timeselect-time-color, var(--nutui-gray-1, #1a1a1a));border-radius:5px;font-size:var(--nutui-timeselect-font-size, 14px);border:1px solid transparent;font-weight:700}.nut-timedetail__item.active{background-color:var(--nutui-timeselect-time-active-background, var(--nutui-gray-5, #f8f8f8));border:1px solid var(--nutui-timeselect-time-active-color, var(--nutui-brand-color, #fa2c19));color:var(--nutui-timeselect-time-active-color, var(--nutui-brand-color, #fa2c19))}.nut-timeselect{background-color:var(--nutui-gray-6, #ffffff);display:flex;flex-direction:column;height:100%}.nut-timeselect__title{height:var(--nutui-timeselect-title-height, 50px);line-height:var(--nutui-timeselect-title-line-height, 50px);margin-bottom:10px;font-size:var(--nutui-timeselect-title-font-size, var(--nutui-font-size-2, 14px));background:var(--nutui-timeselect-title-background, var(--nutui-gray-6, #ffffff));color:var(--nutui-gray-1, #1a1a1a);text-align:center}.nut-timeselect__content{display:flex;flex:1}.nut-timeselect__content-left{width:var(--nutui-timeselect-date-width, 140px);min-width:var(--nutui-timeselect-date-width, 140px);height:100%;overflow:auto;background:var(--nutui-gray-5, #f8f8f8)}.nut-timepannel{height:var(--nutui-timeselect-date-height, 40px);line-height:var(--nutui-timeselect-date-line-height, 40px);text-align:center;color:var(--nutui-timeselect-date-color, var(--nutui-gray-2, #757575));font-size:var(--nutui-timeselect-date-font-size, var(--nutui-font-size-2, 14px))}.nut-timepannel.active{background:var(--nutui-gray-6, #ffffff);color:var(--nutui-timeselect-date-active-color, var(--nutui-gray-1, #1a1a1a));font-weight:700}

package/dist/esm/TimeSelect.js

@@ -1,6 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["visible", "className", "style", "title", "defaultValue", "options", "optionKey", "multiple", "onSelect", "onDateChange", "onTimeChange"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -22,141 +24,116 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useEffect } from "react";
+import React__default, { useState } from "react";
+import classNames from "classnames";
 import Popup from "./Popup.js";
-import TimePannel from "./TimePannel.js";
 import TimeDetail from "./TimeDetail.js";
-import { c as cn } from "./bem.js";
+import { C as ComponentDefaults } from "./typings.js";
 import { useConfig } from "./ConfigProvider.js";
-import "@bem-react/classname";
-var defaultProps = {
-  className: "",
-  style: {},
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   visible: false,
-  height: "20%",
   multiple: false,
-  currentKey: 0,
-  currentTime: [],
-  title: "取件时间",
-  dates: [],
-  times: []
-};
+  defaultValue: [],
+  options: [],
+  optionKey: {
+    valueKey: "value",
+    textKey: "text",
+    childrenKey: "children"
+  }
+});
 var TimeSelect = function TimeSelect2(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
-  };
-  var b = cn("timeselect");
-  var closeFun = function closeFun2() {
-    if (onSelect) {
-      onSelect(activeTime);
-    } else if (select) {
-      select(activeTime);
+  var _useConfig = useConfig(), locale = _useConfig.locale;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), visible = _defaultProps$props.visible, className = _defaultProps$props.className, style = _defaultProps$props.style, title = _defaultProps$props.title, defaultValue = _defaultProps$props.defaultValue, options = _defaultProps$props.options, optionKey = _defaultProps$props.optionKey, multiple = _defaultProps$props.multiple, onSelect = _defaultProps$props.onSelect, onDateChange = _defaultProps$props.onDateChange, onTimeChange = _defaultProps$props.onTimeChange, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _useState = useState(function() {
+    if (defaultValue !== null && defaultValue !== void 0 && defaultValue.length) {
+      return defaultValue[0][optionKey.valueKey];
     }
-  };
-  var handleSelectTime = function handleSelectTime2(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);
+    if (options !== null && options !== void 0 && options.length) {
+      return options[0][optionKey.valueKey];
     }
+    return "";
+  }), _useState2 = _slicedToArray(_useState, 2), activeDate = _useState2[0], setActiveDate = _useState2[1];
+  var _useState3 = useState(function() {
+    return defaultValue || [];
+  }), _useState4 = _slicedToArray(_useState3, 2), activeTime = _useState4[0], setActiveTime = _useState4[1];
+  var classPrefix = "nut-timeselect";
+  var closeFun = function closeFun2() {
+    onSelect && onSelect(activeTime);
   };
-  var handleChange = function handleChange2(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);
+  var handleSelectTime = function handleSelectTime2(selectTime) {
+    var newActiveTime = _toConsumableArray(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(_objectSpread({}, selectTime));
       } else {
-        setActiveTime([{
-          key: pannelKey,
-          list: []
-        }]);
+        var _ref;
+        newActiveTime = [(_ref = {}, _defineProperty(_ref, optionKey.valueKey, activeDate), _defineProperty(_ref, optionKey.childrenKey, [_objectSpread({}, selectTime)]), _ref)];
       }
+    } else if (multiple) {
+      var _newActiveTime$push;
+      newActiveTime.push((_newActiveTime$push = {}, _defineProperty(_newActiveTime$push, optionKey.valueKey, activeDate), _defineProperty(_newActiveTime$push, optionKey.childrenKey, [_objectSpread({}, selectTime)]), _newActiveTime$push));
+    } else {
+      var _ref2;
+      newActiveTime = [(_ref2 = {}, _defineProperty(_ref2, optionKey.valueKey, activeDate), _defineProperty(_ref2, optionKey.childrenKey, [_objectSpread({}, selectTime)]), _ref2)];
     }
-    if (onPannelChange) {
-      onPannelChange(pannelKey, resultTimeData);
-    } else if (pannelChange) {
-      pannelChange(pannelKey, resultTimeData);
-    }
+    newActiveTime = newActiveTime.filter(function(item) {
+      var _item$optionKey$child;
+      return ((_item$optionKey$child = item[optionKey.childrenKey]) === null || _item$optionKey$child === void 0 ? void 0 : _item$optionKey$child.length) > 0;
+    });
+    setActiveTime(newActiveTime);
+    onTimeChange && onTimeChange(selectTime, newActiveTime);
   };
-  var getTimePannelClass = function getTimePannelClass2(dataItem) {
-    if (String(dataItem["paneKey"]) === String(activeKey)) {
-      return "nut-timepannel-active";
-    }
-    return "";
+  var handleChange = function handleChange2(date) {
+    setActiveDate(date[optionKey.valueKey]);
+    onDateChange && onDateChange(date, activeTime);
   };
-  useEffect(function() {
-    setPopVisible(visible);
-  }, [visible]);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Popup, {
+  return React__default.createElement(Popup, _objectSpread({
     closeable: true,
     round: true,
-    visible: popVisible,
+    visible,
     position: "bottom",
-    style: popStyle,
-    onClose: function onClose() {
-      closeFun();
-    }
-  }, React__default.createElement("div", {
-    className: "".concat(b(), " ").concat(className || "")
+    style: _objectSpread({
+      width: "100%",
+      height: "20%"
+    }, style),
+    onClose: closeFun
+  }, rest), React__default.createElement("div", {
+    className: classNames(classPrefix, className)
   }, React__default.createElement("div", {
-    className: "nut-timeselect__title"
-  }, title), React__default.createElement("div", {
-    className: "nut-timeselect__content"
+    className: "".concat(classPrefix, "__title")
+  }, title || locale.timeselect.pickupTime), React__default.createElement("div", {
+    className: "".concat(classPrefix, "__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["paneKey"] || index),
-      curKey: String(dataItem["paneKey"] || index),
-      change: handleChange
-    });
+    className: "".concat(classPrefix, "__content-left")
+  }, options.map(function(item) {
+    return React__default.createElement("div", {
+      key: item[optionKey.valueKey],
+      className: classNames("nut-timepannel", {
+        active: item[optionKey.valueKey] === activeDate
+      }),
+      onClick: function onClick() {
+        return handleChange(item);
+      }
+    }, item[optionKey.textKey]);
   })), React__default.createElement(TimeDetail, {
-    times,
-    currentKey: String(activeKey),
-    currentTime: activeTime,
-    select: handleSelectTime
-  })))));
+    options,
+    optionKey,
+    activeDate,
+    activeTime,
+    onSelect: handleSelectTime
+  }))));
 };
 TimeSelect.defaultProps = defaultProps;
 TimeSelect.displayName = "NutTimeSelect";

package/dist/esm/nutui-react.es.js

@@ -52,7 +52,7 @@ import { default as default52 } from "./Badge.js";
 import { default as default53 } from "./Dialog.js";
 import { default as default54 } from "./Drag.js";
 import { default as default55 } from "./Empty.js";
-import { default as default56 } from "./Infiniteloading.js";
+import { default as default56 } from "./InfiniteLoading.js";
 import { default as default57 } from "./NoticeBar.js";
 import { default as default58 } from "./Notify.js";
 import { default as default59 } from "./Popover.js";
@@ -87,10 +87,9 @@ import { default as default87 } from "./Video.js";
 import { default as default88 } from "./Barrage.js";
 import { default as default89 } from "./Card.js";
 import { default as default90 } from "./TimeDetail.js";
-import { default as default91 } from "./TimePannel.js";
-import { default as default92 } from "./TimeSelect.js";
-import { default as default93 } from "./TrendArrow.js";
-import { default as default94 } from "./WaterMark.js";
+import { default as default91 } from "./TimeSelect.js";
+import { default as default92 } from "./TrendArrow.js";
+import { default as default93 } from "./WaterMark.js";
 export {
   default51 as ActionSheet,
   default26 as Address,
@@ -132,7 +131,7 @@ export {
   default6 as Image,
   default75 as ImagePreview,
   default76 as Indicator,
-  default56 as Infiniteloading,
+  default56 as InfiniteLoading,
   default35 as Input,
   default36 as InputNumber,
   default12 as Layout,
@@ -177,12 +176,11 @@ export {
   default86 as Tag,
   default49 as TextArea,
   default90 as TimeDetail,
-  default91 as TimePannel,
-  default92 as TimeSelect,
+  default91 as TimeSelect,
   default64 as Toast,
-  default93 as TrendArrow,
+  default92 as TrendArrow,
   default50 as Uploader,
   default87 as Video,
   default77 as VirtualList,
-  default94 as WaterMark
+  default93 as WaterMark
 };

package/dist/esm/types/src/locales/base.d.ts

@@ -64,7 +64,7 @@ export interface BaseLang {
     };
     signature: {
         reSign: string;
-        unSupportTpl: string;
+        unsupported: string;
     };
     ecard: {
         chooseText: string;

package/dist/esm/types/src/packages/card/card.d.ts

@@ -1,17 +1,16 @@
 import React, { FunctionComponent } from 'react';
-export interface CardProps {
-    imgUrl: string;
+import { BasicComponent } from '@/utils/typings';
+export interface CardProps extends BasicComponent {
+    src: string;
     title: string;
     price: string;
     vipPrice: string;
-    shopDesc: string;
+    shopDescription: string;
     delivery: string;
     shopName: string;
-    className: string;
-    style: React.CSSProperties;
-    prolistTpl: React.ReactNode;
-    shopTagTpl: React.ReactNode;
-    originTpl: React.ReactNode;
-    footerTpl: React.ReactNode;
+    description: React.ReactNode;
+    tag: React.ReactNode;
+    priceTag: React.ReactNode;
+    extra: React.ReactNode;
 }
 export declare const Card: FunctionComponent<Partial<CardProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/esm/types/src/packages/card/card.taro.d.ts

@@ -1,17 +1,16 @@
 import React, { FunctionComponent } from 'react';
-export interface CardProps {
-    imgUrl: string;
+import { BasicComponent } from '@/utils/typings';
+export interface CardProps extends BasicComponent {
+    src: string;
     title: string;
     price: string;
     vipPrice: string;
-    shopDesc: string;
+    shopDescription: string;
     delivery: string;
     shopName: string;
-    className: string;
-    style: React.CSSProperties;
-    prolistTpl: React.ReactNode;
-    shopTagTpl: React.ReactNode;
-    originTpl: React.ReactNode;
-    footerTpl: React.ReactNode;
+    description: React.ReactNode;
+    tag: React.ReactNode;
+    priceTag: React.ReactNode;
+    extra: React.ReactNode;
 }
 export declare const Card: FunctionComponent<Partial<CardProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/esm/types/src/packages/card/index.d.ts

@@ -1,2 +1,3 @@
 import { Card } from './card';
+export type { CardProps } from './card';
 export default Card;

package/dist/esm/types/src/packages/card/index.taro.d.ts

@@ -1,2 +1,3 @@
 import { Card } from './card.taro';
+export type { CardProps } from './card.taro';
 export default Card;