@uiw/doc 4.9.11 → 4.10.0

package/web/static/js/4036.46baa59c.chunk.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4036],{94036:function(n,e,i){i.r(e),e.default="Pagination \u5206\u9875\n===\n\n\u5f53\u6570\u636e\u91cf\u8f83\u591a\u65f6\uff0c\u4f7f\u7528\u5206\u9875\u53ef\u4ee5\u5feb\u901f\u8fdb\u884c\u6570\u636e\u5207\u6362\uff0c\u6bcf\u6b21\u53ea\u52a0\u8f7d\u4e00\u4e2a\u9875\u9762\u3002\n\n```jsx\nimport { Pagination } from 'uiw';\n// or\nimport Pagination from '@uiw/react-pagination';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Pagination, Divider } from 'uiw';\n\nReactDOM.render(\n  <div>\n    <Pagination current={2} pageSize={10} total={30} divider />\n    <Divider />\n    <Pagination current={2} pageSize={10} total={38} divider />\n    <Divider />\n    <Pagination current={1} pageSize={5} total={249} />\n    <Divider />\n    <Pagination current={1} alignment=\"center\" pageSize={10} total={50} />\n    <Divider />\n    <Pagination current={1} pageSize={10} total={60} divider />\n    <Divider />\n    <Pagination current={1} pageSize={10} total={70} divider />\n  </div>,\n  _mount_\n);\n```\n\n### \u8ff7\u4f60\u5206\u9875\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Pagination, Divider } from 'uiw';\n\nReactDOM.render(\n  <div>\n    <Pagination size=\"small\" current={1} pageSize={5} total={249} />\n    <Divider />\n    <Pagination size=\"small\" current={1} pageSize={10} total={50} />\n  </div>,\n  _mount_\n);\n```\n\n### \u5bf9\u9f50\n\n\u76ee\u524d\u6709\u4e09\u79cd\u5bf9\u9f50\u65b9\u5f0f `\u5de6\u8fb9(left)`\u3001`\u4e2d\u95f4(center)`\u3001`\u53f3\u8fb9(right)`\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Pagination, Divider } from 'uiw';\n\nReactDOM.render(\n  <div>\n    <Pagination\n      current={5}\n      total={250}\n      onChange={(pageNumber) => { \n        console.log(`pageNumber:${pageNumber}`)\n      }}\n    />\n    <Divider />\n    <Pagination\n      current={1}\n      alignment=\"center\"\n      total={250}\n      onChange={(pageNumber) => { \n        console.log(`pageNumber:${pageNumber}`)\n      }}\n    />\n    <Divider />\n    <Pagination\n      current={25}\n      alignment=\"right\"\n      total={250}\n      onChange={(pageNumber) => { \n        console.log(`pageNumber:${pageNumber}`)\n      }}\n    />\n  </div>,\n  _mount_\n);\n```\n\n### Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|------ |-------- |---------- |-------- |\n| current | \u5f53\u524d\u9875\u6570\uff0c\u9009\u4e2d\u7684\u9875\u6570 | Number | 1 |\n| total | \u6570\u636e\u603b\u6570 | Number | 0 |\n| pageSize | \u6bcf\u9875\u6761\u6570 | Number | 10 |\n| divider | \u9875\u7801\u4e4b\u95f4\u662f\u5426\u95f4\u9694 | Boolean | - |\n| size | \u5f53\u4e3a `small` \u65f6\uff0c\u662f\u5c0f\u5c3a\u5bf8\u5206\u9875 | Enum{`small`, `default`} | - |\n| alignment | \u5bf9\u9f50 | Enum{`left`, `center`, `right`} | `left` |\n| onChange | \u9875\u7801\u6539\u53d8\u7684\u56de\u8c03\uff0c\u8fd4\u56de\u6539\u53d8\u540e\u7684\u9875\u7801 | Function(current, total, pageSize) | - |"}}]);
+//# sourceMappingURL=4036.46baa59c.chunk.js.map

package/web/static/js/4036.46baa59c.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/4036.46baa59c.chunk.js","mappings":"gHAAA","sources":["../../packages/react-pagination/README.md"],"sourcesContent":["export default \"Pagination 分页\\n===\\n\\n当数据量较多时，使用分页可以快速进行数据切换，每次只加载一个页面。\\n\\n```jsx\\nimport { Pagination } from 'uiw';\\n// or\\nimport Pagination from '@uiw/react-pagination';\\n```\\n\\n### 基本用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Pagination, Divider } from 'uiw';\\n\\nReactDOM.render(\\n  <div>\\n    <Pagination current={2} pageSize={10} total={30} divider />\\n    <Divider />\\n    <Pagination current={2} pageSize={10} total={38} divider />\\n    <Divider />\\n    <Pagination current={1} pageSize={5} total={249} />\\n    <Divider />\\n    <Pagination current={1} alignment=\\\"center\\\" pageSize={10} total={50} />\\n    <Divider />\\n    <Pagination current={1} pageSize={10} total={60} divider />\\n    <Divider />\\n    <Pagination current={1} pageSize={10} total={70} divider />\\n  </div>,\\n  _mount_\\n);\\n```\\n\\n### 迷你分页\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Pagination, Divider } from 'uiw';\\n\\nReactDOM.render(\\n  <div>\\n    <Pagination size=\\\"small\\\" current={1} pageSize={5} total={249} />\\n    <Divider />\\n    <Pagination size=\\\"small\\\" current={1} pageSize={10} total={50} />\\n  </div>,\\n  _mount_\\n);\\n```\\n\\n### 对齐\\n\\n目前有三种对齐方式 `左边(left)`、`中间(center)`、`右边(right)`。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Pagination, Divider } from 'uiw';\\n\\nReactDOM.render(\\n  <div>\\n    <Pagination\\n      current={5}\\n      total={250}\\n      onChange={(pageNumber) => { \\n        console.log(`pageNumber:${pageNumber}`)\\n      }}\\n    />\\n    <Divider />\\n    <Pagination\\n      current={1}\\n      alignment=\\\"center\\\"\\n      total={250}\\n      onChange={(pageNumber) => { \\n        console.log(`pageNumber:${pageNumber}`)\\n      }}\\n    />\\n    <Divider />\\n    <Pagination\\n      current={25}\\n      alignment=\\\"right\\\"\\n      total={250}\\n      onChange={(pageNumber) => { \\n        console.log(`pageNumber:${pageNumber}`)\\n      }}\\n    />\\n  </div>,\\n  _mount_\\n);\\n```\\n\\n### Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|------ |-------- |---------- |-------- |\\n| current | 当前页数，选中的页数 | Number | 1 |\\n| total | 数据总数 | Number | 0 |\\n| pageSize | 每页条数 | Number | 10 |\\n| divider | 页码之间是否间隔 | Boolean | - |\\n| size | 当为 `small` 时，是小尺寸分页 | Enum{`small`, `default`} | - |\\n| alignment | 对齐 | Enum{`left`, `center`, `right`} | `left` |\\n| onChange | 页码改变的回调，返回改变后的页码 | Function(current, total, pageSize) | - |\";"],"names":[],"sourceRoot":""}

package/web/static/js/5253.0a82cabf.chunk.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5253],{45253:function(n,e,t){t.r(e),e.default="Affix \u56fe\u9489\n===\n\n\u4f7f\u7528\u56fe\u9489\uff0c\u53ef\u4ee5\u5c06\u5185\u5bb9\u56fa\u5b9a\u5728\u5c4f\u5e55\u53ef\u89c6\u8303\u56f4\uff0c\u5e76\u4e14\u4e0d\u968f\u9875\u9762\u7684\u6eda\u52a8\u800c\u6eda\u52a8\uff0c\u5e38\u7528\u4e8e\u83dc\u5355\u7b49\u3002\n\n```jsx\nimport { Affix } from 'uiw';\n// or\nimport Affix from '@uiw/react-affix';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n \n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Affix, Button } from 'uiw';\n\nReactDOM.render(\n  <Affix offsetTop={60}>\n    <Button type=\"primary\">1 \u5f53\u6309\u94ae\u8ddd\u79bb\u9876\u90e8\u8ddd\u79bb\u4e3a 0\uff0c\u6309\u94ae\u88ab\u9489\u5728\u9876\u90e8</Button>\n  </Affix>,\n  _mount_\n);\n```\n\n### \u9489\u5728\u5e95\u90e8\n\n\u8fd9\u4e2a\u5b9e\u4f8b\u9700\u8981\u4f60\u7f29\u5c0f\u7a97\u53e3\u9ad8\u5ea6\uff0c\u5c31\u53ef\u4ee5\u6d4b\u8bd5\u770b\u6548\u679c\u5566\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Affix, Button } from 'uiw';\n\nReactDOM.render(\n  <Affix offsetBottom={10} onChange={(affixed) => {\n    console.log('affixed::', affixed);\n  }}>\n    <Button type=\"primary\" style={{ marginLeft: 20 }}>2 \u5f53\u6309\u94ae\u8ddd\u79bb\u5e95\u90e8\u8ddd\u79bb\u4e3a 0\uff0c\u6309\u94ae\u88ab\u9489\u5728\u5e95\u90e8</Button>\n  </Affix>,\n  _mount_\n);\n```\n\n### Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| offsetBottom | \t\u8ddd\u79bb\u7a97\u53e3\u5e95\u90e8\u8fbe\u5230\u6307\u5b9a\u504f\u79fb\u91cf\u540e\u89e6\u53d1 | Number| - |\n| offsetTop | \t\u8ddd\u79bb\u7a97\u53e3\u9876\u90e8\u8fbe\u5230\u6307\u5b9a\u504f\u79fb\u91cf\u540e\u89e6\u53d1 | Number| - |\n| onChange | \t\t\u56fa\u5b9a\u72b6\u6001\u6539\u53d8\u65f6\u89e6\u53d1\u7684\u56de\u8c03\u51fd\u6570 | Function(affixed) | - |\n"}}]);
+//# sourceMappingURL=5253.0a82cabf.chunk.js.map

package/web/static/js/5253.0a82cabf.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/5253.0a82cabf.chunk.js","mappings":"gHAAA","sources":["../../packages/react-affix/README.md"],"sourcesContent":["export default \"Affix 图钉\\n===\\n\\n使用图钉，可以将内容固定在屏幕可视范围，并且不随页面的滚动而滚动，常用于菜单等。\\n\\n```jsx\\nimport { Affix } from 'uiw';\\n// or\\nimport Affix from '@uiw/react-affix';\\n```\\n\\n### 基本用法\\n \\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Affix, Button } from 'uiw';\\n\\nReactDOM.render(\\n  <Affix offsetTop={60}>\\n    <Button type=\\\"primary\\\">1 当按钮距离顶部距离为 0，按钮被钉在顶部</Button>\\n  </Affix>,\\n  _mount_\\n);\\n```\\n\\n### 钉在底部\\n\\n这个实例需要你缩小窗口高度，就可以测试看效果啦。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Affix, Button } from 'uiw';\\n\\nReactDOM.render(\\n  <Affix offsetBottom={10} onChange={(affixed) => {\\n    console.log('affixed::', affixed);\\n  }}>\\n    <Button type=\\\"primary\\\" style={{ marginLeft: 20 }}>2 当按钮距离底部距离为 0，按钮被钉在底部</Button>\\n  </Affix>,\\n  _mount_\\n);\\n```\\n\\n### Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| offsetBottom | \\t距离窗口底部达到指定偏移量后触发 | Number| - |\\n| offsetTop | \\t距离窗口顶部达到指定偏移量后触发 | Number| - |\\n| onChange | \\t\\t固定状态改变时触发的回调函数 | Function(affixed) | - |\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/{5865.fa18da02.chunk.js → 5865.4acbd8ea.chunk.js}

@@ -1,2 +1,2 @@
-(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5865],{84934:function(e){function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=function(){return[]},n.resolve=n,n.id=84934,e.exports=n},86082:function(e,n,t){"use strict";t.d(n,{Z:function(){return b}});var r=t(50189),o=t(53782),i=t(11026),s=t(41473),c=t(24931),d=t(75752),a=t(64508),u=t(69286),l=["version","dependencies","codePen","codeSandbox"];function p(e){var n=e.version,t=e.dependencies,i=e.codePen,s=e.codeSandbox,c=(0,o.Z)(e,l),d=(0,r.Z)({},c);return i&&(d.codePenOption={title:"uiw".concat(n," - demo"),includeModule:["uiw"],js:(d.code||"").replace("_mount_",'document.getElementById("container")'),html:'<div id="container" style="padding: 24px"></div>',css_external:"https://unpkg.com/uiw@".concat(n,"/dist/uiw.min.css"),js_external:"https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/classnames@2.2.6/index.js;https://unpkg.com/uiw@".concat(n,"/dist/uiw.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.0.2/index.js")}),s&&(d.codeSandboxOption={files:{"sandbox.config.json":{content:'{\n            "template": "node",\n            "container": {\n              "startScript": "start",\n              "node": "14"\n            }\n          }'},"public/index.html":{content:'<div id="container"></div>'},"src/index.js":{content:(d.code||"").replace("_mount_",'document.getElementById("container")')},".kktrc.js":{content:'import webpack from "webpack";\nimport lessModules from "@kkt/less-modules";\nexport default (conf, env, options) => {\nconf = lessModules(conf, env, options);\nreturn conf;\n};'},"package.json":{content:{name:"uiw-demo",description:"uiw v".concat(n," - demo"),dependencies:{react:"latest","react-dom":"latest",uiw:"latest"},devDependencies:{"@kkt/less-modules":"6.9.0",kkt:"6.9.0",typescript:"4.1.3"},license:"MIT",scripts:{start:"kkt start",build:"kkt build",test:"kkt test --env=jsdom"},browserslist:[">0.2%","not dead","not ie <= 11","not op_mini all"]}}}}),(0,u.jsx)(a.Z,(0,r.Z)((0,r.Z)({},d),{},{dependencies:t,style:{marginBottom:0}}))}var h=t(22755);function m(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.path,t=/^http/.test(n||"")?n:"https://github.com/uiwjs/uiw/blob/master/".concat(n);return(0,u.jsxs)(s.Fragment,{children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",t&&(0,u.jsx)("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,u.jsx)("br",{}),(0,u.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,u.jsx)(h.iz,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,u.jsx)(h.iz,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,u.jsx)(h.iz,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,u.jsx)(h.iz,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,u.jsx)(h.iz,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}var f="index_docinfo__3Vx8S",k="index_markdown__hcQCp",v=["inline","node"],x=function e(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return n.forEach((function(n){"text"===n.type?t+=n.value:n.children&&Array.isArray(n.children)&&(t+=e(n.children))})),t};function b(e){var n=e.renderPage,t=e.dependencies,a=e.path,l=(0,s.useState)(""),h=(0,i.Z)(l,2),b=h[0],j=h[1],g=d.i8||"2.0.0";return(0,s.useEffect)((function(){n&&n().then((function(e){j(e)})).catch((function(){}))}),[]),b?(0,u.jsxs)("div",{children:[(0,u.jsx)(c.Z,{source:b,className:k,components:{code:function(e){var n=e.inline,i=e.node,s=(0,o.Z)(e,v),c=s,d=c.noPreview,a=c.bordered,l=c.noScroll,h=c.bgWhite,m=c.noCode,f=c.codePen;if(n)return(0,u.jsx)("code",(0,r.Z)({},s));var k={noPreview:d,bordered:a,noScroll:l,bgWhite:h,noCode:m,codePen:f};return 0===Object.keys(k).filter((function(e){return void 0!==k[e]})).length?(0,u.jsx)("code",(0,r.Z)({},s)):(0,u.jsx)(p,{version:g,code:x(i.children),dependencies:t,noPreview:d,bordered:a,noScroll:l,bgWhite:h,noCode:m,codePen:f})}}}),(0,u.jsx)("div",{className:f,children:(0,u.jsx)(m,{path:a})})]}):null}},8041:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return a}});var r=t(27791),o=t(57135),i=t.n(o),s=(t(41473),t(22755)),c=t(86082),d=t(69286);function a(){return(0,d.jsx)(c.Z,{path:"https://github.com/uiwjs/uiw/tree/master/packages/react-menu/README.md",dependencies:{Menu:s.v2,Row:s.X2,Col:s.JX,Switch:s.rs,Icon:s.JO,Popover:s.J2,Button:s.zx},renderPage:(0,r.Z)(i().mark((function e(){var n;return i().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.e(9137).then(t.bind(t,29137));case 2:return n=e.sent,e.abrupt("return",n.default||n);case 4:case"end":return e.stop()}}),e)})))})}}}]);
-//# sourceMappingURL=5865.fa18da02.chunk.js.map
+(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5865],{84934:function(e){function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=function(){return[]},n.resolve=n,n.id=84934,e.exports=n},86082:function(e,n,t){"use strict";t.d(n,{Z:function(){return b}});var r=t(50189),o=t(53782),i=t(11026),s=t(41473),c=t(24931),d=t(75752),a=t(64508),u=t(69286),l=["version","dependencies","codePen","codeSandbox"];function p(e){var n=e.version,t=e.dependencies,i=e.codePen,s=e.codeSandbox,c=(0,o.Z)(e,l),d=(0,r.Z)({},c);return i&&(d.codePenOption={title:"uiw".concat(n," - demo"),includeModule:["uiw"],js:(d.code||"").replace("_mount_",'document.getElementById("container")'),html:'<div id="container" style="padding: 24px"></div>',css_external:"https://unpkg.com/uiw@".concat(n,"/dist/uiw.min.css"),js_external:"https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/classnames@2.2.6/index.js;https://unpkg.com/uiw@".concat(n,"/dist/uiw.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.0.2/index.js")}),s&&(d.codeSandboxOption={files:{"sandbox.config.json":{content:'{\n            "template": "node",\n            "container": {\n              "startScript": "start",\n              "node": "14"\n            }\n          }'},"public/index.html":{content:'<div id="container"></div>'},"src/index.js":{content:(d.code||"").replace("_mount_",'document.getElementById("container")')},".kktrc.js":{content:'import webpack from "webpack";\nimport lessModules from "@kkt/less-modules";\nexport default (conf, env, options) => {\nconf = lessModules(conf, env, options);\nreturn conf;\n};'},"package.json":{content:{name:"uiw-demo",description:"uiw v".concat(n," - demo"),dependencies:{react:"latest","react-dom":"latest",uiw:"latest"},devDependencies:{"@kkt/less-modules":"6.9.0",kkt:"6.9.0",typescript:"4.1.3"},license:"MIT",scripts:{start:"kkt start",build:"kkt build",test:"kkt test --env=jsdom"},browserslist:[">0.2%","not dead","not ie <= 11","not op_mini all"]}}}}),(0,u.jsx)(a.Z,(0,r.Z)((0,r.Z)({},d),{},{dependencies:t,style:{marginBottom:0}}))}var h=t(22755);function m(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.path,t=/^http/.test(n||"")?n:"https://github.com/uiwjs/uiw/blob/master/".concat(n);return(0,u.jsxs)(s.Fragment,{children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",t&&(0,u.jsx)("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,u.jsx)("br",{}),(0,u.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,u.jsx)(h.iz,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,u.jsx)(h.iz,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,u.jsx)(h.iz,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,u.jsx)(h.iz,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,u.jsx)(h.iz,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}var f="index_docinfo__3Vx8S",k="index_markdown__hcQCp",v=["inline","node"],x=function e(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return n.forEach((function(n){"text"===n.type?t+=n.value:n.children&&Array.isArray(n.children)&&(t+=e(n.children))})),t};function b(e){var n=e.renderPage,t=e.dependencies,a=e.path,l=(0,s.useState)(""),h=(0,i.Z)(l,2),b=h[0],j=h[1],g=d.i8||"2.0.0";return(0,s.useEffect)((function(){n&&n().then((function(e){j(e)})).catch((function(){}))}),[]),b?(0,u.jsxs)("div",{children:[(0,u.jsx)(c.Z,{source:b,className:k,components:{code:function(e){var n=e.inline,i=e.node,s=(0,o.Z)(e,v),c=s,d=c.noPreview,a=c.bordered,l=c.noScroll,h=c.bgWhite,m=c.noCode,f=c.codePen;if(n)return(0,u.jsx)("code",(0,r.Z)({},s));var k={noPreview:d,bordered:a,noScroll:l,bgWhite:h,noCode:m,codePen:f};return 0===Object.keys(k).filter((function(e){return void 0!==k[e]})).length?(0,u.jsx)("code",(0,r.Z)({},s)):(0,u.jsx)(p,{version:g,code:x(i.children),dependencies:t,noPreview:d,bordered:a,noScroll:l,bgWhite:h,noCode:m,codePen:f})}}}),(0,u.jsx)("div",{className:f,children:(0,u.jsx)(m,{path:a})})]}):null}},8041:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return a}});var r=t(27791),o=t(57135),i=t.n(o),s=(t(41473),t(22755)),c=t(86082),d=t(69286);function a(){return(0,d.jsx)(c.Z,{path:"https://github.com/uiwjs/uiw/tree/master/packages/react-menu/README.md",dependencies:{Menu:s.v2,MenuItem:s.sN,MenuDivider:s.R,SubMenu:s.Wd,Row:s.X2,Col:s.JX,Switch:s.rs,Icon:s.JO,Popover:s.J2,Button:s.zx},renderPage:(0,r.Z)(i().mark((function e(){var n;return i().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.e(9137).then(t.bind(t,29137));case 2:return n=e.sent,e.abrupt("return",n.default||n);case 4:case"end":return e.stop()}}),e)})))})}}}]);
+//# sourceMappingURL=5865.4acbd8ea.chunk.js.map

