@cloud-app-dev/vidc 2.0.0-alpha.11 → 2.0.0-alpha.12

package/es/WorkerFlow/Nodes/TitleElement.js

@@ -1,3 +1,7 @@
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+import _nextTick from "@cloud-app-dev/utils/es/nextTick";
+import _useFocusWithin from "ahooks/es/useFocusWithin";
+
 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."); }
@@ -10,10 +14,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useState, useEffect, useRef, useCallback, useContext } from 'react';
+import React, { useState, useEffect, useRef, useContext } from 'react';
 import WFC from '../OperatorContext';
 import IconFont from '../../IconFont';
-import useChangeEffect from '../../useChangeEffect';
 
 function TitleElement(_ref) {
   var nodeName = _ref.nodeName,
@@ -25,57 +28,91 @@ function TitleElement(_ref) {
   var _useContext = useContext(WFC),
       readOnly = _useContext.readOnly;
 
-  var _useState = useState(nodeName),
+  var ref = useRef(null);
+
+  var _useState = useState({
+    title: nodeName,
+    editable: false
+  }),
       _useState2 = _slicedToArray(_useState, 2),
-      title = _useState2[0],
-      setTitle = _useState2[1];
+      state = _useState2[0],
+      setState = _useState2[1];
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      editable = _useState4[0],
-      setEditable = _useState4[1];
+  var setTitle = function setTitle(title) {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        title: title
+      });
+    });
+  };
 
-  var input = useRef(null);
-  var onBlur = useCallback(function () {
-    setEditable(false);
+  var setEditable = function setEditable(editable) {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        editable: editable
+      });
+    });
+  };
+
+  var isFocus = _useFocusWithin(ref);
 
-    if (!title) {
-      setTitle(placeholder);
-    }
-  }, [title, placeholder]);
   useEffect(function () {
-    return !readOnly && editable && input.current.focus();
-  }, [editable]);
-  useChangeEffect(function () {
-    !readOnly && !editable && onTitleChange && onTitleChange(title);
-  }, [title, editable]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(IconFont, {
+    if (isFocus && !readOnly && state.editable) {
+      _nextTick(function () {
+        var _a;
+
+        return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.select();
+      });
+    }
+  }, [readOnly, isFocus, state.editable]);
+
+  _useUpdateEffect(function () {
+    return !readOnly && !state.editable && onTitleChange && onTitleChange(state.title);
+  }, [state.title, state.editable]);
+
+  _useUpdateEffect(function () {
+    var _a;
+
+    return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [state.editable]);
+
+  _useUpdateEffect(function () {
+    return !state.title && !isFocus && setTitle(placeholder);
+  }, [isFocus, state.title, placeholder]);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "node-title-ele",
+    tabIndex: 1000
+  }, icon && /*#__PURE__*/React.createElement(IconFont, {
     type: icon,
     style: {
       paddingRight: 4
     }
-  }), !readOnly && editable ? /*#__PURE__*/React.createElement("input", {
-    ref: input,
+  }), /*#__PURE__*/React.createElement("input", {
+    ref: ref,
     type: "text",
+    style: {
+      display: !readOnly && state.editable ? 'inline-block' : 'none'
+    },
     className: "cloudapp-input editable-title-input",
-    onBlur: onBlur,
     onChange: function onChange(e) {
       return setTitle(e.target.value);
     },
-    onFocus: function onFocus(e) {
-      return e.currentTarget.select();
+    onBlur: function onBlur() {
+      return setEditable(false);
     },
-    value: title,
+    value: state.title,
     placeholder: placeholder
-  }) : /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: "editable-title",
+    style: {
+      display: !(!readOnly && state.editable) ? 'inline-block' : 'none',
+      borderColor: readOnly ? 'transparent' : undefined
+    },
     onClick: function onClick() {
       return setEditable(true);
-    },
-    style: readOnly ? {
-      borderColor: 'transparent'
-    } : undefined
-  }, title), !readOnly && /*#__PURE__*/React.createElement(IconFont, {
+    }
+  }, state.title), !readOnly && /*#__PURE__*/React.createElement(IconFont, {
     className: "worker-flow-node-del",
     type: "icon-MarkNo",
     onClick: delNode,

package/es/WorkerFlow/index.css

@@ -241,6 +241,9 @@
   color: #15bc83;
   text-align: left;
   line-height: 16px;
+  width: 100%;
+}
+.worker-flow-design .auto-judge .title-wrapper .node-title-ele {
   display: flex;
   justify-content: space-between;
 }
@@ -492,8 +495,6 @@
 }
 .node-wrap-box .title {
   position: relative;
-  display: flex;
-  align-items: center;
   padding-left: 10px;
   padding-right: 40px;
   width: 100%;
@@ -501,10 +502,15 @@
   line-height: 30px;
   font-size: 12px;
   color: #fff;
-  text-align: left;
   background: #576a95;
   border-radius: 4px 4px 0 0;
 }
