diff --git a/.github/workflows/CD.yml b/.github/workflows/CD.yml
index f7a4af35f..4280ad7ce 100644
--- a/.github/workflows/CD.yml
+++ b/.github/workflows/CD.yml
@@ -13,7 +13,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout code
- uses: actions/checkout@v2
+ uses: actions/checkout@v4
- name: Setup node
uses: actions/setup-node@v3
@@ -22,7 +22,7 @@ jobs:
cache: yarn
- name: Cache yarn.lock
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: package-temp-dir
key: lock-${{ github.sha }}
@@ -38,7 +38,7 @@ jobs:
cp yarn.lock package-temp-dir
- name: Cache node_modules
id: node_modules_cache_id
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
@@ -51,7 +51,7 @@ jobs:
runs-on: ubuntu-latest
needs: [setup]
steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v4
- name: Setup node
uses: actions/setup-node@v3
@@ -59,13 +59,13 @@ jobs:
node-version: 14.x
- name: Restore cache from yarn.lock
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: Restore cache from node_modules
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
index 8d3f03139..888bbeb50 100644
--- a/.github/workflows/CI.yml
+++ b/.github/workflows/CI.yml
@@ -15,7 +15,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout code
- uses: actions/checkout@v2
+ uses: actions/checkout@v4
- name: Setup node
uses: actions/setup-node@v3
@@ -24,7 +24,7 @@ jobs:
cache: yarn
- name: Cache yarn.lock
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: package-temp-dir
key: lock-${{ github.sha }}
@@ -40,7 +40,7 @@ jobs:
cp yarn.lock package-temp-dir
- name: Cache node_modules
id: node_modules_cache_id
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
@@ -53,16 +53,16 @@ jobs:
needs: [setup]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v4
- name: Restore cache from yarn.lock
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: Restore cache from node_modules
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
@@ -74,16 +74,16 @@ jobs:
needs: [setup]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v4
- name: Restore cache from yarn.lock
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: Restore cache from node_modules
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
@@ -95,16 +95,16 @@ jobs:
needs: [setup]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v4
- name: Restore cache from yarn.lock
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: Restore cache from node_modules
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
@@ -116,16 +116,16 @@ jobs:
needs: [setup]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v4
- name: Restore cache from yarn.lock
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: Restore cache from node_modules
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
@@ -137,16 +137,16 @@ jobs:
runs-on: ubuntu-latest
needs: [setup]
steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v4
- name: Restore cache from yarn.lock
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: Restore cache from node_modules
- uses: actions/cache@v2
+ uses: actions/cache@v4
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
diff --git a/.prettierignore b/.prettierignore
index 5c43558d8..24c2fd788 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -11,6 +11,3 @@ package-lock.json
dist/
esm/
lib/
-
-# 特殊的
-src/components/mxGraph/factory.tsx
diff --git a/.yarnrc b/.yarnrc
index cbdd124a4..57f8c2eb2 100644
--- a/.yarnrc
+++ b/.yarnrc
@@ -1,3 +1,2 @@
registry "https://registry.yarnpkg.com"
-sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f1e7ae21..41e745181 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,48 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+### [3.0.10](https://github.com/DTStack/dt-react-component/compare/v3.0.9...v3.0.10) (2023-09-13)
+
+
+### Features
+
+* add afterClose for ModalWithform ([#357](https://github.com/DTStack/dt-react-component/issues/357)) ([b2a5786](https://github.com/DTStack/dt-react-component/commit/b2a5786cac3fa5768729da3f0856586025d6ff97))
+* add spreadSheet columnSort and columnTypes ([#372](https://github.com/DTStack/dt-react-component/issues/372)) ([f4abb1c](https://github.com/DTStack/dt-react-component/commit/f4abb1c3a0d29a372d7858ac493f848275cb18dc))
+* spreadSheet comp support extra options from outside ([#365](https://github.com/DTStack/dt-react-component/issues/365)) ([5018071](https://github.com/DTStack/dt-react-component/commit/5018071af41c5ffe5c6b158d9f09ca3ba0b3586f))
+
+### [3.0.9](https://github.com/DTStack/dt-react-component/compare/v3.0.7...v3.0.9) (2023-06-25)
+
+
+### Features
+
+* add copyWithHeader item to spreadSheet context menu ([#287](https://github.com/DTStack/dt-react-component/issues/287)) ([ee6ee5c](https://github.com/DTStack/dt-react-component/commit/ee6ee5c5bfcf6f95007f4a376709d3a04d17f714))
+* update blockHeader margin-bottom ([#281](https://github.com/DTStack/dt-react-component/issues/281)) ([2962911](https://github.com/DTStack/dt-react-component/commit/29629111840bd68a142b4f49e083ba2a23e97355))
+
+
+### Bug Fixes
+
+* [#82926](https://github.com/DTStack/dt-react-component/issues/82926) handsontable trimWhitespace should be false ([#358](https://github.com/DTStack/dt-react-component/issues/358)) ([24d145d](https://github.com/DTStack/dt-react-component/commit/24d145da94cc6820c819eff8fe227a1c616411a5))
+* fix ModalProps for modalWithForm ([#283](https://github.com/DTStack/dt-react-component/issues/283)) ([f0c813a](https://github.com/DTStack/dt-react-component/commit/f0c813a306dc2cadd495ce15cae7b4328b155ad4))
+
+### [3.0.8](https://github.com/DTStack/dt-react-component/compare/v3.0.7...v3.0.8) (2023-01-11)
+
+
+### Features
+
+* update blockHeader margin-bottom ([#281](https://github.com/DTStack/dt-react-component/issues/281)) ([2962911](https://github.com/DTStack/dt-react-component/commit/29629111840bd68a142b4f49e083ba2a23e97355))
+
+
+### Bug Fixes
+
+* fix ModalProps for modalWithForm ([#283](https://github.com/DTStack/dt-react-component/issues/283)) ([f0c813a](https://github.com/DTStack/dt-react-component/commit/f0c813a306dc2cadd495ce15cae7b4328b155ad4))
+
+### [3.0.7](https://github.com/DTStack/dt-react-component/compare/v3.0.6...v3.0.7) (2022-12-16)
+
+
+### Bug Fixes
+
+* [#278](https://github.com/DTStack/dt-react-component/issues/278) use handsontable lower version ([#279](https://github.com/DTStack/dt-react-component/issues/279)) ([ee59dd9](https://github.com/DTStack/dt-react-component/commit/ee59dd93aa4578be9f4353b9deb85a4d6cd034e4))
+
### [3.0.6](https://github.com/DTStack/dt-react-component/compare/v3.0.5...v3.0.6) (2022-12-07)
diff --git a/README-zh_CN.md b/README-zh_CN.md
index 9add186ed..e19f4d950 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -10,9 +10,6 @@
[English](./README.md) | 简体中文
-## 文档
-- [v3.x](https://dtstack.github.io/dt-react-component/)
-- [v2.x](https://liuxy0551.github.io/dt-react-component/)
基于 [ant-design](https://github.com/ant-design/ant-design) 的 React UI 组件库。 主要用于中,后台产品。我们的目标是**满足更具体的业务场景组件**。 当然,我们也有基于原生 javascript 实现的业务组件,例如**ContextMenu**,**KeyEventListener**等。
diff --git a/README.md b/README.md
index 6e02379e6..15ecda884 100755
--- a/README.md
+++ b/README.md
@@ -10,9 +10,6 @@
English | [简体中文](./README-zh_CN.md)
-## Docs
-- [v3.x](https://dtstack.github.io/dt-react-component/)
-- [v2.x](https://liuxy0551.github.io/dt-react-component/)
React UI component library based on [ant-design](https://github.com/ant-design/ant-design). Mainly used for middle and back-end products. Our goal is to **meet more specific and more specific business scenario components**. Of course, we also have excellent business components based on native javascript, such as **ContextMenu**, **KeyEventListener** and so on.
diff --git a/jest.config.js b/jest.config.js
index 0391a1d18..ef0f4228d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -5,7 +5,7 @@ module.exports = {
transformIgnorePatterns: ['/node_modules/', 'lib', 'dist'],
testPathIgnorePatterns: ['/node_modules/'],
transform: {
- '^.+\\.[jt]s?(x)$': 'babel-jest',
+ '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
},
testMatch: [
'**/__tests__/**/(*.)+(spec|test).[jt]s?(x)',
diff --git a/mock/mock.js b/mock/mock.js
index 38b08af1d..9dc5fc1e4 100644
--- a/mock/mock.js
+++ b/mock/mock.js
@@ -1 +1 @@
-module.exports = "";
+module.exports = '';
diff --git a/package.json b/package.json
index cdc554a9f..aafcfc971 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "dt-react-component",
- "version": "3.0.6",
+ "version": "3.0.10",
"description": "react-component",
"repository": "https://github.com/DTStack/dt-react-component",
"sideEffects": [
@@ -29,14 +29,14 @@
"check-types": "tsc --skipLibCheck",
"test": "jest --coverage --env=jest-environment-jsdom-sixteen",
"test:update": "npm run test -u",
- "prettier": "npx prettier --check './**/*.{js,jsx,json,ts,tsx}'",
- "prettier:fix": "npx prettier --write './**/*.{js,jsx,json,ts,tsx}'",
+ "prettier": "npx prettier --check '**/*.{js,jsx,json,ts,tsx}'",
+ "prettier:fix": "npx prettier --write '**/*.{js,jsx,json,ts,tsx}'",
"eslint": "npx eslint .",
"eslint:fix": "npx eslint . --fix",
"lint-doc": "node ./node_modules/lint-md/bin ./*.md src/stories/markdown/*.md",
"lint-doc:fix": "npx eslint './src/**/*.tsx' --fix && lint-md ./*.md src/stories/markdown/*.md --fix",
- "stylelint": "npx stylelint './**/*.{less,css,scss}'",
- "stylelint:fix": "npx stylelint './**/*.{less,css,scss}' --fix"
+ "stylelint": "npx stylelint '**/*.{less,css,scss}'",
+ "stylelint:fix": "npx stylelint '**/*.{less,css,scss}' --fix"
},
"keywords": [
"react",
@@ -95,9 +95,9 @@
"@types/classnames": "^2.2.10",
"@types/enzyme": "^3.10.5",
"@types/history": "^4.7.0",
- "@types/jest": "^26.0.9",
+ "@types/jest": "^24.9.1",
"@types/lodash": "4.14.118",
- "@types/react": "18.0.17",
+ "@types/react": "^16.14.28",
"@types/react-router": "^3.0.4",
"@types/react-slick": "^0.23.4",
"@types/storybook__addon-knobs": "^5.0.3",
@@ -133,13 +133,14 @@
"increase-memory-limit": "^1.0.7",
"jest": "^24.9.0",
"jest-environment-jsdom-sixteen": "^2.0.0",
- "ko-lint-config": "^2.2.15",
+ "ko-lint-config": "2.2.19",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"lint-md": "^0.1.1",
"merge-stream": "^2.0.0",
"node-sass": "4.14.1",
- "react": "16.13.0",
+ "prettier": "2.7.1",
+ "react": "16.13.1",
"react-docgen-typescript-loader": "^3.1.1",
"react-dom": "16.13.0",
"react-icons": "^3.10.0",
@@ -157,10 +158,10 @@
},
"dependencies": {
"@ant-design/icons": "^4.7.0",
- "@handsontable/react": "3.0.0",
+ "@handsontable/react": "2.1.0",
"antd": "4.22.5",
"classnames": "^2.2.6",
- "handsontable": "7.0.1",
+ "handsontable": "6.2.2",
"highlight.js": "^10.5.0",
"lodash": "^4.17.15",
"moment": "^2.22.2",
diff --git a/scripts/const.sh b/scripts/const.sh
index 37c4bf559..01eece088 100755
--- a/scripts/const.sh
+++ b/scripts/const.sh
@@ -1,13 +1,13 @@
#!/bin/bash
# Project name
-export project_name="dt-react-component";
+export project_name="dt-react-component-v3";
# Temporary store project
export temp_path="/home/temp/$project_name";
# Server nginx root path
export server_root_path="/home/app/$project_name";
-# 3.10.x testing enviroment
export server="*****";
+# 3.x testing enviroment
echo "project name: $project_name"
echo "temp path: $temp_path"
diff --git a/scripts/deploy.sh b/scripts/deploy.sh
index e045c33ed..fd3eab359 100755
--- a/scripts/deploy.sh
+++ b/scripts/deploy.sh
@@ -1,5 +1,6 @@
#!/bin/bash
-#
+
+# 部署文档执行 `yarn deploy`,需要先将 `const.sh` 里的 server 改为 225 的机器 ip
# 1. Build project locally;
# 2. Upload dist to the temp path of target server ;
# 3. Login remote ssh server;
diff --git a/src/components/InterruptController/index.tsx b/src/components/InterruptController/index.tsx
index abc57cadc..f1bd6076c 100644
--- a/src/components/InterruptController/index.tsx
+++ b/src/components/InterruptController/index.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-const ControllerServer =
(Component: React.ComponentType
): any => {
+const ControllerServer =
(Component: any): any => {
return class extends React.Component
{
controller = new AbortController();
componentWillUnmount() {
diff --git a/src/components/blockHeader/__tests__/blockHeader.test.tsx b/src/components/blockHeader/__tests__/blockHeader.test.tsx
index 4b4b2af73..123d0733b 100644
--- a/src/components/blockHeader/__tests__/blockHeader.test.tsx
+++ b/src/components/blockHeader/__tests__/blockHeader.test.tsx
@@ -121,4 +121,18 @@ describe('test BlockHeader render', () => {
const titleBoxWrap1 = container1.firstChild.firstChild.firstChild;
expect(titleBoxWrap1.childNodes.length).toEqual(3);
});
+ test('should render BlockHeader correct margin-bottom', () => {
+ const { container: noStyle } = render();
+ expect(noStyle.querySelector('.dtc-block-header')).not.toHaveAttribute('style');
+ const { container: defaultBottom } = render(
+
+ );
+ expect(defaultBottom.querySelector('.dtc-block-header')).toHaveStyle({ marginBottom: 16 });
+ const { container: customizeBottom } = render(
+
+ );
+ expect(customizeBottom.querySelector('.dtc-block-header')).toHaveStyle({
+ marginBottom: 10,
+ });
+ });
});
diff --git a/src/components/blockHeader/index.tsx b/src/components/blockHeader/index.tsx
index 19ae06769..ac41e5fda 100644
--- a/src/components/blockHeader/index.tsx
+++ b/src/components/blockHeader/index.tsx
@@ -1,10 +1,11 @@
import React, { useState } from 'react';
import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
+import useLocale from '../locale/useLocale';
export interface BlockHeaderProps {
// 标题
- title: string;
+ title: React.ReactNode;
// 标题前的图标,默认是一个色块
beforeTitle?: React.ReactNode;
// 标题后的提示图标或文案
@@ -19,6 +20,8 @@ export interface BlockHeaderProps {
* 默认 false
*/
isSmall?: boolean;
+ hasBottom?: boolean;
+ spaceBottom?: number;
// 标题一行的样式类名
titleRowClassName?: string;
// 标题的样式类名
@@ -38,6 +41,8 @@ const BlockHeader: React.FC = function (props) {
afterTitle = '',
tooltip = '',
isSmall = false,
+ hasBottom = false,
+ spaceBottom = 0,
titleRowClassName = '',
titleClassName = '',
showBackground = true,
@@ -49,10 +54,16 @@ const BlockHeader: React.FC = function (props) {
const { beforeTitle = } = props;
const questionTooltip = tooltip && (
-
+
);
const newAfterTitle = afterTitle || questionTooltip;
+ let bottomStyle;
+ if (hasBottom) bottomStyle = { marginBottom: 16 };
+ if (spaceBottom) bottomStyle = { marginBottom: spaceBottom };
+
+ const locale = useLocale('BlockHeader');
+
const [expand, setExpand] = useState(defaultExpand);
const handleExpand = (expand) => {
@@ -61,7 +72,7 @@ const BlockHeader: React.FC = function (props) {
onChange?.(expand);
};
return (
-
+
= function (props) {
{addonAfter &&
{addonAfter}
}
{children && (
-
{expand ? '收起' : '展开'}
+
{expand ? locale.collapse : locale.expand}
)}
diff --git a/src/components/blockHeader/style.scss b/src/components/blockHeader/style.scss
index 9197ee69f..fbe94762c 100644
--- a/src/components/blockHeader/style.scss
+++ b/src/components/blockHeader/style.scss
@@ -40,6 +40,7 @@ $card_prefix: "dtc-block-header";
flex: 1;
display: flex;
align-items: center;
+ min-width: 0;
.#{$card_prefix}-before-title {
margin-right: 8px;
.default {
@@ -48,17 +49,25 @@ $card_prefix: "dtc-block-header";
background-color: #1D78FF;
}
.small {
- height: 12px;
+ height: 16px;
}
}
.#{$card_prefix}-title {
color: #3D446E;
font-weight: 500;
margin-right: 4px;
+ flex: 1;
+ min-width: 0;
}
.#{$card_prefix}-after-title {
+ display: flex;
+ align-items: center;
color: #8B8FA8;
font-size: 12px;
+ &-icon {
+ font-size: 16px;
+ color: #B1B4C5;
+ }
}
}
diff --git a/src/components/chromeDownload/index.tsx b/src/components/chromeDownload/index.tsx
index af1806b86..015236e9a 100644
--- a/src/components/chromeDownload/index.tsx
+++ b/src/components/chromeDownload/index.tsx
@@ -1,14 +1,18 @@
import React from 'react';
-import utils from '../utils';
import classNames from 'classnames';
+
+import utils from '../utils';
+import useLocale, { Locale } from '../locale/useLocale';
+
const prefixCls = 'dtc-chrome';
interface ChromeDownloadProps {
downloadChrome?: (chromeOfOsType?: 'macChrome' | 'windowsChrome' | 'others') => void;
className?: string;
style?: React.CSSProperties;
+ locale?: Locale['ChromeDownload'];
}
-export default class ChromeDownload extends React.Component
{
+class ChromeDownload extends React.Component {
constructor(props: ChromeDownloadProps) {
super(props);
}
@@ -28,21 +32,18 @@ export default class ChromeDownload extends React.Component
-
- 本产品当前可兼容Chrome66以及以上版本,请您更换至最新的谷歌(Chrome)浏览器
-
-
- {this.renderDivide('点击即可下载,更新即刻搞定')}
-
+ {locale.description}
+ {this.renderDivide(locale.download)}
) => {
+ const locale = useLocale('ChromeDownload');
+ return ;
+};
+
+export default ChromeDownloadWrapper;
diff --git a/src/components/chromeDownload/style.scss b/src/components/chromeDownload/style.scss
index a6fc8160a..2cf1d3c3f 100644
--- a/src/components/chromeDownload/style.scss
+++ b/src/components/chromeDownload/style.scss
@@ -1,12 +1,11 @@
$prefix: "dtc-chrome";
.#{$prefix}-chrome-download {
background: #F2F7FA;
- margin-top: 50px;
text-align: center;
- overflow-y: auto;
+ overflow: auto;
.#{$prefix}-pic-update {
- width: 182px;
- margin: 148px 0 17.5px;
+ width: 250px;
+ margin: 160px 0 8px;
}
.#{$prefix}-divide {
margin: 80.5px 0 60px;
@@ -18,7 +17,7 @@ $prefix: "dtc-chrome";
}
.#{$prefix}-download {
width: 160px;
- margin: 0 auto;
+ margin: 0 auto 24px;
cursor: pointer;
.#{$prefix}-chrome-version {
margin-top: 16.5px;
diff --git a/src/components/configProvider/index.tsx b/src/components/configProvider/index.tsx
new file mode 100644
index 000000000..1b6749637
--- /dev/null
+++ b/src/components/configProvider/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { LocaleContext } from '../locale/useLocale';
+
+const ConfigProvider = ({ locale, children }) => {
+ return {children};
+};
+
+export default ConfigProvider;
diff --git a/src/components/cookies/index.tsx b/src/components/cookies/index.tsx
index 536a7f9ab..28f7cb11a 100644
--- a/src/components/cookies/index.tsx
+++ b/src/components/cookies/index.tsx
@@ -18,7 +18,7 @@ export interface CookiesProps {
const defaultIntervalTime = 200;
class Cookies extends React.Component {
_currentCookies: string;
- private _timerId: NodeJS.Timer | null = null;
+ private _timerId: ReturnType | null = null;
componentDidMount() {
this.initEvent();
diff --git a/src/components/copyIcon/index.tsx b/src/components/copyIcon/index.tsx
index a86a5a1ef..6fc624fb9 100644
--- a/src/components/copyIcon/index.tsx
+++ b/src/components/copyIcon/index.tsx
@@ -1,15 +1,17 @@
import * as React from 'react';
import { Tooltip, message } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
+import useLocale, { Locale } from '../locale/useLocale';
export interface CopyIconProps {
text: string;
style?: React.CSSProperties;
title?: string;
customRender?: React.ReactNode;
+ locale?: Locale['CopyIcon'];
}
-export default class CopyIcon extends React.Component {
+class CopyIcon extends React.Component {
fakeHandlerCallback: () => void;
fakeHandler: EventListener | void;
fakeElem: HTMLTextAreaElement;
@@ -82,15 +84,16 @@ export default class CopyIcon extends React.Component {
}
handleResult(succeeded: any) {
+ const { locale } = this.props;
if (succeeded) {
- message.success('复制成功');
+ message.success(locale.copied);
} else {
- message.error('不支持');
+ message.error(locale.notSupport);
}
}
render() {
- let { customRender, text, style, title, ...rest } = this.props;
+ let { customRender, text, style, title, locale, ...rest } = this.props;
style = {
cursor: 'pointer',
@@ -101,7 +104,7 @@ export default class CopyIcon extends React.Component {
return customRender ? (
{customRender}
) : (
-
+
{
);
}
}
+
+const CopyIconWrapper = (props: Omit) => {
+ const locale = useLocale('CopyIcon');
+ return ;
+};
+
+export default CopyIconWrapper;
diff --git a/src/components/editCell/index.tsx b/src/components/editCell/index.tsx
index 2ff2f8687..e2b7ffd27 100644
--- a/src/components/editCell/index.tsx
+++ b/src/components/editCell/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import { Input } from 'antd';
import EllipsisText from '../ellipsisText';
import classNames from 'classnames';
+import useLocale, { Locale } from '../locale/useLocale';
type EditType = string | number;
export interface EditCellProps {
@@ -9,6 +10,7 @@ export interface EditCellProps {
value: string;
keyField: string;
isView?: boolean;
+ locale?: Locale['EditCell'];
onHandleEdit: (keyField: string, editValue: EditType) => void;
}
export interface EditCellStates {
@@ -16,7 +18,7 @@ export interface EditCellStates {
editValue: EditType;
}
-export default class EditCell extends React.PureComponent {
+class EditCell extends React.PureComponent {
state: EditCellStates = {
isEdit: false,
editValue: '',
@@ -47,7 +49,7 @@ export default class EditCell extends React.PureComponent
{isEdit ? (
@@ -57,16 +59,23 @@ export default class EditCell extends React.PureComponent
- 完成
- 取消
+ {locale.complete}
+ {locale.cancel}
) : (
<>
- {!isView && 修改}
+ {!isView && {locale.modify}}
>
)}
);
}
}
+
+const EditCellWrapper = (props: Omit
) => {
+ const locale = useLocale('EditCell');
+ return ;
+};
+
+export default EditCellWrapper;
diff --git a/src/components/editInput/__tests__/editInput.test.tsx b/src/components/editInput/__tests__/editInput.test.tsx
index 65178ef9f..42eaa6cd1 100644
--- a/src/components/editInput/__tests__/editInput.test.tsx
+++ b/src/components/editInput/__tests__/editInput.test.tsx
@@ -33,7 +33,7 @@ describe('test edit input', () => {
});
test('should render message when length more then max', () => {
fireEvent.change(element, { target: { value: '12345678910' } });
- expect(wrapper.getByText('字符长度不可超过10')).toBeInTheDocument();
+ expect(wrapper.getByText('字符长度不可超过${max}')).toBeInTheDocument();
expect(element.value).toEqual('1234567891');
});
diff --git a/src/components/editInput/index.tsx b/src/components/editInput/index.tsx
index 4c1384103..58afb3afc 100644
--- a/src/components/editInput/index.tsx
+++ b/src/components/editInput/index.tsx
@@ -1,16 +1,18 @@
import React from 'react';
import { Input, message } from 'antd';
+import useLocale, { Locale } from '../locale/useLocale';
export interface EditInputProps {
value?: string | number;
onChange?: (e) => void;
max?: number;
+ locale?: Locale['EditInput'];
[propName: string]: any;
}
export interface EditInputPropsStates {
value: string | number;
}
-export default class EditInput extends React.PureComponent {
+class EditInput extends React.PureComponent {
constructor(props: EditInputProps) {
super(props);
this.state = {
@@ -34,10 +36,11 @@ export default class EditInput extends React.PureComponent) => {
+ const { locale } = this.props;
const value = e.target.value;
const { max = 64 } = this.props;
if (value && max && value.length > max) {
- message.warning(`字符长度不可超过${max}`);
+ message.warning(locale.description);
this.setState({
value: value.substring(0, max),
});
@@ -61,3 +64,10 @@ export default class EditInput extends React.PureComponent) => {
+ const locale = useLocale('EditInput');
+ return ;
+};
+
+export default EditInputWrapper;
diff --git a/src/components/ellipsisText/__tests__/ellipsisText.test.tsx b/src/components/ellipsisText/__tests__/ellipsisText.test.tsx
index be77cdd71..d52dc70ca 100644
--- a/src/components/ellipsisText/__tests__/ellipsisText.test.tsx
+++ b/src/components/ellipsisText/__tests__/ellipsisText.test.tsx
@@ -48,6 +48,32 @@ describe('test ellipsis text if not set max width', () => {
});
});
+describe('auto calculate ellipsis text if the parent element does not exist', () => {
+ beforeEach(() => {
+ Object.defineProperty(window, 'getComputedStyle', {
+ value: jest.fn(() => ({
+ paddingLeft: '0px',
+ paddingRight: '0px',
+ })),
+ });
+
+ wrapper = render();
+ });
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ test('render correct value in ellipsis', () => {
+ const { getByText } = wrapper;
+ const { value } = defaultProps;
+ element = getByText(value);
+
+ expect(element).toBeInTheDocument();
+ expect(element.style.maxWidth).toBe('120px');
+ });
+});
+
describe('test ellipsis text if set max width', () => {
beforeEach(() => {
Object.defineProperty(window, 'getComputedStyle', {
diff --git a/src/components/ellipsisText/index.tsx b/src/components/ellipsisText/index.tsx
index 550337cc1..55093bb94 100644
--- a/src/components/ellipsisText/index.tsx
+++ b/src/components/ellipsisText/index.tsx
@@ -24,6 +24,8 @@ export interface NewHTMLElement extends HTMLElement {
currentStyle?: CSSStyleDeclaration;
}
+const DEFAULT_MAX_WIDTH = 120;
+
export default class EllipsisText extends PureComponent {
ellipsisRef: HTMLElement | null = null;
state = {
@@ -57,7 +59,8 @@ export default class EllipsisText extends PureComponent {
- if (!ele) return;
+ // The default maximum width is 120px when the element does not exist
+ if (!ele) return DEFAULT_MAX_WIDTH;
const { scrollWidth, offsetWidth, parentElement } = ele;
// If inline element, find the parent element
if (scrollWidth === 0) {
@@ -78,6 +81,8 @@ export default class EllipsisText extends PureComponent {
const { maxWidth } = this.props;
+ // if props has maxWidth don't have to calculate the text length
+ if (maxWidth) return;
const ellipsisNode = this.ellipsisRef;
const rangeWidth = this.getRangeWidth(ellipsisNode);
const ellipsisWidth = this.getMaxWidth(ellipsisNode.parentElement);
diff --git a/src/components/errorBoundary/index.tsx b/src/components/errorBoundary/index.tsx
index a2cd2b3a7..27fba89cb 100644
--- a/src/components/errorBoundary/index.tsx
+++ b/src/components/errorBoundary/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import LoadError from '../loadError';
interface ErrorBoundaryProps {
- children?: React.ReactNode;
+ children?: React.ReactNode | React.ReactComponentElement;
}
interface ErrorBoundaryStates {
@@ -28,6 +28,6 @@ export default class ErrorBoundary extends React.Component<
if (this.state.hasError) {
return ;
}
- return this.props.children;
+ return <>{this.props.children}>;
}
}
diff --git a/src/components/fullscreen/index.tsx b/src/components/fullscreen/index.tsx
index 68d52fd2a..4e6a2a34d 100644
--- a/src/components/fullscreen/index.tsx
+++ b/src/components/fullscreen/index.tsx
@@ -3,6 +3,7 @@ import { Button } from 'antd';
import MyIcon from './icon';
import KeyEventListener from '../keyEventListener';
+import useLocale, { Locale } from '../locale/useLocale';
const { KeyCombiner } = KeyEventListener;
declare let document: any;
@@ -14,12 +15,13 @@ export interface FullscreenProps {
iconStyle?: object;
fullIcon?: React.ReactNode;
exitFullIcon?: React.ReactNode;
+ locale?: Locale['Fullscreen'];
[propName: string]: any;
}
export interface FullscreenState {
isFullScreen: boolean;
}
-export default class Fullscreen extends React.Component {
+class Fullscreen extends React.Component {
state: FullscreenState = {
isFullScreen: false,
};
@@ -136,8 +138,8 @@ export default class Fullscreen extends React.Component) => {
+ const locale = useLocale('Fullscreen');
+ return ;
+};
+
+export default FullscreenWrapper;
diff --git a/src/components/globalLoading/index.tsx b/src/components/globalLoading/index.tsx
index 196797c5f..eb5d085a1 100644
--- a/src/components/globalLoading/index.tsx
+++ b/src/components/globalLoading/index.tsx
@@ -1,5 +1,6 @@
import classNames from 'classnames';
import React from 'react';
+import useLocale, { Locale } from '../locale/useLocale';
export interface GlobalLoadingProps {
className?: string;
@@ -8,19 +9,23 @@ export interface GlobalLoadingProps {
mainBackground?: string;
circleBackground?: string;
titleColor?: string;
+ locale?: Locale['GlobalLoading'];
}
-export default class GlobalLoading extends React.Component {
+class GlobalLoading extends React.Component {
render() {
const {
prefix = '',
- loadingTitle = '应用加载中,请等候~',
+ loadingTitle,
mainBackground = '#F2F7FA',
circleBackground = '#1D78FF',
titleColor = '#3D446E',
className = '',
+ locale,
} = this.props;
+ const newLoadingTitle = loadingTitle || locale.loading;
+
return (
-
{`${prefix} ${loadingTitle}`}
+
{`${prefix} ${newLoadingTitle}`}
@@ -45,3 +53,10 @@ export default class GlobalLoading extends React.Component
) => {
+ const locale = useLocale('GlobalLoading');
+ return ;
+};
+
+export default GlobalLoadingWrapper;
diff --git a/src/components/globalLoading/style.scss b/src/components/globalLoading/style.scss
index 2dabf97c6..60c43f590 100644
--- a/src/components/globalLoading/style.scss
+++ b/src/components/globalLoading/style.scss
@@ -14,8 +14,8 @@
text-align: center;
right: 0;
margin: auto;
- min-width: 300px;
height: 160px;
+ white-space: nowrap;
}
.dtc-loading-title {
diff --git a/src/components/goBack/goBackButton.tsx b/src/components/goBack/goBackButton.tsx
index 7b4dc93e4..09017df5d 100644
--- a/src/components/goBack/goBackButton.tsx
+++ b/src/components/goBack/goBackButton.tsx
@@ -2,8 +2,9 @@ import * as React from 'react';
import { Button } from 'antd';
import { browserHistory, hashHistory } from 'react-router';
import { GoBackButtonProps } from './index';
+import useLocale from '../locale/useLocale';
-export default class GoBackButton extends React.Component {
+class GoBackButton extends React.Component {
go = () => {
const { url, history, autoClose } = this.props;
@@ -25,11 +26,18 @@ export default class GoBackButton extends React.Component
- {title || '返回'}
+ {title || locale.back}
);
}
}
+
+const GoBackButtonWrapper = (props: Omit) => {
+ const locale = useLocale('GoBack');
+ return ;
+};
+
+export default GoBackButtonWrapper;
diff --git a/src/components/goBack/index.tsx b/src/components/goBack/index.tsx
index 3faf3f58c..add1228dc 100644
--- a/src/components/goBack/index.tsx
+++ b/src/components/goBack/index.tsx
@@ -1,3 +1,4 @@
+import { Locale } from '../locale/useLocale';
import GoBack from './goBack';
import GoBackButton from './goBackButton';
@@ -9,6 +10,7 @@ export interface GoBackProps {
}
export interface GoBackButtonProps extends GoBackProps {
title?: string;
+ locale?: Locale['GoBack'];
}
GoBack.GoBackButton = GoBackButton;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 6c2d6d68b..4c53105a1 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -34,3 +34,6 @@ export { default as TextMark } from './textMark';
export { default as ToolModal } from './toolModal';
export { default as ProgressLine } from './progressLine';
export { default as Empty } from './empty';
+export { default as ConfigProvider } from './configProvider';
+export { default as zhCN } from './locale/zh-CN';
+export { default as enUS } from './locale/en-US';
diff --git a/src/components/loadError/index.tsx b/src/components/loadError/index.tsx
index 4768004c6..fd43bf13f 100644
--- a/src/components/loadError/index.tsx
+++ b/src/components/loadError/index.tsx
@@ -1,22 +1,23 @@
import React from 'react';
+import useLocale from '../locale/useLocale';
const LoadError: React.FC = function () {
+ const locale = useLocale('LoadError');
return (
-
-
若该提示长时间存在,请联系管理员。
+
{locale.title}
);
diff --git a/src/components/locale/en-US.ts b/src/components/locale/en-US.ts
new file mode 100644
index 000000000..fc7b74352
--- /dev/null
+++ b/src/components/locale/en-US.ts
@@ -0,0 +1,82 @@
+import { Locale } from './useLocale';
+
+const localeValues: Locale = {
+ locale: 'en-US',
+ BlockHeader: {
+ expand: 'Expand',
+ collapse: 'Collapse',
+ },
+ ChromeDownload: {
+ description:
+ 'This product is currently compatible with Chrome 66 and above. Please switch to the latest Google (Chrome) browser.',
+ download: 'Click to download, update instantly.',
+ },
+ CopyIcon: {
+ copied: 'Copied',
+ notSupport: 'Not Support',
+ copy: 'Copy',
+ },
+ EditCell: {
+ complete: 'Complete',
+ cancel: 'Cancel',
+ modify: 'Modify',
+ },
+ EditInput: {
+ description: 'The character length cannot exceed ${max}',
+ },
+ Fullscreen: {
+ exitFull: 'Exit Full Screen',
+ full: 'Full Screen',
+ },
+ GlobalLoading: {
+ loading: 'The application is loading, please wait~',
+ },
+ GoBack: {
+ back: 'GoBack',
+ },
+ LoadError: {
+ please: 'A new version has been found. Please',
+ get: 'to get the new version.',
+ refresh: ' refresh ',
+ title: 'If this prompt persists for a long time, please contact the administrator.',
+ },
+ ModalWithForm: {
+ okText: 'Ok',
+ cancelText: 'Cancel',
+ },
+ MulSelectDropdown: {
+ open: 'Open',
+ cancelText: 'Cancel',
+ okText: 'Ok',
+ selectAll: 'Select All',
+ },
+ MultiSearchInput: {
+ case: 'Case-sensitive match',
+ precise: 'Exact match',
+ front: 'Head match',
+ tail: 'Tail match',
+ },
+ MxGraph: {
+ newNode: 'New node',
+ },
+ NotFound: {
+ description: 'Dear, did you go to the wrong place?',
+ },
+ ProgressLine: {
+ description: 'No description yet',
+ },
+ RenderFormItem: {
+ description: '${label} is empty',
+ },
+ SearchModal: {
+ title: 'Search and open',
+ placeholder: 'Please enter',
+ },
+ SpreadSheet: {
+ description: 'No Data',
+ copy: 'Copy',
+ copyAll: 'Copy values and column names',
+ },
+};
+
+export default localeValues;
diff --git a/src/components/locale/useLocale.tsx b/src/components/locale/useLocale.tsx
new file mode 100644
index 000000000..5ceb4159a
--- /dev/null
+++ b/src/components/locale/useLocale.tsx
@@ -0,0 +1,85 @@
+import { createContext, useContext, useMemo } from 'react';
+
+import defaultLocaleData from './zh-CN';
+
+export interface Locale {
+ locale: string;
+ BlockHeader?: { expand: string; collapse: string };
+ ChromeDownload?: { description: string; download: string };
+ CopyIcon?: { copied: string; notSupport: string; copy: string };
+ EditCell?: { complete: string; cancel: string; modify: string };
+ EditInput?: { description: string };
+ Fullscreen?: { exitFull: string; full: string };
+ GlobalLoading?: {
+ loading: string;
+ };
+ GoBack?: {
+ back: string;
+ };
+ LoadError?: {
+ please: string;
+ get: string;
+ refresh: string;
+ title: string;
+ };
+ ModalWithForm?: {
+ okText: string;
+ cancelText: string;
+ };
+ MulSelectDropdown?: {
+ open: string;
+ cancelText: string;
+ okText: string;
+ selectAll: string;
+ };
+ MultiSearchInput?: {
+ case: string;
+ precise: string;
+ front: string;
+ tail: string;
+ };
+ MxGraph?: { newNode: string };
+ NotFound?: {
+ description: string;
+ };
+ ProgressLine?: {
+ description: string;
+ };
+ RenderFormItem?: {
+ description: string;
+ };
+ SearchModal?: {
+ title: string;
+ placeholder: string;
+ };
+ SpreadSheet?: {
+ description: string;
+ copy: string;
+ copyAll: string;
+ };
+}
+
+export interface LocaleContextProps {
+ locale: Locale;
+}
+
+export const LocaleContext = createContext(undefined);
+
+export type LocaleComponentName = keyof Locale;
+
+const useLocale = (
+ componentName: C
+): NonNullable => {
+ const fullLocale = useContext(LocaleContext);
+
+ const getLocale = useMemo(() => {
+ const locale = defaultLocaleData[componentName] ?? {};
+ const localeFromContext = fullLocale?.locale[componentName] ?? {};
+
+ return Object.assign({}, locale, localeFromContext) as NonNullable;
+ }, [componentName, fullLocale]);
+
+ return getLocale;
+};
+
+export default useLocale;
diff --git a/src/components/locale/zh-CN.ts b/src/components/locale/zh-CN.ts
new file mode 100644
index 000000000..5967d76ec
--- /dev/null
+++ b/src/components/locale/zh-CN.ts
@@ -0,0 +1,81 @@
+import { Locale } from './useLocale';
+
+const localeValues: Locale = {
+ locale: 'zh-CN',
+ BlockHeader: {
+ expand: '展开',
+ collapse: '收起',
+ },
+ ChromeDownload: {
+ description: '本产品当前可兼容Chrome66以及以上版本,请您更换至最新的谷歌(Chrome)浏览器',
+ download: '点击即可下载,更新即刻搞定',
+ },
+ CopyIcon: {
+ copied: '复制成功',
+ notSupport: '不支持',
+ copy: '复制',
+ },
+ EditCell: {
+ complete: '完成',
+ cancel: '取消',
+ modify: '修改',
+ },
+ EditInput: {
+ description: '字符长度不可超过${max}',
+ },
+ Fullscreen: {
+ exitFull: '退出全屏',
+ full: '全屏',
+ },
+ GlobalLoading: {
+ loading: '应用加载中,请等候~',
+ },
+ GoBack: {
+ back: '返回',
+ },
+ LoadError: {
+ please: '发现新版本,请',
+ get: '获取新版本。',
+ refresh: '刷新',
+ title: '若该提示长时间存在,请联系管理员。',
+ },
+ ModalWithForm: {
+ okText: '确定',
+ cancelText: '取消',
+ },
+ MulSelectDropdown: {
+ open: '打开',
+ cancelText: '取消',
+ okText: '确定',
+ selectAll: '全选',
+ },
+ MultiSearchInput: {
+ case: '区分大小写匹配',
+ precise: '精确匹配',
+ front: '头部匹配',
+ tail: '尾部匹配',
+ },
+ MxGraph: {
+ newNode: '新节点',
+ },
+ NotFound: {
+ description: '亲,是不是走错地方了?',
+ },
+ ProgressLine: {
+ description: '暂无描述',
+ },
+ RenderFormItem: {
+ description: '${label}为空',
+ },
+ SearchModal: {
+ title: '搜索并打开',
+ placeholder: '请输入',
+ },
+ SpreadSheet: {
+ description: '暂无数据',
+ copy: '复制',
+ copyAll: '复制值以及列名',
+ },
+};
+
+export default localeValues;
diff --git a/src/components/markdownRender/index.tsx b/src/components/markdownRender/index.tsx
index 275d76ba9..3f1b0434e 100644
--- a/src/components/markdownRender/index.tsx
+++ b/src/components/markdownRender/index.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import showdown from 'showdown';
-import hljs from 'highlight.js';
+import hljs from 'highlight.js/lib/core';
import sql from 'highlight.js/lib/languages/sql';
import classNames from 'classnames';
diff --git a/src/components/modalWithForm/__tests__/modalWithForm.test.tsx b/src/components/modalWithForm/__tests__/modalWithForm.test.tsx
index 0ecf4064f..e40ea0812 100644
--- a/src/components/modalWithForm/__tests__/modalWithForm.test.tsx
+++ b/src/components/modalWithForm/__tests__/modalWithForm.test.tsx
@@ -73,18 +73,6 @@ test('should toggle modalWithForm when click button', () => {
expect(element).toBeValid();
});
-test('should change input value when input', () => {
- // 点击按钮打开模态框
- fireEvent.click(wrapper.getByText('click'));
- const ele = wrapper.getByTestId('test-input');
- ele.onchange = jest.fn();
- fireEvent.change(ele, { target: { value: '1' } });
- expect(ele.onchange).toHaveBeenCalled();
- expect(ele.value).toBe('1');
- const eleQuit = wrapper.getByText('quit');
- fireEvent.click(eleQuit);
-});
-
test('should trigger submit methond when form validate successful', () => {
fireEvent.click(wrapper.getByText('click'));
const eleInput = wrapper.getByTestId('test-input');
@@ -97,18 +85,6 @@ test('should trigger submit methond when form validate successful', () => {
expect(eleOk.onclick).toHaveBeenCalled();
});
-test('should render ModalWithForm render correct button props', () => {
- fireEvent.click(wrapper.getByText('click'));
- const eleOk = wrapper.getByText('ok');
- expect(eleOk.parentNode).toHaveClass('ant-btn-dangerous');
-});
-
-test('should render ModalWithForm render correct width props', async () => {
- fireEvent.click(wrapper.getByText('click'));
- const eleModal = document.querySelector('.ant-modal');
- expect(eleModal).toHaveStyle({ width: '400px' });
-});
-
test('test useFilterFormProps', () => {
const { result } = renderHook(() =>
useFilterFormProps({
diff --git a/src/components/modalWithForm/index.tsx b/src/components/modalWithForm/index.tsx
index 3e764b734..95bc98081 100644
--- a/src/components/modalWithForm/index.tsx
+++ b/src/components/modalWithForm/index.tsx
@@ -1,6 +1,7 @@
import React from 'react';
-import { Modal, Form, FormProps } from 'antd';
+import { Form, FormProps, Modal } from 'antd';
import { ButtonProps, ButtonType } from 'antd/es/button';
+import useLocale from '../locale/useLocale';
export interface IProps {
confirmLoading?: boolean;
@@ -9,7 +10,7 @@ export interface IProps {
okType?: ButtonType;
record?: string | number | object;
visible?: boolean;
- title?: React.ReactNode | string;
+ title?: React.ReactNode;
width?: string | number;
modelClass?: string;
footer?: React.ReactNode;
@@ -23,9 +24,10 @@ export interface IProps {
onCancel?: (func: Function) => any;
onSubmit?: (values: any, record: any) => void;
[key: string]: any;
+ maskClosable?: boolean;
}
-type ModalProps = IProps & FormProps;
+type ModalProps = IProps & Omit;
export const FORM_PROPS = [
'colon',
@@ -62,12 +64,14 @@ export const useFilterFormProps = (props = {}) => {
};
const ModalForm = (props: ModalProps) => {
+ const locale = useLocale('ModalWithForm');
+
const {
title,
visible,
record,
- okText = '确定',
- cancelText = '取消',
+ okText = locale.okText,
+ cancelText = locale.cancelText,
modelClass,
okType,
width,
@@ -80,6 +84,8 @@ const ModalForm = (props: ModalProps) => {
onSubmit,
children,
okButtonProps,
+ maskClosable = false,
+ afterClose,
} = props;
const formProps = useFilterFormProps();
@@ -98,6 +104,11 @@ const ModalForm = (props: ModalProps) => {
form.resetFields();
};
+ const handleAfterClose = () => {
+ afterClose?.();
+ form.resetFields();
+ };
+
return (
{
cancelButtonProps={cancelButtonProps}
confirmLoading={confirmLoading}
okButtonProps={okButtonProps}
+ maskClosable={maskClosable}
+ afterClose={handleAfterClose}
>