@uiw/doc 4.16.2 → 4.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/doc",
-  "version": "4.16.2",
+  "version": "4.17.0",
   "description": "UIW documentation website.",
   "homepage": "https://uiwjs.github.io",
   "files": [

package/web/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.1ccc09ce.css",
-    "main.js": "/static/js/main.45c2dcc5.js",
+    "main.js": "/static/js/main.43a096bb.js",
     "static/css/9200.14abaeb3.chunk.css": "/static/css/9200.14abaeb3.chunk.css",
     "static/js/9200.0a1f7353.chunk.js": "/static/js/9200.0a1f7353.chunk.js",
     "static/css/6730.296853db.chunk.css": "/static/css/6730.296853db.chunk.css",
@@ -163,7 +163,7 @@
     "static/js/2078.53137233.chunk.js": "/static/js/2078.53137233.chunk.js",
     "static/js/5253.7a8716a8.chunk.js": "/static/js/5253.7a8716a8.chunk.js",
     "static/js/6878.c6cec0d9.chunk.js": "/static/js/6878.c6cec0d9.chunk.js",
-    "static/js/4663.1e460a64.chunk.js": "/static/js/4663.1e460a64.chunk.js",
+    "static/js/4663.3af03860.chunk.js": "/static/js/4663.3af03860.chunk.js",
     "static/js/747.7519f1c0.chunk.js": "/static/js/747.7519f1c0.chunk.js",
     "static/js/5930.65ea3787.chunk.js": "/static/js/5930.65ea3787.chunk.js",
     "static/js/9836.8cd96a11.chunk.js": "/static/js/9836.8cd96a11.chunk.js",
@@ -185,7 +185,7 @@
     "static/js/8915.82c6b45a.chunk.js": "/static/js/8915.82c6b45a.chunk.js",
     "static/js/4781.ce661c8a.chunk.js": "/static/js/4781.ce661c8a.chunk.js",
     "static/js/1971.d746cb8b.chunk.js": "/static/js/1971.d746cb8b.chunk.js",
-    "static/js/7313.40ed89a6.chunk.js": "/static/js/7313.40ed89a6.chunk.js",
+    "static/js/7313.e4afef69.chunk.js": "/static/js/7313.e4afef69.chunk.js",
     "static/js/486.fc977627.chunk.js": "/static/js/486.fc977627.chunk.js",
     "static/js/8586.9d605493.chunk.js": "/static/js/8586.9d605493.chunk.js",
     "static/js/2692.db178ecc.chunk.js": "/static/js/2692.db178ecc.chunk.js",
@@ -226,7 +226,7 @@
     "static/js/5183.ac2ca737.js": "/static/js/5183.ac2ca737.js",
     "index.html": "/index.html",
     "main.1ccc09ce.css.map": "/static/css/main.1ccc09ce.css.map",
-    "main.45c2dcc5.js.map": "/static/js/main.45c2dcc5.js.map",
+    "main.43a096bb.js.map": "/static/js/main.43a096bb.js.map",
     "9200.14abaeb3.chunk.css.map": "/static/css/9200.14abaeb3.chunk.css.map",
     "9200.0a1f7353.chunk.js.map": "/static/js/9200.0a1f7353.chunk.js.map",
     "6730.296853db.chunk.css.map": "/static/css/6730.296853db.chunk.css.map",
@@ -388,7 +388,7 @@
     "2078.53137233.chunk.js.map": "/static/js/2078.53137233.chunk.js.map",
     "5253.7a8716a8.chunk.js.map": "/static/js/5253.7a8716a8.chunk.js.map",
     "6878.c6cec0d9.chunk.js.map": "/static/js/6878.c6cec0d9.chunk.js.map",
-    "4663.1e460a64.chunk.js.map": "/static/js/4663.1e460a64.chunk.js.map",
+    "4663.3af03860.chunk.js.map": "/static/js/4663.3af03860.chunk.js.map",
     "747.7519f1c0.chunk.js.map": "/static/js/747.7519f1c0.chunk.js.map",
     "5930.65ea3787.chunk.js.map": "/static/js/5930.65ea3787.chunk.js.map",
     "9836.8cd96a11.chunk.js.map": "/static/js/9836.8cd96a11.chunk.js.map",
@@ -410,7 +410,7 @@
     "8915.82c6b45a.chunk.js.map": "/static/js/8915.82c6b45a.chunk.js.map",
     "4781.ce661c8a.chunk.js.map": "/static/js/4781.ce661c8a.chunk.js.map",
     "1971.d746cb8b.chunk.js.map": "/static/js/1971.d746cb8b.chunk.js.map",
-    "7313.40ed89a6.chunk.js.map": "/static/js/7313.40ed89a6.chunk.js.map",
+    "7313.e4afef69.chunk.js.map": "/static/js/7313.e4afef69.chunk.js.map",
     "486.fc977627.chunk.js.map": "/static/js/486.fc977627.chunk.js.map",
     "8586.9d605493.chunk.js.map": "/static/js/8586.9d605493.chunk.js.map",
     "2692.db178ecc.chunk.js.map": "/static/js/2692.db178ecc.chunk.js.map",
@@ -454,6 +454,6 @@
     "static/js/vendors-react.a09f50fb.js",
     "static/js/5183.ac2ca737.js",
     "static/css/main.1ccc09ce.css",
-    "static/js/main.45c2dcc5.js"
+    "static/js/main.43a096bb.js"
   ]
 }

