wargerm 0.4.19 → 0.4.22

package/dist/components/Modal/index.d.ts

@@ -27,6 +27,7 @@ declare class Modal extends React.PureComponent<Props> {
         destory(): void;
     } | undefined;
     static hidden: () => void;
+    static destory: () => void;
     renderFooter: () => JSX.Element | null;
     containerRef: React.RefObject<any>;
     titleRef: React.RefObject<any>;

package/dist/components/VirtualList/index.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export declare enum DIRECTION {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export interface ItemStyle {
+    position: 'absolute';
+    top?: number;
+    left: number;
+    width: string | number;
+    height?: number;
+    marginTop?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    zIndex?: number;
+}
+export interface IProps {
+    width: number | string;
+    height: number | string;
+    itemCount: number;
+    itemSize: number;
+    renderItem(itemInfo: {
+        index: number;
+        style: ItemStyle;
+    }): React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    scrollDirection?: DIRECTION;
+    overscanCount?: number;
+    scrollOffset?: number;
+    onScroll?(offset: number, event: Event): void;
+}
+declare const VirtualList: React.FC<IProps>;
+export default VirtualList;

package/dist/global.d.ts

@@ -0,0 +1 @@
+declare const HTML: any;

package/dist/index.css

@@ -415,14 +415,35 @@
   font-size: 14px;
   font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
   font-weight: 400;
-  color: #9cd0ef !important;
+}
+[data-prefers-color='dark'] .ant-radio-wrapper {
+  color: #bbdff0;
+}
+[data-prefers-color='dark'] .ant-radio-disabled + span {
+  color: rgba(255, 255, 255, 0.25);
 }
 [data-prefers-color='dark'] .ant-radio-button-wrapper {
-  background: #1d2c4a !important;
+  background: rgba(81, 190, 246, 0.28) !important;
+  border: 1px solid #4383a4;
   font-size: 14px;
   font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
   font-weight: 400;
-  color: #4383a4 !important;
+  color: #bbdff0;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper:first-child {
+  border-left: 1px solid #4383a4;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-disabled {
+  color: rgba(255, 255, 255, 0.25);
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper:not(:first-child)::before {
+  background-color: #4383a4;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-checked {
+  color: rgba(21, 27, 37, 0.9) !important;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-checked .ant-radio-button-checked {
+  background: #51bef6 !important;
 }
 [data-prefers-color='dark'] .ant-picker-input input::-webkit-input-placeholder {
   color: #4383a4;
@@ -655,6 +676,10 @@
   overflow: auto;
   min-height: 100px;
 }
+[data-prefers-color='dark'] .autoScroll-outer {
+  overflow: auto;
+  min-height: 100px;
+}
 @font-face {
   font-family: 'swiper-icons';
   src: url('data:application/font-woff;charset=utf-8;base64, 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') format('woff');
@@ -1441,6 +1466,15 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   background: #0f6ab7;
 }
 [data-prefers-color='dark'] .videoContainer {
+  min-width: 10px;
+  min-height: 10px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+[data-prefers-color='dark'] .videoContainer .videoContainer-grid {
+  flex: 1;
   width: 100%;
   height: 100%;
   display: grid;
@@ -1921,6 +1955,10 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   overflow: auto;
   min-height: 100px;
 }
+[data-prefers-color='light'] .autoScroll-outer {
+  overflow: auto;
+  min-height: 100px;
+}
 @font-face {
   font-family: 'swiper-icons';
   src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');
@@ -2856,6 +2894,15 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   background: #0f6ab7;
 }
 [data-prefers-color='light'] .videoContainer {
+  min-width: 10px;
+  min-height: 10px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+[data-prefers-color='light'] .videoContainer .videoContainer-grid {
+  flex: 1;
   width: 100%;
   height: 100%;
   display: grid;

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export { default as WForm } from './components/WForm';
 export { default as NumericInput } from './components/NumericInput';
 export { default as Number } from './components/Number';
 export { default as CountUp } from './components/CountUp';
+export { default as VirtualList } from './components/VirtualList';
 export { default as AutoScroll } from './components/AutoScroll';
 export { default as Swiper } from './components/Swiper';
 export { default as Breadcrumb } from './components/Breadcrumb';

package/dist/index.esm.css

@@ -415,14 +415,35 @@
   font-size: 14px;
   font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
   font-weight: 400;
-  color: #9cd0ef !important;
+}
+[data-prefers-color='dark'] .ant-radio-wrapper {
+  color: #bbdff0;
+}
+[data-prefers-color='dark'] .ant-radio-disabled + span {
+  color: rgba(255, 255, 255, 0.25);
 }
 [data-prefers-color='dark'] .ant-radio-button-wrapper {
-  background: #1d2c4a !important;
+  background: rgba(81, 190, 246, 0.28) !important;
+  border: 1px solid #4383a4;
   font-size: 14px;
   font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
   font-weight: 400;
-  color: #4383a4 !important;
+  color: #bbdff0;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper:first-child {
+  border-left: 1px solid #4383a4;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-disabled {
+  color: rgba(255, 255, 255, 0.25);
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper:not(:first-child)::before {
+  background-color: #4383a4;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-checked {
+  color: rgba(21, 27, 37, 0.9) !important;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-checked .ant-radio-button-checked {
+  background: #51bef6 !important;
 }
 [data-prefers-color='dark'] .ant-picker-input input::-webkit-input-placeholder {
   color: #4383a4;
@@ -655,6 +676,10 @@
   overflow: auto;
   min-height: 100px;
 }
+[data-prefers-color='dark'] .autoScroll-outer {
+  overflow: auto;
+  min-height: 100px;
+}
 @font-face {
   font-family: 'swiper-icons';
   src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');
@@ -1441,6 +1466,15 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   background: #0f6ab7;
 }
 [data-prefers-color='dark'] .videoContainer {
+  min-width: 10px;
+  min-height: 10px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+[data-prefers-color='dark'] .videoContainer .videoContainer-grid {
+  flex: 1;
   width: 100%;
   height: 100%;
   display: grid;
@@ -1921,6 +1955,10 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   overflow: auto;
   min-height: 100px;
 }
+[data-prefers-color='light'] .autoScroll-outer {
+  overflow: auto;
+  min-height: 100px;
+}
 @font-face {
   font-family: 'swiper-icons';
   src: url('data:application/font-woff;charset=utf-8;base64, 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') format('woff');
@@ -2856,6 +2894,15 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   background: #0f6ab7;
 }
 [data-prefers-color='light'] .videoContainer {
+  min-width: 10px;
+  min-height: 10px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+[data-prefers-color='light'] .videoContainer .videoContainer-grid {
+  flex: 1;
   width: 100%;
   height: 100%;
   display: grid;

package/dist/index.esm.js

@@ -8719,7 +8719,166 @@ var Index$8 = function Index(props) {
 
 Index$8.defaultProps = {};
 
-var _excluded$a = ["list", "render", "none", "partSize"];
+var _excluded$a = ["width", "height", "itemCount", "itemSize", "renderItem", "style", "onScroll", "scrollOffset", "overscanCount", "scrollDirection"];
+
+var _sizeProp, _positionProp;
+var DIRECTION;
+
+(function (DIRECTION) {
+  DIRECTION["HORIZONTAL"] = "horizontal";
+  DIRECTION["VERTICAL"] = "vertical";
+})(DIRECTION || (DIRECTION = {}));
+
+var STYLE_WRAPPER = {
+  overflow: 'auto',
+  willChange: 'transform',
+  WebkitOverflowScrolling: 'touch'
+};
+var STYLE_INNER = {
+  position: 'relative',
+  minWidth: '100%',
+  minHeight: '100%'
+};
+var sizeProp = (_sizeProp = {}, _defineProperty(_sizeProp, DIRECTION.VERTICAL, 'height'), _defineProperty(_sizeProp, DIRECTION.HORIZONTAL, 'width'), _sizeProp);
+var positionProp = (_positionProp = {}, _defineProperty(_positionProp, DIRECTION.VERTICAL, 'top'), _defineProperty(_positionProp, DIRECTION.HORIZONTAL, 'left'), _positionProp);
+
+var VirtualList = function VirtualList(props) {
+  var width = props.width,
+      height = props.height,
+      itemCount = props.itemCount,
+      itemSize = props.itemSize,
+      renderItem = props.renderItem,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      onScroll = props.onScroll,
+      scrollOffset = props.scrollOffset,
+      _props$overscanCount = props.overscanCount,
+      overscanCount = _props$overscanCount === void 0 ? 3 : _props$overscanCount,
+      _props$scrollDirectio = props.scrollDirection,
+      scrollDirection = _props$scrollDirectio === void 0 ? DIRECTION.VERTICAL : _props$scrollDirectio,
+      otherProps = _objectWithoutProperties(props, _excluded$a);
+
+  var rootNode = useRef(null);
+
+  var _useState = useState(scrollOffset || 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      offset = _useState2[0],
+      setOffset = _useState2[1];
+
+  var _useState3 = useState({}),
+      _useState4 = _slicedToArray(_useState3, 1),
+      styleCache = _useState4[0];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isMount = _useState6[0],
+      setMount = _useState6[1];
+
+  useEffect(function () {
+    var _rootNode$current;
+
+    if (!isMount) setMount(true); // 强制更新一次，供 getVisibleRange 方法获取 DOM 挂载后 containerSize
+
+    if (scrollOffset) scrollTo(scrollOffset);
+    (_rootNode$current = rootNode.current) === null || _rootNode$current === void 0 ? void 0 : _rootNode$current.addEventListener('scroll', handleScroll, {
+      passive: true // 用于优化浏览器页面滚动的性能
+
+    });
+    return function () {
+      var _rootNode$current2;
+
+      (_rootNode$current2 = rootNode.current) === null || _rootNode$current2 === void 0 ? void 0 : _rootNode$current2.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  var handleScroll = function handleScroll(event) {
+    var _rootNode$current3 = rootNode.current,
+        _rootNode$current3$sc = _rootNode$current3.scrollTop,
+        scrollTop = _rootNode$current3$sc === void 0 ? 0 : _rootNode$current3$sc,
+        _rootNode$current3$sc2 = _rootNode$current3.scrollLeft,
+        scrollLeft = _rootNode$current3$sc2 === void 0 ? 0 : _rootNode$current3$sc2;
+    var newOffset = scrollDirection === DIRECTION.VERTICAL ? scrollTop : scrollLeft;
+
+    if (newOffset < 0 || newOffset === offset || event.target !== rootNode.current) {
+      return;
+    }
+
+    setOffset(newOffset);
+
+    if (typeof onScroll === 'function') {
+      onScroll(offset, event);
+    }
+  };
+
+  var scrollTo = function scrollTo(value) {
+    if (scrollDirection === DIRECTION.VERTICAL) {
+      rootNode.current.scrollTop = value;
+    } else {
+      rootNode.current.scrollLeft = value;
+    }
+  };
+
+  var getVisibleRange = function getVisibleRange() {
+    var _ref = rootNode.current || {},
+        _ref$clientHeight = _ref.clientHeight,
+        clientHeight = _ref$clientHeight === void 0 ? 0 : _ref$clientHeight,
+        _ref$clientWidth = _ref.clientWidth,
+        clientWidth = _ref$clientWidth === void 0 ? 0 : _ref$clientWidth;
+
+    var containerSize = scrollDirection === DIRECTION.VERTICAL ? clientHeight : clientWidth;
+    var start = Math.floor(offset / itemSize - 1); // start --> 向下取整 （索引是从0开始，所以 - 1）
+
+    var stop = Math.ceil((offset + containerSize) / itemSize - 1); // stop --> 向上取整
+
+    return {
+      start: Math.max(0, start - overscanCount),
+      stop: Math.min(stop + overscanCount, itemCount - 1)
+    };
+  };
+
+  var getStyle = function getStyle(index) {
+    var _styleCache$index;
+
+    var style = styleCache[index];
+    if (style) return style;
+    return styleCache[index] = (_styleCache$index = {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%'
+    }, _defineProperty(_styleCache$index, sizeProp[scrollDirection], props.itemSize), _defineProperty(_styleCache$index, positionProp[scrollDirection], props.itemSize * index), _styleCache$index);
+  };
+
+  var wrapperStyle = _objectSpread2(_objectSpread2(_objectSpread2({}, STYLE_WRAPPER), style), {}, {
+    height: height,
+    width: width
+  });
+
+  var innerStyle = _objectSpread2(_objectSpread2({}, STYLE_INNER), {}, _defineProperty({}, sizeProp[scrollDirection], itemCount * itemSize));
+
+  var items = [];
+
+  var _getVisibleRange = getVisibleRange(),
+      start = _getVisibleRange.start,
+      stop = _getVisibleRange.stop;
+
+  for (var index = start; index <= stop; index++) {
+    items.push(renderItem({
+      index: index,
+      style: getStyle(index)
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({
+    ref: rootNode
+  }, otherProps), {}, {
+    style: wrapperStyle
+  }), /*#__PURE__*/React.createElement("div", {
+    style: innerStyle
+  }, items));
+};
+
+var _excluded$b = ["list", "render", "none", "partSize"];
 
 function AutoScroll(props) {
   var inner1 = useRef();
@@ -8804,7 +8963,7 @@ var Index$9 = function Index(_ref) {
       none = _ref.none,
       _ref$partSize = _ref.partSize,
       partSize = _ref$partSize === void 0 ? 4 : _ref$partSize,
-      otherProps = _objectWithoutProperties(_ref, _excluded$a);
+      otherProps = _objectWithoutProperties(_ref, _excluded$b);
 
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -8887,7 +9046,7 @@ var Index$9 = function Index(_ref) {
   }, none || '暂无数据');
 };
 
-var _excluded$b = ["data", "onClick", "slidesPerView", "rowKey", "onSwiperChange", "renderItem"];
+var _excluded$c = ["data", "onClick", "slidesPerView", "rowKey", "onSwiperChange", "renderItem"];
 
 SwiperCore.use([Pagination, Navigation, Autoplay, Virtual]);
 
@@ -8899,7 +9058,7 @@ var Index$a = function Index(props) {
       rowKey = props.rowKey,
       onSwiperChange = props.onSwiperChange,
       renderItem = props.renderItem,
-      extraProps = _objectWithoutProperties(props, _excluded$b);
+      extraProps = _objectWithoutProperties(props, _excluded$c);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -9550,7 +9709,7 @@ function createBrowserHistory(props) {
   return history;
 }
 
-var _excluded$c = ["routes", "className"];
+var _excluded$d = ["routes", "className"];
 var history = createBrowserHistory();
 
 function itemRender(route, params, routes, paths) {
@@ -9568,7 +9727,7 @@ function itemRender(route, params, routes, paths) {
 var Index$b = function Index(_ref) {
   var routes = _ref.routes,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   return /*#__PURE__*/React.createElement(_Breadcrumb, _objectSpread2({
     className: className || 'default',
@@ -9578,7 +9737,7 @@ var Index$b = function Index(_ref) {
   }, props));
 };
 
-var _excluded$d = ["title", "className", "headerTail", "headerCenter", "sliderTabs"];
+var _excluded$e = ["title", "className", "headerTail", "headerCenter", "sliderTabs"];
 
 var Index$c = function Index(_ref, ref) {
   var _classNames;
@@ -9589,7 +9748,7 @@ var Index$c = function Index(_ref, ref) {
       headerTail = _ref.headerTail,
       headerCenter = _ref.headerCenter,
       sliderTabs = _ref.sliderTabs,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   useImperativeHandle(ref, function () {
     return {
@@ -9608,13 +9767,13 @@ var Index$c = function Index(_ref, ref) {
     className: "container-in"
   }, /*#__PURE__*/React.createElement("div", {
     className: "container-in-border"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, title ? /*#__PURE__*/React.createElement("div", {
     className: "header"
   }, /*#__PURE__*/React.createElement("div", {
     className: "title"
   }, /*#__PURE__*/React.createElement("span", {
     className: "dot"
-  }), title), headerCenter, headerTail), /*#__PURE__*/React.createElement("div", {
+  }), title), headerCenter, headerTail) : null, /*#__PURE__*/React.createElement("div", {
     className: "body"
   }, sliderTabs ? sliderTabs.components[activeTab] : props.children)), sliderTabs && /*#__PURE__*/React.createElement("div", {
     className: "sliderTabs ".concat(sliderTabs.direction == 'left' ? "left  ".concat(sliderTabs.className || '') : "right  ".concat(sliderTabs.className || ''))
@@ -9733,8 +9892,9 @@ function DialogModel(props, ref) {
   useEffect(function () {
     var containerEl = containerRef.current;
     var containerElWidth = containerEl.offsetWidth;
-    console.log(containerElWidth);
+    var containerElHeight = containerEl.offsetHeight;
     containerEl.style.left = "calc(50% - ".concat(containerElWidth / 2, "px)");
+    containerEl.style.top = "calc(50% - ".concat(containerElHeight / 2, "px)");
   }, [modelShow]);
   useEffect(function () {
     var containerEl = containerRef.current;
@@ -9830,7 +9990,7 @@ function DialogModel(props, ref) {
 
 var Dialog = /*#__PURE__*/React.forwardRef(DialogModel);
 
-var _excluded$e = ["visible", "width", "closeCb", "onClose", "className", "style"],
+var _excluded$f = ["visible", "width", "closeCb", "onClose", "className", "style"],
     _excluded2$3 = ["visible"];
 
 var Modal = /*#__PURE__*/function (_React$PureComponent) {
@@ -9947,7 +10107,7 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
           onClose = _this$props4.onClose,
           className = _this$props4.className,
           style = _this$props4.style,
-          other = _objectWithoutProperties(_this$props4, _excluded$e);
+          other = _objectWithoutProperties(_this$props4, _excluded$f);
 
       return /*#__PURE__*/React.createElement(Dialog, _objectSpread2({
         ref: this.containerRef,
@@ -9970,18 +10130,19 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
 
 Modal.show = void 0;
 Modal.hidden = void 0;
+Modal.destory = void 0;
+var Modals = {};
 
 Modal.show = function (config) {
-  var ModalContainer = null;
-  var modelSysbol = Symbol('$$__model__Container_hidden');
-  if (ModalContainer) return;
+  var modelSysbol = Math.random().toString(36).slice(2, 36);
+  if (Modals[modelSysbol]) return;
 
   var props = _objectSpread2(_objectSpread2({}, config), {}, {
     visible: true
   });
 
-  var container = ModalContainer = document.createElement('div');
-  var manager = container[modelSysbol] = {
+  var container = document.createElement('div');
+  var manager = container[modelSysbol] = Modals[modelSysbol] = {
     setShow: null,
     mounted: false,
     hidden: function hidden() {
@@ -9990,8 +10151,12 @@ Modal.show = function (config) {
     },
     destory: function destory() {
       ReactDOM.unmountComponentAtNode(container);
-      document.body.removeChild(container);
-      ModalContainer = null;
+
+      if (document.body.contains(container)) {
+        document.body.removeChild(container);
+      }
+
+      delete Modals[modelSysbol];
     }
   };
 
@@ -10023,8 +10188,20 @@ Modal.show = function (config) {
   return manager;
 };
 
-Modal.hidden = function () {// if (!ModalContainer) return;
-  // ModalContainer[modelSysbol] && ModalContainer[modelSysbol].hidden();
+Modal.hidden = function () {
+  if (Object.keys(Modals).length == 0) return;
+
+  for (var key in Modals) {
+    Modals[key].hidden();
+  }
+};
+
+Modal.destory = function () {
+  if (Object.keys(Modals).length == 0) return;
+
+  for (var key in Modals) {
+    Modals[key].destory();
+  }
 };
 
 var controlShow$1 = function controlShow(f1, f2, value, timer) {
@@ -10113,7 +10290,7 @@ function DialogModel$1(props) {
   return renderChildren;
 }
 
-var _excluded$f = ["visible"];
+var _excluded$g = ["visible"];
 
 var Modal$1 = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Modal, _React$PureComponent);
@@ -10253,7 +10430,7 @@ Modal$1.show = function (config) {
     manager.setShow = setShow;
 
     var visible = props.visible,
-        trueProps = _objectWithoutProperties(props, _excluded$f);
+        trueProps = _objectWithoutProperties(props, _excluded$g);
 
     useEffect(function () {
       manager.mounted = true;
@@ -10277,7 +10454,7 @@ Modal$1.hidden = function () {
   ModalContainer[modelSysbol] && ModalContainer[modelSysbol].hidden();
 };
 
-var _excluded$g = ["columns", "extraColumns", "search", "visible", "setVisible", "disabled", "submitMethod", "onSubmitSuccess", "title", "record", "onFormChange"];
+var _excluded$h = ["columns", "extraColumns", "search", "visible", "setVisible", "disabled", "submitMethod", "onSubmitSuccess", "title", "record", "onFormChange"];
 
 var ModalForm = function ModalForm(props, ref) {
   var columns = props.columns,
@@ -10291,7 +10468,7 @@ var ModalForm = function ModalForm(props, ref) {
       title = props.title,
       record = props.record,
       onFormChange = props.onFormChange,
-      extraProps = _objectWithoutProperties(props, _excluded$g);
+      extraProps = _objectWithoutProperties(props, _excluded$h);
 
   var formRef = useRef(null);
 
@@ -10422,7 +10599,7 @@ var ModalForm = function ModalForm(props, ref) {
 
 var ModalForm$1 = /*#__PURE__*/React.forwardRef(ModalForm);
 
-var _excluded$h = ["columns", "extraColumns", "request", "modalFormSearch", "search", "tableAction", "renderTableBar", "className", "style", "onFormChange", "modalConfig", "optionColumnConfig", "pagination", "noBordered"];
+var _excluded$i = ["columns", "extraColumns", "request", "modalFormSearch", "search", "tableAction", "renderTableBar", "className", "style", "onFormChange", "modalConfig", "optionColumnConfig", "pagination", "noBordered"];
 
 var TabelCard = function TabelCard(props, ref) {
   var columns = props.columns,
@@ -10439,7 +10616,7 @@ var TabelCard = function TabelCard(props, ref) {
       optionColumnConfig = props.optionColumnConfig,
       pagination = props.pagination,
       noBordered = props.noBordered,
-      extraProps = _objectWithoutProperties(props, _excluded$h);
+      extraProps = _objectWithoutProperties(props, _excluded$i);
 
   var actionRef = useRef();
   var modalFormRef = useRef(null);
@@ -11112,15 +11289,9 @@ function Xgplay(_ref, fRef) {
       setRef = _ref.setRef;
   var ref = useRef(null);
   var playerRef = useRef(null);
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      player = _useState2[0],
-      setPlayer = _useState2[1];
-
   useEffect(function () {
     if (ref.current) {
-      if (type.indexOf('hls') !== -1) {
+      if ((type === null || type === void 0 ? void 0 : type.indexOf('hls')) !== -1) {
         playerRef.current = new HlsJsPlayer(_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11129,7 +11300,7 @@ function Xgplay(_ref, fRef) {
           isLive: true,
           autoplayMuted: true
         }, config));
-      } else if (type.indexOf('flv') !== -1) {
+      } else if ((type === null || type === void 0 ? void 0 : type.indexOf('flv')) !== -1) {
         playerRef.current = new FlvPlayer(_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11138,7 +11309,7 @@ function Xgplay(_ref, fRef) {
           isLive: true,
           autoplayMuted: true
         }, config));
-      } else if (type.indexOf('mp4') !== -1) {
+      } else if ((type === null || type === void 0 ? void 0 : type.indexOf('mp4')) !== -1) {
         playerRef.current = new Player(_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11203,11 +11374,7 @@ var IconFont = createFromIconfontCN({
 function VideoPlayer(_ref, ref) {
   var _ref$footer = _ref.footer,
       footer = _ref$footer === void 0 ? true : _ref$footer,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {
-    width: 400,
-    height: 400
-  } : _ref$style,
+      style = _ref.style,
       _ref$config = _ref.config,
       config = _ref$config === void 0 ? {} : _ref$config,
       layoutIndex = _ref.layoutIndex,
@@ -11251,20 +11418,25 @@ function VideoPlayer(_ref, ref) {
       currentLayoutIndex = _useState2[0],
       setCurrentLayoutIndex = _useState2[1];
 
+  var _useState3 = useState(url),
+      _useState4 = _slicedToArray(_useState3, 2),
+      urls = _useState4[0],
+      setUrls = _useState4[1];
+
   var initPlayerIndex = layouts[layoutIndex || 0].span >= url.length ? url.length - 1 >= 0 ? url.length - 1 : 0 : layouts[layoutIndex || 0].span - 1;
 
-  var _useState3 = useState(initPlayerIndex),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentPlayerIndex = _useState4[0],
-      setCurrentPlayerIndex = _useState4[1];
+  var _useState5 = useState(initPlayerIndex),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentPlayerIndex = _useState6[0],
+      setCurrentPlayerIndex = _useState6[1];
 
   var domRef = useRef(null);
   var playerRef = useRef({});
 
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      players = _useState6[0],
-      setPlayers = _useState6[1];
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      players = _useState8[0],
+      setPlayers = _useState8[1];
 
   var renderDom = useMemo(function () {
     var arr = new Array(layouts[currentLayoutIndex].span).fill(0);
@@ -11275,16 +11447,16 @@ function VideoPlayer(_ref, ref) {
         onClickCapture: function onClickCapture() {
           setCurrentPlayerIndex(index);
         }
-      }, url[index] ? /*#__PURE__*/React.createElement(Xgplay$1, {
+      }, urls[index] ? /*#__PURE__*/React.createElement(Xgplay$1, {
         setRef: function setRef(ref) {
           return setPlayers(function (players) {
             players[index] = ref;
             return players;
           });
         },
-        type: url[index],
+        type: urls[index],
         config: _objectSpread2({
-          url: url[index],
+          url: urls[index],
           fluid: true
         }, config)
       }) : /*#__PURE__*/React.createElement("div", {
@@ -11297,7 +11469,7 @@ function VideoPlayer(_ref, ref) {
         }
       }));
     });
-  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, urls]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11324,10 +11496,13 @@ function VideoPlayer(_ref, ref) {
     var currentPlayer = players[currentPlayerIndex];
 
     if (currentPlayer) {
-      console.log(currentPlayer, 'currentPlayer');
-      currentPlayer.src = url; // debugger
-      // currentPlayer.start(url)
+      currentPlayer.src = url;
     }
+
+    setUrls(function (urls) {
+      urls[currentPlayerIndex] = url;
+      return _toConsumableArray(urls);
+    });
   };
 
   useImperativeHandle(ref, function () {
@@ -11335,14 +11510,16 @@ function VideoPlayer(_ref, ref) {
       players: players,
       currentLayoutIndex: currentLayoutIndex,
       currentPlayerIndex: currentPlayerIndex,
+      urls: urls,
       loadCamera: loadCamera
     };
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "videoContainer",
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     ref: domRef,
-    className: "videoContainer",
+    className: "videoContainer-grid",
     style: layouts[currentLayoutIndex].style
   }, renderDom), footer ? /*#__PURE__*/React.createElement("div", {
     className: "tools"
@@ -11364,4 +11541,4 @@ function VideoPlayer(_ref, ref) {
 
 var index$3 = /*#__PURE__*/forwardRef(VideoPlayer);
 
-export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, index$3 as VideoPlayer, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };
+export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, index$3 as VideoPlayer, VirtualList, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };

package/dist/index.js

@@ -8757,7 +8757,166 @@ var Index$8 = function Index(props) {
 
 Index$8.defaultProps = {};
 
-var _excluded$a = ["list", "render", "none", "partSize"];
+var _excluded$a = ["width", "height", "itemCount", "itemSize", "renderItem", "style", "onScroll", "scrollOffset", "overscanCount", "scrollDirection"];
+
+var _sizeProp, _positionProp;
+var DIRECTION;
+
+(function (DIRECTION) {
+  DIRECTION["HORIZONTAL"] = "horizontal";
+  DIRECTION["VERTICAL"] = "vertical";
+})(DIRECTION || (DIRECTION = {}));
+
+var STYLE_WRAPPER = {
+  overflow: 'auto',
+  willChange: 'transform',
+  WebkitOverflowScrolling: 'touch'
+};
+var STYLE_INNER = {
+  position: 'relative',
+  minWidth: '100%',
+  minHeight: '100%'
+};
+var sizeProp = (_sizeProp = {}, _defineProperty(_sizeProp, DIRECTION.VERTICAL, 'height'), _defineProperty(_sizeProp, DIRECTION.HORIZONTAL, 'width'), _sizeProp);
+var positionProp = (_positionProp = {}, _defineProperty(_positionProp, DIRECTION.VERTICAL, 'top'), _defineProperty(_positionProp, DIRECTION.HORIZONTAL, 'left'), _positionProp);
+
+var VirtualList = function VirtualList(props) {
+  var width = props.width,
+      height = props.height,
+      itemCount = props.itemCount,
+      itemSize = props.itemSize,
+      renderItem = props.renderItem,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      onScroll = props.onScroll,
+      scrollOffset = props.scrollOffset,
+      _props$overscanCount = props.overscanCount,
+      overscanCount = _props$overscanCount === void 0 ? 3 : _props$overscanCount,
+      _props$scrollDirectio = props.scrollDirection,
+      scrollDirection = _props$scrollDirectio === void 0 ? DIRECTION.VERTICAL : _props$scrollDirectio,
+      otherProps = _objectWithoutProperties(props, _excluded$a);
+
+  var rootNode = React.useRef(null);
+
+  var _useState = React.useState(scrollOffset || 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      offset = _useState2[0],
+      setOffset = _useState2[1];
+
+  var _useState3 = React.useState({}),
+      _useState4 = _slicedToArray(_useState3, 1),
+      styleCache = _useState4[0];
+
+  var _useState5 = React.useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isMount = _useState6[0],
+      setMount = _useState6[1];
+
+  React.useEffect(function () {
+    var _rootNode$current;
+
+    if (!isMount) setMount(true); // 强制更新一次，供 getVisibleRange 方法获取 DOM 挂载后 containerSize
+
+    if (scrollOffset) scrollTo(scrollOffset);
+    (_rootNode$current = rootNode.current) === null || _rootNode$current === void 0 ? void 0 : _rootNode$current.addEventListener('scroll', handleScroll, {
+      passive: true // 用于优化浏览器页面滚动的性能
+
+    });
+    return function () {
+      var _rootNode$current2;
+
+      (_rootNode$current2 = rootNode.current) === null || _rootNode$current2 === void 0 ? void 0 : _rootNode$current2.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  var handleScroll = function handleScroll(event) {
+    var _rootNode$current3 = rootNode.current,
+        _rootNode$current3$sc = _rootNode$current3.scrollTop,
+        scrollTop = _rootNode$current3$sc === void 0 ? 0 : _rootNode$current3$sc,
+        _rootNode$current3$sc2 = _rootNode$current3.scrollLeft,
+        scrollLeft = _rootNode$current3$sc2 === void 0 ? 0 : _rootNode$current3$sc2;
+    var newOffset = scrollDirection === DIRECTION.VERTICAL ? scrollTop : scrollLeft;
+
+    if (newOffset < 0 || newOffset === offset || event.target !== rootNode.current) {
+      return;
+    }
+
+    setOffset(newOffset);
+
+    if (typeof onScroll === 'function') {
+      onScroll(offset, event);
+    }
+  };
+
+  var scrollTo = function scrollTo(value) {
+    if (scrollDirection === DIRECTION.VERTICAL) {
+      rootNode.current.scrollTop = value;
+    } else {
+      rootNode.current.scrollLeft = value;
+    }
+  };
+
+  var getVisibleRange = function getVisibleRange() {
+    var _ref = rootNode.current || {},
+        _ref$clientHeight = _ref.clientHeight,
+        clientHeight = _ref$clientHeight === void 0 ? 0 : _ref$clientHeight,
+        _ref$clientWidth = _ref.clientWidth,
+        clientWidth = _ref$clientWidth === void 0 ? 0 : _ref$clientWidth;
+
+    var containerSize = scrollDirection === DIRECTION.VERTICAL ? clientHeight : clientWidth;
+    var start = Math.floor(offset / itemSize - 1); // start --> 向下取整 （索引是从0开始，所以 - 1）
+
+    var stop = Math.ceil((offset + containerSize) / itemSize - 1); // stop --> 向上取整
+
+    return {
+      start: Math.max(0, start - overscanCount),
+      stop: Math.min(stop + overscanCount, itemCount - 1)
+    };
+  };
+
+  var getStyle = function getStyle(index) {
+    var _styleCache$index;
+
+    var style = styleCache[index];
+    if (style) return style;
+    return styleCache[index] = (_styleCache$index = {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%'
+    }, _defineProperty(_styleCache$index, sizeProp[scrollDirection], props.itemSize), _defineProperty(_styleCache$index, positionProp[scrollDirection], props.itemSize * index), _styleCache$index);
+  };
+
+  var wrapperStyle = _objectSpread2(_objectSpread2(_objectSpread2({}, STYLE_WRAPPER), style), {}, {
+    height: height,
+    width: width
+  });
+
+  var innerStyle = _objectSpread2(_objectSpread2({}, STYLE_INNER), {}, _defineProperty({}, sizeProp[scrollDirection], itemCount * itemSize));
+
+  var items = [];
+
+  var _getVisibleRange = getVisibleRange(),
+      start = _getVisibleRange.start,
+      stop = _getVisibleRange.stop;
+
+  for (var index = start; index <= stop; index++) {
+    items.push(renderItem({
+      index: index,
+      style: getStyle(index)
+    }));
+  }
+
+  return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({
+    ref: rootNode
+  }, otherProps), {}, {
+    style: wrapperStyle
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: innerStyle
+  }, items));
+};
+
+var _excluded$b = ["list", "render", "none", "partSize"];
 
 function AutoScroll(props) {
   var inner1 = React.useRef();
@@ -8842,7 +9001,7 @@ var Index$9 = function Index(_ref) {
       none = _ref.none,
       _ref$partSize = _ref.partSize,
       partSize = _ref$partSize === void 0 ? 4 : _ref$partSize,
-      otherProps = _objectWithoutProperties(_ref, _excluded$a);
+      otherProps = _objectWithoutProperties(_ref, _excluded$b);
 
   var _useState = React.useState([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -8925,7 +9084,7 @@ var Index$9 = function Index(_ref) {
   }, none || '暂无数据');
 };
 
-var _excluded$b = ["data", "onClick", "slidesPerView", "rowKey", "onSwiperChange", "renderItem"];
+var _excluded$c = ["data", "onClick", "slidesPerView", "rowKey", "onSwiperChange", "renderItem"];
 
 SwiperCore__default['default'].use([SwiperCore.Pagination, SwiperCore.Navigation, SwiperCore.Autoplay, SwiperCore.Virtual]);
 
@@ -8937,7 +9096,7 @@ var Index$a = function Index(props) {
       rowKey = props.rowKey,
       onSwiperChange = props.onSwiperChange,
       renderItem = props.renderItem,
-      extraProps = _objectWithoutProperties(props, _excluded$b);
+      extraProps = _objectWithoutProperties(props, _excluded$c);
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -9588,7 +9747,7 @@ function createBrowserHistory(props) {
   return history;
 }
 
-var _excluded$c = ["routes", "className"];
+var _excluded$d = ["routes", "className"];
 var history = createBrowserHistory();
 
 function itemRender(route, params, routes, paths) {
@@ -9606,7 +9765,7 @@ function itemRender(route, params, routes, paths) {
 var Index$b = function Index(_ref) {
   var routes = _ref.routes,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   return /*#__PURE__*/React__default['default'].createElement(_Breadcrumb__default['default'], _objectSpread2({
     className: className || 'default',
@@ -9616,7 +9775,7 @@ var Index$b = function Index(_ref) {
   }, props));
 };
 
-var _excluded$d = ["title", "className", "headerTail", "headerCenter", "sliderTabs"];
+var _excluded$e = ["title", "className", "headerTail", "headerCenter", "sliderTabs"];
 
 var Index$c = function Index(_ref, ref) {
   var _classNames;
@@ -9627,7 +9786,7 @@ var Index$c = function Index(_ref, ref) {
       headerTail = _ref.headerTail,
       headerCenter = _ref.headerCenter,
       sliderTabs = _ref.sliderTabs,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   React.useImperativeHandle(ref, function () {
     return {
@@ -9646,13 +9805,13 @@ var Index$c = function Index(_ref, ref) {
     className: "container-in"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "container-in-border"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, title ? /*#__PURE__*/React__default['default'].createElement("div", {
     className: "header"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "title"
   }, /*#__PURE__*/React__default['default'].createElement("span", {
     className: "dot"
-  }), title), headerCenter, headerTail), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), title), headerCenter, headerTail) : null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "body"
   }, sliderTabs ? sliderTabs.components[activeTab] : props.children)), sliderTabs && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "sliderTabs ".concat(sliderTabs.direction == 'left' ? "left  ".concat(sliderTabs.className || '') : "right  ".concat(sliderTabs.className || ''))
@@ -9771,8 +9930,9 @@ function DialogModel(props, ref) {
   React.useEffect(function () {
     var containerEl = containerRef.current;
     var containerElWidth = containerEl.offsetWidth;
-    console.log(containerElWidth);
+    var containerElHeight = containerEl.offsetHeight;
     containerEl.style.left = "calc(50% - ".concat(containerElWidth / 2, "px)");
+    containerEl.style.top = "calc(50% - ".concat(containerElHeight / 2, "px)");
   }, [modelShow]);
   React.useEffect(function () {
     var containerEl = containerRef.current;
@@ -9868,7 +10028,7 @@ function DialogModel(props, ref) {
 
 var Dialog = /*#__PURE__*/React__default['default'].forwardRef(DialogModel);
 
-var _excluded$e = ["visible", "width", "closeCb", "onClose", "className", "style"],
+var _excluded$f = ["visible", "width", "closeCb", "onClose", "className", "style"],
     _excluded2$3 = ["visible"];
 
 var Modal = /*#__PURE__*/function (_React$PureComponent) {
@@ -9985,7 +10145,7 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
           onClose = _this$props4.onClose,
           className = _this$props4.className,
           style = _this$props4.style,
-          other = _objectWithoutProperties(_this$props4, _excluded$e);
+          other = _objectWithoutProperties(_this$props4, _excluded$f);
 
       return /*#__PURE__*/React__default['default'].createElement(Dialog, _objectSpread2({
         ref: this.containerRef,
@@ -10008,18 +10168,19 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
 
 Modal.show = void 0;
 Modal.hidden = void 0;
+Modal.destory = void 0;
+var Modals = {};
 
 Modal.show = function (config) {
-  var ModalContainer = null;
-  var modelSysbol = Symbol('$$__model__Container_hidden');
-  if (ModalContainer) return;
+  var modelSysbol = Math.random().toString(36).slice(2, 36);
+  if (Modals[modelSysbol]) return;
 
   var props = _objectSpread2(_objectSpread2({}, config), {}, {
     visible: true
   });
 
-  var container = ModalContainer = document.createElement('div');
-  var manager = container[modelSysbol] = {
+  var container = document.createElement('div');
+  var manager = container[modelSysbol] = Modals[modelSysbol] = {
     setShow: null,
     mounted: false,
     hidden: function hidden() {
@@ -10028,8 +10189,12 @@ Modal.show = function (config) {
     },
     destory: function destory() {
       ReactDOM__default['default'].unmountComponentAtNode(container);
-      document.body.removeChild(container);
-      ModalContainer = null;
+
+      if (document.body.contains(container)) {
+        document.body.removeChild(container);
+      }
+
+      delete Modals[modelSysbol];
     }
   };
 
@@ -10061,8 +10226,20 @@ Modal.show = function (config) {
   return manager;
 };
 
-Modal.hidden = function () {// if (!ModalContainer) return;
-  // ModalContainer[modelSysbol] && ModalContainer[modelSysbol].hidden();
+Modal.hidden = function () {
+  if (Object.keys(Modals).length == 0) return;
+
+  for (var key in Modals) {
+    Modals[key].hidden();
+  }
+};
+
+Modal.destory = function () {
+  if (Object.keys(Modals).length == 0) return;
+
+  for (var key in Modals) {
+    Modals[key].destory();
+  }
 };
 
 var controlShow$1 = function controlShow(f1, f2, value, timer) {
@@ -10151,7 +10328,7 @@ function DialogModel$1(props) {
   return renderChildren;
 }
 
-var _excluded$f = ["visible"];
+var _excluded$g = ["visible"];
 
 var Modal$1 = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Modal, _React$PureComponent);
@@ -10291,7 +10468,7 @@ Modal$1.show = function (config) {
     manager.setShow = setShow;
 
     var visible = props.visible,
-        trueProps = _objectWithoutProperties(props, _excluded$f);
+        trueProps = _objectWithoutProperties(props, _excluded$g);
 
     React.useEffect(function () {
       manager.mounted = true;
@@ -10315,7 +10492,7 @@ Modal$1.hidden = function () {
   ModalContainer[modelSysbol] && ModalContainer[modelSysbol].hidden();
 };
 
-var _excluded$g = ["columns", "extraColumns", "search", "visible", "setVisible", "disabled", "submitMethod", "onSubmitSuccess", "title", "record", "onFormChange"];
+var _excluded$h = ["columns", "extraColumns", "search", "visible", "setVisible", "disabled", "submitMethod", "onSubmitSuccess", "title", "record", "onFormChange"];
 
 var ModalForm = function ModalForm(props, ref) {
   var columns = props.columns,
@@ -10329,7 +10506,7 @@ var ModalForm = function ModalForm(props, ref) {
       title = props.title,
       record = props.record,
       onFormChange = props.onFormChange,
-      extraProps = _objectWithoutProperties(props, _excluded$g);
+      extraProps = _objectWithoutProperties(props, _excluded$h);
 
   var formRef = React.useRef(null);
 
@@ -10460,7 +10637,7 @@ var ModalForm = function ModalForm(props, ref) {
 
 var ModalForm$1 = /*#__PURE__*/React__default['default'].forwardRef(ModalForm);
 
-var _excluded$h = ["columns", "extraColumns", "request", "modalFormSearch", "search", "tableAction", "renderTableBar", "className", "style", "onFormChange", "modalConfig", "optionColumnConfig", "pagination", "noBordered"];
+var _excluded$i = ["columns", "extraColumns", "request", "modalFormSearch", "search", "tableAction", "renderTableBar", "className", "style", "onFormChange", "modalConfig", "optionColumnConfig", "pagination", "noBordered"];
 
 var TabelCard = function TabelCard(props, ref) {
   var columns = props.columns,
@@ -10477,7 +10654,7 @@ var TabelCard = function TabelCard(props, ref) {
       optionColumnConfig = props.optionColumnConfig,
       pagination = props.pagination,
       noBordered = props.noBordered,
-      extraProps = _objectWithoutProperties(props, _excluded$h);
+      extraProps = _objectWithoutProperties(props, _excluded$i);
 
   var actionRef = React.useRef();
   var modalFormRef = React.useRef(null);
@@ -11150,15 +11327,9 @@ function Xgplay(_ref, fRef) {
       setRef = _ref.setRef;
   var ref = React.useRef(null);
   var playerRef = React.useRef(null);
-
-  var _useState = React.useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      player = _useState2[0],
-      setPlayer = _useState2[1];
-
   React.useEffect(function () {
     if (ref.current) {
-      if (type.indexOf('hls') !== -1) {
+      if ((type === null || type === void 0 ? void 0 : type.indexOf('hls')) !== -1) {
         playerRef.current = new HlsJsPlayer__default['default'](_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11167,7 +11338,7 @@ function Xgplay(_ref, fRef) {
           isLive: true,
           autoplayMuted: true
         }, config));
-      } else if (type.indexOf('flv') !== -1) {
+      } else if ((type === null || type === void 0 ? void 0 : type.indexOf('flv')) !== -1) {
         playerRef.current = new FlvPlayer__default['default'](_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11176,7 +11347,7 @@ function Xgplay(_ref, fRef) {
           isLive: true,
           autoplayMuted: true
         }, config));
-      } else if (type.indexOf('mp4') !== -1) {
+      } else if ((type === null || type === void 0 ? void 0 : type.indexOf('mp4')) !== -1) {
         playerRef.current = new Player__default['default'](_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11241,11 +11412,7 @@ var IconFont = icons.createFromIconfontCN({
 function VideoPlayer(_ref, ref) {
   var _ref$footer = _ref.footer,
       footer = _ref$footer === void 0 ? true : _ref$footer,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {
-    width: 400,
-    height: 400
-  } : _ref$style,
+      style = _ref.style,
       _ref$config = _ref.config,
       config = _ref$config === void 0 ? {} : _ref$config,
       layoutIndex = _ref.layoutIndex,
@@ -11289,20 +11456,25 @@ function VideoPlayer(_ref, ref) {
       currentLayoutIndex = _useState2[0],
       setCurrentLayoutIndex = _useState2[1];
 
+  var _useState3 = React.useState(url),
+      _useState4 = _slicedToArray(_useState3, 2),
+      urls = _useState4[0],
+      setUrls = _useState4[1];
+
   var initPlayerIndex = layouts[layoutIndex || 0].span >= url.length ? url.length - 1 >= 0 ? url.length - 1 : 0 : layouts[layoutIndex || 0].span - 1;
 
-  var _useState3 = React.useState(initPlayerIndex),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentPlayerIndex = _useState4[0],
-      setCurrentPlayerIndex = _useState4[1];
+  var _useState5 = React.useState(initPlayerIndex),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentPlayerIndex = _useState6[0],
+      setCurrentPlayerIndex = _useState6[1];
 
   var domRef = React.useRef(null);
   var playerRef = React.useRef({});
 
-  var _useState5 = React.useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      players = _useState6[0],
-      setPlayers = _useState6[1];
+  var _useState7 = React.useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      players = _useState8[0],
+      setPlayers = _useState8[1];
 
   var renderDom = React.useMemo(function () {
     var arr = new Array(layouts[currentLayoutIndex].span).fill(0);
@@ -11313,16 +11485,16 @@ function VideoPlayer(_ref, ref) {
         onClickCapture: function onClickCapture() {
           setCurrentPlayerIndex(index);
         }
-      }, url[index] ? /*#__PURE__*/React__default['default'].createElement(Xgplay$1, {
+      }, urls[index] ? /*#__PURE__*/React__default['default'].createElement(Xgplay$1, {
         setRef: function setRef(ref) {
           return setPlayers(function (players) {
             players[index] = ref;
             return players;
           });
         },
-        type: url[index],
+        type: urls[index],
         config: _objectSpread2({
-          url: url[index],
+          url: urls[index],
           fluid: true
         }, config)
       }) : /*#__PURE__*/React__default['default'].createElement("div", {
@@ -11335,7 +11507,7 @@ function VideoPlayer(_ref, ref) {
         }
       }));
     });
-  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, urls]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11362,10 +11534,13 @@ function VideoPlayer(_ref, ref) {
     var currentPlayer = players[currentPlayerIndex];
 
     if (currentPlayer) {
-      console.log(currentPlayer, 'currentPlayer');
-      currentPlayer.src = url; // debugger
-      // currentPlayer.start(url)
+      currentPlayer.src = url;
     }
+
+    setUrls(function (urls) {
+      urls[currentPlayerIndex] = url;
+      return _toConsumableArray(urls);
+    });
   };
 
   React.useImperativeHandle(ref, function () {
@@ -11373,14 +11548,16 @@ function VideoPlayer(_ref, ref) {
       players: players,
       currentLayoutIndex: currentLayoutIndex,
       currentPlayerIndex: currentPlayerIndex,
+      urls: urls,
       loadCamera: loadCamera
     };
   });
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "videoContainer",
     style: style
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     ref: domRef,
-    className: "videoContainer",
+    className: "videoContainer-grid",
     style: layouts[currentLayoutIndex].style
   }, renderDom), footer ? /*#__PURE__*/React__default['default'].createElement("div", {
     className: "tools"
@@ -11426,6 +11603,7 @@ exports.TabelCard = index$2;
 exports.Table = Table;
 exports.TreeSelect = Index$6;
 exports.VideoPlayer = index$3;
+exports.VirtualList = VirtualList;
 exports.WDatePicker = Index$5;
 exports.WForm = WForm$1;
 exports.WebsocketHeart = WebsocketHeart;

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "wargerm",
-  "version": "0.4.19",
+  "version": "0.4.22",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",
@@ -81,4 +81,4 @@
     "react": "^16.12.0",
     "yorkie": "^2.0.0"
   }
-}
+}