package/web/static/js/5865.4acbd8ea.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/5865.4acbd8ea.chunk.js","mappings":"wFAAA,SAASA,EAAoBC,GAC5B,IAAIC,EAAI,IAAIC,MAAM,uBAAyBF,EAAM,KAEjD,MADAC,EAAEE,KAAO,mBACHF,EAEPF,EAAoBK,KAAO,WAAa,MAAO,IAC/CL,EAAoBM,QAAUN,EAC9BA,EAAoBO,GAAK,MACzBC,EAAOC,QAAUT,G,oNCEF,SAASU,EAAT,GAAqF,IAArEC,EAAoE,EAApEA,QAASC,EAA2D,EAA3DA,aAAcC,EAA6C,EAA7CA,QAASC,EAAoC,EAApCA,YAAgBC,GAAoB,YAC3FC,GAAuB,UAAQD,GA0DrC,OAzDIF,IACFG,EAAMC,cAAgB,CACpBC,MAAM,MAAD,OAAQP,EAAR,WACLQ,cAAe,CAAC,OAChBC,IAAKJ,EAAMZ,MAAQ,IAAIiB,QAAQ,UAAW,wCAC1CC,KAAM,mDACNC,aAAa,yBAAD,OAA2BZ,EAA3B,qBACZa,YAAY,yLAAD,OAA2Lb,EAA3L,qFAGXG,IACFE,EAAMS,kBAAoB,CACxBC,MAAO,CACL,sBAAuB,CACrBC,QAAQ,iKAQV,oBAAqB,CACnBA,QAAQ,8BAEV,eAAgB,CACdA,SAAUX,EAAMZ,MAAQ,IAAIiB,QAAQ,UAAW,yCAEjD,YAAa,CACXM,QAAQ,qLAEV,eAAgB,CACdA,QAAS,CACPC,KAAM,WACNC,YAAY,QAAD,OAAUlB,EAAV,WACXC,aAAc,CACZkB,MAAO,SACP,YAAa,SACbC,IAAK,UAEPC,gBAAiB,CACf,oBAAqB,QACrBC,IAAK,QACLC,WAAY,SAEdC,QAAS,MACTC,QAAS,CACPC,MAAO,YACPC,MAAO,YACPC,KAAM,wBAERC,aAAc,CAAC,QAAS,WAAY,eAAgB,yBAMvD,SAAC,KAAD,kBAAiBxB,GAAjB,IAAwBJ,aAAcA,EAAc6B,MAAO,CAAEC,aAAc,M,eC9DrE,SAAS,IAA2B,IAA1B1B,EAAyB,uDAAJ,GACpC2B,EAAS3B,EAAT2B,KACFC,EAAM,QAAQL,KAAKI,GAAQ,IAAMA,EAA3B,mDAA8EA,GAC1F,OACE,UAAC,EAAAE,SAAD,wGAEGD,IACC,cAAGE,KAAMF,EAAKG,OAAO,SAASC,IAAI,sBAAlC,+DAIF,mBACA,cAAGF,KAAK,sCAAsCC,OAAO,SAASC,IAAI,sBAAlE,uCAGA,SAAC,KAAD,CAASC,KAAK,cACd,cAAGF,OAAO,SAASC,IAAI,sBAAsBF,KAAK,0CAAlD,8BAGA,SAAC,KAAD,CAASG,KAAK,cACd,cAAGF,OAAO,SAASC,IAAI,sBAAsBF,KAAK,+BAAlD,qBAGA,SAAC,KAAD,CAASG,KAAK,cACd,cAAGF,OAAO,SAASC,IAAI,sBAAsBF,KAAK,+BAAlD,kBAGA,SAAC,KAAD,CAASG,KAAK,cACd,cAAGF,OAAO,SAASC,IAAI,sBAAsBF,KAAK,mCAAlD,uBAGA,SAAC,KAAD,CAASG,KAAK,cACd,cAAGF,OAAO,SAASC,IAAI,sBAAsBF,KAAK,sBAAlD,yCCtCN,MAA0B,uBAA1B,EAA4D,wB,oBCYtDI,EAAa,SAAbA,IAAuD,IAAzCC,EAAwC,uDAA1B,GAAI/C,EAAsB,uDAAP,GAQnD,OAPA+C,EAAKC,SAAQ,SAACC,GACM,SAAdA,EAAKJ,KACP7C,GAAQiD,EAAKC,MACJD,EAAKE,UAAYC,MAAMC,QAAQJ,EAAKE,YAC7CnD,GAAQ8C,EAAWG,EAAKE,cAGrBnD,GAGM,SAASsD,EAAc1C,GACpC,IAAQ2C,EAAmC3C,EAAnC2C,WAAY/C,EAAuBI,EAAvBJ,aAAc+B,EAAS3B,EAAT2B,KAClC,GAA0BiB,EAAAA,EAAAA,UAAS,IAAnC,eAAOC,EAAP,KAAcC,EAAd,KAEMnD,EAAUoD,EAAAA,IAAe,QAY/B,OAXAC,EAAAA,EAAAA,YAAU,WACJL,GACFA,IACGM,MAAK,SAACC,GACLJ,EAASI,MAEVC,OAAM,iBAGV,IAEEN,GAKH,4BACE,SAAC,IAAD,CACEO,OAAQP,EACRQ,UAAWC,EACXC,WAAY,CASVnE,KAAM,YAAiC,IAA9BoE,EAA6B,EAA7BA,OAAQnB,EAAqB,EAArBA,KAASrC,GAAY,YACpC,EAAoEA,EAA5DyD,EAAR,EAAQA,UAAWC,EAAnB,EAAmBA,SAAUC,EAA7B,EAA6BA,SAAUC,EAAvC,EAAuCA,QAASC,EAAhD,EAAgDA,OAAQhE,EAAxD,EAAwDA,QACxD,GAAI2D,EACF,OAAO,2BAAUxD,IAEnB,IAAM8D,EAAS,CACbL,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAhE,QAAAA,GAEF,OAAgF,IAA5EkE,OAAO1E,KAAKyE,GAAQE,QAAO,SAACpD,GAAD,YAA2BqD,IAAjBH,EAAOlD,MAAqBsD,QAC5D,2BAAUlE,KAGjB,SAACN,EAAD,CACEC,QAASA,EACTP,KAAM8C,EAAWG,EAAKE,UACtB3C,aAAcA,EACR6D,UAAAA,EAAWC,SAAAA,EAAUC,SAAAA,EAAUC,QAAAA,EAASC,OAAAA,EAAQhE,QAAAA,SAMhE,gBAAKwD,UAAWC,EAAhB,UACE,SAACa,EAAD,CAAQxC,KAAMA,SA7CX,O,8JCrCI,SAASyC,IACtB,OACE,SAAC,IAAD,CACEzC,KAAK,yEACL/B,aAAc,CAAEyE,KAAAA,EAAAA,GAAMC,SAAAA,EAAAA,GAAUC,YAAAA,EAAAA,EAAaC,QAAAA,EAAAA,GAASC,IAAAA,EAAAA,GAAKC,IAAAA,EAAAA,GAAKC,OAAAA,EAAAA,GAAQC,KAAAA,EAAAA,GAAMC,QAAAA,EAAAA,GAASC,OAAAA,EAAAA,IACvFnC,YAAU,iBAAE,oGACO,gCADP,cACJoC,EADI,yBAEHA,EAAGC,SAAWD,GAFX","sources":["../../node_modules/@babel/standalone|sync|nonrecursive","components/Markdown/Code.tsx","components/Markdown/Footer.tsx","webpack://website/./src/components/Markdown/index.module.less?6e49","components/Markdown/index.tsx","routes/components/menu/index.tsx"],"sourcesContent":["function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = function() { return []; };\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = 84934;\nmodule.exports = webpackEmptyContext;","import CodePreview, { CodePreviewProps } from '@uiw/react-code-preview';\n\nexport interface CodeProps extends CodePreviewProps {\n  code: string;\n  version: string;\n  codePen: boolean;\n  codeSandbox?: boolean;\n  dependencies: any;\n}\n\nexport default function Code({ version, dependencies, codePen, codeSandbox, ...other }: CodeProps) {\n  const props: CodePreviewProps = { ...other };\n  if (codePen) {\n    props.codePenOption = {\n      title: `uiw${version} - demo`,\n      includeModule: ['uiw'],\n      js: (props.code || '').replace('_mount_', 'document.getElementById(\"container\")'),\n      html: '<div id=\"container\" style=\"padding: 24px\"></div>',\n      css_external: `https://unpkg.com/uiw@${version}/dist/uiw.min.css`,\n      js_external: `https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/classnames@2.2.6/index.js;https://unpkg.com/uiw@${version}/dist/uiw.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.0.2/index.js`,\n    };\n  }\n  if (codeSandbox) {\n    props.codeSandboxOption = {\n      files: {\n        'sandbox.config.json': {\n          content: `{\n            \"template\": \"node\",\n            \"container\": {\n              \"startScript\": \"start\",\n              \"node\": \"14\"\n            }\n          }`,\n        },\n        'public/index.html': {\n          content: `<div id=\"container\"></div>`,\n        },\n        'src/index.js': {\n          content: (props.code || '').replace('_mount_', 'document.getElementById(\"container\")'),\n        },\n        '.kktrc.js': {\n          content: `import webpack from \"webpack\";\\nimport lessModules from \"@kkt/less-modules\";\\nexport default (conf, env, options) => {\\nconf = lessModules(conf, env, options);\\nreturn conf;\\n};`,\n        },\n        'package.json': {\n          content: {\n            name: 'uiw-demo',\n            description: `uiw v${version} - demo`,\n            dependencies: {\n              react: 'latest',\n              'react-dom': 'latest',\n              uiw: 'latest',\n            },\n            devDependencies: {\n              '@kkt/less-modules': '6.9.0',\n              kkt: '6.9.0',\n              typescript: '4.1.3',\n            },\n            license: 'MIT',\n            scripts: {\n              start: 'kkt start',\n              build: 'kkt build',\n              test: 'kkt test --env=jsdom',\n            },\n            browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],\n          },\n        },\n      },\n    };\n  }\n  return <CodePreview {...props} dependencies={dependencies} style={{ marginBottom: 0 }} />;\n}\n","import React, { Fragment } from 'react';\nimport { Divider } from 'uiw';\n\nexport type FooterProps = {\n  path?: string;\n};\n\nexport default function (props: FooterProps = {}) {\n  const { path } = props;\n  const url = /^http/.test(path || '') ? path : `https://github.com/uiwjs/uiw/blob/master/${path}`;\n  return (\n    <Fragment>\n      犯了错误还是想对文件做出贡献？\n      {url && (\n        <a href={url} target=\"_blank\" rel=\"noopener noreferrer\">\n          在Github上编辑本页！\n        </a>\n      )}\n      <br />\n      <a href=\"https://github.com/uiwjs/uiw/issues\" target=\"_blank\" rel=\"noopener noreferrer\">\n        反馈建议\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/uiwjs/uiw/issues/new\">\n        提交bug\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/uiwjs/uiw\">\n        Github\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/kktjs/kkt\">\n        kkt\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/kktjs/kkt-ssr\">\n        @kkt/ssr\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://uiw.gitee.io\">\n        国内镜像\n      </a>\n    </Fragment>\n  );\n}\n","// extracted by mini-css-extract-plugin\nexport default {\"docinfo\":\"index_docinfo__3Vx8S\",\"markdown\":\"index_markdown__hcQCp\"};","import { useEffect, useState } from 'react';\nimport MarkdownPreview from '@uiw/react-markdown-preview';\nimport pkg from 'uiw/package.json';\nimport Code from './Code';\nimport Footer from './Footer';\nimport styles from './index.module.less';\n\nexport type CreatePageProps<T> = {\n  dependencies?: T;\n  path: string;\n  renderPage?: () => Promise<string>;\n};\n\nconst getCodeStr = (data: any[] = [], code: string = '') => {\n  data.forEach((node) => {\n    if (node.type === 'text') {\n      code += node.value;\n    } else if (node.children && Array.isArray(node.children)) {\n      code += getCodeStr(node.children);\n    }\n  });\n  return code;\n};\n\nexport default function CreatePage<T>(props: CreatePageProps<T>) {\n  const { renderPage, dependencies, path } = props;\n  const [mdStr, setMdStr] = useState('');\n\n  const version = pkg.version || '2.0.0';\n  useEffect(() => {\n    if (renderPage) {\n      renderPage()\n        .then((str) => {\n          setMdStr(str);\n        })\n        .catch(() => {});\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (!mdStr) {\n    return null;\n  }\n\n  return (\n    <div>\n      <MarkdownPreview\n        source={mdStr}\n        className={styles.markdown}\n        components={{\n          /**\n           * bordered 边框\n           * bgWhite 设置代码预览背景白色，否则为格子背景。\n           * noCode 不显示代码编辑器。\n           * noPreview 不显示代码预览效果。\n           * noScroll 预览区域不显示滚动条。\n           * codePen 显示 Codepen 按钮，要特别注意 包导入的问题，实例中的 import 主要用于 Codepen 使用。\n           */\n          code: ({ inline, node, ...props }) => {\n            const { noPreview, bordered, noScroll, bgWhite, noCode, codePen } = props as any;\n            if (inline) {\n              return <code {...props} />;\n            }\n            const config = {\n              noPreview,\n              bordered,\n              noScroll,\n              bgWhite,\n              noCode,\n              codePen,\n            } as any;\n            if (Object.keys(config).filter((name) => config[name] !== undefined).length === 0) {\n              return <code {...props} />;\n            }\n            return (\n              <Code\n                version={version}\n                code={getCodeStr(node.children)}\n                dependencies={dependencies}\n                {...{ noPreview, bordered, noScroll, bgWhite, noCode, codePen }}\n              />\n            );\n          },\n        }}\n      />\n      <div className={styles.docinfo}>\n        <Footer path={path} />\n      </div>\n    </div>\n  );\n}\n","import React from 'react';\nimport { Menu, MenuItem, MenuDivider, SubMenu, Row, Col, Switch, Icon, Popover, Button } from 'uiw';\nimport Markdown from '../../../components/Markdown';\n\nexport default function Page() {\n  return (\n    <Markdown\n      path=\"https://github.com/uiwjs/uiw/tree/master/packages/react-menu/README.md\"\n      dependencies={{ Menu, MenuItem, MenuDivider, SubMenu, Row, Col, Switch, Icon, Popover, Button }}\n      renderPage={async () => {\n        const md = await import('uiw/node_modules/@uiw/react-menu/README.md');\n        return md.default || md;\n      }}\n    />\n  );\n}\n"],"names":["webpackEmptyContext","req","e","Error","code","keys","resolve","id","module","exports","Code","version","dependencies","codePen","codeSandbox","other","props","codePenOption","title","includeModule","js","replace","html","css_external","js_external","codeSandboxOption","files","content","name","description","react","uiw","devDependencies","kkt","typescript","license","scripts","start","build","test","browserslist","style","marginBottom","path","url","Fragment","href","target","rel","type","getCodeStr","data","forEach","node","value","children","Array","isArray","CreatePage","renderPage","useState","mdStr","setMdStr","pkg","useEffect","then","str","catch","source","className","styles","components","inline","noPreview","bordered","noScroll","bgWhite","noCode","config","Object","filter","undefined","length","Footer","Page","Menu","MenuItem","MenuDivider","SubMenu","Row","Col","Switch","Icon","Popover","Button","md","default"],"sourceRoot":""}

