+
) => {
+ const locale = useLocale('EditCell');
+ return {
+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 {
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 {
+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 {
+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 (
= function (props) {
{addonAfter && {
+class ChromeDownload extends React.Component {
constructor(props: ChromeDownloadProps) {
super(props);
}
@@ -28,21 +32,18 @@ export default class ChromeDownload extends React.Component
-
);
}
}
+
+const EditCellWrapper = (props: Omit{addonAfter}
}
{children && (
-
)}
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{expand ? '收起' : '展开'}
+ {expand ? locale.collapse : locale.expand}
-
- 本产品当前可兼容Chrome66以及以上版本，请您更换至最新的谷歌(Chrome)浏览器
-
-
- {this.renderDivide('点击即可下载，更新即刻搞定')}
-
+ {locale.description}
+ {this.renderDivide(locale.download)}
) => {
+ const locale = useLocale('ChromeDownload');
+ 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 {
+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
) : (
<>
-
{`${prefix} ${loadingTitle}`}
+ {`${prefix} ${newLoadingTitle}`}
@@ -45,3 +53,10 @@ export default class GlobalLoading extends React.Component) => {
+ const locale = useLocale('GlobalLoading');
+ return {
+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 (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}
>
-