package/web/index.html

@@ -1 +1 @@
-<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-react.a09f50fb.js"></script><script defer="defer" src="./static/js/5183.ac2ca737.js"></script><script defer="defer" src="./static/js/main.45c2dcc5.js"></script><link href="./static/css/main.1ccc09ce.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-react.a09f50fb.js"></script><script defer="defer" src="./static/js/5183.ac2ca737.js"></script><script defer="defer" src="./static/js/main.43a096bb.js"></script><link href="./static/css/main.1ccc09ce.css" rel="stylesheet"></head><body><div id="root"></div></body></html>

package/web/static/js/4663.3af03860.chunk.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4663],{34663:function(n,e,l){l.r(e),e.default="Cascader \u7ea7\u8054\u9009\u62e9\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-cascader/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-cascader.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-cascader)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-cascader.svg?label=@uiw/react-cascader)](https://npmjs.com/@uiw/react-cascader)\n\n\u7ea7\u8054\u9009\u62e9\u6846\u3002v4.16.0\u4e2d\u6dfb\u52a0\n\n```jsx\nimport { Cascader, Row, Col  } from 'uiw';\n// or\nimport Cascader from '@uiw/react-cascader';\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 { Cascader } from 'uiw';\n\nconst Demo = () => {\n\n  const options = [\n    {\n      label: '\u4e0a\u6d77\u5e02',\n      value: 1,\n      children: [\n        {\n          label: '\u5f90\u6c47\u533a',\n          value: 4,\n          children: [\n            { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', value: 6 },\n            { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', value: 7 },\n            { label: '\u5916\u6ee9\u8857\u9053', value: 8 },\n          ]\n        },\n      ]\n    },\n    {\n      label: '\u5317\u4eac\u5e02',\n      value: 9,\n      children: [\n        {\n          label: '\u5d07\u6587\u533a',\n          value: 12,\n          children: [\n            { label: '\u4e1c\u82b1\u5e02\u8857\u9053', value: 13 },\n            { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', value: 14 },\n            { label: '\u524d\u95e8\u8857\u9053', value: 15 },\n          ]\n        },\n      ]\n    },\n  ];\n\n  return (\n    <Row>\n      <Row>\n        <Cascader\n          style={{ width:200 }}\n          allowClear={true}\n          placeholder=\"\u8bf7\u9009\u62e9\"\n          value={[1, 4, 7]}\n          option={options}\n          onChange={(value, seleteds) => console.log(value, seleteds)}\n        />\n      </Row>\n      <Row style={{ marginLeft: 20 }}>\n        <Cascader\n          style={{ width:200 }}\n          allowClear={true}\n          placeholder=\"\u8bf7\u9009\u62e9\"\n          value={[1, 4, 7]}\n          disabled={true}\n          option={options}\n          onChange={(value, seleteds) => console.log(value, seleteds)}\n        />\n      </Row>\n    </Row>\n  )\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u641c\u7d22\u9009\u9879\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Cascader } from 'uiw';\n\nconst Demo = () => {\n\n  const options = [\n    {\n      label: '\u4e0a\u6d77\u5e02',\n      value: 1,\n      children: [\n        {\n          label: '\u5f90\u6c47\u533a',\n          value: 4,\n          children: [\n            { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', value: 6 },\n            { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', value: 7 },\n            { label: '\u5916\u6ee9\u8857\u9053', value: 8 },\n          ]\n        },\n      ]\n    },\n    {\n      label: '\u5317\u4eac\u5e02',\n      value: 9,\n      children: [\n        {\n          label: '\u5d07\u6587\u533a',\n          value: 12,\n          children: [\n            { label: '\u4e1c\u82b1\u5e02\u8857\u9053', value: 13 },\n            { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', value: 14 },\n            { label: '\u524d\u95e8\u8857\u9053', value: 15 },\n          ]\n        },\n      ]\n    },\n  ];\n\n  return (\n    <Cascader\n      style={{ width: 200 }}\n      allowClear={true}\n      placeholder=\"\u8bf7\u9009\u62e9\"\n      value={[1, 4, 7]}\n      option={options}\n      onChange={(value, seleteds) => console.log(value, seleteds)}\n      onSearch={(text)=> console.log('text', text)}\n    />\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 `<Cascader />` \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, Cascader, Button } from 'uiw';\n\nconst Demo = () => {\nconst options = [\n    {\n      label: '\u4e0a\u6d77\u5e02',\n      value: 1,\n      children: [\n        {\n          label: '\u5f90\u6c47\u533a',\n          value: 4,\n          children: [\n            { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', value: 6 },\n            { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', value: 7 },\n            { label: '\u5916\u6ee9\u8857\u9053', value: 8 },\n          ]\n        },\n      ]\n    },\n    {\n      label: '\u5317\u4eac\u5e02',\n      value: 9,\n      children: [\n        {\n          label: '\u5d07\u6587\u533a',\n          value: 12,\n          children: [\n            { label: '\u4e1c\u82b1\u5e02\u8857\u9053', value: 13 },\n            { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', value: 14 },\n            { label: '\u524d\u95e8\u8857\u9053', value: 15 },\n          ]\n        },\n      ]\n    },\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          cascader: {\n            initialValue:[1, 4, 7],\n            children: (\n              <Cascader\n                allowClear={true}\n                onSearch={true}\n                placeholder=\"\u8bf7\u9009\u62e9\"\n                option={options}\n                onChange={(value, seleteds) => console.log(value, seleteds)}\n              />\n            )\n          },\n        }}\n      >\n        {({ fields, state, canSubmit }) => {\n          return (\n            <div>\n              <Row >\n                <Col fixed style={{width:200}}>{fields.cascader}</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| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - | - |\n| option | \u9009\u9879\u83dc\u5355 | { value: String \\| Number, label: React.ReactNode, children: Array<String \\| Number>} | - | - |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee\uff0c\u591a\u9009\u65f6\u4e3a\u4e00\u4e2a\u6570\u7ec4 | String[] \\| Number[] | - | - |\n| onChange | \u9009\u4e2d\u9009\u9879\u8c03\u7528\u6b64\u51fd\u6570 | function( isSeleted, value, selectedOptions) | - | - |\n| onSearch | \u5f00\u542f\u641c\u7d22\u9009\u9879 | functionon(searchText) \\| Boolean | - | v4.16.1 |\n"}}]);
+//# sourceMappingURL=4663.3af03860.chunk.js.map