package/web/static/js/{6566.75acebe9.chunk.js → 6566.f7efbc17.chunk.js}

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6566],{36566:function(n,e,t){t.r(e),e.default="Form \u8868\u5355\n===\n\n\u7531\u8f93\u5165\u6846\u3001\u9009\u62e9\u5668\u3001\u5355\u9009\u6846\u3001\u591a\u9009\u6846\u7b49\u63a7\u4ef6\u7ec4\u6210\uff0c\u7528\u4ee5\u6536\u96c6\u3001\u6821\u9a8c\u3001\u63d0\u4ea4\u6570\u636e\u3002\n\n```jsx\nimport { Form, FormItem } from 'uiw';\n// or\nimport { Form, FormItem } from '@uiw/react-form';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Row, Col, Slider, Button, Notify } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onChange={({ initial, current }) => {\n        console.log('onChange', initial, current);\n      }}\n      onSubmit={({initial, current}) => {\n        if(current.name === initial.name) {\n          Notify.error({\n            title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n            description: `\u8868\u5355\u63d0\u4ea4\u5185\u5bb9\u4e3a\u7a7a\uff01`,\n          });\n        } else {\n          Notify.success({\n            title: '\u63d0\u4ea4\u6210\u529f\uff01',\n            description: `\u59d3\u540d\u4e3a\uff1a${current.name}\uff0c\u63d0\u4ea4\u5b8c\u6210\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n          });\n        }\n      }}\n      fields={{\n        name: {\n          label: '\u59d3\u540d',\n          children: <Input placeholder=\"\u8bf7\u8f93\u5165\u59d3\u540d\" />\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        return (\n          <div>\n            <Row>\n              <Col style={{ maxWidth: 300 }}>{fields.name}</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                {JSON.stringify(state.current)}\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u6821\u9a8c\n\n\u4e00\u822c\u6821\u9a8c\u53ef\u4e0d\u9700\u5f15\u5165\u5916\u90e8\u5305\u89e3\u51b3\uff0c\u5982\u679c\u9047\u5230\u5927\u578b\u5de5\u7a0b\u8868\u5355\u6bd4\u8f83\u591a\u7684\u5730\u65b9\u63a8\u8350\u4f7f\u7528 [jquense/yup](https://github.com/jquense/yup)\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Notify, Checkbox, Switch, RadioGroup, Radio, Textarea, Row, Col, Button } from 'uiw';\n\nconst Demo = () => (\n  <Form\n    onSubmit={({initial, current}) => {\n      const errorObj = {};\n      if (current.userName.startsWith('u')) {\n        errorObj.userName = `\u59d3\u540d ${current.userName} \u4e0d\u80fd\u4ee5 \u2018u\u2019 \u5f00\u5934`;\n      }\n      if (!current.checkboxOne) {\n        errorObj.checkboxOne = '\u4e00\u4e2a\u591a\u9009\u6761\u4ef6 \u4e3a\u5fc5\u586b';\n      }\n      if (!current.terms) {\n        errorObj.terms = '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e';\n      }\n      if(Object.keys(errorObj).length > 0) {\n        const err = new Error();\n        err.filed = errorObj;\n        throw err;\n      }\n      Notify.success({\n        title: '\u63d0\u4ea4\u6210\u529f\uff01',\n        description: `\u59d3\u540d\u4e3a\uff1a${current.userName}\uff0c\u63d0\u4ea4\u5b8c\u6210\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n      });\n    }}\n    onSubmitError={(error) => {\n      if (error.filed) {\n        return { ...error.filed };\n      }\n      return null;\n    }}\n    fields={{\n      userName: {\n        initialValue: 'uiw',\n        label: '\u59d3\u540d',\n        children: <Input type=\"text\" />,\n        help: '\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f'\n      },\n      age: {\n        initialValue: '9',\n        label: '\u5e74\u9f84',\n        children: <Input type=\"number\" />\n      },\n      checkbox: {\n        initialValue: ['\u56db\u5ddd\u83dc'],\n        label: '\u9009\u62e9\u4f60\u60f3\u5403\u7684\u83dc',\n        children: (\n          <Checkbox.Group>\n            <div>\u83dc\u7cfb</div>\n            <Checkbox value=\"\u56db\u5ddd\u83dc\">\u56db\u5ddd\u83dc</Checkbox>\n            <Checkbox value=\"\u6e56\u5317\u83dc\">\u6e56\u5317\u83dc</Checkbox>\n            <Checkbox value=\"\u897f\u5317\u83dc\">\u897f\u5317\u83dc</Checkbox>\n            <Checkbox value=\"\u65b0\u7586\u83dc\">\u65b0\u7586\u83dc</Checkbox>\n            <Checkbox value=\"\u4e1c\u5317\u83dc\">\u4e1c\u5317\u83dc</Checkbox>\n            <div style={{ marginTop: 10 }}>\u5bb6\u5e38\u83dc</div>\n            <Checkbox value=\"\u7ea2\u70e7\u6b66\u660c\u9c7c\">\u7ea2\u70e7\u6b66\u660c\u9c7c</Checkbox>\n            <Checkbox value=\"\u9ebb\u5a46\u8c46\u8150\">\u9ebb\u5a46\u8c46\u8150</Checkbox>\n            <Checkbox value=\"\u5317\u4eac\u70e4\u9e2d\">\u5317\u4eac\u70e4\u9e2d</Checkbox>\n          </Checkbox.Group>\n        )\n      },\n      checkboxOne: {\n        inline: true,\n        label: '\u4e00\u4e2a\u591a\u9009\u6761\u4ef6',\n        children: <Checkbox value=\"1\">\u56db\u5ddd\u83dc</Checkbox>\n      },\n      switch: {\n        inline: true,\n        initialValue: true,\n        label: '\u5f00\u542f',\n        children: <Switch size=\"small\" />\n      },\n      radioGroup: {\n        inline: true,\n        initialValue: '\u7537',\n        label: '\u5355\u9009',\n        children: (\n          <RadioGroup name=\"other\">\n            <Radio value=\"\u7537\">\u7537</Radio>\n            <Radio value=\"\u5973\">\u5973</Radio>\n            <Radio value=\"\u4eba\u5996\" disabled>\u4eba\u5996</Radio>\n            <Radio value=\"\u672a\u77e5\">\u672a\u77e5</Radio>\n          </RadioGroup>\n        )\n      },\n      textarea: {\n        initialValue: '',\n        label: '\u591a\u884c\u6587\u672c\u8f93\u5165\u6846',\n        children: <Textarea placeholder=\"\u8bf7\u8f93\u5165\u5185\u5bb9\" />\n      },\n      terms: {\n        validator: (currentValue) => {\n          return !currentValue ? '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e' : null;\n        },\n        style: { marginBottom: 0 },\n        children: <Checkbox value=\"1\">\u5df2\u9605\u8bfb\u5e76\u540c\u610f<a href=\"#\">\u670d\u52a1\u6761\u6b3e</a></Checkbox>\n      }\n    }}\n  >\n    {({ fields, state, canSubmit, resetForm }) => {\n      console.log('fields:--\x3e', state);\n      return (\n        <div style={{ maxWidth: 500 }}>\n          <Row gutter={10}>\n            <Col>{fields.userName}</Col>\n            <Col>{fields.age}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col>{fields.checkbox}</Col>\n            <Col>{fields.checkboxOne}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col>{fields.radioGroup}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col>{fields.switch}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col>{fields.textarea}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col style={{ padding: '5px 0 10px 0' }}>\n              {fields.terms}\n            </Col>\n          </Row>\n          <Row gutter={10}>\n            <Col fixed>\n              <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n              <Button type=\"light\" onClick={resetForm}>\u91cd\u7f6e\u8868\u5355</Button>\n            </Col>\n          </Row>\n          <Row>\n            <Col>\n              <pre style={{ padding: '10px 0 0 10px' }}>\n                {JSON.stringify(state.current, null, 2)}\n              </pre>\n            </Col>\n          </Row>\n        </div>\n      )\n    }}\n  </Form>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u6c34\u5e73\u767b\u5f55\u680f\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Row, Col, Notify, Button } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onSubmit={({initial, current}) => {\n        const errorObj = {};\n        if (!current.username) {\n          errorObj.username = '\u7528\u6237\u540d\u4e0d\u80fd\u4e3a\u7a7a\uff01';\n        }\n        if (!current.password) {\n          errorObj.password = '\u5bc6\u7801\u4e0d\u80fd\u4e3a\u7a7a\uff01';\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        console.log('--\x3e>', initial, current);\n        Notify.success({ title: '\u63d0\u4ea4\u6210\u529f\uff01', description: '\u606d\u559c\u4f60\u767b\u5f55\u6210\u529f\uff01' });\n      }}\n      onSubmitError={(error) => {\n        if (error.filed) {\n          return { ...error.filed };\n        }\n        return null;\n      }}\n      fields={{\n        username: {\n          labelClassName: 'fieldLabel',\n          labelFor: 'username-inline',\n          children: <Input preIcon=\"user\" id=\"username-inline\" />\n        },\n        password: {\n          labelClassName: 'fieldLabel',\n          labelFor: 'password-inline',\n          children: <Input preIcon=\"lock\" id=\"password-inline\" type=\"password\" />\n        },\n      }}\n    >\n      {({ fields, state, canSubmit, resetForm }) => {\n        console.log('fields:', state);\n        return (\n          <div>\n            <Row gutter={10}>\n              <Col fixed>{fields.username}</Col>\n              <Col fixed>{fields.password}</Col>\n            </Row>\n            <Row gutter={10}>\n              <Col>\n                <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                <Button type=\"danger\" onClick={resetForm}>\u91cd\u7f6e\u8868\u5355</Button>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u767b\u5f55\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Row, Col, Checkbox, Notify, Button } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onSubmit={({initial, current}) => {\n        console.log('--\x3e>', initial, current);\n      }}\n      fields={{\n        username: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          labelFor: 'username',\n          children: <Input preIcon=\"user\" id=\"username\" />\n        },\n        password: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          labelFor: 'password',\n          children: <Input preIcon=\"lock\" id=\"password\" type=\"password\" />\n        },\n        terms: {\n          validator: (currentValue) => !currentValue ? '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e' : null,\n          children: <Checkbox value=\"1\">\u5df2\u9605\u8bfb\u5e76\u540c\u610f</Checkbox>\n        }\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        console.log('fields:', state);\n        return (\n          <div>\n            <Row>\n              <Col fixed>{fields.username}</Col>\n            </Row>\n            <Row>\n              <Col fixed>{fields.password}</Col>\n            </Row>\n            <Row>\n              <Col fixed align=\"middle\">{fields.terms}</Col>\n              <Col fixed style={{ marginTop: -4 }}><a href=\"#\">\u670d\u52a1\u6761\u6b3e</a></Col>\n            </Row>\n            <Row>\n              <Col fixed>\n                <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u8868\u5355\u63d0\u4ea4\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Select, Row, Col, Button } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onSubmit={({initial, current}) => {\n        console.log('--\x3e>', initial, current);\n      }}\n      fields={{\n        firstName: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          inline: true,\n          label: '\u59d3\u6c0f',\n          children: <Input />\n        },\n        lastName: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          initialValue: '\u5148\u751f',\n          inline: true,\n          label: '\u540d\u5b57',\n          children: <Input />\n        },\n        email: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          validator: (currentValue) => {\n            return currentValue && currentValue.length < 2 ? 'Password must be 8+ characters' : null;\n          },\n          inline: true,\n          label: 'Email',\n          children: <Input />\n        },\n        select: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          inline: true,\n          label: '\u9009\u62e9\u5668',\n          children: (\n            <Select>\n              <Select.Option>Choose an item...</Select.Option>\n              <Select.Option value=\"1\">One</Select.Option>\n              <Select.Option value=\"2\">Two</Select.Option>\n              <Select.Option value=\"3\">Three</Select.Option>\n              <Select.Option value=\"4\">Four</Select.Option>\n            </Select>\n          ),\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        console.log('fields:', state);\n        return (\n          <div>\n            <Row gutter={10} style={{ marginBottom: 10 }}>\n              <Col>{fields.firstName}</Col>\n              <Col>{fields.lastName}</Col>\n            </Row>\n            <Row gutter={10}>\n              <Col>{fields.email}</Col>\n              <Col>{fields.select}</Col>\n            </Row>\n            <Row gutter={10}>\n              <Col />\n              <Col fixed align=\"bottom\"><Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button></Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u81ea\u5b9a\u4e49\u63a7\u4ef6\u5e94\u7528\n\n\u4e0b\u9762\u5b9e\u4f8b\u662f\u5728 [`<Form />`](#/components/form) \u8868\u5355\u7ec4\u4ef6\u4e2d\uff0c\u5e94\u7528\u81ea\u5b9a\u4e49 `<CustomSelect />` \u63a7\u4ef6\u7ec4\u4ef6\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff0c\u81ea\u5b9a\u4e49\u63a7\u4ef6\u9700\u8981\u4e24\u4e2a\u5fc5\u8981\u7684 `props` \u53c2\u6570\uff0c`value` \u548c `onChange`\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n- `value` \u7528\u4e8e\u503c\u4f20\u9012\uff0c\n- `onChange(value)` \u7528\u4e8e\u503c\u53d8\u66f4\u9700\u8981\u6267\u884c\u7684\u56de\u8c03\u51fd\u6570\uff0c\u56de\u8c03\u51fd\u6570\u7b2c\u4e00\u4e2a\u53c2\u6570\u5fc5\u987b\u662f `value`\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Form, Row, Col, Dropdown, Menu, Icon, Button, Notify } from 'uiw';\n\n// \u81ea\u5b9a\u4e49\u7ec4\u4ef6\nfunction CustomSelect(props) {\n  const { option = [], onChange } = props;\n  const [value, setValue] = React.useState(props.value);\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    if (value !== props.value) {\n      setValue(props.value);\n    }\n  }, [props.value]);\n  const label = option.find(item => value === item.value);\n  return (\n    <Dropdown\n      trigger=\"click\"\n      onVisibleChange={(open) => setIsOpen(open)}\n      isOpen={isOpen}\n      menu={\n        <Menu bordered style={{ minWidth: 120 }}>\n          {option.map((item, idx) => (\n            <Menu.Item active={value === item.value} key={idx} text={item.label}\n              onClick={() => {\n                setValue(item.value);\n                setIsOpen(false)\n                onChange && onChange(item.value);\n              }}\n            />\n          ))}\n        </Menu>\n      }\n    >\n      <Button\n        style={{\n          boxShadow: 'inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1)'\n        }}\n        type=\"link\"\n      >\n        {label.label}<Icon type={isOpen ? 'up' : 'down'} />\n      </Button>\n    </Dropdown>\n  );\n}\n\n// \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5e94\u7528\u5b9e\u4f8b\nconst Demo = () => (\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        console.log('~~~', current);\n        const errorObj = {};\n        if (!current.select) {\n          errorObj.select = '\u5185\u5bb9\u4e3a\u7a7a\uff0c\u8bf7\u8f93\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\u5185\u5bb9\u4e3a\uff1a${current.select}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n        });\n      }}\n      fields={{\n        select: {\n          initialValue: 0,\n          children: (\n            <CustomSelect option={[\n              { label: '\u8bf7\u9009\u62e9', value: 0 },\n              { label: '\u7ecf\u6d4e\u8231', value: 1 },\n              { label: '\u8c6a\u534e\u7ecf\u6d4e\u8231', value: 2 },\n              { label: '\u5546\u52a1\u8231', value: 3 },\n              { label: '\u5934\u7b49\u8231', value: 4 },\n            ]} />\n          )\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        return (\n          <div>\n            <Row>\n              <Col style={{ maxWidth: 300 }}>{fields.select}</Col>\n            </Row>\n            <Row>\n              <Col fixed>\n                <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### FormItem \u7ad6\u6392\n\n\u5bf9\u7ec4\u4ef6 `FormItem` \u7ad6\u6392\u5c55\u793a\u793a\u4f8b\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff1a\u5f53\u524d\u53ea\u5c55\u793a\u6548\u679c\uff0c`FormItem` \u7ec4\u4ef6\u53ea\u5728 `Form` \u7ec4\u4ef6\u4e2d\u4f7f\u7528\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, FormItem } from 'uiw';\n\nconst Demo = () => (\n  <Form>\n    <FormItem\n      label=\"\u53ef\u9009\u5b57\u6bb5\"\n      labelFor=\"basic-input\"\n      help={<span>\u5728\u4e0a\u9762\u7684\u5b57\u6bb5\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c</span>}\n    >\n      <Input id=\"basic-input\" type=\"text\"/>\n    </FormItem>\n    <FormItem\n      label=\"\u7528\u6237\u540d\"\n      labelFor=\"username-input\"\n      help=\"\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002\"\n      hasError={true}\n    >\n      <Input id=\"username-input\" type=\"text\"/>\n    </FormItem>\n  </Form>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### FormItem \u6a2a\u6392\n\n\u5bf9\u7ec4\u4ef6 `FormItem` \u6a2a\u6392\u5c55\u793a\u793a\u4f8b\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff1a\u5f53\u524d\u53ea\u5c55\u793a\u6548\u679c\uff0c`FormItem` \u7ec4\u4ef6\u53ea\u5728 `Form` \u7ec4\u4ef6\u4e2d\u4f7f\u7528\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, FormItem } from 'uiw';\n\nconst Demo = () => (\n  <Form>\n    <FormItem\n      inline={true}\n      label=\"\u53ef\u9009\u5b57\u6bb5\"\n      labelFor=\"basic-input-inline\"\n      help={<span>\u5728\u4e0a\u9762\u7684\u5b57\u6bb5\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c</span>}\n      onChange={() => {\n        console.log('TEST::');\n      }}\n    >\n      <Input id=\"basic-input-inline\" type=\"text\"/>\n    </FormItem>\n    <FormItem\n      inline={true}\n      label=\"\u7528\u6237\u540d\"\n      labelFor=\"username-input-inline\"\n      labelClassName=\"username\"\n      help=\"\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002\"\n      hasError={true}\n    >\n      <Input id=\"username-input-inline\" type=\"text\"/>\n    </FormItem>\n  </Form>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Form\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| fields | \u8bbe\u7f6e\u5b57\u6bb5 | object | - |\n| children | \u56de\u8c03 {`fields`, `state`, `canSubmit`, `resetForm`} | function | - |\n| onSubmit | \u5728 `onSubmit` \u4e4b\u540e\u6267\u884c  | function({ initial, current }) | - |\n| afterSubmit `@3.0.0+` | \u63d0\u4ea4\u56de\u8c03 {`initial`, `current`}  | function({ initial, current }) | - |\n| onChange | \u8868\u5355\u53d1\u751f\u6539\u53d8\u56de\u8c03\u51fd\u6570 {`initial`, `current`}  | function({ initial, current }) | - |\n| onSubmitError | \u8c03\u7528 `onSubmit` \u629b\u51fa\u7684\u4efb\u4f55\u9519\u8bef\u3002\u4ece\u5b57\u6bb5\u540d\u79f0\u8fd4\u56de\u5bf9\u8c61\u6620\u5c04\u3002  | function | - |\n| resetOnSubmit | \u5728 `onSubmit` \u6210\u529f\u540e\u5c06\u8868\u5355\u91cd\u7f6e\u4e3a\u5176\u521d\u59cb\u72b6\u6001\u3002| bool | `true` |\n\n```js\n// => fields props\n{\n  firstName: {\n    initialValue: '\u738b',\n    inline: true,\n    label: '\u59d3',\n    labelClassName: 'fieldLabel',\n    labelStyle: { width: 60 },\n    // \u9a8c\u8bc1\uff0c\u901a\u8fc7 `canSubmit()` \u65b9\u6cd5\u83b7\u5f97\uff0c\u63d0\u4ea4\u6309\u94ae\u662f\u5426\u88ab\u7981\u7528\n    validator: (currentValue) => {},\n    help: '\u5e2e\u52a9\u63d0\u793a\u4fe1\u606f\uff01',\n    children: <Input type=\"number\" />\n  },\n}\n```\n\n## FormItem\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| label | \u8868\u5355\u6807\u9898\u5c55\u793a | string | - |\n| labelClassName | \u8868\u5355\u6807\u9898\u6837\u5f0f\u540d\u79f0 | string | - |\n| labelStyle | \u8868\u5355\u6807\u9898\u6837\u5f0f | object | - |\n| labelFor | \u5217\u7684\u5bbd\u5ea6\u76f8\u5bf9\u4e8e\u540c\u4e00\u7f51\u683c\u4e2d\u5176\u4ed6\u5217\u7684\u6bd4\u7387 | number | - |\n| help | \u63d0\u793a\u4fe1\u606f | ReactNode | - |\n| hasError | \u5982\u679c\u4e3atrue\uff0c\u5219\u5e94\u7528\u9519\u8befCSS\u3002\u8f6c\u52a8\u8fb9\u6846\u5e76\u5e2e\u52a9\u6587\u5b57\u53d8\u7ea2\u3002 | number | - |"}}]);
-//# sourceMappingURL=6566.75acebe9.chunk.js.map
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6566],{36566:function(n,e,t){t.r(e),e.default="Form \u8868\u5355\n===\n\n\u7531\u8f93\u5165\u6846\u3001\u9009\u62e9\u5668\u3001\u5355\u9009\u6846\u3001\u591a\u9009\u6846\u7b49\u63a7\u4ef6\u7ec4\u6210\uff0c\u7528\u4ee5\u6536\u96c6\u3001\u6821\u9a8c\u3001\u63d0\u4ea4\u6570\u636e\u3002\n\n```jsx\nimport { Form, FormItem } from 'uiw';\n// or\nimport { Form, FormItem } from '@uiw/react-form';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Row, Col, Slider, Button, Notify } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onChange={({ initial, current }) => {\n        console.log('onChange', initial, current);\n      }}\n      onSubmit={({initial, current}) => {\n        if(current.name === initial.name) {\n          Notify.error({\n            title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n            description: `\u8868\u5355\u63d0\u4ea4\u5185\u5bb9\u4e3a\u7a7a\uff01`,\n          });\n        } else {\n          Notify.success({\n            title: '\u63d0\u4ea4\u6210\u529f\uff01',\n            description: `\u59d3\u540d\u4e3a\uff1a${current.name}\uff0c\u63d0\u4ea4\u5b8c\u6210\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n          });\n        }\n      }}\n      fields={{\n        name: {\n          label: '\u59d3\u540d',\n          children: <Input placeholder=\"\u8bf7\u8f93\u5165\u59d3\u540d\" />\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        return (\n          <div>\n            <Row>\n              <Col style={{ maxWidth: 300 }}>{fields.name}</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                {JSON.stringify(state.current)}\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u6821\u9a8c\n\n\u4e00\u822c\u6821\u9a8c\u53ef\u4e0d\u9700\u5f15\u5165\u5916\u90e8\u5305\u89e3\u51b3\uff0c\u5982\u679c\u9047\u5230\u5927\u578b\u5de5\u7a0b\u8868\u5355\u6bd4\u8f83\u591a\u7684\u5730\u65b9\u63a8\u8350\u4f7f\u7528 [jquense/yup](https://github.com/jquense/yup)\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Notify, Checkbox, Switch, RadioGroup, Radio, Textarea, Row, Col, Button } from 'uiw';\n\nconst Demo = () => (\n  <Form\n    onSubmit={({initial, current}) => {\n      const errorObj = {};\n      if (current.userName.startsWith('u')) {\n        errorObj.userName = `\u59d3\u540d ${current.userName} \u4e0d\u80fd\u4ee5 \u2018u\u2019 \u5f00\u5934`;\n      }\n      if (!current.checkboxOne) {\n        errorObj.checkboxOne = '\u4e00\u4e2a\u591a\u9009\u6761\u4ef6 \u4e3a\u5fc5\u586b';\n      }\n      if (!current.terms) {\n        errorObj.terms = '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e';\n      }\n      if(Object.keys(errorObj).length > 0) {\n        const err = new Error();\n        err.filed = errorObj;\n        throw err;\n      }\n      Notify.success({\n        title: '\u63d0\u4ea4\u6210\u529f\uff01',\n        description: `\u59d3\u540d\u4e3a\uff1a${current.userName}\uff0c\u63d0\u4ea4\u5b8c\u6210\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n      });\n    }}\n    onSubmitError={(error) => {\n      if (error.filed) {\n        return { ...error.filed };\n      }\n      return null;\n    }}\n    fields={{\n      userName: {\n        initialValue: 'uiw',\n        label: '\u59d3\u540d',\n        children: <Input type=\"text\" />,\n        help: '\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f'\n      },\n      age: {\n        initialValue: '9',\n        label: '\u5e74\u9f84',\n        children: <Input type=\"number\" />\n      },\n      checkbox: {\n        initialValue: ['\u56db\u5ddd\u83dc'],\n        label: '\u9009\u62e9\u4f60\u60f3\u5403\u7684\u83dc',\n        children: (\n          <Checkbox.Group>\n            <div>\u83dc\u7cfb</div>\n            <Checkbox value=\"\u56db\u5ddd\u83dc\">\u56db\u5ddd\u83dc</Checkbox>\n            <Checkbox value=\"\u6e56\u5317\u83dc\">\u6e56\u5317\u83dc</Checkbox>\n            <Checkbox value=\"\u897f\u5317\u83dc\">\u897f\u5317\u83dc</Checkbox>\n            <Checkbox value=\"\u65b0\u7586\u83dc\">\u65b0\u7586\u83dc</Checkbox>\n            <Checkbox value=\"\u4e1c\u5317\u83dc\">\u4e1c\u5317\u83dc</Checkbox>\n            <div style={{ marginTop: 10 }}>\u5bb6\u5e38\u83dc</div>\n            <Checkbox value=\"\u7ea2\u70e7\u6b66\u660c\u9c7c\">\u7ea2\u70e7\u6b66\u660c\u9c7c</Checkbox>\n            <Checkbox value=\"\u9ebb\u5a46\u8c46\u8150\">\u9ebb\u5a46\u8c46\u8150</Checkbox>\n            <Checkbox value=\"\u5317\u4eac\u70e4\u9e2d\">\u5317\u4eac\u70e4\u9e2d</Checkbox>\n          </Checkbox.Group>\n        )\n      },\n      checkboxOne: {\n        inline: true,\n        label: '\u4e00\u4e2a\u591a\u9009\u6761\u4ef6',\n        children: <Checkbox value=\"1\">\u56db\u5ddd\u83dc</Checkbox>\n      },\n      switch: {\n        inline: true,\n        initialValue: true,\n        label: '\u5f00\u542f',\n        children: <Switch size=\"small\" />\n      },\n      radioGroup: {\n        inline: true,\n        initialValue: '\u7537',\n        label: '\u5355\u9009',\n        children: (\n          <RadioGroup name=\"other\">\n            <Radio value=\"\u7537\">\u7537</Radio>\n            <Radio value=\"\u5973\">\u5973</Radio>\n            <Radio value=\"\u4eba\u5996\" disabled>\u4eba\u5996</Radio>\n            <Radio value=\"\u672a\u77e5\">\u672a\u77e5</Radio>\n          </RadioGroup>\n        )\n      },\n      textarea: {\n        initialValue: '',\n        label: '\u591a\u884c\u6587\u672c\u8f93\u5165\u6846',\n        children: <Textarea placeholder=\"\u8bf7\u8f93\u5165\u5185\u5bb9\" />\n      },\n      terms: {\n        validator: (currentValue) => {\n          return !currentValue ? '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e' : null;\n        },\n        style: { marginBottom: 0 },\n        children: <Checkbox value=\"1\">\u5df2\u9605\u8bfb\u5e76\u540c\u610f<a href=\"#\">\u670d\u52a1\u6761\u6b3e</a></Checkbox>\n      }\n    }}\n  >\n    {({ fields, state, canSubmit, resetForm }) => {\n      console.log('fields:--\x3e', state);\n      return (\n        <div style={{ maxWidth: 500 }}>\n          <Row gutter={10}>\n            <Col>{fields.userName}</Col>\n            <Col>{fields.age}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col>{fields.checkbox}</Col>\n            <Col>{fields.checkboxOne}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col>{fields.radioGroup}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col>{fields.switch}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col>{fields.textarea}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col style={{ padding: '5px 0 10px 0' }}>\n              {fields.terms}\n            </Col>\n          </Row>\n          <Row gutter={10}>\n            <Col fixed>\n              <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n              <Button type=\"light\" onClick={resetForm}>\u91cd\u7f6e\u8868\u5355</Button>\n            </Col>\n          </Row>\n          <Row>\n            <Col>\n              <pre style={{ padding: '10px 0 0 10px' }}>\n                {JSON.stringify(state.current, null, 2)}\n              </pre>\n            </Col>\n          </Row>\n        </div>\n      )\n    }}\n  </Form>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u6c34\u5e73\u767b\u5f55\u680f\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Row, Col, Notify, Button } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onSubmit={({initial, current}) => {\n        const errorObj = {};\n        if (!current.username) {\n          errorObj.username = '\u7528\u6237\u540d\u4e0d\u80fd\u4e3a\u7a7a\uff01';\n        }\n        if (!current.password) {\n          errorObj.password = '\u5bc6\u7801\u4e0d\u80fd\u4e3a\u7a7a\uff01';\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        console.log('--\x3e>', initial, current);\n        Notify.success({ title: '\u63d0\u4ea4\u6210\u529f\uff01', description: '\u606d\u559c\u4f60\u767b\u5f55\u6210\u529f\uff01' });\n      }}\n      onSubmitError={(error) => {\n        if (error.filed) {\n          return { ...error.filed };\n        }\n        return null;\n      }}\n      fields={{\n        username: {\n          labelClassName: 'fieldLabel',\n          labelFor: 'username-inline',\n          children: <Input preIcon=\"user\" id=\"username-inline\" />\n        },\n        password: {\n          labelClassName: 'fieldLabel',\n          labelFor: 'password-inline',\n          children: <Input preIcon=\"lock\" id=\"password-inline\" type=\"password\" />\n        },\n      }}\n    >\n      {({ fields, state, canSubmit, resetForm }) => {\n        console.log('fields:', state);\n        return (\n          <div>\n            <Row gutter={10}>\n              <Col fixed>{fields.username}</Col>\n              <Col fixed>{fields.password}</Col>\n            </Row>\n            <Row gutter={10}>\n              <Col>\n                <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                <Button type=\"danger\" onClick={resetForm}>\u91cd\u7f6e\u8868\u5355</Button>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u767b\u5f55\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Row, Col, Checkbox, Notify, Button } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onSubmit={({initial, current}) => {\n        console.log('--\x3e>', initial, current);\n      }}\n      fields={{\n        username: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          labelFor: 'username',\n          children: <Input preIcon=\"user\" id=\"username\" />\n        },\n        password: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          labelFor: 'password',\n          children: <Input preIcon=\"lock\" id=\"password\" type=\"password\" />\n        },\n        terms: {\n          validator: (currentValue) => !currentValue ? '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e' : null,\n          children: <Checkbox value=\"1\">\u5df2\u9605\u8bfb\u5e76\u540c\u610f</Checkbox>\n        }\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        console.log('fields:', state);\n        return (\n          <div>\n            <Row>\n              <Col fixed>{fields.username}</Col>\n            </Row>\n            <Row>\n              <Col fixed>{fields.password}</Col>\n            </Row>\n            <Row>\n              <Col fixed align=\"middle\">{fields.terms}</Col>\n              <Col fixed style={{ marginTop: -4 }}><a href=\"#\">\u670d\u52a1\u6761\u6b3e</a></Col>\n            </Row>\n            <Row>\n              <Col fixed>\n                <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u8868\u5355\u63d0\u4ea4\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Select, Row, Col, Button } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onSubmit={({initial, current}) => {\n        console.log('--\x3e>', initial, current);\n      }}\n      fields={{\n        firstName: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          inline: true,\n          label: '\u59d3\u6c0f',\n          children: <Input />\n        },\n        lastName: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          initialValue: '\u5148\u751f',\n          inline: true,\n          label: '\u540d\u5b57',\n          children: <Input />\n        },\n        email: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          validator: (currentValue) => {\n            return currentValue && currentValue.length < 2 ? 'Password must be 8+ characters' : null;\n          },\n          inline: true,\n          label: 'Email',\n          children: <Input />\n        },\n        select: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          inline: true,\n          label: '\u9009\u62e9\u5668',\n          children: (\n            <Select>\n              <Select.Option>Choose an item...</Select.Option>\n              <Select.Option value=\"1\">One</Select.Option>\n              <Select.Option value=\"2\">Two</Select.Option>\n              <Select.Option value=\"3\">Three</Select.Option>\n              <Select.Option value=\"4\">Four</Select.Option>\n            </Select>\n          ),\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        console.log('fields:', state);\n        return (\n          <div>\n            <Row gutter={10} style={{ marginBottom: 10 }}>\n              <Col>{fields.firstName}</Col>\n              <Col>{fields.lastName}</Col>\n            </Row>\n            <Row gutter={10}>\n              <Col>{fields.email}</Col>\n              <Col>{fields.select}</Col>\n            </Row>\n            <Row gutter={10}>\n              <Col />\n              <Col fixed align=\"bottom\"><Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button></Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u81ea\u5b9a\u4e49\u63a7\u4ef6\u5e94\u7528\n\n\u4e0b\u9762\u5b9e\u4f8b\u662f\u5728 [`<Form />`](#/components/form) \u8868\u5355\u7ec4\u4ef6\u4e2d\uff0c\u5e94\u7528\u81ea\u5b9a\u4e49 `<CustomSelect />` \u63a7\u4ef6\u7ec4\u4ef6\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff0c\u81ea\u5b9a\u4e49\u63a7\u4ef6\u9700\u8981\u4e24\u4e2a\u5fc5\u8981\u7684 `props` \u53c2\u6570\uff0c`value` \u548c `onChange`\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n- `value` \u7528\u4e8e\u503c\u4f20\u9012\uff0c\n- `onChange(value)` \u7528\u4e8e\u503c\u53d8\u66f4\u9700\u8981\u6267\u884c\u7684\u56de\u8c03\u51fd\u6570\uff0c\u56de\u8c03\u51fd\u6570\u7b2c\u4e00\u4e2a\u53c2\u6570\u5fc5\u987b\u662f `value`\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Form, Row, Col, Dropdown, Menu, Icon, Button, Notify } from 'uiw';\n\n// \u81ea\u5b9a\u4e49\u7ec4\u4ef6\nfunction CustomSelect(props) {\n  const { option = [], onChange } = props;\n  const [value, setValue] = React.useState(props.value);\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    if (value !== props.value) {\n      setValue(props.value);\n    }\n  }, [props.value]);\n  const label = option.find(item => value === item.value);\n  return (\n    <Dropdown\n      trigger=\"click\"\n      onVisibleChange={(open) => setIsOpen(open)}\n      isOpen={isOpen}\n      menu={\n        <Menu bordered style={{ minWidth: 120 }}>\n          {option.map((item, idx) => (\n            <Menu.Item active={value === item.value} key={idx} text={item.label}\n              onClick={() => {\n                setValue(item.value);\n                setIsOpen(false)\n                onChange && onChange(item.value);\n              }}\n            />\n          ))}\n        </Menu>\n      }\n    >\n      <Button\n        style={{\n          boxShadow: 'inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1)'\n        }}\n        type=\"link\"\n      >\n        {label.label}<Icon type={isOpen ? 'up' : 'down'} />\n      </Button>\n    </Dropdown>\n  );\n}\n\n// \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5e94\u7528\u5b9e\u4f8b\nconst Demo = () => (\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        console.log('~~~', current);\n        const errorObj = {};\n        if (!current.select) {\n          errorObj.select = '\u5185\u5bb9\u4e3a\u7a7a\uff0c\u8bf7\u8f93\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\u5185\u5bb9\u4e3a\uff1a${current.select}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n        });\n      }}\n      fields={{\n        select: {\n          initialValue: 0,\n          children: (\n            <CustomSelect option={[\n              { label: '\u8bf7\u9009\u62e9', value: 0 },\n              { label: '\u7ecf\u6d4e\u8231', value: 1 },\n              { label: '\u8c6a\u534e\u7ecf\u6d4e\u8231', value: 2 },\n              { label: '\u5546\u52a1\u8231', value: 3 },\n              { label: '\u5934\u7b49\u8231', value: 4 },\n            ]} />\n          )\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        return (\n          <div>\n            <Row>\n              <Col style={{ maxWidth: 300 }}>{fields.select}</Col>\n            </Row>\n            <Row>\n              <Col fixed>\n                <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### FormItem \u7ad6\u6392\n\n\u5bf9\u7ec4\u4ef6 `FormItem` \u7ad6\u6392\u5c55\u793a\u793a\u4f8b\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff1a\u5f53\u524d\u53ea\u5c55\u793a\u6548\u679c\uff0c`FormItem` \u7ec4\u4ef6\u53ea\u5728 `Form` \u7ec4\u4ef6\u4e2d\u4f7f\u7528\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, FormItem } from 'uiw';\n\nconst Demo = () => (\n  <Form>\n    <FormItem\n      label=\"\u53ef\u9009\u5b57\u6bb5\"\n      labelFor=\"basic-input\"\n      help={<span>\u5728\u4e0a\u9762\u7684\u5b57\u6bb5\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c</span>}\n    >\n      <Input id=\"basic-input\" type=\"text\"/>\n    </FormItem>\n    <FormItem\n      label=\"\u7528\u6237\u540d\"\n      labelFor=\"username-input\"\n      help=\"\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002\"\n      hasError={true}\n    >\n      <Input id=\"username-input\" type=\"text\"/>\n    </FormItem>\n  </Form>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### FormItem \u6a2a\u6392\n\n\u5bf9\u7ec4\u4ef6 `FormItem` \u6a2a\u6392\u5c55\u793a\u793a\u4f8b\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff1a\u5f53\u524d\u53ea\u5c55\u793a\u6548\u679c\uff0c`FormItem` \u7ec4\u4ef6\u53ea\u5728 `Form` \u7ec4\u4ef6\u4e2d\u4f7f\u7528\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, FormItem } from 'uiw';\n\nconst Demo = () => (\n  <Form>\n    <FormItem\n      inline={true}\n      label=\"\u53ef\u9009\u5b57\u6bb5\"\n      labelFor=\"basic-input-inline\"\n      help={<span>\u5728\u4e0a\u9762\u7684\u5b57\u6bb5\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c</span>}\n      onChange={() => {\n        console.log('TEST::');\n      }}\n    >\n      <Input id=\"basic-input-inline\" type=\"text\"/>\n    </FormItem>\n    <FormItem\n      inline={true}\n      label=\"\u7528\u6237\u540d\"\n      labelFor=\"username-input-inline\"\n      labelClassName=\"username\"\n      help=\"\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002\"\n      hasError={true}\n    >\n      <Input id=\"username-input-inline\" type=\"text\"/>\n    </FormItem>\n  </Form>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Form\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| fields | \u8bbe\u7f6e\u5b57\u6bb5 | object | - |\n| children | \u56de\u8c03 {`fields`, `state`, `canSubmit`, `resetForm`} | function | - |\n| onSubmit | \u63d0\u4ea4\u8868\u5355\u65f6\u8c03\u7528  | function({ initial, current }) | - |\n| afterSubmit `@3.0.0+` | \u63d0\u4ea4\u56de\u8c03 {`initial`, `current`}  | function({ initial, current }) | - |\n| onChange | \u8868\u5355\u53d1\u751f\u6539\u53d8\u56de\u8c03\u51fd\u6570 {`initial`, `current`}  | function({ initial, current }) | - |\n| onSubmitError | \u8c03\u7528 `onSubmit` \u629b\u51fa\u7684\u4efb\u4f55\u9519\u8bef\u3002\u4ece\u5b57\u6bb5\u540d\u79f0\u8fd4\u56de\u5bf9\u8c61\u6620\u5c04\u3002  | function | - |\n| resetOnSubmit | \u5728 `onSubmit` \u6210\u529f\u540e\u5c06\u8868\u5355\u91cd\u7f6e\u4e3a\u5176\u521d\u59cb\u72b6\u6001\u3002| bool | `true` |\n\n```js\n// => fields props\n{\n  firstName: {\n    initialValue: '\u738b',\n    inline: true,\n    label: '\u59d3',\n    labelClassName: 'fieldLabel',\n    labelStyle: { width: 60 },\n    // \u9a8c\u8bc1\uff0c\u901a\u8fc7 `canSubmit()` \u65b9\u6cd5\u83b7\u5f97\uff0c\u63d0\u4ea4\u6309\u94ae\u662f\u5426\u88ab\u7981\u7528\n    validator: (currentValue) => {},\n    help: '\u5e2e\u52a9\u63d0\u793a\u4fe1\u606f\uff01',\n    children: <Input type=\"number\" />\n  },\n}\n```\n\n## FormItem\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| label | \u8868\u5355\u6807\u9898\u5c55\u793a | string | - |\n| labelClassName | \u8868\u5355\u6807\u9898\u6837\u5f0f\u540d\u79f0 | string | - |\n| labelStyle | \u8868\u5355\u6807\u9898\u6837\u5f0f | object | - |\n| labelFor | \u5217\u7684\u5bbd\u5ea6\u76f8\u5bf9\u4e8e\u540c\u4e00\u7f51\u683c\u4e2d\u5176\u4ed6\u5217\u7684\u6bd4\u7387 | number | - |\n| help | \u63d0\u793a\u4fe1\u606f | ReactNode | - |\n| hasError | \u5982\u679c\u4e3atrue\uff0c\u5219\u5e94\u7528\u9519\u8befCSS\u3002\u8f6c\u52a8\u8fb9\u6846\u5e76\u5e2e\u52a9\u6587\u5b57\u53d8\u7ea2\u3002 | number | - |"}}]);
+//# sourceMappingURL=6566.f7efbc17.chunk.js.map

