Feature: use antd to replace nusi

example/app.css

@@ -0,0 +1 @@
+@import '~antd/dist/antd.css';

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() {
     <div style={{ padding: '20px' }}>
       <div style={{ marginBottom: '20px' }}>
         语言：
-        <button onClick={() => setLocale('zh')}>中文</button>
-        <button onClick={() => setLocale('en')}>English</button>
+        <Button className="mr12" onClick={() => setLocale('zh')}>中文</Button>
+        <Button className="mr12" onClick={() => setLocale('en')}>English</Button>
         主题：
-        <button onClick={() => setTheme('dice')}>Dice</button>
-        <button onClick={() => setTheme('dark')}>Dark</button>
+        <Button className="mr12" onClick={() => setTheme('dice')}>Dice</Button>
+        <Button className="mr12" onClick={() => setTheme('dark')}>Dark</Button>
       </div>
       <BoardGrid layout={layout} onSave={(saveLayout) => { console.log(saveLayout); }} />
       <PureBoardGrid layout={layout} showOptions />
-      {/* {'>>>>>>>>>>>>>>>>>>>>>>>>>>>sasasa'}
-      <PureBoardGrid layout={layout2} showOptions /> */}
     </div>
   );
 }

example/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Input } from '@terminus/nusi';
+import { Input } from 'antd';
 import { registDataConvertor, registControl, registChartOption, registTheme } from '../src';
 import { ajaxConvertor } from './mock/ajax-data';
 import { darkTheme } from './theme';

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",

