@cloud-app-dev/vidc 2.2.0-alpha.1 → 2.2.0-alpha.2

package/.umirc.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'dumi';
 import path from 'path';
 
 const token =
-  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NiIsImV4dCI6MTY0MDQwOTc4NjQ3OCwidWlkIjoiMTAxMDAwMDAwMjQ5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTAzODddLCJ2YWxpZFRpbWUiOm51bGwsIm9wdENlbnRlcklkIjoiMTAwMTAwMDAwMjMzIiwidXNlclR5cGUiOjEwMDcwMiwiaWF0IjoxNjQwMTUwNTg2NDc4fQ.9a8me82dxS_DJ52Ac8eBu1Y2Gigs7mZ6Cm3Rd-tj5Vk';
+  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDExMDAwMDA5NiIsImV4dCI6MTY1NTI1OTQ3OTYyNSwidWlkIjoiMTAxMDAzMDAwMDAzIiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDEwMDIwMDAwODNdLCJ2YWxpZFRpbWUiOm51bGwsIm9wdENlbnRlcklkIjoiMTAwMTAwMTAwMDM1IiwidXNlclR5cGUiOjEwMDcwMiwiaWF0IjoxNjU0NjU0Njc5NjI1fQ.EE4w6MrRwc-iWpC9nSEmQylaqi-hhi-HAWH-VNBVAbk';
 
 export default defineConfig({
   title: 'CloudApp VIDC',
@@ -32,13 +32,14 @@ export default defineConfig({
   },
   proxy: {
     '/api': {
-      target: 'http://192.168.101.23',
+      target: 'http://192.168.100.9:2235',
       changeOrigin: true,
       onProxyReq(proxyReq: any) {
         proxyReq.setHeader('authorization', token);
       },
     },
   },
+  fastRefresh: true,
 
   // mfsu: {
   //   development: {

package/es/Api/index.js

@@ -70,7 +70,7 @@ var Api = /*#__PURE__*/function () {
                     limit: 10000,
                     offset: 0,
                     organizationId: organizationId,
-                    validState: ['104406']
+                    postId: ''
                   }, params)
                 });
 

package/es/Drawer/Demo.js

@@ -15,10 +15,13 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import Drawer from './index';
 
 var App = function App() {
+  var drawer = Drawer.useDrawer();
+  var ref = useRef();
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       visible = _useState2[0],
@@ -34,7 +37,7 @@ var App = function App() {
 
   return /*#__PURE__*/React.createElement(_ConfigProvider, {
     prefixCls: "cloudapp"
-  }, /*#__PURE__*/React.createElement(_Button, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Button, {
     type: "primary",
     onClick: showDrawer
   }, "Open"), /*#__PURE__*/React.createElement(Drawer, {
@@ -46,7 +49,25 @@ var App = function App() {
       alert('确定！');
       onClose();
     }
-  }, /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents...")));
+  }, /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents..."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    onClick: function onClick() {
+      return drawer.open({
+        content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents..."))
+      });
+    }
+  }, "useDrawer")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    onClick: function onClick() {
+      var _a;
+
+      return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.open({
+        content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents..."))
+      });
+    }
+  }, "RefDrawer"), /*#__PURE__*/React.createElement(Drawer.RefDrawer, {
+    ref: ref
+  })));
 };
 
 export default App;

package/es/Drawer/index.d.ts

@@ -1,13 +1,38 @@
-/// <reference types="react" />
 import { DrawerProps } from './interface';
+import React from 'react';
 import './index.less';