package/web/static/js/4663.3af03860.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/4663.3af03860.chunk.js","mappings":"gHAAA","sources":["../../packages/react-cascader/README.md"],"sourcesContent":["export default \"Cascader 级联选择\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-cascader/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-cascader.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-cascader)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-cascader.svg?label=@uiw/react-cascader)](https://npmjs.com/@uiw/react-cascader)\\n\\n级联选择框。v4.16.0中添加\\n\\n```jsx\\nimport { Cascader, Row, Col  } from 'uiw';\\n// or\\nimport Cascader from '@uiw/react-cascader';\\n```\\n\\n## 基础示例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Cascader } from 'uiw';\\n\\nconst Demo = () => {\\n\\n  const options = [\\n    {\\n      label: '上海市',\\n      value: 1,\\n      children: [\\n        {\\n          label: '徐汇区',\\n          value: 4,\\n          children: [\\n            { label: '半淞园路街道', value: 6 },\\n            { label: '南京东路街道', value: 7 },\\n            { label: '外滩街道', value: 8 },\\n          ]\\n        },\\n      ]\\n    },\\n    {\\n      label: '北京市',\\n      value: 9,\\n      children: [\\n        {\\n          label: '崇文区',\\n          value: 12,\\n          children: [\\n            { label: '东花市街道', value: 13 },\\n            { label: '体育馆路街道', value: 14 },\\n            { label: '前门街道', value: 15 },\\n          ]\\n        },\\n      ]\\n    },\\n  ];\\n\\n  return (\\n    <Row>\\n      <Row>\\n        <Cascader\\n          style={{ width:200 }}\\n          allowClear={true}\\n          placeholder=\\\"请选择\\\"\\n          value={[1, 4, 7]}\\n          option={options}\\n          onChange={(value, seleteds) => console.log(value, seleteds)}\\n        />\\n      </Row>\\n      <Row style={{ marginLeft: 20 }}>\\n        <Cascader\\n          style={{ width:200 }}\\n          allowClear={true}\\n          placeholder=\\\"请选择\\\"\\n          value={[1, 4, 7]}\\n          disabled={true}\\n          option={options}\\n          onChange={(value, seleteds) => console.log(value, seleteds)}\\n        />\\n      </Row>\\n    </Row>\\n  )\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 搜索选项\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Cascader } from 'uiw';\\n\\nconst Demo = () => {\\n\\n  const options = [\\n    {\\n      label: '上海市',\\n      value: 1,\\n      children: [\\n        {\\n          label: '徐汇区',\\n          value: 4,\\n          children: [\\n            { label: '半淞园路街道', value: 6 },\\n            { label: '南京东路街道', value: 7 },\\n            { label: '外滩街道', value: 8 },\\n          ]\\n        },\\n      ]\\n    },\\n    {\\n      label: '北京市',\\n      value: 9,\\n      children: [\\n        {\\n          label: '崇文区',\\n          value: 12,\\n          children: [\\n            { label: '东花市街道', value: 13 },\\n            { label: '体育馆路街道', value: 14 },\\n            { label: '前门街道', value: 15 },\\n          ]\\n        },\\n      ]\\n    },\\n  ];\\n\\n  return (\\n    <Cascader\\n      style={{ width: 200 }}\\n      allowClear={true}\\n      placeholder=\\\"请选择\\\"\\n      value={[1, 4, 7]}\\n      option={options}\\n      onChange={(value, seleteds) => console.log(value, seleteds)}\\n      onSearch={(text)=> console.log('text', text)}\\n    />\\n  )\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 在表单中使用\\n\\n在 [`<Form />`](#/components/form) 表单中应用 `<Cascader />` 组件。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Row, Col, Cascader, Button } from 'uiw';\\n\\nconst Demo = () => {\\nconst options = [\\n    {\\n      label: '上海市',\\n      value: 1,\\n      children: [\\n        {\\n          label: '徐汇区',\\n          value: 4,\\n          children: [\\n            { label: '半淞园路街道', value: 6 },\\n            { label: '南京东路街道', value: 7 },\\n            { label: '外滩街道', value: 8 },\\n          ]\\n        },\\n      ]\\n    },\\n    {\\n      label: '北京市',\\n      value: 9,\\n      children: [\\n        {\\n          label: '崇文区',\\n          value: 12,\\n          children: [\\n            { label: '东花市街道', value: 13 },\\n            { label: '体育馆路街道', value: 14 },\\n            { label: '前门街道', value: 15 },\\n          ]\\n        },\\n      ]\\n    },\\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          cascader: {\\n            initialValue:[1, 4, 7],\\n            children: (\\n              <Cascader\\n                allowClear={true}\\n                onSearch={true}\\n                placeholder=\\\"请选择\\\"\\n                option={options}\\n                onChange={(value, seleteds) => console.log(value, seleteds)}\\n              />\\n            )\\n          },\\n        }}\\n      >\\n        {({ fields, state, canSubmit }) => {\\n          return (\\n            <div>\\n              <Row >\\n                <Col fixed style={{width:200}}>{fields.cascader}</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| placeholder | 选择框默认文字 | String | - | - |\\n| option | 选项菜单 | { value: String \\\\| Number, label: React.ReactNode, children: Array<String \\\\| Number>} | - | - |\\n| value | 指定当前选中的条目，多选时为一个数组 | String[] \\\\| Number[] | - | - |\\n| onChange | 选中选项调用此函数 | function( isSeleted, value, selectedOptions) | - | - |\\n| onSearch | 开启搜索选项 | functionon(searchText) \\\\| Boolean | - | v4.16.1 |\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/7313.e4afef69.chunk.js

