deps: 更新部分第三方库依赖到最新版本 (#2543)

* chore: 更新依赖初步

* 更新部分依赖

* 修复编译报错

* 更新 snapshots

__tests__/renderers/Form/__snapshots__/formula.test.tsx.snap

@@ -83,13 +83,9 @@ exports[`Renderer:formula 1`] = `
                 class="cxd-Number-input-wrap"
               >
                 <input
-                  aria-valuemax="9007199254740991"
-                  aria-valuemin="-9007199254740991"
                   aria-valuenow="1"
                   autocomplete="off"
                   class="cxd-Number-input"
-                  max="9007199254740991"
-                  min="-9007199254740991"
                   role="spinbutton"
                   step="1"
                   value="1"
@@ -153,13 +149,9 @@ exports[`Renderer:formula 1`] = `
                 class="cxd-Number-input-wrap"
               >
                 <input
-                  aria-valuemax="9007199254740991"
-                  aria-valuemin="-9007199254740991"
                   aria-valuenow="2"
                   autocomplete="off"
                   class="cxd-Number-input"
-                  max="9007199254740991"
-                  min="-9007199254740991"
                   role="spinbutton"
                   step="1"
                   value="2"
@@ -223,13 +215,9 @@ exports[`Renderer:formula 1`] = `
                 class="cxd-Number-input-wrap"
               >
                 <input
-                  aria-valuemax="9007199254740991"
-                  aria-valuemin="-9007199254740991"
                   aria-valuenow="3"
                   autocomplete="off"
                   class="cxd-Number-input"
-                  max="9007199254740991"
-                  min="-9007199254740991"
                   role="spinbutton"
                   step="1"
                   value="3"
@@ -293,13 +281,9 @@ exports[`Renderer:formula 1`] = `
                 class="cxd-Number-input-wrap"
               >
                 <input
-                  aria-valuemax="9007199254740991"
-                  aria-valuemin="-9007199254740991"
                   aria-valuenow="4"
                   autocomplete="off"
                   class="cxd-Number-input"
-                  max="9007199254740991"
-                  min="-9007199254740991"
                   role="spinbutton"
                   step="1"
                   value="4"
@@ -363,13 +347,9 @@ exports[`Renderer:formula 1`] = `
                 class="cxd-Number-input-wrap"
               >
                 <input
-                  aria-valuemax="9007199254740991"
-                  aria-valuemin="-9007199254740991"
                   aria-valuenow="5"
                   autocomplete="off"
                   class="cxd-Number-input"
-                  max="9007199254740991"
-                  min="-9007199254740991"
                   role="spinbutton"
                   step="1"
                   value="5"

__tests__/renderers/Form/__snapshots__/number.test.tsx.snap

@@ -83,13 +83,9 @@ exports[`Renderer:number 1`] = `
                 class="cxd-Number-input-wrap"
               >
                 <input
-                  aria-valuemax="9007199254740991"
-                  aria-valuemin="-9007199254740991"
                   aria-valuenow="456"
                   autocomplete="off"
                   class="cxd-Number-input"
-                  max="9007199254740991"
-                  min="-9007199254740991"
                   role="spinbutton"
                   step="1"
                   value="456"

docs/zh-CN/components/action.md

@@ -742,7 +742,7 @@ props.onAction(event, {
 所有`actionType`都支持的通用配置项
 
 | 属性名             | 类型                                 | 默认值      | 说明                                                                                                                                                                        |
-| ---------------- | ------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------------ | ------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | type               | `string`                             | `action`    | 指定为 Page 渲染器。                                                                                                                                                        |
 | actionType         | `string`                             | -           | 【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。       |
 | label              | `string`                             | -           | 按钮文本。可用 `${xxx}` 取值。                                                                                                                                              |

docs/zh-CN/components/form/input-image.md

@@ -131,8 +131,7 @@ app.listen(8080, function () {
         {
             "type": "input-image",
             "name": "image",
-            "label": "限制只能上传jpg图片",
+            "label": "上传后裁剪",
-            "accept": ".jpg",
             "receiver": "/api/upload/file",
             "crop": true
         }
@@ -140,6 +139,26 @@ app.listen(8080, function () {
 }
 ```
 
+设置裁剪比例等配置，具体细节可以参考[这里](https://github.com/fengyuanchen/cropperjs#options)。
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "body": [
+        {
+            "type": "input-image",
+            "name": "image",
+            "label": "上传后裁剪",
+            "receiver": "/api/upload/file",
+            "crop": {
+              "aspectRatio": 1.7777
+            }
+        }
+    ]
+}
+```
+
 ## 自动填充
 
 上传成功后，可以通过配置 `autoFill` 将上传接口返回的值填充到某个表单项中：

package.json

@@ -43,22 +43,20 @@
     "attr-accept": "2.2.2",
     "blueimp-canvastoblob": "2.1.0",
     "classnames": "2.3.1",
-    "dom-helpers": "^3.3.1",
     "downshift": "3.1.4",
     "echarts": "5.2.0",
     "echarts-stat": "^1.2.0",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.2",
     "froala-editor": "2.9.6",
-    "highlight.js": "^10.7.2",
     "hls.js": "1.0.10",
-    "hoist-non-react-statics": "3.3.0",
+    "hoist-non-react-statics": "^3.3.2",
     "immutability-helper": "^3.1.1",
     "jquery": "^3.2.1",
     "keycode": "^2.1.9",
     "lodash": "^4.17.15",
     "markdown-it": "^12.0.6",
-    "match-sorter": "2.2.1",
+    "match-sorter": "^6.3.0",
     "mobx": "^4.5.0",
     "mobx-react": "^6.1.4",
     "mobx-state-tree": "^3.17.3",
@@ -68,15 +66,15 @@
     "papaparse": "^5.3.0",
     "prop-types": "^15.6.1",
     "punycode": "^2.1.1",
-    "qrcode.react": "^0.8.0",
+    "qrcode.react": "^1.0.1",
     "qs": "6.5.1",
-    "rc-input-number": "6.1.1",
+    "rc-input-number": "^7.3.0",
     "react": "^16.8.6",
-    "react-color": "2.13.8",
+    "react-color": "^2.19.3",
-    "react-cropper": "1.0.1",
+    "react-cropper": "^2.1.8",
     "react-datetime": "2.16.2",
     "react-dom": "^16.8.6",
-    "react-dropzone": "11.2.4",
+    "react-dropzone": "^11.3.4",
     "react-input-range": "1.3.0",
     "react-json-view": "1.21.3",
     "react-overlays": "0.8.3",
@@ -85,16 +83,15 @@
     "react-visibility-sensor": "3.11.0",
     "setimmediate": "1.0.5",
     "sortablejs": "1.14.0",
-    "tinymce": ">=5.9.1",
+    "tinymce": "^5.9.2",
     "tslib": "^2.3.1",
-    "uncontrollable": "7.0.2",
+    "uncontrollable": "7.2.1",
     "video-react": "0.14.1"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@testing-library/react": "^12.0.0",
     "@types/async": "^2.0.45",
-    "@types/dom-helpers": "^3.4.1",
     "@types/echarts": "^4.9.2",
     "@types/file-saver": "^2.0.1",
     "@types/history": "^4.6.0",
@@ -109,11 +106,9 @@
     "@types/prop-types": "^15.5.2",
     "@types/qs": "^6.5.1",
     "@types/react": "^16.9.35",
-    "@types/react-color": "^2.13.3",
+    "@types/react-color": "^3.0.5",
-    "@types/react-cropper": "^0.10.1",
     "@types/react-dom": "^16.0.7",
     "@types/react-dropzone": "^4.1.0",
-    "@types/react-json-tree": "^0.6.6",
     "@types/react-onclickoutside": "^6.0.2",
     "@types/react-overlays": "^0.8.4",
     "@types/react-router": "^3.0.24",
@@ -126,9 +121,9 @@
     "bce-sdk-js": "^0.2.9",
     "concurrently": "^6.2.1",
     "copy-to-clipboard": "3.3.1",
-    "core-js": "^3.7.0",
+    "core-js": "^3.17.3",
     "css": "3.0.0",
-    "faker": "^4.1.0",
+    "faker": "^5.5.3",
     "fis-optimizer-terser": "^1.0.1",
     "fis-parser-sass": "^1.0.1",
     "fis-parser-svgr": "^1.0.0",
@@ -149,16 +144,16 @@
     "husky": "^7.0.0",
     "jest": "^27.0.6",
     "jest-canvas-mock": "^2.3.0",
-    "js-yaml": "^3.10.0",
+    "js-yaml": "^4.1.0",
     "json5": "^2.2.0",
-    "marked": "2.0.1",
+    "marked": "^3.0.3",
     "mkdirp": "^1.0.4",
     "moment-timezone": "^0.5.33",
     "path-to-regexp": "^6.2.0",
     "postcss": "^8.2.1",
     "postcss-cli": "^8.3.1",
     "postcss-custom-properties": "^11.0.0",
-    "prettier": "2.3.2",
+    "prettier": "^2.4.0",
     "pretty-quick": "^3.1.1",
     "prismjs": "^1.20.0",
     "react-router": "3.2.0",

scripts/generate-search-data.js

@@ -16,7 +16,7 @@ glob('./docs/**/*.md', {}, function (er, docs) {
     let m = rYml.exec(content);
     let info = {};
     if (m && m[1]) {
-      info = yaml.safeLoad(m[1]);
+      info = yaml.load(m[1]);
       content = content.substring(m[0].length);
     }
 

scripts/md-parser.js

@@ -85,7 +85,7 @@ module.exports = function (content, file) {
   var m = rYml.exec(content);
   var info = {};
   if (m && m[1]) {
-    info = yaml.safeLoad(m[1]);
+    info = yaml.load(m[1]);
     content = content.substring(m[0].length);
   }
 

src/Root.tsx

@@ -1,5 +1,4 @@
 import isPlainObject from 'lodash/isPlainObject';
-import qs from 'qs';
 import React from 'react';
 import Alert from './components/Alert2';
 import ImageGallery from './components/ImageGallery';

src/Scoped.tsx

@@ -5,9 +5,7 @@
 
 import React from 'react';
 import find from 'lodash/find';
-import PropTypes from 'prop-types';
 import hoistNonReactStatic from 'hoist-non-react-statics';
-import qs from 'qs';
 import {dataMapping} from './utils/tpl-builtin';
 import {RendererEnv, RendererProps} from './factory';
 import {noop, autobind, qsstringify, qsparse} from './utils/helper';

src/components/Collapse.tsx

@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import css from 'dom-helpers/style/index';
 import {ClassNamesFn, themeable} from '../theme';
 import Transition, {
   EXITED,
@@ -64,10 +63,9 @@ export class Collapse extends React.Component<CollapseProps, any> {
     let offsetHeight = elem['offsetHeight'];
     const height =
       offsetHeight +
-      parseInt(css(elem, 'marginTop'), 10) +
+      parseInt(getComputedStyle(elem).getPropertyValue('margin-top'), 10) +
-      parseInt(css(elem, 'marginBottom'), 10);
+      parseInt(getComputedStyle(elem).getPropertyValue('margin-bottom'), 10);
     elem.style['height'] = `${height}px`;
-
     // trigger browser reflow
     elem.offsetHeight;
   }

src/components/ColorPicker.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import {findDOMNode} from 'react-dom';
-import {SketchPicker, GithubPicker, ColorState} from 'react-color';
+import {SketchPicker, GithubPicker, ColorResult} from 'react-color';
 import {Icon} from './icons';
 import Overlay from './Overlay';
 import {uncontrollable} from 'uncontrollable';
@@ -176,7 +176,7 @@ export class ColorControl extends React.PureComponent<
     return image.style.color !== 'rgb(255, 255, 255)';
   }
 
-  handleChange(color: ColorState) {
+  handleChange(color: ColorResult) {
     const {
       onChange,
       format

src/components/Select.tsx

@@ -12,8 +12,7 @@ import Overlay from './Overlay';
 import PopOver from './PopOver';
 import Downshift, {ControllerStateAndHelpers} from 'downshift';
 import {closeIcon, Icon} from './icons';
-// @ts-ignore
+import {matchSorter} from 'match-sorter';
-import matchSorter from 'match-sorter';
 import {noop, isObject, findTree, autobind, ucFirst} from '../utils/helper';
 import find from 'lodash/find';
 import isPlainObject from 'lodash/isPlainObject';
@@ -703,7 +702,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
     let checkedAll = false;
     let checkedPartial = false;
-    let filtedOptions: Array<Option> = (inputValue && isOpen && !loadOptions
+    let filtedOptions: Array<Option> = (
+      inputValue && isOpen && !loadOptions
         ? matchSorter(options, inputValue, {
             keys: [labelField || 'label', valueField || 'value']
           })

src/factory.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import qs from 'qs';
 import {RendererStore, IRendererStore, IIRendererStore} from './store/index';
 import {getEnv, destroy} from 'mobx-state-tree';
 import {wrapFetcher} from './utils/api';

src/renderers/Action.tsx

@@ -365,17 +365,47 @@ import {BadgeSchema, withBadge} from '../components/Badge';
 import {str2AsyncFunction} from '../utils/api';
 
 export interface ActionProps
-  extends Omit<ButtonSchema, 'className' | 'iconClassName' | 'rightIconClassName'>,
+  extends Omit<
+      ButtonSchema,
+      'className' | 'iconClassName' | 'rightIconClassName'
+    >,
     ThemeProps,
-    Omit<AjaxActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
+    Omit<
-    Omit<UrlActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
+      AjaxActionSchema,
-    Omit<LinkActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
+      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
-    Omit<DialogActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
+    >,
-    Omit<DrawerActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
+    Omit<
-    Omit<CopyActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
+      UrlActionSchema,
-    Omit<ReloadActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
+      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
-    Omit<EmailActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
+    >,
-    Omit<OtherActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'> {
+    Omit<
+      LinkActionSchema,
+      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+    >,
+    Omit<
+      DialogActionSchema,
+      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+    >,
+    Omit<
+      DrawerActionSchema,
+      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+    >,
+    Omit<
+      CopyActionSchema,
+      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+    >,
+    Omit<
+      ReloadActionSchema,
+      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+    >,
+    Omit<
+      EmailActionSchema,
+      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+    >,
+    Omit<
+      OtherActionSchema,
+      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+    > {
   actionType: any;
   onAction?: (
     e: React.MouseEvent<any> | void | null,
@@ -547,7 +577,12 @@ export class Action extends React.Component<ActionProps, ActionState> {
     }
 
     const iconElement = generateIcon(cx, icon, 'Button-icon', iconClassName);
-    const rightIconElement = generateIcon(cx, rightIcon, 'Button-icon', rightIconClassName);
+    const rightIconElement = generateIcon(
+      cx,
+      rightIcon,
+      'Button-icon',
+      rightIconClassName
+    );
 
     return (
       <Button

src/renderers/CRUD.tsx

@@ -29,7 +29,6 @@ import Button from '../components/Button';
 import Select from '../components/Select';
 import getExprProperties from '../utils/filter-schema';
 import pick from 'lodash/pick';
-import qs from 'qs';
 import {findDOMNode} from 'react-dom';
 import {evalExpression, filter} from '../utils/tpl';
 import {
@@ -956,12 +955,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   }
 
   handleDialogClose() {
-    const {
+    const {store, stopAutoRefreshWhenModalIsOpen, silentPolling, interval} =
-      store,
+      this.props;
-      stopAutoRefreshWhenModalIsOpen,
-      silentPolling,
-      interval
-    } = this.props;
     store.closeDialog();
 
     if (stopAutoRefreshWhenModalIsOpen && interval) {
@@ -1194,14 +1189,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   }
 
   handleSaveOrder(moved: Array<object>, rows: Array<object>) {
-    const {
+    const {store, saveOrderApi, orderField, primaryField, env, reload} =
-      store,
+      this.props;
-      saveOrderApi,
-      orderField,
-      primaryField,
-      env,
-      reload
-    } = this.props;
 
     if (!saveOrderApi) {
       env && env.alert('CRUD saveOrderApi is required!');
@@ -1413,11 +1402,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   }
 
   handleChildPopOverClose(popOver: any) {
-    const {
+    const {stopAutoRefreshWhenModalIsOpen, silentPolling, interval} =
-      stopAutoRefreshWhenModalIsOpen,
+      this.props;
-      silentPolling,
-      interval
-    } = this.props;
 
     if (popOver && ~['dialog', 'drawer'].indexOf(popOver.mode)) {
       this.props.store.setInnerModalOpened(false);

src/renderers/Form/IconPicker.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-// @ts-ignore
+import {matchSorter} from 'match-sorter';
-import matchSorter from 'match-sorter';
 import keycode from 'keycode';
 import Downshift, {StateChangeOptions} from 'downshift';
 import {autobind} from '../../utils/helper';

src/renderers/Form/InputFile.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
-import cx from 'classnames';
-import qs from 'qs';
 import find from 'lodash/find';
 import isPlainObject from 'lodash/isPlainObject';
 // @ts-ignore
@@ -358,7 +356,8 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     if (value && value instanceof Blob) {
       files = [value as any];
     } else if (value) {
-      files = (Array.isArray(value)
+      files = (
+        Array.isArray(value)
           ? value
           : joinValues
           ? `${(value as any)[valueField] || value}`.split(delimiter)
@@ -404,7 +403,8 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       let files: Array<FileValue> = [];
 
       if (value) {
-        files = (Array.isArray(value)
+        files = (
+          Array.isArray(value)
             ? value
             : joinValues && typeof value === 'string'
             ? value.split(delimiter)

src/renderers/Form/InputImage.tsx

@@ -6,7 +6,6 @@ import DropZone from 'react-dropzone';
 import {FileRejection} from 'react-dropzone';
 import 'blueimp-canvastoblob';
 import find from 'lodash/find';
-import qs from 'qs';
 import {Payload} from '../../types';
 import {buildApi} from '../../utils/api';
 import {
@@ -389,7 +388,8 @@ export default class ImageControl extends React.Component<
 
     if (value) {
       // files = (multiple && Array.isArray(value) ? value : joinValues ? (value as string).split(delimiter) : [value])
-      files = (Array.isArray(value)
+      files = (
+        Array.isArray(value)
           ? value
           : joinValues && typeof value === 'string' && multiple
           ? (value as string).split(delimiter)
@@ -444,7 +444,8 @@ export default class ImageControl extends React.Component<
       let files: Array<FileValue> = [];
 
       if (value) {
-        files = (Array.isArray(value)
+        files = (
+          Array.isArray(value)
             ? value
             : joinValues && typeof value === 'string'
             ? (value as string).split(delimiter)
@@ -1196,14 +1197,8 @@ export default class ImageControl extends React.Component<
       fixedSizeClassName,
       translate: __
     } = this.props;
-    const {
+    const {files, error, crop, uploading, cropFile, frameImageWidth} =
-      files,
+      this.state;
-      error,
-      crop,
-      uploading,
-      cropFile,
-      frameImageWidth
-    } = this.state;
     let frameImageStyle: any = {};
     if (fixedSizeClassName && frameImageWidth && fixedSize) {
       frameImageStyle.width = frameImageWidth;

src/renderers/Form/InputText.tsx

@@ -7,8 +7,7 @@ import {
 } from './Options';
 import {Action} from '../../types';
 import Downshift, {StateChangeOptions} from 'downshift';
-// @ts-ignore
+import {matchSorter} from 'match-sorter';
-import matchSorter from 'match-sorter';
 import debouce from 'lodash/debounce';
 import {filter} from '../../utils/tpl';
 import find from 'lodash/find';
@@ -140,14 +139,8 @@ export default class TextControl extends React.PureComponent<
   };
 
   componentDidMount() {
-    const {
+    const {formItem, autoComplete, addHook, formInited, data, name} =
-      formItem,
+      this.props;
-      autoComplete,
-      addHook,
-      formInited,
-      data,
-      name
-    } = this.props;
 
     if (isEffectiveApi(autoComplete, data) && formItem) {
       if (formInited) {
@@ -470,13 +463,8 @@ export default class TextControl extends React.PureComponent<
   }
 
   loadAutoComplete() {
-    const {
+    const {formItem, autoComplete, data, multiple, selectedOptions} =
-      formItem,
+      this.props;
-      autoComplete,
-      data,
-      multiple,
-      selectedOptions
-    } = this.props;
 
     if (isEffectiveApi(autoComplete, data) && formItem) {
       formItem.loadOptions(
@@ -564,9 +552,8 @@ export default class TextControl extends React.PureComponent<
                 {
                   'is-opened': isOpen,
                   'TextControl-input--multiple': multiple,
-                  [`TextControl-input--border${ucFirst(
+                  [`TextControl-input--border${ucFirst(borderMode)}`]:
                     borderMode
-                  )}`]: borderMode
                 }
               )}
               onClick={this.handleClick}

src/renderers/Form/TreeSelect.tsx

@@ -10,8 +10,7 @@ import {
 } from './Options';
 import {Icon} from '../../components/icons';
 import TreeSelector from '../../components/Tree';
-// @ts-ignore
+import {matchSorter} from 'match-sorter';
-import matchSorter from 'match-sorter';
 import debouce from 'lodash/debounce';
 import find from 'lodash/find';
 import {Api} from '../../types';
@@ -297,8 +296,9 @@ export default class TreeSelectControl extends React.Component<
 
       if (!option.visible && option.children) {
         option.children = this.filterOptions(option.children, keywords);
-        const visibleCount = option.children.filter(item => item.visible)
+        const visibleCount = option.children.filter(
-          .length;
+          item => item.visible
+        ).length;
         option.visible = !!visibleCount;
       }
 

src/renderers/Form/index.tsx

@@ -30,7 +30,6 @@ import Scoped, {
   ScopedComponentType
 } from '../../Scoped';
 import {IComboStore} from '../../store/combo';
-import qs from 'qs';
 import {dataMapping} from '../../utils/tpl-builtin';
 import {isApiOutdated, isEffectiveApi} from '../../utils/api';
 import Spinner from '../../components/Spinner';

src/renderers/Page.tsx

@@ -12,9 +12,7 @@ import {
   FunctionPropertyNames
 } from '../types';
 import {filter, evalExpression} from '../utils/tpl';
-import cx from 'classnames';
+import {isVisible, autobind, bulkBindFunctions} from '../utils/helper';
-import qs from 'qs';
-import {isVisible, autobind, bulkBindFunctions, uuid} from '../utils/helper';
 import {ScopedContext, IScopedContext} from '../Scoped';
 import Alert from '../components/Alert2';
 import {isApiOutdated, isEffectiveApi} from '../utils/api';

src/renderers/QuickEdit.tsx

@@ -5,16 +5,10 @@
 
 import React from 'react';
 import {findDOMNode} from 'react-dom';
-import find from 'lodash/find';
-import PropTypes from 'prop-types';
-import isPlainObject from 'lodash/isPlainObject';
 import {RendererProps} from '../factory';
-import cx from 'classnames';
 import hoistNonReactStatic from 'hoist-non-react-statics';
-import onClickOutside from 'react-onclickoutside';
 import {Action} from '../types';
 import keycode from 'keycode';
-import matches from 'dom-helpers/query/matches';
 import Overlay from '../components/Overlay';
 import PopOver from '../components/PopOver';
 import {Icon} from '../components/icons';
@@ -90,9 +84,9 @@ export interface QuickEditState {
 let inited: boolean = false;
 let currentOpened: any;
 
-export const HocQuickEdit = (config: Partial<QuickEditConfig> = {}) => (
+export const HocQuickEdit =
-  Component: React.ComponentType<any>
+  (config: Partial<QuickEditConfig> = {}) =>
-): any => {
+  (Component: React.ComponentType<any>): any => {
     class QuickEditComponent extends React.PureComponent<
       QuickEditProps,
       QuickEditState
@@ -230,7 +224,7 @@ export const HocQuickEdit = (config: Partial<QuickEditConfig> = {}) => (
               prevTd = current.previousElementSibling as HTMLTableCellElement;
 
               while (prevTd) {
-              if (matches(prevTd, `.${ns}Field--quickEditable[tabindex]`)) {
+                if (prevTd.matches(`.${ns}Field--quickEditable[tabindex]`)) {
                   break;
                 }
                 prevTd = prevTd.previousElementSibling;
@@ -239,10 +233,10 @@ export const HocQuickEdit = (config: Partial<QuickEditConfig> = {}) => (
               if (prevTd) {
                 (prevTd as HTMLElement).focus();
               } else if ((current.parentNode as HTMLElement).previousSibling) {
-              let tds = ((current.parentNode as HTMLElement)
+                let tds = (
-                .previousSibling as HTMLElement).querySelectorAll(
+                  (current.parentNode as HTMLElement)
-                `.${ns}Field--quickEditable[tabindex]`
+                    .previousSibling as HTMLElement
-              );
+                ).querySelectorAll(`.${ns}Field--quickEditable[tabindex]`);
 
                 if (tds.length) {
                   (tds[tds.length - 1] as HTMLElement).focus();
@@ -253,8 +247,7 @@ export const HocQuickEdit = (config: Partial<QuickEditConfig> = {}) => (
               nextTd = current.nextSibling;
               while (nextTd) {
                 if (
-                matches(
+                  (nextTd as Element).matches(
-                  nextTd as Element,
                     `.${ns}Field--quickEditable[tabindex]`
                   )
                 ) {
@@ -267,10 +260,9 @@ export const HocQuickEdit = (config: Partial<QuickEditConfig> = {}) => (
               if (nextTd) {
                 (nextTd as HTMLElement).focus();
               } else if ((current.parentNode as HTMLElement).nextSibling) {
-              nextTd = ((current.parentNode as HTMLElement)
+                nextTd = (
-                .nextSibling as HTMLElement).querySelector(
+                  (current.parentNode as HTMLElement).nextSibling as HTMLElement
-                `.${ns}Field--quickEditable[tabindex]`
+                ).querySelector(`.${ns}Field--quickEditable[tabindex]`);
-              );
 
                 if (nextTd) {
                   (nextTd as any).focus();

src/store/root.ts

@@ -1,5 +1,4 @@
 import {Instance, types} from 'mobx-state-tree';
-import qs from 'qs';
 import {createObject, qsparse} from '../utils/helper';
 import {ServiceStore} from './service';
 

src/utils/api.ts

@@ -1,7 +1,6 @@
 import {Api, ApiObject, fetcherResult, Payload} from '../types';
 import {fetcherConfig} from '../factory';
 import {tokenize, dataMapping} from './tpl-builtin';
-import qs from 'qs';
 import {evalExpression} from './tpl';
 import {
   isObject,

src/utils/dom.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import hoistNonReactStatic from 'hoist-non-react-statics';
-import domOwnerDocument from 'dom-helpers/ownerDocument';
+import getOffset from './offset';
-import css from 'dom-helpers/style/index';
+import getPosition from './position';
-import getOffset from 'dom-helpers/query/offset';
-import getPosition from 'dom-helpers/query/position';
-import getScrollTop from 'dom-helpers/query/scrollTop';
 
 const bsMapping: {
   [propName: string]: string;
@@ -56,7 +53,10 @@ export function getContainer(container: any, defaultContainer: any) {
 }
 
 export function ownerDocument(componentOrElement: any) {
-  return domOwnerDocument(ReactDOM.findDOMNode(componentOrElement) as Element);
+  return (
+    (ReactDOM.findDOMNode(componentOrElement) as Element)?.ownerDocument ||
+    document
+  );
 }
 
 function getContainerDimensions(containerNode: any) {
@@ -67,11 +67,11 @@ function getContainerDimensions(containerNode: any) {
     height = window.innerHeight;
 
     scroll =
-      getScrollTop(ownerDocument(containerNode).documentElement) ||
+      ownerDocument(containerNode).documentElement.scrollTop ||
-      getScrollTop(containerNode);
+      containerNode?.scrollTop;
   } else {
     ({width, height} = getOffset(containerNode) as any);
-    scroll = getScrollTop(containerNode);
+    scroll = containerNode.scrollTop;
   }
 
   return {width, height, scroll};
@@ -120,23 +120,6 @@ function getLeftDelta(
   return 0;
 }
 
-// function position(node: HTMLElement, offsetParent: HTMLElement) {
-//   const rect = offsetParent.getBoundingClientRect();
-//   const rect2 = node.getBoundingClientRect();
-//   return {
-//     width:
-//       rect2.width -
-//         (parseInt(css(node, 'borderLeftWidth') || '', 10) || 0) -
-//         parseInt(css(node, 'borderRightWidth') || '', 10) || 0,
-//     height:
-//       rect2.height -
-//         (parseInt(css(node, 'borderTopWidth') || '', 10) || 0) -
-//         parseInt(css(node, 'borderBottomWidth') || '', 10) || 0,
-//     top: rect2.top - rect.top,
-//     left: rect2.left - rect.left
-//   };
-// }
-
 export function calculatePosition(
   placement: any,
   overlayNode: any,

src/utils/markdown.ts

@@ -2,32 +2,10 @@
  * @file markdown 解析
  */
 
-import hljs from 'highlight.js';
 import markdownIt from 'markdown-it';
-import {escapeHtml} from 'markdown-it/lib/common/utils';
 
 const markdown = markdownIt({
-  linkify: true,
+  linkify: true
-  highlight(str: string, lang: string) {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return (
-          '<pre class="hljs language-' +
-          escapeHtml(lang.toLowerCase()) +
-          '"><code>' +
-          hljs.highlight(lang, str, true).value +
-          '</code></pre>'
-        );
-      } catch (__) {}
-    }
-    return (
-      '<pre class="hljs language-' +
-      escapeHtml(lang.toLowerCase()) +
-      '"><code>' +
-      escapeHtml(str) +
-      '</code></pre>'
-    );
-  }
 });
 
 export default function (content: string) {

src/utils/offset.ts

@@ -0,0 +1,30 @@
+/**
+ * 修改自 https://github.com/react-bootstrap/dom-helpers/blob/master/src/offset.ts
+ */
+
+/**
+ * Returns the offset of a given element, including top and left positions, width and height.
+ *
+ * @param node the element
+ */
+export default function offset(node: HTMLElement) {
+  const doc = node?.ownerDocument;
+
+  let box = {top: 0, left: 0, height: 0, width: 0};
+  const docElem = doc && doc.documentElement;
+
+  // Make sure it's not a disconnected DOM node
+  if (!docElem || !docElem.contains(node)) return box;
+
+  if (node.getBoundingClientRect !== undefined)
+    box = node.getBoundingClientRect();
+
+  box = {
+    top: box.top + docElem.scrollTop - (docElem.clientTop || 0),
+    left: box.left + docElem.scrollLeft - (docElem.clientLeft || 0),
+    width: box.width,
+    height: box.height
+  };
+
+  return box;
+}

src/utils/offsetParent.ts

@@ -0,0 +1,21 @@
+/**
+ * 删减自 https://github.com/react-bootstrap/dom-helpers/blob/master/src/offsetParent.ts
+ */
+
+const isHTMLElement = (e: Element | null): e is HTMLElement =>
+  !!e && 'offsetParent' in e;
+
+export default function offsetParent(node: HTMLElement): HTMLElement {
+  const doc = node?.ownerDocument;
+  let parent = node && node.offsetParent;
+
+  while (
+    isHTMLElement(parent) &&
+    parent.nodeName !== 'HTML' &&
+    getComputedStyle(parent).getPropertyValue('position') === 'static'
+  ) {
+    parent = parent.offsetParent;
+  }
+
+  return (parent || doc.documentElement) as HTMLElement;
+}

src/utils/position.ts

@@ -0,0 +1,56 @@
+/**
+ * 删减自 https://github.com/react-bootstrap/dom-helpers/blob/master/src/position.ts
+ */
+
+import getOffset from './offset';
+import getOffsetParent from './offsetParent';
+
+const nodeName = (node: Element) =>
+  node.nodeName && node.nodeName.toLowerCase();
+
+/**
+ * Returns the relative position of a given element.
+ *
+ * @param node the element
+ * @param offsetParent the offset parent
+ */
+export default function position(
+  node: HTMLElement,
+  offsetParent?: HTMLElement
+) {
+  let parentOffset = {top: 0, left: 0};
+  let offset;
+  getComputedStyle;
+  // Fixed elements are offset from window (parentOffset = {top:0, left: 0},
+  // because it is its only offset parent
+  if (getComputedStyle(node).getPropertyValue('position') === 'fixed') {
+    offset = node.getBoundingClientRect();
+  } else {
+    const parent: HTMLElement = offsetParent || getOffsetParent(node);
+    offset = getOffset(node);
+
+    if (nodeName(parent) !== 'html') parentOffset = getOffset(parent);
+    const borderTop = String(
+      getComputedStyle(parent).getPropertyValue('border-top-width') || 0
+    );
+    parentOffset.top += parseInt(borderTop, 10) - parent.scrollTop || 0;
+
+    const borderLeft = String(
+      getComputedStyle(parent).getPropertyValue('border-left-width') || 0
+    );
+    parentOffset.left += parseInt(borderLeft, 10) - parent.scrollLeft || 0;
+  }
+
+  const marginTop = String(
+    getComputedStyle(node).getPropertyValue('margin-top') || 0
+  );
+  const marginLeft = String(
+    getComputedStyle(node).getPropertyValue('margin-left') || 0
+  );
+  // Subtract parent offsets and node margins
+  return {
+    ...offset,
+    top: offset.top - parentOffset.top - (parseInt(marginTop, 10) || 0),
+    left: offset.left - parentOffset.left - (parseInt(marginLeft, 10) || 0)
+  };
+}