-declare function ZVDrawer({ style, getContainer, onClose, className, onOk, cancelText, okText, children, ...props }: DrawerProps): JSX.Element;
-declare namespace ZVDrawer {
+declare function Drawer({ style, getContainer, onClose, className, onOk, cancelText, okText, children, ...props }: DrawerProps): JSX.Element;
+declare namespace Drawer {
     var defaultProps: {
         getContainer: boolean;
         className: string;
         cancelText: string;
         okText: string;
     };
+    var useDrawer: (prefixCls?: string) => {
+        open: (options: IUseDrawerHookState) => void;
+        close: () => void;
+    };
+    var RefDrawer: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<IRefDrawerMethodsProps>>;
+}
+export interface IUseDrawerHookState {
+    content?: React.ReactNode;
+    visible?: boolean;
+    title?: React.ReactNode;
+    onOk?: () => void;
+    width?: number | string;
+    className?: string;
+}
+export interface IUseDrawerHookState {
+    content?: React.ReactNode;
+    visible?: boolean;
+    title?: React.ReactNode;
+    onOk?: () => void;
+    width?: number | string;
+    className?: string;
+}
+export interface IRefDrawerMethodsProps {
+    open: (options: IUseDrawerHookState) => void;
+    close: () => void;
 }
-export default ZVDrawer;
+export default Drawer;

package/es/Drawer/index.js

@@ -1,11 +1,29 @@
+import "antd/lib/config-provider/style";
+import _ConfigProvider from "antd/lib/config-provider";
 import "antd/lib/drawer/style";
 import _Drawer from "antd/lib/drawer";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 import { __rest } from "tslib";
-import React from 'react';
 import Footer from './Footer';
+import React, { useContext, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import CC from '../ConfigContext';
 import "./index.css";
+import ConfigContext from '../ConfigContext';
 
-function ZVDrawer(_a) {
+function Drawer(_a) {
   var style = _a.style,
       getContainer = _a.getContainer,
       onClose = _a.onClose,
@@ -32,10 +50,143 @@ function ZVDrawer(_a) {
   }, props), children);
 }
 
-ZVDrawer.defaultProps = {
+Drawer.defaultProps = {
   getContainer: false,
   className: '',
   cancelText: '取消',
   okText: '确定'
 };
-export default ZVDrawer;
+
+function useDrawer() {
+  var prefixCls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cloudapp';
+  var context = useContext(CC.Context);
+  var container = useMemo(function () {
+    var _a;
+
+    return (_a = context === null || context === void 0 ? void 0 : context.root) !== null && _a !== void 0 ? _a : document.body;
+  }, [context === null || context === void 0 ? void 0 : context.root]);
+  var div = useMemo(function () {
+    return document.createElement('div');
+  }, []);
+
+  var _useState = useState({
+    content: null,
+    visible: false,
+    title: '',
+    onOk: undefined,
+    width: undefined,
+    className: undefined
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var root = useMemo(function () {
+    return ReactDOMClient.createRoot(div, {
+      onRecoverableError: console.error
+    });
+  }, []);
+  useEffect(function () {
+    container.appendChild(div);
+    return function () {
+      setTimeout(function () {
+        return root.unmount(), div.remove();
+      }, 100);
+    };
+  }, []);
+  useEffect(function () {
+    root.render( /*#__PURE__*/React.createElement(_ConfigProvider, {
+      prefixCls: prefixCls,
+      getPopupContainer: function getPopupContainer() {
+        return container;
+      }
+    }, /*#__PURE__*/React.createElement(Drawer, {
+      visible: state.visible,
+      onOk: state.onOk,
+      onClose: close,
+      destroyOnClose: true,
+      title: state.title,
+      width: state.width,
+      className: state.className,
+      getContainer: false
+    }, state.content)));
+  }, [state.content, state.visible, state.title, state.onOk, state.width, state.className]);
+
+  var open = function open(options) {
+    setState(function (old) {
+      return Object.assign(Object.assign(Object.assign({}, old), options), {
+        visible: true
+      });
+    });
+  };
+
+  var close = function close() {
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        visible: false
+      });
+    });
+  };
+
+  return {
+    open: open,
+    close: close
+  };
+}
+
+var RefDrawer = /*#__PURE__*/React.forwardRef(function RefDrawer(_, ref) {
+  var context = useContext(ConfigContext.Context);
+  var root = useMemo(function () {
+    return (context === null || context === void 0 ? void 0 : context.root) || document.body;
+  }, [context === null || context === void 0 ? void 0 : context.root]);
+
+  var _useState3 = useState({
+    content: null,
+    visible: false,
+    title: '',
+    onOk: undefined,
+    width: undefined,
+    className: undefined
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      state = _useState4[0],
+      setState = _useState4[1];
+
+  var open = function open(options) {
+    setState(function (old) {
+      return Object.assign(Object.assign(Object.assign({}, old), options), {
+        visible: true
+      });
+    });
+  };
+
+  var close = function close() {
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        visible: false
+      });
+    });
+  };
+
+  useImperativeHandle(ref, function () {
+    return {
+      open: open,
+      close: close
+    };
+  }, [state]);
+  return /*#__PURE__*/React.createElement(Drawer, {
+    visible: state.visible,
+    onOk: state.onOk,
+    onClose: close,
+    destroyOnClose: true,
+    title: state.title,
+    width: state.width,
+    className: state.className,
+    getContainer: function getContainer() {
+      return root;
+    }
+  }, state.content);
+});
+Drawer.useDrawer = useDrawer;
+Drawer.RefDrawer = RefDrawer;
+export default Drawer;

