wargerm 0.7.0 → 0.7.2

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import React, { useRef, useEffect, useMemo, useState, useCallback, useImperative
 import { cloneDeep, uniqBy, isEmpty } from 'lodash-es';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { Menu, Dropdown, Button, Input, Upload as Upload$1, Modal as Modal$2, message, InputNumber, DatePicker, Radio, Space, Checkbox, Select, Switch, Tooltip, TreeSelect as TreeSelect$1, Cascader, Form, Row, Col, Spin, Pagination, Breadcrumb, ConfigProvider } from 'antd';
-import { createFromIconfontCN, PlusOutlined, SearchOutlined, ReloadOutlined, CloseCircleOutlined, EllipsisOutlined, ExclamationCircleOutlined, EyeOutlined, EditOutlined, DeleteOutlined, LeftOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
+import { createFromIconfontCN, PlusOutlined, CloseCircleOutlined, SearchOutlined, ReloadOutlined, EllipsisOutlined, ExclamationCircleOutlined, EyeOutlined, EditOutlined, DeleteOutlined, LeftOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
 import FileViewer from 'react-file-viewer';
 import classnames from 'classnames';
 import zhCN from 'antd/es/date-picker/locale/zh_CN';
@@ -2593,9 +2593,21 @@ dayjs.locale('zh-cn');
 var WDatePicker = function WDatePicker(props) {
   var extraProps = _extends({}, props);
 
-  return /*#__PURE__*/React.createElement(DatePicker, _objectSpread2({
+  return /*#__PURE__*/React.createElement(DatePicker, _objectSpread2(_objectSpread2({
     locale: zhCN
-  }, extraProps));
+  }, extraProps), {}, {
+    clearIcon: /*#__PURE__*/React.createElement("div", {
+      className: "clearIconBox"
+    }, /*#__PURE__*/React.createElement(CloseCircleOutlined, {
+      className: "clearIcon"
+    })),
+    suffixIcon: /*#__PURE__*/React.createElement("div", {
+      className: "dateIcon"
+    }, /*#__PURE__*/React.createElement("img", {
+      className: "datePickerIcon",
+      src: require('../../assets/icon/datePickerIcon.png')
+    }))
+  }));
 };
 
 WDatePicker.defaultProps = {};
@@ -2622,6 +2634,17 @@ var RangePicker = function RangePicker(props) {
   if (panelType === 'within') {
     return /*#__PURE__*/React.createElement(RangePicker, _objectSpread2({
       locale: zhCN,
+      clearIcon: /*#__PURE__*/React.createElement("div", {
+        className: "clearIconBox"
+      }, /*#__PURE__*/React.createElement(CloseCircleOutlined, {
+        className: "clearIcon"
+      })),
+      suffixIcon: /*#__PURE__*/React.createElement("div", {
+        className: "dateIcon"
+      }, /*#__PURE__*/React.createElement("img", {
+        className: "datePickerIcon",
+        src: require('../../assets/icon/datePickerIcon.png')
+      })),
       value: rangePickerValue,
       onChange: function onChange(date) {
         setRadioValue('');
@@ -2654,7 +2677,7 @@ var RangePicker = function RangePicker(props) {
           }
         }, /*#__PURE__*/React.createElement(Space, {
           direction: "vertical",
-          size: 'middle'
+          size: 28
         }, /*#__PURE__*/React.createElement(Radio.Button, {
           value: '1',
           onClick: function onClick() {
@@ -2711,6 +2734,17 @@ var RangePicker = function RangePicker(props) {
       }
     }, /*#__PURE__*/React.createElement("span", null, "\u65E5")))), /*#__PURE__*/React.createElement(RangePicker, _objectSpread2({
       locale: zhCN,
+      clearIcon: /*#__PURE__*/React.createElement("div", {
+        className: "clearIconBox"
+      }, /*#__PURE__*/React.createElement(CloseCircleOutlined, {
+        className: "clearIcon"
+      })),
+      suffixIcon: /*#__PURE__*/React.createElement("div", {
+        className: "dateIcon"
+      }, /*#__PURE__*/React.createElement("img", {
+        className: "datePickerIcon",
+        src: require('../../assets/icon/datePickerIcon.png')
+      })),
       value: rangePickerValue,
       onChange: function onChange(date) {
         setRadioValue('');
@@ -2720,6 +2754,17 @@ var RangePicker = function RangePicker(props) {
   }
 
   return /*#__PURE__*/React.createElement(DatePicker.RangePicker, _objectSpread2({
+    clearIcon: /*#__PURE__*/React.createElement("div", {
+      className: "clearIconBox"
+    }, /*#__PURE__*/React.createElement(CloseCircleOutlined, {
+      className: "clearIcon"
+    })),
+    suffixIcon: /*#__PURE__*/React.createElement("div", {
+      className: "dateIcon"
+    }, /*#__PURE__*/React.createElement("img", {
+      className: "datePickerIcon",
+      src: require('../../assets/icon/datePickerIcon.png')
+    })),
     locale: zhCN
   }, extraProps));
 };
@@ -3164,7 +3209,7 @@ var NumericInput = /*#__PURE__*/function (_React$Component) {
         valueTemp = value.slice(0, -1);
       }
 
-      onChange && onChange(valueTemp.replace(/0*(\d+)/, '$1'));
+      valueTemp && onChange && onChange(valueTemp.replace(/0*(\d+)/, '$1'));
 
       if (onBlur) {
         onBlur && onBlur();
@@ -8298,7 +8343,8 @@ function VideoPlayer(_ref, ref) {
       style = _ref.style,
       _ref$config = _ref.config,
       config = _ref$config === void 0 ? {} : _ref$config,
-      layoutIndex = _ref.layoutIndex,
+      _ref$layoutIndex = _ref.layoutIndex,
+      layoutIndex = _ref$layoutIndex === void 0 ? 0 : _ref$layoutIndex,
       _ref$url = _ref.url,
       url = _ref$url === void 0 ? [] : _ref$url,
       _ref$layouts = _ref.layouts,
@@ -8350,6 +8396,9 @@ function VideoPlayer(_ref, ref) {
   useEffect(function () {
     setUrls(url);
   }, [url]);
+  useEffect(function () {
+    setCurrentLayoutIndex(layoutIndex);
+  }, [layoutIndex]);
   var initPlayerIndex = allLayouts[layoutIndex || 0].span >= url.length ? url.length - 1 >= 0 ? url.length - 1 : 0 : allLayouts[layoutIndex || 0].span - 1;
 
   var _useState5 = useState(initPlayerIndex),
@@ -8498,14 +8547,14 @@ function VideoPlayer(_ref, ref) {
 
 var index$6 = /*#__PURE__*/forwardRef(VideoPlayer);
 
-var _excluded$m = ["id", "videoUrls", "definitionList", "isLoop", "muted", "currentIndex", "setCurrentIndex", "className", "style", "open", "autoplay", "videoInit", "enableMemory", "lastPlayTimeHideDelay"];
+var _excluded$m = ["id", "videoUrls", "definitionList", "isLoop", "muted", "currentIndex", "setCurrentIndex", "className", "style", "visible", "autoplay", "videoInit", "enableMemory", "lastPlayTimeHideDelay"];
 
 var DEFAULT_PLAY_BACK_RATE = [0.5, 0.75, 1, 1.5, 2]; // 默认记忆提示文字展示时长(s)
 
 var DEFAULT_LAST_PLAY_TIME_DELAY = 5; // 默认音量大小
 
 var DEFAULT_VOLUME = 0.6;
-var index$7 = (function (_ref) {
+var index$7 = /*#__PURE__*/forwardRef(function (_ref, playerRef) {
   var id = _ref.id,
       _ref$videoUrls = _ref.videoUrls,
       videoUrls = _ref$videoUrls === void 0 ? [] : _ref$videoUrls,
@@ -8519,8 +8568,8 @@ var index$7 = (function (_ref) {
       setParentIndex = _ref.setCurrentIndex,
       className = _ref.className,
       style = _ref.style,
-      _ref$open = _ref.open,
-      open = _ref$open === void 0 ? true : _ref$open,
+      _ref$visible = _ref.visible,
+      visible = _ref$visible === void 0 ? true : _ref$visible,
       _ref$autoplay = _ref.autoplay,
       autoplay = _ref$autoplay === void 0 ? false : _ref$autoplay,
       _ref$videoInit = _ref.videoInit,
@@ -8532,19 +8581,26 @@ var index$7 = (function (_ref) {
       props = _objectWithoutProperties(_ref, _excluded$m);
 
   var player = useRef();
-  var currentPlayerIndex = useRef(0); // 内置的 index 状态管理
 
-  var _useState = useState(0),
+  var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
-      videoIndex = _useState2[0],
-      setVideoIndex = _useState2[1];
-
-  var currentIndex = useMemo(function () {
-    return parentIndex !== null && parentIndex !== void 0 ? parentIndex : videoIndex;
-  }, [parentIndex, videoIndex]);
-  var setCurrentIndex = useMemo(function () {
-    return setParentIndex !== null && setParentIndex !== void 0 ? setParentIndex : setVideoIndex;
-  }, [setParentIndex, setVideoIndex]);
+      firstRender = _useState2[0],
+      setFirstRender = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      ready = _useState4[0],
+      setReady = _useState4[1];
+
+  var currentPlayerIndex = useRef(0); // 内置的 index 状态管理
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      videoIndex = _useState6[0],
+      setVideoIndex = _useState6[1];
+
+  var currentIndex = parentIndex !== null && parentIndex !== void 0 ? parentIndex : videoIndex;
+  var setCurrentIndex = setParentIndex !== null && setParentIndex !== void 0 ? setParentIndex : setVideoIndex;
   var config = useRef(_objectSpread2({
     url: videoUrls[0],
     playbackRate: DEFAULT_PLAY_BACK_RATE,
@@ -8558,25 +8614,52 @@ var index$7 = (function (_ref) {
   }, props));
   /** 设置当前播放 index */
 
-  var handleSetCurrentIndex = useCallback(function (currentIdx) {
+  var handleSetCurrentIndex = useCallback(function (_ref2) {
+    var currentIdx = _ref2.currentIdx,
+        videoUrls = _ref2.videoUrls;
     var newIdx = currentIdx !== null && currentIdx !== void 0 ? currentIdx : currentPlayerIndex.current + 1;
 
     if (newIdx >= videoUrls.length) {
-      if (isLoop) {
-        // 允许循环则播放起始视频
-        newIdx = 0;
-      } else if (player.current && player.current.video) {
-        // 不允许循环则进度条快进到最后
-        player.current.currentTime = player.current.video.duration;
-        return;
-      }
+      newIdx = 0;
     }
 
     setCurrentIndex(newIdx);
-  }, [isLoop, setCurrentIndex, videoUrls.length]);
+  }, [setCurrentIndex]);
+  /** 结束事件 */
+
+  var onEnd = useCallback(function (isLoop, videoUrls) {
+    return function () {
+      // 如果是循环或有其他视频未播放完，继续播放下一个
+      if (isLoop || !isLoop && currentPlayerIndex.current < videoUrls.length - 1) {
+        setTimeout(function () {
+          var _player$current;
+
+          return (_player$current = player.current) === null || _player$current === void 0 ? void 0 : _player$current.play();
+        });
+      }
+
+      handleSetCurrentIndex({
+        videoUrls: videoUrls
+      });
+    };
+  }, [handleSetCurrentIndex]);
+  /** 点击下一个事件 */
+
+  var onPlayNextBtnClick = useCallback(function (videoUrls) {
+    return function () {
+      if (player.current) {
+        // 防止 next 按钮消失
+        player.current.currentVideoIndex = videoUrls.length - 2;
+      }
+
+      handleSetCurrentIndex({
+        videoUrls: videoUrls
+      });
+    };
+  }, [handleSetCurrentIndex]);
   /** 播放下一个 */
 
-  var handlePlayNext = useCallback(function (currentIdx) {
+  var handlePlayNext = useCallback(function (currentIdx, isLoop) {
     if (!player.current) {
       return;
     }
@@ -8590,7 +8673,7 @@ var index$7 = (function (_ref) {
       // 防止 next 按钮消失
       player.current.currentVideoIndex = -videoUrls.length;
     }
-  }, [videoUrls, isLoop]);
+  }, [videoUrls]);
   /** 重置视频 */
 
   var handleReset = useCallback(function () {
@@ -8606,47 +8689,47 @@ var index$7 = (function (_ref) {
   /** 弹窗中的视频关闭以后重置 */
 
   useEffect(function () {
-    if (!open) {
+    if (!visible) {
       handleReset();
     }
-  }, [handleReset, open]);
+  }, [handleReset, visible]);
   /** 当 currentIndex 改变以后自动播放下一个 */
 
   useEffect(function () {
-    if (!player.current || !open) {
+    if (!player.current || !visible) {
       return;
     }
 
-    handlePlayNext(currentIndex !== null && currentIndex !== void 0 ? currentIndex : currentPlayerIndex.current);
-  }, [currentIndex, handlePlayNext, open]);
+    handlePlayNext(currentIndex !== null && currentIndex !== void 0 ? currentIndex : currentPlayerIndex.current, isLoop);
+  }, [currentIndex, handlePlayNext, isLoop, visible]);
   /** 播放器初始化并绑定事件 */
 
   useEffect(function () {
-    if (!open || isEmpty(videoUrls) || player.current) {
+    var _player$current4;
+
+    if (!visible || isEmpty(videoUrls) || player.current) {
       return;
     }
 
-    player.current = new Player(config.current);
-    player.current.currentVideoIndex = -videoUrls.length;
-    player.current.on('ended', function () {
-      // 如果是循环或有其他视频未播放完，继续播放下一个
-      if (isLoop || !isLoop && currentPlayerIndex.current < videoUrls.length - 1) {
-        handleSetCurrentIndex();
-        setTimeout(function () {
-          var _player$current;
+    var newConfig = _objectSpread2(_objectSpread2({}, config.current), {}, {
+      muted: muted,
+      volume: muted ? 0 : DEFAULT_VOLUME,
+      autoplay: autoplay,
+      videoInit: videoInit
+    });
 
-          return (_player$current = player.current) === null || _player$current === void 0 ? void 0 : _player$current.play();
-        });
-      } else {
-        var _player$current2;
+    setReady(false);
+    setFirstRender(false); // @ts-ignore
 
-        (_player$current2 = player.current) === null || _player$current2 === void 0 ? void 0 : _player$current2.pause();
-      }
-    }); // 播放记忆缓存
+    player.current = new Player(newConfig);
+    player.current.currentVideoIndex = -videoUrls.length;
+    player.current.on('ended', onEnd(isLoop, videoUrls)); // 播放记忆缓存
 
     if (enableMemory) {
+      var _player$current2;
+
       var videoPlayedTimeObj = JSON.parse(localStorage.getItem('videoPlayedTime') || '{}');
-      player.current.on('timeupdate', function () {
+      (_player$current2 = player.current) === null || _player$current2 === void 0 ? void 0 : _player$current2.on('timeupdate', function () {
         var _player$current3;
 
         if (currentPlayerIndex.current === -1) {
@@ -8660,27 +8743,23 @@ var index$7 = (function (_ref) {
       });
     }
 
-    player.current.on('playNextBtnClick', function () {
-      if (!isLoop && player.current) {
-        // 防止 next 按钮消失
-        player.current.currentVideoIndex = videoUrls.length - 2;
-      }
-
-      handleSetCurrentIndex();
-    });
-  }, [autoplay, enableMemory, handleSetCurrentIndex, id, isLoop, videoUrls, videoUrls.length, open]);
+    (_player$current4 = player.current) === null || _player$current4 === void 0 ? void 0 : _player$current4.on('playNextBtnClick', onPlayNextBtnClick(videoUrls));
+  }, [ready, autoplay, enableMemory, handleSetCurrentIndex, id, isLoop, videoUrls, videoUrls.length, visible, muted, videoInit, onEnd, onPlayNextBtnClick]);
   /** 读取缓存的播放记忆并跳转 */
 
   useEffect(function () {
-    if (enableMemory && open) {
+    if (enableMemory && visible) {
       var _JSON$parse;
 
-      var _ref2 = ((_JSON$parse = JSON.parse(localStorage.getItem('videoPlayedTime') || '{}')) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse[id]) || {},
-          lastPlayTime = _ref2.lastPlayTime,
-          _videoIndex = _ref2.videoIndex;
+      var _ref3 = ((_JSON$parse = JSON.parse(localStorage.getItem('videoPlayedTime') || '{}')) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse[id]) || {},
+          lastPlayTime = _ref3.lastPlayTime,
+          _videoIndex = _ref3.videoIndex;
 
       setTimeout(function () {
-        handleSetCurrentIndex(_videoIndex);
+        handleSetCurrentIndex({
+          currentIdx: _videoIndex,
+          videoUrls: videoUrls
+        });
         setTimeout(function () {
           if (player.current) {
             player.current.currentTime = lastPlayTime;
@@ -8688,7 +8767,7 @@ var index$7 = (function (_ref) {
         });
       });
     }
-  }, [open, enableMemory, handleSetCurrentIndex, id]);
+  }, [visible, enableMemory, handleSetCurrentIndex, id, videoUrls]);
   /** 加载清晰度配置 */
 
   useEffect(function () {
@@ -8696,8 +8775,21 @@ var index$7 = (function (_ref) {
       player.current.emit('resourceReady', definitionList[currentIndex]);
     }
   }, [currentIndex, definitionList]);
+  useEffect(function () {
+    var _player$current5, _player$current6, _player$current7;
+
+    if (firstRender) {
+      return;
+    }
+
+    (_player$current5 = player.current) === null || _player$current5 === void 0 ? void 0 : _player$current5.off('ended', onEnd(isLoop, videoUrls));
+    (_player$current6 = player.current) === null || _player$current6 === void 0 ? void 0 : _player$current6.off('playNextBtnClick', onPlayNextBtnClick(videoUrls));
+    (_player$current7 = player.current) === null || _player$current7 === void 0 ? void 0 : _player$current7.destroy();
+    player.current = undefined;
+    setReady(true); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [muted, isLoop, videoUrls, autoplay, videoInit, onEnd, onPlayNextBtnClick]);
   var getRef = useCallback(function (ref) {
-    if (ref && open) {
+    if (ref && visible) {
       var newConfig = _objectSpread2(_objectSpread2({}, config.current), {}, {
         el: ref,
         url: videoUrls[0],
@@ -8709,8 +8801,8 @@ var index$7 = (function (_ref) {
       if (enableMemory) {
         var _JSON$parse2;
 
-        var _ref3 = ((_JSON$parse2 = JSON.parse(localStorage.getItem('videoPlayedTime') || '{}')) === null || _JSON$parse2 === void 0 ? void 0 : _JSON$parse2[id]) || {},
-            lastPlayTime = _ref3.lastPlayTime;
+        var _ref4 = ((_JSON$parse2 = JSON.parse(localStorage.getItem('videoPlayedTime') || '{}')) === null || _JSON$parse2 === void 0 ? void 0 : _JSON$parse2[id]) || {},
+            lastPlayTime = _ref4.lastPlayTime;
 
         Object.assign(newConfig, {
           lastPlayTime: lastPlayTime,
@@ -8720,7 +8812,15 @@ var index$7 = (function (_ref) {
 
       config.current = newConfig;
     }
-  }, [open, id, videoUrls, lastPlayTimeHideDelay, enableMemory]);
+
+    if (playerRef) {
+      if (typeof playerRef === 'function') {
+        playerRef(player.current);
+      } else {
+        playerRef.current = player.current;
+      }
+    }
+  }, [visible, playerRef, videoUrls, enableMemory, id, lastPlayTimeHideDelay]);
   return /*#__PURE__*/React.createElement("div", {
     className: className,
     ref: getRef,
@@ -9009,7 +9109,7 @@ function NtTable(_ref) {
               return item.value == record[c.dataIndex];
             })) === null || _columnsFields$c$data === void 0 ? void 0 : _columnsFields$c$data.label : record[c.dataIndex])));
           } else {
-            var _columnsFields$c$data2, _columnsFields$c$data3;
+            var _columnsFields$c$data2, _columnsFields$c$data3, _columnsFields$c$data4, _columnsFields$c$data5;
 
             return /*#__PURE__*/React.createElement("div", {
               key: c.dataIndex,
@@ -9033,9 +9133,13 @@ function NtTable(_ref) {
               }
             }, c.render ? c.render(record[c.dataIndex], record, index) : columnsFields[c.dataIndex] ? (_columnsFields$c$data2 = columnsFields[c.dataIndex].find(function (item) {
               return item.value == record[c.dataIndex];
-            })) === null || _columnsFields$c$data2 === void 0 ? void 0 : _columnsFields$c$data2.label : record[c.dataIndex]) : c.render ? c.render(record[c.dataIndex], record, index) : columnsFields[c.dataIndex] ? (_columnsFields$c$data3 = columnsFields[c.dataIndex].find(function (item) {
+            })) === null || _columnsFields$c$data2 === void 0 ? void 0 : _columnsFields$c$data2.label : record[c.dataIndex]) : c.render ? c.render(record[c.dataIndex], record, index) : columnsFields[c.dataIndex] ? ((_columnsFields$c$data3 = columnsFields[c.dataIndex].find(function (item) {
               return item.value == record[c.dataIndex];
-            })) === null || _columnsFields$c$data3 === void 0 ? void 0 : _columnsFields$c$data3.label : record[c.dataIndex]);
+            })) === null || _columnsFields$c$data3 === void 0 ? void 0 : _columnsFields$c$data3.label) && ((_columnsFields$c$data4 = columnsFields[c.dataIndex].find(function (item) {
+              return item.value == record[c.dataIndex];
+            })) === null || _columnsFields$c$data4 === void 0 ? void 0 : _columnsFields$c$data4.label) !== 0 ? (_columnsFields$c$data5 = columnsFields[c.dataIndex].find(function (item) {
+              return item.value == record[c.dataIndex];
+            })) === null || _columnsFields$c$data5 === void 0 ? void 0 : _columnsFields$c$data5.label : '-' : record[c.dataIndex]);
           }
         }
       });
@@ -10132,7 +10236,7 @@ console.log(REACT_APP_ENV, 'REACT_APP_ENV');
 
 if (REACT_APP_ENV == 'development') {
   var COLOR_ATTR_NAME = 'data-prefers-color';
-  document.documentElement.setAttribute(COLOR_ATTR_NAME, 'sd');
+  document.documentElement.setAttribute(COLOR_ATTR_NAME, 'nt');
 }
 
 export { Index$b as AutoScroll, Index$d as Breadcrumb, WButton as Button, index$5 as Calendar, index$3 as Card, WCascader as Cascader, Index$4 as Checkbox, Index$a as CountUp, Index$2 as DatePicker, DragBox, index as IconFont, Index as Input, WInputNumber as InputNumber, LineEcharts, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, index$8 as NtTable, Index$9 as Number, NumericInput, Index$3 as Radio, index$2 as RequestRenderDom, Index$5 as Select, Index$c as Swiper, WSwitch as Switch, index$4 as TabelCard, index$1 as Table, Index$7 as TreeSelect, Upload, index$7 as Video, index$6 as VideoPlayer, Index$6 as WDatePicker, WForm$1 as WForm, WaterLevelCharts, WebsocketHeart, useEventEmitter, useStateWithCall, wTracing, create as whox, wmox };