@pisell/private-materials 6.2.10 → 6.2.11

package/es/components/ticketBooking/components/addServiceVariant/addService.js

@@ -33,7 +33,7 @@ import { addService, addServiceScroll, genServiceKey, getIsShowNumber } from "..
 import NotAvailable from "../notAvailable";
 import dayjs from 'dayjs';
 var AddSerivce = function AddSerivce(props) {
-  var _context$appHelper, _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _state$bookingConfig2, _state$client2, _state$service4, _state$service5;
+  var _context$appHelper, _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _state$bookingConfig2, _state$client2, _state$service4;
   var onEdit = props.onEdit,
     state = props.state,
     dispatch = props.dispatch,
@@ -276,10 +276,182 @@ var AddSerivce = function AddSerivce(props) {
     var isEject = getIsEject(item, type);
     var isOnlySession = getIsOnlySession(item);
     var lock = false;
+    // 对于不需要打开弹窗的商品, 直接模拟数据, 不走弹窗
+    var cacheValues = null;
     if (isEject) {
       setCurrentProduct(item);
     } else {
       setCurrentProduct(null);
+      cacheValues = {
+        bundle: [],
+        key: item.id,
+        option: [],
+        product_id: item.id,
+        product_variant_id: 0,
+        quantity: 1,
+        rowKey: item.id,
+        session: null,
+        unique: '08974625397'
+      };
+    }
+    var callback = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(e, extension_type, detail) {
+        var data, _detail, other, cacheItem, _total, _isEdit, _state$service$cacheI, _Toast$success, _addService, _list, quantity, _context$appHelper$ut4, _context$appHelper$ut5, val, sendData;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              setCurrentProduct(null);
+              // 防止选择商品弹窗多次触发callback
+              if (!lock) {
+                _context3.next = 3;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 3:
+              lock = true;
+
+              // 2秒后解除
+              setTimeout(function () {
+                lock = false;
+              }, 2000);
+              if (isBooking4) {
+                _context3.next = 11;
+                break;
+              }
+              _context3.next = 8;
+              return createBookingData({
+                product: _objectSpread(_objectSpread({}, detail || item), {}, {
+                  _params: e
+                })
+              });
+            case 8:
+              data = _context3.sent;
+              // 创建预约
+              createBooking({
+                booking: data
+              });
+              return _context3.abrupt("return");
+            case 11:
+              // info2 addService 逻辑
+              _detail = detail || item;
+              other = JSON.parse(JSON.stringify(e));
+              other.session = e.session;
+              cacheItem = _objectSpread(_objectSpread({}, _detail), {}, {
+                product_id: item.id,
+                _id: getUniqueId(),
+                _key: e.key,
+                _extend: {
+                  start_date: state.date.value,
+                  quantity: (e === null || e === void 0 ? void 0 : e.quantity) || 1,
+                  price: _detail.price,
+                  product_name: item.title,
+                  other: other
+                },
+                new: 1
+              });
+              _total = getProductTotalPrice(cacheItem); // 用于折扣 可修改
+              cacheItem._extend.total = _total;
+              // 用于储存原价
+              cacheItem._extend.origin_total = _total;
+              _isEdit = !!state.service.cacheItem;
+              if (_isEdit) {
+                cacheItem._id = (_state$service$cacheI = state.service.cacheItem) === null || _state$service$cacheI === void 0 ? void 0 : _state$service$cacheI._id;
+                cacheItem.new = 0;
+              }
+              // 渲染到当前位置模式时，默认无资源 时间默认取顶部设置的时间
+              if (renderMode === 'current') {
+                // cacheItem._extend.resource = 0;
+                cacheItem.currentDefaultTime = state.date.value.format('HH:mm');
+              }
+              cacheItem = getProductExtend({
+                cacheItem: cacheItem,
+                state: state,
+                isDisabledTime: true
+              });
+              if (state.renderType === 'eventBooking') {
+                cacheItem.autoClose = false;
+              }
+              if (cacheItem.autoClose) {
+                cacheItem.autoClose = false;
+                cacheItem._serviceKey = genServiceKey(cacheItem);
+                _addService = addService(_toConsumableArray(state.service.value), cacheItem, state), _list = _addService.list, quantity = _addService.quantity;
+                Toast === null || Toast === void 0 || (_Toast$success = Toast.success) === null || _Toast$success === void 0 || _Toast$success.call(Toast, /*#__PURE__*/React.createElement("div", {
+                  className: "add-toast-wrap"
+                }, /*#__PURE__*/React.createElement("div", {
+                  className: "add-toast-title"
+                }, cacheItem.title), /*#__PURE__*/React.createElement("div", {
+                  className: "add-toast-quantity"
+                }, locales.getText('pisell2.ticket-booking.in-cart')(quantity || 1))));
+                addServiceScroll(e.rowKey, cacheItem);
+                try {
+                  if (((_context$appHelper$ut4 = context.appHelper.utils.store) === null || _context$appHelper$ut4 === void 0 || (_context$appHelper$ut5 = _context$appHelper$ut4.getState) === null || _context$appHelper$ut5 === void 0 || (_context$appHelper$ut5 = _context$appHelper$ut5.call(_context$appHelper$ut4)) === null || _context$appHelper$ut5 === void 0 || (_context$appHelper$ut5 = _context$appHelper$ut5.global) === null || _context$appHelper$ut5 === void 0 || (_context$appHelper$ut5 = _context$appHelper$ut5.globalConfig) === null || _context$appHelper$ut5 === void 0 ? void 0 : _context$appHelper$ut5.id) === 2155) {
+                    val = _list === null || _list === void 0 ? void 0 : _list.map(function (s) {
+                      return {
+                        product_id: s === null || s === void 0 ? void 0 : s.product_id,
+                        detailId: s === null || s === void 0 ? void 0 : s.id,
+                        detailProductId: s === null || s === void 0 ? void 0 : s.product_id,
+                        product_name: s === null || s === void 0 ? void 0 : s.title,
+                        price: s === null || s === void 0 ? void 0 : s.price,
+                        _id: s === null || s === void 0 ? void 0 : s._id,
+                        _key: s === null || s === void 0 ? void 0 : s._key,
+                        _serviceKey: s === null || s === void 0 ? void 0 : s._serviceKey
+                      };
+                    });
+                    sendData = {
+                      product_id: item === null || item === void 0 ? void 0 : item.id,
+                      detailId: _detail === null || _detail === void 0 ? void 0 : _detail.id,
+                      detailProductId: _detail === null || _detail === void 0 ? void 0 : _detail.product_id,
+                      product_name: item === null || item === void 0 ? void 0 : item.title,
+                      price: _detail === null || _detail === void 0 ? void 0 : _detail.price,
+                      serviceVal: val
+                    };
+                    sendWarningLog({
+                      title: 'addService',
+                      content: [{
+                        key: '添加数据',
+                        value: JSON.stringify(sendData)
+                      }, {
+                        key: '日期',
+                        value: dayjs().format('YYYY-MM-DD HH:mm:ss')
+                      }]
+                    });
+                  }
+                } catch (error) {}
+                dispatch({
+                  type: 'setService',
+                  payload: {
+                    addModal: false,
+                    value: _list,
+                    edit: true,
+                    changeService: false
+                  }
+                });
+              } else {
+                dispatch({
+                  type: 'setService',
+                  payload: {
+                    editModal: true,
+                    cacheItem: cacheItem,
+                    addModal: !cacheItem.autoClose,
+                    changeService: false
+                  }
+                });
+                onEdit === null || onEdit === void 0 || onEdit(cacheItem);
+              }
+            case 24:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      return function callback(_x3, _x4, _x5) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    // 如果不需要打开弹窗, 直接添加数据
+    if (cacheValues) {
+      callback(cacheValues, '', item);
+      return;
     }
     state.action({
       type: 'pisell1.handleOpenProductModal',
@@ -301,161 +473,7 @@ var AddSerivce = function AddSerivce(props) {
       onCancel: function onCancel() {
         setCurrentProduct(null);
       },
-      callback: function () {
-        var _callback = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(e, extension_type, detail) {
-          var data, _detail, other, cacheItem, _total, _isEdit, _state$service$cacheI, _Toast$success, _addService, _list, quantity, _context$appHelper$ut4, _context$appHelper$ut5, val, sendData;
-          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-            while (1) switch (_context3.prev = _context3.next) {
-              case 0:
-                setCurrentProduct(null);
-                // 防止选择商品弹窗多次触发callback
-                if (!lock) {
-                  _context3.next = 3;
-                  break;
-                }
-                return _context3.abrupt("return");
-              case 3:
-                lock = true;
-
-                // 2秒后解除
-                setTimeout(function () {
-                  lock = false;
-                }, 2000);
-                if (isBooking4) {
-                  _context3.next = 11;
-                  break;
-                }
-                _context3.next = 8;
-                return createBookingData({
-                  product: _objectSpread(_objectSpread({}, detail || item), {}, {
-                    _params: e
-                  })
-                });
-              case 8:
-                data = _context3.sent;
-                // 创建预约
-                createBooking({
-                  booking: data
-                });
-                return _context3.abrupt("return");
-              case 11:
-                // info2 addService 逻辑
-                _detail = detail || item;
-                other = JSON.parse(JSON.stringify(e));
-                other.session = e.session;
-                cacheItem = _objectSpread(_objectSpread({}, _detail), {}, {
-                  product_id: item.id,
-                  _id: getUniqueId(),
-                  _key: e.key,
-                  _extend: {
-                    start_date: state.date.value,
-                    quantity: (e === null || e === void 0 ? void 0 : e.quantity) || 1,
-                    price: _detail.price,
-                    product_name: item.title,
-                    other: other
-                  },
-                  new: 1
-                });
-                _total = getProductTotalPrice(cacheItem); // 用于折扣 可修改
-                cacheItem._extend.total = _total;
-                // 用于储存原价
-                cacheItem._extend.origin_total = _total;
-                _isEdit = !!state.service.cacheItem;
-                if (_isEdit) {
-                  cacheItem._id = (_state$service$cacheI = state.service.cacheItem) === null || _state$service$cacheI === void 0 ? void 0 : _state$service$cacheI._id;
-                  cacheItem.new = 0;
-                }
-                // 渲染到当前位置模式时，默认无资源 时间默认取顶部设置的时间
-                if (renderMode === 'current') {
-                  // cacheItem._extend.resource = 0;
-                  cacheItem.currentDefaultTime = state.date.value.format('HH:mm');
-                }
-                cacheItem = getProductExtend({
-                  cacheItem: cacheItem,
-                  state: state,
-                  isDisabledTime: true
-                });
-                if (state.renderType === 'eventBooking') {
-                  cacheItem.autoClose = false;
-                }
-                if (cacheItem.autoClose) {
-                  cacheItem.autoClose = false;
-                  cacheItem._serviceKey = genServiceKey(cacheItem);
-                  _addService = addService(_toConsumableArray(state.service.value), cacheItem, state), _list = _addService.list, quantity = _addService.quantity;
-                  Toast === null || Toast === void 0 || (_Toast$success = Toast.success) === null || _Toast$success === void 0 || _Toast$success.call(Toast, /*#__PURE__*/React.createElement("div", {
-                    className: "add-toast-wrap"
-                  }, /*#__PURE__*/React.createElement("div", {
-                    className: "add-toast-title"
-                  }, cacheItem.title), /*#__PURE__*/React.createElement("div", {
-                    className: "add-toast-quantity"
-                  }, locales.getText('pisell2.ticket-booking.in-cart')(quantity || 1))));
-                  addServiceScroll(e.rowKey, cacheItem);
-                  try {
-                    if (((_context$appHelper$ut4 = context.appHelper.utils.store) === null || _context$appHelper$ut4 === void 0 || (_context$appHelper$ut5 = _context$appHelper$ut4.getState) === null || _context$appHelper$ut5 === void 0 || (_context$appHelper$ut5 = _context$appHelper$ut5.call(_context$appHelper$ut4)) === null || _context$appHelper$ut5 === void 0 || (_context$appHelper$ut5 = _context$appHelper$ut5.global) === null || _context$appHelper$ut5 === void 0 || (_context$appHelper$ut5 = _context$appHelper$ut5.globalConfig) === null || _context$appHelper$ut5 === void 0 ? void 0 : _context$appHelper$ut5.id) === 2155) {
-                      val = _list === null || _list === void 0 ? void 0 : _list.map(function (s) {
-                        return {
-                          product_id: s === null || s === void 0 ? void 0 : s.product_id,
-                          detailId: s === null || s === void 0 ? void 0 : s.id,
-                          detailProductId: s === null || s === void 0 ? void 0 : s.product_id,
-                          product_name: s === null || s === void 0 ? void 0 : s.title,
-                          price: s === null || s === void 0 ? void 0 : s.price,
-                          _id: s === null || s === void 0 ? void 0 : s._id,
-                          _key: s === null || s === void 0 ? void 0 : s._key,
-                          _serviceKey: s === null || s === void 0 ? void 0 : s._serviceKey
-                        };
-                      });
-                      sendData = {
-                        product_id: item === null || item === void 0 ? void 0 : item.id,
-                        detailId: _detail === null || _detail === void 0 ? void 0 : _detail.id,
-                        detailProductId: _detail === null || _detail === void 0 ? void 0 : _detail.product_id,
-                        product_name: item === null || item === void 0 ? void 0 : item.title,
-                        price: _detail === null || _detail === void 0 ? void 0 : _detail.price,
-                        serviceVal: val
-                      };
-                      sendWarningLog({
-                        title: 'addService',
-                        content: [{
-                          key: '添加数据',
-                          value: JSON.stringify(sendData)
-                        }, {
-                          key: '日期',
-                          value: dayjs().format('YYYY-MM-DD HH:mm:ss')
-                        }]
-                      });
-                    }
-                  } catch (error) {}
-                  dispatch({
-                    type: 'setService',
-                    payload: {
-                      addModal: false,
-                      value: _list,
-                      edit: true,
-                      changeService: false
-                    }
-                  });
-                } else {
-                  dispatch({
-                    type: 'setService',
-                    payload: {
-                      editModal: true,
-                      cacheItem: cacheItem,
-                      addModal: !cacheItem.autoClose,
-                      changeService: false
-                    }
-                  });
-                  onEdit === null || onEdit === void 0 || onEdit(cacheItem);
-                }
-              case 24:
-              case "end":
-                return _context3.stop();
-            }
-          }, _callee3);
-        }));
-        function callback(_x3, _x4, _x5) {
-          return _callback.apply(this, arguments);
-        }
-        return callback;
-      }()
+      callback: callback
     });
   });
   var renderList = useMemo(function () {
@@ -513,6 +531,6 @@ var AddSerivce = function AddSerivce(props) {
       }));
     }
     return null;
