refactor: support Basic UI extend using modifyBasicUI for Bigfi… (umi…

…js#3489) * refactor: use Bigfish using extend API * feat: support UmiUI baseUI register service * feat: export Umi UI * fix: remove default service * fix: use from process.env * fix: console * feat: set project current api * feat: plugin use service register to divide bigfish and umi * feat: ts support * fix: remove Map object because of the Types * fix: .length undefined * fix: plugins * fix: uiPlugins * fix: fork build plugin * feat: add api.DirectoryForm api * feat: api.StepForm api * fix: istep form * fix: test case * fix: jest @tmp/history * refactor: ui:build * Update ui.js * reset: umijs#3521 history use lib module
littlee · Oct 31, 2019 · 7de9c97 · 7de9c97
1 parent cd85229
commit 7de9c97
Show file tree

Hide file tree

Showing 45 changed files with 722 additions and 260 deletions.
diff --git a/docs/plugin/umi-ui.md b/docs/plugin/umi-ui.md
@@ -496,6 +496,84 @@ export default (api) => {
 
 more usage see the [docs](https://xtermjs.org/docs/)
 
+### api.DirectoryForm
+
+Directory selector form control
+
+parameters are as follows:
+
+```js
+interface IDirectoryForm {
+  /** path, default  */
+  value?: string;
+  onChange?: (value: string) => void;
+}
+```
+
+For example:
+
+```js
+import React from 'react';
+import { Form } from 'antd';
+
+export default () => {
+  const [form] = Form.useForm();
+  return (
+    <Form
+      form={form}
+      onFinish={values => {
+        console.log('values', values)
+      }}
+      initialValues={{
+        baseDir: cwd,
+      }}
+    >
+      <Form.Item
+        label={null}
+        name="baseDir"
+        rules={[
+          {
+            validator: async (rule, value) => {
+              await validateDirPath(value);
+            },
+          },
+        ]}
+      >
+        <DirectoryForm />
+      </Form.Item>
+    </Form>
+  )
+}
+```
+
+![image](https://user-images.githubusercontent.com/13595509/67653846-34e70500-f986-11e9-81be-16a9ac219cde.png)
+
+### api.StepForm
+
+Step Form Component
+
+For example:
+
+```js
+<StepForm onFinish={handleSubmit} className={stepCls}>
+  <StepForm.StepItem title="a-form">
+    <Form>
+      <Form.Item name="a">
+        <input />
+      </Form.Item>
+    </Form>
+  </StepForm.StepItem>
+
+  <StepForm.StepItem title="b-form">
+    <Form>
+      <Form.Item name="b">
+        <input />
+      </Form.Item>
+    </Form>
+  </StepForm.StepItem>
+</StepForm>
+```
+
 ### api.Field
 
 Configure form components, used in combination with [antd 4.x](https://4-0-prepare--ant-design.netlify.com/components/form-cn/) to simplify form components and generate forms using profiles .

diff --git a/docs/zh/plugin/umi-ui.md b/docs/zh/plugin/umi-ui.md
@@ -496,6 +496,83 @@ export default (api) => {
 
 终端更多用法见 [文档](https://xtermjs.org/docs/)
 
+### api.DirectoryForm
+
+目录选择表单控件
+
+参数如下：
+
+```js
+interface IDirectoryForm {
+  /** path, default  */
+  value?: string;
+  onChange?: (value: string) => void;
+}
+```
+
+示例：
+
+```js
+import React from 'react';
+import { Form } from 'antd';
+
+export default () => {
+  const [form] = Form.useForm();
+  return (
+    <Form
+      form={form}
+      onFinish={values => {
+        console.log('values', values)
+      }}
+      initialValues={{
+        baseDir: cwd,
+      }}
+    >
+      <Form.Item
+        label={null}
+        name="baseDir"
+        rules={[
+          {
+            validator: async (rule, value) => {
+              await validateDirPath(value);
+            },
+          },
+        ]}
+      >
+        <DirectoryForm />
+      </Form.Item>
+    </Form>
+  )
+}
+```
+
+![image](https://user-images.githubusercontent.com/13595509/67653846-34e70500-f986-11e9-81be-16a9ac219cde.png)
+
+### api.StepForm
+
+步骤表单组件
+
+使用示例：
+
+```js
+<StepForm onFinish={handleSubmit} className={stepCls}>
+  <StepForm.StepItem title="a-form">
+    <Form>
+      <Form.Item name="a">
+        <input />
+      </Form.Item>
+    </Form>
+  </StepForm.StepItem>
+
+  <StepForm.StepItem title="b-form">
+    <Form>
+      <Form.Item name="b">
+        <input />
+      </Form.Item>
+    </Form>
+  </StepForm.StepItem>
+</StepForm>
+```
 
 ### api.Field
 

diff --git a/jest.config.js b/jest.config.js
@@ -9,6 +9,7 @@ module.exports = {
       : [`${testMatchPrefix}/?*.(spec|test|e2e).(j|t)s?(x)`],
   moduleNameMapper: {
     '^umi/_runtimePlugin$': require.resolve('./packages/umi/lib/runtimePlugin'),
+    '^@tmp/history': require.resolve('./packages/umi/lib/createHistory'),
   },
   testPathIgnorePatterns: [
     '/.git/',

diff --git a/package.json b/package.json
@@ -24,8 +24,9 @@
     ]
   },
   "devDependencies": {
-    "@types/jest": "^24.0.5",
     "@babel/preset-typescript": "7.3.3",
+    "@types/jest": "^24.0.5",
+    "@types/signale": "^1.2.1",
     "babel-eslint": "10.0.1",
     "chokidar": "3.0.1",
     "cross-spawn": "^6.0.5",
@@ -57,6 +58,7 @@
     "serve-handler": "5.0.8",
     "serve-static": "^1.13.2",
     "shelljs": "0.8.3",
+    "signale": "^1.4.0",
     "slash2": "2.0.0",
     "stringify-object": "3.3.0",
     "test-build-result": "^1.1.2"

diff --git a/packages/umi-build-dev/src/plugins/history.js b/packages/umi-build-dev/src/plugins/history.js
@@ -50,9 +50,9 @@ export default function(api) {
 
     if (historyType === 'hash') {
       const hashOpts = JSON.stringify({ basename: config.base || '/', ...opts } || {});
-      return `require('history/es/createHashHistory').default(${hashOpts})`;
+      return `require('history/createHashHistory').default(${hashOpts})`;
     } else if (historyType === 'memory') {
-      return `require('history/es/createMemoryHistory').default({ initialEntries: window.g_initialEntries })`;
+      return `require('history/createMemoryHistory').default({ initialEntries: window.g_initialEntries })`;
     }
     return memo;
   });

diff --git a/packages/umi-plugin-ui/src/plugins/configuration/ui.tsx b/packages/umi-plugin-ui/src/plugins/configuration/ui.tsx
@@ -5,10 +5,10 @@ import ConfigManager from './ui/index';
 import zhCN from './locales/zh-CN';
 import enUS from './locales/en-US';
 
-export default (api: IUiApi) => {
+const ConfigAction = ({ api }: { api: IUiApi }) => {
   const { intl } = api;
   const { FormattedMessage } = intl;
-  const ConfigAction = () => (
+  return (
     <Button
       onClick={() => {
         api.launchEditor({
@@ -21,15 +21,17 @@ export default (api: IUiApi) => {
       <FormattedMessage id="org.umi.ui.configuration.actions.open.config" />
     </Button>
   );
+};
 
+export default (api: IUiApi) => {
   api.addLocales({
     'zh-CN': zhCN,
     'en-US': enUS,
   });
 
   api.addPanel({
     title: 'org.umi.ui.configuration.panel',
-    actions: [ConfigAction],
+    actions: [<ConfigAction api={api} />],
     path: '/configuration',
     icon: {
       type: 'control',

diff --git a/packages/umi-plugin-ui/src/plugins/configuration/ui/index.tsx b/packages/umi-plugin-ui/src/plugins/configuration/ui/index.tsx
@@ -8,7 +8,8 @@ interface IConfigManager {
 }
 
 function getSections(api: IUiApi) {
-  const { ConfigForm } = api;
+  const { ConfigForm, getBasicUI } = api;
+  const basicUI = getBasicUI();
   const sections = [
     {
       key: 'project',
@@ -26,7 +27,7 @@ function getSections(api: IUiApi) {
             id: 'org.umi.ui.configuration.project.config.desc',
           },
           {
-            library: api.bigfish ? 'Bigfish' : 'Umi',
+            library: basicUI.name || 'Umi',
           },
         ),
       component: () => (

diff --git a/packages/umi-plugin-ui/src/plugins/dashboard/ui.tsx b/packages/umi-plugin-ui/src/plugins/dashboard/ui.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button, Drawer } from 'antd';
+import { Setting } from '@ant-design/icons';
 import { IUiApi } from 'umi-types';
 import Dashboard from './ui/index';
 import zhCN from './locales/zh-CN';
@@ -8,7 +9,7 @@ import enUS from './locales/en-US';
 export default (api: IUiApi) => {
   const { intl } = api;
   const { FormattedMessage } = intl;
-  const ConfigAction = () => (
+  const ConfigAction = ({ api }) => (
     <Button
       onClick={() => {
         api.launchEditor({
@@ -28,7 +29,7 @@ export default (api: IUiApi) => {
   api.addPanel({
     title: 'org.umi.ui.dashboard.panel',
     path: '/dashboard',
-    actions: api.mini ? [] : [ConfigAction],
+    actions: api.mini ? [] : [<ConfigAction api={api} />],
     icon: {
       type: 'dashboard',
       theme: 'filled',

diff --git a/packages/umi-plugin-ui/src/plugins/dashboard/ui/index.tsx b/packages/umi-plugin-ui/src/plugins/dashboard/ui/index.tsx
@@ -16,15 +16,11 @@ const DashboardUI: React.FC<IProps> = props => {
   const isClosed = window.localStorage.getItem('umi_ui_dashboard_welcome') || false;
   const [closed, setClosed] = useState<boolean>(!!isClosed);
   const { api } = props;
-  const { redirect, currentProject, _, intl } = api;
+  const { redirect, currentProject, _, intl, getBasicUI } = api;
   const { FormattedMessage } = intl;
   const actionCardCls = cls(styles.card, styles['card-action']);
   const welcomeCardCls = cls(styles.card, styles.welcome);
-
-  const handleClose = () => {
-    setClosed(true);
-    window.localStorage.setItem('umi_ui_dashboard_welcome', 'true');
-  };
+  const basicUI = getBasicUI();
 
   const actionCards = [
     {
@@ -93,29 +89,10 @@ const DashboardUI: React.FC<IProps> = props => {
             )}
           </p>
           <div>
-            {window.g_bigfish ? (
-              <>
-                <a
-                  href="https://umijs.org/guide/umi-ui.html"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Bigfish UI
-                </a>
-                {intl({ id: 'org.umi.ui.dashboard.panel.welcome.bigfish.desc' })}
-              </>
-            ) : (
-              <>
-                <a
-                  href="https://umijs.org/guide/umi-ui.html"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Umi UI
-                </a>
-                {intl({ id: 'org.umi.ui.dashboard.panel.welcome.bigfish.desc' })}
-              </>
-            )}
+            <a href="https://umijs.org/guide/umi-ui.html" target="_blank" rel="noopener noreferrer">
+              {basicUI.name || 'Umi'} UI
+            </a>
+            {intl({ id: 'org.umi.ui.dashboard.panel.welcome.desc' })}
           </div>
         </div>
       ),

diff --git a/packages/umi-types/index.d.ts b/packages/umi-types/index.d.ts
@@ -302,7 +302,7 @@ interface IOnPatchRoute {
 interface IAction<T = object> {
   type: string;
   payload?: T;
-  lang?: string;
+  lang?: IUi.ILang;
 }
 
 export type ISend = (action: IAction<{}>) => void;
@@ -323,7 +323,7 @@ export interface IOnUISocketFunc {
   ): void;
 }
 
-interface IOnUISocket {
+export interface IOnUISocket {
   (fn: IOnUISocketFunc): void;
 }