@uiw/doc 4.20.0 → 4.21.2

package/web/static/js/5468.50941a38.chunk.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5468],{25468:function(n,e,l){l.r(e),e.default="Tree \u6811\u5f62\u63a7\u4ef6\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tree/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-tree.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-tree)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-tree.svg?label=@uiw/react-tree)](https://npmjs.com/@uiw/react-tree)\n\n\u4f7f\u7528\u6811\u63a7\u4ef6\u53ef\u4ee5\u5b8c\u6574\u5c55\u73b0\u5176\u4e2d\u7684\u5c42\u7ea7\u5173\u7cfb\uff0c\u5e76\u5177\u6709\u5c55\u5f00\u6536\u8d77\u9009\u62e9\u7b49\u4ea4\u4e92\u529f\u80fd\u3002\n\n```jsx\nimport { Tree } from 'uiw';\n// or\nimport Tree from '@uiw/react-tree';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Tree, Card, Row, Col, } from 'uiw';\n\nconst data = [\n  {\n    label: '\u6e56\u5317\u7701',\n    key: '0-0-0',\n    children:[\n      {\n        label: '\u6b66\u6c49\u5e02',\n        key: '0-1-0',\n        children:[\n          { label: '\u65b0\u6d32\u533a', key: '0-1-1' },\n          { label: '\u6b66\u660c\u533a', key: '0-1-2' },\n          {\n            label: '\u6c49\u5357\u533a',\n            key: '0-1-3',\n            children:[\n              { label: '\u6c49\u5357\u533a1', key: '0-1-3-1' },\n              { label: '\u6c49\u5357\u533a2', key: '0-1-3-2' },\n              { label: '\u6c49\u5357\u533a3', key: '0-1-3-3' },\n            ]\n          },\n        ]\n      },\n      { label: '\u9ec4\u5188\u5e02', key: '0-2-0' },\n      {\n        label: '\u9ec4\u77f3\u5e02',\n        key: '0-3-0',\n        children:[\n          { label: '\u9752\u5c71\u533a', key: '0-3-1' },\n          { label: '\u9ec4\u9642\u533a', key: '0-3-2' },\n          { label: '\u9752\u5c71\u533a', key: '0-3-3' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u4e0a\u6d77\u5e02',\n    key: '1-0-0',\n    children:[\n      { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n      { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n      {\n        label: '\u5f90\u6c47\u533a',\n        key: '1-0-3',\n        children:[\n          { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n          { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n          { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u5317\u4eac\u5e02',\n    key: '2-0-0',\n    children:[\n      { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n      { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n      {\n        label: '\u5d07\u6587\u533a',\n        key: '2-3-0',\n        children:[\n          { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n          { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n          { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n        ]\n      },\n    ]\n  }\n];\n\nconst Demo = () => (\n  <div>\n    <Row gutter={10}>\n      <Col fixed>\n        <Card title=\"\u5355\u9009\">\n          <Tree\n            defaultExpandAll={true}\n            data={data}\n            onExpand={(key, expanded, data, node) => {\n              console.log('onExpand',key, expanded, data, node);\n            }}\n            onSelected={(key, selected, item, evn) => {\n              console.log('onSelected',key, selected, item, evn);\n            }}\n          />\n        </Card>\n      </Col>\n      <Col fixed>\n        <Card title=\"\u591a\u9009\uff0c\u5b50\u8282\u70b9\u4e0d\u53d7\u63a7\">\n          <Tree\n          autoExpandParent={true}\n            data={data}\n            multiple\n            onExpand={(key, expanded, data, node) => {\n              console.log(key, expanded, data, node);\n            }}\n            onSelected={(key, selected, item, evn) => {\n              console.log(key, selected, item, evn);\n            }}\n          />\n        </Card>\n      </Col>\n      <Col fixed>\n        <Card title=\"\u591a\u9009\uff0c\u5b50\u8282\u70b9\u53d7\u63a7\">\n          <Tree\n            data={data}\n            multiple\n            checkStrictly\n            onExpand={(key, expanded, data, node) => {\n              console.log(key, expanded, data, node);\n            }}\n            onSelected={(key, selected, item, evn) => {\n              console.log(key, selected, item, evn);\n            }}\n          />\n        </Card>\n      </Col>\n    </Row>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u56fe\u6807\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Tree, Card, Row, Col, Icon } from 'uiw';\n\nconst data = [\n  {\n    label: '\u6e56\u5317\u7701',\n    key: '0-0-0',\n    children:[\n      {\n        label: '\u6b66\u6c49\u5e02',\n        key: '0-1-0',\n        children:[\n          { label: '\u65b0\u6d32\u533a', key: '0-1-1' },\n          { label: '\u6b66\u660c\u533a', key: '0-1-2' },\n          {\n            label: '\u6c49\u5357\u533a',\n            key: '0-1-3',\n            children:[\n              { label: '\u6c49\u5357\u533a1', key: '0-1-3-1' },\n              { label: '\u6c49\u5357\u533a2', key: '0-1-3-2' },\n              { label: '\u6c49\u5357\u533a3', key: '0-1-3-3' },\n            ]\n          },\n        ]\n      },\n      { label: '\u9ec4\u5188\u5e02', key: '0-2-0' },\n      {\n        label: '\u9ec4\u77f3\u5e02',\n        key: '0-3-0',\n        children:[\n          { label: '\u9752\u5c71\u533a', key: '0-3-1' },\n          { label: '\u9ec4\u9642\u533a', key: '0-3-2' },\n          { label: '\u9752\u5c71\u533a', key: '0-3-3' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u4e0a\u6d77\u5e02',\n    key: '1-0-0',\n    children:[\n      { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n      { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n      {\n        label: '\u5f90\u6c47\u533a',\n        key: '1-0-3',\n        children:[\n          { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n          { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n          { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u5317\u4eac\u5e02',\n    key: '2-0-0',\n    children:[\n      { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n      { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n      {\n        label: '\u5d07\u6587\u533a',\n        key: '2-3-0',\n        children:[\n          { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n          { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n          { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n        ]\n      },\n    ]\n  }\n];\n\nconst Demo = () => (\n  <div>\n    <Row gutter={10}>\n      <Col fixed>\n        <Card title=\"\u6807\u9898\u4e2d\u6dfb\u52a0\u56fe\u6807\">\n          <Tree\n            data={data}\n            renderTitle={(item, { selected, noChild }) => (\n              <>\n                <Icon style={{ display: '-webkit-inline-box' }} type={noChild ? 'smile-o' : 'apple'} />\n                <span>{item.label}</span>\n              </>\n            )}\n            onExpand={(key, expanded, data, node) => {\n              console.log(key, expanded, data, node);\n            }}\n            onSelected={(key, selected, item, evn) => {\n              console.log(key, selected, item, evn);\n            }}\n          />\n        </Card>\n      </Col>\n      <Col fixed>\n        <Card title=\"\u66ff\u6362\u9ed8\u8ba4\u6298\u53e0\u56fe\u6807\">\n          <Tree\n            data={data}\n            icon=\"right-circle-o\"\n            onExpand={(key, expanded, data, node) => {\n              console.log(key, expanded, data, node);\n            }}\n            onSelected={(key, selected, item, evn) => {\n              console.log(key, selected, item, evn);\n            }}\n          />\n        </Card>\n      </Col>\n      <Col fixed>\n        <Card title=\"\u81ea\u5b9a\u4e49\u5c55\u5f00\u56fe\u6807\">\n          <Tree\n            data={data}\n            iconAnimation={false}\n            icon={(data, { isOpen, noChild }) => {\n              if(isOpen && !noChild) {\n                return 'folder-open';\n              } else if (!noChild) {\n                return 'folder';\n              }\n              return 'file-text';\n            }}\n            onExpand={(key, expanded, data) => {\n              console.log(key, expanded, data);\n            }}\n            onSelected={(key, selected, item, evn) => {\n              console.log(key, selected, item, evn);\n            }}\n          />\n        </Card>\n      </Col>\n    </Row>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u9009\u4e2d\u6548\u679c\n\n\u901a\u8fc7\u8bbe\u7f6e `checkStrictly` \u7236\u8282\u70b9\u53d7\u5b50\u8282\u70b9\u63a7\u5236\uff0c\u8bbe\u7f6e `multiple` \u4e3a\u591a\u9009\uff0c\u8bbe\u7f6e `isSelected` \u53d6\u6d88\u9009\u4e2d\u6548\u679c\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528 [`TreeChecked`](#/components/tree-checked) \u7ec4\u4ef6\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Tree, Card, Row, Col } from 'uiw';\n\nconst data = [\n  {\n    label: '\u6e56\u5317\u7701',\n    key: '0-0-0',\n    children:[\n      {\n        label: '\u6b66\u6c49\u5e02',\n        key: '0-1-0',\n        children:[\n          { label: '\u65b0\u6d32\u533a', key: '0-1-1', disabled: true },\n          { label: '\u6b66\u660c\u533a', key: '0-1-2' },\n          {\n            label: '\u6c49\u5357\u533a',\n            key: '0-1-3',\n            children:[\n              { label: '\u6c49\u5357\u533a1', key: '0-1-3-1' },\n              { label: '\u6c49\u5357\u533a2', key: '0-1-3-2' },\n              { label: '\u6c49\u5357\u533a3', key: '0-1-3-3' },\n            ]\n          },\n        ]\n      },\n      { label: '\u9ec4\u5188\u5e02', key: '0-2-0' },\n      {\n        label: '\u9ec4\u77f3\u5e02',\n        key: '0-3-0',\n        children:[\n          { label: '\u9752\u5c71\u533a', key: '0-3-1' },\n          { label: '\u9ec4\u9642\u533a', key: '0-3-2' },\n          { label: '\u9752\u5c71\u533a', key: '0-3-3' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u4e0a\u6d77\u5e02',\n    key: '1-0-0',\n    children:[\n      { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n      { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n      {\n        label: '\u5f90\u6c47\u533a',\n        key: '1-0-3',\n        children:[\n          { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n          { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n          { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u5317\u4eac\u5e02',\n    key: '2-0-0',\n    children:[\n      { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n      { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n      {\n        label: '\u5d07\u6587\u533a',\n        key: '2-3-0',\n        children:[\n          { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n          { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n          { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n        ]\n      },\n    ]\n  },\n  { label: '\u6fb3\u95e8', key: '3' },\n];\n\nconst Demo = () => (\n  <div>\n    <Tree\n      data={data}\n      selectedKeys={['0-1-1']}\n      multiple\n      isSelected={false}\n      checkStrictly\n      renderTitle={(item, { selected, isHalfChecked }) => {\n        if(isHalfChecked) {\n          return (\n            <><Icon type=\"minus-square-o\" style={{ color: 'green' }} /> <span>{item.label}</span></>\n          );\n        }\n        if (selected) {\n          return (\n            <><Icon type=\"check-square-o\" style={{ color: 'green' }} /> <span>{item.label}</span></>\n          );\n        }\n        return (\n          <><Icon type=\"square-o\" style={{ color: '#b6b6b6' }} /> <span>{item.label}</span></>\n        );\n      }}\n      onExpand={(key, expanded, data, node) => {\n        console.log(key, expanded, data, node);\n      }}\n      onSelected={(key, selected, item, evn) => {\n        console.log(key, selected, item, evn);\n      }}\n    />\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u7981\u7528\u9009\u9879\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Tree, Card, Row, Col, Icon } from 'uiw';\n\nconst data = [\n  {\n    label: '\u6e56\u5317\u7701',\n    key: '0-0-0',\n    children:[\n      {\n        label: '\u6b66\u6c49\u5e02',\n        disabled: true,\n        key: '0-1-0',\n        children:[\n          { label: '\u65b0\u6d32\u533a', key: '0-1-1' },\n          { label: '\u6b66\u660c\u533a', key: '0-1-2' },\n          {\n            label: '\u6c49\u5357\u533a',\n            key: '0-1-3',\n            children:[\n              { label: '\u6c49\u5357\u533a1', key: '0-1-3-1' },\n              { label: '\u6c49\u5357\u533a2', key: '0-1-3-2' },\n              { label: '\u6c49\u5357\u533a3', key: '0-1-3-3' },\n            ]\n          },\n        ]\n      },\n      { label: '\u9ec4\u5188\u5e02', key: '0-2-0' },\n      {\n        label: '\u9ec4\u77f3\u5e02',\n        key: '0-3-0',\n        children:[\n          { label: '\u9752\u5c71\u533a', key: '0-3-1' },\n          { label: '\u9ec4\u9642\u533a', key: '0-3-2' },\n          { label: '\u9752\u5c71\u533a', key: '0-3-3' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u4e0a\u6d77\u5e02',\n    key: '1-0-0',\n    children:[\n      { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n      { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n      {\n        label: '\u5f90\u6c47\u533a',\n        key: '1-0-3',\n        children:[\n          { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n          { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n          { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u5317\u4eac\u5e02',\n    key: '2-0-0',\n    children:[\n      { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n      { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n      {\n        label: '\u5d07\u6587\u533a',\n        key: '2-3-0',\n        children:[\n          { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n          { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n          { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n        ]\n      },\n    ]\n  }\n];\n\nconst Demo = () => (\n  <div>\n    <Row gutter={10}>\n      <Col fixed>\n        <Card title=\"\u57fa\u7840\u4f7f\u7528\">\n          <Tree data={data} />\n        </Card>\n      </Col>\n      <Col fixed>\n        <Card title=\"\u81ea\u5b9a\u4e49\u56fe\u6807\">\n          <Tree\n            data={data}\n            renderTitle={(item, { selected, noChild, disabledStyle }) => (\n              <>\n                <Icon style={{ display: '-webkit-inline-box', ...disabledStyle }} type={noChild ? 'smile-o' : 'apple'} />\n                <span style={disabledStyle}>{item.label}</span>\n              </>\n            )}\n          />\n        </Card>\n      </Col>\n      <Col fixed>\n        <Card title=\"\u81ea\u5b9a\u4e49\u9009\u4e2d\u6548\u679c\">\n          <Tree\n            data={data}\n            renderTitle={(item, { selected, isHalfChecked, disabledStyle, disabledClass }) => {\n              if(isHalfChecked) {\n                return (\n                  <><Icon type=\"minus-square-o\" style={{ color: 'green', ...disabledStyle }} /> <span className={disabledClass} >{item.label}</span></>\n                );\n              }\n              if (selected) {\n                return (\n                  <><Icon type=\"check-square-o\" style={{ color: 'green', ...disabledStyle }} /> <span className={disabledClass} >{item.label}</span></>\n                );\n              }\n              return (\n                <><Icon type=\"square-o\" style={{ color: '#b6b6b6',...disabledStyle }} /> <span className={disabledClass} >{item.label}</span></>\n              );\n            }}\n          />\n        </Card>\n      </Col>\n    </Row>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u8fde\u63a5\u7ebf\n\n\u5e26\u8fde\u63a5\u7ebf\u7684\u6811\uff0c\u901a\u8fc7\u8bbe\u7f6e `showLine`\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Tree, Card, Row, Col } from 'uiw';\n\nconst data = [\n  {\n    label: '\u6e56\u5317\u7701',\n    key: '0-0-0',\n    children:[\n      {\n        label: '\u6b66\u6c49\u5e02',\n        key: '0-1-0',\n        children:[\n          { label: '\u65b0\u6d32\u533a', key: '0-1-1' },\n          { label: '\u6b66\u660c\u533a', key: '0-1-2' },\n          {\n            label: '\u6c49\u5357\u533a',\n            key: '0-1-3',\n            children:[\n              { label: '\u6c49\u5357\u533a1', key: '0-1-3-1' },\n              { label: '\u6c49\u5357\u533a2', key: '0-1-3-2' },\n              { label: '\u6c49\u5357\u533a3', key: '0-1-3-3' },\n            ]\n          },\n        ]\n      },\n      { label: '\u9ec4\u5188\u5e02', key: '0-2-0' },\n      {\n        label: '\u9ec4\u77f3\u5e02',\n        key: '0-3-0',\n        children:[\n          { label: '\u9752\u5c71\u533a', key: '0-3-1' },\n          { label: '\u9ec4\u9642\u533a', key: '0-3-2' },\n          { label: '\u9752\u5c71\u533a', key: '0-3-3' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u4e0a\u6d77\u5e02',\n    key: '1-0-0',\n    children:[\n      { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n      { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n      {\n        label: '\u5f90\u6c47\u533a',\n        key: '1-0-3',\n        children:[\n          { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n          { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n          { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u5317\u4eac\u5e02',\n    key: '2-0-0',\n    children:[\n      { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n      { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n      {\n        label: '\u5d07\u6587\u533a',\n        key: '2-3-0',\n        children:[\n          { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n          { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n          { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n        ]\n      },\n    ]\n  }\n];\n\nconst Demo = () => (\n  <div>\n    <Row gutter={10}>\n      <Col fixed>\n        <Card title=\"\u81ea\u5b9a\u4e49\u5c55\u5f00\u56fe\u6807\">\n          <Tree\n            data={data}\n            showLine\n            iconAnimation={false}\n            icon={(data, {isOpen, noChild}) => {\n              if(isOpen && !noChild) {\n                return 'folder-open';\n              } else if (!noChild) {\n                return 'folder';\n              }\n              return 'file-text';\n            }}\n            onExpand={(key, expanded, data) => {\n              console.log(key, expanded, data);\n            }}\n            onSelected={(key, selected, item, evn) => {\n              console.log(key, selected, item, evn);\n            }}\n          />\n        </Card>\n      </Col>\n      <Col fixed>\n        <Card title=\"\u81ea\u5b9a\u4e49\u5c55\u5f00\u56fe\u6807\">\n          <Tree\n            data={data}\n            showLine\n            icon={(data, {isOpen, noChild}) => {\n              if(noChild) {\n                return 'file-text';\n              }\n            }}\n            onExpand={(key, expanded, data) => {\n              console.log(key, expanded, data);\n            }}\n            onSelected={(key, selected, item, evn) => {\n              console.log(key, selected, item, evn);\n            }}\n          />\n        </Card>\n      </Col>\n    </Row>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u9ed8\u8ba4\u5c55\u5f00\u6811\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Tree, Card, Row, Col } from 'uiw';\n\nconst data = [\n  {\n    label: '\u6e56\u5317\u7701',\n    key: '0-0-0',\n    children:[\n      {\n        label: '\u6b66\u6c49\u5e02',\n        key: '0-1-0',\n        children:[\n          { label: '\u65b0\u6d32\u533a', key: '0-1-1' },\n          { label: '\u6b66\u660c\u533a', key: '0-1-2' },\n          {\n            label: '\u6c49\u5357\u533a',\n            key: '0-1-3',\n            children:[\n              { label: '\u6c49\u5357\u533a1', key: '0-1-3-1' },\n              { label: '\u6c49\u5357\u533a2', key: '0-1-3-2' },\n              { label: '\u6c49\u5357\u533a3', key: '0-1-3-3' },\n            ]\n          },\n        ]\n      },\n      { label: '\u9ec4\u5188\u5e02', key: '0-2-0' },\n      {\n        label: '\u9ec4\u77f3\u5e02',\n        key: '0-3-0',\n        children:[\n          { label: '\u9752\u5c71\u533a', key: '0-3-1' },\n          { label: '\u9ec4\u9642\u533a', key: '0-3-2' },\n          { label: '\u9752\u5c71\u533a', key: '0-3-3' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u4e0a\u6d77\u5e02',\n    key: '1-0-0',\n    children:[\n      { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n      { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n      {\n        label: '\u5f90\u6c47\u533a',\n        key: '1-0-3',\n        children:[\n          { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n          { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n          { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u5317\u4eac\u5e02',\n    key: '2-0-0',\n    children:[\n      { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n      { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n    ]\n  }\n];\n\nconst Demo = () => (\n  <div>\n    <Row gutter={10}>\n      <Col fixed>\n        <Card title=\"\u9ed8\u8ba4\u5c55\u5f00\u90e8\u5206\">\n          <Tree\n            data={data}\n            showLine\n            openKeys={['0-0-0', '0-1-0']}\n            iconAnimation={false}\n            icon={(data, {isOpen, noChild}) => {\n              if(isOpen && !noChild) {\n                return 'folder-open';\n              } else if (!noChild) {\n                return 'folder';\n              }\n              return 'file-text';\n            }}\n            onExpand={(key, expanded, data) => {\n              console.log(key, expanded, data);\n            }}\n            onSelected={(key, selected, item, evn) => {\n              console.log(key, selected, item, evn);\n            }}\n          />\n        </Card>\n      </Col>\n      <Col fixed>\n        <Card title=\"\u5c55\u5f00\u6240\u6709\">\n          <Tree\n            data={data}\n            showLine\n            defaultExpandAll\n            icon={(data, {isOpen, noChild}) => {\n              if(noChild) {\n                return 'file-text';\n              }\n            }}\n            onExpand={(key, expanded, data) => {\n              console.log(key, expanded, data);\n            }}\n            onSelected={(key, selected, item, evn) => {\n              console.log(key, selected, item, evn);\n            }}\n          />\n        </Card>\n      </Col>\n    </Row>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### Form\u4e2d\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Tree, Row, Col, Form, Button } from 'uiw';\n\nconst data = [\n  {\n    label: '\u6e56\u5317\u7701',\n    key: '0-0-0',\n    children:[\n      {\n        label: '\u6b66\u6c49\u5e02',\n        key: '0-1-0',\n        children:[\n          { label: '\u65b0\u6d32\u533a', key: '0-1-1' },\n          { label: '\u6b66\u660c\u533a', key: '0-1-2' },\n          {\n            label: '\u6c49\u5357\u533a',\n            key: '0-1-3',\n            children:[\n              { label: '\u6c49\u5357\u533a1', key: '0-1-3-1' },\n              { label: '\u6c49\u5357\u533a2', key: '0-1-3-2' },\n              { label: '\u6c49\u5357\u533a3', key: '0-1-3-3' },\n            ]\n          },\n        ]\n      },\n      { label: '\u9ec4\u5188\u5e02', key: '0-2-0' },\n      {\n        label: '\u9ec4\u77f3\u5e02',\n        key: '0-3-0',\n        children:[\n          { label: '\u9752\u5c71\u533a', key: '0-3-1' },\n          { label: '\u9ec4\u9642\u533a', key: '0-3-2' },\n          { label: '\u9752\u5c71\u533a', key: '0-3-3' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u4e0a\u6d77\u5e02',\n    key: '1-0-0',\n    children:[\n      { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n      { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n      {\n        label: '\u5f90\u6c47\u533a',\n        key: '1-0-3',\n        children:[\n          { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n          { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n          { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u5317\u4eac\u5e02',\n    key: '2-0-0',\n    children:[\n      { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n      { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n    ]\n  }\n];\n\nconst Demo = () => {\n  return (\n    <Form\n      onChange={({ initial, current }) => {}}\n      resetOnSubmit={false}\n      onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}\n      onSubmit={({initial, current}) => {\n        console.log('current: ', current);\n        const ErrObj = {};\n        if (current.tree === 'unknown') {\n          ErrObj.radioGroup = '\u8bf7\u9009\u62e9\u6027\u522b\uff01';\n        }\n        if(Object.keys(ErrObj).length > 0) {\n          const err = new Error();\n          err.filed = ErrObj;\n          throw err;\n        }\n        Notify.success({\n          title: '\u63d0\u4ea4\u6210\u529f\uff01', description: `\u586b\u5199\uff1a\u3010\u586b\u5199\u6210\u529f\u3011\uff01`\n        });\n      }}\n      fields={{\n        tree: {\n          value: 'region',\n          label: '\u8bf7\u8f93\u5165\u5185\u5bb9',\n          help: '\u5fc5\u987b\u9009\u62e9\u5730\u533a\uff01',\n          initialValue: ['0-1-1'],\n          children: <Tree\n            // multiple \n            checkStrictly\n            data={data}\n          />,\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        return (\n          <div>\n            <Row>\n              <Col>{fields.tree}</Col>\n            </Row>\n            <Row>\n              <Col>\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  )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| data | \u5c55\u793a\u6570\u636e | Array | `TreeData[]` |\n| openKeys | \u8282\u70b9\u5c55\u5f00 `key` | Array | `[]` |\n| selectedKeys | \u8bbe\u7f6e\u9009\u4e2d\u7684\u6811\u8282\u70b9 | Array | `[]` |\n| autoExpandParent | \u662f\u5426\u81ea\u52a8\u5c55\u5f00\u7236\u8282\u70b9 | Boolean | `true` |\n| defaultExpandAll | \u9ed8\u8ba4\u5c55\u5f00\u6240\u6709\u6811\u8282\u70b9 | Boolean | `false` |\n| iconAnimation | \u5c55\u5f00\u6536\u7f29\u56fe\u6807\uff0c\u53c2\u6570\u8bbe\u4e3a `false` \u7981\u7528\u52a8\u753b | Boolean | `true` |\n| isSelected | \u662f\u5426\u9009\u4e2d\u5f53\u524d\u8282\u70b9\u6837\u5f0f\u3002 | Boolean | `true` |\n| showLine | \u662f\u5426\u5c55\u793a\u8fde\u63a5\u7ebf | Boolean | `false` |\n| checkStrictly | \u5b50\u8282\u70b9\u53d7\u7236\u8282\u70b9\u63a7\u5236\u8bbe\u7f6e `true`\uff0c\u9700\u8981\u914d\u5408 `multiple` \u53c2\u6570\u4f7f\u7528\u3002 | Boolean | `false` |\n| multiple | \u652f\u6301\u70b9\u9009\u591a\u4e2a\u8282\u70b9 | Boolean | `false` |\n| icon | \u91cd\u65b0\u5b9a\u4e49\uff0c\u5c55\u5f00\u6536\u7f29\u56fe\u6807\uff0c\u5f53\u4e3a\u51fd\u6570\u65f6\u89c6\u4e3a\u81ea\u5b9a\u4e49\u56fe\u6807\uff0c\u5e76\u5c55\u793a\u975e\u6298\u53e0\u9879\u7684\u56fe\u6807\u3002 | ~~Function(data: object, noChild: bool)/String/Node~~ `@3.4.0+` Function(data: object, { selected: bool, noChild: bool })/String/Node| - |\n| renderTitle | \u91cd\u65b0\u5b9a\u4e49\u6bcf\u4e2a\u6807\u9898\u8282\u70b9\u7684\u663e\u793a | ~~Function(item, selected: bool, noChild: bool)~~ `@3.4.0+` Function(item: TreeData, node?: Node) => React.ReactElement; | - |\n| onSelected | \u70b9\u51fb\u9009\u62e9\u6811\u8282\u70b9\u89e6\u53d1 | Function(selectedKeys: array, key, selected: bool, data, e) | - |\n| onExpand | \u5c55\u5f00/\u6536\u8d77\u8282\u70b9\u65f6\u89e6\u53d1 | Function(key, expanded: bool, data, evn) | - |\n\n## Node Type \n| \u53c2\u6570 | \u7c7b\u578b | \u7248\u672c |\n|--------- |-------- |-------- |\n| selected | boolean | - |\n| noChild  | boolean | - |\n| isHalfChecked  | boolean | `@3.4.0+` |\n| openKeys  | Props['openKeys'] | `@3.4.0+` |\n| selectedKeys  | Props['selectedKeys'] | `@3.4.0+` |\n| disabled  | boolean | `@4.20.0+` |\n| disabledClass  | string | `@4.20.0+` |\n| disabledStyle  | React.CSSProperties | `@4.20.0+` |\n### data\n\n```json\n[\n  {\n    \"label\": \"\u6e56\u5317\u7701\",\n    \"key\": \"0-0-0\",\n    \"disabled\": false,\n    \"children\":[]\n  }\n  ...\n]\n```\n"}}]);
+//# sourceMappingURL=5468.50941a38.chunk.js.map