+.node-wrap-box .title .node-title-ele {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
 .node-wrap-box .title .iconfont {
   font-size: 12px;
   margin-right: 5px;

package/es/WorkerFlow/index.js

@@ -1,3 +1,4 @@
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import "antd/lib/modal/style";
 import _Modal from "antd/lib/modal";
 
@@ -38,7 +39,6 @@ import Tools from './Tools';
 import WFC from './OperatorContext';
 import { filterNoticeNode, getJAVATaskData, getUserFormKeys } from './utils';
 import RefDrawer from '../RefDrawer';
-import useChangeEffect from '../useChangeEffect';
 import "./index.css";
 var FormMap = {
   1: ApproverForm,
@@ -291,13 +291,14 @@ function WorkerFlow(_ref, ref) {
    * @description onChange传递数据
    */
 
-  useChangeEffect(function () {
+  _useUpdateEffect(function () {
     return onChange && onChange(getConfig());
   }, [config]);
   /**
    * @description ref传递数据
    */
 
+
   useImperativeHandle(ref, function () {
     return {
       getConfig: getConfig

package/es/index.d.ts

@@ -4,18 +4,15 @@ export { default as AppRedirect } from './AppRedirect';
 export { default as AppRoute } from './AppRoute';
 export { default as Auth } from './Auth';
 export { default as AutoExit } from './AutoExit';
+export { default as Box } from './Box';
 export { default as CheckGroupFixed } from './CheckGroupFixed';
 export { default as Config } from './Config';
 export { default as ConfigContext } from './ConfigContext';
-export { default as ContentBox } from './ContentBox';
 export { default as DeviceIcon } from './DeviceIcon';
-export { default as DeviceList } from './DeviceList';
 export { default as DeviceSelect } from './DeviceSelect';
 export { default as Dict } from './Dict';
 export { default as Drag } from './Drag';
 export { default as Drawer } from './Drawer';
-export { default as DynamicDeviceList } from './DynamicDeviceList';
-export { default as DynamicList } from './DynamicList';
 export { default as FullScreen } from './FullScreen';
 export { default as HightLevel } from './HightLevel';
 export { default as IconFont } from './IconFont';
@@ -25,7 +22,6 @@ export { default as InitialRequest } from './InitialRequest';
 export { default as Input } from './Input';
 export { default as LabelValue } from './LabelValue';
 export { default as List } from './List';
-export { default as ListExt } from './ListExt';
 export { default as LoaderApp } from './LoaderApp';
 export { default as LoaderScript } from './LoaderScript';
 export { default as Modal } from './Modal';
@@ -33,18 +29,14 @@ export { default as Picture } from './Picture';
 export { default as Progress } from './Progress';
 export { default as RefDrawer } from './RefDrawer';
 export { default as RefModal } from './RefModal';
-export { default as ScrollList } from './ScrollList';
 export { default as Service } from './Service';
 export { default as TableLayout } from './TableLayout';
 export { default as ThemeAntd } from './ThemeAntd';
+export { default as Title } from './Title';
 export { default as Tree } from './Tree';
-export { default as TreeMode } from './TreeMode';
-export { default as TreeTitle } from './TreeTitle';
-export { default as useChangeEffect } from './useChangeEffect';
 export { default as useDrawer } from './useDrawer';
-export { default as useHistory } from './useHistory';
 export { default as useHttp } from './useHttp';
 export { default as useModal } from './useModal';
+export { default as useNavigate } from './useNavigate';
 export { default as UserSelect } from './UserSelect';
-export { default as VList } from './VList';
 export { default as WorkerFlow } from './WorkerFlow';

package/es/index.js

@@ -4,18 +4,15 @@ export { default as AppRedirect } from './AppRedirect';
 export { default as AppRoute } from './AppRoute';
 export { default as Auth } from './Auth';
 export { default as AutoExit } from './AutoExit';
+export { default as Box } from './Box';
 export { default as CheckGroupFixed } from './CheckGroupFixed';
 export { default as Config } from './Config';
 export { default as ConfigContext } from './ConfigContext';
-export { default as ContentBox } from './ContentBox';
 export { default as DeviceIcon } from './DeviceIcon';
-export { default as DeviceList } from './DeviceList';
 export { default as DeviceSelect } from './DeviceSelect';
 export { default as Dict } from './Dict';
 export { default as Drag } from './Drag';
 export { default as Drawer } from './Drawer';
-export { default as DynamicDeviceList } from './DynamicDeviceList';
-export { default as DynamicList } from './DynamicList';
 export { default as FullScreen } from './FullScreen';
 export { default as HightLevel } from './HightLevel';
 export { default as IconFont } from './IconFont';
@@ -25,7 +22,6 @@ export { default as InitialRequest } from './InitialRequest';
 export { default as Input } from './Input';
 export { default as LabelValue } from './LabelValue';
 export { default as List } from './List';
-export { default as ListExt } from './ListExt';
 export { default as LoaderApp } from './LoaderApp';
 export { default as LoaderScript } from './LoaderScript';
 export { default as Modal } from './Modal';
@@ -33,18 +29,14 @@ export { default as Picture } from './Picture';
 export { default as Progress } from './Progress';
 export { default as RefDrawer } from './RefDrawer';
 export { default as RefModal } from './RefModal';
-export { default as ScrollList } from './ScrollList';
 export { default as Service } from './Service';
 export { default as TableLayout } from './TableLayout';
 export { default as ThemeAntd } from './ThemeAntd';
+export { default as Title } from './Title';
 export { default as Tree } from './Tree';
-export { default as TreeMode } from './TreeMode';
-export { default as TreeTitle } from './TreeTitle';
-export { default as useChangeEffect } from './useChangeEffect';
 export { default as useDrawer } from './useDrawer';
-export { default as useHistory } from './useHistory';
 export { default as useHttp } from './useHttp';
 export { default as useModal } from './useModal';
+export { default as useNavigate } from './useNavigate';
 export { default as UserSelect } from './UserSelect';
-export { default as VList } from './VList';
 export { default as WorkerFlow } from './WorkerFlow';

package/es/useDrawer/index.d.ts

@@ -7,7 +7,7 @@ export interface IUseDrawerHookState {
     width?: number | string;
     className?: string;
 }
-declare function useDrawer(): {
+declare function useDrawer(prefixCls?: string): {
     open: (options: IUseDrawerHookState) => void;
     close: () => void;
 };

package/es/useDrawer/index.js

@@ -19,6 +19,7 @@ import Drawer from '../Drawer';
 import CC from '../ConfigContext';
 
 function useDrawer() {
+  var prefixCls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cloudapp';
   var context = useContext(CC);
   var root = useMemo(function () {
     return (context === null || context === void 0 ? void 0 : context.root) || document.body;
@@ -49,7 +50,7 @@ function useDrawer() {
   }, []);
   useEffect(function () {
     ReactDOM.render( /*#__PURE__*/React.createElement(_ConfigProvider, {
-      prefixCls: "cloudapp",
+      prefixCls: prefixCls,
       getPopupContainer: function getPopupContainer() {
         return root;
       }

package/es/useModal/index.d.ts

@@ -7,7 +7,7 @@ export interface IUseModalHookState {
     width?: number | string;
     className?: string;
 }
-declare function useModal(): {
+declare function useModal(prefixCls?: string): {
     open: (options: IUseModalHookState) => void;
     close: () => void;
 };

package/es/useModal/index.js

@@ -19,6 +19,7 @@ import Modal from '../Modal';
 import CC from '../ConfigContext';
 
 function useModal() {
+  var prefixCls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cloudapp';
   var context = useContext(CC);
   var root = useMemo(function () {
     return (context === null || context === void 0 ? void 0 : context.root) || document.body;
@@ -49,7 +50,7 @@ function useModal() {
   }, []);
   useEffect(function () {
     ReactDOM.render( /*#__PURE__*/React.createElement(_ConfigProvider, {
-      prefixCls: "cloudapp",
+      prefixCls: prefixCls,
       getPopupContainer: function getPopupContainer() {
         return root;
       }

package/es/useNavigate/index.d.ts

@@ -0,0 +1,4 @@
+import { NavigateFunction } from 'react-router-dom';
+import './index.less';
+declare function useNavigate(): NavigateFunction;
+export default useNavigate;

package/es/useNavigate/index.js

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { useNavigate as useNativeNavigate } from 'react-router-dom';
+import "./index.css";
+var _global = window;
+
+function useNavigate() {
+  var naticeNavigate = useNativeNavigate();
+  var navigate = useMemo(function () {
+    return _global.BasicNavigate || naticeNavigate;
+  }, [naticeNavigate]);
+  return navigate;
+}
+
+export default useNavigate;

package/es/utils.d.ts

@@ -1,3 +1,4 @@
+import type { MutableRefObject } from 'react';
 export declare const getHeader: () => {
     Authorization: any;
 };
@@ -13,3 +14,11 @@ export declare function getParentListById(id: string, orgList?: any[], list?: an
 export declare function getPlaceCodesWithParent(areaCode: string, list?: any[], areaCodes?: string[], key?: string, pkey?: string): any;
 export declare function nextTick(cb: () => void): void;
 export declare function tryCatch(resolveFn: () => Promise<any>, rejectFn?: (e: unknown) => void): Promise<void>;
+declare type TargetValue<T> = T | undefined | null;
+declare type TargetType = HTMLElement | Element | Window | Document;
+export declare type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
+export declare function getTargetElement<T extends TargetType>(target: BasicTarget<T>, defaultElement?: T): T;
+declare const getScrollTop: (el: Document | Element) => number;
+declare const getScrollHeight: (el: Document | Element) => number;
+declare const getClientHeight: (el: Document | Element) => number;
+export { getScrollTop, getScrollHeight, getClientHeight };

package/es/utils.js

@@ -88,4 +88,39 @@ export function tryCatch(resolveFn) {
       }
     }, _callee, null, [[0, 5]]);
   }));
-}
+}
+export function getTargetElement(target, defaultElement) {
+  if (!target) {
+    return defaultElement;
+  }
+
+  var targetElement;
+
+  if (typeof target === 'function') {
+    targetElement = target();
+  } else if ('current' in target) {
+    targetElement = target.current;
+  } else {
+    targetElement = target;
+  }
+
+  return targetElement;
+}
+
+var getScrollTop = function getScrollTop(el) {
+  if (el === document || el === document.body) {
+    return Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop);
+  }
+
+  return el.scrollTop;
+};
+
+var getScrollHeight = function getScrollHeight(el) {
+  return el.scrollHeight || Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+};
+
+var getClientHeight = function getClientHeight(el) {
+  return el.clientHeight || Math.max(document.documentElement.clientHeight, document.body.clientHeight);
+};
+
+export { getScrollTop, getScrollHeight, getClientHeight };

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.12",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -31,22 +31,18 @@
   },
   "dependencies": {
     "add-dom-event-listener": "^1.1.0",
-    "ahooks": "^2.10.12",
+    "ahooks": "^3.1.0",
     "chroma-js": "^2.1.2",
     "fetch-like-axios": "^0.0.5",
     "immer": "^9.0.5",
-    "jsencrypt": "^3.2.1",
     "lodash-es": "^4.17.21",
-    "mobx": "^6.3.2",
-    "rc-queue-anim": "^2.0.0",
-    "react-virtualized": "^9.22.3"
+    "rc-queue-anim": "^2.0.0"
   },
   "devDependencies": {
     "@cloud-app-dev/utils": "^3.0.2",
     "@types/add-dom-event-listener": "^1.1.0",
     "@types/chroma-js": "^2.1.3",
     "@types/lodash-es": "^4.17.5",
-    "@types/react-virtualized": "^9.21.15",
     "@umijs/test": "^3.0.5",
     "antd": "^4.17.0",
     "babel-plugin-import": "^1.13.3",
@@ -58,7 +54,7 @@
     "prettier": "^2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.2.1",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "yorkie": "^2.0.0"
   },

package/es/AppRoute/Render.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import { match, RouteProps } from 'react-router-dom';
-import { IRenderRouteProps } from './interface';
-import * as H from 'history';
-/**
- * @TODO
- * @多种修正使用url判断异步处理这里防止回调执行的时候url变化导致一直执行
- * @每次执行先清除上一次的
- */
-export declare const RenderRoute: React.MemoExoticComponent<({ location, match, history, setRouteProps }: IRenderRouteProps) => any>;
-interface IRenderComponentsProps {
-    state: any;
-    props: any;
-}
-export declare const RenderComponents: React.MemoExoticComponent<({ state, props }: IRenderComponentsProps) => any>;
-interface IRenderRoutesProps extends RouteProps {
-    routes?: RouteProps[];
-    setRouteProps: (match: match<any>, location: H.Location, history: H.History) => void;
-    children?: React.ReactNode;
-}
-export declare function RenderRoutes({ routes, setRouteProps, children }: IRenderRoutesProps): JSX.Element;
-export declare function RenderSingleRoute({ exact, strict, sensitive, path, setRouteProps, children }: IRenderRoutesProps): JSX.Element;
-export {};

package/es/AppRoute/Render.js

@@ -1,111 +0,0 @@
-import { __rest } from "tslib";
-import React, { useEffect, useMemo } from 'react';
-import { getRouteItem } from './utils';
-import useHistory from '../useHistory';
-import { Route, Switch } from 'react-router-dom';
-/**
- * @TODO
- * @多种修正使用url判断异步处理这里防止回调执行的时候url变化导致一直执行
- * @每次执行先清除上一次的
- */
-
-export var RenderRoute = /*#__PURE__*/React.memo(function (_ref) {
-  var location = _ref.location,
-      match = _ref.match,
-      history = _ref.history,
-      setRouteProps = _ref.setRouteProps;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(function () {
-    return setRouteProps(match, location, history);
-  }, [location.pathname]);
-  return null;
-});
-export var RenderComponents = /*#__PURE__*/React.memo(function (_ref2) {
-  var state = _ref2.state,
-      props = _ref2.props;
-
-  var _useMemo = useMemo(function () {
-    return state;
-  }, [state]),
-      match = _useMemo.match,
-      location = _useMemo.location;
-
-  var history = useHistory();
-
-  var _a = useMemo(function () {
-    return props;
-  }, [props]),
-      path = _a.path,
-      component = _a.component,
-      render = _a.render,
-      routes = _a.routes,
-      other = __rest(_a, ["path", "component", "render", "routes"]);
-
-  var _useMemo2 = useMemo(function () {
-    var Com, Ren;
-
-    if (!routes) {
-      Com = component;
-      Ren = render;
-    } else {
-      var routeItem = getRouteItem(match, routes);
-      Com = routeItem.component;
-      Ren = routeItem.render;
-    }
-
-    return {
-      Com: Com,
-      Ren: Ren
-    };
-  }, [component, match, render, routes]),
-      Com = _useMemo2.Com,
-      Ren = _useMemo2.Ren;
-
-  return Com ? /*#__PURE__*/React.cloneElement( /*#__PURE__*/React.createElement(Com, null), Object.assign(Object.assign({}, other), {
-    match: match,
-    location: location,
-    history: history
-  })) : Ren(Object.assign(Object.assign({}, other), {
-    match: match,
-    location: location,
-    history: history
-  }));
-});
-export function RenderRoutes(_ref3) {
-  var routes = _ref3.routes,
-      setRouteProps = _ref3.setRouteProps,
-      children = _ref3.children;
-  return /*#__PURE__*/React.createElement(Switch, null, routes.map(function (item, i) {
-    return /*#__PURE__*/React.createElement(Route, {
-      exact: !!item.exact,
-      sensitive: !!item.sensitive,
-      strict: !!item.strict,
-      key: i,
-      path: item.path,
-      render: function render(props) {
-        return /*#__PURE__*/React.createElement(RenderRoute, Object.assign({}, props, {
-          setRouteProps: setRouteProps
-        }));
-      }
-    });
-  }), children);
-}
-export function RenderSingleRoute(_ref4) {
-  var exact = _ref4.exact,
-      strict = _ref4.strict,
-      sensitive = _ref4.sensitive,
-      path = _ref4.path,
-      setRouteProps = _ref4.setRouteProps,
-      children = _ref4.children;
-  return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
-    exact: !!exact,
-    strict: !!strict,
-    sensitive: !!sensitive,
-    path: path,
-    render: function render(props) {
-      return /*#__PURE__*/React.createElement(RenderRoute, Object.assign({}, props, {
-        setRouteProps: setRouteProps
-      }));
-    }
-  }), children);
-}

package/es/AppRoute/Rendered.d.ts

@@ -1,4 +0,0 @@
-declare function Rendered({ onRendered }: {
-    onRendered: () => void;
-}): JSX.Element;
-export default Rendered;

package/es/AppRoute/Rendered.js

@@ -1,11 +0,0 @@
-import React, { useEffect } from 'react';
-
-function Rendered(_ref) {
-  var onRendered = _ref.onRendered;
-  useEffect(function () {
-    return onRendered();
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null);
-}
-
-export default Rendered;

package/es/AppRoute/utils.d.ts

@@ -1 +0,0 @@
-export declare const getRouteItem: (match: any, routes: any[]) => any;