@@ -0,0 +1,2 @@
+"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[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-select.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-select)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?label=@uiw/react-search-select)](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 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 [option, setOption] = React.useState(selectOption);\n  const [loading, setLoading] = React.useState(false);\n  const [values, setValues] = React.useState([{label: 'a7', value: 7},{label: 'a8', value: 8}]);\n  const [value, setValue] = React.useState([{label: 'a7', value: 7}]);\n\nfunction 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 gutter={20}>\n     <Row>\n       <SearchSelect\n         mode=\"multiple\"\n         style={{ width: 200 }}\n         showSearch={true}\n         labelInValue={true}\n         maxTagCount={6}\n         allowClear\n         value={values}\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n         onSearch={handleSearch}\n         // onSelect={(value)=>console.log('onSelect',value)}\n         loading={loading}\n         option={option}\n         onChange={(value) => {\n           console.log('value', value)\n           setValues(value)\n         }}\n       />\n     </Row>\n     <Row>\n       <SearchSelect\n         mode=\"single\"\n         style={{ width: 200 }}\n         showSearch={true}\n         labelInValue={true}\n         maxTagCount={6}\n         allowClear\n         value={value}\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n         onSearch={handleSearch}\n         // onSelect={(value)=>console.log('onSelect',value)}\n         loading={loading}\n         option={option}\n         onChange={(value) => {\n           console.log('value', value)\n           setValue(value)\n         }}\n       />\n     </Row>\n     <Row>\n       <SearchSelect\n         mode=\"single\"\n         style={{ width: 200 }}\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n         disabled={true}\n       />\n     </Row>\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u9650\u5236\u9009\u9879\u4e2a\u6570\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          showSearch={true}\n          valueAmount={valueAmount}\n          allowClear\n          value={values}\n          placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\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\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          showSearch={true}\n          labelInValue={true}\n          maxTagCount={maxTagCount}\n          allowClear\n          value={values}\n          placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\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## \u4e0d\u53ef\u641c\u7d22\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 [values, setValues] = React.useState([1,7]);\n\n  return(\n    <Row style={{ marginLeft: 10 }}>\n        <SearchSelect\n          mode=\"multiple\"\n          style={{ width: 200 }}\n          showSearch={true}\n          labelInValue={false}\n          showSearch={false}\n          placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n          value={values}\n          option={selectOption}\n          onChange={(value) => {\n            setValues(value)\n          }}\n        />\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\u8f93\u5165\u9009\u62e9\"\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\u8f93\u5165\u9009\u62e9\"\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>`](https://uiwjs.github.io/#/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"}}]);
+//# sourceMappingURL=7313.e4afef69.chunk.js.map