-  }, [(_state$service5 = state.service) === null || _state$service5 === void 0 || (_state$service5 = _state$service5.cacheItem) === null || _state$service5 === void 0 ? void 0 : _state$service5.autoClose, state.service.addModal, locales, renderList, state.amountSymbol, state.renderType, state === null || state === void 0 ? void 0 : state.activeCartId, holderId(state), loading, currentProduct, isBooking4]);
+  }, [state.service.addModal, locales, renderList, state.amountSymbol, state.renderType, state === null || state === void 0 ? void 0 : state.activeCartId, holderId(state), loading, currentProduct, isBooking4]);
 };
 export default AddSerivce;

package/es/components/ticketBooking/components/addServiceVariant/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface AddServiceVariantProps {
     globalState: any;
     setGlobalState: any;

package/es/components/ticketBooking/components/ticketBooking/index.d.ts

@@ -0,0 +1,4 @@
+import './index.less';
+export declare const _formatBookingDetail: (data: any, modalState: any) => any;
+declare const TicketBooking: () => JSX.Element;
+export default TicketBooking;

package/es/components/ticketBooking/components/timeBar/index.js

@@ -4,45 +4,49 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React from 'react';
+import React, { useMemo } from 'react';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { DatePicker, SelectTime } from '@pisell/materials';
+import { useMemoizedFn } from "ahooks";
 import { Button } from 'antd';
 import classNames from 'classnames';
 import { locales } from '@pisell/utils';
 import "./index.less";
 var TimeBar = function TimeBar(props) {
-  var _state$modalState4, _state$modalState5;
+  var _state$modalState7;
   var state = props.globalState,
     setGlobalState = props.setGlobalState,
     locale = props.locale;
-  var _onClickNext = function _onClickNext() {
+  var _onClickNext = useMemoizedFn(function () {
     var _state$modalState, _props$onDateChange, _props$setIntervalTim;
     var currentTime = (_state$modalState = state.modalState) === null || _state$modalState === void 0 || (_state$modalState = _state$modalState.date) === null || _state$modalState === void 0 ? void 0 : _state$modalState.value;
     var newTime = currentTime['add'](1, 'day');
     (_props$onDateChange = props.onDateChange) === null || _props$onDateChange === void 0 || _props$onDateChange.call(props, newTime, newTime.format('YYYY-MM-DD HH:mm:ss'));
     (_props$setIntervalTim = props.setIntervalTime) === null || _props$setIntervalTim === void 0 || _props$setIntervalTim.call(props, false);
-  };
-  var _onClickPre = function _onClickPre() {
+  });
+  var _onClickPre = useMemoizedFn(function () {
     var _state$modalState2, _props$onDateChange2, _props$setIntervalTim2;
     var currentTime = (_state$modalState2 = state.modalState) === null || _state$modalState2 === void 0 || (_state$modalState2 = _state$modalState2.date) === null || _state$modalState2 === void 0 ? void 0 : _state$modalState2.value;
     var newTime = currentTime['subtract'](1, 'day');
     (_props$onDateChange2 = props.onDateChange) === null || _props$onDateChange2 === void 0 || _props$onDateChange2.call(props, newTime, newTime.format('YYYY-MM-DD HH:mm:ss'));
     (_props$setIntervalTim2 = props.setIntervalTime) === null || _props$setIntervalTim2 === void 0 || _props$setIntervalTim2.call(props, false);
-  };
-  var _onClickToday = function _onClickToday() {
-    var _props$setIntervalTim3;
-    (_props$setIntervalTim3 = props.setIntervalTime) === null || _props$setIntervalTim3 === void 0 || _props$setIntervalTim3.call(props, true);
-  };
-  var _onClickNow = function _onClickNow() {
+  });
+  var _onClickToday = useMemoizedFn(function () {
+    var _state$modalState3, _props$onDateChange3, _props$setIntervalTim3;
+    var currentTime = (_state$modalState3 = state.modalState) === null || _state$modalState3 === void 0 || (_state$modalState3 = _state$modalState3.date) === null || _state$modalState3 === void 0 ? void 0 : _state$modalState3.value;
+    var newTime = currentTime['subtract'](1, 'day');
+    (_props$onDateChange3 = props.onDateChange) === null || _props$onDateChange3 === void 0 || _props$onDateChange3.call(props, newTime, newTime.format('YYYY-MM-DD HH:mm:ss'));
+    (_props$setIntervalTim3 = props.setIntervalTime) === null || _props$setIntervalTim3 === void 0 || _props$setIntervalTim3.call(props, false);
+  });
+  var _onClickNow = useMemoizedFn(function () {
     var _props$setIntervalTim4;
     (_props$setIntervalTim4 = props.setIntervalTime) === null || _props$setIntervalTim4 === void 0 || _props$setIntervalTim4.call(props, true);
-  };
+  });
 
   // 时间选择变更事件
-  var _onDateTimeChange = function _onDateTimeChange(timeString) {
-    var _state$modalState3, _props$onDateTimeChan, _props$setIntervalTim5;
-    var currentTime = (_state$modalState3 = state.modalState) === null || _state$modalState3 === void 0 || (_state$modalState3 = _state$modalState3.date) === null || _state$modalState3 === void 0 ? void 0 : _state$modalState3.value;
+  var _onDateTimeChange = useMemoizedFn(function (timeString) {
+    var _state$modalState4, _props$onDateTimeChan, _props$setIntervalTim5;
+    var currentTime = (_state$modalState4 = state.modalState) === null || _state$modalState4 === void 0 || (_state$modalState4 = _state$modalState4.date) === null || _state$modalState4 === void 0 ? void 0 : _state$modalState4.value;
     var _timeString$split$map = timeString.split(':').map(Number),
       _timeString$split$map2 = _slicedToArray(_timeString$split$map, 2),
       hours = _timeString$split$map2[0],
@@ -53,63 +57,66 @@ var TimeBar = function TimeBar(props) {
       isTimeChange: true
     });
     (_props$setIntervalTim5 = props.setIntervalTime) === null || _props$setIntervalTim5 === void 0 || _props$setIntervalTim5.call(props, false);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "pisell-ticket-booking-time-bar"
-  }, /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
-    onClick: _onClickPre,
-    size: "large"
-  }), /*#__PURE__*/React.createElement(Button, {
-    onClick: _onClickToday,
-    size: "large",
-    style: state.intervalSetTime ? {
-      background: '#000',
-      color: '#fff'
-    } : undefined
-  }, locales.getText('pisell2.ticket-booking.today')), /*#__PURE__*/React.createElement("div", {
-    className: classNames({
-      'booking-page-date-picker-select': state.isDateChange
-    }),
-    style: {
-      width: 200,
-      flexShrink: 0
-    }
-  }, /*#__PURE__*/React.createElement(DatePicker, {
-    inputReadOnly: true,
-    value: state === null || state === void 0 || (_state$modalState4 = state.modalState) === null || _state$modalState4 === void 0 || (_state$modalState4 = _state$modalState4.date) === null || _state$modalState4 === void 0 ? void 0 : _state$modalState4.value,
-    format: locale === 'en' ? 'dddd, DD MMM YYYY' : 'YYYY年MM月DD日',
-    onChange: props === null || props === void 0 ? void 0 : props.onDateChange,
-    size: "large",
-    style: {
-      width: '100%'
-    }
-  })), /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(RightOutlined, null),
-    onClick: _onClickNext,
-    size: "large"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames({
-      'booking-page-date-picker-select': state.isTimeChange
-    })
-  }, /*#__PURE__*/React.createElement(SelectTime, {
-    value: state === null || state === void 0 || (_state$modalState5 = state.modalState) === null || _state$modalState5 === void 0 || (_state$modalState5 = _state$modalState5.date) === null || _state$modalState5 === void 0 ? void 0 : _state$modalState5.value.format('HH:mm'),
-    onChange: _onDateTimeChange,
-    popoverProps: {
+  });
+  return useMemo(function () {
+    var _state$modalState5, _state$modalState6;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-ticket-booking-time-bar"
+    }, /*#__PURE__*/React.createElement(Button, {
+      icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
+      onClick: _onClickPre,
+      size: "large"
+    }), /*#__PURE__*/React.createElement(Button, {
+      onClick: _onClickToday,
+      size: "large",
+      style: state.intervalSetTime ? {
+        background: '#000',
+        color: '#fff'
+      } : undefined
+    }, locales.getText('pisell2.ticket-booking.today')), /*#__PURE__*/React.createElement("div", {
+      className: classNames({
+        'booking-page-date-picker-select': state.isDateChange
+      }),
+      style: {
+        width: 200,
+        flexShrink: 0
+      }
+    }, /*#__PURE__*/React.createElement(DatePicker, {
+      inputReadOnly: true,
+      value: state === null || state === void 0 || (_state$modalState5 = state.modalState) === null || _state$modalState5 === void 0 || (_state$modalState5 = _state$modalState5.date) === null || _state$modalState5 === void 0 ? void 0 : _state$modalState5.value,
+      format: locale === 'en' ? 'dddd, DD MMM YYYY' : 'YYYY年MM月DD日',
+      onChange: props === null || props === void 0 ? void 0 : props.onDateChange,
+      size: "large",
       style: {
-        zoom: 0.8
+        width: '100%'
       }
-    },
-    timePickerProps: {},
-    timeProps: {},
-    slice: 5
-  })), /*#__PURE__*/React.createElement(Button, {
-    onClick: _onClickNow,
-    size: "large",
-    style: state.intervalSetTime ? {
-      background: '#000',
-      color: '#fff'
-    } : undefined
-  }, locales.getText('pisell2.ticket-booking.now')));
+    })), /*#__PURE__*/React.createElement(Button, {
+      icon: /*#__PURE__*/React.createElement(RightOutlined, null),
+      onClick: _onClickNext,
+      size: "large"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: classNames({
+        'booking-page-date-picker-select': state.isTimeChange
+      })
+    }, /*#__PURE__*/React.createElement(SelectTime, {
+      value: state === null || state === void 0 || (_state$modalState6 = state.modalState) === null || _state$modalState6 === void 0 || (_state$modalState6 = _state$modalState6.date) === null || _state$modalState6 === void 0 ? void 0 : _state$modalState6.value.format('HH:mm'),
+      onChange: _onDateTimeChange,
+      popoverProps: {
+        style: {
+          zoom: 0.8
+        }
+      },
+      timePickerProps: {},
+      timeProps: {},
+      slice: 5
+    })), /*#__PURE__*/React.createElement(Button, {
+      onClick: _onClickNow,
+      size: "large",
+      style: state.intervalSetTime ? {
+        background: '#000',
+        color: '#fff'
+      } : undefined
+    }, locales.getText('pisell2.ticket-booking.now')));
+  }, [(_state$modalState7 = state.modalState) === null || _state$modalState7 === void 0 || (_state$modalState7 = _state$modalState7.date) === null || _state$modalState7 === void 0 ? void 0 : _state$modalState7.value, state.intervalSetTime, state.isTimeChange, state.isDateChange, locale]);
 };
 export default TimeBar;