From 59378dbdf42d7cb784fe45485e21822913b296d0 Mon Sep 17 00:00:00 2001 From: sherotree Date: Sat, 7 Aug 2021 18:00:46 +0800 Subject: [PATCH 01/10] refactor: migrate Button from nusi to antd --- example/app.css | 1 + example/app.jsx | 12 ++++++------ package.json | 1 + src/components/DcBoard/header.tsx | 7 +++---- src/components/DcBoard/pure-header.tsx | 3 ++- src/components/DcBoard/types/header.d.ts | 2 +- src/components/DcChartEditor/editor-panel/index.tsx | 3 ++- src/components/DcContainer/index.tsx | 3 ++- src/components/DcGlobalFilters/config-modal.tsx | 3 ++- 9 files changed, 20 insertions(+), 15 deletions(-) create mode 100644 example/app.css diff --git a/example/app.css b/example/app.css new file mode 100644 index 00000000..3cb918ee --- /dev/null +++ b/example/app.css @@ -0,0 +1 @@ +@import '~antd/dist/antd.css'; \ No newline at end of file diff --git a/example/app.jsx b/example/app.jsx index 54249444..df1a3ead 100644 --- a/example/app.jsx +++ b/example/app.jsx @@ -4,6 +4,8 @@ import { BoardGrid, PureBoardGrid, setLocale, getLocale, getTheme, setTheme } fr import layout from './mock/data'; // import layout2 from './mock/data2'; import { useMount } from 'react-use'; +import { Button } from 'antd'; +import './app.css' function App() { console.log('current locale:', getLocale()); @@ -17,16 +19,14 @@ function App() {
语言： - - + + 主题： - - + +
{ console.log(saveLayout); }} /> - {/* {'>>>>>>>>>>>>>>>>>>>>>>>>>>>sasasa'} - */}
); } diff --git a/package.json b/package.json index 8d3fb329..340fb50d 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "dependencies": { "@babel/runtime": "^7.14.0", "@terminus/nusi": "^3.10.78", + "antd": "^4.15.4", "classnames": "^2.2.6", "cube-state": "1.2.1", "dom-to-image": "^2.6.0", diff --git a/src/components/DcBoard/header.tsx b/src/components/DcBoard/header.tsx index 7e211b4b..bd23befb 100644 --- a/src/components/DcBoard/header.tsx +++ b/src/components/DcBoard/header.tsx @@ -5,7 +5,8 @@ * @Last Modified time: 2021-03-11 14:33:40 */ import React, { RefObject, useEffect, useCallback, useMemo } from 'react'; -import { Button, Tooltip, Dropdown, Menu } from '@terminus/nusi'; +import { Tooltip } from '@terminus/nusi'; +import { Button } from 'antd'; import { useFullscreen, useToggle } from 'react-use'; import DC from 'src/types'; import { DcIcon } from '../../common'; @@ -173,9 +174,7 @@ const DashboardHeader = ({ - + - - + diff --git a/src/components/DcChartEditor/switch-chart-type/index.tsx b/src/components/DcChartEditor/switch-chart-type/index.tsx index 5ccf84cd..38b4df26 100644 --- a/src/components/DcChartEditor/switch-chart-type/index.tsx +++ b/src/components/DcChartEditor/switch-chart-type/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { map } from 'lodash'; -import { Popover } from '@terminus/nusi'; +import { Popover } from 'antd'; import DC from 'src/types'; import classnames from 'classnames'; import { DcIcon } from '../../../common'; @@ -26,7 +26,7 @@ const SwitchChartType = ({ return (
{map(basicCharts, ({ name, enName, icon }: DC.ViewDefItem, chartType) => ( - +
) => { // 初始化全国地图 client('https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json', { referrer: '' }) .then((res) => registerMap('中华人民共和国', res)) - .catch((err) => { Toast.error(err); }); + .catch((err) => { message.error(err); }); }); const loadMapDataSource = (_mapTypes: string[]) => { @@ -99,7 +99,7 @@ const ChartMap = React.forwardRef((props: IProps, ref: React.Ref) => { const adcode = adcodeMap.get(mapType); client(`https://geo.datav.aliyun.com/areas_v2/bound/${adcode}_full.json`, { referrer: '' }) .then((res) => registerMap(mapType, res)) - .catch((err) => { Toast.error(err); }); + .catch((err) => { message.error(err); }); }; return ( diff --git a/src/components/DcCharts/chart-pie/configurator.tsx b/src/components/DcCharts/chart-pie/configurator.tsx index 2dda302f..f5f6a0f7 100644 --- a/src/components/DcCharts/chart-pie/configurator.tsx +++ b/src/components/DcCharts/chart-pie/configurator.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Checkbox } from '@terminus/nusi'; +import { Checkbox } from 'antd'; import produce from 'immer'; import { CommonConfigurator } from '../common'; import ChartEditorStore from '../../../stores/chart-editor'; diff --git a/src/components/DcCharts/chart-table/index.tsx b/src/components/DcCharts/chart-table/index.tsx index 3a95e6ae..797bb9fa 100644 --- a/src/components/DcCharts/chart-table/index.tsx +++ b/src/components/DcCharts/chart-table/index.tsx @@ -2,8 +2,8 @@ * 数据表格 */ import React, { useCallback } from 'react'; -import { Table } from '@terminus/nusi'; -import { map, get, find } from 'lodash'; +import { Table } from 'antd'; +import { map, get } from 'lodash'; interface IProps { results: Array<{ [k: string]: any }>; diff --git a/src/components/DcCharts/common/chart-mask/index.tsx b/src/components/DcCharts/common/chart-mask/index.tsx index 47795ce0..1f6ec809 100644 --- a/src/components/DcCharts/common/chart-mask/index.tsx +++ b/src/components/DcCharts/common/chart-mask/index.tsx @@ -1,4 +1,4 @@ -import { Spin } from '@terminus/nusi'; +import { Spin } from 'antd'; import React from 'react'; import './index.scss'; diff --git a/src/components/DcContainer/index.tsx b/src/components/DcContainer/index.tsx index 856cc942..a213f8b5 100644 --- a/src/components/DcContainer/index.tsx +++ b/src/components/DcContainer/index.tsx @@ -5,8 +5,7 @@ * @Last Modified time: 2021-04-22 14:07:06 */ import React, { ReactElement, useRef, useEffect, useCallback } from 'react'; -import { Toast } from '@terminus/nusi'; -import { Button, Tooltip, Select } from 'antd'; +import { Button, Tooltip, Select, message } from 'antd'; import classnames from 'classnames'; import { isEmpty, get, isFunction, reduce, isString, map, merge } from 'lodash'; import { useUpdate, DcIcon, DcEmpty } from '../../common'; @@ -140,7 +139,7 @@ const DcContainer: React.FC = ({ }) .catch((err) => { if (err.status === 400) { - Toast.warning(textMap['config err'], 1); + message.warning(textMap['config err'], 1); update({ resData: undefined, fetchStatus: FetchStatus.SUCCESS, diff --git a/src/components/DcContainer/options.tsx b/src/components/DcContainer/options.tsx index a2c1b5de..9e2174ce 100644 --- a/src/components/DcContainer/options.tsx +++ b/src/components/DcContainer/options.tsx @@ -6,7 +6,7 @@ */ import React, { useCallback, useEffect, useMemo, RefObject, ReactNode, memo } from 'react'; -import { Dropdown, Menu, Modal } from 'antd'; +import { Dropdown, Menu, Modal, message } from 'antd'; import { get } from 'lodash'; import { useFullscreen, useToggle } from 'react-use'; import { getConfig } from '../../config'; @@ -92,7 +92,7 @@ const Options = ({ view, viewId, viewRef, children, disabled = false, toggleFull }; if (metricName) { - const _exportingData = Toast.loading(textMap['exporting data'], 0); + const _exportingData = message.loading(textMap['exporting data'], 0); toggleExportingDataStatus(); exportChartData(metricName, _query, payload).then((res: Blob) => { const blob = new Blob([res]); @@ -109,7 +109,7 @@ const Options = ({ view, viewId, viewRef, children, disabled = false, toggleFull _exportingData(); toggleExportingDataStatus(); }).catch(() => { - Toast.error(textMap['export data error']); + message.error(textMap['export data error']); _exportingData(); toggleExportingDataStatus(); }); diff --git a/src/components/DcGlobalFilters/config-modal.tsx b/src/components/DcGlobalFilters/config-modal.tsx index 740c4615..4c7777e7 100644 --- a/src/components/DcGlobalFilters/config-modal.tsx +++ b/src/components/DcGlobalFilters/config-modal.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Title, Toast } from '@terminus/nusi'; -import { Button, Tooltip, Input, Dropdown, Menu, Tabs, Modal } from 'antd'; +import { Title } from '@terminus/nusi'; +import { Button, Tooltip, Input, Dropdown, Menu, Tabs, Modal, message } from 'antd'; import { useImmer } from 'use-immer'; import { remove, find, findIndex, map } from 'lodash'; import { DcIcon, DcInfoIcon } from '../../common'; @@ -9,7 +9,8 @@ import DashboardStore, { TextType } from '../../stores/dash-board'; import GlobalFiltersStore from '../../stores/global-filters'; import './config-modal.scss'; -import { IconType } from '@terminus/nusi/es/notification'; + +type IconType = 'success' | 'info' | 'error' | 'warning'; interface FilterOption { icon?: IconType; @@ -159,7 +160,7 @@ export const ConfigGlobalFiltersModal = () => { onChange(e: React.FocusEvent) { const val = e.target.value; if (!val) { - Toast.warning('筛选项名称不能为空！'); + message.warning('筛选项名称不能为空！'); updateFilter(key, { name }); return; } diff --git a/src/components/DcGlobalFilters/filter-component/TimeSelector/index.tsx b/src/components/DcGlobalFilters/filter-component/TimeSelector/index.tsx index 6d9bff7d..d378fab4 100644 --- a/src/components/DcGlobalFilters/filter-component/TimeSelector/index.tsx +++ b/src/components/DcGlobalFilters/filter-component/TimeSelector/index.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { DatePicker } from '@terminus/nusi'; +import { DatePicker } from 'antd'; import moment, { Moment } from 'moment'; import { getTimeRanges, getTimeSpan, ITimeSpan } from './utils'; diff --git a/src/components/DcGlobalFilters/filter-component/index.tsx b/src/components/DcGlobalFilters/filter-component/index.tsx index d6087eb4..fa2ded67 100644 --- a/src/components/DcGlobalFilters/filter-component/index.tsx +++ b/src/components/DcGlobalFilters/filter-component/index.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import TimeSelector from './TimeSelector'; -import { Search } from '@terminus/nusi'; - +import { Input } from 'antd'; import './index.scss'; +const { Search } = Input; + type IProps = Merge<{ className: string; onChange: (val: any) => void; @@ -23,7 +24,6 @@ const FilterComp = ({ className, type, label, placeholder, defaultValue, onChang {}} /> diff --git a/src/utils/comp.ts b/src/utils/comp.ts index 43f00447..821ddf6a 100644 --- a/src/utils/comp.ts +++ b/src/utils/comp.ts @@ -2,7 +2,7 @@ /* eslint-disable no-unused-vars */ // import { forEach, replace } from 'lodash'; import domtoimage from 'dom-to-image'; -import { Toast } from '@terminus/nusi'; +import { message as Toast } from 'antd'; import DashboardStore from '../stores/dash-board'; export const formItemLayout = { From 8adf93c9dd8ae7ff9b98f59d121e561c01b2265e Mon Sep 17 00:00:00 2001 From: sherotree Date: Sun, 8 Aug 2021 21:53:00 +0800 Subject: [PATCH 08/10] refactor: localize antd --- src/components/DcBoard/index.tsx | 50 +++++++++------- src/components/DcBoard/pure-board.tsx | 60 ++++++++++--------- .../create-filter-modal.tsx | 1 + .../data-config/dice-form/index.tsx | 1 + src/utils/locale.ts | 4 ++ 5 files changed, 64 insertions(+), 52 deletions(-) create mode 100644 src/utils/locale.ts diff --git a/src/components/DcBoard/index.tsx b/src/components/DcBoard/index.tsx index d69e26bf..7b5d510a 100644 --- a/src/components/DcBoard/index.tsx +++ b/src/components/DcBoard/index.tsx @@ -5,6 +5,7 @@ * @Last Modified time: 2021-03-03 20:38:30 */ import React, { useRef, useEffect } from 'react'; +import { ConfigProvider } from 'antd'; import classnames from 'classnames'; import { isFunction } from 'lodash'; import 'react-grid-layout/css/styles.css'; @@ -24,7 +25,8 @@ import ChartEditorStore from '../../stores/chart-editor'; import '../../static/iconfont.js'; import '../../static/iconfont.css'; import './index.scss'; - +import DashboardStore from '../../stores/dash-board'; +import { localeMap } from '../../utils/locale'; const DcBoard = ({ timeSpan, @@ -42,7 +44,7 @@ const DcBoard = ({ const boardRef = useRef(null); const boardContentRef = useRef(null); const _onEditorToggle = useRef(onEditorToggle); - + const locale = DashboardStore.getState((s) => s.locale); const [isEditMode, editChartId] = ChartEditorStore.useStore((s) => [s.isEditMode, s.editChartId]); const { reset: resetDrawer, updateState, updateEditorContextMap } = ChartEditorStore; const chartEditorVisible = !!editChartId; @@ -72,9 +74,10 @@ const DcBoard = ({ }, [APIFormComponent, updateEditorContextMap]); return ( -
+
- -
- -
- {gridWidthHolder} - + > + +
+ +
+ {gridWidthHolder} + +
+ +
- - -
+ ); }; diff --git a/src/components/DcBoard/pure-board.tsx b/src/components/DcBoard/pure-board.tsx index 7c0fe924..872d24ef 100644 --- a/src/components/DcBoard/pure-board.tsx +++ b/src/components/DcBoard/pure-board.tsx @@ -4,7 +4,8 @@ * @Last Modified by: licao * @Last Modified time: 2021-02-26 14:22:59 */ -import React, { useRef, useEffect } from 'react'; +import { ConfigProvider } from 'antd'; +import React, { useRef } from 'react'; import classnames from 'classnames'; import { isEmpty } from 'lodash'; import DC from 'src/types'; @@ -12,9 +13,8 @@ import PureBoardGrid from './pure-grid'; import { useComponentWidth, DcEmpty } from '../../common'; import DashboardHeader from './pure-header'; import DashboardStore from '../../stores/dash-board'; - import './index.scss'; - +import { localeMap } from '../../utils/locale'; const PureDashboard = ({ name, @@ -23,45 +23,47 @@ const PureDashboard = ({ globalVariable, onBoardEvent, }: DC.PureBoardGridProps) => { - const textMap = DashboardStore.getState((s) => s.textMap); + const [textMap, locale] = DashboardStore.getState((s) => [s.textMap, s.locale]); const boardRef = useRef(null); const boardContentRef = useRef(null); const [gridWidthHolder, gridWidth] = useComponentWidth(); return ( -
+
- - - -
- -
- {gridWidthHolder} - + + + +
+ +
+ {gridWidthHolder} + +
-
+ ); }; diff --git a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-filter-modal.tsx b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-filter-modal.tsx index 55e1d473..064fd1ea 100644 --- a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-filter-modal.tsx +++ b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-filter-modal.tsx @@ -25,6 +25,7 @@ interface IFilterInputProps { const FilterInput = ({ value, onChange, fieldType, options }: IFilterInputProps) => ( { min={1} precision={0} size="small" + style={{ width: 160 }} onChange={(v) => onChange({ ...value, value: v })} /> handleTriggerAction(key, actionType, option)} > handleRemoveDimension(key)} > @@ -291,7 +290,7 @@ const DimensionsConfigurator = ({ } toggleSelectVisible(); }} - style={{ lineHeight: '22px', alignSelf: 'start', background: '#ffffff', border: '#6a549e solid 1px', color: '#6a549e' }} + className="dimensions-config-tag" > {addText || textMap.add}