package/web/static/js/{6566.75acebe9.chunk.js.map → 6566.f7efbc17.chunk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"static/js/6566.75acebe9.chunk.js","mappings":"gHAAA","sources":["../../packages/react-form/README.md"],"sourcesContent":["export default \"Form 表单\\n===\\n\\n由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。\\n\\n```jsx\\nimport { Form, FormItem } from 'uiw';\\n// or\\nimport { Form, FormItem } from '@uiw/react-form';\\n```\\n\\n### 基本用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Input, Row, Col, Slider, Button, Notify } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Form\\n      onChange={({ initial, current }) => {\\n        console.log('onChange', initial, current);\\n      }}\\n      onSubmit={({initial, current}) => {\\n        if(current.name === initial.name) {\\n          Notify.error({\\n            title: '提交失败！',\\n            description: `表单提交内容为空！`,\\n          });\\n        } else {\\n          Notify.success({\\n            title: '提交成功！',\\n            description: `姓名为：${current.name}，提交完成，将自动填充初始化值！`,\\n          });\\n        }\\n      }}\\n      fields={{\\n        name: {\\n          label: '姓名',\\n          children: <Input placeholder=\\\"请输入姓名\\\" />\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        return (\\n          <div>\\n            <Row>\\n              <Col style={{ maxWidth: 300 }}>{fields.name}</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                {JSON.stringify(state.current)}\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 自定义校验\\n\\n一般校验可不需引入外部包解决，如果遇到大型工程表单比较多的地方推荐使用 [jquense/yup](https://github.com/jquense/yup)\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Input, Notify, Checkbox, Switch, RadioGroup, Radio, Textarea, Row, Col, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <Form\\n    onSubmit={({initial, current}) => {\\n      const errorObj = {};\\n      if (current.userName.startsWith('u')) {\\n        errorObj.userName = `姓名 ${current.userName} 不能以 ‘u’ 开头`;\\n      }\\n      if (!current.checkboxOne) {\\n        errorObj.checkboxOne = '一个多选条件 为必填';\\n      }\\n      if (!current.terms) {\\n        errorObj.terms = '必须统一服务条款';\\n      }\\n      if(Object.keys(errorObj).length > 0) {\\n        const err = new Error();\\n        err.filed = errorObj;\\n        throw err;\\n      }\\n      Notify.success({\\n        title: '提交成功！',\\n        description: `姓名为：${current.userName}，提交完成，将自动填充初始化值！`,\\n      });\\n    }}\\n    onSubmitError={(error) => {\\n      if (error.filed) {\\n        return { ...error.filed };\\n      }\\n      return null;\\n    }}\\n    fields={{\\n      userName: {\\n        initialValue: 'uiw',\\n        label: '姓名',\\n        children: <Input type=\\\"text\\\" />,\\n        help: '以“u”开头的名字将在此处显示错误信息'\\n      },\\n      age: {\\n        initialValue: '9',\\n        label: '年龄',\\n        children: <Input type=\\\"number\\\" />\\n      },\\n      checkbox: {\\n        initialValue: ['四川菜'],\\n        label: '选择你想吃的菜',\\n        children: (\\n          <Checkbox.Group>\\n            <div>菜系</div>\\n            <Checkbox value=\\\"四川菜\\\">四川菜</Checkbox>\\n            <Checkbox value=\\\"湖北菜\\\">湖北菜</Checkbox>\\n            <Checkbox value=\\\"西北菜\\\">西北菜</Checkbox>\\n            <Checkbox value=\\\"新疆菜\\\">新疆菜</Checkbox>\\n            <Checkbox value=\\\"东北菜\\\">东北菜</Checkbox>\\n            <div style={{ marginTop: 10 }}>家常菜</div>\\n            <Checkbox value=\\\"红烧武昌鱼\\\">红烧武昌鱼</Checkbox>\\n            <Checkbox value=\\\"麻婆豆腐\\\">麻婆豆腐</Checkbox>\\n            <Checkbox value=\\\"北京烤鸭\\\">北京烤鸭</Checkbox>\\n          </Checkbox.Group>\\n        )\\n      },\\n      checkboxOne: {\\n        inline: true,\\n        label: '一个多选条件',\\n        children: <Checkbox value=\\\"1\\\">四川菜</Checkbox>\\n      },\\n      switch: {\\n        inline: true,\\n        initialValue: true,\\n        label: '开启',\\n        children: <Switch size=\\\"small\\\" />\\n      },\\n      radioGroup: {\\n        inline: true,\\n        initialValue: '男',\\n        label: '单选',\\n        children: (\\n          <RadioGroup name=\\\"other\\\">\\n            <Radio value=\\\"男\\\">男</Radio>\\n            <Radio value=\\\"女\\\">女</Radio>\\n            <Radio value=\\\"人妖\\\" disabled>人妖</Radio>\\n            <Radio value=\\\"未知\\\">未知</Radio>\\n          </RadioGroup>\\n        )\\n      },\\n      textarea: {\\n        initialValue: '',\\n        label: '多行文本输入框',\\n        children: <Textarea placeholder=\\\"请输入内容\\\" />\\n      },\\n      terms: {\\n        validator: (currentValue) => {\\n          return !currentValue ? '必须统一服务条款' : null;\\n        },\\n        style: { marginBottom: 0 },\\n        children: <Checkbox value=\\\"1\\\">已阅读并同意<a href=\\\"#\\\">服务条款</a></Checkbox>\\n      }\\n    }}\\n  >\\n    {({ fields, state, canSubmit, resetForm }) => {\\n      console.log('fields:-->', state);\\n      return (\\n        <div style={{ maxWidth: 500 }}>\\n          <Row gutter={10}>\\n            <Col>{fields.userName}</Col>\\n            <Col>{fields.age}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col>{fields.checkbox}</Col>\\n            <Col>{fields.checkboxOne}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col>{fields.radioGroup}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col>{fields.switch}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col>{fields.textarea}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col style={{ padding: '5px 0 10px 0' }}>\\n              {fields.terms}\\n            </Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col fixed>\\n              <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n              <Button type=\\\"light\\\" onClick={resetForm}>重置表单</Button>\\n            </Col>\\n          </Row>\\n          <Row>\\n            <Col>\\n              <pre style={{ padding: '10px 0 0 10px' }}>\\n                {JSON.stringify(state.current, null, 2)}\\n              </pre>\\n            </Col>\\n          </Row>\\n        </div>\\n      )\\n    }}\\n  </Form>\\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 { Form, Input, Row, Col, Notify, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Form\\n      onSubmit={({initial, current}) => {\\n        const errorObj = {};\\n        if (!current.username) {\\n          errorObj.username = '用户名不能为空！';\\n        }\\n        if (!current.password) {\\n          errorObj.password = '密码不能为空！';\\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        console.log('-->>', initial, current);\\n        Notify.success({ title: '提交成功！', description: '恭喜你登录成功！' });\\n      }}\\n      onSubmitError={(error) => {\\n        if (error.filed) {\\n          return { ...error.filed };\\n        }\\n        return null;\\n      }}\\n      fields={{\\n        username: {\\n          labelClassName: 'fieldLabel',\\n          labelFor: 'username-inline',\\n          children: <Input preIcon=\\\"user\\\" id=\\\"username-inline\\\" />\\n        },\\n        password: {\\n          labelClassName: 'fieldLabel',\\n          labelFor: 'password-inline',\\n          children: <Input preIcon=\\\"lock\\\" id=\\\"password-inline\\\" type=\\\"password\\\" />\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit, resetForm }) => {\\n        console.log('fields:', state);\\n        return (\\n          <div>\\n            <Row gutter={10}>\\n              <Col fixed>{fields.username}</Col>\\n              <Col fixed>{fields.password}</Col>\\n            </Row>\\n            <Row gutter={10}>\\n              <Col>\\n                <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n                <Button type=\\\"danger\\\" onClick={resetForm}>重置表单</Button>\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\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 { Form, Input, Row, Col, Checkbox, Notify, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Form\\n      onSubmit={({initial, current}) => {\\n        console.log('-->>', initial, current);\\n      }}\\n      fields={{\\n        username: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          labelFor: 'username',\\n          children: <Input preIcon=\\\"user\\\" id=\\\"username\\\" />\\n        },\\n        password: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          labelFor: 'password',\\n          children: <Input preIcon=\\\"lock\\\" id=\\\"password\\\" type=\\\"password\\\" />\\n        },\\n        terms: {\\n          validator: (currentValue) => !currentValue ? '必须统一服务条款' : null,\\n          children: <Checkbox value=\\\"1\\\">已阅读并同意</Checkbox>\\n        }\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        console.log('fields:', state);\\n        return (\\n          <div>\\n            <Row>\\n              <Col fixed>{fields.username}</Col>\\n            </Row>\\n            <Row>\\n              <Col fixed>{fields.password}</Col>\\n            </Row>\\n            <Row>\\n              <Col fixed align=\\\"middle\\\">{fields.terms}</Col>\\n              <Col fixed style={{ marginTop: -4 }}><a href=\\\"#\\\">服务条款</a></Col>\\n            </Row>\\n            <Row>\\n              <Col fixed>\\n                <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\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 { Form, Input, Select, Row, Col, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Form\\n      onSubmit={({initial, current}) => {\\n        console.log('-->>', initial, current);\\n      }}\\n      fields={{\\n        firstName: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          inline: true,\\n          label: '姓氏',\\n          children: <Input />\\n        },\\n        lastName: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          initialValue: '先生',\\n          inline: true,\\n          label: '名字',\\n          children: <Input />\\n        },\\n        email: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          validator: (currentValue) => {\\n            return currentValue && currentValue.length < 2 ? 'Password must be 8+ characters' : null;\\n          },\\n          inline: true,\\n          label: 'Email',\\n          children: <Input />\\n        },\\n        select: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          inline: true,\\n          label: '选择器',\\n          children: (\\n            <Select>\\n              <Select.Option>Choose an item...</Select.Option>\\n              <Select.Option value=\\\"1\\\">One</Select.Option>\\n              <Select.Option value=\\\"2\\\">Two</Select.Option>\\n              <Select.Option value=\\\"3\\\">Three</Select.Option>\\n              <Select.Option value=\\\"4\\\">Four</Select.Option>\\n            </Select>\\n          ),\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        console.log('fields:', state);\\n        return (\\n          <div>\\n            <Row gutter={10} style={{ marginBottom: 10 }}>\\n              <Col>{fields.firstName}</Col>\\n              <Col>{fields.lastName}</Col>\\n            </Row>\\n            <Row gutter={10}>\\n              <Col>{fields.email}</Col>\\n              <Col>{fields.select}</Col>\\n            </Row>\\n            <Row gutter={10}>\\n              <Col />\\n              <Col fixed align=\\\"bottom\\\"><Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button></Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 自定义控件应用\\n\\n下面实例是在 [`<Form />`](#/components/form) 表单组件中，应用自定义 `<CustomSelect />` 控件组件。\\n\\n> ⚠️ 注意，自定义控件需要两个必要的 `props` 参数，`value` 和 `onChange`\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n- `value` 用于值传递，\\n- `onChange(value)` 用于值变更需要执行的回调函数，回调函数第一个参数必须是 `value`。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Form, Row, Col, Dropdown, Menu, Icon, Button, Notify } from 'uiw';\\n\\n// 自定义组件\\nfunction CustomSelect(props) {\\n  const { option = [], onChange } = props;\\n  const [value, setValue] = React.useState(props.value);\\n  const [isOpen, setIsOpen] = React.useState(false);\\n\\n  React.useEffect(() => {\\n    if (value !== props.value) {\\n      setValue(props.value);\\n    }\\n  }, [props.value]);\\n  const label = option.find(item => value === item.value);\\n  return (\\n    <Dropdown\\n      trigger=\\\"click\\\"\\n      onVisibleChange={(open) => setIsOpen(open)}\\n      isOpen={isOpen}\\n      menu={\\n        <Menu bordered style={{ minWidth: 120 }}>\\n          {option.map((item, idx) => (\\n            <Menu.Item active={value === item.value} key={idx} text={item.label}\\n              onClick={() => {\\n                setValue(item.value);\\n                setIsOpen(false)\\n                onChange && onChange(item.value);\\n              }}\\n            />\\n          ))}\\n        </Menu>\\n      }\\n    >\\n      <Button\\n        style={{\\n          boxShadow: 'inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1)'\\n        }}\\n        type=\\\"link\\\"\\n      >\\n        {label.label}<Icon type={isOpen ? 'up' : 'down'} />\\n      </Button>\\n    </Dropdown>\\n  );\\n}\\n\\n// 自定义组件应用实例\\nconst Demo = () => (\\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        console.log('~~~', current);\\n        const errorObj = {};\\n        if (!current.select) {\\n          errorObj.select = '内容为空，请输入内容';\\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.select}，将自动填充初始化值！`,\\n        });\\n      }}\\n      fields={{\\n        select: {\\n          initialValue: 0,\\n          children: (\\n            <CustomSelect option={[\\n              { label: '请选择', value: 0 },\\n              { label: '经济舱', value: 1 },\\n              { label: '豪华经济舱', value: 2 },\\n              { label: '商务舱', value: 3 },\\n              { label: '头等舱', value: 4 },\\n            ]} />\\n          )\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        return (\\n          <div>\\n            <Row>\\n              <Col style={{ maxWidth: 300 }}>{fields.select}</Col>\\n            </Row>\\n            <Row>\\n              <Col fixed>\\n                <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### FormItem 竖排\\n\\n对组件 `FormItem` 竖排展示示例。\\n\\n> ⚠️ 注意：当前只展示效果，`FormItem` 组件只在 `Form` 组件中使用。\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, FormItem } from 'uiw';\\n\\nconst Demo = () => (\\n  <Form>\\n    <FormItem\\n      label=\\\"可选字段\\\"\\n      labelFor=\\\"basic-input\\\"\\n      help={<span>在上面的字段中输入一个值</span>}\\n    >\\n      <Input id=\\\"basic-input\\\" type=\\\"text\\\"/>\\n    </FormItem>\\n    <FormItem\\n      label=\\\"用户名\\\"\\n      labelFor=\\\"username-input\\\"\\n      help=\\\"用户名长度至少为8个字符串。\\\"\\n      hasError={true}\\n    >\\n      <Input id=\\\"username-input\\\" type=\\\"text\\\"/>\\n    </FormItem>\\n  </Form>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### FormItem 横排\\n\\n对组件 `FormItem` 横排展示示例。\\n\\n> ⚠️ 注意：当前只展示效果，`FormItem` 组件只在 `Form` 组件中使用。\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, FormItem } from 'uiw';\\n\\nconst Demo = () => (\\n  <Form>\\n    <FormItem\\n      inline={true}\\n      label=\\\"可选字段\\\"\\n      labelFor=\\\"basic-input-inline\\\"\\n      help={<span>在上面的字段中输入一个值</span>}\\n      onChange={() => {\\n        console.log('TEST::');\\n      }}\\n    >\\n      <Input id=\\\"basic-input-inline\\\" type=\\\"text\\\"/>\\n    </FormItem>\\n    <FormItem\\n      inline={true}\\n      label=\\\"用户名\\\"\\n      labelFor=\\\"username-input-inline\\\"\\n      labelClassName=\\\"username\\\"\\n      help=\\\"用户名长度至少为8个字符串。\\\"\\n      hasError={true}\\n    >\\n      <Input id=\\\"username-input-inline\\\" type=\\\"text\\\"/>\\n    </FormItem>\\n  </Form>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Form\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| fields | 设置字段 | object | - |\\n| children | 回调 {`fields`, `state`, `canSubmit`, `resetForm`} | function | - |\\n| onSubmit | 在 `onSubmit` 之后执行  | function({ initial, current }) | - |\\n| afterSubmit `@3.0.0+` | 提交回调 {`initial`, `current`}  | function({ initial, current }) | - |\\n| onChange | 表单发生改变回调函数 {`initial`, `current`}  | function({ initial, current }) | - |\\n| onSubmitError | 调用 `onSubmit` 抛出的任何错误。从字段名称返回对象映射。  | function | - |\\n| resetOnSubmit | 在 `onSubmit` 成功后将表单重置为其初始状态。| bool | `true` |\\n\\n```js\\n// => fields props\\n{\\n  firstName: {\\n    initialValue: '王',\\n    inline: true,\\n    label: '姓',\\n    labelClassName: 'fieldLabel',\\n    labelStyle: { width: 60 },\\n    // 验证，通过 `canSubmit()` 方法获得，提交按钮是否被禁用\\n    validator: (currentValue) => {},\\n    help: '帮助提示信息！',\\n    children: <Input type=\\\"number\\\" />\\n  },\\n}\\n```\\n\\n## FormItem\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| label | 表单标题展示 | string | - |\\n| labelClassName | 表单标题样式名称 | string | - |\\n| labelStyle | 表单标题样式 | object | - |\\n| labelFor | 列的宽度相对于同一网格中其他列的比率 | number | - |\\n| help | 提示信息 | ReactNode | - |\\n| hasError | 如果为true，则应用错误CSS。转动边框并帮助文字变红。 | number | - |\";"],"names":[],"sourceRoot":""}
+{"version":3,"file":"static/js/6566.f7efbc17.chunk.js","mappings":"gHAAA","sources":["../../packages/react-form/README.md"],"sourcesContent":["export default \"Form 表单\\n===\\n\\n由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。\\n\\n```jsx\\nimport { Form, FormItem } from 'uiw';\\n// or\\nimport { Form, FormItem } from '@uiw/react-form';\\n```\\n\\n### 基本用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Input, Row, Col, Slider, Button, Notify } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Form\\n      onChange={({ initial, current }) => {\\n        console.log('onChange', initial, current);\\n      }}\\n      onSubmit={({initial, current}) => {\\n        if(current.name === initial.name) {\\n          Notify.error({\\n            title: '提交失败！',\\n            description: `表单提交内容为空！`,\\n          });\\n        } else {\\n          Notify.success({\\n            title: '提交成功！',\\n            description: `姓名为：${current.name}，提交完成，将自动填充初始化值！`,\\n          });\\n        }\\n      }}\\n      fields={{\\n        name: {\\n          label: '姓名',\\n          children: <Input placeholder=\\\"请输入姓名\\\" />\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        return (\\n          <div>\\n            <Row>\\n              <Col style={{ maxWidth: 300 }}>{fields.name}</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                {JSON.stringify(state.current)}\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 自定义校验\\n\\n一般校验可不需引入外部包解决，如果遇到大型工程表单比较多的地方推荐使用 [jquense/yup](https://github.com/jquense/yup)\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Input, Notify, Checkbox, Switch, RadioGroup, Radio, Textarea, Row, Col, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <Form\\n    onSubmit={({initial, current}) => {\\n      const errorObj = {};\\n      if (current.userName.startsWith('u')) {\\n        errorObj.userName = `姓名 ${current.userName} 不能以 ‘u’ 开头`;\\n      }\\n      if (!current.checkboxOne) {\\n        errorObj.checkboxOne = '一个多选条件 为必填';\\n      }\\n      if (!current.terms) {\\n        errorObj.terms = '必须统一服务条款';\\n      }\\n      if(Object.keys(errorObj).length > 0) {\\n        const err = new Error();\\n        err.filed = errorObj;\\n        throw err;\\n      }\\n      Notify.success({\\n        title: '提交成功！',\\n        description: `姓名为：${current.userName}，提交完成，将自动填充初始化值！`,\\n      });\\n    }}\\n    onSubmitError={(error) => {\\n      if (error.filed) {\\n        return { ...error.filed };\\n      }\\n      return null;\\n    }}\\n    fields={{\\n      userName: {\\n        initialValue: 'uiw',\\n        label: '姓名',\\n        children: <Input type=\\\"text\\\" />,\\n        help: '以“u”开头的名字将在此处显示错误信息'\\n      },\\n      age: {\\n        initialValue: '9',\\n        label: '年龄',\\n        children: <Input type=\\\"number\\\" />\\n      },\\n      checkbox: {\\n        initialValue: ['四川菜'],\\n        label: '选择你想吃的菜',\\n        children: (\\n          <Checkbox.Group>\\n            <div>菜系</div>\\n            <Checkbox value=\\\"四川菜\\\">四川菜</Checkbox>\\n            <Checkbox value=\\\"湖北菜\\\">湖北菜</Checkbox>\\n            <Checkbox value=\\\"西北菜\\\">西北菜</Checkbox>\\n            <Checkbox value=\\\"新疆菜\\\">新疆菜</Checkbox>\\n            <Checkbox value=\\\"东北菜\\\">东北菜</Checkbox>\\n            <div style={{ marginTop: 10 }}>家常菜</div>\\n            <Checkbox value=\\\"红烧武昌鱼\\\">红烧武昌鱼</Checkbox>\\n            <Checkbox value=\\\"麻婆豆腐\\\">麻婆豆腐</Checkbox>\\n            <Checkbox value=\\\"北京烤鸭\\\">北京烤鸭</Checkbox>\\n          </Checkbox.Group>\\n        )\\n      },\\n      checkboxOne: {\\n        inline: true,\\n        label: '一个多选条件',\\n        children: <Checkbox value=\\\"1\\\">四川菜</Checkbox>\\n      },\\n      switch: {\\n        inline: true,\\n        initialValue: true,\\n        label: '开启',\\n        children: <Switch size=\\\"small\\\" />\\n      },\\n      radioGroup: {\\n        inline: true,\\n        initialValue: '男',\\n        label: '单选',\\n        children: (\\n          <RadioGroup name=\\\"other\\\">\\n            <Radio value=\\\"男\\\">男</Radio>\\n            <Radio value=\\\"女\\\">女</Radio>\\n            <Radio value=\\\"人妖\\\" disabled>人妖</Radio>\\n            <Radio value=\\\"未知\\\">未知</Radio>\\n          </RadioGroup>\\n        )\\n      },\\n      textarea: {\\n        initialValue: '',\\n        label: '多行文本输入框',\\n        children: <Textarea placeholder=\\\"请输入内容\\\" />\\n      },\\n      terms: {\\n        validator: (currentValue) => {\\n          return !currentValue ? '必须统一服务条款' : null;\\n        },\\n        style: { marginBottom: 0 },\\n        children: <Checkbox value=\\\"1\\\">已阅读并同意<a href=\\\"#\\\">服务条款</a></Checkbox>\\n      }\\n    }}\\n  >\\n    {({ fields, state, canSubmit, resetForm }) => {\\n      console.log('fields:-->', state);\\n      return (\\n        <div style={{ maxWidth: 500 }}>\\n          <Row gutter={10}>\\n            <Col>{fields.userName}</Col>\\n            <Col>{fields.age}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col>{fields.checkbox}</Col>\\n            <Col>{fields.checkboxOne}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col>{fields.radioGroup}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col>{fields.switch}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col>{fields.textarea}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col style={{ padding: '5px 0 10px 0' }}>\\n              {fields.terms}\\n            </Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col fixed>\\n              <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n              <Button type=\\\"light\\\" onClick={resetForm}>重置表单</Button>\\n            </Col>\\n          </Row>\\n          <Row>\\n            <Col>\\n              <pre style={{ padding: '10px 0 0 10px' }}>\\n                {JSON.stringify(state.current, null, 2)}\\n              </pre>\\n            </Col>\\n          </Row>\\n        </div>\\n      )\\n    }}\\n  </Form>\\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 { Form, Input, Row, Col, Notify, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Form\\n      onSubmit={({initial, current}) => {\\n        const errorObj = {};\\n        if (!current.username) {\\n          errorObj.username = '用户名不能为空！';\\n        }\\n        if (!current.password) {\\n          errorObj.password = '密码不能为空！';\\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        console.log('-->>', initial, current);\\n        Notify.success({ title: '提交成功！', description: '恭喜你登录成功！' });\\n      }}\\n      onSubmitError={(error) => {\\n        if (error.filed) {\\n          return { ...error.filed };\\n        }\\n        return null;\\n      }}\\n      fields={{\\n        username: {\\n          labelClassName: 'fieldLabel',\\n          labelFor: 'username-inline',\\n          children: <Input preIcon=\\\"user\\\" id=\\\"username-inline\\\" />\\n        },\\n        password: {\\n          labelClassName: 'fieldLabel',\\n          labelFor: 'password-inline',\\n          children: <Input preIcon=\\\"lock\\\" id=\\\"password-inline\\\" type=\\\"password\\\" />\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit, resetForm }) => {\\n        console.log('fields:', state);\\n        return (\\n          <div>\\n            <Row gutter={10}>\\n              <Col fixed>{fields.username}</Col>\\n              <Col fixed>{fields.password}</Col>\\n            </Row>\\n            <Row gutter={10}>\\n              <Col>\\n                <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n                <Button type=\\\"danger\\\" onClick={resetForm}>重置表单</Button>\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\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 { Form, Input, Row, Col, Checkbox, Notify, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Form\\n      onSubmit={({initial, current}) => {\\n        console.log('-->>', initial, current);\\n      }}\\n      fields={{\\n        username: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          labelFor: 'username',\\n          children: <Input preIcon=\\\"user\\\" id=\\\"username\\\" />\\n        },\\n        password: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          labelFor: 'password',\\n          children: <Input preIcon=\\\"lock\\\" id=\\\"password\\\" type=\\\"password\\\" />\\n        },\\n        terms: {\\n          validator: (currentValue) => !currentValue ? '必须统一服务条款' : null,\\n          children: <Checkbox value=\\\"1\\\">已阅读并同意</Checkbox>\\n        }\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        console.log('fields:', state);\\n        return (\\n          <div>\\n            <Row>\\n              <Col fixed>{fields.username}</Col>\\n            </Row>\\n            <Row>\\n              <Col fixed>{fields.password}</Col>\\n            </Row>\\n            <Row>\\n              <Col fixed align=\\\"middle\\\">{fields.terms}</Col>\\n              <Col fixed style={{ marginTop: -4 }}><a href=\\\"#\\\">服务条款</a></Col>\\n            </Row>\\n            <Row>\\n              <Col fixed>\\n                <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\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 { Form, Input, Select, Row, Col, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Form\\n      onSubmit={({initial, current}) => {\\n        console.log('-->>', initial, current);\\n      }}\\n      fields={{\\n        firstName: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          inline: true,\\n          label: '姓氏',\\n          children: <Input />\\n        },\\n        lastName: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          initialValue: '先生',\\n          inline: true,\\n          label: '名字',\\n          children: <Input />\\n        },\\n        email: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          validator: (currentValue) => {\\n            return currentValue && currentValue.length < 2 ? 'Password must be 8+ characters' : null;\\n          },\\n          inline: true,\\n          label: 'Email',\\n          children: <Input />\\n        },\\n        select: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          inline: true,\\n          label: '选择器',\\n          children: (\\n            <Select>\\n              <Select.Option>Choose an item...</Select.Option>\\n              <Select.Option value=\\\"1\\\">One</Select.Option>\\n              <Select.Option value=\\\"2\\\">Two</Select.Option>\\n              <Select.Option value=\\\"3\\\">Three</Select.Option>\\n              <Select.Option value=\\\"4\\\">Four</Select.Option>\\n            </Select>\\n          ),\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        console.log('fields:', state);\\n        return (\\n          <div>\\n            <Row gutter={10} style={{ marginBottom: 10 }}>\\n              <Col>{fields.firstName}</Col>\\n              <Col>{fields.lastName}</Col>\\n            </Row>\\n            <Row gutter={10}>\\n              <Col>{fields.email}</Col>\\n              <Col>{fields.select}</Col>\\n            </Row>\\n            <Row gutter={10}>\\n              <Col />\\n              <Col fixed align=\\\"bottom\\\"><Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button></Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 自定义控件应用\\n\\n下面实例是在 [`<Form />`](#/components/form) 表单组件中，应用自定义 `<CustomSelect />` 控件组件。\\n\\n> ⚠️ 注意，自定义控件需要两个必要的 `props` 参数，`value` 和 `onChange`\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n- `value` 用于值传递，\\n- `onChange(value)` 用于值变更需要执行的回调函数，回调函数第一个参数必须是 `value`。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Form, Row, Col, Dropdown, Menu, Icon, Button, Notify } from 'uiw';\\n\\n// 自定义组件\\nfunction CustomSelect(props) {\\n  const { option = [], onChange } = props;\\n  const [value, setValue] = React.useState(props.value);\\n  const [isOpen, setIsOpen] = React.useState(false);\\n\\n  React.useEffect(() => {\\n    if (value !== props.value) {\\n      setValue(props.value);\\n    }\\n  }, [props.value]);\\n  const label = option.find(item => value === item.value);\\n  return (\\n    <Dropdown\\n      trigger=\\\"click\\\"\\n      onVisibleChange={(open) => setIsOpen(open)}\\n      isOpen={isOpen}\\n      menu={\\n        <Menu bordered style={{ minWidth: 120 }}>\\n          {option.map((item, idx) => (\\n            <Menu.Item active={value === item.value} key={idx} text={item.label}\\n              onClick={() => {\\n                setValue(item.value);\\n                setIsOpen(false)\\n                onChange && onChange(item.value);\\n              }}\\n            />\\n          ))}\\n        </Menu>\\n      }\\n    >\\n      <Button\\n        style={{\\n          boxShadow: 'inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1)'\\n        }}\\n        type=\\\"link\\\"\\n      >\\n        {label.label}<Icon type={isOpen ? 'up' : 'down'} />\\n      </Button>\\n    </Dropdown>\\n  );\\n}\\n\\n// 自定义组件应用实例\\nconst Demo = () => (\\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        console.log('~~~', current);\\n        const errorObj = {};\\n        if (!current.select) {\\n          errorObj.select = '内容为空，请输入内容';\\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.select}，将自动填充初始化值！`,\\n        });\\n      }}\\n      fields={{\\n        select: {\\n          initialValue: 0,\\n          children: (\\n            <CustomSelect option={[\\n              { label: '请选择', value: 0 },\\n              { label: '经济舱', value: 1 },\\n              { label: '豪华经济舱', value: 2 },\\n              { label: '商务舱', value: 3 },\\n              { label: '头等舱', value: 4 },\\n            ]} />\\n          )\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        return (\\n          <div>\\n            <Row>\\n              <Col style={{ maxWidth: 300 }}>{fields.select}</Col>\\n            </Row>\\n            <Row>\\n              <Col fixed>\\n                <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### FormItem 竖排\\n\\n对组件 `FormItem` 竖排展示示例。\\n\\n> ⚠️ 注意：当前只展示效果，`FormItem` 组件只在 `Form` 组件中使用。\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, FormItem } from 'uiw';\\n\\nconst Demo = () => (\\n  <Form>\\n    <FormItem\\n      label=\\\"可选字段\\\"\\n      labelFor=\\\"basic-input\\\"\\n      help={<span>在上面的字段中输入一个值</span>}\\n    >\\n      <Input id=\\\"basic-input\\\" type=\\\"text\\\"/>\\n    </FormItem>\\n    <FormItem\\n      label=\\\"用户名\\\"\\n      labelFor=\\\"username-input\\\"\\n      help=\\\"用户名长度至少为8个字符串。\\\"\\n      hasError={true}\\n    >\\n      <Input id=\\\"username-input\\\" type=\\\"text\\\"/>\\n    </FormItem>\\n  </Form>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### FormItem 横排\\n\\n对组件 `FormItem` 横排展示示例。\\n\\n> ⚠️ 注意：当前只展示效果，`FormItem` 组件只在 `Form` 组件中使用。\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, FormItem } from 'uiw';\\n\\nconst Demo = () => (\\n  <Form>\\n    <FormItem\\n      inline={true}\\n      label=\\\"可选字段\\\"\\n      labelFor=\\\"basic-input-inline\\\"\\n      help={<span>在上面的字段中输入一个值</span>}\\n      onChange={() => {\\n        console.log('TEST::');\\n      }}\\n    >\\n      <Input id=\\\"basic-input-inline\\\" type=\\\"text\\\"/>\\n    </FormItem>\\n    <FormItem\\n      inline={true}\\n      label=\\\"用户名\\\"\\n      labelFor=\\\"username-input-inline\\\"\\n      labelClassName=\\\"username\\\"\\n      help=\\\"用户名长度至少为8个字符串。\\\"\\n      hasError={true}\\n    >\\n      <Input id=\\\"username-input-inline\\\" type=\\\"text\\\"/>\\n    </FormItem>\\n  </Form>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Form\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| fields | 设置字段 | object | - |\\n| children | 回调 {`fields`, `state`, `canSubmit`, `resetForm`} | function | - |\\n| onSubmit | 提交表单时调用  | function({ initial, current }) | - |\\n| afterSubmit `@3.0.0+` | 提交回调 {`initial`, `current`}  | function({ initial, current }) | - |\\n| onChange | 表单发生改变回调函数 {`initial`, `current`}  | function({ initial, current }) | - |\\n| onSubmitError | 调用 `onSubmit` 抛出的任何错误。从字段名称返回对象映射。  | function | - |\\n| resetOnSubmit | 在 `onSubmit` 成功后将表单重置为其初始状态。| bool | `true` |\\n\\n```js\\n// => fields props\\n{\\n  firstName: {\\n    initialValue: '王',\\n    inline: true,\\n    label: '姓',\\n    labelClassName: 'fieldLabel',\\n    labelStyle: { width: 60 },\\n    // 验证，通过 `canSubmit()` 方法获得，提交按钮是否被禁用\\n    validator: (currentValue) => {},\\n    help: '帮助提示信息！',\\n    children: <Input type=\\\"number\\\" />\\n  },\\n}\\n```\\n\\n## FormItem\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| label | 表单标题展示 | string | - |\\n| labelClassName | 表单标题样式名称 | string | - |\\n| labelStyle | 表单标题样式 | object | - |\\n| labelFor | 列的宽度相对于同一网格中其他列的比率 | number | - |\\n| help | 提示信息 | ReactNode | - |\\n| hasError | 如果为true，则应用错误CSS。转动边框并帮助文字变红。 | number | - |\";"],"names":[],"sourceRoot":""}