package/es/FrontendPlayer/index.d.ts

@@ -0,0 +1,2 @@
+import FrontendPlayer from '../Player/frontend_player';
+export default FrontendPlayer;

package/es/FrontendPlayer/index.js

@@ -0,0 +1,2 @@
+import FrontendPlayer from '../Player/frontend_player';
+export default FrontendPlayer;

package/es/FullScreen/index.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import './index.less';
 interface IFullScrenProps {
     className?: string;
     getContainer: () => HTMLElement | Element;
     fullScreenChange?: (flag: boolean) => void;
-    children?: (flag: boolean) => React.ReactNode;
 }
-declare function FullScreen({ children, className, getContainer, fullScreenChange }: IFullScrenProps): JSX.Element;
+declare function FullScreen({ className, getContainer, fullScreenChange }: IFullScrenProps): JSX.Element;
 export default FullScreen;

package/es/FullScreen/index.js

@@ -1,4 +1,4 @@
-import _fullScreenHelper from "@cloud-app-dev/utils/es/fullScreenHelper";
+import _useFullscreen3 from "ahooks/es/useFullscreen";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -12,57 +12,30 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import IconFont from '../IconFont';
 import "./index.css";
 
 function FullScreen(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
+  var className = _ref.className,
       getContainer = _ref.getContainer,
       fullScreenChange = _ref.fullScreenChange;
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      screenState = _useState2[0],
-      setScreenState = _useState2[1];
+  var _useFullscreen = _useFullscreen3(getContainer),
+      _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
+      isFullscreen = _useFullscreen2[0],
+      toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
 
   useEffect(function () {
-    var onfullscreenchange = function onfullscreenchange() {
-      var fullScreenEle = _fullScreenHelper.isFullscreen();
-
-      var container = getContainer();
-      var flag = container === fullScreenEle;
-      setScreenState(flag);
-      fullScreenChange && fullScreenChange(flag);
-    };
-
-    document.addEventListener('webkitfullscreenchange', onfullscreenchange, false);
-    return function () {
-      return document.removeEventListener('webkitfullscreenchange', onfullscreenchange, false);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [screenState]);
-
-  function onClickFullScreen() {
-    var container = getContainer();
-
-    var fullScreenEle = _fullScreenHelper.isFullscreen();
-
-    var flag = fullScreenEle === container;
-    flag ? _fullScreenHelper.exitFullscreen() : _fullScreenHelper.fullscreen(container);
-    setScreenState(!flag);
-    fullScreenChange && fullScreenChange(!flag);
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
+    return fullScreenChange && fullScreenChange(isFullscreen);
+  }, [isFullscreen]);
+  return /*#__PURE__*/React.createElement("span", {
     className: "tools-screen-layer ".concat(className ? className : ''),
-    onClick: function onClick() {
-      return onClickFullScreen();
-    }
-  }, children ? children(screenState) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconFont, {
+    onClick: toggleFullscreen
+  }, /*#__PURE__*/React.createElement(IconFont, {
     className: "defualt-fullscreen-icon icon-primary",
-    type: !screenState ? 'icon-S_View_ScreenViewFull' : 'icon-S_View_ScreenViewExit'
-  }), !screenState ? '全屏' : '窗口'));
+    type: !isFullscreen ? 'icon-S_View_ScreenViewFull' : 'icon-S_View_ScreenViewExit'
+  }), !isFullscreen ? '全屏' : '窗口');
 }
 
 export default FullScreen;

