From 5059ba7abd576d653436c37ccf2482621f681b78 Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Fri, 3 Jan 2025 14:47:52 +0800 Subject: [PATCH 1/3] feat(configprovider): support provider for RC --- src/components/blockHeader/index.tsx | 6 +- src/components/chromeDownload/index.tsx | 21 ++++--- src/components/configProvider/index.tsx | 70 +++++++++++++++++++++ src/components/copyIcon/index.tsx | 21 +++++-- src/components/editCell/index.tsx | 20 ++++-- src/components/editInput/index.tsx | 15 ++++- src/components/fullscreen/index.tsx | 16 ++++- src/components/globalLoading/index.tsx | 19 +++++- src/components/goBack/goBackButton.tsx | 10 ++- src/components/goBack/index.tsx | 2 + src/components/index.tsx | 3 + src/components/loadError/index.tsx | 11 ++-- src/components/locale/en-US.ts | 82 +++++++++++++++++++++++++ src/components/locale/useLocale.tsx | 26 ++++++++ src/components/locale/zh-CN.ts | 81 ++++++++++++++++++++++++ src/components/modalWithForm/index.tsx | 7 ++- src/components/notFound/index.tsx | 24 ++++---- src/components/progressLine/index.tsx | 6 +- src/components/renderFormItem/index.tsx | 5 +- src/components/searchModal/index.tsx | 27 ++++++-- src/components/spreadSheet/index.tsx | 15 ++++- 21 files changed, 432 insertions(+), 55 deletions(-) create mode 100644 src/components/configProvider/index.tsx create mode 100644 src/components/locale/en-US.ts create mode 100644 src/components/locale/useLocale.tsx create mode 100644 src/components/locale/zh-CN.ts diff --git a/src/components/blockHeader/index.tsx b/src/components/blockHeader/index.tsx index d23fac43b..ac41e5fda 100644 --- a/src/components/blockHeader/index.tsx +++ b/src/components/blockHeader/index.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons'; import { Tooltip } from 'antd'; +import useLocale from '../locale/useLocale'; export interface BlockHeaderProps { // 标题 @@ -60,6 +61,9 @@ const BlockHeader: React.FC = function (props) { let bottomStyle; if (hasBottom) bottomStyle = { marginBottom: 16 }; if (spaceBottom) bottomStyle = { marginBottom: spaceBottom }; + + const locale = useLocale('BlockHeader'); + const [expand, setExpand] = useState(defaultExpand); const handleExpand = (expand) => { @@ -87,7 +91,7 @@ const BlockHeader: React.FC = function (props) { {addonAfter &&
{addonAfter}
} {children && (
-
{expand ? '收起' : '展开'}
+
{expand ? locale.collapse : locale.expand}
)} diff --git a/src/components/chromeDownload/index.tsx b/src/components/chromeDownload/index.tsx index 66e23dc28..077643088 100644 --- a/src/components/chromeDownload/index.tsx +++ b/src/components/chromeDownload/index.tsx @@ -2,14 +2,17 @@ import React from 'react'; import classNames from 'classnames'; import utils from '../utils'; +import useLocale from '../locale/useLocale'; +import { Locale } from '../configProvider'; 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); } @@ -29,6 +32,7 @@ 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/configProvider/index.tsx b/src/components/configProvider/index.tsx new file mode 100644 index 000000000..b346005b1 --- /dev/null +++ b/src/components/configProvider/index.tsx @@ -0,0 +1,70 @@ +import React, { createContext } from 'react'; + +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; + extract: string; + head: 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); + +const ConfigProvider = ({ locale, children }) => { + return {children}; +}; + +export default ConfigProvider; diff --git a/src/components/copyIcon/index.tsx b/src/components/copyIcon/index.tsx index a86a5a1ef..d75d1fc35 100644 --- a/src/components/copyIcon/index.tsx +++ b/src/components/copyIcon/index.tsx @@ -1,15 +1,18 @@ import * as React from 'react'; import { Tooltip, message } from 'antd'; import { CopyOutlined } from '@ant-design/icons'; +import useLocale from '../locale/useLocale'; +import { Locale } from '../configProvider'; 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 +85,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 +105,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..6b29f0e7a 100644 --- a/src/components/editCell/index.tsx +++ b/src/components/editCell/index.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { Input } from 'antd'; import EllipsisText from '../ellipsisText'; import classNames from 'classnames'; +import { Locale } from '../configProvider'; +import useLocale from '../locale/useLocale'; type EditType = string | number; export interface EditCellProps { @@ -9,6 +11,7 @@ export interface EditCellProps { value: string; keyField: string; isView?: boolean; + locale?: Locale['EditCell']; onHandleEdit: (keyField: string, editValue: EditType) => void; } export interface EditCellStates { @@ -16,7 +19,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 +50,7 @@ export default class EditCell extends React.PureComponent {isEdit ? ( @@ -57,16 +60,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/index.tsx b/src/components/editInput/index.tsx index 4c1384103..5bd719d8a 100644 --- a/src/components/editInput/index.tsx +++ b/src/components/editInput/index.tsx @@ -1,16 +1,19 @@ import React from 'react'; import { Input, message } from 'antd'; +import { Locale } from '../configProvider'; +import useLocale 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 +37,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 +65,10 @@ export default class EditInput extends React.PureComponent) => { + const locale = useLocale('EditInput'); + return ; +}; + +export default EditInputWrapper; diff --git a/src/components/fullscreen/index.tsx b/src/components/fullscreen/index.tsx index 68d52fd2a..222d195fd 100644 --- a/src/components/fullscreen/index.tsx +++ b/src/components/fullscreen/index.tsx @@ -3,6 +3,8 @@ import { Button } from 'antd'; import MyIcon from './icon'; import KeyEventListener from '../keyEventListener'; +import { Locale } from '../configProvider'; +import useLocale from '../locale/useLocale'; const { KeyCombiner } = KeyEventListener; declare let document: any; @@ -14,12 +16,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 +139,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 e18faa65c..cfbe14364 100644 --- a/src/components/globalLoading/index.tsx +++ b/src/components/globalLoading/index.tsx @@ -1,5 +1,7 @@ import classNames from 'classnames'; import React from 'react'; +import { Locale } from '../configProvider'; +import useLocale from '../locale/useLocale'; export interface GlobalLoadingProps { className?: string; @@ -8,19 +10,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}`}
@@ -48,3 +54,10 @@ export default class GlobalLoading extends React.Component) => { + const locale = useLocale('GlobalLoading'); + return ; +}; + +export default GlobalLoadingWrapper; diff --git a/src/components/goBack/goBackButton.tsx b/src/components/goBack/goBackButton.tsx index 7b4dc93e4..af7a9d924 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; @@ -33,3 +34,10 @@ export default class GoBackButton extends React.Component) => { + const locale = useLocale('GoBack'); + return ; +}; + +export default GoBackButtonWrapper; diff --git a/src/components/goBack/index.tsx b/src/components/goBack/index.tsx index 3faf3f58c..eea662c6c 100644 --- a/src/components/goBack/index.tsx +++ b/src/components/goBack/index.tsx @@ -1,3 +1,4 @@ +import { Locale } from '../configProvider'; 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.please} { location.reload(); }} > - 刷新 + {locale.refresh} - 获取新版本。 + {locale.get}

-

若该提示长时间存在，请联系管理员。

+

{locale.title}

); diff --git a/src/components/locale/en-US.ts b/src/components/locale/en-US.ts new file mode 100644 index 000000000..811aadef2 --- /dev/null +++ b/src/components/locale/en-US.ts @@ -0,0 +1,82 @@ +import { Locale } from '../configProvider'; + +const localeValues: Locale = { + locale: 'zh-CN', + 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', + extract: 'Exact match', + head: '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..e53cdc360 --- /dev/null +++ b/src/components/locale/useLocale.tsx @@ -0,0 +1,26 @@ +import { useContext, useMemo } from 'react'; + +import type { Locale, LocaleContextProps } from '../configProvider'; +import { LocaleContext } from '../configProvider'; +import defaultLocaleData from './zh-CN'; + +export type LocaleComponentName = keyof Locale; + +const useLocale = ( + componentName: C +): NonNullable => { + const fullLocale = useContext(LocaleContext); + + const getLocale = useMemo(() => { + const locale = defaultLocaleData[componentName] ?? {}; + const localeFromContext = fullLocale?.[componentName as keyof LocaleContextProps] ?? {}; + return { + ...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..6a2519366 --- /dev/null +++ b/src/components/locale/zh-CN.ts @@ -0,0 +1,81 @@ +import { Locale } from '../configProvider'; + +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: '区分大小写匹配', + extract: '精确匹配', + head: '头部匹配', + 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/modalWithForm/index.tsx b/src/components/modalWithForm/index.tsx index ae0941176..95bc98081 100644 --- a/src/components/modalWithForm/index.tsx +++ b/src/components/modalWithForm/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Form, FormProps, Modal } from 'antd'; import { ButtonProps, ButtonType } from 'antd/es/button'; +import useLocale from '../locale/useLocale'; export interface IProps { confirmLoading?: boolean; @@ -63,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, diff --git a/src/components/notFound/index.tsx b/src/components/notFound/index.tsx index 97e9b9dc1..d920b7c12 100644 --- a/src/components/notFound/index.tsx +++ b/src/components/notFound/index.tsx @@ -1,15 +1,17 @@ import React from 'react'; import { FrownOutlined } from '@ant-design/icons'; +import useLocale from '../locale/useLocale'; -export default class NotFound extends React.Component { - render() { - return ( -
-

- 亲，是不是走错地方了？ -

-
- ); - } -} +const NotFound = () => { + const locale = useLocale('NotFound'); + return ( +
+

+ {locale.description} +

+
+ ); +}; + +export default NotFound; diff --git a/src/components/progressLine/index.tsx b/src/components/progressLine/index.tsx index f2318d554..736967fdd 100644 --- a/src/components/progressLine/index.tsx +++ b/src/components/progressLine/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { Tooltip } from 'antd'; +import useLocale from '../locale/useLocale'; interface IProps { title?: string; @@ -12,7 +13,7 @@ interface IProps { } const ProgressLine = ({ - title = '暂无描述', + title, num = 0, percent = '0%', color = '#3BCEFF', @@ -21,7 +22,8 @@ const ProgressLine = ({ width = '280px', }: IProps) => { const slidePrefixCls = 'dtc-progress-line'; - const label = `${title}: ${num}`; + const locale = useLocale('ProgressLine'); + const label = `${title || locale.description}: ${num}`; return (
{needTitle && ( diff --git a/src/components/renderFormItem/index.tsx b/src/components/renderFormItem/index.tsx index 02e8c26a8..1bdb48e1d 100644 --- a/src/components/renderFormItem/index.tsx +++ b/src/components/renderFormItem/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Form, Input } from 'antd'; import { Rule } from 'antd/lib/form'; +import useLocale from '../locale/useLocale'; const FormItem = Form.Item; @@ -43,6 +44,8 @@ export default function RenderFormItem({ item, layout }: ItemType) { valuePropName, normalize, } = options; + const locale = useLocale('RenderFormItem'); + return ( void; onSelect?: (value: string, option: Object) => void; onCancel?: () => void; @@ -30,15 +33,22 @@ class SearchModal extends React.Component { render() { const { visible, - title = '搜索并打开', + title, prefixRender, dataSource = [], // bodyStyle, - placeholder = '请输入', + placeholder, + locale, ...rest } = this.props; return ( - + {prefixRender && ( @@ -52,7 +62,7 @@ class SearchModal extends React.Component { onSelect={this.onSelect} onSearch={this.onChange} > - + @@ -60,4 +70,11 @@ class SearchModal extends React.Component { ); } } -export default SearchModal; + +const SearchModalWrapper = (props: Omit) => { + const locale = useLocale('SearchModal'); + const { visible, dataSource, ...reset } = props; + return ; +}; + +export default SearchModalWrapper; diff --git a/src/components/spreadSheet/index.tsx b/src/components/spreadSheet/index.tsx index ac8569b03..9e1e87517 100644 --- a/src/components/spreadSheet/index.tsx +++ b/src/components/spreadSheet/index.tsx @@ -6,6 +6,8 @@ import type { HotTableProps } from '@handsontable/react'; import classNames from 'classnames'; import 'handsontable/dist/handsontable.full.css'; import 'handsontable/languages/zh-CN.js'; +import useLocale from '../locale/useLocale'; +import { Locale } from '../configProvider'; type IOptions = HotTableProps & { /** 是否展示复制值以及列名 */ @@ -24,6 +26,7 @@ export interface SpreadSheetProps { /** 字段类型 */ type: string; }>; + locale?: Locale['SpreadSheet']; hotTableInstanceRef?: (instance: any) => void; } @@ -153,7 +156,9 @@ class SpreadSheet extends React.PureComponent { if (!isShowColHeaders) return false; // handsontable 不支持 renderCustomHeader，所以只能用 html string 实现 tooltip const fieldTypeStr = columnTypes?.[index]?.type; - const title = fieldTypeStr ? `${columns?.[index]}: ${fieldTypeStr}` : columns?.[index]; + const title = fieldTypeStr + ? `${columns?.[index]}: ${fieldTypeStr}` + : columns?.[index]; return `${title}`; }} data={showData} @@ -176,4 +181,10 @@ class SpreadSheet extends React.PureComponent { ); } } -export default SpreadSheet; + +const SpreadSheetWrapper = (props: Omit) => { + const locale = useLocale('SpreadSheet'); + return ; +}; + +export default SpreadSheetWrapper; From 7ad2a55841a8a26513d0c68b79e6b12f9c3b5710 Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Mon, 6 Jan 2025 19:12:10 +0800 Subject: [PATCH 2/3] feat(configprovider): migrate locale type to useLocale --- src/components/configProvider/index.tsx | 66 +----------------------- src/components/locale/useLocale.tsx | 67 +++++++++++++++++++++++-- 2 files changed, 66 insertions(+), 67 deletions(-) diff --git a/src/components/configProvider/index.tsx b/src/components/configProvider/index.tsx index b346005b1..649f2f513 100644 --- a/src/components/configProvider/index.tsx +++ b/src/components/configProvider/index.tsx @@ -1,67 +1,5 @@ -import React, { createContext } from 'react'; - -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; - extract: string; - head: 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); +import React from 'react'; +import { LocaleContext } from '../locale/useLocale'; const ConfigProvider = ({ locale, children }) => { return {children}; diff --git a/src/components/locale/useLocale.tsx b/src/components/locale/useLocale.tsx index e53cdc360..47d3e165c 100644 --- a/src/components/locale/useLocale.tsx +++ b/src/components/locale/useLocale.tsx @@ -1,9 +1,70 @@ -import { useContext, useMemo } from 'react'; +import { createContext, useContext, useMemo } from 'react'; -import type { Locale, LocaleContextProps } from '../configProvider'; -import { LocaleContext } from '../configProvider'; 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; + extract: string; + head: 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 = ( From df45fec5b4a39af1cef79f652d17f0c98f3525af Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Fri, 10 Jan 2025 16:30:13 +0800 Subject: [PATCH 3/3] fix(configprovider): change Locale path and remove sass_binary_site --- .yarnrc | 1 - src/components/chromeDownload/index.tsx | 4 ++-- src/components/copyIcon/index.tsx | 3 +-- src/components/editCell/index.tsx | 3 +-- src/components/editInput/index.tsx | 3 +-- src/components/fullscreen/index.tsx | 3 +-- src/components/globalLoading/index.tsx | 3 +-- src/components/goBack/index.tsx | 2 +- src/components/locale/en-US.ts | 2 +- src/components/locale/zh-CN.ts | 2 +- src/components/searchModal/index.tsx | 3 +-- src/components/spreadSheet/index.tsx | 3 +-- 12 files changed, 12 insertions(+), 20 deletions(-) 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/src/components/chromeDownload/index.tsx b/src/components/chromeDownload/index.tsx index 077643088..015236e9a 100644 --- a/src/components/chromeDownload/index.tsx +++ b/src/components/chromeDownload/index.tsx @@ -2,8 +2,8 @@ import React from 'react'; import classNames from 'classnames'; import utils from '../utils'; -import useLocale from '../locale/useLocale'; -import { Locale } from '../configProvider'; +import useLocale, { Locale } from '../locale/useLocale'; + const prefixCls = 'dtc-chrome'; interface ChromeDownloadProps { diff --git a/src/components/copyIcon/index.tsx b/src/components/copyIcon/index.tsx index d75d1fc35..6fc624fb9 100644 --- a/src/components/copyIcon/index.tsx +++ b/src/components/copyIcon/index.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import { Tooltip, message } from 'antd'; import { CopyOutlined } from '@ant-design/icons'; -import useLocale from '../locale/useLocale'; -import { Locale } from '../configProvider'; +import useLocale, { Locale } from '../locale/useLocale'; export interface CopyIconProps { text: string; diff --git a/src/components/editCell/index.tsx b/src/components/editCell/index.tsx index 6b29f0e7a..e2b7ffd27 100644 --- a/src/components/editCell/index.tsx +++ b/src/components/editCell/index.tsx @@ -2,8 +2,7 @@ import React from 'react'; import { Input } from 'antd'; import EllipsisText from '../ellipsisText'; import classNames from 'classnames'; -import { Locale } from '../configProvider'; -import useLocale from '../locale/useLocale'; +import useLocale, { Locale } from '../locale/useLocale'; type EditType = string | number; export interface EditCellProps { diff --git a/src/components/editInput/index.tsx b/src/components/editInput/index.tsx index 5bd719d8a..58afb3afc 100644 --- a/src/components/editInput/index.tsx +++ b/src/components/editInput/index.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Input, message } from 'antd'; -import { Locale } from '../configProvider'; -import useLocale from '../locale/useLocale'; +import useLocale, { Locale } from '../locale/useLocale'; export interface EditInputProps { value?: string | number; onChange?: (e) => void; diff --git a/src/components/fullscreen/index.tsx b/src/components/fullscreen/index.tsx index 222d195fd..4e6a2a34d 100644 --- a/src/components/fullscreen/index.tsx +++ b/src/components/fullscreen/index.tsx @@ -3,8 +3,7 @@ import { Button } from 'antd'; import MyIcon from './icon'; import KeyEventListener from '../keyEventListener'; -import { Locale } from '../configProvider'; -import useLocale from '../locale/useLocale'; +import useLocale, { Locale } from '../locale/useLocale'; const { KeyCombiner } = KeyEventListener; declare let document: any; diff --git a/src/components/globalLoading/index.tsx b/src/components/globalLoading/index.tsx index cfbe14364..eb5d085a1 100644 --- a/src/components/globalLoading/index.tsx +++ b/src/components/globalLoading/index.tsx @@ -1,7 +1,6 @@ import classNames from 'classnames'; import React from 'react'; -import { Locale } from '../configProvider'; -import useLocale from '../locale/useLocale'; +import useLocale, { Locale } from '../locale/useLocale'; export interface GlobalLoadingProps { className?: string; diff --git a/src/components/goBack/index.tsx b/src/components/goBack/index.tsx index eea662c6c..add1228dc 100644 --- a/src/components/goBack/index.tsx +++ b/src/components/goBack/index.tsx @@ -1,4 +1,4 @@ -import { Locale } from '../configProvider'; +import { Locale } from '../locale/useLocale'; import GoBack from './goBack'; import GoBackButton from './goBackButton'; diff --git a/src/components/locale/en-US.ts b/src/components/locale/en-US.ts index 811aadef2..8521f46ef 100644 --- a/src/components/locale/en-US.ts +++ b/src/components/locale/en-US.ts @@ -1,4 +1,4 @@ -import { Locale } from '../configProvider'; +import { Locale } from './useLocale'; const localeValues: Locale = { locale: 'zh-CN', diff --git a/src/components/locale/zh-CN.ts b/src/components/locale/zh-CN.ts index 6a2519366..39d528908 100644 --- a/src/components/locale/zh-CN.ts +++ b/src/components/locale/zh-CN.ts @@ -1,4 +1,4 @@ -import { Locale } from '../configProvider'; +import { Locale } from './useLocale'; const localeValues: Locale = { locale: 'zh-CN', diff --git a/src/components/searchModal/index.tsx b/src/components/searchModal/index.tsx index 89d483009..1bef1ea4a 100644 --- a/src/components/searchModal/index.tsx +++ b/src/components/searchModal/index.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { Modal, AutoComplete, Input, Row, Col } from 'antd'; -import { Locale } from '../configProvider'; -import useLocale from '../locale/useLocale'; +import useLocale, { Locale } from '../locale/useLocale'; export interface SearchModalProps { visible: boolean; diff --git a/src/components/spreadSheet/index.tsx b/src/components/spreadSheet/index.tsx index 9e1e87517..9889d23b0 100644 --- a/src/components/spreadSheet/index.tsx +++ b/src/components/spreadSheet/index.tsx @@ -6,8 +6,7 @@ import type { HotTableProps } from '@handsontable/react'; import classNames from 'classnames'; import 'handsontable/dist/handsontable.full.css'; import 'handsontable/languages/zh-CN.js'; -import useLocale from '../locale/useLocale'; -import { Locale } from '../configProvider'; +import useLocale, { Locale } from '../locale/useLocale'; type IOptions = HotTableProps & { /** 是否展示复制值以及列名 */