package/web/static/js/7217.6128cabc.chunk.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7217],{77217:function(n,e,t){t.r(e),e.default="List \u5217\u8868\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-list/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-list.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-list)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-list.svg?label=@uiw/react-list)](https://www.npmjs.com/package/@uiw/react-list)\n\n\u5217\u8868\u7ec4\u4ef6\n\n```jsx\nimport { List } from 'uiw';\nimport { ListItem } from 'uiw'; // @ v4.10.0+\n// or\nimport List from '@uiw/react-list';\nimport List, { ListItem } from '@uiw/react-list'; // @ v4.10.0+\n\n// List.Item === ListItem\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 { List } from 'uiw';\n\nconst data = [\n  '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138',\n  '\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af',\n  '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86',\n];\nconst Demo = () => (\n  <div>\n    <List header={<div>\u5217\u8868\u5934\u90e8</div>} footer={<div>\u5217\u8868\u5c3e\u90e8</div>}>\n      <List.Item>\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138</List.Item>\n      <List.Item>\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af</List.Item>\n      <List.Item>\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86</List.Item>\n    </List>\n    <h4 style={{ margin: '16px 10px' }}>\u9ed8\u8ba4\u5c3a\u5bf8\uff0c\u6ca1\u6709\u5934\u90e8\u548c\u5c3e\u90e8</h4>\n    <List\n      dataSource={data}\n      noHover\n      renderItem={item => (<List.Item>{item}</List.Item>)}\n    />\n    <h4 style={{ margin: '16px 10px' }}>\u5c0f\u5c3a\u5bf8</h4>\n    <List\n      size=\"small\"\n      header={<div>\u5217\u8868\u5934\u90e8</div>} \n      footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n      dataSource={data}\n      renderItem={item => (<List.Item>{item}</List.Item>)}\n    />\n    <h4 style={{ margin: '16px 10px' }}>\u5927\u5c3a\u5bf8</h4>\n    <List\n      size=\"large\"\n      header={<div>\u5217\u8868\u5934\u90e8</div>} \n      footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n      dataSource={data}\n      renderItem={item => (<List.Item>{item}</List.Item>)}\n    />\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u7279\u6b8a\u65b9\u6cd5\n\n\u901a\u8fc7`dataSource`\u548c`renderItem`\u6765\u521b\u5efa\u5217\u8868\uff0c\u8fd9\u4e24\u4e2a\u5c5e\u6027\u662f\u4e00\u8d77\u4f7f\u7528\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { List } from 'uiw';\n\nconst data = [\n  '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138',\n  '\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af',\n  <span>\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86</span>,\n];\nconst Demo = () => (\n  <List\n    header={<div>\u5217\u8868\u5934\u90e8</div>}\n    footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n    dataSource={data}\n    renderItem={item => {\n      return (<List.Item>{item}</List.Item>);\n    }}\n  />\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u7981\u7528\u884c\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { List } from 'uiw';\n\nconst data = [\n  {\n    'content': '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'\n  },\n  {\n    'content': '\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af'\n  },\n  {\n    'disabled': true,\n    'content': '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86'\n  },\n];\nclass Demo extends React.Component {\n  onClick(item,index,e){\n    e.stopPropagation();\n    console.log('item',item,e);\n  }\n  render() {\n    return (\n      <List\n        header={<div>\u5217\u8868\u5934\u90e8</div>}\n        footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n        dataSource={data}\n        renderItem={(item,index) => {\n          return (\n            <List.Item onClick={this.onClick.bind(this, item, index)} disabled={item.disabled}>\n              {item.content}\n            </List.Item>\n          );\n        }}\n      />\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u884c\u6fc0\u6d3b\n\n`List.Item` \u8bbe\u7f6e `active` \u5c5e\u6027\u5373\u53ef\u8bbe\u7f6e\u8fd9\u5f20\u88ab\u6fc0\u6d3b\u7684\u6837\u5f0f\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { List } from 'uiw';\n\nconst Demo = () => (\n  <List size=\"small\" header={<div>\u5217\u8868\u5934\u90e8</div>} footer={<div>\u5217\u8868\u5c3e\u90e8</div>}>\n    <List.Item active>\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138</List.Item>\n    <List.Item>\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af</List.Item>\n    <List.Item>\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86</List.Item>\n  </List>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u6591\u9a6c\u7ebf\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { List } from 'uiw';\n\nconst data = [\n  '\u4eba\u603b\u662f\u5728\u63a5\u8fd1\u5e78\u798f\u65f6\u500d\u611f\u5e78\u798f\uff0c\u5728\u5e78\u798f\u8fdb\u884c\u65f6\u5374\u60a3\u5f97\u60a3\u5931\u3002',\n  '\u56e0\u4e3a\u7231\u8fc7\uff0c\u6240\u4ee5\u6148\u60b2\uff1b\u56e0\u4e3a\u61c2\u5f97\uff0c\u6240\u4ee5\u5bbd\u5bb9\u3002',\n  '\u4f60\u5982\u679c\u8ba4\u8bc6\u4ece\u524d\u7684\u6211\uff0c\u4e5f\u8bb8\u4f60\u4f1a\u539f\u8c05\u73b0\u5728\u7684\u6211\u3002',\n  <span>\u4f60\u8fd8\u4e0d\u6765\uff0c\u6211\u600e\u6562\u8001\u53bb\u3002</span>,\n];\nconst Demo = () => (\n  <List\n    dataSource={data}\n    striped={true}\n    size=\"small\"\n    renderItem={item => {\n      return (<List.Item>{item}</List.Item>);\n    }}\n  />\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5217\u8868\u4e3a\u8d85\u94fe\u63a5\n\n`List.Item` \u8bbe\u7f6e\u4e86 `href`\uff0c`List.Item`\u5c31\u53ef\u4ee5\u8bbe\u7f6e\u6807\u7b7e`<a>`\u7684\u6240\u6709\u5c5e\u6027\u4e86\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { List } from 'uiw';\n\nconst data = [\n  {\n    'href':'#/components',\n    'content': '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'\n  },\n  {\n    'target':'_blank',\n    'href':'https://uiwjs.github.io/icons/',\n    'content': '\u4eceuiw\u7ec4\u4ef6\u5e93\u4e2d\u62bd\u79bb\u51fa\u6765\u7684\uff0c\u56fe\u6807\u5b57\u4f53 uiw-iconfont \u53d1\u5e03'\n  },\n  {\n    'href':'#/components',\n    'disabled': true,\n    'content': '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86'\n  },\n];\nconst Demo = () => (\n  <List\n    header={<div>\u5217\u8868\u5934\u90e8</div>}\n    footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n    dataSource={data}\n    renderItem={(item, index) => {\n      return (\n        <List.Item {...item}>\n          {item.content}\n        </List.Item>\n      );\n    }}\n  />\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u5c55\u793a\u989d\u5916\u5185\u5bb9\n\n`List.Item` \u8bbe\u7f6e\u4e86 `extra`\uff0c`List.Item` \u5c31\u53ef\u4ee5\u8bbe\u7f6e\u53f3\u4fa7\u5185\u5bb9\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { List } from 'uiw';\n\nconst data = [\n  {\n    'extra': '\u5185\u5bb9',\n    'content': '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'\n  },\n  {\n    'extra': '\u5185\u5bb9',\n    'content': '\u4eceuiw\u7ec4\u4ef6\u5e93\u4e2d\u62bd\u79bb\u51fa\u6765\u7684\uff0c\u56fe\u6807\u5b57\u4f53 uiw-iconfont \u53d1\u5e03'\n  },\n  {\n    'href':'#/components',\n    'disabled': true,\n    'extra': '\u5185\u5bb9',\n    'content': '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86'\n  },\n];\nconst Demo = () => (\n  <List\n    header={<div>\u5217\u8868\u5934\u90e8</div>}\n    footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n    dataSource={data}\n    renderItem={(item, index) => {\n      return (\n        <List.Item {...item}>\n          {item.content}\n        </List.Item>\n      );\n    }}\n  />\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n## List\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| size | \u8bbe\u7f6e\u884c\u5c3a\u5bf8\uff0c\u5206\u522b\u5927\u3001\u4e2d\u3001\u5c0f\u4e09\u79cd\u5c3a\u5bf8 | Enum{`small`,`default`,`large`} | `default` |\n| bordered | \u662f\u5426\u5c55\u793a\u8fb9\u6846 | Boolean | `true` |\n| noHover | \u53d6\u6d88\u9f20\u6807\u79fb\u8fc7\u65f6\u8fb9\u6846\u9634\u5f71 | Boolean | `false` |\n| active | \u6fc0\u6d3b\u5217\u8868\uff0c\u9f20\u6807\u7ecf\u8fc7\u8fb9\u6846\u9634\u5f71\u6548\u679c | Boolean | `false` |\n| striped | \u6591\u9a6c\u7ebf\u6548\u679c | Boolean | `false` |\n| footer | \u5217\u8868\u5e95\u90e8 | String/ReactNode | - |\n| header | \u5217\u8868\u5934\u90e8 | String/ReactNode | - |\n| dataSource | \u662f\u5426\u5c55\u793a\u8fb9\u6846 | Boolean | - |\n| renderItem | \u901a\u8fc7\u6bc1\u6389\u51fd\u6570\u8fd4\u56deDome\uff0c\u6e32\u67d3\u5217\u8868\u6bcf\u4e2a\u884c | Function(item,index) | - |\n\n## List.Item\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n| --------- | -------- | --------- | -------- |\n| active | \u6fc0\u6d3b | Boolean | `false` |\n| extra | \u989d\u5916\u5185\u5bb9\uff0c\u5c55\u793a\u53f3\u4fa7\u5185\u5bb9 | React.ReactNode | - |\n| disabled | \u7981\u7528 | Boolean | `false` |\n| tagName | \u8bbe\u7f6e\u5b50\u8282\u70b9\u6807\u7b7e\u540d\uff0c\u9ed8\u8ba4 `<div />` \u6807\u7b7e\uff0c\u4e5f\u53ef\u4ee5\u6307\u5b9a\u8def\u7531 [`<Link />`](https://reacttraining.com/react-router/web/api/Link) | String/Link | `div` |\n| href | \u89c4\u5b9a\u94fe\u63a5\u7684\u76ee\u6807\uff0c\u503c\u5b58\u5728\u5e76\u4e14 `tagName` \u4e3a `String` \u65f6\u5019\u662f\u4e2a\u8d85\u94fe\u63a5\uff0c\u5728\u8d85\u94fe\u63a5\u4e0a\u52a0 `href` \u7684\u503c\u5c31\u662f\u4f60\u4f20\u8fdb\u6765\u7684 `href`\u503c\uff0c\u6b64\u65f6\u5c06\u53ef\u4ee5\u8bbe\u7f6e\u6807\u7b7e`<a>`\u7684\u6240\u6709\u5c5e\u6027\u3002  | Boolean/String | `false` |\n\n\u5176\u5b83\u53c2\u6570\u53ef\u6839\u636e tagName \u6765\u8bbe\u7f6e\uff0c\u8bbe\u7f6e `tagName=\"a\"` \u6807\u7b7e\u65f6\uff0c\u53ef\u8bbe\u7f6e `href=\"https://github.com\"` \u6216\u8005 target=\"_blank\" \u7b49\u53c2\u6570\uff0c\u4f60\u53ef\u4ee5\u8bbe\u7f6e react-router-dom \u8def\u7531 `<Link>`\uff0c\u4f8b\u5982\uff1a\n\n```jsx\nimport { List } from 'uiw';\nimport { Link } from 'react-router-dom';\n\nconst Demo = () => {\n  return (\n    <List>\n      <List.Item tagName={Link} to=\"/home\">\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138</List.Item>\n      <List.Item>\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af</List.Item>\n    </List>\n  )\n}\n```"}}]);
+//# sourceMappingURL=7217.6128cabc.chunk.js.map