package/es/List/GridList/index.js

@@ -14,7 +14,6 @@ function GridList(props, ref) {
   useImperativeHandle(ref, function () {
     return containerRef.current;
   }, []);
-  console.log(renderData);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     className: "cloudapp-grid-list ".concat(props.className || '')

package/es/Modal/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ModalProps } from './interface';
+import React from 'react';
 import './index.less';
 declare function Modal({ children, className, style, getContainer, ...props }: ModalProps): JSX.Element;
 declare namespace Modal {
@@ -14,5 +14,31 @@ declare namespace Modal {
     var warning: import("antd/lib/modal/confirm").ModalFunc;
     var confirm: import("antd/lib/modal/confirm").ModalFunc;
     var destroyAll: () => void;
+    var useModal: (prefixCls?: string) => {
+        open: (options: IUseModalHookState) => void;
+        close: () => void;
+    };
+    var useAntdModal: typeof import("antd/lib/modal/useModal").default;
+    var RefModal: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<IRefModalMethodsProps>>;
+}
+export interface IUseModalHookState {
+    content?: React.ReactNode;
+    visible?: boolean;
+    title?: React.ReactNode;
+    onOk?: () => void;
+    width?: number | string;
+    className?: string;
+}
+export interface IUseModalHookState {
+    content?: React.ReactNode;
+    visible?: boolean;
+    title?: React.ReactNode;
+    onOk?: () => void;
+    width?: number | string;
+    className?: string;
+}
+export interface IRefModalMethodsProps {
+    open: (options: IUseModalHookState) => void;
+    close: () => void;
 }
 export default Modal;

package/es/Modal/index.js

@@ -1,8 +1,26 @@
+import "antd/lib/config-provider/style";
+import _ConfigProvider from "antd/lib/config-provider";
 import "antd/lib/modal/style";
 import _Modal from "antd/lib/modal";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 import { __rest } from "tslib";
-import React from 'react';
+import React, { useContext, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import CC from '../ConfigContext';
 import "./index.css";
+import ConfigContext from '../ConfigContext';
 
 function Modal(_a) {
   var children = _a.children,
@@ -24,6 +42,139 @@ Modal.defaultProps = {
   className: '',
   getContainer: false
 };
+
+function useModal() {
+  var prefixCls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cloudapp';
+  var context = useContext(CC.Context);
+  var container = useMemo(function () {
+    var _a;
+
+    return (_a = context === null || context === void 0 ? void 0 : context.root) !== null && _a !== void 0 ? _a : document.body;
+  }, [context === null || context === void 0 ? void 0 : context.root]);
+  var div = useMemo(function () {
+    return document.createElement('div');
+  }, []);
+
+  var _useState = useState({
+    content: null,
+    visible: false,
+    title: '',
+    onOk: undefined,
+    width: undefined,
+    className: undefined
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var root = useMemo(function () {
+    return ReactDOMClient.createRoot(div);
+  }, []);
+  useEffect(function () {
+    container.appendChild(div);
+    return function () {
+      setTimeout(function () {
+        return root.unmount(), div.remove();
+      }, 100);
+    };
+  }, []);
+  useEffect(function () {
+    root.render( /*#__PURE__*/React.createElement(_ConfigProvider, {
+      prefixCls: prefixCls,
+      getPopupContainer: function getPopupContainer() {
+        return container;
+      }
+    }, /*#__PURE__*/React.createElement(Modal, {
+      okText: "\u786E\u5B9A",
+      cancelText: "\u53D6\u6D88",
+      visible: state.visible,
+      onOk: state.onOk,
+      onCancel: close,
+      destroyOnClose: true,
+      title: state.title,
+      width: state.width,
+      className: state.className,
+      getContainer: false
+    }, state.content)));
+  }, [state.content, state.visible, state.title, state.onOk, state.width, state.className]);
+
+  var open = function open(options) {
+    setState(function (old) {
+      return Object.assign(Object.assign(Object.assign({}, old), options), {
+        visible: true
+      });
+    });
+  };
+
+  var close = function close() {
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        visible: false
+      });
+    });
+  };
+
+  return {
+    open: open,
+    close: close
+  };
+}
+
+var RefModal = /*#__PURE__*/React.forwardRef(function RefModal(_, ref) {
+  var context = useContext(ConfigContext.Context);
+  var root = useMemo(function () {
+    return (context === null || context === void 0 ? void 0 : context.root) || document.body;
+  }, [context === null || context === void 0 ? void 0 : context.root]);
+
+  var _useState3 = useState({
+    content: null,
+    visible: false,
+    title: '',
+    onOk: undefined,
+    width: undefined,
+    className: undefined
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      state = _useState4[0],
+      setState = _useState4[1];
+
+  var open = function open(options) {
+    setState(function (old) {
+      return Object.assign(Object.assign(Object.assign({}, old), options), {
+        visible: true
+      });
+    });
+  };
+
+  var close = function close() {
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        visible: false
+      });
+    });
+  };
+
+  useImperativeHandle(ref, function () {
+    return {
+      open: open,
+      close: close
+    };
+  }, [state]);
+  return /*#__PURE__*/React.createElement(Modal, {
+    okText: "\u786E\u5B9A",
+    cancelText: "\u53D6\u6D88",
+    visible: state.visible,
+    onOk: state.onOk,
+    onCancel: close,
+    destroyOnClose: true,
+    title: state.title,
+    width: state.width,
+    className: state.className,
+    getContainer: function getContainer() {
+      return root;
+    }
+  }, state.content);
+});
 Modal.info = _Modal.info;
 Modal.success = _Modal.success;
 Modal.error = _Modal.error;
