@uiw/doc 4.21.10 → 4.21.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/web/CONTRIBUTORS.svg +4 -4
- package/web/asset-manifest.json +16 -16
- package/web/index.html +1 -1
- package/web/static/css/{main.f182e06f.css → main.792f5ff9.css} +2 -2
- package/web/static/css/main.792f5ff9.css.map +1 -0
- package/web/static/js/{4010.fbe60b22.chunk.js → 4010.fefcdc90.chunk.js} +2 -2
- package/web/static/js/4010.fefcdc90.chunk.js.map +1 -0
- package/web/static/js/5183.ac2ca737.js.map +1 -1
- package/web/static/js/7266.abfb025a.chunk.js +2 -0
- package/web/static/js/7266.abfb025a.chunk.js.map +1 -0
- package/web/static/js/{766.7a878028.chunk.js → 766.24866c3b.chunk.js} +2 -2
- package/web/static/js/{766.7a878028.chunk.js.map → 766.24866c3b.chunk.js.map} +1 -1
- package/web/static/js/8964.eb0698ef.chunk.js +3 -0
- package/web/static/js/{8964.e2f9d218.chunk.js.LICENSE.txt → 8964.eb0698ef.chunk.js.LICENSE.txt} +0 -0
- package/web/static/js/8964.eb0698ef.chunk.js.map +1 -0
- package/web/static/js/9961.46e9e861.chunk.js +2 -0
- package/web/static/js/9961.46e9e861.chunk.js.map +1 -0
- package/web/static/js/{main.8c7ad5d7.js → main.e4f67581.js} +2 -2
- package/web/static/js/main.e4f67581.js.map +1 -0
- package/web/static/js/vendors-react.a09f50fb.js.map +1 -1
- package/web/static/js/vendors-standalone.457dd336.chunk.js.map +1 -1
- package/web/static/css/main.f182e06f.css.map +0 -1
- package/web/static/js/4010.fbe60b22.chunk.js.map +0 -1
- package/web/static/js/7266.bba9c51f.chunk.js +0 -2
- package/web/static/js/7266.bba9c51f.chunk.js.map +0 -1
- package/web/static/js/8964.e2f9d218.chunk.js +0 -3
- package/web/static/js/8964.e2f9d218.chunk.js.map +0 -1
- package/web/static/js/9961.9db8f620.chunk.js +0 -2
- package/web/static/js/9961.9db8f620.chunk.js.map +0 -1
- package/web/static/js/main.8c7ad5d7.js.map +0 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7266],{7266:function(t,e,n){n.r(e),e.default="Layout \u5e03\u5c40\n===\n\n[](https://www.npmjs.com/package/@uiw/react-layout)\n[](https://github.com/uiwjs/react-layout/actions/workflows/ci.yml)\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-layout/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-layout)\n[](https://uiwjs.github.io/react-layout/coverage/lcov-report/)\n[](https://gitpod.io/#https://github.com/uiwjs/react-layout)\n\n\u534f\u52a9\u8fdb\u884c\u9875\u9762\u7ea7\u6574\u4f53\u5e03\u5c40\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff1a\u91c7\u7528 flex \u5e03\u5c40\u5b9e\u73b0\uff0c\u8bf7\u6ce8\u610f[\u6d4f\u89c8\u5668\u517c\u5bb9\u6027](http://caniuse.com/#search=flex)\u95ee\u9898\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n\x3c!--rehype--\x3e\n```jsx\nimport { Layout } from 'uiw';\n// or\nimport Layout from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n// or\nimport Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';\nLayout.Header = LayoutHeader\nLayout.Content = LayoutContent\nLayout.Sider = LayoutSider\nLayout.Footer = LayoutFooter\n```\n\n## \u57fa\u672c\u7528\u6cd5\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst stylHeader = { color: '#fff' }\nconst stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\n\nfunction Demo() {\n const [collapsed, setCollapsed] = React.useState(false)\n return (\n <div>\n <Layout style={{ marginBottom: 20 }}>\n <Header style={stylHeader}>Header</Header>\n <Layout>\n <Sider style={stylSider}>Sider</Sider>\n <Content style={stylConten}>Content</Content>\n </Layout>\n <Footer>Footer</Footer>\n </Layout>\n\n <Layout>\n <Header style={stylHeader}>Header</Header>\n <Layout>\n <Content style={stylConten}>Content</Content>\n <Sider style={stylSider}>Sider</Sider>\n </Layout>\n <Footer>Footer</Footer>\n </Layout>\n\n <Layout>\n <LayoutHeader style={stylHeader}>Header</LayoutHeader>\n <Layout>\n <LayoutContent style={stylConten}>Content</LayoutContent>\n <LayoutSider style={stylSider}>Sider</LayoutSider>\n </Layout>\n <LayoutFooter>Footer</LayoutFooter>\n </Layout>\n </div>\n );\n}\n\nexport default Demo;\n```\n\n## \u4e0a\u4e2d\u4e0b\u5e03\u5c40\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Layout from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst stylHeader = { color: '#fff' }\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\n\nfunction Demo() {\n const [collapsed, setCollapsed] = React.useState(false)\n return (\n <Layout style={{ marginBottom: 20 }}>\n <Header style={stylHeader}>Header</Header>\n <Content style={stylConten}>Content</Content>\n <Footer>Footer</Footer>\n </Layout>\n );\n}\n\nexport default Demo;\n```\n\n## \u5de6\u53f3\u5e03\u5c40\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Layout from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst stylHeader = { color: '#fff' }\nconst stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\n\nfunction Demo() {\n const [collapsed, setCollapsed] = React.useState(false)\n return (\n <Layout style={{ marginBottom: 20 }}>\n <Sider collapsed={collapsed} style={stylSider}>Sider</Sider>\n <Layout>\n <Header style={stylHeader}>\n <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button>\n </Header>\n <Content style={stylConten}>Content</Content>\n <Footer>Footer</Footer>\n </Layout>\n </Layout>\n );\n}\n\nexport default Demo;\n```\n\n## Layout\n\n\u5e03\u5c40\u5bb9\u5668\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957 `Header` `Sider` `Content` `Footer` \u6216 `Layout` \u672c\u8eab\uff0c\u53ef\u4ee5\u653e\u5728\u4efb\u4f55\u7236\u5bb9\u5668\u4e2d\u3002\n\n* `Header`\uff1a\u9876\u90e8\u5e03\u5c40\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 `Layout` \u4e2d\u3002\n* `Sider`\uff1a\u4fa7\u8fb9\u680f\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\u53ca\u57fa\u672c\u529f\u80fd\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 `Layout` \u4e2d\u3002\n* `Content`\uff1a\u5185\u5bb9\u90e8\u5206\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 `Layout` \u4e2d\u3002\n* `Footer`\uff1a\u5e95\u90e8\u5e03\u5c40\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 `Layout` \u4e2d\u3002\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| className | \u5bb9\u5668 className | string | - |\n| style | \u6307\u5b9a\u6837\u5f0f | CSSProperties | - |\n| hasSider | \u8868\u793a\u5b50\u5143\u7d20\u91cc\u6709 Sider\uff0c\u4e00\u822c\u4e0d\u7528\u6307\u5b9a\u3002\u53ef\u7528\u4e8e\u670d\u52a1\u7aef\u6e32\u67d3\u65f6\u907f\u514d\u6837\u5f0f\u95ea\u52a8 | boolean | - |\n\x3c!-- | theme | \u4e3b\u9898\u989c\u8272 | `light`\u3001`dark` | `dark` | --\x3e\n\n## Layout.Sider\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| className | \u5bb9\u5668 className | string | - |\n| style | \u6307\u5b9a\u6837\u5f0f | CSSProperties | - |\n| collapsed | \u5f53\u524d\u6536\u8d77\u72b6\u6001 | boolean | - |\n| collapsedWidth | \u6536\u7f29\u5bbd\u5ea6\uff0c\u8bbe\u7f6e\u4e3a `0` | boolean | `80` |\n| width | \u5bbd\u5ea6 | number/string | 200 |\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n<a href=\"https://github.com/jaywcjlove/github-action-contributors/graphs/contributors\">\n <img src=\"https://jaywcjlove.github.io/github-action-contributors/CONTRIBUTORS.svg\" />\n</a>\n\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n### License\n\nLicensed under the MIT License.\n"}}]);
|
|
2
|
+
//# sourceMappingURL=7266.abfb025a.chunk.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"static/js/7266.abfb025a.chunk.js","mappings":"+GAAA","sources":["../../node_modules/@uiw/react-layout/README-zh.md"],"sourcesContent":["export default \"Layout 布局\\n===\\n\\n[](https://www.npmjs.com/package/@uiw/react-layout)\\n[](https://github.com/uiwjs/react-layout/actions/workflows/ci.yml)\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-layout/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-layout)\\n[](https://uiwjs.github.io/react-layout/coverage/lcov-report/)\\n[](https://gitpod.io/#https://github.com/uiwjs/react-layout)\\n\\n协助进行页面级整体布局。\\n\\n> ⚠️ 注意：采用 flex 布局实现，请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n<!--rehype-->\\n```jsx\\nimport { Layout } from 'uiw';\\n// or\\nimport Layout from '@uiw/react-layout';\\nconst { Header, Footer, Sider, Content } = Layout;\\n// or\\nimport Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';\\nLayout.Header = LayoutHeader\\nLayout.Content = LayoutContent\\nLayout.Sider = LayoutSider\\nLayout.Footer = LayoutFooter\\n```\\n\\n## 基本用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';\\nconst { Header, Footer, Sider, Content } = Layout;\\n\\nconst stylHeader = { color: '#fff' }\\nconst stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }\\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\\n\\nfunction Demo() {\\n const [collapsed, setCollapsed] = React.useState(false)\\n return (\\n <div>\\n <Layout style={{ marginBottom: 20 }}>\\n <Header style={stylHeader}>Header</Header>\\n <Layout>\\n <Sider style={stylSider}>Sider</Sider>\\n <Content style={stylConten}>Content</Content>\\n </Layout>\\n <Footer>Footer</Footer>\\n </Layout>\\n\\n <Layout>\\n <Header style={stylHeader}>Header</Header>\\n <Layout>\\n <Content style={stylConten}>Content</Content>\\n <Sider style={stylSider}>Sider</Sider>\\n </Layout>\\n <Footer>Footer</Footer>\\n </Layout>\\n\\n <Layout>\\n <LayoutHeader style={stylHeader}>Header</LayoutHeader>\\n <Layout>\\n <LayoutContent style={stylConten}>Content</LayoutContent>\\n <LayoutSider style={stylSider}>Sider</LayoutSider>\\n </Layout>\\n <LayoutFooter>Footer</LayoutFooter>\\n </Layout>\\n </div>\\n );\\n}\\n\\nexport default Demo;\\n```\\n\\n## 上中下布局\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport Layout from '@uiw/react-layout';\\nconst { Header, Footer, Sider, Content } = Layout;\\n\\nconst stylHeader = { color: '#fff' }\\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\\n\\nfunction Demo() {\\n const [collapsed, setCollapsed] = React.useState(false)\\n return (\\n <Layout style={{ marginBottom: 20 }}>\\n <Header style={stylHeader}>Header</Header>\\n <Content style={stylConten}>Content</Content>\\n <Footer>Footer</Footer>\\n </Layout>\\n );\\n}\\n\\nexport default Demo;\\n```\\n\\n## 左右布局\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport Layout from '@uiw/react-layout';\\nconst { Header, Footer, Sider, Content } = Layout;\\n\\nconst stylHeader = { color: '#fff' }\\nconst stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }\\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\\n\\nfunction Demo() {\\n const [collapsed, setCollapsed] = React.useState(false)\\n return (\\n <Layout style={{ marginBottom: 20 }}>\\n <Sider collapsed={collapsed} style={stylSider}>Sider</Sider>\\n <Layout>\\n <Header style={stylHeader}>\\n <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button>\\n </Header>\\n <Content style={stylConten}>Content</Content>\\n <Footer>Footer</Footer>\\n </Layout>\\n </Layout>\\n );\\n}\\n\\nexport default Demo;\\n```\\n\\n## Layout\\n\\n布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。\\n\\n* `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。\\n* `Sider`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 `Layout` 中。\\n* `Content`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。\\n* `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| className | 容器 className | string | - |\\n| style | 指定样式 | CSSProperties | - |\\n| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |\\n<!-- | theme | 主题颜色 | `light`、`dark` | `dark` | -->\\n\\n## Layout.Sider\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| className | 容器 className | string | - |\\n| style | 指定样式 | CSSProperties | - |\\n| collapsed | 当前收起状态 | boolean | - |\\n| collapsedWidth | 收缩宽度，设置为 `0` | boolean | `80` |\\n| width | 宽度 | number/string | 200 |\\n\\n## Contributors\\n\\nAs always, thanks to our amazing contributors!\\n\\n<a href=\\\"https://github.com/jaywcjlove/github-action-contributors/graphs/contributors\\\">\\n <img src=\\\"https://jaywcjlove.github.io/github-action-contributors/CONTRIBUTORS.svg\\\" />\\n</a>\\n\\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\\n\\n### License\\n\\nLicensed under the MIT License.\\n\";"],"names":[],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[766],{80766:function(e,n,l){l.r(n),n.default="SearchTree \u5e26\u641c\u7d22\u7684Tree\u9009\u62e9\u63a7\u4ef6\n===\n\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-search-tree)\n[](https://npmjs.com/@uiw/react-search-tree)\n\n\u4f7f\u7528\u6811\u9009\u62e9\u63a7\u4ef6\u53ef\u4ee5\u5b8c\u6574\u5c55\u73b0\u5176\u4e2d\u7684\u5c42\u7ea7\u5173\u7cfb\uff0c\u5e76\u5177\u6709\u9009\u4e2d\u72b6\u6001\u3002\u65b0\u7ec4\u4ef6 v4.11.7+ \u652f\u6301\u3002\n\n```jsx\nimport { SearchTree } from 'uiw';\n// or\nimport SearchTree from '@uiw/react-search-tree';\n```\n\n### \u57fa\u7840\u5b9e\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { SearchTree } from 'uiw';\n\nconst data = [\n {\n label: '\u4e0a\u6d77\u5e02',\n key: 1,\n children:[\n { label: '\u9ec4\u6d66\u533a', key: 2 },\n { label: '\u5362\u6e7e\u533a', key: 3 },\n {\n label: '\u5f90\u6c47\u533a',\n key: 4,\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', key: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: 9,\n children:[\n { label: '\u4e1c\u57ce\u533a', key: 10 },\n { label: '\u897f\u57ce\u533a', key: 11 },\n {\n label: '\u5d07\u6587\u533a',\n key: 12,\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: 14 },\n { label: '\u524d\u95e8\u8857\u9053', key: 15 },\n ]\n },\n ]\n },\n { label: '\u6fb3\u95e8', key: 16 },\n];\n\nconst Demo = () => {\n\nconst [value,valueSet]=useState([{ label: '\u9ec4\u6d66\u533a', key: 12 }])\nconst [valueSinge,valueSingeSet]=useState([{ label: '\u4e0a\u6d77\u5e02', key: '1-0-0' }])\n\nconst onChange=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\n valueSet(selectedAll)\n}\n\nconst onChangeSinge=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\n valueSingeSet(selectedAll)\n}\n\n return (\n <Row gutter={20}>\n <label>\u5355\u9009</label>\n <Row>\n <SearchTree\n style={{width: 200}}\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('singe',searchValue)}\n onChange={onChangeSinge}\n value={valueSinge}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n <label>\u591a\u9009</label>\n <Row>\n <SearchTree\n style={{ width: 200 }}\n allowClear={true}\n onSearch={(searchValue)=>console.log('multiple',searchValue)}\n onChange={onChange}\n value={value}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n <label>\u7981\u7528</label>\n <Row>\n <SearchTree\n disabled={true}\n style={{ width: 200 }}\n allowClear={true}\n value={[{ label: '\u4e1c\u57ce\u533a', key: 10 },{ label: '\u6210\u90fd\u5e02', key: 2 }]}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n </Row>\n )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5c3a\u5bf8\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree } from 'uiw';\n\nconst Demo = () => {\n\nconst data = [\n { label: '\u5c0f\u5c3a\u5bf8', key: 1 },\n { label: '\u9ed8\u8ba4\u5c3a\u5bf8', key: 2 },\n { label: '\u5927\u5c3a\u5bf8', key: 3 },\n ]\n\n return(\n <>\n <SearchTree\n style={{ width: 150 }}\n value={[{ label: '\u5c0f\u5c3a\u5bf8', key: 1 }]}\n options={data}\n size=\"small\"\n />\n <SearchTree\n style={{ width: 175, marginTop: 10 }}\n value={[{ label: '\u9ed8\u8ba4\u5c3a\u5bf8', key: 2 }]}\n options={data}\n />\n <SearchTree\n style={{ width: 200, marginTop: 10 }}\n value={[{ label: '\u5927\u5c3a\u5bf8', key: 3 }]}\n options={data}\n size=\"large\"\n />\n </>\n )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u81ea\u5b9a\u4e49\u7a7a\u9009\u9879\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree } from 'uiw';\n\nconst Demo = () => {\n return(\n <>\n <SearchTree\n style={{ width:200 }}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n <SearchTree\n style={{ width:200,marginTop:5 }}\n emptyOption={<span>\u6682\u65e0\u6570\u636e..</span>}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </>\n )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Form\u4e2d\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Notify, Form, Button, SearchTree, Card, Row, Col,Select } from 'uiw';\nconst Demo = () => {\nconst form=useRef()\n\n const data = [\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\n const setValue=()=>{\n form.current.setFields({\n searchTree: [{ label: '\u4e1c\u57ce\u533a', key: '2-1-0' }, { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' }],\n searchTreeSinge:[{ label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' }]\n })\n }\n\n const resetValue=()=>{\n form.current.resetForm()\n }\n\n return (\n <div>\n <Form\n ref={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.searchTree || current.searchTree.length === 0) {\n errorObj.searchTree = '\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 searchTree: {\n initialValue:[ { label: '\u9ec4\u6d66\u533a', key: '1-0-1' }, { label: '\u5362\u6e7e\u533a', key: '1-0-2' }],\n children: (\n <SearchTree\n allowClear={true}\n style={{ width: 200 }}\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n )\n },\n searchTreeSinge: {\n initialValue:[{ label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' }],\n children: (\n <SearchTree\n multiple={false}\n style={{ width: 200 }}\n allowClear={true}\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row style={{display:'flex',flexDirection:'column'}}>\n <div>\u591a\u9009</div>\n <Col >{fields.searchTree}</Col>\n </Row>\n <Row style={{display:'flex',flexDirection:'column'}}>\n <label>\u5355\u9009</label>\n <Col >{fields.searchTreeSinge}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n <Button onClick={setValue} type=\"primary\" >setValue</Button>\n <Button onClick={resetValue} type=\"primary\" >\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 |\n|--------- |-------- |--------- |-------- |\n| allowClear | \u652f\u6301\u6e05\u9664 | Boolean | `false` |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` |\n| multiple | \u662f\u5426\u53ef\u4ee5\u591a\u9009 | Boolean | `true` |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee | [{label:string, key:string}] | - |\n| options | \u4e0b\u62c9\u6570\u636e\u6e90,\u53ef\u53c2\u8003Tree\u4e0b\u62c9\u6570\u636e\u6e90 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\n| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum{large, default, small } | `default` |\n| onChange | \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 | function(selectd, selectdAll, isChecked)=>void | - |\n| onSearch | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 | function(searchValue) | - |\n| loading | \u52a0\u8f7d\u4e2d\u72b6\u6001 | Boolean | `false` |\n| emptyOption | \u81ea\u5b9a\u4e49\u4e0b\u62c9\u9009\u9879\u4e3a\u7a7a\u65f6\u663e\u793a\u5185\u5bb9 | React.ReactNode | [Empty](#/components/empty) |\n| tagProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Tag>`](#/components/tag) \u7ec4\u4ef6 | `TagProps` | `{}` | `4.13.0` |\n"}}]);
|
|
2
|
-
//# sourceMappingURL=766.
|
|
1
|
+
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[766],{80766:function(e,n,l){l.r(n),n.default="SearchTree \u5e26\u641c\u7d22\u7684Tree\u9009\u62e9\u63a7\u4ef6\n===\n\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-search-tree)\n[](https://npmjs.com/@uiw/react-search-tree)\n\n\u4f7f\u7528\u6811\u9009\u62e9\u63a7\u4ef6\u53ef\u4ee5\u5b8c\u6574\u5c55\u73b0\u5176\u4e2d\u7684\u5c42\u7ea7\u5173\u7cfb\uff0c\u5e76\u5177\u6709\u9009\u4e2d\u72b6\u6001\u3002\u65b0\u7ec4\u4ef6 v4.11.7+ \u652f\u6301\u3002\n\n```jsx\nimport { SearchTree } from 'uiw';\n// or\nimport SearchTree from '@uiw/react-search-tree';\n```\n\n### \u57fa\u7840\u5b9e\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { SearchTree } from 'uiw';\n\nconst data = [\n {\n label: '\u4e0a\u6d77\u5e02',\n key: 1,\n children:[\n { label: '\u9ec4\u6d66\u533a', key: 2 },\n { label: '\u5362\u6e7e\u533a', key: 3 },\n {\n label: '\u5f90\u6c47\u533a',\n key: 4,\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', key: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: 9,\n children:[\n { label: '\u4e1c\u57ce\u533a', key: 10 },\n { label: '\u897f\u57ce\u533a', key: 11 },\n {\n label: '\u5d07\u6587\u533a',\n key: 12,\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: 14 },\n { label: '\u524d\u95e8\u8857\u9053', key: 15 },\n ]\n },\n ]\n },\n { label: '\u6fb3\u95e8', key: 16 },\n];\n\nconst Demo = () => {\n\nconst [value,valueSet]=useState([{ label: '\u9ec4\u6d66\u533a', key: 12 }])\nconst [valueSinge,valueSingeSet]=useState([{ label: '\u4e0a\u6d77\u5e02', key: '1-0-0' }])\n\nconst onChange=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\n valueSet(selectedAll)\n}\n\nconst onChangeSinge=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\n valueSingeSet(selectedAll)\n}\n\n return (\n <Row gutter={20}>\n <label>\u5355\u9009</label>\n <Row>\n <SearchTree\n style={{width: 200}}\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('singe',searchValue)}\n onChange={onChangeSinge}\n value={valueSinge}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n <label>\u591a\u9009</label>\n <Row>\n <SearchTree\n style={{ width: 200 }}\n allowClear={true}\n onSearch={(searchValue)=>console.log('multiple',searchValue)}\n onChange={onChange}\n value={value}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n <label>\u7981\u7528</label>\n <Row>\n <SearchTree\n disabled={true}\n style={{ width: 200 }}\n allowClear={true}\n value={[{ label: '\u4e1c\u57ce\u533a', key: 10 },{ label: '\u6210\u90fd\u5e02', key: 2 }]}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n </Row>\n )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5c3a\u5bf8\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree } from 'uiw';\n\nconst Demo = () => {\n\nconst data = [\n { label: '\u5c0f\u5c3a\u5bf8', key: 1 },\n { label: '\u9ed8\u8ba4\u5c3a\u5bf8', key: 2 },\n { label: '\u5927\u5c3a\u5bf8', key: 3 },\n ]\n\n return(\n <>\n <SearchTree\n style={{ width: 150 }}\n value={[{ label: '\u5c0f\u5c3a\u5bf8', key: 1 }]}\n options={data}\n size=\"small\"\n />\n <SearchTree\n style={{ width: 175, marginTop: 10 }}\n value={[{ label: '\u9ed8\u8ba4\u5c3a\u5bf8', key: 2 }]}\n options={data}\n />\n <SearchTree\n style={{ width: 200, marginTop: 10 }}\n value={[{ label: '\u5927\u5c3a\u5bf8', key: 3 }]}\n options={data}\n size=\"large\"\n />\n </>\n )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u81ea\u5b9a\u4e49\u7a7a\u9009\u9879\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree } from 'uiw';\n\nconst Demo = () => {\n return(\n <>\n <SearchTree\n style={{ width:200 }}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n <SearchTree\n style={{ width:200,marginTop:5 }}\n emptyOption={<span>\u6682\u65e0\u6570\u636e..</span>}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </>\n )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Form\u4e2d\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Notify, Form, Button, SearchTree, Card, Row, Col,Select } from 'uiw';\nconst Demo = () => {\nconst form=useRef()\n\n const data = [\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\n const setValue=()=>{\n form.current.setFields({\n searchTree: [{ label: '\u4e1c\u57ce\u533a', key: '2-1-0' }, { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' }],\n searchTreeSinge:[{ label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' }]\n })\n }\n\n const resetValue=()=>{\n form.current.resetForm()\n }\n\n return (\n <div>\n <Form\n ref={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.searchTree || current.searchTree.length === 0) {\n errorObj.searchTree = '\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 searchTree: {\n initialValue:[ { label: '\u9ec4\u6d66\u533a', key: '1-0-1' }, { label: '\u5362\u6e7e\u533a', key: '1-0-2' }],\n children: (\n <SearchTree\n allowClear={true}\n style={{ width: 200 }}\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n )\n },\n searchTreeSinge: {\n initialValue:[{ label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' }],\n children: (\n <SearchTree\n multiple={false}\n style={{ width: 200 }}\n allowClear={true}\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n treeProps={{ style:{ 'height':200, overflow:'scroll' }}}\n />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row style={{display:'flex',flexDirection:'column'}}>\n <div>\u591a\u9009</div>\n <Col >{fields.searchTree}</Col>\n </Row>\n <Row style={{display:'flex',flexDirection:'column'}}>\n <label>\u5355\u9009</label>\n <Col >{fields.searchTreeSinge}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n <Button onClick={setValue} type=\"primary\" >setValue</Button>\n <Button onClick={resetValue} type=\"primary\" >\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 |\n|--------- |-------- |--------- |-------- |\n| allowClear | \u652f\u6301\u6e05\u9664 | Boolean | `false` |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` |\n| multiple | \u662f\u5426\u53ef\u4ee5\u591a\u9009 | Boolean | `true` |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee | [{label:string, key:string}] | - |\n| options | \u4e0b\u62c9\u6570\u636e\u6e90,\u53ef\u53c2\u8003Tree\u4e0b\u62c9\u6570\u636e\u6e90 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\n| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum{large, default, small } | `default` |\n| onChange | \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 | function(selectd, selectdAll, isChecked)=>void | - |\n| onSearch | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 | function(searchValue) | - |\n| loading | \u52a0\u8f7d\u4e2d\u72b6\u6001 | Boolean | `false` |\n| emptyOption | \u81ea\u5b9a\u4e49\u4e0b\u62c9\u9009\u9879\u4e3a\u7a7a\u65f6\u663e\u793a\u5185\u5bb9 | React.ReactNode | [Empty](#/components/empty) |\n| tagProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Tag>`](#/components/tag) \u7ec4\u4ef6 | `TagProps` | `{}` | `4.13.0` |\n"}}]);
|
|
2
|
+
//# sourceMappingURL=766.24866c3b.chunk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"static/js/766.7a878028.chunk.js","mappings":"+GAAA","sources":["../../packages/react-search-tree/README.md"],"sourcesContent":["export default \"SearchTree 带搜索的Tree选择控件\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-search-tree)\\n[](https://npmjs.com/@uiw/react-search-tree)\\n\\n使用树选择控件可以完整展现其中的层级关系，并具有选中状态。新组件 v4.11.7+ 支持。\\n\\n```jsx\\nimport { SearchTree } from 'uiw';\\n// or\\nimport SearchTree from '@uiw/react-search-tree';\\n```\\n\\n### 基础实例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { SearchTree } from 'uiw';\\n\\nconst data = [\\n {\\n label: '上海市',\\n key: 1,\\n children:[\\n { label: '黄浦区', key: 2 },\\n { label: '卢湾区', key: 3 },\\n {\\n label: '徐汇区',\\n key: 4,\\n children:[\\n { label: '半淞园路街道', key: 6 },\\n { label: '南京东路街道', key: 7 },\\n { label: '外滩街道', key: 8 },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: 9,\\n children:[\\n { label: '东城区', key: 10 },\\n { label: '西城区', key: 11 },\\n {\\n label: '崇文区',\\n key: 12,\\n children:[\\n { label: '东花市街道', key: 13 },\\n { label: '体育馆路街道', key: 14 },\\n { label: '前门街道', key: 15 },\\n ]\\n },\\n ]\\n },\\n { label: '澳门', key: 16 },\\n];\\n\\nconst Demo = () => {\\n\\nconst [value,valueSet]=useState([{ label: '黄浦区', key: 12 }])\\nconst [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])\\n\\nconst onChange=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\\n valueSet(selectedAll)\\n}\\n\\nconst onChangeSinge=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\\n valueSingeSet(selectedAll)\\n}\\n\\n return (\\n <Row gutter={20}>\\n <label>单选</label>\\n <Row>\\n <SearchTree\\n style={{width: 200}}\\n multiple={false}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('singe',searchValue)}\\n onChange={onChangeSinge}\\n value={valueSinge}\\n options={data}\\n placeholder=\\\"请选择选项\\\"\\n />\\n </Row>\\n <label>多选</label>\\n <Row>\\n <SearchTree\\n style={{ width: 200 }}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('multiple',searchValue)}\\n onChange={onChange}\\n value={value}\\n options={data}\\n placeholder=\\\"请选择选项\\\"\\n />\\n </Row>\\n <label>禁用</label>\\n <Row>\\n <SearchTree\\n disabled={true}\\n style={{ width: 200 }}\\n allowClear={true}\\n value={[{ label: '东城区', key: 10 },{ label: '成都市', key: 2 }]}\\n options={data}\\n placeholder=\\\"请选择选项\\\"\\n />\\n </Row>\\n </Row>\\n )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 尺寸\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport { SearchTree } from 'uiw';\\n\\nconst Demo = () => {\\n\\nconst data = [\\n { label: '小尺寸', key: 1 },\\n { label: '默认尺寸', key: 2 },\\n { label: '大尺寸', key: 3 },\\n ]\\n\\n return(\\n <>\\n <SearchTree\\n style={{ width: 150 }}\\n value={[{ label: '小尺寸', key: 1 }]}\\n options={data}\\n size=\\\"small\\\"\\n />\\n <SearchTree\\n style={{ width: 175, marginTop: 10 }}\\n value={[{ label: '默认尺寸', key: 2 }]}\\n options={data}\\n />\\n <SearchTree\\n style={{ width: 200, marginTop: 10 }}\\n value={[{ label: '大尺寸', key: 3 }]}\\n options={data}\\n size=\\\"large\\\"\\n />\\n </>\\n )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自定义空选项\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport { SearchTree } from 'uiw';\\n\\nconst Demo = () => {\\n return(\\n <>\\n <SearchTree\\n style={{ width:200 }}\\n placeholder=\\\"请选择选项\\\"\\n />\\n <SearchTree\\n style={{ width:200,marginTop:5 }}\\n emptyOption={<span>暂无数据..</span>}\\n placeholder=\\\"请选择选项\\\"\\n />\\n </>\\n )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Form中使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Notify, Form, Button, SearchTree, Card, Row, Col,Select } from 'uiw';\\nconst Demo = () => {\\nconst form=useRef()\\n\\n const data = [\\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\\n const setValue=()=>{\\n form.current.setFields({\\n searchTree: [{ label: '东城区', key: '2-1-0' }, { label: '外滩街道', key: '1-3-0' }],\\n searchTreeSinge:[{ label: '前门街道', key: '2-3-3' }]\\n })\\n }\\n\\n const resetValue=()=>{\\n form.current.resetForm()\\n }\\n\\n return (\\n <div>\\n <Form\\n ref={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.searchTree || current.searchTree.length === 0) {\\n errorObj.searchTree = '默认需要选择内容，选择入内容';\\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 searchTree: {\\n initialValue:[ { label: '黄浦区', key: '1-0-1' }, { label: '卢湾区', key: '1-0-2' }],\\n children: (\\n <SearchTree\\n allowClear={true}\\n style={{ width: 200 }}\\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n options={data}\\n placeholder=\\\"请选择选项\\\"\\n />\\n )\\n },\\n searchTreeSinge: {\\n initialValue:[{ label: '东花市街道', key: '2-3-1' }],\\n children: (\\n <SearchTree\\n multiple={false}\\n style={{ width: 200 }}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n options={data}\\n placeholder=\\\"请选择选项\\\"\\n />\\n )\\n },\\n }}\\n >\\n {({ fields, state, canSubmit }) => {\\n return (\\n <div>\\n <Row style={{display:'flex',flexDirection:'column'}}>\\n <div>多选</div>\\n <Col >{fields.searchTree}</Col>\\n </Row>\\n <Row style={{display:'flex',flexDirection:'column'}}>\\n <label>单选</label>\\n <Col >{fields.searchTreeSinge}</Col>\\n </Row>\\n <Row>\\n <Col fixed>\\n <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n <Button onClick={setValue} type=\\\"primary\\\" >setValue</Button>\\n <Button onClick={resetValue} type=\\\"primary\\\" >重置</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| multiple | 是否可以多选 | Boolean | `true` |\\n| value | 指定当前选中的条目 | [{label:string, key:string}] | - |\\n| options | 下拉数据源,可参考Tree下拉数据源 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\\n| placeholder | 选择框默认文字 | String | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` |\\n| onChange | 选中 option，或 input 的 value，调用此函数 | function(selectd, selectdAll, isChecked)=>void | - |\\n| onSearch | 文本框值变化时回调 | function(searchValue) | - |\\n| loading | 加载中状态 | Boolean | `false` |\\n| emptyOption | 自定义下拉选项为空时显示内容 | React.ReactNode | [Empty](#/components/empty) |\\n| tagProps | 将参数传递给 [`<Tag>`](#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |\\n\";"],"names":[],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"static/js/766.24866c3b.chunk.js","mappings":"+GAAA","sources":["../../packages/react-search-tree/README.md"],"sourcesContent":["export default \"SearchTree 带搜索的Tree选择控件\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-search-tree)\\n[](https://npmjs.com/@uiw/react-search-tree)\\n\\n使用树选择控件可以完整展现其中的层级关系，并具有选中状态。新组件 v4.11.7+ 支持。\\n\\n```jsx\\nimport { SearchTree } from 'uiw';\\n// or\\nimport SearchTree from '@uiw/react-search-tree';\\n```\\n\\n### 基础实例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { SearchTree } from 'uiw';\\n\\nconst data = [\\n {\\n label: '上海市',\\n key: 1,\\n children:[\\n { label: '黄浦区', key: 2 },\\n { label: '卢湾区', key: 3 },\\n {\\n label: '徐汇区',\\n key: 4,\\n children:[\\n { label: '半淞园路街道', key: 6 },\\n { label: '南京东路街道', key: 7 },\\n { label: '外滩街道', key: 8 },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: 9,\\n children:[\\n { label: '东城区', key: 10 },\\n { label: '西城区', key: 11 },\\n {\\n label: '崇文区',\\n key: 12,\\n children:[\\n { label: '东花市街道', key: 13 },\\n { label: '体育馆路街道', key: 14 },\\n { label: '前门街道', key: 15 },\\n ]\\n },\\n ]\\n },\\n { label: '澳门', key: 16 },\\n];\\n\\nconst Demo = () => {\\n\\nconst [value,valueSet]=useState([{ label: '黄浦区', key: 12 }])\\nconst [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])\\n\\nconst onChange=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\\n valueSet(selectedAll)\\n}\\n\\nconst onChangeSinge=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\\n valueSingeSet(selectedAll)\\n}\\n\\n return (\\n <Row gutter={20}>\\n <label>单选</label>\\n <Row>\\n <SearchTree\\n style={{width: 200}}\\n multiple={false}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('singe',searchValue)}\\n onChange={onChangeSinge}\\n value={valueSinge}\\n options={data}\\n placeholder=\\\"请选择选项\\\"\\n />\\n </Row>\\n <label>多选</label>\\n <Row>\\n <SearchTree\\n style={{ width: 200 }}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('multiple',searchValue)}\\n onChange={onChange}\\n value={value}\\n options={data}\\n placeholder=\\\"请选择选项\\\"\\n />\\n </Row>\\n <label>禁用</label>\\n <Row>\\n <SearchTree\\n disabled={true}\\n style={{ width: 200 }}\\n allowClear={true}\\n value={[{ label: '东城区', key: 10 },{ label: '成都市', key: 2 }]}\\n options={data}\\n placeholder=\\\"请选择选项\\\"\\n />\\n </Row>\\n </Row>\\n )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 尺寸\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport { SearchTree } from 'uiw';\\n\\nconst Demo = () => {\\n\\nconst data = [\\n { label: '小尺寸', key: 1 },\\n { label: '默认尺寸', key: 2 },\\n { label: '大尺寸', key: 3 },\\n ]\\n\\n return(\\n <>\\n <SearchTree\\n style={{ width: 150 }}\\n value={[{ label: '小尺寸', key: 1 }]}\\n options={data}\\n size=\\\"small\\\"\\n />\\n <SearchTree\\n style={{ width: 175, marginTop: 10 }}\\n value={[{ label: '默认尺寸', key: 2 }]}\\n options={data}\\n />\\n <SearchTree\\n style={{ width: 200, marginTop: 10 }}\\n value={[{ label: '大尺寸', key: 3 }]}\\n options={data}\\n size=\\\"large\\\"\\n />\\n </>\\n )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自定义空选项\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport { SearchTree } from 'uiw';\\n\\nconst Demo = () => {\\n return(\\n <>\\n <SearchTree\\n style={{ width:200 }}\\n placeholder=\\\"请选择选项\\\"\\n />\\n <SearchTree\\n style={{ width:200,marginTop:5 }}\\n emptyOption={<span>暂无数据..</span>}\\n placeholder=\\\"请选择选项\\\"\\n />\\n </>\\n )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Form中使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Notify, Form, Button, SearchTree, Card, Row, Col,Select } from 'uiw';\\nconst Demo = () => {\\nconst form=useRef()\\n\\n const data = [\\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\\n const setValue=()=>{\\n form.current.setFields({\\n searchTree: [{ label: '东城区', key: '2-1-0' }, { label: '外滩街道', key: '1-3-0' }],\\n searchTreeSinge:[{ label: '前门街道', key: '2-3-3' }]\\n })\\n }\\n\\n const resetValue=()=>{\\n form.current.resetForm()\\n }\\n\\n return (\\n <div>\\n <Form\\n ref={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.searchTree || current.searchTree.length === 0) {\\n errorObj.searchTree = '默认需要选择内容，选择入内容';\\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 searchTree: {\\n initialValue:[ { label: '黄浦区', key: '1-0-1' }, { label: '卢湾区', key: '1-0-2' }],\\n children: (\\n <SearchTree\\n allowClear={true}\\n style={{ width: 200 }}\\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n options={data}\\n placeholder=\\\"请选择选项\\\"\\n />\\n )\\n },\\n searchTreeSinge: {\\n initialValue:[{ label: '东花市街道', key: '2-3-1' }],\\n children: (\\n <SearchTree\\n multiple={false}\\n style={{ width: 200 }}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n options={data}\\n placeholder=\\\"请选择选项\\\"\\n treeProps={{ style:{ 'height':200, overflow:'scroll' }}}\\n />\\n )\\n },\\n }}\\n >\\n {({ fields, state, canSubmit }) => {\\n return (\\n <div>\\n <Row style={{display:'flex',flexDirection:'column'}}>\\n <div>多选</div>\\n <Col >{fields.searchTree}</Col>\\n </Row>\\n <Row style={{display:'flex',flexDirection:'column'}}>\\n <label>单选</label>\\n <Col >{fields.searchTreeSinge}</Col>\\n </Row>\\n <Row>\\n <Col fixed>\\n <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n <Button onClick={setValue} type=\\\"primary\\\" >setValue</Button>\\n <Button onClick={resetValue} type=\\\"primary\\\" >重置</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| multiple | 是否可以多选 | Boolean | `true` |\\n| value | 指定当前选中的条目 | [{label:string, key:string}] | - |\\n| options | 下拉数据源,可参考Tree下拉数据源 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\\n| placeholder | 选择框默认文字 | String | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` |\\n| onChange | 选中 option，或 input 的 value，调用此函数 | function(selectd, selectdAll, isChecked)=>void | - |\\n| onSearch | 文本框值变化时回调 | function(searchValue) | - |\\n| loading | 加载中状态 | Boolean | `false` |\\n| emptyOption | 自定义下拉选项为空时显示内容 | React.ReactNode | [Empty](#/components/empty) |\\n| tagProps | 将参数传递给 [`<Tag>`](#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |\\n\";"],"names":[],"sourceRoot":""}
|