package/web/static/js/7217.6128cabc.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/7217.6128cabc.chunk.js","mappings":"gHAAA","sources":["../../packages/react-list/README.md"],"sourcesContent":["export default \"List 列表\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-list/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-list.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-list)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-list.svg?label=@uiw/react-list)](https://www.npmjs.com/package/@uiw/react-list)\\n\\n列表组件\\n\\n```jsx\\nimport { List } from 'uiw';\\nimport { ListItem } from 'uiw'; // @ v4.10.0+\\n// or\\nimport List from '@uiw/react-list';\\nimport List, { ListItem } from '@uiw/react-list'; // @ v4.10.0+\\n\\n// List.Item === ListItem\\n```\\n\\n### 基础用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { List } from 'uiw';\\n\\nconst data = [\\n  '\\\"X战警新变种人\\\"首曝海报特写诡异人脸',\\n  '六大变五大？传迪士尼600亿收购福斯',\\n  '快跑!《侏罗纪世界2》正式预告要来了',\\n];\\nconst Demo = () => (\\n  <div>\\n    <List header={<div>列表头部</div>} footer={<div>列表尾部</div>}>\\n      <List.Item>\\\"X战警新变种人\\\"首曝海报特写诡异人脸</List.Item>\\n      <List.Item>六大变五大？传迪士尼600亿收购福斯</List.Item>\\n      <List.Item>快跑!《侏罗纪世界2》正式预告要来了</List.Item>\\n    </List>\\n    <h4 style={{ margin: '16px 10px' }}>默认尺寸，没有头部和尾部</h4>\\n    <List\\n      dataSource={data}\\n      noHover\\n      renderItem={item => (<List.Item>{item}</List.Item>)}\\n    />\\n    <h4 style={{ margin: '16px 10px' }}>小尺寸</h4>\\n    <List\\n      size=\\\"small\\\"\\n      header={<div>列表头部</div>} \\n      footer={<div>列表尾部</div>}\\n      dataSource={data}\\n      renderItem={item => (<List.Item>{item}</List.Item>)}\\n    />\\n    <h4 style={{ margin: '16px 10px' }}>大尺寸</h4>\\n    <List\\n      size=\\\"large\\\"\\n      header={<div>列表头部</div>} \\n      footer={<div>列表尾部</div>}\\n      dataSource={data}\\n      renderItem={item => (<List.Item>{item}</List.Item>)}\\n    />\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 特殊方法\\n\\n通过`dataSource`和`renderItem`来创建列表，这两个属性是一起使用。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { List } from 'uiw';\\n\\nconst data = [\\n  '\\\"X战警新变种人\\\"首曝海报特写诡异人脸',\\n  '六大变五大？传迪士尼600亿收购福斯',\\n  <span>快跑!《侏罗纪世界2》正式预告要来了</span>,\\n];\\nconst Demo = () => (\\n  <List\\n    header={<div>列表头部</div>}\\n    footer={<div>列表尾部</div>}\\n    dataSource={data}\\n    renderItem={item => {\\n      return (<List.Item>{item}</List.Item>);\\n    }}\\n  />\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 禁用行\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { List } from 'uiw';\\n\\nconst data = [\\n  {\\n    'content': '\\\"X战警新变种人\\\"首曝海报特写诡异人脸'\\n  },\\n  {\\n    'content': '六大变五大？传迪士尼600亿收购福斯'\\n  },\\n  {\\n    'disabled': true,\\n    'content': '快跑!《侏罗纪世界2》正式预告要来了'\\n  },\\n];\\nclass Demo extends React.Component {\\n  onClick(item,index,e){\\n    e.stopPropagation();\\n    console.log('item',item,e);\\n  }\\n  render() {\\n    return (\\n      <List\\n        header={<div>列表头部</div>}\\n        footer={<div>列表尾部</div>}\\n        dataSource={data}\\n        renderItem={(item,index) => {\\n          return (\\n            <List.Item onClick={this.onClick.bind(this, item, index)} disabled={item.disabled}>\\n              {item.content}\\n            </List.Item>\\n          );\\n        }}\\n      />\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 行激活\\n\\n`List.Item` 设置 `active` 属性即可设置这张被激活的样式。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { List } from 'uiw';\\n\\nconst Demo = () => (\\n  <List size=\\\"small\\\" header={<div>列表头部</div>} footer={<div>列表尾部</div>}>\\n    <List.Item active>\\\"X战警新变种人\\\"首曝海报特写诡异人脸</List.Item>\\n    <List.Item>六大变五大？传迪士尼600亿收购福斯</List.Item>\\n    <List.Item>快跑!《侏罗纪世界2》正式预告要来了</List.Item>\\n  </List>\\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 { List } from 'uiw';\\n\\nconst data = [\\n  '人总是在接近幸福时倍感幸福，在幸福进行时却患得患失。',\\n  '因为爱过，所以慈悲；因为懂得，所以宽容。',\\n  '你如果认识从前的我，也许你会原谅现在的我。',\\n  <span>你还不来，我怎敢老去。</span>,\\n];\\nconst Demo = () => (\\n  <List\\n    dataSource={data}\\n    striped={true}\\n    size=\\\"small\\\"\\n    renderItem={item => {\\n      return (<List.Item>{item}</List.Item>);\\n    }}\\n  />\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 列表为超链接\\n\\n`List.Item` 设置了 `href`，`List.Item`就可以设置标签`<a>`的所有属性了。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { List } from 'uiw';\\n\\nconst data = [\\n  {\\n    'href':'#/components',\\n    'content': '\\\"X战警新变种人\\\"首曝海报特写诡异人脸'\\n  },\\n  {\\n    'target':'_blank',\\n    'href':'https://uiwjs.github.io/icons/',\\n    'content': '从uiw组件库中抽离出来的，图标字体 uiw-iconfont 发布'\\n  },\\n  {\\n    'href':'#/components',\\n    'disabled': true,\\n    'content': '快跑!《侏罗纪世界2》正式预告要来了'\\n  },\\n];\\nconst Demo = () => (\\n  <List\\n    header={<div>列表头部</div>}\\n    footer={<div>列表尾部</div>}\\n    dataSource={data}\\n    renderItem={(item, index) => {\\n      return (\\n        <List.Item {...item}>\\n          {item.content}\\n        </List.Item>\\n      );\\n    }}\\n  />\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 展示额外内容\\n\\n`List.Item` 设置了 `extra`，`List.Item` 就可以设置右侧内容。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { List } from 'uiw';\\n\\nconst data = [\\n  {\\n    'extra': '内容',\\n    'content': '\\\"X战警新变种人\\\"首曝海报特写诡异人脸'\\n  },\\n  {\\n    'extra': '内容',\\n    'content': '从uiw组件库中抽离出来的，图标字体 uiw-iconfont 发布'\\n  },\\n  {\\n    'href':'#/components',\\n    'disabled': true,\\n    'extra': '内容',\\n    'content': '快跑!《侏罗纪世界2》正式预告要来了'\\n  },\\n];\\nconst Demo = () => (\\n  <List\\n    header={<div>列表头部</div>}\\n    footer={<div>列表尾部</div>}\\n    dataSource={data}\\n    renderItem={(item, index) => {\\n      return (\\n        <List.Item {...item}>\\n          {item.content}\\n        </List.Item>\\n      );\\n    }}\\n  />\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## List\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| size | 设置行尺寸，分别大、中、小三种尺寸 | Enum{`small`,`default`,`large`} | `default` |\\n| bordered | 是否展示边框 | Boolean | `true` |\\n| noHover | 取消鼠标移过时边框阴影 | Boolean | `false` |\\n| active | 激活列表，鼠标经过边框阴影效果 | Boolean | `false` |\\n| striped | 斑马线效果 | Boolean | `false` |\\n| footer | 列表底部 | String/ReactNode | - |\\n| header | 列表头部 | String/ReactNode | - |\\n| dataSource | 是否展示边框 | Boolean | - |\\n| renderItem | 通过毁掉函数返回Dome，渲染列表每个行 | Function(item,index) | - |\\n\\n## List.Item\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n| --------- | -------- | --------- | -------- |\\n| active | 激活 | Boolean | `false` |\\n| extra | 额外内容，展示右侧内容 | React.ReactNode | - |\\n| disabled | 禁用 | Boolean | `false` |\\n| tagName | 设置子节点标签名，默认 `<div />` 标签，也可以指定路由 [`<Link />`](https://reacttraining.com/react-router/web/api/Link) | String/Link | `div` |\\n| href | 规定链接的目标，值存在并且 `tagName` 为 `String` 时候是个超链接，在超链接上加 `href` 的值就是你传进来的 `href`值，此时将可以设置标签`<a>`的所有属性。  | Boolean/String | `false` |\\n\\n其它参数可根据 tagName 来设置，设置 `tagName=\\\"a\\\"` 标签时，可设置 `href=\\\"https://github.com\\\"` 或者 target=\\\"_blank\\\" 等参数，你可以设置 react-router-dom 路由 `<Link>`，例如：\\n\\n```jsx\\nimport { List } from 'uiw';\\nimport { Link } from 'react-router-dom';\\n\\nconst Demo = () => {\\n  return (\\n    <List>\\n      <List.Item tagName={Link} to=\\\"/home\\\">\\\"X战警新变种人\\\"首曝海报特写诡异人脸</List.Item>\\n      <List.Item>六大变五大？传迪士尼600亿收购福斯</List.Item>\\n    </List>\\n  )\\n}\\n```\";"],"names":[],"sourceRoot":""}