@@ -31,4 +182,7 @@ Modal.warn = _Modal.warn;
 Modal.warning = _Modal.warning;
 Modal.confirm = _Modal.confirm;
 Modal.destroyAll = _Modal.destroyAll;
+Modal.useModal = useModal;
+Modal.useAntdModal = _Modal.useModal;
+Modal.RefModal = RefModal;
 export default Modal;

package/es/Picture/component/MoveContent/index.js

@@ -36,7 +36,23 @@ var MoveContentView = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, MoveContentView);
 
     _this = _super.call(this, props);
+    _this.position = {
+      x: 0,
+      y: 0
+    };
+    _this.DA = {
+      x: 0,
+      y: 0
+    };
+    _this.moveEvents = [];
+    _this.isDrag = false;
     _this.dragRef = /*#__PURE__*/React.createRef();
+    _this.deviation = {
+      offsetX: 0,
+      offsetY: 0,
+      width: 0,
+      height: 0
+    };
 
     _this.onMouseMove = function (event) {
       if (_this.isDrag) {
@@ -104,18 +120,6 @@ var MoveContentView = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this.isDrag = false;
-    _this.DA = {
-      x: 0,
-      y: 0
-    };
-    _this.moveEvents = [];
-    _this.deviation = {
-      offsetX: 0,
-      offsetY: 0,
-      width: 0,
-      height: 0
-    };
     return _this;
   }