docs: Use dumi (#674)

zombieJ · web-flow · commit 073edf93c8a4 · 2021-11-19T17:34:39.000+08:00
* docs: Use dumi

* chore: add ignore

* chore: fix lint

* chore: ignore debug

* chore: rm debug.md
diff --git a/.gitignore b/.gitignore
@@ -22,6 +22,7 @@ node_modules
 .cache
 dist
 debug.tsx
+debug.md
 assets/**/*.css
 build
 lib
@@ -37,3 +38,5 @@ tsconfig.test.json
 .prettierignore
 .storybook
 storybook/index.js
+.doc
+.umi
diff --git a/.umirc.ts b/.umirc.ts
@@ -0,0 +1,19 @@
+// more config: https://d.umijs.org/config
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  title: 'rc-select',
+  favicon:
+    'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  logo:
+    'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  outputPath: '.doc',
+  exportStatic: {},
+  styles: [
+    `
+      .markdown table {
+        width: auto !important;
+      }
+    `,
+  ]
+});
diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@ React Select
 
 ### basic use
 
-```js
+```jsx | pure
 import Select, { Option } from 'rc-select';
 
 export default () => (
@@ -102,11 +102,11 @@ export default () => (
 | optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' |
 | filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. | Function(optionA:Option, optionB: Option) | - |
 | optionLabelProp | render option value or option children as content of select | String: 'value'/'children' | 'value' |
-| defaultValue | initial selected option(s) | String/Array<String> | - |
-| value | current selected option(s) | String/Array<String>/{key:String, label:React.Node}/Array<{key, label}> | - |
+| defaultValue | initial selected option(s) | String \| String[] | - |
+| value | current selected option(s) | String \| String[] \| {key:String, label:React.Node} \| {key:String, label:React.Node}[] | - |
 | labelInValue | whether to embed label in value, see above value type. Not support `combobox` mode | Bool | false |
 | backfill | whether backfill select option to search input (Only works in single and combobox mode) | Bool | false |
-| onChange | called when select an option or input value change(combobox) | function(value, option:Option/Array<Option>) | - |
+| onChange | called when select an option or input value change(combobox) | function(value, option:Option \| Option[]) | - |
 | onSearch | called when input changed | function | - |
 | onBlur | called when blur | function | - |
 | onFocus | called when focus | function | - |
diff --git a/docs/demo/auto-adjust-dropdown.md b/docs/demo/auto-adjust-dropdown.md
@@ -0,0 +1,2 @@
+## auto-adjust-dropdown
+<code src="../examples/auto-adjust-dropdown.tsx">
diff --git a/docs/demo/combobox.md b/docs/demo/combobox.md
@@ -0,0 +1,2 @@
+## combobox
+<code src="../examples/combobox.tsx">
diff --git a/docs/demo/controlled.md b/docs/demo/controlled.md
@@ -0,0 +1,2 @@
+## controlled
+<code src="../examples/controlled.tsx">
diff --git a/docs/demo/custom-icon.md b/docs/demo/custom-icon.md
@@ -0,0 +1,2 @@
+## custom-icon
+<code src="../examples/custom-icon.tsx">
diff --git a/docs/demo/custom-selector.md b/docs/demo/custom-selector.md
@@ -0,0 +1,2 @@
+## custom-selector
+<code src="../examples/custom-selector.tsx">
diff --git a/docs/demo/custom-tags.md b/docs/demo/custom-tags.md
@@ -0,0 +1,2 @@
+## custom-tags
+<code src="../examples/custom-tags.tsx">
diff --git a/docs/demo/dropdownRender.md b/docs/demo/dropdownRender.md
@@ -0,0 +1,2 @@
+## dropdownRender
+<code src="../examples/dropdownRender.tsx">
diff --git a/docs/demo/email.md b/docs/demo/email.md
@@ -0,0 +1,2 @@
+## email
+<code src="../examples/email.tsx">
diff --git a/docs/demo/filterSort.md b/docs/demo/filterSort.md
@@ -0,0 +1,2 @@
+## filterSort
+<code src="../examples/filterSort.tsx">
diff --git a/docs/demo/force-suggest.md b/docs/demo/force-suggest.md
@@ -0,0 +1,2 @@
+## force-suggest
+<code src="../examples/force-suggest.tsx">
diff --git a/docs/demo/getPopupContainer.md b/docs/demo/getPopupContainer.md
@@ -0,0 +1,2 @@
+## getPopupContainer
+<code src="../examples/getPopupContainer.tsx">
diff --git a/docs/demo/loading.md b/docs/demo/loading.md
@@ -0,0 +1,2 @@
+## loading
+<code src="../examples/loading.tsx">
diff --git a/docs/demo/mul-suggest.md b/docs/demo/mul-suggest.md
@@ -0,0 +1,2 @@
+## mul-suggest
+<code src="../examples/mul-suggest.tsx">
diff --git a/docs/demo/mul-tag-suggest.md b/docs/demo/mul-tag-suggest.md
@@ -0,0 +1,2 @@
+## mul-tag-suggest
+<code src="../examples/mul-tag-suggest.tsx">
diff --git a/docs/demo/multiple-readonly.md b/docs/demo/multiple-readonly.md
@@ -0,0 +1,2 @@
+## multiple-readonly
+<code src="../examples/multiple-readonly.tsx">
diff --git a/docs/demo/multiple.md b/docs/demo/multiple.md
@@ -0,0 +1,2 @@
+## multiple
+<code src="../examples/multiple.tsx">
diff --git a/docs/demo/optgroup.md b/docs/demo/optgroup.md
@@ -0,0 +1,2 @@
+## optgroup
+<code src="../examples/optgroup.tsx">
diff --git a/docs/demo/optionFilterProp.md b/docs/demo/optionFilterProp.md
@@ -0,0 +1,2 @@
+## optionFilterProp
+<code src="../examples/optionFilterProp.tsx">
diff --git a/docs/demo/optionLabelProp.md b/docs/demo/optionLabelProp.md
@@ -0,0 +1,2 @@
+## optionLabelProp
+<code src="../examples/optionLabelProp.tsx">
diff --git a/docs/demo/single-animation.md b/docs/demo/single-animation.md
@@ -0,0 +1,2 @@
+## single-animation
+<code src="../examples/single-animation.tsx">
diff --git a/docs/demo/single.md b/docs/demo/single.md
@@ -0,0 +1,2 @@
+## single
+<code src="../examples/single.tsx">
diff --git a/docs/demo/singleFieldNames.md b/docs/demo/singleFieldNames.md
@@ -0,0 +1,2 @@
+## singleFieldNames
+<code src="../examples/singleFieldNames.tsx">
diff --git a/docs/demo/suggest.md b/docs/demo/suggest.md
@@ -0,0 +1,2 @@
+## suggest
+<code src="../examples/suggest.tsx">
diff --git a/docs/demo/tags.md b/docs/demo/tags.md
@@ -0,0 +1,2 @@
+## tags
+<code src="../examples/tags.tsx">
diff --git a/docs/demo/update-option.md b/docs/demo/update-option.md
@@ -0,0 +1,2 @@
+## update-option
+<code src="../examples/update-option.tsx">
diff --git a/docs/examples/auto-adjust-dropdown.tsx b/docs/examples/auto-adjust-dropdown.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 class Test extends React.Component {
   state = {
diff --git a/docs/examples/combobox.tsx b/docs/examples/combobox.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 class Combobox extends React.Component {
   state = {
diff --git a/docs/examples/common.less b/docs/examples/common.less
diff --git a/docs/examples/common/tbFetchSuggest.tsx b/docs/examples/common/tbFetchSuggest.tsx
diff --git a/docs/examples/controlled.tsx b/docs/examples/controlled.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 interface ControlledState {
   destroy: boolean;
diff --git a/docs/examples/custom-icon.tsx b/docs/examples/custom-icon.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console, max-classes-per-file */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 const arrowPath =
   'M632 888H392c-4.4 0-8 3.6-8 8v32c0 ' +
diff --git a/docs/examples/custom-selector.tsx b/docs/examples/custom-selector.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select from '../src';
-import '../assets/index.less';
+import Select from 'rc-select';
+import '../../assets/index.less';
 
 export default () => {
   return (
diff --git a/docs/examples/custom-tags.tsx b/docs/examples/custom-tags.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 import type { CustomTagProps } from '../src/interface/generator';
 
 const children = [];
diff --git a/docs/examples/dropdownRender.tsx b/docs/examples/dropdownRender.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 const children = [];
 for (let i = 10; i < 36; i += 1) {
diff --git a/docs/examples/email.tsx b/docs/examples/email.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 class Test extends React.Component {
   state = {
diff --git a/docs/examples/filterSort.tsx b/docs/examples/filterSort.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Select from '../src';
-import '../assets/index.less';
+import Select from 'rc-select';
+import '../../assets/index.less';
 
 const incidencesStateResource = [
   { value: 4, label: 'Not Identified' },
diff --git a/docs/examples/force-suggest.tsx b/docs/examples/force-suggest.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 import { fetch } from './common/tbFetchSuggest';
 
diff --git a/docs/examples/getPopupContainer.tsx b/docs/examples/getPopupContainer.tsx
@@ -1,9 +1,9 @@
-import '../assets/index.less';
+import '../../assets/index.less';
 import 'rc-dialog/assets/index.css';
 
 import Dialog from 'rc-dialog';
 import React from 'react';
-import Select, { Option } from '../src';
+import Select, { Option } from 'rc-select';
 
 class Test extends React.Component {
   state = {
diff --git a/docs/examples/loading.tsx b/docs/examples/loading.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 class Test extends React.Component {
   state = {
diff --git a/docs/examples/mul-suggest.tsx b/docs/examples/mul-suggest.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 import { fetch } from './common/tbFetchSuggest';
 
diff --git a/docs/examples/mul-tag-suggest.tsx b/docs/examples/mul-tag-suggest.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 import { fetch } from './common/tbFetchSuggest';
 
diff --git a/docs/examples/multiple-readonly.tsx b/docs/examples/multiple-readonly.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 const children = [];
 for (let i = 10; i < 36; i += 1) {
diff --git a/docs/examples/multiple.tsx b/docs/examples/multiple.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 const children = [];
 for (let i = 10; i < 36; i += 1) {
diff --git a/docs/examples/optgroup.tsx b/docs/examples/optgroup.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option, OptGroup } from '../src';
-import '../assets/index.less';
+import Select, { Option, OptGroup } from 'rc-select';
+import '../../assets/index.less';
 
 function onChange(value, option) {
   console.log(`selected ${value}`, option);
diff --git a/docs/examples/optionFilterProp.tsx b/docs/examples/optionFilterProp.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 const Test = () => {
   const [value, setValue] = React.useState<string>('');
diff --git a/docs/examples/optionLabelProp.tsx b/docs/examples/optionLabelProp.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Select from '../src';
-import '../assets/index.less';
+import Select from 'rc-select';
+import '../../assets/index.less';
 
 const data: { value: number; label: string; displayLabel: string }[] = [];
 for (let i = 0; i < 10; i += 1) {
diff --git a/docs/examples/single-animation.tsx b/docs/examples/single-animation.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 function onChange(value) {
   console.log(`selected ${value}`);
diff --git a/docs/examples/single.less b/docs/examples/single.less
diff --git a/docs/examples/single.tsx b/docs/examples/single.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 import './single.less';
 
 class Test extends React.Component {
diff --git a/docs/examples/singleFieldNames.tsx b/docs/examples/singleFieldNames.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select from '../src';
-import '../assets/index.less';
+import Select from 'rc-select';
+import '../../assets/index.less';
 import './single.less';
 
 export default () => {
diff --git a/docs/examples/suggest.tsx b/docs/examples/suggest.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 import { fetch } from './common/tbFetchSuggest';
 
diff --git a/docs/examples/tags.tsx b/docs/examples/tags.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 const children = [];
 for (let i = 10; i < 36; i += 1) {
diff --git a/docs/examples/update-option.tsx b/docs/examples/update-option.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option } from '../src';
-import '../assets/index.less';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
 
 function handleChange(value) {
   console.log(`selected ${value}`);
diff --git a/package.json b/package.json
diff --git a/tsconfig.json b/tsconfig.json