package/web/static/js/9137.f4e2b7b0.chunk.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9137],{29137:function(n,e,t){t.r(e),e.default='Menu \u83dc\u5355\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-menu/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-menu.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-menu)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-menu.svg?label=@uiw/react-menu)](https://www.npmjs.com/package/@uiw/react-menu)\n\n\u4e3a\u9875\u9762\u548c\u529f\u80fd\u63d0\u4f9b\u5bfc\u822a\u7684\u83dc\u5355\u5217\u8868\u3002\n\n```jsx\nimport { Menu } from \'uiw\';\nimport { MenuItem, MenuDivider, SubMenu } from \'uiw\'; // @ v4.10.0+\n// or\nimport Menu, { MenuItem, MenuDivider, SubMenu } from \'@uiw/react-menu\'; // @ v4.10.0+\n\n// Menu.Item === MenuItem\n// Menu.Divider === MenuDivider\n// Menu.SubMenu === SubMenu\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Menu, MenuItem, Row, Col } from \'uiw\';\n\nconst Demo = () => (\n  <Row justify="flex-start" gutter={10}>\n    <Col fixed>\n      <Menu bordered>\n        <MenuItem icon="reload" text="\u91cd\u65b0\u52a0\u8f7d" />\n        <Menu.Divider />\n        <Menu.Item icon="heart-on" text="\u53e6\u5b58\u4e3a" active />\n        <Menu.Item icon="appstore" text="\u5e94\u7528\u5546\u57ce" />\n        <Menu.Item icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" />\n        <Menu.Item icon="setting" text="\u504f\u597d\u8bbe\u7f6e" />\n        <Menu.Divider />\n        <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n        <Menu.Item icon="map" text="\u767e\u5ea6\u5730\u56fe" href="https://map.baidu.com" target="_blank" />\n      </Menu>\n    </Col>\n    <Col fixed>\n      <Menu bordered>\n        <Menu.Divider title="\u7f16\u8f91" />\n        <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n        <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n        <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n        <Menu.Item icon="delete" disabled text="\u5220\u9664" />\n        <Menu.SubMenu icon="setting-o" text="\u9009\u9879" collapse>\n          <Menu.Item icon="dot-chart" text="\u663e\u793a\u8fb9\u680f" />\n          <Menu.Item icon="date" text="\u6dfb\u52a0\u65e5\u671f" />\n          <Menu.Item icon="tags-o" text="\u6807\u7b7e\u540d\u79f0" />\n        </Menu.SubMenu>\n        <Menu.Divider title="\u5176\u5b83" />\n        <Menu.SubMenu icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa">\n          <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n          <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n          <Menu.Divider title="\u7c7b\u522b" />\n          <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n          <Menu.SubMenu icon="bar-chart" text="\u62a5\u8868" collapse>\n            <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n            <Menu.SubMenu icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939">\n              <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n              <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n            </Menu.SubMenu>\n          </Menu.SubMenu>\n        </Menu.SubMenu>\n        <Menu.SubMenu icon="setting" disabled text="\u504f\u597d\u8bbe\u7f6e">\n          <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n          <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n        </Menu.SubMenu>\n        <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n      </Menu>\n    </Col>\n    <Col fixed>\n      <Menu bordered>\n        <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n        <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n        <Menu.SubMenu icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa"\n          overlayProps={{\n            isOpen: true\n          }}\n        >\n          <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n          <Menu.Divider title="\u7c7b\u522b" />\n          <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n          <Menu.SubMenu icon="bar-chart" text="\u62a5\u8868" collapse>\n            <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n            <Menu.SubMenu icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939">\n              <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n              <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n            </Menu.SubMenu>\n          </Menu.SubMenu>\n        </Menu.SubMenu>\n        <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n      </Menu>\n    </Col>\n  </Row>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4e0b\u62c9\u83dc\u5355\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Menu, Popover, Button, Row, Col } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst content = (\n  <Menu>\n    <Menu.Divider title="\u7f16\u8f91" />\n    <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n    <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n    <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n    <Menu.Item icon="delete" disabled text="\u5220\u9664" />\n    <Menu.Divider title="\u5176\u5b83" />\n    <Menu.Item icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" />\n    <Menu.Item icon="setting" disabled text="\u504f\u597d\u8bbe\u7f6e" />\n    <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n  </Menu>\n)\nconst Demo = () => (\n  <div>\n    <div style={{ position: \'relative\' }}>\n\n      <Popover trigger="click" placement="topLeft" content={content}>\n        <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n      </Popover>\n      <Popover trigger="click" placement="top" content={content}>\n        <Button style={{ ...btnStl, left: 70}}>Top</Button>\n      </Popover>\n      <Popover trigger="click" placement="topRight" content={content}>\n        <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n      </Popover>\n\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n      <Popover trigger="click" placement="leftTop" content={content}>\n        <Button style={{ ...btnStl }}>LT</Button>\n      </Popover>\n      <Popover trigger="click" placement="rightTop" content={content}>\n        <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n      </Popover>\n\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n      <Popover trigger="click" placement="left" content={content}>\n        <Button style={{ ...btnStl }}>Left</Button>\n      </Popover>\n      <Popover trigger="click" placement="right" content={content}>\n        <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n      </Popover>\n\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n      <Popover trigger="click" placement="leftBottom" content={content}>\n        <Button style={{ ...btnStl }}>LB</Button>\n      </Popover>\n      <Popover trigger="click" placement="rightBottom" content={content}>\n        <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n      </Popover>\n\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n      <Popover trigger="click" placement="bottomLeft" content={content}>\n        <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n      </Popover>\n      <Popover trigger="click" placement="bottom" content={content}>\n        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n      </Popover>\n      <Popover trigger="click" placement="bottomRight" content={content}>\n        <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n      </Popover>\n\n    </div>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5185\u5d4c\u83dc\u5355\n\n\u901a\u8fc7\u8bbe\u7f6e `overlayProps={ isOpen: true }`\uff0c\u8ba9\u83dc\u5355\u9ed8\u8ba4\u5c55\u5f00\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Menu, Row, Col } from \'uiw\';\n\nconst Demo = () => (\n  <Row justify="flex-start" gutter={10}>\n    <Col fixed>\n      <Menu bordered style={{ maxWidth: 200 }}>\n        <Menu.Item icon="delete" disabled text="\u5220\u9664" />\n        <Menu.SubMenu icon="setting-o" text="\u9009\u9879" disabled collapse>\n          <Menu.Item icon="dot-chart" text="\u663e\u793a\u8fb9\u680f" />\n          <Menu.Item icon="date" text="\u6dfb\u52a0\u65e5\u671f" />\n          <Menu.Item icon="tags-o" text="\u6807\u7b7e\u540d\u79f0" />\n        </Menu.SubMenu>\n        <Menu.Divider title="\u5176\u5b83" />\n        <Menu.SubMenu\n          icon="bar-chart" text="\u6bcf\u5e742019\u5e74\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" collapse\n          // overlayProps={{ isOpen: true }}\n        >\n          <Menu.Item text="\u6dfb\u52a0\u6587\u4ef6" />\n          <Menu.Item text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n          <Menu.Divider title="\u7c7b\u522b" />\n          <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n          <Menu.SubMenu icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" collapse>\n            <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n            <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n          </Menu.SubMenu>\n        </Menu.SubMenu>\n        <Menu.Item icon="setting" disabled text="\u504f\u597d\u8bbe\u7f6e" />\n        <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n      </Menu>\n    </Col>\n  </Row>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4e3b\u9898\n\n\u5185\u5efa\u4e86\u4e24\u5957\u4e3b\u9898 `light`\u3001`dark`\uff0c\u9ed8\u8ba4 `light`\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Menu, Row, Col, Switch } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      theme: \'dark\',\n    }\n  }\n  render() {\n    return (\n      <div>\n        <Row justify="flex-start" gutter={10}>\n          <Col style={{ paddingBottom: 5 }}>\n            <Switch\n              checked\n              style={{ marginRight: 10 }}\n              onChange={(e) => {\n                this.setState({ theme: e.target.checked ? \'dark\' : \'light\' });\n              }}\n            />\n          </Col>\n        </Row>\n        <Row justify="flex-start" gutter={10}>\n          <Col fixed>\n            <Menu theme={this.state.theme} bordered style={{ maxWidth: 200 }}>\n              <Menu.Item icon="delete" disabled text="\u5220\u9664" />\n              <Menu.SubMenu icon="setting-o" text="\u9009\u9879" disabled collapse>\n                <Menu.Item icon="dot-chart" text="\u663e\u793a\u8fb9\u680f" />\n                <Menu.Item icon="date" text="\u6dfb\u52a0\u65e5\u671f" />\n                <Menu.Item icon="tags-o" text="\u6807\u7b7e\u540d\u79f0" />\n              </Menu.SubMenu>\n              <Menu.Divider title="\u5176\u5b83" />\n              <Menu.Item active icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n              <Menu.SubMenu icon="bar-chart" text="\u6bcf\u5e742019\u5e74\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa">\n                <Menu.Item text="\u6dfb\u52a0\u6587\u4ef6" />\n                <Menu.Item text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n                <Menu.Divider title="\u7c7b\u522b" />\n                <Menu.SubMenu icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" collapse>\n                  <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n                  <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n                </Menu.SubMenu>\n                <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n              </Menu.SubMenu>\n              <Menu.Item icon="setting" disabled text="\u504f\u597d\u8bbe\u7f6e" />\n              <Menu.SubMenu icon="setting-o" text="\u9009\u9879" collapse>\n                <Menu.Item icon="dot-chart" text="\u663e\u793a\u8fb9\u680f" />\n                <Menu.Item icon="date" text="\u6dfb\u52a0\u65e5\u671f" />\n                <Menu.Item icon="tags-o" text="\u6807\u7b7e\u540d\u79f0" />\n              </Menu.SubMenu>\n            </Menu>\n          </Col>\n        </Row>\n      </div>\n    );\n  }\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5b8c\u6574\u83dc\u5355\u5c55\u793a\n\n\u5305\u62ec\u70b9\u51fb\u9009\u4e2d\u6548\u679c\uff0c\u4e8b\u4ef6\u7b49\u64cd\u4f5c\uff0c\u5b8c\u6574\u7684\u5b9e\u4f8b\u5c55\u793a\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Menu, Row, Col, Switch } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      theme: \'light\',\n      menus: [\n        { key: \'1\', icon: \'delete\', label: \'\u5220\u9664\' },\n        {\n          icon: \'setting-o\',\n          label: \'\u9009\u9879\',\n          childrend: [\n            { key: \'1-1\', icon: \'dot-chart\', label: \'\u663e\u793a\u8fb9\u680f\' },\n            { key: \'1-2\', icon: \'date\', disabled: true, label: \'\u6dfb\u52a0\u65e5\u671f\' },\n            { key: \'1-3\', icon: \'tags-o\', label: \'\u6807\u7b7e\u540d\u79f0\' },\n          ],\n        },\n        { divider: true },\n        { key: \'2\', icon: \'map\', label: \'\u8c37\u6b4c\u5730\u56fe\' },\n        {\n          icon: \'bar-chart\',\n          label: \'\u6bcf\u5e742019\u5e74\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa\',\n          childrend: [\n            { key: \'2-1\', label: \'\u7edf\u8ba1\u6dfb\u52a0\u6587\u4ef6\' },\n            { key: \'2-2\', label: \'\u7edf\u8ba1\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n            { key: \'2-3\', icon: \'tags-o\', label: \'\u7c7b\u522b\', divider: true },\n            {\n              icon: \'folder-add\',\n              label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\',\n              childrend: [\n                { key: \'2-3-1\', label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n                { key: \'2-3-2\', label: \'\u6dfb\u52a0\u6587\u4ef6\' },\n                { key: \'2-3-3\', label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n              ],\n            },\n          ],\n        },\n      ],\n      active: \'1\',\n    }\n  }\n\n  onClickItem(key) {\n    this.setState({ active: key });\n  }\n\n  renderMenu(menus, k) {\n    const { active } = this.state;\n    const items = [];\n    menus.forEach((item, key) => {\n      if (item.childrend) {\n        items.push(\n          <Menu.SubMenu key={key} icon={item.icon} text={item.label} collapse\n            // \u53c2\u6570 usePortal \u5bb9\u6613\u51fa\u95ee\u9898\n            // overlayProps={{ usePortal: true }}\n          >\n            {this.renderMenu(item.childrend, `${k}${key}`)}\n          </Menu.SubMenu>\n        );\n      } else if (item.divider) {\n        items.push(<Menu.Divider key={`${k}${key}`} title={item.label} />);\n      } else {\n        items.push(\n          <Menu.Item\n            onClick={this.onClickItem.bind(this, item.key)}\n            active={active === item.key} key={`${k}${key}`}\n            icon={item.icon}\n            text={item.label}\n          />\n        );\n      }\n    });\n    return items;\n  }\n\n  render() {\n    return (\n      <div>\n        <Row justify="flex-start" gutter={10}>\n          <Col style={{ paddingBottom: 5 }}>\n            <Switch\n              checked={this.state.theme === \'dark\'}\n              style={{ marginRight: 10 }}\n              onChange={(e) => {\n                this.setState({ theme: e.target.checked ? \'dark\' : \'light\' });\n              }}\n            />\n          </Col>\n        </Row>\n        <Row justify="flex-start" gutter={10}>\n          <Col fixed>\n            <Menu inlineIndent={13} theme={this.state.theme} bordered style={{ maxWidth: 200 }}>\n              {this.renderMenu(this.state.menus, \'k\')}\n            </Menu>\n          </Col>\n        </Row>\n      </div>\n    );\n  }\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u7f29\u8d77\u5185\u5d4c\u83dc\u5355\n\n\u5185\u5d4c\u83dc\u5355\u53ef\u4ee5\u88ab\u7f29\u8d77/\u5c55\u5f00\uff0c\u9700\u8981 `SubMenu` \u7684\u53c2\u6570 `collapse` \u548c `inlineCollapsed` \u914d\u5408\u4f7f\u7528\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Menu, Row, Col, Icon, Button } from \'uiw\';\n\nconst menusData = [\n  { key: \'1\', icon: \'delete\', label: \'\u5220\u9664\' },\n  {\n    icon: \'setting-o\',\n    label: \'\u9009\u9879\',\n    childrend: [\n      { key: \'1-1\', icon: \'dot-chart\', label: \'\u663e\u793a\u8fb9\u680f\' },\n      { key: \'1-2\', icon: \'date\', disabled: true, label: \'\u6dfb\u52a0\u65e5\u671f\' },\n      { key: \'1-3\', icon: \'tags-o\', label: \'\u6807\u7b7e\u540d\u79f0\' },\n    ],\n  },\n  { key: \'2\', icon: \'map\', label: \'\u8c37\u6b4c\u5730\u56fe\' },\n  {\n    icon: \'bar-chart\',\n    label: \'\u6bcf\u5e742019\u5e74\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa\',\n    childrend: [\n      { key: \'2-1\', label: \'\u7edf\u8ba1\u6dfb\u52a0\u6587\u4ef6\' },\n      { key: \'2-2\', label: \'\u7edf\u8ba1\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n      { key: \'2-3\', icon: \'tags-o\', label: \'\u7c7b\u522b\', divider: true },\n      {\n        icon: \'folder-add\',\n        label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\',\n        childrend: [\n          { key: \'2-3-1\', label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n          { key: \'2-3-2\', label: \'\u6dfb\u52a0\u6587\u4ef6\' },\n          { key: \'2-3-3\', label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n        ],\n      },\n    ],\n  },\n];\n\nconst Demo = () => {\n  const [theme, setTheme] = React.useState(\'dark\');\n  const [collapse, setCollapse] = React.useState(false);\n  const menuRef = React.useRef();\n  function onClickItem() {\n    console.log(\';;;;>>>\')\n  }\n  function renderMenu(menus) {\n    const items = [];\n    menus.forEach((item, key) => {\n      if (item.childrend) {\n        items.push(\n          <Menu.SubMenu key={key} icon={item.icon} text={item.label}\n            collapse={collapse}\n          >\n            {renderMenu(item.childrend)}\n          </Menu.SubMenu>\n        );\n      } else if (item.divider) {\n        items.push(<Menu.Divider key={key} title={item.label} />);\n      } else {\n        items.push(\n          <Menu.Item\n            onClick={onClickItem.bind(this, item.key)}\n            key={key}\n            icon={item.icon}\n            text={item.label}\n          />\n        );\n      }\n    });\n    return items;\n  }\n  return (\n    <div style={{ maxWidth: 200}}>\n      <Button type="primary" size="small" onClick={() => setCollapse(!collapse)} style={{ marginBottom: 10 }}>\n        <Icon type={collapse ? \'menu-fold\' : \'menu-unfold\' } />\n      </Button>\n      <Switch\n        size="large"\n        data-checked="light"\n        data-unchecked="dark"\n        checked={theme === \'dark\'}\n        style={{ marginLeft: 10, marginBottom: 10, display: \'inline-block\' }}\n        onChange={(e) => setTheme(e.target.checked ? \'dark\' : \'light\')}\n      />\n      <Menu\n        theme={theme}\n        ref={menuRef}\n        inlineCollapsed={collapse}\n        inlineIndent={13}\n        bordered\n        // style={{ maxWidth: 200 }}\n      >\n        {renderMenu(menusData)}\n      </Menu>\n    </div>\n  )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Menu.Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| className | \u8bbe\u7f6e\u7c7b\u7684\u540d\u79f0 | String | - |\n| style | \u5143\u7d20\u7684\u884c\u5185\u6837\u5f0f | Object | - |\n| inlineIndent | \u83dc\u5355\u7f29\u8fdb\u5bbd\u5ea6 | Number | `10` |\n| theme | \u4e3b\u9898\u989c\u8272 | Enum{`light`, `dark`} | - |\n| bordered | \u662f\u5426\u6709\u8fb9\u6846 | Boolean | `false` |\n\n\n## Menu.Item.Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| icon | \u83dc\u5355\u56fe\u6807 [`<Icon />`](#/components/icon) \u7684 `type` \u5c5e\u6027 | ReactNode/String | - |\n| text | \u83dc\u5355\u6807\u9898\u5185\u5bb9 | ReactNode | - |\n| addonAfter | \u83dc\u5355\u6807\u9898\u540e\u9762\u63d2\u5165\u5185\u5bb9 | ReactNode | - |\n| ~~isSubMenuItem~~ | \u4e0d\u53ef\u7528\uff0cSubMenu \u7ec4\u4ef6\u4f20\u9012\u7ed9 Item \u7ec4\u4ef6\u7684**\u6807\u8bb0**\u5c5e\u6027\uff0c\u8fd9\u662f\u4e00\u4e2a\u5185\u90e8\u53c2\u6570\u3002 | Boolean | - |\n| tagName | \u8bbe\u7f6e\u5b50\u8282\u70b9\u6807\u7b7e\u540d\uff0c\u9ed8\u8ba4 `<a />` \u6807\u7b7e\uff0c\u4e5f\u53ef\u4ee5\u6307\u5b9a\u8def\u7531 [`<Link />`](https://reacttraining.com/react-router/web/api/Link) | String | `a` |\n| active | \u6fc0\u6d3b\u9009\u4e2d\u72b6\u6001 | Boolean | `false` |\n| inlineCollapsed | \u83dc\u5355\u662f\u5426\u6536\u8d77\u72b6\u6001 | Boolean | `false` |\n| disabled | \u7981\u7528\u72b6\u6001 | Boolean | `false` |\n\n\u5176\u5b83\u53c2\u6570\u53ef\u6839\u636e `tagName` \u6765\u8bbe\u7f6e\uff0c\u9ed8\u8ba4 `<a />` \u6807\u7b7e\u65f6\uff0c\u53ef\u8bbe\u7f6e `href="https://wwww.google.com"` \u6216\u8005 `target="_blank"` \u7b49\u53c2\u6570\uff0c\u4f60\u53ef\u4ee5\u8bbe\u7f6e [react-router-dom](https://github.com/ReactTraining/react-router) \u8def\u7531 `<Link>`\uff0c\u4f8b\u5982\uff1a\n\n```jsx\nimport { Menu } from \'uiw\';\nimport { Link } from \'react-router-dom\';\n\nconst Demo = () => {\n  return (\n    <Menu style={{ maxWidth: 200 }}>\n      <Menu.Item tagName={Link} to="/home" icon="reload" text="\u8df3\u8f6c\u9996\u9875" />\n      <Menu.Item icon="map" text="\u767e\u5ea6\u5730\u56fe" href="https://map.baidu.com" target="_blank" />\n    </Menu>\n  )\n}\n```\n\n## Menu.SubMenu.Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| icon | \u83dc\u5355\u56fe\u6807 [`<Icon />`](#/components/icon) \u7684 `type` \u5c5e\u6027 | String | - |\n| text | \u83dc\u5355\u6807\u9898\u5185\u5bb9 | ReactNode | - |\n| disabled | \u7981\u7528\u72b6\u6001 | Boolean | `false` |\n| collapse | \u9ed8\u8ba4\u5b50\u83dc\u5355\u662f OverlayTrigger \u7684\u5f39\u51fa\u5c42\uff0c\u901a\u8fc7\u8bbe\u7f6e `collapse={true}` \u53d8\u4e3a~~\u6298\u53e0~~(\u5f39\u51fa\u6846\u5f0f `@v4.2.0+`)\u83dc\u5355  | Boolean | `false` |\n| overlayProps | \u5bf9\u8c61\u5c06\u4f20\u9012\u5230 `OverlayTrigger` \u7ec4\u4ef6\uff0c\u4fee\u6539\u90e8\u5206\u53c2\u6570\uff0c\u76f8\u5173\u53c2\u6570\u53c2\u8003 [`OverlayTrigger`](#/components/overlay-trigger) | Object | - |\n\n## Menu.Divider.Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| className | \u8bbe\u7f6e\u7c7b\u7684\u540d\u79f0 | String | - |\n| style | \u5143\u7d20\u7684\u884c\u5185\u6837\u5f0f | Object | - |\n| title | \u6807\u9898 | String | - |\n'}}]);
+//# sourceMappingURL=9137.f4e2b7b0.chunk.js.map