package/web/static/js/7313.e4afef69.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/7313.e4afef69.chunk.js","mappings":"gHAAA","sources":["../../packages/react-search-select/README.md"],"sourcesContent":["export default \"SearchSelect 搜索选择器\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-select.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-select)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?label=@uiw/react-search-select)](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 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 [option, setOption] = React.useState(selectOption);\\n  const [loading, setLoading] = React.useState(false);\\n  const [values, setValues] = React.useState([{label: 'a7', value: 7},{label: 'a8', value: 8}]);\\n  const [value, setValue] = React.useState([{label: 'a7', value: 7}]);\\n\\nfunction 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 gutter={20}>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"multiple\\\"\\n         style={{ width: 200 }}\\n         showSearch={true}\\n         labelInValue={true}\\n         maxTagCount={6}\\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           console.log('value', value)\\n           setValues(value)\\n         }}\\n       />\\n     </Row>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"single\\\"\\n         style={{ width: 200 }}\\n         showSearch={true}\\n         labelInValue={true}\\n         maxTagCount={6}\\n         allowClear\\n         value={value}\\n         placeholder=\\\"请输入选择\\\"\\n         onSearch={handleSearch}\\n         // onSelect={(value)=>console.log('onSelect',value)}\\n         loading={loading}\\n         option={option}\\n         onChange={(value) => {\\n           console.log('value', value)\\n           setValue(value)\\n         }}\\n       />\\n     </Row>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"single\\\"\\n         style={{ width: 200 }}\\n         placeholder=\\\"请输入选择\\\"\\n         disabled={true}\\n       />\\n     </Row>\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\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          showSearch={true}\\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<!--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          showSearch={true}\\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<!--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 [values, setValues] = React.useState([1,7]);\\n\\n  return(\\n    <Row style={{ marginLeft: 10 }}>\\n        <SearchSelect\\n          mode=\\\"multiple\\\"\\n          style={{ width: 200 }}\\n          showSearch={true}\\n          labelInValue={false}\\n          showSearch={false}\\n          placeholder=\\\"请输入选择\\\"\\n          value={values}\\n          option={selectOption}\\n          onChange={(value) => {\\n            setValues(value)\\n          }}\\n        />\\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>`](https://uiwjs.github.io/#/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":""}