docs: Use dumi (#674)

* docs: Use dumi

* chore: add ignore

* chore: fix lint

* chore: ignore debug

* chore: rm debug.md

.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

.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;
+      }
+    `,
+  ]
+});

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

docs/demo/auto-adjust-dropdown.md

@@ -0,0 +1,2 @@
+## auto-adjust-dropdown
+<code src="../examples/auto-adjust-dropdown.tsx">

docs/demo/combobox.md

@@ -0,0 +1,2 @@
+## combobox
+<code src="../examples/combobox.tsx">

docs/demo/controlled.md

@@ -0,0 +1,2 @@
+## controlled
+<code src="../examples/controlled.tsx">

docs/demo/custom-icon.md

@@ -0,0 +1,2 @@
+## custom-icon
+<code src="../examples/custom-icon.tsx">

docs/demo/custom-selector.md

@@ -0,0 +1,2 @@
+## custom-selector
+<code src="../examples/custom-selector.tsx">

docs/demo/custom-tags.md

@@ -0,0 +1,2 @@
+## custom-tags
+<code src="../examples/custom-tags.tsx">

docs/demo/dropdownRender.md

@@ -0,0 +1,2 @@
+## dropdownRender
+<code src="../examples/dropdownRender.tsx">

docs/demo/email.md

@@ -0,0 +1,2 @@
+## email
+<code src="../examples/email.tsx">

docs/demo/filterSort.md

@@ -0,0 +1,2 @@
+## filterSort
+<code src="../examples/filterSort.tsx">

docs/demo/force-suggest.md

@@ -0,0 +1,2 @@
+## force-suggest
+<code src="../examples/force-suggest.tsx">

docs/demo/getPopupContainer.md

@@ -0,0 +1,2 @@
+## getPopupContainer
+<code src="../examples/getPopupContainer.tsx">

docs/demo/loading.md

@@ -0,0 +1,2 @@
+## loading
+<code src="../examples/loading.tsx">

docs/demo/mul-suggest.md

@@ -0,0 +1,2 @@
+## mul-suggest
+<code src="../examples/mul-suggest.tsx">

docs/demo/mul-tag-suggest.md

@@ -0,0 +1,2 @@
+## mul-tag-suggest
+<code src="../examples/mul-tag-suggest.tsx">

docs/demo/multiple-readonly.md

@@ -0,0 +1,2 @@
+## multiple-readonly
+<code src="../examples/multiple-readonly.tsx">

docs/demo/multiple.md

@@ -0,0 +1,2 @@
+## multiple
+<code src="../examples/multiple.tsx">

docs/demo/optgroup.md

@@ -0,0 +1,2 @@
+## optgroup
+<code src="../examples/optgroup.tsx">

docs/demo/optionFilterProp.md

@@ -0,0 +1,2 @@
+## optionFilterProp
+<code src="../examples/optionFilterProp.tsx">

docs/demo/optionLabelProp.md

@@ -0,0 +1,2 @@
+## optionLabelProp
+<code src="../examples/optionLabelProp.tsx">

docs/demo/single-animation.md

@@ -0,0 +1,2 @@
+## single-animation
+<code src="../examples/single-animation.tsx">

docs/demo/single.md

@@ -0,0 +1,2 @@
+## single
+<code src="../examples/single.tsx">

docs/demo/singleFieldNames.md

@@ -0,0 +1,2 @@
+## singleFieldNames
+<code src="../examples/singleFieldNames.tsx">

docs/demo/suggest.md

@@ -0,0 +1,2 @@
+## suggest
+<code src="../examples/suggest.tsx">

docs/demo/tags.md

@@ -0,0 +1,2 @@
+## tags
+<code src="../examples/tags.tsx">

docs/demo/update-option.md

@@ -0,0 +1,2 @@
+## update-option
+<code src="../examples/update-option.tsx">

examples/auto-adjust-dropdown.tsx → 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 = {

examples/combobox.tsx → 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 = {

examples/controlled.tsx → 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;

examples/custom-icon.tsx → 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 ' +

examples/custom-selector.tsx → 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 (

examples/custom-tags.tsx → 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 = [];

examples/dropdownRender.tsx → 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) {

examples/email.tsx → 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 = {

examples/filterSort.tsx → 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' },

examples/force-suggest.tsx → 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';
 

examples/getPopupContainer.tsx → 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 = {

examples/loading.tsx → 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 = {

examples/mul-suggest.tsx → 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';
 

examples/mul-tag-suggest.tsx → 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';
 

examples/multiple-readonly.tsx → 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) {

examples/multiple.tsx → 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) {

examples/optgroup.tsx → 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);

examples/optionFilterProp.tsx → 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>('');

examples/optionLabelProp.tsx → 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) {

examples/single-animation.tsx → 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}`);

examples/single.tsx → 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 {

examples/singleFieldNames.tsx → 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 () => {

examples/suggest.tsx → 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';
 

examples/tags.tsx → 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) {

examples/update-option.tsx → 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}`);