package/web/static/js/9137.f4e2b7b0.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/9137.f4e2b7b0.chunk.js","mappings":"gHAAA","sources":["../../packages/react-menu/README.md"],"sourcesContent":["export default \"Menu 菜单\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-menu/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-menu.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-menu)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-menu.svg?label=@uiw/react-menu)](https://www.npmjs.com/package/@uiw/react-menu)\\n\\n为页面和功能提供导航的菜单列表。\\n\\n```jsx\\nimport { Menu } from 'uiw';\\nimport { MenuItem, MenuDivider, SubMenu } from 'uiw'; // @ v4.10.0+\\n// or\\nimport Menu, { MenuItem, MenuDivider, SubMenu } from '@uiw/react-menu'; // @ v4.10.0+\\n\\n// Menu.Item === MenuItem\\n// Menu.Divider === MenuDivider\\n// Menu.SubMenu === SubMenu\\n```\\n\\n### 基本用法\\n\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Menu, MenuItem, Row, Col } from 'uiw';\\n\\nconst Demo = () => (\\n  <Row justify=\\\"flex-start\\\" gutter={10}>\\n    <Col fixed>\\n      <Menu bordered>\\n        <MenuItem icon=\\\"reload\\\" text=\\\"重新加载\\\" />\\n        <Menu.Divider />\\n        <Menu.Item icon=\\\"heart-on\\\" text=\\\"另存为\\\" active />\\n        <Menu.Item icon=\\\"appstore\\\" text=\\\"应用商城\\\" />\\n        <Menu.Item icon=\\\"bar-chart\\\" text=\\\"月统计报表导出\\\" />\\n        <Menu.Item icon=\\\"setting\\\" text=\\\"偏好设置\\\" />\\n        <Menu.Divider />\\n        <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n        <Menu.Item icon=\\\"map\\\" text=\\\"百度地图\\\" href=\\\"https://map.baidu.com\\\" target=\\\"_blank\\\" />\\n      </Menu>\\n    </Col>\\n    <Col fixed>\\n      <Menu bordered>\\n        <Menu.Divider title=\\\"编辑\\\" />\\n        <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n        <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n        <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n        <Menu.Item icon=\\\"delete\\\" disabled text=\\\"删除\\\" />\\n        <Menu.SubMenu icon=\\\"setting-o\\\" text=\\\"选项\\\" collapse>\\n          <Menu.Item icon=\\\"dot-chart\\\" text=\\\"显示边栏\\\" />\\n          <Menu.Item icon=\\\"date\\\" text=\\\"添加日期\\\" />\\n          <Menu.Item icon=\\\"tags-o\\\" text=\\\"标签名称\\\" />\\n        </Menu.SubMenu>\\n        <Menu.Divider title=\\\"其它\\\" />\\n        <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"月统计报表导出\\\">\\n          <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n          <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n          <Menu.Divider title=\\\"类别\\\" />\\n          <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n          <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"报表\\\" collapse>\\n            <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n            <Menu.SubMenu icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\">\\n              <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n              <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n            </Menu.SubMenu>\\n          </Menu.SubMenu>\\n        </Menu.SubMenu>\\n        <Menu.SubMenu icon=\\\"setting\\\" disabled text=\\\"偏好设置\\\">\\n          <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n          <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n        </Menu.SubMenu>\\n        <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n      </Menu>\\n    </Col>\\n    <Col fixed>\\n      <Menu bordered>\\n        <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n        <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n        <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"月统计报表导出\\\"\\n          overlayProps={{\\n            isOpen: true\\n          }}\\n        >\\n          <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n          <Menu.Divider title=\\\"类别\\\" />\\n          <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n          <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"报表\\\" collapse>\\n            <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n            <Menu.SubMenu icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\">\\n              <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n              <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n            </Menu.SubMenu>\\n          </Menu.SubMenu>\\n        </Menu.SubMenu>\\n        <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n      </Menu>\\n    </Col>\\n  </Row>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 下拉菜单\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Popover, Button, Row, Col } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nconst content = (\\n  <Menu>\\n    <Menu.Divider title=\\\"编辑\\\" />\\n    <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n    <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n    <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n    <Menu.Item icon=\\\"delete\\\" disabled text=\\\"删除\\\" />\\n    <Menu.Divider title=\\\"其它\\\" />\\n    <Menu.Item icon=\\\"bar-chart\\\" text=\\\"月统计报表导出\\\" />\\n    <Menu.Item icon=\\\"setting\\\" disabled text=\\\"偏好设置\\\" />\\n    <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n  </Menu>\\n)\\nconst Demo = () => (\\n  <div>\\n    <div style={{ position: 'relative' }}>\\n\\n      <Popover trigger=\\\"click\\\" placement=\\\"topLeft\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 70 }}>TL</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"top\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 70}}>Top</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"topRight\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 70 }}>TR</Button>\\n      </Popover>\\n\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n      <Popover trigger=\\\"click\\\" placement=\\\"leftTop\\\" content={content}>\\n        <Button style={{ ...btnStl }}>LT</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"rightTop\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 216 }}>RT</Button>\\n      </Popover>\\n\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n      <Popover trigger=\\\"click\\\" placement=\\\"left\\\" content={content}>\\n        <Button style={{ ...btnStl }}>Left</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"right\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 216 }}>Right</Button>\\n      </Popover>\\n\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n      <Popover trigger=\\\"click\\\" placement=\\\"leftBottom\\\" content={content}>\\n        <Button style={{ ...btnStl }}>LB</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"rightBottom\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 216 }}>RB</Button>\\n      </Popover>\\n\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n      <Popover trigger=\\\"click\\\" placement=\\\"bottomLeft\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 70 }}>BL</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"bottom\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"bottomRight\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 70 }}>BR</Button>\\n      </Popover>\\n\\n    </div>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 内嵌菜单\\n\\n通过设置 `overlayProps={ isOpen: true }`，让菜单默认展开。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Row, Col } from 'uiw';\\n\\nconst Demo = () => (\\n  <Row justify=\\\"flex-start\\\" gutter={10}>\\n    <Col fixed>\\n      <Menu bordered style={{ maxWidth: 200 }}>\\n        <Menu.Item icon=\\\"delete\\\" disabled text=\\\"删除\\\" />\\n        <Menu.SubMenu icon=\\\"setting-o\\\" text=\\\"选项\\\" disabled collapse>\\n          <Menu.Item icon=\\\"dot-chart\\\" text=\\\"显示边栏\\\" />\\n          <Menu.Item icon=\\\"date\\\" text=\\\"添加日期\\\" />\\n          <Menu.Item icon=\\\"tags-o\\\" text=\\\"标签名称\\\" />\\n        </Menu.SubMenu>\\n        <Menu.Divider title=\\\"其它\\\" />\\n        <Menu.SubMenu\\n          icon=\\\"bar-chart\\\" text=\\\"每年2019年统计报表导出\\\" collapse\\n          // overlayProps={{ isOpen: true }}\\n        >\\n          <Menu.Item text=\\\"添加文件\\\" />\\n          <Menu.Item text=\\\"添加文件夹\\\" />\\n          <Menu.Divider title=\\\"类别\\\" />\\n          <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n          <Menu.SubMenu icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" collapse>\\n            <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n            <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n          </Menu.SubMenu>\\n        </Menu.SubMenu>\\n        <Menu.Item icon=\\\"setting\\\" disabled text=\\\"偏好设置\\\" />\\n        <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n      </Menu>\\n    </Col>\\n  </Row>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 主题\\n\\n内建了两套主题 `light`、`dark`，默认 `light`。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Row, Col, Switch } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor(props) {\\n    super(props);\\n    this.state = {\\n      theme: 'dark',\\n    }\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <Row justify=\\\"flex-start\\\" gutter={10}>\\n          <Col style={{ paddingBottom: 5 }}>\\n            <Switch\\n              checked\\n              style={{ marginRight: 10 }}\\n              onChange={(e) => {\\n                this.setState({ theme: e.target.checked ? 'dark' : 'light' });\\n              }}\\n            />\\n          </Col>\\n        </Row>\\n        <Row justify=\\\"flex-start\\\" gutter={10}>\\n          <Col fixed>\\n            <Menu theme={this.state.theme} bordered style={{ maxWidth: 200 }}>\\n              <Menu.Item icon=\\\"delete\\\" disabled text=\\\"删除\\\" />\\n              <Menu.SubMenu icon=\\\"setting-o\\\" text=\\\"选项\\\" disabled collapse>\\n                <Menu.Item icon=\\\"dot-chart\\\" text=\\\"显示边栏\\\" />\\n                <Menu.Item icon=\\\"date\\\" text=\\\"添加日期\\\" />\\n                <Menu.Item icon=\\\"tags-o\\\" text=\\\"标签名称\\\" />\\n              </Menu.SubMenu>\\n              <Menu.Divider title=\\\"其它\\\" />\\n              <Menu.Item active icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n              <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"每年2019年统计报表导出\\\">\\n                <Menu.Item text=\\\"添加文件\\\" />\\n                <Menu.Item text=\\\"添加文件夹\\\" />\\n                <Menu.Divider title=\\\"类别\\\" />\\n                <Menu.SubMenu icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" collapse>\\n                  <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n                  <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n                </Menu.SubMenu>\\n                <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n              </Menu.SubMenu>\\n              <Menu.Item icon=\\\"setting\\\" disabled text=\\\"偏好设置\\\" />\\n              <Menu.SubMenu icon=\\\"setting-o\\\" text=\\\"选项\\\" collapse>\\n                <Menu.Item icon=\\\"dot-chart\\\" text=\\\"显示边栏\\\" />\\n                <Menu.Item icon=\\\"date\\\" text=\\\"添加日期\\\" />\\n                <Menu.Item icon=\\\"tags-o\\\" text=\\\"标签名称\\\" />\\n              </Menu.SubMenu>\\n            </Menu>\\n          </Col>\\n        </Row>\\n      </div>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 完整菜单展示\\n\\n包括点击选中效果，事件等操作，完整的实例展示。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Row, Col, Switch } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor(props) {\\n    super(props);\\n    this.state = {\\n      theme: 'light',\\n      menus: [\\n        { key: '1', icon: 'delete', label: '删除' },\\n        {\\n          icon: 'setting-o',\\n          label: '选项',\\n          childrend: [\\n            { key: '1-1', icon: 'dot-chart', label: '显示边栏' },\\n            { key: '1-2', icon: 'date', disabled: true, label: '添加日期' },\\n            { key: '1-3', icon: 'tags-o', label: '标签名称' },\\n          ],\\n        },\\n        { divider: true },\\n        { key: '2', icon: 'map', label: '谷歌地图' },\\n        {\\n          icon: 'bar-chart',\\n          label: '每年2019年统计报表导出',\\n          childrend: [\\n            { key: '2-1', label: '统计添加文件' },\\n            { key: '2-2', label: '统计添加文件夹' },\\n            { key: '2-3', icon: 'tags-o', label: '类别', divider: true },\\n            {\\n              icon: 'folder-add',\\n              label: '添加文件夹',\\n              childrend: [\\n                { key: '2-3-1', label: '添加文件夹' },\\n                { key: '2-3-2', label: '添加文件' },\\n                { key: '2-3-3', label: '添加文件夹' },\\n              ],\\n            },\\n          ],\\n        },\\n      ],\\n      active: '1',\\n    }\\n  }\\n\\n  onClickItem(key) {\\n    this.setState({ active: key });\\n  }\\n\\n  renderMenu(menus, k) {\\n    const { active } = this.state;\\n    const items = [];\\n    menus.forEach((item, key) => {\\n      if (item.childrend) {\\n        items.push(\\n          <Menu.SubMenu key={key} icon={item.icon} text={item.label} collapse\\n            // 参数 usePortal 容易出问题\\n            // overlayProps={{ usePortal: true }}\\n          >\\n            {this.renderMenu(item.childrend, `${k}${key}`)}\\n          </Menu.SubMenu>\\n        );\\n      } else if (item.divider) {\\n        items.push(<Menu.Divider key={`${k}${key}`} title={item.label} />);\\n      } else {\\n        items.push(\\n          <Menu.Item\\n            onClick={this.onClickItem.bind(this, item.key)}\\n            active={active === item.key} key={`${k}${key}`}\\n            icon={item.icon}\\n            text={item.label}\\n          />\\n        );\\n      }\\n    });\\n    return items;\\n  }\\n\\n  render() {\\n    return (\\n      <div>\\n        <Row justify=\\\"flex-start\\\" gutter={10}>\\n          <Col style={{ paddingBottom: 5 }}>\\n            <Switch\\n              checked={this.state.theme === 'dark'}\\n              style={{ marginRight: 10 }}\\n              onChange={(e) => {\\n                this.setState({ theme: e.target.checked ? 'dark' : 'light' });\\n              }}\\n            />\\n          </Col>\\n        </Row>\\n        <Row justify=\\\"flex-start\\\" gutter={10}>\\n          <Col fixed>\\n            <Menu inlineIndent={13} theme={this.state.theme} bordered style={{ maxWidth: 200 }}>\\n              {this.renderMenu(this.state.menus, 'k')}\\n            </Menu>\\n          </Col>\\n        </Row>\\n      </div>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 缩起内嵌菜单\\n\\n内嵌菜单可以被缩起/展开，需要 `SubMenu` 的参数 `collapse` 和 `inlineCollapsed` 配合使用。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Row, Col, Icon, Button } from 'uiw';\\n\\nconst menusData = [\\n  { key: '1', icon: 'delete', label: '删除' },\\n  {\\n    icon: 'setting-o',\\n    label: '选项',\\n    childrend: [\\n      { key: '1-1', icon: 'dot-chart', label: '显示边栏' },\\n      { key: '1-2', icon: 'date', disabled: true, label: '添加日期' },\\n      { key: '1-3', icon: 'tags-o', label: '标签名称' },\\n    ],\\n  },\\n  { key: '2', icon: 'map', label: '谷歌地图' },\\n  {\\n    icon: 'bar-chart',\\n    label: '每年2019年统计报表导出',\\n    childrend: [\\n      { key: '2-1', label: '统计添加文件' },\\n      { key: '2-2', label: '统计添加文件夹' },\\n      { key: '2-3', icon: 'tags-o', label: '类别', divider: true },\\n      {\\n        icon: 'folder-add',\\n        label: '添加文件夹',\\n        childrend: [\\n          { key: '2-3-1', label: '添加文件夹' },\\n          { key: '2-3-2', label: '添加文件' },\\n          { key: '2-3-3', label: '添加文件夹' },\\n        ],\\n      },\\n    ],\\n  },\\n];\\n\\nconst Demo = () => {\\n  const [theme, setTheme] = React.useState('dark');\\n  const [collapse, setCollapse] = React.useState(false);\\n  const menuRef = React.useRef();\\n  function onClickItem() {\\n    console.log(';;;;>>>')\\n  }\\n  function renderMenu(menus) {\\n    const items = [];\\n    menus.forEach((item, key) => {\\n      if (item.childrend) {\\n        items.push(\\n          <Menu.SubMenu key={key} icon={item.icon} text={item.label}\\n            collapse={collapse}\\n          >\\n            {renderMenu(item.childrend)}\\n          </Menu.SubMenu>\\n        );\\n      } else if (item.divider) {\\n        items.push(<Menu.Divider key={key} title={item.label} />);\\n      } else {\\n        items.push(\\n          <Menu.Item\\n            onClick={onClickItem.bind(this, item.key)}\\n            key={key}\\n            icon={item.icon}\\n            text={item.label}\\n          />\\n        );\\n      }\\n    });\\n    return items;\\n  }\\n  return (\\n    <div style={{ maxWidth: 200}}>\\n      <Button type=\\\"primary\\\" size=\\\"small\\\" onClick={() => setCollapse(!collapse)} style={{ marginBottom: 10 }}>\\n        <Icon type={collapse ? 'menu-fold' : 'menu-unfold' } />\\n      </Button>\\n      <Switch\\n        size=\\\"large\\\"\\n        data-checked=\\\"light\\\"\\n        data-unchecked=\\\"dark\\\"\\n        checked={theme === 'dark'}\\n        style={{ marginLeft: 10, marginBottom: 10, display: 'inline-block' }}\\n        onChange={(e) => setTheme(e.target.checked ? 'dark' : 'light')}\\n      />\\n      <Menu\\n        theme={theme}\\n        ref={menuRef}\\n        inlineCollapsed={collapse}\\n        inlineIndent={13}\\n        bordered\\n        // style={{ maxWidth: 200 }}\\n      >\\n        {renderMenu(menusData)}\\n      </Menu>\\n    </div>\\n  )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Menu.Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| className | 设置类的名称 | String | - |\\n| style | 元素的行内样式 | Object | - |\\n| inlineIndent | 菜单缩进宽度 | Number | `10` |\\n| theme | 主题颜色 | Enum{`light`, `dark`} | - |\\n| bordered | 是否有边框 | Boolean | `false` |\\n\\n\\n## Menu.Item.Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| icon | 菜单图标 [`<Icon />`](#/components/icon) 的 `type` 属性 | ReactNode/String | - |\\n| text | 菜单标题内容 | ReactNode | - |\\n| addonAfter | 菜单标题后面插入内容 | ReactNode | - |\\n| ~~isSubMenuItem~~ | 不可用，SubMenu 组件传递给 Item 组件的**标记**属性，这是一个内部参数。 | Boolean | - |\\n| tagName | 设置子节点标签名，默认 `<a />` 标签，也可以指定路由 [`<Link />`](https://reacttraining.com/react-router/web/api/Link) | String | `a` |\\n| active | 激活选中状态 | Boolean | `false` |\\n| inlineCollapsed | 菜单是否收起状态 | Boolean | `false` |\\n| disabled | 禁用状态 | Boolean | `false` |\\n\\n其它参数可根据 `tagName` 来设置，默认 `<a />` 标签时，可设置 `href=\\\"https://wwww.google.com\\\"` 或者 `target=\\\"_blank\\\"` 等参数，你可以设置 [react-router-dom](https://github.com/ReactTraining/react-router) 路由 `<Link>`，例如：\\n\\n```jsx\\nimport { Menu } from 'uiw';\\nimport { Link } from 'react-router-dom';\\n\\nconst Demo = () => {\\n  return (\\n    <Menu style={{ maxWidth: 200 }}>\\n      <Menu.Item tagName={Link} to=\\\"/home\\\" icon=\\\"reload\\\" text=\\\"跳转首页\\\" />\\n      <Menu.Item icon=\\\"map\\\" text=\\\"百度地图\\\" href=\\\"https://map.baidu.com\\\" target=\\\"_blank\\\" />\\n    </Menu>\\n  )\\n}\\n```\\n\\n## Menu.SubMenu.Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| icon | 菜单图标 [`<Icon />`](#/components/icon) 的 `type` 属性 | String | - |\\n| text | 菜单标题内容 | ReactNode | - |\\n| disabled | 禁用状态 | Boolean | `false` |\\n| collapse | 默认子菜单是 OverlayTrigger 的弹出层，通过设置 `collapse={true}` 变为~~折叠~~(弹出框式 `@v4.2.0+`)菜单  | Boolean | `false` |\\n| overlayProps | 对象将传递到 `OverlayTrigger` 组件，修改部分参数，相关参数参考 [`OverlayTrigger`](#/components/overlay-trigger) | Object | - |\\n\\n## Menu.Divider.Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| className | 设置类的名称 | String | - |\\n| style | 元素的行内样式 | Object | - |\\n| title | 标题 | String | - |\\n\";"],"names":[],"sourceRoot":""}