@uiw/doc 4.20.0 → 4.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/web/CONTRIBUTORS.svg +9 -9
- package/web/asset-manifest.json +10 -10
- package/web/index.html +1 -1
- package/web/static/css/{main.4bf8d5a2.css → main.4b418918.css} +2 -2
- package/web/static/css/main.4b418918.css.map +1 -0
- package/web/static/js/5468.50941a38.chunk.js +2 -0
- package/web/static/js/5468.50941a38.chunk.js.map +1 -0
- package/web/static/js/{7313.b857c0a6.chunk.js → 7313.9c56b387.chunk.js} +2 -2
- package/web/static/js/{7313.b857c0a6.chunk.js.map → 7313.9c56b387.chunk.js.map} +1 -1
- package/web/static/js/main.77985803.js +2 -0
- package/web/static/js/main.77985803.js.map +1 -0
- package/web/static/css/main.4bf8d5a2.css.map +0 -1
- package/web/static/js/5468.aef3688e.chunk.js +0 -2
- package/web/static/js/5468.aef3688e.chunk.js.map +0 -1
- package/web/static/js/main.14b9d81e.js +0 -2
- package/web/static/js/main.14b9d81e.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7313],{67313:function(e,n,l){l.r(n),n.default="SearchSelect \u641c\u7d22\u9009\u62e9\u5668\n===\n\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-search-select)\n[](https://npmjs.com/@uiw/react-search-select)\n\n\u641c\u7d22\u9009\u62e9\u5668\n\n```jsx\nimport { SearchSelect, Row ,Col } from 'uiw';\n// or\nimport SearchSelect from '@uiw/react-search-select';\n```\n\n## \u57fa\u7840\u793a\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const option=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n return(\n <Row gutter={20}>\n <label>\u5355\u9009</label>\n <Row>\n <SearchSelect\n mode=\"single\"\n style={{ width: 200 }}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n option={option}\n />\n </Row>\n <label>\u591a\u9009</label>\n <Row>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n option={option}\n />\n </Row>\n <label>\u7981\u7528</label>\n <Row>\n <SearchSelect\n mode=\"single\"\n style={{ width: 200 }}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n option={option}\n disabled={true}\n />\n </Row>\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5c3a\u5bf8\n\n\u901a\u8fc7 size \u5c5e\u6027\u8bbe\u7f6e\u9009\u62e9\u5668\u7684\u5c3a\u5bf8\uff0c\u63d0\u4f9b\u4e09\u4e2a\u5c3a\u5bf8\u53c2\u6570\u8bbe\u7f6e\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const option=[\n { label: '\u5c0f\u5c3a\u5bf8', value: 1 },\n { label: '\u9ed8\u8ba4\u5c3a\u5bf8', value: 2 },\n { label: '\u5927\u5c3a\u5bf8', value: 3 },\n ]\n\n return(\n <Row style={{ flexDirection: 'column' }}>\n <Col>\n <Row>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 150 }}\n option={option}\n value={[1]}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n size={'small'}\n />\n </Row>\n </Col>\n <Col style={{ margin:'10px 0px' }}>\n <Row>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 175 }}\n option={option}\n value={[2]}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n </Col>\n <Col >\n <Row>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n option={option}\n value={[3]}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n size={'large'}\n />\n </Row>\n </Col>\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u4e0d\u540c\u7684value\u7c7b\u578b\n\n\u901a`labelInValue`\u53c2\u6570\u63a7\u5236value\u7c7b\u578b\u548conChange\u65f6\u95f4\u8fd4\u56de\u53c2\u6570\u7684\u7c7b\u578b\uff0c\u8bbe\u7f6e\u4e3a`true`\u65f6\uff0c`value`\u548c`onChange`\u56de\u8c03\u8fd4\u56de\u7684\u503c\u7c7b\u578b\u4ece[..., value]\u53d8\u6210[..., { label, value}]\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const option=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n\n const [loading, setLoading] = React.useState(false);\n const [value, setValue] = React.useState([1 ,7]);\n const [labelValue, setLabelValue] = React.useState([{ label: 'a1', value: 1 }, { label: 'a7', value: 7 }]);\n\n return(\n <Row gutter={20}>\n <Row>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n value={value}\n option={option}\n onChange={(value)=> {\n console.log('value', value)\n setValue(value)\n }}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n <Row>\n <SearchSelect\n mode=\"multiple\"\n labelInValue={true}\n style={{ width: 200 }}\n option={option}\n value={labelValue}\n onChange={(value)=> {\n console.log('value', value)\n setLabelValue(value)\n }}\n plac\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u9650\u5236\u9009\u9879\u4e2a\u6570\n\n\u9650\u5236\u6700\u591a\u53ea\u80fd\u9009\u62e9\u4e24\u4e2a\u9009\u9879\uff0c\u8fbe\u5230\u6700\u5927\u540e\u5982\u679c\u7ee7\u7eed\u9009\u62e9\uff0c\u4f1a\u66ff\u6362\u6700\u540e\u4e00\u4e2a\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const selectOption=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n const valueAmount = 2\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n const [values, setValues] = React.useState([ 1, 2, 7]);\n\n function handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n setOption([...filterOpion]);\n setLoading(false);\n }, 500);\n }\n\n return(\n <Row style={{ marginLeft: 10 }}>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n valueAmount={valueAmount}\n allowClear\n value={values}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n onSearch={handleSearch}\n // onSelect={(value)=>console.log('onSelect',value)}\n loading={loading}\n option={option}\n onChange={(value) => {\n setValues(value)\n }}\n />\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u663e\u793a\u6700\u5927\u6570\u91cf\n\n\u4f7f\u7528`maxTagCount`\u9650\u5236\u663e\u793atag\u7684\u6570\u91cf\uff0c\u8d85\u8fc7\u540e\u4f7f\u7528\u7701\u7565tag\u663e\u793a\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const selectOption=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n const maxTagCount = 4\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n const [values, setValues] = React.useState([\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a5', value: 5 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]);\n\n function handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n setOption([...filterOpion]);\n setLoading(false);\n }, 500);\n }\n\n return(\n <Row style={{ marginLeft: 10 }}>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n labelInValue={true}\n maxTagCount={maxTagCount}\n allowClear\n value={values}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n onSearch={handleSearch}\n loading={loading}\n option={option}\n onChange={(value) => {\n setValues(value)\n }}\n />\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u542f\u7528\u641c\u7d22\n\n\u5c06`showSearch`\u8bbe\u7f6e\u4e3a`true`\u542f\u7528\u641c\u7d22\u529f\u80fd\uff0c\u7ec4\u4ef6\u6ca1\u6709\u5185\u7f6e\u641c\u7d22\u529f\u80fd\uff0c\u4f46`option`\u662f\u76d1\u542c\u53d8\u5316\u7684\uff0c\u53ef\u4ee5\u901a\u8fc7\u914d\u5408`onSearch`\u5b9e\u73b0\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const selectOption=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n const [value, setValue] = React.useState([1,7]);\n const [values, setValues] = React.useState([1,7]);\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n\n function handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n setOption([...filterOpion]);\n setLoading(false);\n }, 500);\n }\n\n return(\n <Row style={{ marginLeft: 10 }}>\n <Col fixed style={{width:200}}>\n <SearchSelect\n mode=\"singe\"\n showSearch={true}\n value={value}\n option={option}\n loading={loading}\n onSearch={handleSearch}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n style={{ width: 200 }}\n onChange={(value) => {\n setValue(value)\n }}\n />\n </Col>\n <Col fixed style={{width:200, marginLeft: 20}}>\n <SearchSelect\n mode=\"multiple\"\n showSearch={true}\n value={values}\n option={option}\n loading={loading}\n onSearch={handleSearch}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n style={{ width: 200 }}\n onChange={(value) => {\n setValues(value)\n }}\n />\n </Col>\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 `<SearchSelect />` \u7ec4\u4ef6\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';\n\nconst Demo = () => {\n const selectOption =[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ];\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n\n function handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n setOption([...filterOpion]);\n setLoading(false);\n }, 500);\n }\n\n return (\n <div>\n <Form\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (!current.selectField) {\n errorObj.selectField = '\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n throw err;\n }\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n selectField: {\n initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}],\n children: (\n <SearchSelect\n allowClear\n labelInValue={true}\n showSearch={true}\n mode=\"multiple\"\n disabled={false}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n onSearch={handleSearch}\n onChange={(v)=>{\n console.log('onChange',v)\n }}\n option={option}\n loading={loading}\n />\n )\n },\n selectSingle: {\n initialValue:[{label: 'a7', value: 7}],\n children: (\n <SearchSelect\n mode=\"single\"\n labelInValue={true}\n showSearch={true}\n allowClear\n disabled={false}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n onSearch={handleSearch}\n onChange={(v)=>{\n console.log('onChange',v)\n }}\n option={option}\n loading={loading}\n />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div style={{ marginLeft:10}}>\n <Row >\n <Col fixed style={{width:200}}>{fields.selectField}</Col>\n </Row>\n <Row>\n <Col fixed style={{width:200}}>{fields.selectSingle}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: 10, marginTop: 10 }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n );\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c | \u7248\u672c |\n| ---- | ---- | ---- | ---- | ---- |\n| allowClear | \u652f\u6301\u6e05\u9664 | Boolean | `false` | - |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` | - |\n| mode | \u9009\u62e9\u6a21\u5f0f: `multiple` `single` | String | `single` | - |\n| defaultValue | \u6307\u5b9a\u9ed8\u8ba4\u9009\u4e2d\u7684\u6761\u76ee | String/Number | - | - |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee\uff0c\u591a\u9009\u65f6\u4e3a\u4e00\u4e2a\u6570\u7ec4 | String \\| Number \\| String[] \\| Number[] \\| LabeledValue \\| LabeledValue[] | - | - |\n| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - | - |\n| maxTagCount | \u591a\u9009\u6a21\u5f0f\u4e0b\u5c55\u793atag\u7684\u4e2a\u6570,\u9ed8\u8ba4\u6240\u6709 | number | - | - |\n| labelInValue | \u5f00\u542f\u4f1a\u628a Select \u7684 value \u7c7b\u578b\u4ece `string/number` \u53d8\u4e3a `{ value: string/number, label: string }` | Boolean | `false` | - |\n| showSearch | \u662f\u5426\u53ef\u641c\u7d22 | Boolean | - | - |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum{large, default, small } | `default` | - |\n| tagProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Tag>`](#/components/tag) \u7ec4\u4ef6 | `TagProps` | `{}` | `4.13.0` |\n| onChange | \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 | function(value:String \\| Number \\| String[] \\| Number[] \\| LabeledValue \\| LabeledValue[]) | - | - |\n| onSearch | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 | function(value: String) | - | - |\n| onSelect | \u88ab\u9009\u4e2d\u65f6\u8c03\u7528\uff0c\u53c2\u6570\u4e3a\u9009\u4e2d\u9879\u7684 value | function(value: String/Number ) | - | - |\n| loading | \u52a0\u8f7d\u4e2d\u72b6\u6001 | Boolean | `false` | - |\n| valueAmount | \u591a\u9009\u6a21\u5f0f\u4e0b,\u9650\u5236\u6700\u591a\u9009\u62e9\u591a\u5c11\u4e2a(value\u7684\u957f\u5ea6) | number | - | - |\n"}}]);
|
|
2
|
-
//# sourceMappingURL=7313.
|
|
1
|
+
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7313],{67313:function(e,n,l){l.r(n),n.default="SearchSelect \u641c\u7d22\u9009\u62e9\u5668\n===\n\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-search-select)\n[](https://npmjs.com/@uiw/react-search-select)\n\n\u641c\u7d22\u9009\u62e9\u5668\n\n```jsx\nimport { SearchSelect, Row ,Col } from 'uiw';\n// or\nimport SearchSelect from '@uiw/react-search-select';\n```\n\n## \u57fa\u7840\u793a\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const option=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n return(\n <Row gutter={20}>\n <label>\u5355\u9009</label>\n <Row>\n <SearchSelect\n mode=\"single\"\n style={{ width: 200 }}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n option={option}\n />\n </Row>\n <label>\u591a\u9009</label>\n <Row>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n option={option}\n />\n </Row>\n <label>\u7981\u7528</label>\n <Row>\n <SearchSelect\n mode=\"single\"\n style={{ width: 200 }}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n option={option}\n disabled={true}\n />\n </Row>\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5c3a\u5bf8\n\n\u901a\u8fc7 size \u5c5e\u6027\u8bbe\u7f6e\u9009\u62e9\u5668\u7684\u5c3a\u5bf8\uff0c\u63d0\u4f9b\u4e09\u4e2a\u5c3a\u5bf8\u53c2\u6570\u8bbe\u7f6e\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const option=[\n { label: '\u5c0f\u5c3a\u5bf8', value: 1 },\n { label: '\u9ed8\u8ba4\u5c3a\u5bf8', value: 2 },\n { label: '\u5927\u5c3a\u5bf8', value: 3 },\n ]\n\n return(\n <Row style={{ flexDirection: 'column' }}>\n <Col>\n <Row>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 150 }}\n option={option}\n value={[1]}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n size={'small'}\n />\n </Row>\n </Col>\n <Col style={{ margin:'10px 0px' }}>\n <Row>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 175 }}\n option={option}\n value={[2]}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n </Col>\n <Col >\n <Row>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n option={option}\n value={[3]}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n size={'large'}\n />\n </Row>\n </Col>\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u4e0d\u540c\u7684value\u7c7b\u578b\n\n\u901a`labelInValue`\u53c2\u6570\u63a7\u5236value\u7c7b\u578b\u548conChange\u65f6\u95f4\u8fd4\u56de\u53c2\u6570\u7684\u7c7b\u578b\uff0c\u8bbe\u7f6e\u4e3a`true`\u65f6\uff0c`value`\u548c`onChange`\u56de\u8c03\u8fd4\u56de\u7684\u503c\u7c7b\u578b\u4ece[..., value]\u53d8\u6210[..., { label, value}]\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const option=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n\n const [loading, setLoading] = React.useState(false);\n const [value, setValue] = React.useState([1 ,7]);\n const [labelValue, setLabelValue] = React.useState([{ label: 'a1', value: 1 }, { label: 'a7', value: 7 }]);\n\n return(\n <Row gutter={20}>\n <Row>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n value={value}\n option={option}\n onChange={(value)=> {\n console.log('value', value)\n setValue(value)\n }}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n <Row>\n <SearchSelect\n mode=\"multiple\"\n labelInValue={true}\n style={{ width: 200 }}\n option={option}\n value={labelValue}\n onChange={(value)=> {\n console.log('value', value)\n setLabelValue(value)\n }}\n plac\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u9650\u5236\u9009\u9879\u4e2a\u6570\n\n\u9650\u5236\u6700\u591a\u53ea\u80fd\u9009\u62e9\u4e24\u4e2a\u9009\u9879\uff0c\u8fbe\u5230\u6700\u5927\u540e\u5982\u679c\u7ee7\u7eed\u9009\u62e9\uff0c\u4f1a\u66ff\u6362\u6700\u540e\u4e00\u4e2a\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const selectOption=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n const valueAmount = 2\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n const [values, setValues] = React.useState([ 1, 2, 7]);\n\n function handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n setOption([...filterOpion]);\n setLoading(false);\n }, 500);\n }\n\n return(\n <Row style={{ marginLeft: 10 }}>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n valueAmount={valueAmount}\n allowClear\n value={values}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n onSearch={handleSearch}\n // onSelect={(value)=>console.log('onSelect',value)}\n loading={loading}\n option={option}\n onChange={(value) => {\n setValues(value)\n }}\n />\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u663e\u793a\u6700\u5927\u6570\u91cf\n\n\u4f7f\u7528`maxTagCount`\u9650\u5236\u663e\u793atag\u7684\u6570\u91cf\uff0c\u8d85\u8fc7\u540e\u4f7f\u7528\u7701\u7565tag\u663e\u793a\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const selectOption=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n const maxTagCount = 4\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n const [values, setValues] = React.useState([\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a5', value: 5 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]);\n\n function handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n setOption([...filterOpion]);\n setLoading(false);\n }, 500);\n }\n\n return(\n <Row style={{ marginLeft: 10 }}>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n labelInValue={true}\n maxTagCount={maxTagCount}\n allowClear\n value={values}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n onSearch={handleSearch}\n loading={loading}\n option={option}\n onChange={(value) => {\n setValues(value)\n }}\n />\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u542f\u7528\u641c\u7d22\n\n\u5c06`showSearch`\u8bbe\u7f6e\u4e3a`true`\u542f\u7528\u641c\u7d22\u529f\u80fd\uff0c\u7ec4\u4ef6\u6ca1\u6709\u5185\u7f6e\u641c\u7d22\u529f\u80fd\uff0c\u4f46`option`\u662f\u76d1\u542c\u53d8\u5316\u7684\uff0c\u53ef\u4ee5\u901a\u8fc7\u914d\u5408`onSearch`\u5b9e\u73b0\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const selectOption=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n const [value, setValue] = React.useState([1,7]);\n const [values, setValues] = React.useState([1,7]);\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n\n function handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n setOption([...filterOpion]);\n setLoading(false);\n }, 500);\n }\n\n return(\n <Row style={{ marginLeft: 10 }}>\n <Col fixed style={{width:200}}>\n <SearchSelect\n mode=\"singe\"\n showSearch={true}\n value={value}\n option={option}\n loading={loading}\n onSearch={handleSearch}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n style={{ width: 200 }}\n onChange={(value) => {\n setValue(value)\n }}\n />\n </Col>\n <Col fixed style={{width:200, marginLeft: 20}}>\n <SearchSelect\n mode=\"multiple\"\n showSearch={true}\n value={values}\n option={option}\n loading={loading}\n onSearch={handleSearch}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n style={{ width: 200 }}\n onChange={(value) => {\n setValues(value)\n }}\n />\n </Col>\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 `<SearchSelect />` \u7ec4\u4ef6\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';\n\nconst Demo = () => {\n const selectOption =[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ];\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n const refForm = React.useRef()\n\n function handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n setOption([...filterOpion]);\n setLoading(false);\n }, 500);\n }\n\n const reSetForm = () => {\n console.log('form', refForm.current.resetForm())\n }\n\n return (\n <div>\n <Form\n ref={refForm}\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (!current.selectField) {\n errorObj.selectField = '\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n throw err;\n }\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n selectField: {\n initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}],\n children: (\n <SearchSelect\n allowClear\n labelInValue={true}\n showSearch={true}\n mode=\"multiple\"\n disabled={false}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n onSearch={handleSearch}\n onChange={(v)=>{\n console.log('onChange',v)\n }}\n option={option}\n loading={loading}\n />\n )\n },\n selectSingle: {\n initialValue:[{label: 'a7', value: 7}],\n children: (\n <SearchSelect\n mode=\"single\"\n labelInValue={true}\n showSearch={true}\n allowClear\n disabled={false}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n onSearch={handleSearch}\n onChange={(v)=>{\n console.log('onChange',v)\n }}\n option={option}\n loading={loading}\n />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div style={{ marginLeft:10}}>\n <Row >\n <Col fixed style={{width:200}}>{fields.selectField}</Col>\n </Row>\n <Row>\n <Col fixed style={{width:200}}>{fields.selectSingle}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n </Col>\n <Col fixed>\n <Button onClick={reSetForm}>\u91cd\u7f6e</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: 10, marginTop: 10 }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n );\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c | \u7248\u672c |\n| ---- | ---- | ---- | ---- | ---- |\n| allowClear | \u652f\u6301\u6e05\u9664 | Boolean | `false` | - |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` | - |\n| mode | \u9009\u62e9\u6a21\u5f0f: `multiple` `single` | String | `single` | - |\n| defaultValue | \u6307\u5b9a\u9ed8\u8ba4\u9009\u4e2d\u7684\u6761\u76ee | String/Number | - | - |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee\uff0c\u591a\u9009\u65f6\u4e3a\u4e00\u4e2a\u6570\u7ec4 | String \\| Number \\| String[] \\| Number[] \\| LabeledValue \\| LabeledValue[] | - | - |\n| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - | - |\n| maxTagCount | \u591a\u9009\u6a21\u5f0f\u4e0b\u5c55\u793atag\u7684\u4e2a\u6570,\u9ed8\u8ba4\u6240\u6709 | number | - | - |\n| labelInValue | \u5f00\u542f\u4f1a\u628a Select \u7684 value \u7c7b\u578b\u4ece `string/number` \u53d8\u4e3a `{ value: string/number, label: string }` | Boolean | `false` | - |\n| showSearch | \u662f\u5426\u53ef\u641c\u7d22 | Boolean | - | - |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum{large, default, small } | `default` | - |\n| tagProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Tag>`](#/components/tag) \u7ec4\u4ef6 | `TagProps` | `{}` | `4.13.0` |\n| onChange | \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 | function(value:String \\| Number \\| String[] \\| Number[] \\| LabeledValue \\| LabeledValue[]) | - | - |\n| onSearch | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 | function(value: String) | - | - |\n| onSelect | \u88ab\u9009\u4e2d\u65f6\u8c03\u7528\uff0c\u53c2\u6570\u4e3a\u9009\u4e2d\u9879\u7684 value | function(value: String/Number ) | - | - |\n| loading | \u52a0\u8f7d\u4e2d\u72b6\u6001 | Boolean | `false` | - |\n| valueAmount | \u591a\u9009\u6a21\u5f0f\u4e0b,\u9650\u5236\u6700\u591a\u9009\u62e9\u591a\u5c11\u4e2a(value\u7684\u957f\u5ea6) | number | - | - |\n"}}]);
|
|
2
|
+
//# sourceMappingURL=7313.9c56b387.chunk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"static/js/7313.b857c0a6.chunk.js","mappings":"gHAAA","sources":["../../packages/react-search-select/README.md"],"sourcesContent":["export default \"SearchSelect 搜索选择器\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-search-select)\\n[](https://npmjs.com/@uiw/react-search-select)\\n\\n搜索选择器\\n\\n```jsx\\nimport { SearchSelect, Row ,Col } from 'uiw';\\n// or\\nimport SearchSelect from '@uiw/react-search-select';\\n```\\n\\n## 基础示例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const option=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n return(\\n <Row gutter={20}>\\n <label>单选</label>\\n <Row>\\n <SearchSelect\\n mode=\\\"single\\\"\\n style={{ width: 200 }}\\n placeholder=\\\"请选择选项\\\"\\n option={option}\\n />\\n </Row>\\n <label>多选</label>\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n allowClear={true}\\n placeholder=\\\"请选择选项\\\"\\n option={option}\\n />\\n </Row>\\n <label>禁用</label>\\n <Row>\\n <SearchSelect\\n mode=\\\"single\\\"\\n style={{ width: 200 }}\\n allowClear={true}\\n placeholder=\\\"请选择选项\\\"\\n option={option}\\n disabled={true}\\n />\\n </Row>\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 尺寸\\n\\n通过 size 属性设置选择器的尺寸，提供三个尺寸参数设置。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const option=[\\n { label: '小尺寸', value: 1 },\\n { label: '默认尺寸', value: 2 },\\n { label: '大尺寸', value: 3 },\\n ]\\n\\n return(\\n <Row style={{ flexDirection: 'column' }}>\\n <Col>\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 150 }}\\n option={option}\\n value={[1]}\\n allowClear={true}\\n placeholder=\\\"请选择选项\\\"\\n size={'small'}\\n />\\n </Row>\\n </Col>\\n <Col style={{ margin:'10px 0px' }}>\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 175 }}\\n option={option}\\n value={[2]}\\n allowClear={true}\\n placeholder=\\\"请选择选项\\\"\\n />\\n </Row>\\n </Col>\\n <Col >\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n option={option}\\n value={[3]}\\n allowClear={true}\\n placeholder=\\\"请选择选项\\\"\\n size={'large'}\\n />\\n </Row>\\n </Col>\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 不同的value类型\\n\\n通`labelInValue`参数控制value类型和onChange时间返回参数的类型，设置为`true`时，`value`和`onChange`回调返回的值类型从[..., value]变成[..., { label, value}]\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const option=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n\\n const [loading, setLoading] = React.useState(false);\\n const [value, setValue] = React.useState([1 ,7]);\\n const [labelValue, setLabelValue] = React.useState([{ label: 'a1', value: 1 }, { label: 'a7', value: 7 }]);\\n\\n return(\\n <Row gutter={20}>\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n value={value}\\n option={option}\\n onChange={(value)=> {\\n console.log('value', value)\\n setValue(value)\\n }}\\n placeholder=\\\"请选择选项\\\"\\n />\\n </Row>\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n labelInValue={true}\\n style={{ width: 200 }}\\n option={option}\\n value={labelValue}\\n onChange={(value)=> {\\n console.log('value', value)\\n setLabelValue(value)\\n }}\\n plac\\n placeholder=\\\"请选择选项\\\"\\n />\\n </Row>\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 限制选项个数\\n\\n限制最多只能选择两个选项，达到最大后如果继续选择，会替换最后一个\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n const valueAmount = 2\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n const [values, setValues] = React.useState([ 1, 2, 7]);\\n\\n function handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n setOption([...filterOpion]);\\n setLoading(false);\\n }, 500);\\n }\\n\\n return(\\n <Row style={{ marginLeft: 10 }}>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n valueAmount={valueAmount}\\n allowClear\\n value={values}\\n placeholder=\\\"请选择选项\\\"\\n onSearch={handleSearch}\\n // onSelect={(value)=>console.log('onSelect',value)}\\n loading={loading}\\n option={option}\\n onChange={(value) => {\\n setValues(value)\\n }}\\n />\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 显示最大数量\\n\\n使用`maxTagCount`限制显示tag的数量，超过后使用省略tag显示\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n const maxTagCount = 4\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n const [values, setValues] = React.useState([\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a5', value: 5 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]);\\n\\n function handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n setOption([...filterOpion]);\\n setLoading(false);\\n }, 500);\\n }\\n\\n return(\\n <Row style={{ marginLeft: 10 }}>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n labelInValue={true}\\n maxTagCount={maxTagCount}\\n allowClear\\n value={values}\\n placeholder=\\\"请选择选项\\\"\\n onSearch={handleSearch}\\n loading={loading}\\n option={option}\\n onChange={(value) => {\\n setValues(value)\\n }}\\n />\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 启用搜索\\n\\n将`showSearch`设置为`true`启用搜索功能，组件没有内置搜索功能，但`option`是监听变化的，可以通过配合`onSearch`实现\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n const [value, setValue] = React.useState([1,7]);\\n const [values, setValues] = React.useState([1,7]);\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n\\n function handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n setOption([...filterOpion]);\\n setLoading(false);\\n }, 500);\\n }\\n\\n return(\\n <Row style={{ marginLeft: 10 }}>\\n <Col fixed style={{width:200}}>\\n <SearchSelect\\n mode=\\\"singe\\\"\\n showSearch={true}\\n value={value}\\n option={option}\\n loading={loading}\\n onSearch={handleSearch}\\n placeholder=\\\"请选择选项\\\"\\n style={{ width: 200 }}\\n onChange={(value) => {\\n setValue(value)\\n }}\\n />\\n </Col>\\n <Col fixed style={{width:200, marginLeft: 20}}>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n showSearch={true}\\n value={values}\\n option={option}\\n loading={loading}\\n onSearch={handleSearch}\\n placeholder=\\\"请选择选项\\\"\\n style={{ width: 200 }}\\n onChange={(value) => {\\n setValues(value)\\n }}\\n />\\n </Col>\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 在表单中使用\\n\\n在 [`<Form />`](#/components/form) 表单中应用 `<SearchSelect />` 组件。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption =[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ];\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n\\n function handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n setOption([...filterOpion]);\\n setLoading(false);\\n }, 500);\\n }\\n\\n return (\\n <div>\\n <Form\\n onSubmitError={(error) => {\\n if (error.filed) {\\n return { ...error.filed };\\n }\\n return null;\\n }}\\n onSubmit={({initial, current}) => {\\n const errorObj = {};\\n if (!current.selectField) {\\n errorObj.selectField = '默认需要选择内容，选择入内容';\\n }\\n if(Object.keys(errorObj).length > 0) {\\n const err = new Error();\\n err.filed = errorObj;\\n Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });\\n throw err;\\n }\\n Notify.success({\\n title: '提交成功！',\\n description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,\\n });\\n }}\\n fields={{\\n selectField: {\\n initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}],\\n children: (\\n <SearchSelect\\n allowClear\\n labelInValue={true}\\n showSearch={true}\\n mode=\\\"multiple\\\"\\n disabled={false}\\n placeholder=\\\"请选择选项\\\"\\n onSearch={handleSearch}\\n onChange={(v)=>{\\n console.log('onChange',v)\\n }}\\n option={option}\\n loading={loading}\\n />\\n )\\n },\\n selectSingle: {\\n initialValue:[{label: 'a7', value: 7}],\\n children: (\\n <SearchSelect\\n mode=\\\"single\\\"\\n labelInValue={true}\\n showSearch={true}\\n allowClear\\n disabled={false}\\n placeholder=\\\"请选择选项\\\"\\n onSearch={handleSearch}\\n onChange={(v)=>{\\n console.log('onChange',v)\\n }}\\n option={option}\\n loading={loading}\\n />\\n )\\n },\\n }}\\n >\\n {({ fields, state, canSubmit }) => {\\n return (\\n <div style={{ marginLeft:10}}>\\n <Row >\\n <Col fixed style={{width:200}}>{fields.selectField}</Col>\\n </Row>\\n <Row>\\n <Col fixed style={{width:200}}>{fields.selectSingle}</Col>\\n </Row>\\n <Row>\\n <Col fixed>\\n <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n </Col>\\n </Row>\\n <Row>\\n <Col>\\n <pre style={{ padding: 10, marginTop: 10 }}>\\n {JSON.stringify(state.current, null, 2)}\\n </pre>\\n </Col>\\n </Row>\\n </div>\\n )\\n }}\\n </Form>\\n </div>\\n );\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\\n| ---- | ---- | ---- | ---- | ---- |\\n| allowClear | 支持清除 | Boolean | `false` | - |\\n| disabled | 禁用选择器 | Boolean | `false` | - |\\n| mode | 选择模式: `multiple` `single` | String | `single` | - |\\n| defaultValue | 指定默认选中的条目 | String/Number | - | - |\\n| value | 指定当前选中的条目，多选时为一个数组 | String \\\\| Number \\\\| String[] \\\\| Number[] \\\\| LabeledValue \\\\| LabeledValue[] | - | - |\\n| placeholder | 选择框默认文字 | String | - | - |\\n| maxTagCount | 多选模式下展示tag的个数,默认所有 | number | - | - |\\n| labelInValue | 开启会把 Select 的 value 类型从 `string/number` 变为 `{ value: string/number, label: string }` | Boolean | `false` | - |\\n| showSearch | 是否可搜索 | Boolean | - | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` | - |\\n| tagProps | 将参数传递给 [`<Tag>`](#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |\\n| onChange | 选中 option，或 input 的 value，调用此函数 | function(value:String \\\\| Number \\\\| String[] \\\\| Number[] \\\\| LabeledValue \\\\| LabeledValue[]) | - | - |\\n| onSearch | 文本框值变化时回调 | function(value: String) | - | - |\\n| onSelect | 被选中时调用，参数为选中项的 value | function(value: String/Number ) | - | - |\\n| loading | 加载中状态 | Boolean | `false` | - |\\n| valueAmount | 多选模式下,限制最多选择多少个(value的长度) | number | - | - |\\n\";"],"names":[],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"static/js/7313.9c56b387.chunk.js","mappings":"gHAAA","sources":["../../packages/react-search-select/README.md"],"sourcesContent":["export default \"SearchSelect 搜索选择器\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-search-select)\\n[](https://npmjs.com/@uiw/react-search-select)\\n\\n搜索选择器\\n\\n```jsx\\nimport { SearchSelect, Row ,Col } from 'uiw';\\n// or\\nimport SearchSelect from '@uiw/react-search-select';\\n```\\n\\n## 基础示例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const option=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n return(\\n <Row gutter={20}>\\n <label>单选</label>\\n <Row>\\n <SearchSelect\\n mode=\\\"single\\\"\\n style={{ width: 200 }}\\n placeholder=\\\"请选择选项\\\"\\n option={option}\\n />\\n </Row>\\n <label>多选</label>\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n allowClear={true}\\n placeholder=\\\"请选择选项\\\"\\n option={option}\\n />\\n </Row>\\n <label>禁用</label>\\n <Row>\\n <SearchSelect\\n mode=\\\"single\\\"\\n style={{ width: 200 }}\\n allowClear={true}\\n placeholder=\\\"请选择选项\\\"\\n option={option}\\n disabled={true}\\n />\\n </Row>\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 尺寸\\n\\n通过 size 属性设置选择器的尺寸，提供三个尺寸参数设置。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const option=[\\n { label: '小尺寸', value: 1 },\\n { label: '默认尺寸', value: 2 },\\n { label: '大尺寸', value: 3 },\\n ]\\n\\n return(\\n <Row style={{ flexDirection: 'column' }}>\\n <Col>\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 150 }}\\n option={option}\\n value={[1]}\\n allowClear={true}\\n placeholder=\\\"请选择选项\\\"\\n size={'small'}\\n />\\n </Row>\\n </Col>\\n <Col style={{ margin:'10px 0px' }}>\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 175 }}\\n option={option}\\n value={[2]}\\n allowClear={true}\\n placeholder=\\\"请选择选项\\\"\\n />\\n </Row>\\n </Col>\\n <Col >\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n option={option}\\n value={[3]}\\n allowClear={true}\\n placeholder=\\\"请选择选项\\\"\\n size={'large'}\\n />\\n </Row>\\n </Col>\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 不同的value类型\\n\\n通`labelInValue`参数控制value类型和onChange时间返回参数的类型，设置为`true`时，`value`和`onChange`回调返回的值类型从[..., value]变成[..., { label, value}]\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const option=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n\\n const [loading, setLoading] = React.useState(false);\\n const [value, setValue] = React.useState([1 ,7]);\\n const [labelValue, setLabelValue] = React.useState([{ label: 'a1', value: 1 }, { label: 'a7', value: 7 }]);\\n\\n return(\\n <Row gutter={20}>\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n value={value}\\n option={option}\\n onChange={(value)=> {\\n console.log('value', value)\\n setValue(value)\\n }}\\n placeholder=\\\"请选择选项\\\"\\n />\\n </Row>\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n labelInValue={true}\\n style={{ width: 200 }}\\n option={option}\\n value={labelValue}\\n onChange={(value)=> {\\n console.log('value', value)\\n setLabelValue(value)\\n }}\\n plac\\n placeholder=\\\"请选择选项\\\"\\n />\\n </Row>\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 限制选项个数\\n\\n限制最多只能选择两个选项，达到最大后如果继续选择，会替换最后一个\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n const valueAmount = 2\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n const [values, setValues] = React.useState([ 1, 2, 7]);\\n\\n function handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n setOption([...filterOpion]);\\n setLoading(false);\\n }, 500);\\n }\\n\\n return(\\n <Row style={{ marginLeft: 10 }}>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n valueAmount={valueAmount}\\n allowClear\\n value={values}\\n placeholder=\\\"请选择选项\\\"\\n onSearch={handleSearch}\\n // onSelect={(value)=>console.log('onSelect',value)}\\n loading={loading}\\n option={option}\\n onChange={(value) => {\\n setValues(value)\\n }}\\n />\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 显示最大数量\\n\\n使用`maxTagCount`限制显示tag的数量，超过后使用省略tag显示\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n const maxTagCount = 4\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n const [values, setValues] = React.useState([\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a5', value: 5 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]);\\n\\n function handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n setOption([...filterOpion]);\\n setLoading(false);\\n }, 500);\\n }\\n\\n return(\\n <Row style={{ marginLeft: 10 }}>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n labelInValue={true}\\n maxTagCount={maxTagCount}\\n allowClear\\n value={values}\\n placeholder=\\\"请选择选项\\\"\\n onSearch={handleSearch}\\n loading={loading}\\n option={option}\\n onChange={(value) => {\\n setValues(value)\\n }}\\n />\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 启用搜索\\n\\n将`showSearch`设置为`true`启用搜索功能，组件没有内置搜索功能，但`option`是监听变化的，可以通过配合`onSearch`实现\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n const [value, setValue] = React.useState([1,7]);\\n const [values, setValues] = React.useState([1,7]);\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n\\n function handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n setOption([...filterOpion]);\\n setLoading(false);\\n }, 500);\\n }\\n\\n return(\\n <Row style={{ marginLeft: 10 }}>\\n <Col fixed style={{width:200}}>\\n <SearchSelect\\n mode=\\\"singe\\\"\\n showSearch={true}\\n value={value}\\n option={option}\\n loading={loading}\\n onSearch={handleSearch}\\n placeholder=\\\"请选择选项\\\"\\n style={{ width: 200 }}\\n onChange={(value) => {\\n setValue(value)\\n }}\\n />\\n </Col>\\n <Col fixed style={{width:200, marginLeft: 20}}>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n showSearch={true}\\n value={values}\\n option={option}\\n loading={loading}\\n onSearch={handleSearch}\\n placeholder=\\\"请选择选项\\\"\\n style={{ width: 200 }}\\n onChange={(value) => {\\n setValues(value)\\n }}\\n />\\n </Col>\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 在表单中使用\\n\\n在 [`<Form />`](#/components/form) 表单中应用 `<SearchSelect />` 组件。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption =[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ];\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n const refForm = React.useRef()\\n\\n function handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n setOption([...filterOpion]);\\n setLoading(false);\\n }, 500);\\n }\\n\\n const reSetForm = () => {\\n console.log('form', refForm.current.resetForm())\\n }\\n\\n return (\\n <div>\\n <Form\\n ref={refForm}\\n onSubmitError={(error) => {\\n if (error.filed) {\\n return { ...error.filed };\\n }\\n return null;\\n }}\\n onSubmit={({initial, current}) => {\\n const errorObj = {};\\n if (!current.selectField) {\\n errorObj.selectField = '默认需要选择内容，选择入内容';\\n }\\n if(Object.keys(errorObj).length > 0) {\\n const err = new Error();\\n err.filed = errorObj;\\n Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });\\n throw err;\\n }\\n Notify.success({\\n title: '提交成功！',\\n description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,\\n });\\n }}\\n fields={{\\n selectField: {\\n initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}],\\n children: (\\n <SearchSelect\\n allowClear\\n labelInValue={true}\\n showSearch={true}\\n mode=\\\"multiple\\\"\\n disabled={false}\\n placeholder=\\\"请选择选项\\\"\\n onSearch={handleSearch}\\n onChange={(v)=>{\\n console.log('onChange',v)\\n }}\\n option={option}\\n loading={loading}\\n />\\n )\\n },\\n selectSingle: {\\n initialValue:[{label: 'a7', value: 7}],\\n children: (\\n <SearchSelect\\n mode=\\\"single\\\"\\n labelInValue={true}\\n showSearch={true}\\n allowClear\\n disabled={false}\\n placeholder=\\\"请选择选项\\\"\\n onSearch={handleSearch}\\n onChange={(v)=>{\\n console.log('onChange',v)\\n }}\\n option={option}\\n loading={loading}\\n />\\n )\\n },\\n }}\\n >\\n {({ fields, state, canSubmit }) => {\\n return (\\n <div style={{ marginLeft:10}}>\\n <Row >\\n <Col fixed style={{width:200}}>{fields.selectField}</Col>\\n </Row>\\n <Row>\\n <Col fixed style={{width:200}}>{fields.selectSingle}</Col>\\n </Row>\\n <Row>\\n <Col fixed>\\n <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n </Col>\\n <Col fixed>\\n <Button onClick={reSetForm}>重置</Button>\\n </Col>\\n </Row>\\n <Row>\\n <Col>\\n <pre style={{ padding: 10, marginTop: 10 }}>\\n {JSON.stringify(state.current, null, 2)}\\n </pre>\\n </Col>\\n </Row>\\n </div>\\n )\\n }}\\n </Form>\\n </div>\\n );\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\\n| ---- | ---- | ---- | ---- | ---- |\\n| allowClear | 支持清除 | Boolean | `false` | - |\\n| disabled | 禁用选择器 | Boolean | `false` | - |\\n| mode | 选择模式: `multiple` `single` | String | `single` | - |\\n| defaultValue | 指定默认选中的条目 | String/Number | - | - |\\n| value | 指定当前选中的条目，多选时为一个数组 | String \\\\| Number \\\\| String[] \\\\| Number[] \\\\| LabeledValue \\\\| LabeledValue[] | - | - |\\n| placeholder | 选择框默认文字 | String | - | - |\\n| maxTagCount | 多选模式下展示tag的个数,默认所有 | number | - | - |\\n| labelInValue | 开启会把 Select 的 value 类型从 `string/number` 变为 `{ value: string/number, label: string }` | Boolean | `false` | - |\\n| showSearch | 是否可搜索 | Boolean | - | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` | - |\\n| tagProps | 将参数传递给 [`<Tag>`](#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |\\n| onChange | 选中 option，或 input 的 value，调用此函数 | function(value:String \\\\| Number \\\\| String[] \\\\| Number[] \\\\| LabeledValue \\\\| LabeledValue[]) | - | - |\\n| onSearch | 文本框值变化时回调 | function(value: String) | - | - |\\n| onSelect | 被选中时调用，参数为选中项的 value | function(value: String/Number ) | - | - |\\n| loading | 加载中状态 | Boolean | `false` | - |\\n| valueAmount | 多选模式下,限制最多选择多少个(value的长度) | number | - | - |\\n\";"],"names":[],"sourceRoot":""}
|