package/web/static/js/5468.50941a38.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/5468.50941a38.chunk.js","mappings":"gHAAA","sources":["../../packages/react-tree/README.md"],"sourcesContent":["export default \"Tree 树形控件\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tree/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-tree.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-tree)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-tree.svg?label=@uiw/react-tree)](https://npmjs.com/@uiw/react-tree)\\n\\n使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。\\n\\n```jsx\\nimport { Tree } from 'uiw';\\n// or\\nimport Tree from '@uiw/react-tree';\\n```\\n\\n### 基础用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tree, Card, Row, Col, } from 'uiw';\\n\\nconst data = [\\n  {\\n    label: '湖北省',\\n    key: '0-0-0',\\n    children:[\\n      {\\n        label: '武汉市',\\n        key: '0-1-0',\\n        children:[\\n          { label: '新洲区', key: '0-1-1' },\\n          { label: '武昌区', key: '0-1-2' },\\n          {\\n            label: '汉南区',\\n            key: '0-1-3',\\n            children:[\\n              { label: '汉南区1', key: '0-1-3-1' },\\n              { label: '汉南区2', key: '0-1-3-2' },\\n              { label: '汉南区3', key: '0-1-3-3' },\\n            ]\\n          },\\n        ]\\n      },\\n      { label: '黄冈市', key: '0-2-0' },\\n      {\\n        label: '黄石市',\\n        key: '0-3-0',\\n        children:[\\n          { label: '青山区', key: '0-3-1' },\\n          { label: '黄陂区', key: '0-3-2' },\\n          { label: '青山区', key: '0-3-3' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '上海市',\\n    key: '1-0-0',\\n    children:[\\n      { label: '黄浦区', key: '1-0-1' },\\n      { label: '卢湾区', key: '1-0-2' },\\n      {\\n        label: '徐汇区',\\n        key: '1-0-3',\\n        children:[\\n          { label: '半淞园路街道', key: '1-1-0' },\\n          { label: '南京东路街道', key: '1-2-0' },\\n          { label: '外滩街道', key: '1-3-0' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '北京市',\\n    key: '2-0-0',\\n    children:[\\n      { label: '东城区', key: '2-1-0' },\\n      { label: '西城区', key: '2-2-0' },\\n      {\\n        label: '崇文区',\\n        key: '2-3-0',\\n        children:[\\n          { label: '东花市街道', key: '2-3-1' },\\n          { label: '体育馆路街道', key: '2-3-2' },\\n          { label: '前门街道', key: '2-3-3' },\\n        ]\\n      },\\n    ]\\n  }\\n];\\n\\nconst Demo = () => (\\n  <div>\\n    <Row gutter={10}>\\n      <Col fixed>\\n        <Card title=\\\"单选\\\">\\n          <Tree\\n            defaultExpandAll={true}\\n            data={data}\\n            onExpand={(key, expanded, data, node) => {\\n              console.log('onExpand',key, expanded, data, node);\\n            }}\\n            onSelected={(key, selected, item, evn) => {\\n              console.log('onSelected',key, selected, item, evn);\\n            }}\\n          />\\n        </Card>\\n      </Col>\\n      <Col fixed>\\n        <Card title=\\\"多选，子节点不受控\\\">\\n          <Tree\\n          autoExpandParent={true}\\n            data={data}\\n            multiple\\n            onExpand={(key, expanded, data, node) => {\\n              console.log(key, expanded, data, node);\\n            }}\\n            onSelected={(key, selected, item, evn) => {\\n              console.log(key, selected, item, evn);\\n            }}\\n          />\\n        </Card>\\n      </Col>\\n      <Col fixed>\\n        <Card title=\\\"多选，子节点受控\\\">\\n          <Tree\\n            data={data}\\n            multiple\\n            checkStrictly\\n            onExpand={(key, expanded, data, node) => {\\n              console.log(key, expanded, data, node);\\n            }}\\n            onSelected={(key, selected, item, evn) => {\\n              console.log(key, selected, item, evn);\\n            }}\\n          />\\n        </Card>\\n      </Col>\\n    </Row>\\n  </div>\\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 { Tree, Card, Row, Col, Icon } from 'uiw';\\n\\nconst data = [\\n  {\\n    label: '湖北省',\\n    key: '0-0-0',\\n    children:[\\n      {\\n        label: '武汉市',\\n        key: '0-1-0',\\n        children:[\\n          { label: '新洲区', key: '0-1-1' },\\n          { label: '武昌区', key: '0-1-2' },\\n          {\\n            label: '汉南区',\\n            key: '0-1-3',\\n            children:[\\n              { label: '汉南区1', key: '0-1-3-1' },\\n              { label: '汉南区2', key: '0-1-3-2' },\\n              { label: '汉南区3', key: '0-1-3-3' },\\n            ]\\n          },\\n        ]\\n      },\\n      { label: '黄冈市', key: '0-2-0' },\\n      {\\n        label: '黄石市',\\n        key: '0-3-0',\\n        children:[\\n          { label: '青山区', key: '0-3-1' },\\n          { label: '黄陂区', key: '0-3-2' },\\n          { label: '青山区', key: '0-3-3' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '上海市',\\n    key: '1-0-0',\\n    children:[\\n      { label: '黄浦区', key: '1-0-1' },\\n      { label: '卢湾区', key: '1-0-2' },\\n      {\\n        label: '徐汇区',\\n        key: '1-0-3',\\n        children:[\\n          { label: '半淞园路街道', key: '1-1-0' },\\n          { label: '南京东路街道', key: '1-2-0' },\\n          { label: '外滩街道', key: '1-3-0' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '北京市',\\n    key: '2-0-0',\\n    children:[\\n      { label: '东城区', key: '2-1-0' },\\n      { label: '西城区', key: '2-2-0' },\\n      {\\n        label: '崇文区',\\n        key: '2-3-0',\\n        children:[\\n          { label: '东花市街道', key: '2-3-1' },\\n          { label: '体育馆路街道', key: '2-3-2' },\\n          { label: '前门街道', key: '2-3-3' },\\n        ]\\n      },\\n    ]\\n  }\\n];\\n\\nconst Demo = () => (\\n  <div>\\n    <Row gutter={10}>\\n      <Col fixed>\\n        <Card title=\\\"标题中添加图标\\\">\\n          <Tree\\n            data={data}\\n            renderTitle={(item, { selected, noChild }) => (\\n              <>\\n                <Icon style={{ display: '-webkit-inline-box' }} type={noChild ? 'smile-o' : 'apple'} />\\n                <span>{item.label}</span>\\n              </>\\n            )}\\n            onExpand={(key, expanded, data, node) => {\\n              console.log(key, expanded, data, node);\\n            }}\\n            onSelected={(key, selected, item, evn) => {\\n              console.log(key, selected, item, evn);\\n            }}\\n          />\\n        </Card>\\n      </Col>\\n      <Col fixed>\\n        <Card title=\\\"替换默认折叠图标\\\">\\n          <Tree\\n            data={data}\\n            icon=\\\"right-circle-o\\\"\\n            onExpand={(key, expanded, data, node) => {\\n              console.log(key, expanded, data, node);\\n            }}\\n            onSelected={(key, selected, item, evn) => {\\n              console.log(key, selected, item, evn);\\n            }}\\n          />\\n        </Card>\\n      </Col>\\n      <Col fixed>\\n        <Card title=\\\"自定义展开图标\\\">\\n          <Tree\\n            data={data}\\n            iconAnimation={false}\\n            icon={(data, { isOpen, noChild }) => {\\n              if(isOpen && !noChild) {\\n                return 'folder-open';\\n              } else if (!noChild) {\\n                return 'folder';\\n              }\\n              return 'file-text';\\n            }}\\n            onExpand={(key, expanded, data) => {\\n              console.log(key, expanded, data);\\n            }}\\n            onSelected={(key, selected, item, evn) => {\\n              console.log(key, selected, item, evn);\\n            }}\\n          />\\n        </Card>\\n      </Col>\\n    </Row>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 自定义选中效果\\n\\n通过设置 `checkStrictly` 父节点受子节点控制，设置 `multiple` 为多选，设置 `isSelected` 取消选中效果，也可以使用 [`TreeChecked`](#/components/tree-checked) 组件。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tree, Card, Row, Col } from 'uiw';\\n\\nconst data = [\\n  {\\n    label: '湖北省',\\n    key: '0-0-0',\\n    children:[\\n      {\\n        label: '武汉市',\\n        key: '0-1-0',\\n        children:[\\n          { label: '新洲区', key: '0-1-1', disabled: true },\\n          { label: '武昌区', key: '0-1-2' },\\n          {\\n            label: '汉南区',\\n            key: '0-1-3',\\n            children:[\\n              { label: '汉南区1', key: '0-1-3-1' },\\n              { label: '汉南区2', key: '0-1-3-2' },\\n              { label: '汉南区3', key: '0-1-3-3' },\\n            ]\\n          },\\n        ]\\n      },\\n      { label: '黄冈市', key: '0-2-0' },\\n      {\\n        label: '黄石市',\\n        key: '0-3-0',\\n        children:[\\n          { label: '青山区', key: '0-3-1' },\\n          { label: '黄陂区', key: '0-3-2' },\\n          { label: '青山区', key: '0-3-3' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '上海市',\\n    key: '1-0-0',\\n    children:[\\n      { label: '黄浦区', key: '1-0-1' },\\n      { label: '卢湾区', key: '1-0-2' },\\n      {\\n        label: '徐汇区',\\n        key: '1-0-3',\\n        children:[\\n          { label: '半淞园路街道', key: '1-1-0' },\\n          { label: '南京东路街道', key: '1-2-0' },\\n          { label: '外滩街道', key: '1-3-0' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '北京市',\\n    key: '2-0-0',\\n    children:[\\n      { label: '东城区', key: '2-1-0' },\\n      { label: '西城区', key: '2-2-0' },\\n      {\\n        label: '崇文区',\\n        key: '2-3-0',\\n        children:[\\n          { label: '东花市街道', key: '2-3-1' },\\n          { label: '体育馆路街道', key: '2-3-2' },\\n          { label: '前门街道', key: '2-3-3' },\\n        ]\\n      },\\n    ]\\n  },\\n  { label: '澳门', key: '3' },\\n];\\n\\nconst Demo = () => (\\n  <div>\\n    <Tree\\n      data={data}\\n      selectedKeys={['0-1-1']}\\n      multiple\\n      isSelected={false}\\n      checkStrictly\\n      renderTitle={(item, { selected, isHalfChecked }) => {\\n        if(isHalfChecked) {\\n          return (\\n            <><Icon type=\\\"minus-square-o\\\" style={{ color: 'green' }} /> <span>{item.label}</span></>\\n          );\\n        }\\n        if (selected) {\\n          return (\\n            <><Icon type=\\\"check-square-o\\\" style={{ color: 'green' }} /> <span>{item.label}</span></>\\n          );\\n        }\\n        return (\\n          <><Icon type=\\\"square-o\\\" style={{ color: '#b6b6b6' }} /> <span>{item.label}</span></>\\n        );\\n      }}\\n      onExpand={(key, expanded, data, node) => {\\n        console.log(key, expanded, data, node);\\n      }}\\n      onSelected={(key, selected, item, evn) => {\\n        console.log(key, selected, item, evn);\\n      }}\\n    />\\n  </div>\\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 { Tree, Card, Row, Col, Icon } from 'uiw';\\n\\nconst data = [\\n  {\\n    label: '湖北省',\\n    key: '0-0-0',\\n    children:[\\n      {\\n        label: '武汉市',\\n        disabled: true,\\n        key: '0-1-0',\\n        children:[\\n          { label: '新洲区', key: '0-1-1' },\\n          { label: '武昌区', key: '0-1-2' },\\n          {\\n            label: '汉南区',\\n            key: '0-1-3',\\n            children:[\\n              { label: '汉南区1', key: '0-1-3-1' },\\n              { label: '汉南区2', key: '0-1-3-2' },\\n              { label: '汉南区3', key: '0-1-3-3' },\\n            ]\\n          },\\n        ]\\n      },\\n      { label: '黄冈市', key: '0-2-0' },\\n      {\\n        label: '黄石市',\\n        key: '0-3-0',\\n        children:[\\n          { label: '青山区', key: '0-3-1' },\\n          { label: '黄陂区', key: '0-3-2' },\\n          { label: '青山区', key: '0-3-3' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '上海市',\\n    key: '1-0-0',\\n    children:[\\n      { label: '黄浦区', key: '1-0-1' },\\n      { label: '卢湾区', key: '1-0-2' },\\n      {\\n        label: '徐汇区',\\n        key: '1-0-3',\\n        children:[\\n          { label: '半淞园路街道', key: '1-1-0' },\\n          { label: '南京东路街道', key: '1-2-0' },\\n          { label: '外滩街道', key: '1-3-0' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '北京市',\\n    key: '2-0-0',\\n    children:[\\n      { label: '东城区', key: '2-1-0' },\\n      { label: '西城区', key: '2-2-0' },\\n      {\\n        label: '崇文区',\\n        key: '2-3-0',\\n        children:[\\n          { label: '东花市街道', key: '2-3-1' },\\n          { label: '体育馆路街道', key: '2-3-2' },\\n          { label: '前门街道', key: '2-3-3' },\\n        ]\\n      },\\n    ]\\n  }\\n];\\n\\nconst Demo = () => (\\n  <div>\\n    <Row gutter={10}>\\n      <Col fixed>\\n        <Card title=\\\"基础使用\\\">\\n          <Tree data={data} />\\n        </Card>\\n      </Col>\\n      <Col fixed>\\n        <Card title=\\\"自定义图标\\\">\\n          <Tree\\n            data={data}\\n            renderTitle={(item, { selected, noChild, disabledStyle }) => (\\n              <>\\n                <Icon style={{ display: '-webkit-inline-box', ...disabledStyle }} type={noChild ? 'smile-o' : 'apple'} />\\n                <span style={disabledStyle}>{item.label}</span>\\n              </>\\n            )}\\n          />\\n        </Card>\\n      </Col>\\n      <Col fixed>\\n        <Card title=\\\"自定义选中效果\\\">\\n          <Tree\\n            data={data}\\n            renderTitle={(item, { selected, isHalfChecked, disabledStyle, disabledClass }) => {\\n              if(isHalfChecked) {\\n                return (\\n                  <><Icon type=\\\"minus-square-o\\\" style={{ color: 'green', ...disabledStyle }} /> <span className={disabledClass} >{item.label}</span></>\\n                );\\n              }\\n              if (selected) {\\n                return (\\n                  <><Icon type=\\\"check-square-o\\\" style={{ color: 'green', ...disabledStyle }} /> <span className={disabledClass} >{item.label}</span></>\\n                );\\n              }\\n              return (\\n                <><Icon type=\\\"square-o\\\" style={{ color: '#b6b6b6',...disabledStyle }} /> <span className={disabledClass} >{item.label}</span></>\\n              );\\n            }}\\n          />\\n        </Card>\\n      </Col>\\n    </Row>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 连接线\\n\\n带连接线的树，通过设置 `showLine`。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tree, Card, Row, Col } from 'uiw';\\n\\nconst data = [\\n  {\\n    label: '湖北省',\\n    key: '0-0-0',\\n    children:[\\n      {\\n        label: '武汉市',\\n        key: '0-1-0',\\n        children:[\\n          { label: '新洲区', key: '0-1-1' },\\n          { label: '武昌区', key: '0-1-2' },\\n          {\\n            label: '汉南区',\\n            key: '0-1-3',\\n            children:[\\n              { label: '汉南区1', key: '0-1-3-1' },\\n              { label: '汉南区2', key: '0-1-3-2' },\\n              { label: '汉南区3', key: '0-1-3-3' },\\n            ]\\n          },\\n        ]\\n      },\\n      { label: '黄冈市', key: '0-2-0' },\\n      {\\n        label: '黄石市',\\n        key: '0-3-0',\\n        children:[\\n          { label: '青山区', key: '0-3-1' },\\n          { label: '黄陂区', key: '0-3-2' },\\n          { label: '青山区', key: '0-3-3' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '上海市',\\n    key: '1-0-0',\\n    children:[\\n      { label: '黄浦区', key: '1-0-1' },\\n      { label: '卢湾区', key: '1-0-2' },\\n      {\\n        label: '徐汇区',\\n        key: '1-0-3',\\n        children:[\\n          { label: '半淞园路街道', key: '1-1-0' },\\n          { label: '南京东路街道', key: '1-2-0' },\\n          { label: '外滩街道', key: '1-3-0' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '北京市',\\n    key: '2-0-0',\\n    children:[\\n      { label: '东城区', key: '2-1-0' },\\n      { label: '西城区', key: '2-2-0' },\\n      {\\n        label: '崇文区',\\n        key: '2-3-0',\\n        children:[\\n          { label: '东花市街道', key: '2-3-1' },\\n          { label: '体育馆路街道', key: '2-3-2' },\\n          { label: '前门街道', key: '2-3-3' },\\n        ]\\n      },\\n    ]\\n  }\\n];\\n\\nconst Demo = () => (\\n  <div>\\n    <Row gutter={10}>\\n      <Col fixed>\\n        <Card title=\\\"自定义展开图标\\\">\\n          <Tree\\n            data={data}\\n            showLine\\n            iconAnimation={false}\\n            icon={(data, {isOpen, noChild}) => {\\n              if(isOpen && !noChild) {\\n                return 'folder-open';\\n              } else if (!noChild) {\\n                return 'folder';\\n              }\\n              return 'file-text';\\n            }}\\n            onExpand={(key, expanded, data) => {\\n              console.log(key, expanded, data);\\n            }}\\n            onSelected={(key, selected, item, evn) => {\\n              console.log(key, selected, item, evn);\\n            }}\\n          />\\n        </Card>\\n      </Col>\\n      <Col fixed>\\n        <Card title=\\\"自定义展开图标\\\">\\n          <Tree\\n            data={data}\\n            showLine\\n            icon={(data, {isOpen, noChild}) => {\\n              if(noChild) {\\n                return 'file-text';\\n              }\\n            }}\\n            onExpand={(key, expanded, data) => {\\n              console.log(key, expanded, data);\\n            }}\\n            onSelected={(key, selected, item, evn) => {\\n              console.log(key, selected, item, evn);\\n            }}\\n          />\\n        </Card>\\n      </Col>\\n    </Row>\\n  </div>\\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 { Tree, Card, Row, Col } from 'uiw';\\n\\nconst data = [\\n  {\\n    label: '湖北省',\\n    key: '0-0-0',\\n    children:[\\n      {\\n        label: '武汉市',\\n        key: '0-1-0',\\n        children:[\\n          { label: '新洲区', key: '0-1-1' },\\n          { label: '武昌区', key: '0-1-2' },\\n          {\\n            label: '汉南区',\\n            key: '0-1-3',\\n            children:[\\n              { label: '汉南区1', key: '0-1-3-1' },\\n              { label: '汉南区2', key: '0-1-3-2' },\\n              { label: '汉南区3', key: '0-1-3-3' },\\n            ]\\n          },\\n        ]\\n      },\\n      { label: '黄冈市', key: '0-2-0' },\\n      {\\n        label: '黄石市',\\n        key: '0-3-0',\\n        children:[\\n          { label: '青山区', key: '0-3-1' },\\n          { label: '黄陂区', key: '0-3-2' },\\n          { label: '青山区', key: '0-3-3' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '上海市',\\n    key: '1-0-0',\\n    children:[\\n      { label: '黄浦区', key: '1-0-1' },\\n      { label: '卢湾区', key: '1-0-2' },\\n      {\\n        label: '徐汇区',\\n        key: '1-0-3',\\n        children:[\\n          { label: '半淞园路街道', key: '1-1-0' },\\n          { label: '南京东路街道', key: '1-2-0' },\\n          { label: '外滩街道', key: '1-3-0' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '北京市',\\n    key: '2-0-0',\\n    children:[\\n      { label: '东城区', key: '2-1-0' },\\n      { label: '西城区', key: '2-2-0' },\\n    ]\\n  }\\n];\\n\\nconst Demo = () => (\\n  <div>\\n    <Row gutter={10}>\\n      <Col fixed>\\n        <Card title=\\\"默认展开部分\\\">\\n          <Tree\\n            data={data}\\n            showLine\\n            openKeys={['0-0-0', '0-1-0']}\\n            iconAnimation={false}\\n            icon={(data, {isOpen, noChild}) => {\\n              if(isOpen && !noChild) {\\n                return 'folder-open';\\n              } else if (!noChild) {\\n                return 'folder';\\n              }\\n              return 'file-text';\\n            }}\\n            onExpand={(key, expanded, data) => {\\n              console.log(key, expanded, data);\\n            }}\\n            onSelected={(key, selected, item, evn) => {\\n              console.log(key, selected, item, evn);\\n            }}\\n          />\\n        </Card>\\n      </Col>\\n      <Col fixed>\\n        <Card title=\\\"展开所有\\\">\\n          <Tree\\n            data={data}\\n            showLine\\n            defaultExpandAll\\n            icon={(data, {isOpen, noChild}) => {\\n              if(noChild) {\\n                return 'file-text';\\n              }\\n            }}\\n            onExpand={(key, expanded, data) => {\\n              console.log(key, expanded, data);\\n            }}\\n            onSelected={(key, selected, item, evn) => {\\n              console.log(key, selected, item, evn);\\n            }}\\n          />\\n        </Card>\\n      </Col>\\n    </Row>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### Form中使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tree, Row, Col, Form, Button } from 'uiw';\\n\\nconst data = [\\n  {\\n    label: '湖北省',\\n    key: '0-0-0',\\n    children:[\\n      {\\n        label: '武汉市',\\n        key: '0-1-0',\\n        children:[\\n          { label: '新洲区', key: '0-1-1' },\\n          { label: '武昌区', key: '0-1-2' },\\n          {\\n            label: '汉南区',\\n            key: '0-1-3',\\n            children:[\\n              { label: '汉南区1', key: '0-1-3-1' },\\n              { label: '汉南区2', key: '0-1-3-2' },\\n              { label: '汉南区3', key: '0-1-3-3' },\\n            ]\\n          },\\n        ]\\n      },\\n      { label: '黄冈市', key: '0-2-0' },\\n      {\\n        label: '黄石市',\\n        key: '0-3-0',\\n        children:[\\n          { label: '青山区', key: '0-3-1' },\\n          { label: '黄陂区', key: '0-3-2' },\\n          { label: '青山区', key: '0-3-3' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '上海市',\\n    key: '1-0-0',\\n    children:[\\n      { label: '黄浦区', key: '1-0-1' },\\n      { label: '卢湾区', key: '1-0-2' },\\n      {\\n        label: '徐汇区',\\n        key: '1-0-3',\\n        children:[\\n          { label: '半淞园路街道', key: '1-1-0' },\\n          { label: '南京东路街道', key: '1-2-0' },\\n          { label: '外滩街道', key: '1-3-0' },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '北京市',\\n    key: '2-0-0',\\n    children:[\\n      { label: '东城区', key: '2-1-0' },\\n      { label: '西城区', key: '2-2-0' },\\n    ]\\n  }\\n];\\n\\nconst Demo = () => {\\n  return (\\n    <Form\\n      onChange={({ initial, current }) => {}}\\n      resetOnSubmit={false}\\n      onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}\\n      onSubmit={({initial, current}) => {\\n        console.log('current: ', current);\\n        const ErrObj = {};\\n        if (current.tree === 'unknown') {\\n          ErrObj.radioGroup = '请选择性别！';\\n        }\\n        if(Object.keys(ErrObj).length > 0) {\\n          const err = new Error();\\n          err.filed = ErrObj;\\n          throw err;\\n        }\\n        Notify.success({\\n          title: '提交成功！', description: `填写：【填写成功】！`\\n        });\\n      }}\\n      fields={{\\n        tree: {\\n          value: 'region',\\n          label: '请输入内容',\\n          help: '必须选择地区！',\\n          initialValue: ['0-1-1'],\\n          children: <Tree\\n            // multiple \\n            checkStrictly\\n            data={data}\\n          />,\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        return (\\n          <div>\\n            <Row>\\n              <Col>{fields.tree}</Col>\\n            </Row>\\n            <Row>\\n              <Col>\\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  )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| data | 展示数据 | Array | `TreeData[]` |\\n| openKeys | 节点展开 `key` | Array | `[]` |\\n| selectedKeys | 设置选中的树节点 | Array | `[]` |\\n| autoExpandParent | 是否自动展开父节点 | Boolean | `true` |\\n| defaultExpandAll | 默认展开所有树节点 | Boolean | `false` |\\n| iconAnimation | 展开收缩图标，参数设为 `false` 禁用动画 | Boolean | `true` |\\n| isSelected | 是否选中当前节点样式。 | Boolean | `true` |\\n| showLine | 是否展示连接线 | Boolean | `false` |\\n| checkStrictly | 子节点受父节点控制设置 `true`，需要配合 `multiple` 参数使用。 | Boolean | `false` |\\n| multiple | 支持点选多个节点 | Boolean | `false` |\\n| icon | 重新定义，展开收缩图标，当为函数时视为自定义图标，并展示非折叠项的图标。 | ~~Function(data: object, noChild: bool)/String/Node~~ `@3.4.0+` Function(data: object, { selected: bool, noChild: bool })/String/Node| - |\\n| renderTitle | 重新定义每个标题节点的显示 | ~~Function(item, selected: bool, noChild: bool)~~ `@3.4.0+` Function(item: TreeData, node?: Node) => React.ReactElement; | - |\\n| onSelected | 点击选择树节点触发 | Function(selectedKeys: array, key, selected: bool, data, e) | - |\\n| onExpand | 展开/收起节点时触发 | Function(key, expanded: bool, data, evn) | - |\\n\\n## Node Type \\n| 参数 | 类型 | 版本 |\\n|--------- |-------- |-------- |\\n| selected | boolean | - |\\n| noChild  | boolean | - |\\n| isHalfChecked  | boolean | `@3.4.0+` |\\n| openKeys  | Props['openKeys'] | `@3.4.0+` |\\n| selectedKeys  | Props['selectedKeys'] | `@3.4.0+` |\\n| disabled  | boolean | `@4.20.0+` |\\n| disabledClass  | string | `@4.20.0+` |\\n| disabledStyle  | React.CSSProperties | `@4.20.0+` |\\n### data\\n\\n```json\\n[\\n  {\\n    \\\"label\\\": \\\"湖北省\\\",\\n    \\\"key\\\": \\\"0-0-0\\\",\\n    \\\"disabled\\\": false,\\n    \\\"children\\\":[]\\n  }\\n  ...\\n]\\n```\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/{7313.b857c0a6.chunk.js → 7313.9c56b387.chunk.js}

@@ -1,2 +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 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"}}]);
-//# sourceMappingURL=7313.b857c0a6.chunk.js.map
+"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 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"}}]);
+//# sourceMappingURL=7313.9c56b387.chunk.js.map

package/web/static/js/{7313.b857c0a6.chunk.js.map → 7313.9c56b387.chunk.js.map}

@@ -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[![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 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":""}
+{"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[![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 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":""}