src/common/DcEmpty/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Empty } from '@terminus/nusi';
+import { Empty } from 'antd';
 
 interface IProps {
   condition?: any;

src/common/DcFormModal/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { Modal } from '@terminus/nusi';
+import { Modal } from 'antd';
 import { DcFormBuilder } from '..';
 
 interface IProps {
@@ -22,7 +22,6 @@ const DcFormModal = ({ title, visible, fields, onCancel, onOk }: IProps) => {
 
   return (
     <Modal
-      size="small"
       destroyOnClose
       title={title}
       visible={visible}

src/common/DcIcon/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classnames from 'classnames';
-import { Tooltip } from '@terminus/nusi';
+import { Tooltip } from 'antd';
 
 import './index.scss';
 

src/common/DcInfoLabel/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tooltip } from '@terminus/nusi';
+import { Tooltip } from 'antd';
 import { DcIcon } from '..';
 
 interface IProps {

src/common/utils/get-tsx.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tooltip } from '@terminus/nusi';
+import { Tooltip } from 'antd';
 
 export function wrapWithTooltip(title: string, children: string, key?: string) {
   const k = key ? { key } : {};

src/common/utils/str-num-date.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tooltip} from '@terminus/nusi'
+import { Tooltip } from 'antd';
 
 interface ICutOptions {
   suffix?: string;

src/components/DcBoard/header.tsx

@@ -5,7 +5,7 @@
  * @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 { Button, Tooltip } from 'antd';
 import { useFullscreen, useToggle } from 'react-use';
 import DC from 'src/types';
 import { DcIcon } from '../../common';
@@ -173,9 +173,7 @@ const DashboardHeader = ({
       </When>
       <Otherwise>
         <Tooltip title={text} key={icon}>
-          <Button type={btnType || 'text'} onClick={onClick}>
-            <DcIcon type={icon} />
-          </Button>
+          <Button type={btnType || 'default'} onClick={onClick} icon={<DcIcon type={icon} />} />
         </Tooltip>
       </Otherwise>
     </Choose>

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<HTMLDivElement>(null);
   const boardContentRef = useRef<HTMLDivElement>(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,36 +74,38 @@ const DcBoard = ({
   }, [APIFormComponent, updateEditorContextMap]);
 
   return (
-    <div
-      ref={boardRef}
-      className={
+    <ConfigProvider locale={localeMap[locale]}>
+      <div
+        ref={boardRef}
+        className={
         classnames({
           'dc-dashboard': true,
           'dark-border': true,
           'v-flex-box': true,
           active: isEditMode,
         })
       }
-    >
-      <DashboardHeader
-        wrapRef={boardRef}
-        contentRef={boardContentRef}
-        dashboardName={name}
-        afterEdit={onEdit}
-        beforeSave={beforeOnSave}
-        onSave={onSave}
-        onCancel={onCancel}
-      />
-      <div ref={boardContentRef} className="dc-dashboard-content flex-1 v-flex-box">
-        <GlobalFilters id={id} />
-        <div className="dc-dashboard-grid-wp flex-1">
-          {gridWidthHolder}
-          <BoardGrid width={gridWidth} layout={layout} globalVariable={globalVariable} />
+      >
+        <DashboardHeader
+          wrapRef={boardRef}
+          contentRef={boardContentRef}
+          dashboardName={name}
+          afterEdit={onEdit}
+          beforeSave={beforeOnSave}
+          onSave={onSave}
+          onCancel={onCancel}
+        />
+        <div ref={boardContentRef} className="dc-dashboard-content flex-1 v-flex-box">
+          <GlobalFilters id={id} />
+          <div className="dc-dashboard-grid-wp flex-1">
+            {gridWidthHolder}
+            <BoardGrid width={gridWidth} layout={layout} globalVariable={globalVariable} />
+          </div>
         </div>
+        <ConfigGlobalFiltersModal />
+        <DcChartEditor />
       </div>
-      <ConfigGlobalFiltersModal />
-      <DcChartEditor />
-    </div>
+    </ConfigProvider>
   );
 };
 

src/components/DcBoard/pure-board.tsx

@@ -4,17 +4,17 @@
  * @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';
 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<HTMLDivElement>(null);
   const boardContentRef = useRef<HTMLDivElement>(null);
   const [gridWidthHolder, gridWidth] = useComponentWidth();
 
   return (
-    <div
-      ref={boardRef}
-      className={
+    <ConfigProvider locale={localeMap[locale]}>
+      <div
+        ref={boardRef}
+        className={
         classnames({
           'dc-dashboard': true,
           'dark-border': true,
           'v-flex-box': true,
         })}
-    >
-      <If condition={showOptions}>
-        <DashboardHeader
-          wrapRef={boardRef}
-          contentRef={boardContentRef}
-          dashboardName={name}
-        />
-      </If>
-      <div ref={boardContentRef} className="dc-dashboard-content flex-1 v-flex-box">
-        <DcEmpty
-          className="flex-1"
-          description={textMap['no data']}
-          condition={isEmpty(layout) || gridWidth === Infinity}
-        />
-        <div className="dc-dashboard-grid-wp">
-          {gridWidthHolder}
-          <PureBoardGrid
-            width={gridWidth}
-            layout={layout}
-            globalVariable={globalVariable}
-            onBoardEvent={onBoardEvent}
+      >
+        <If condition={showOptions}>
+          <DashboardHeader
+            wrapRef={boardRef}
+            contentRef={boardContentRef}
+            dashboardName={name}
+          />
+        </If>
+        <div ref={boardContentRef} className="dc-dashboard-content flex-1 v-flex-box">
+          <DcEmpty
+            className="flex-1"
+            description={textMap['no data']}
+            condition={isEmpty(layout) || gridWidth === Infinity}
           />
+          <div className="dc-dashboard-grid-wp">
+            {gridWidthHolder}
+            <PureBoardGrid
+              width={gridWidth}
+              layout={layout}
+              globalVariable={globalVariable}
+              onBoardEvent={onBoardEvent}
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </ConfigProvider>
   );
 };
 

src/components/DcBoard/pure-header.tsx

@@ -5,7 +5,7 @@
  * @Last Modified time: 2020-12-25 16:28:17
  */
 import React, { RefObject, useEffect, useCallback, useMemo } from 'react';
-import { Button, Tooltip } from '@terminus/nusi';
+import { Tooltip, Button } from 'antd';
 import { useFullscreen, useToggle } from 'react-use';
 import { DcIcon } from '../../common';
 import { insertWhen } from '../../common/utils';

src/components/DcBoard/types/header.d.ts

@@ -2,7 +2,7 @@ declare namespace DC_BOARD_HEADER {
   interface Tool {
     icon: DcIconType;
     text?: string;
-    btnType?: 'primary' | 'text' | 'warning' | 'secondary' | 'normal';
+    btnType?: 'default' | 'primary' | 'ghost' | 'dashed' | 'link' | 'text';
     customRender?: () => JSX.Element;
     onClick?: () => any;
   }

src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-alias-modal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { map } from 'lodash';
-import { Input, Select, Col } from '@terminus/nusi';
+import { Select, Input, Col } from 'antd';
 import { DcFormModal } from '../../../../../common';
 import DashboardStore from '../../../../../stores/dash-board';
 import { unitInfMap } from '../constants';
@@ -17,6 +17,7 @@ const UnitConfig = ({ value, onChange, size }: { value?: DICE_DATA_CONFIGURATOR.
           allowClear
           value={type}
           size={size}
+          className="field-config-select"
           options={map(unitInfMap(textMap), (item) => ({ label: item.name, value: item.value }))}
           onChange={(v) => onChange({ ...value, type: v, unit: unitInfMap(textMap)[v]?.defaultUnit })}
         />

src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-expr-modal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Input } from '@terminus/nusi';
+import { Input } from 'antd';
 import { DcFormModal } from '../../../../../common';
 import DashboardStore from '../../../../../stores/dash-board';
 

src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-filter-modal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { map, isUndefined } from 'lodash';
-import { Input, InputNumber, Select, Switch } from '@terminus/nusi';
+import { Select, Input, InputNumber, Switch } from 'antd';
 import { DcFormModal } from '../../../../../common';
 import DashboardStore from '../../../../../stores/dash-board';
 
@@ -25,6 +25,7 @@ interface IFilterInputProps {
 const FilterInput = ({ value, onChange, fieldType, options }: IFilterInputProps) => (
   <InputGroup compact size="small">
     <Select
+      style={{ minWidth: 120, maxWidth: 320 }}
       allowClear
       value={value?.operation}
       size="small"