chore: use dumi (#145)

xrkffgg · web-flow · commit 8dc3510c8b64 · 2021-04-14T15:52:51.000+08:00
* chore: use dumi

* fix lint
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,9 @@ lib
 es
 yarn.lock
 package-lock.json
+# umi
+.umi
+.umi-production
+.umi-test
+.env.local
+.doc
diff --git a/.umirc.gh.ts b/.umirc.gh.ts
@@ -0,0 +1,4 @@
+export default {
+  base: '/cascader/',
+  publicPath: '/cascader/',
+};
diff --git a/.umirc.ts b/.umirc.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  title: 'rc-cascader',
+  favicon:
+    'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  logo:
+    'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  exportStatic: {},
+  outputPath: '.doc',
+  resolve: {
+    examples: ['none'],
+  },
+  styles: [
+    `
+      .markdown table {
+        width: auto !important;
+      }
+    `,
+  ]
+});
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,5 @@
 # History
 
----
-
 ## 0.17.0 / 2018/12/14
 
 - should close popup on double click when changeOnSelect is set
diff --git a/README.md b/README.md
@@ -1,15 +1,8 @@
 # rc-cascader
 
----
-
 React Cascader Component
 
-[![NPM version][npm-image]][npm-url]
-[![build status][github-actions-image]][github-actions-url]
-[![Test coverage][codecov-image]][codecov-url]
-[![Dependencies](https://img.shields.io/david/react-component/cascader.svg?style=flat-square)](https://david-dm.org/react-component/cascader)
-[![DevDependencies](https://img.shields.io/david/dev/react-component/cascader.svg?style=flat-square)](https://david-dm.org/react-component/cascader?type=dev)
-[![npm download][download-image]][download-url]
+[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][codecov-image]][codecov-url] [![Dependencies](https://img.shields.io/david/react-component/cascader.svg?style=flat-square)](https://david-dm.org/react-component/cascader) [![DevDependencies](https://img.shields.io/david/dev/react-component/cascader.svg?style=flat-square)](https://david-dm.org/react-component/cascader?type=dev) [![npm download][download-image]][download-url]
 
 [npm-image]: http://img.shields.io/npm/v/rc-cascader.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-cascader
diff --git a/docs/demo/adjust-overflow.md b/docs/demo/adjust-overflow.md
@@ -0,0 +1,3 @@
+## adjust-overflow
+
+<code src="../../examples/adjust-overflow.jsx">
diff --git a/docs/demo/animation.md b/docs/demo/animation.md
@@ -0,0 +1,3 @@
+## animation
+
+<code src="../../examples/animation.jsx">
diff --git a/docs/demo/change-on-select.md b/docs/demo/change-on-select.md
@@ -0,0 +1,3 @@
+## change-on-select
+
+<code src="../../examples/change-on-select.jsx">
diff --git a/docs/demo/custom-arrow-icon.md b/docs/demo/custom-arrow-icon.md
@@ -0,0 +1,3 @@
+## custom-arrow-icon
+
+<code src="../../examples/custom-arrow-icon.jsx">
diff --git a/docs/demo/custom-field-name.md b/docs/demo/custom-field-name.md
@@ -0,0 +1,3 @@
+## custom-field-name
+
+<code src="../../examples/custom-field-name.jsx">
diff --git a/docs/demo/default-expand-single-option.md b/docs/demo/default-expand-single-option.md
@@ -0,0 +1,3 @@
+## default-expand-single-option
+
+<code src="../../examples/default-expand-single-option.jsx">
diff --git a/docs/demo/defaultValue.md b/docs/demo/defaultValue.md
@@ -0,0 +1,3 @@
+## defaultValue
+
+<code src="../../examples/defaultValue.jsx">
diff --git a/docs/demo/disabled.md b/docs/demo/disabled.md
@@ -0,0 +1,3 @@
+## disabled
+
+<code src="../../examples/disabled.jsx">
diff --git a/docs/demo/dropdown-render.md b/docs/demo/dropdown-render.md
@@ -0,0 +1,3 @@
+## dropdown-render
+
+<code src="../../examples/dropdown-render.jsx">
diff --git a/docs/demo/dynamic-options.md b/docs/demo/dynamic-options.md
@@ -0,0 +1,3 @@
+## dynamic-options
+
+<code src="../../examples/dynamic-options.jsx">
diff --git a/docs/demo/hover.md b/docs/demo/hover.md
@@ -0,0 +1,3 @@
+## hover
+
+<code src="../../examples/hover.jsx">
diff --git a/docs/demo/rc-form.md b/docs/demo/rc-form.md
@@ -0,0 +1,3 @@
+## rc-form
+
+<code src="../../examples/rc-form.jsx">
diff --git a/docs/demo/simple.md b/docs/demo/simple.md
@@ -0,0 +1,3 @@
+## simple
+
+<code src="../../examples/simple.jsx">
diff --git a/docs/demo/text-trigger.md b/docs/demo/text-trigger.md
@@ -0,0 +1,3 @@
+## text-trigger
+
+<code src="../../examples/text-trigger.jsx">
diff --git a/docs/demo/value.md b/docs/demo/value.md
@@ -0,0 +1,3 @@
+## value
+
+<code src="../../examples/value.jsx">
diff --git a/docs/demo/visible.md b/docs/demo/visible.md
@@ -0,0 +1,3 @@
+## visible
+
+<code src="../../examples/visible.jsx">
diff --git a/docs/index.md b/docs/index.md
@@ -0,0 +1,5 @@
+---
+title: rc-cascader
+---
+
+<embed src="../README.md"></embed>
diff --git a/examples/adjust-overflow.jsx b/examples/adjust-overflow.jsx
diff --git a/examples/animation.jsx b/examples/animation.jsx
diff --git a/examples/change-on-select.jsx b/examples/change-on-select.jsx
diff --git a/examples/custom-arrow-icon.jsx b/examples/custom-arrow-icon.jsx
diff --git a/examples/custom-field-name.jsx b/examples/custom-field-name.jsx
diff --git a/examples/default-expand-single-option.jsx b/examples/default-expand-single-option.jsx
diff --git a/examples/defaultValue.jsx b/examples/defaultValue.jsx
diff --git a/examples/disabled.jsx b/examples/disabled.jsx
diff --git a/examples/dropdown-render.jsx b/examples/dropdown-render.jsx
diff --git a/examples/dynamic-options.jsx b/examples/dynamic-options.jsx
diff --git a/examples/hover.jsx b/examples/hover.jsx
diff --git a/examples/rc-form.jsx b/examples/rc-form.jsx
@@ -1,4 +1,4 @@
-/* eslint-disable no-console, react/no-multi-comp, react/prop-types, react/button-has-type,prefer-destructuring,max-len */
+/* eslint-disable no-console, react/no-multi-comp, react/prop-types, react/button-has-type,prefer-destructuring,max-len, max-classes-per-file */
 import React, { Component } from 'react';
 import { createForm } from 'rc-form';
 import '../assets/index.less';
@@ -59,7 +59,7 @@ const addressOptions = [
 ];
 
 class CascaderInput extends Component {
-  onChange = value => {
+  onChange = (value) => {
     const props = this.props;
     if (props.onChange) {
       props.onChange(value);
@@ -70,7 +70,7 @@ class CascaderInput extends Component {
     const props = this.props;
     const value = props.value || [];
     return arrayTreeFilter(props.options, (o, level) => o.value === value[level])
-      .map(o => o.label)
+      .map((o) => o.label)
       .join(', ');
   }
 
@@ -85,7 +85,7 @@ class CascaderInput extends Component {
 }
 
 class Form extends Component {
-  onSubmit = e => {
+  onSubmit = (e) => {
     const props = this.props;
     const { form } = props;
     e.preventDefault();
diff --git a/examples/simple.jsx b/examples/simple.jsx
diff --git a/examples/text-trigger.jsx b/examples/text-trigger.jsx
diff --git a/examples/value.jsx b/examples/value.jsx
diff --git a/examples/visible.jsx b/examples/visible.jsx
diff --git a/now.json b/now.json
@@ -7,5 +7,8 @@
       "use": "@now/static-build",
       "config": { "distDir": ".doc" }
     }
+  ],
+  "routes": [
+    { "src": "/(.*)", "dest": "/dist/$1" }
   ]
 }
diff --git a/package.json b/package.json
@@ -30,11 +30,12 @@
   "main": "./lib/index",
   "module": "./es/index",
   "scripts": {
-    "start": "cross-env NODE_ENV=development father doc dev --storybook",
-    "build": "father doc build --storybook",
+    "start": "dumi dev",
+    "build": "dumi build",
+    "deploy": "UMI_ENV=gh npm run build && gh-pages -d .doc",
     "compile": "father build",
     "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
-    "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js",
+    "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.jsx",
     "test": "father test",
     "coverage": "father test --coverage",
     "now-build": "npm run build"
@@ -47,10 +48,13 @@
     "@types/react-dom": "^16.8.4",
     "@types/warning": "^3.0.0",
     "cross-env": "^7.0.0",
+    "dumi": "^1.1.12",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.0.2",
     "enzyme-to-json": "^3.2.1",
     "father": "^2.13.2",
+    "gh-pages": "^3.1.0",
+    "glob": "^7.1.6",
     "jest": "^26.0.0",
     "np": "^6.0.0",
     "rc-form": "^2.4.0",
diff --git a/src/Cascader.tsx b/src/Cascader.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import Trigger, { BuildInPlacements, TriggerProps } from 'rc-trigger';
+import type { BuildInPlacements, TriggerProps } from 'rc-trigger';
+import Trigger from 'rc-trigger';
 import warning from 'warning';
 import KeyCode from 'rc-util/lib/KeyCode';
 import arrayTreeFilter from 'array-tree-filter';
@@ -59,7 +60,7 @@ interface CascaderState {
 }
 
 class Cascader extends React.Component<CascaderProps, CascaderState> {
-  defaultFieldNames: object;
+  defaultFieldNames: Record<string, unknown>;
 
   trigger: any;
 
@@ -158,7 +159,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     if (result[result.length - 2]) {
       return result[result.length - 2][this.getFieldName('children')];
     }
-    return [...options].filter(o => !o.disabled);
+    return [...options].filter((o) => !o.disabled);
   }
 
   getActiveOptions(activeValue: CascaderValueType): CascaderOption[] {
@@ -185,7 +186,10 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
 
   handleChange = (options: CascaderOption[], { visible }, e: React.KeyboardEvent<HTMLElement>) => {
     if (e.type !== 'keydown' || e.keyCode === KeyCode.ENTER) {
-      this.props.onChange(options.map(o => o[this.getFieldName('value')]), options);
+      this.props.onChange(
+        options.map((o) => o[this.getFieldName('value')]),
+        options,
+      );
       this.setPopupVisible(visible);
     }
   };
@@ -265,7 +269,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     const currentLevel = activeValue.length - 1 < 0 ? 0 : activeValue.length - 1;
     const currentOptions = this.getCurrentLevelOptions();
     const currentIndex = currentOptions
-      .map(o => o[this.getFieldName('value')])
+      .map((o) => o[this.getFieldName('value')])
       .indexOf(activeValue[currentLevel]);
     if (
       e.keyCode !== KeyCode.DOWN &&
@@ -344,7 +348,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     }
   };
 
-  saveTrigger = node => {
+  saveTrigger = (node) => {
     this.trigger = node;
   };
 
diff --git a/src/Menus.tsx b/src/Menus.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import arrayTreeFilter from 'array-tree-filter';
-import { CascaderOption, CascaderFieldNames } from './Cascader';
+import type { CascaderOption, CascaderFieldNames } from './Cascader';
 
 interface MenusProps {
   value?: (string | number)[];
@@ -22,9 +22,8 @@ interface MenusProps {
   ) => void;
 }
 
-interface MenuItems {
-  [index: number]: HTMLLIElement;
-}
+type MenuItems = Record<number, HTMLLIElement>;
+
 class Menus extends React.Component<MenusProps> {
   menuItems: MenuItems = {};
 
@@ -110,7 +109,7 @@ class Menus extends React.Component<MenusProps> {
         title={title}
         {...expandProps}
         role="menuitem"
-        onMouseDown={e => e.preventDefault()}
+        onMouseDown={(e) => e.preventDefault()}
       >
         {option[this.getFieldName('label')]}
         {expandIconNode}
@@ -132,8 +131,8 @@ class Menus extends React.Component<MenusProps> {
   getShowOptions(): CascaderOption[][] {
     const { options } = this.props;
     const result = this.getActiveOptions()
-      .map(activeOption => activeOption[this.getFieldName('children')])
-      .filter(activeOption => !!activeOption);
+      .map((activeOption) => activeOption[this.getFieldName('children')])
+      .filter((activeOption) => !!activeOption);
     result.unshift(options);
     return result;
   }
@@ -168,7 +167,7 @@ class Menus extends React.Component<MenusProps> {
     return activeValue[menuIndex] === option[this.getFieldName('value')];
   }
 
-  saveMenuItem = index => node => {
+  saveMenuItem = (index) => (node) => {
     this.menuItems[index] = node;
   };
 
@@ -178,7 +177,7 @@ class Menus extends React.Component<MenusProps> {
       <div>
         {this.getShowOptions().map((options, menuIndex) => (
           <ul className={`${prefixCls}-menu`} key={menuIndex} style={dropdownMenuColumnStyle}>
-            {options.map(option => this.getOption(option, menuIndex))}
+            {options.map((option) => this.getOption(option, menuIndex))}
           </ul>
         ))}
       </div>
diff --git a/src/placements.ts b/src/placements.ts
@@ -1,4 +1,4 @@
-import { BuildInPlacements } from 'rc-trigger';
+import type { BuildInPlacements } from 'rc-trigger';
 
 const BUILT_IN_PLACEMENTS: BuildInPlacements = {
   bottomLeft: {
diff --git a/tests/__snapshots__/index.spec.js.snap b/tests/__snapshots__/index.spec.js.snap
@@ -54,8 +54,8 @@ exports[`Cascader should not show title when title is falsy 1`] = `
 exports[`Cascader should render custom dropdown correctly 1`] = `
 <div
   className="rc-cascader-menus"
-  onMouseDown={[Function]}
-  onTouchStart={[Function]}
+  onMouseDownCapture={[Function]}
+  onTouchStartCapture={[Function]}
   style={
     Object {
       "opacity": 0,
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "jsx": "preserve",
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"],
+      "rc-cascader": ["src/index.ts"]
+    }
+  }
+}
diff --git a/update-example.js b/update-example.js
@@ -0,0 +1,29 @@
+/*
+  用于 dumi 改造使用，
+  可用于将 examples 的文件批量修改为 demo 引入形式，
+  其他项目根据具体情况使用。
+*/
+
+const fs = require('fs');
+const glob = require('glob');
+
+const paths = glob.sync('./examples/*.jsx');
+
+paths.forEach(path => {
+  const name = path.split('/').pop().split('.')[0];
+  fs.writeFile(
+    `./docs/demo/${name}.md`,
+    `## ${name}
+
+<code src="../../examples/${name}.jsx">
+`,
+    'utf8',
+    function(error) {
+      if(error){
+        console.log(error);
+        return false;
+      }
+      console.log(`${name} 更新成功~`);
+    }
+  )
+});
