@uiw/doc 4.13.8 → 4.13.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/package.json +1 -1
  2. package/web/CONTRIBUTORS.svg +7 -7
  3. package/web/asset-manifest.json +24 -24
  4. package/web/index.html +1 -1
  5. package/web/static/css/{main.74129d99.css → main.16434244.css} +2 -2
  6. package/web/static/css/main.16434244.css.map +1 -0
  7. package/web/static/js/{2316.eee2d477.chunk.js → 2316.de77050f.chunk.js} +2 -2
  8. package/web/static/js/2316.de77050f.chunk.js.map +1 -0
  9. package/web/static/js/2854.ff43f045.chunk.js +3 -0
  10. package/web/static/js/{2854.377c4863.chunk.js.LICENSE.txt → 2854.ff43f045.chunk.js.LICENSE.txt} +0 -0
  11. package/web/static/js/2854.ff43f045.chunk.js.map +1 -0
  12. package/web/static/js/{5393.8729db46.chunk.js → 5393.b105bd5e.chunk.js} +2 -2
  13. package/web/static/js/5393.b105bd5e.chunk.js.map +1 -0
  14. package/web/static/js/5468.462bf55f.chunk.js +2 -0
  15. package/web/static/js/5468.462bf55f.chunk.js.map +1 -0
  16. package/web/static/js/6536.8d9d4af6.chunk.js +2 -0
  17. package/web/static/js/6536.8d9d4af6.chunk.js.map +1 -0
  18. package/web/static/js/7313.558b6522.chunk.js +2 -0
  19. package/web/static/js/7313.558b6522.chunk.js.map +1 -0
  20. package/web/static/js/766.c8931dff.chunk.js +2 -0
  21. package/web/static/js/766.c8931dff.chunk.js.map +1 -0
  22. package/web/static/js/{8768.2b6b6aab.chunk.js → 8768.5facbb82.chunk.js} +2 -2
  23. package/web/static/js/{8768.2b6b6aab.chunk.js.map → 8768.5facbb82.chunk.js.map} +1 -1
  24. package/web/static/js/9188.b7ce0cf2.chunk.js +2 -0
  25. package/web/static/js/9188.b7ce0cf2.chunk.js.map +1 -0
  26. package/web/static/js/main.0e545723.js +2 -0
  27. package/web/static/js/main.0e545723.js.map +1 -0
  28. package/web/static/css/main.74129d99.css.map +0 -1
  29. package/web/static/js/2316.eee2d477.chunk.js.map +0 -1
  30. package/web/static/js/2854.377c4863.chunk.js +0 -3
  31. package/web/static/js/2854.377c4863.chunk.js.map +0 -1
  32. package/web/static/js/5393.8729db46.chunk.js.map +0 -1
  33. package/web/static/js/5468.ea87a4b5.chunk.js +0 -2
  34. package/web/static/js/5468.ea87a4b5.chunk.js.map +0 -1
  35. package/web/static/js/6536.6aaaba5b.chunk.js +0 -2
  36. package/web/static/js/6536.6aaaba5b.chunk.js.map +0 -1
  37. package/web/static/js/7313.18ac2eb2.chunk.js +0 -2
  38. package/web/static/js/7313.18ac2eb2.chunk.js.map +0 -1
  39. package/web/static/js/766.d3dd7e64.chunk.js +0 -2
  40. package/web/static/js/766.d3dd7e64.chunk.js.map +0 -1
  41. package/web/static/js/9188.636af533.chunk.js +0 -2
  42. package/web/static/js/9188.636af533.chunk.js.map +0 -1
  43. package/web/static/js/main.b8836d2a.js +0 -2
  44. package/web/static/js/main.b8836d2a.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"static/js/5393.8729db46.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,GAyDrC,OAxDIF,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,qJAEV,eAAgB,CACdA,QAAS,CACPC,KAAM,WACNC,YAAY,QAAD,OAAUlB,EAAV,WACXC,aAAc,CACZkB,MAAO,UACP,YAAa,UACbC,IAAK,UAEPC,gBAAiB,CACf,oBAAqB,SACrBC,IAAK,UAEPC,QAAS,MACTC,QAAS,CACPC,MAAO,YACPC,MAAO,YACPC,KAAM,wBAERC,aAAc,CAAC,QAAS,WAAY,eAAgB,yBAMvD,SAAC,KAAD,kBAAiBvB,GAAjB,IAAwBJ,aAAcA,EAAc4B,MAAO,CAAEC,aAAc,M,eC7DrE,SAAS,IAA2B,IAA1BzB,EAAyB,uDAAJ,GACpC0B,EAAS1B,EAAT0B,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,EAAAC,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,0CAAlD,8BAGA,SAAC,EAAAG,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,+BAAlD,qBAGA,SAAC,EAAAG,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,+BAAlD,kBAGA,SAAC,EAAAG,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,mCAAlD,uBAGA,SAAC,EAAAG,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,sBAAlD,yCCtCN,MAA0B,uBAA1B,EAA4D,wB,oBCYtDK,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,aAAc8B,EAAS1B,EAAT0B,KAClC,GAA0BkB,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,EAAiFA,EAAzEyD,EAAR,EAAQA,UAAWC,EAAnB,EAAmBA,SAAUC,EAA7B,EAA6BA,SAAUC,EAAvC,EAAuCA,QAASC,EAAhD,EAAgDA,OAAQhE,EAAxD,EAAwDA,QAASC,EAAjE,EAAiEA,YACjE,GAAI0D,EACF,OAAO,2BAAUxD,IAEnB,IAAM8D,EAAS,CACbL,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAhE,QAAAA,EACAC,YAAAA,GAEF,OAAgF,IAA5EiE,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,EAASC,YAAAA,SAMzE,gBAAKuD,UAAWC,EAAhB,UACE,SAACa,EAAD,CAAQzC,KAAMA,SA9CX,O,yHCrCX,qBAAe,OACb,SAAC,IAAD,CACEA,KAAK,yEACL9B,aAAc,CAAEwE,KAAAA,EAAAA,KAAMC,IAAAA,EAAAA,IAAKC,IAAAA,EAAAA,IAAKC,KAAAA,EAAAA,KAAMC,KAAAA,EAAAA,MACtC7B,YAAU,iBAAE,oGACO,gCADP,cACJ8B,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/tree/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@17.x/umd/react.development.js;https://unpkg.com/react-dom@17.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.1.3/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 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: '^17.0.2',\n 'react-dom': '^17.0.2',\n uiw: 'latest',\n },\n devDependencies: {\n '@kkt/less-modules': '~7.1.1',\n kkt: '~7.1.5',\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, codeSandbox } = 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 codeSandbox,\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, codeSandbox }}\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 { Tree, Row, Col, Card, Icon } from 'uiw';\nimport Markdown from '../../../components/Markdown';\n\nexport default () => (\n <Markdown\n path=\"https://github.com/uiwjs/uiw/tree/master/packages/react-tree/README.md\"\n dependencies={{ Tree, Row, Col, Card, Icon }}\n renderPage={async () => {\n const md = await import('uiw/node_modules/@uiw/react-tree/README.md');\n return md.default || md;\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","license","scripts","start","build","test","browserslist","style","marginBottom","path","url","Fragment","href","target","rel","Divider","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","Tree","Row","Col","Card","Icon","md","default"],"sourceRoot":""}
@@ -1,2 +0,0 @@
1
- "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5468],{25468:function(n,e,l){l.r(e),e.default="Tree \u6811\u5f62\u63a7\u4ef6\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tree/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-tree.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-tree)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-tree.svg?label=@uiw/react-tree)](https://npmjs.com/@uiw/react-tree)\n\n\u4f7f\u7528\u6811\u63a7\u4ef6\u53ef\u4ee5\u5b8c\u6574\u5c55\u73b0\u5176\u4e2d\u7684\u5c42\u7ea7\u5173\u7cfb\uff0c\u5e76\u5177\u6709\u5c55\u5f00\u6536\u8d77\u9009\u62e9\u7b49\u4ea4\u4e92\u529f\u80fd\u3002\n\n```jsx\nimport { Tree } from 'uiw';\n// or\nimport Tree from '@uiw/react-tree';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Tree, Card, Row, Col } from 'uiw';\n\nconst data = [\n {\n label: '\u6e56\u5317\u7701',\n key: '0-0-0',\n children:[\n {\n label: '\u6b66\u6c49\u5e02',\n key: '0-1-0',\n children:[\n { label: '\u65b0\u6d32\u533a', key: '0-1-1' },\n { label: '\u6b66\u660c\u533a', key: '0-1-2' },\n {\n label: '\u6c49\u5357\u533a',\n key: '0-1-3',\n children:[\n { label: '\u6c49\u5357\u533a1', key: '0-1-3-1' },\n { label: '\u6c49\u5357\u533a2', key: '0-1-3-2' },\n { label: '\u6c49\u5357\u533a3', key: '0-1-3-3' },\n ]\n },\n ]\n },\n { label: '\u9ec4\u5188\u5e02', key: '0-2-0' },\n {\n label: '\u9ec4\u77f3\u5e02',\n key: '0-3-0',\n children:[\n { label: '\u9752\u5c71\u533a', key: '0-3-1' },\n { label: '\u9ec4\u9642\u533a', key: '0-3-2' },\n { label: '\u9752\u5c71\u533a', key: '0-3-3' },\n ]\n },\n ]\n },\n {\n label: '\u4e0a\u6d77\u5e02',\n key: '1-0-0',\n children:[\n { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n {\n label: '\u5f90\u6c47\u533a',\n key: '1-0-3',\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: '2-0-0',\n children:[\n { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n {\n label: '\u5d07\u6587\u533a',\n key: '2-3-0',\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n ]\n },\n ]\n }\n];\n\nconst Demo = () => (\n <div>\n <Row gutter={10}>\n <Col fixed>\n <Card title=\"\u5355\u9009\">\n <Tree\n defaultExpandAll={true}\n data={data}\n onExpand={(key, expanded, data, node) => {\n console.log('onExpand',key, expanded, data, node);\n }}\n onSelected={(key, selected, item, evn) => {\n console.log('onSelected',key, selected, item, evn);\n }}\n />\n </Card>\n </Col>\n <Col fixed>\n <Card title=\"\u591a\u9009\uff0c\u5b50\u8282\u70b9\u4e0d\u53d7\u63a7\">\n <Tree\n autoExpandParent={true}\n data={data}\n multiple\n onExpand={(key, expanded, data, node) => {\n console.log(key, expanded, data, node);\n }}\n onSelected={(key, selected, item, evn) => {\n console.log(key, selected, item, evn);\n }}\n />\n </Card>\n </Col>\n <Col fixed>\n <Card title=\"\u591a\u9009\uff0c\u5b50\u8282\u70b9\u53d7\u63a7\">\n <Tree\n data={data}\n multiple\n checkStrictly\n onExpand={(key, expanded, data, node) => {\n console.log(key, expanded, data, node);\n }}\n onSelected={(key, selected, item, evn) => {\n console.log(key, selected, item, evn);\n }}\n />\n </Card>\n </Col>\n </Row>\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u56fe\u6807\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Tree, Card, Row, Col, Icon } from 'uiw';\n\nconst data = [\n {\n label: '\u6e56\u5317\u7701',\n key: '0-0-0',\n children:[\n {\n label: '\u6b66\u6c49\u5e02',\n key: '0-1-0',\n children:[\n { label: '\u65b0\u6d32\u533a', key: '0-1-1' },\n { label: '\u6b66\u660c\u533a', key: '0-1-2' },\n {\n label: '\u6c49\u5357\u533a',\n key: '0-1-3',\n children:[\n { label: '\u6c49\u5357\u533a1', key: '0-1-3-1' },\n { label: '\u6c49\u5357\u533a2', key: '0-1-3-2' },\n { label: '\u6c49\u5357\u533a3', key: '0-1-3-3' },\n ]\n },\n ]\n },\n { label: '\u9ec4\u5188\u5e02', key: '0-2-0' },\n {\n label: '\u9ec4\u77f3\u5e02',\n key: '0-3-0',\n children:[\n { label: '\u9752\u5c71\u533a', key: '0-3-1' },\n { label: '\u9ec4\u9642\u533a', key: '0-3-2' },\n { label: '\u9752\u5c71\u533a', key: '0-3-3' },\n ]\n },\n ]\n },\n {\n label: '\u4e0a\u6d77\u5e02',\n key: '1-0-0',\n children:[\n { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n {\n label: '\u5f90\u6c47\u533a',\n key: '1-0-3',\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: '2-0-0',\n children:[\n { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n {\n label: '\u5d07\u6587\u533a',\n key: '2-3-0',\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n ]\n },\n ]\n }\n];\n\nconst Demo = () => (\n <div>\n <Row gutter={10}>\n <Col fixed>\n <Card title=\"\u6807\u9898\u4e2d\u6dfb\u52a0\u56fe\u6807\">\n <Tree\n data={data}\n renderTitle={(item, { selected, noChild }) => (\n <>\n <Icon style={{ display: '-webkit-inline-box' }} type={noChild ? 'smile-o' : 'apple'} />\n <span>{item.label}</span>\n </>\n )}\n onExpand={(key, expanded, data, node) => {\n console.log(key, expanded, data, node);\n }}\n onSelected={(key, selected, item, evn) => {\n console.log(key, selected, item, evn);\n }}\n />\n </Card>\n </Col>\n <Col fixed>\n <Card title=\"\u66ff\u6362\u9ed8\u8ba4\u6298\u53e0\u56fe\u6807\">\n <Tree\n data={data}\n icon=\"right-circle-o\"\n onExpand={(key, expanded, data, node) => {\n console.log(key, expanded, data, node);\n }}\n onSelected={(key, selected, item, evn) => {\n console.log(key, selected, item, evn);\n }}\n />\n </Card>\n </Col>\n <Col fixed>\n <Card title=\"\u81ea\u5b9a\u4e49\u5c55\u5f00\u56fe\u6807\">\n <Tree\n data={data}\n iconAnimation={false}\n icon={(data, { isOpen, noChild }) => {\n if(isOpen && !noChild) {\n return 'folder-open';\n } else if (!noChild) {\n return 'folder';\n }\n return 'file-text';\n }}\n onExpand={(key, expanded, data) => {\n console.log(key, expanded, data);\n }}\n onSelected={(key, selected, item, evn) => {\n console.log(key, selected, item, evn);\n }}\n />\n </Card>\n </Col>\n </Row>\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u9009\u4e2d\u6548\u679c\n\n\u901a\u8fc7\u8bbe\u7f6e `checkStrictly` \u7236\u8282\u70b9\u53d7\u5b50\u8282\u70b9\u63a7\u5236\uff0c\u8bbe\u7f6e `multiple` \u4e3a\u591a\u9009\uff0c\u8bbe\u7f6e `isSelected` \u53d6\u6d88\u9009\u4e2d\u6548\u679c\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528 [`TreeChecked`](#/components/tree-checked) \u7ec4\u4ef6\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Tree, Card, Row, Col } from 'uiw';\n\nconst data = [\n {\n label: '\u6e56\u5317\u7701',\n key: '0-0-0',\n children:[\n {\n label: '\u6b66\u6c49\u5e02',\n key: '0-1-0',\n children:[\n { label: '\u65b0\u6d32\u533a', key: '0-1-1', disabled: true },\n { label: '\u6b66\u660c\u533a', key: '0-1-2' },\n {\n label: '\u6c49\u5357\u533a',\n key: '0-1-3',\n children:[\n { label: '\u6c49\u5357\u533a1', key: '0-1-3-1' },\n { label: '\u6c49\u5357\u533a2', key: '0-1-3-2' },\n { label: '\u6c49\u5357\u533a3', key: '0-1-3-3' },\n ]\n },\n ]\n },\n { label: '\u9ec4\u5188\u5e02', key: '0-2-0' },\n {\n label: '\u9ec4\u77f3\u5e02',\n key: '0-3-0',\n children:[\n { label: '\u9752\u5c71\u533a', key: '0-3-1' },\n { label: '\u9ec4\u9642\u533a', key: '0-3-2' },\n { label: '\u9752\u5c71\u533a', key: '0-3-3' },\n ]\n },\n ]\n },\n {\n label: '\u4e0a\u6d77\u5e02',\n key: '1-0-0',\n children:[\n { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n {\n label: '\u5f90\u6c47\u533a',\n key: '1-0-3',\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: '2-0-0',\n children:[\n { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n {\n label: '\u5d07\u6587\u533a',\n key: '2-3-0',\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n ]\n },\n ]\n },\n { label: '\u6fb3\u95e8', key: '3' },\n];\n\nconst Demo = () => (\n <div>\n <Tree\n data={data}\n selectedKeys={['0-1-1']}\n multiple\n isSelected={false}\n checkStrictly\n renderTitle={(item, { selected, isHalfChecked }) => {\n if(isHalfChecked) {\n return (\n <><Icon type=\"minus-square-o\" style={{ color: 'green' }} /> <span>{item.label}</span></>\n );\n }\n if (selected) {\n return (\n <><Icon type=\"check-square-o\" style={{ color: 'green' }} /> <span>{item.label}</span></>\n );\n }\n return (\n <><Icon type=\"square-o\" style={{ color: '#b6b6b6' }} /> <span>{item.label}</span></>\n );\n }}\n onExpand={(key, expanded, data, node) => {\n console.log(key, expanded, data, node);\n }}\n onSelected={(key, selected, item, evn) => {\n console.log(key, selected, item, evn);\n }}\n />\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u8fde\u63a5\u7ebf\n\n\u5e26\u8fde\u63a5\u7ebf\u7684\u6811\uff0c\u901a\u8fc7\u8bbe\u7f6e `showLine`\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Tree, Card, Row, Col } from 'uiw';\n\nconst data = [\n {\n label: '\u6e56\u5317\u7701',\n key: '0-0-0',\n children:[\n {\n label: '\u6b66\u6c49\u5e02',\n key: '0-1-0',\n children:[\n { label: '\u65b0\u6d32\u533a', key: '0-1-1' },\n { label: '\u6b66\u660c\u533a', key: '0-1-2' },\n {\n label: '\u6c49\u5357\u533a',\n key: '0-1-3',\n children:[\n { label: '\u6c49\u5357\u533a1', key: '0-1-3-1' },\n { label: '\u6c49\u5357\u533a2', key: '0-1-3-2' },\n { label: '\u6c49\u5357\u533a3', key: '0-1-3-3' },\n ]\n },\n ]\n },\n { label: '\u9ec4\u5188\u5e02', key: '0-2-0' },\n {\n label: '\u9ec4\u77f3\u5e02',\n key: '0-3-0',\n children:[\n { label: '\u9752\u5c71\u533a', key: '0-3-1' },\n { label: '\u9ec4\u9642\u533a', key: '0-3-2' },\n { label: '\u9752\u5c71\u533a', key: '0-3-3' },\n ]\n },\n ]\n },\n {\n label: '\u4e0a\u6d77\u5e02',\n key: '1-0-0',\n children:[\n { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n {\n label: '\u5f90\u6c47\u533a',\n key: '1-0-3',\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: '2-0-0',\n children:[\n { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n {\n label: '\u5d07\u6587\u533a',\n key: '2-3-0',\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n ]\n },\n ]\n }\n];\n\nconst Demo = () => (\n <div>\n <Row gutter={10}>\n <Col fixed>\n <Card title=\"\u81ea\u5b9a\u4e49\u5c55\u5f00\u56fe\u6807\">\n <Tree\n data={data}\n showLine\n iconAnimation={false}\n icon={(data, {isOpen, noChild}) => {\n if(isOpen && !noChild) {\n return 'folder-open';\n } else if (!noChild) {\n return 'folder';\n }\n return 'file-text';\n }}\n onExpand={(key, expanded, data) => {\n console.log(key, expanded, data);\n }}\n onSelected={(key, selected, item, evn) => {\n console.log(key, selected, item, evn);\n }}\n />\n </Card>\n </Col>\n <Col fixed>\n <Card title=\"\u81ea\u5b9a\u4e49\u5c55\u5f00\u56fe\u6807\">\n <Tree\n data={data}\n showLine\n icon={(data, {isOpen, noChild}) => {\n if(noChild) {\n return 'file-text';\n }\n }}\n onExpand={(key, expanded, data) => {\n console.log(key, expanded, data);\n }}\n onSelected={(key, selected, item, evn) => {\n console.log(key, selected, item, evn);\n }}\n />\n </Card>\n </Col>\n </Row>\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u9ed8\u8ba4\u5c55\u5f00\u6811\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Tree, Card, Row, Col } from 'uiw';\n\nconst data = [\n {\n label: '\u6e56\u5317\u7701',\n key: '0-0-0',\n children:[\n {\n label: '\u6b66\u6c49\u5e02',\n key: '0-1-0',\n children:[\n { label: '\u65b0\u6d32\u533a', key: '0-1-1' },\n { label: '\u6b66\u660c\u533a', key: '0-1-2' },\n {\n label: '\u6c49\u5357\u533a',\n key: '0-1-3',\n children:[\n { label: '\u6c49\u5357\u533a1', key: '0-1-3-1' },\n { label: '\u6c49\u5357\u533a2', key: '0-1-3-2' },\n { label: '\u6c49\u5357\u533a3', key: '0-1-3-3' },\n ]\n },\n ]\n },\n { label: '\u9ec4\u5188\u5e02', key: '0-2-0' },\n {\n label: '\u9ec4\u77f3\u5e02',\n key: '0-3-0',\n children:[\n { label: '\u9752\u5c71\u533a', key: '0-3-1' },\n { label: '\u9ec4\u9642\u533a', key: '0-3-2' },\n { label: '\u9752\u5c71\u533a', key: '0-3-3' },\n ]\n },\n ]\n },\n {\n label: '\u4e0a\u6d77\u5e02',\n key: '1-0-0',\n children:[\n { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n {\n label: '\u5f90\u6c47\u533a',\n key: '1-0-3',\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: '2-0-0',\n children:[\n { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n ]\n }\n];\n\nconst Demo = () => (\n <div>\n <Row gutter={10}>\n <Col fixed>\n <Card title=\"\u9ed8\u8ba4\u5c55\u5f00\u90e8\u5206\">\n <Tree\n data={data}\n showLine\n openKeys={['0-0-0', '0-1-0']}\n iconAnimation={false}\n icon={(data, {isOpen, noChild}) => {\n if(isOpen && !noChild) {\n return 'folder-open';\n } else if (!noChild) {\n return 'folder';\n }\n return 'file-text';\n }}\n onExpand={(key, expanded, data) => {\n console.log(key, expanded, data);\n }}\n onSelected={(key, selected, item, evn) => {\n console.log(key, selected, item, evn);\n }}\n />\n </Card>\n </Col>\n <Col fixed>\n <Card title=\"\u5c55\u5f00\u6240\u6709\">\n <Tree\n data={data}\n showLine\n defaultExpandAll\n icon={(data, {isOpen, noChild}) => {\n if(noChild) {\n return 'file-text';\n }\n }}\n onExpand={(key, expanded, data) => {\n console.log(key, expanded, data);\n }}\n onSelected={(key, selected, item, evn) => {\n console.log(key, selected, item, evn);\n }}\n />\n </Card>\n </Col>\n </Row>\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| data | \u5c55\u793a\u6570\u636e | Array | `TreeData[]` |\n| openKeys | \u8282\u70b9\u5c55\u5f00 `key` | Array | `[]` |\n| selectedKeys | \u8bbe\u7f6e\u9009\u4e2d\u7684\u6811\u8282\u70b9 | Array | `[]` |\n| autoExpandParent | \u662f\u5426\u81ea\u52a8\u5c55\u5f00\u7236\u8282\u70b9 | Boolean | `true` |\n| defaultExpandAll | \u9ed8\u8ba4\u5c55\u5f00\u6240\u6709\u6811\u8282\u70b9 | Boolean | `false` |\n| iconAnimation | \u5c55\u5f00\u6536\u7f29\u56fe\u6807\uff0c\u53c2\u6570\u8bbe\u4e3a `false` \u7981\u7528\u52a8\u753b | Boolean | `true` |\n| isSelected | \u662f\u5426\u9009\u4e2d\u5f53\u524d\u8282\u70b9\u6837\u5f0f\u3002 | Boolean | `true` |\n| showLine | \u662f\u5426\u5c55\u793a\u8fde\u63a5\u7ebf | Boolean | `false` |\n| checkStrictly | \u5b50\u8282\u70b9\u53d7\u7236\u8282\u70b9\u63a7\u5236\u8bbe\u7f6e `true`\uff0c\u9700\u8981\u914d\u5408 `multiple` \u53c2\u6570\u4f7f\u7528\u3002 | Boolean | `false` |\n| multiple | \u652f\u6301\u70b9\u9009\u591a\u4e2a\u8282\u70b9 | Boolean | `false` |\n| icon | \u91cd\u65b0\u5b9a\u4e49\uff0c\u5c55\u5f00\u6536\u7f29\u56fe\u6807\uff0c\u5f53\u4e3a\u51fd\u6570\u65f6\u89c6\u4e3a\u81ea\u5b9a\u4e49\u56fe\u6807\uff0c\u5e76\u5c55\u793a\u975e\u6298\u53e0\u9879\u7684\u56fe\u6807\u3002 | ~~Function(data: object, noChild: bool)/String/Node~~ `@3.4.0+` Function(data: object, { selected: bool, noChild: bool })/String/Node| - |\n| renderTitle | \u91cd\u65b0\u5b9a\u4e49\u6bcf\u4e2a\u6807\u9898\u8282\u70b9\u7684\u663e\u793a | ~~Function(item, selected: bool, noChild: bool)~~ `@3.4.0+` Function(item: TreeData, node?: { selected?: boolean, noChild?: boolean, isHalfChecked?: boolean, openKeys?: TreeProps['openKeys'], selectedKeys?: TreeProps['selectedKeys'] }) => React.ReactElement; | - |\n| onSelected | \u70b9\u51fb\u9009\u62e9\u6811\u8282\u70b9\u89e6\u53d1 | Function(selectedKeys: array, key, selected: bool, data, e) | - |\n| onExpand | \u5c55\u5f00/\u6536\u8d77\u8282\u70b9\u65f6\u89e6\u53d1 | Function(key, expanded: bool, data, evn) | - |\n\n### data\n\n```json\n[\n {\n \"label\": \"\u6e56\u5317\u7701\",\n \"key\": \"0-0-0\",\n \"disabled\": false,\n \"children\":[]\n }\n ...\n]\n```\n"}}]);
2
- //# sourceMappingURL=5468.ea87a4b5.chunk.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"static/js/5468.ea87a4b5.chunk.js","mappings":"gHAAA","sources":["../../packages/react-tree/README.md"],"sourcesContent":["export default \"Tree 树形控件\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tree/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-tree.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-tree)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-tree.svg?label=@uiw/react-tree)](https://npmjs.com/@uiw/react-tree)\\n\\n使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。\\n\\n```jsx\\nimport { Tree } from 'uiw';\\n// or\\nimport Tree from '@uiw/react-tree';\\n```\\n\\n### 基础用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tree, Card, Row, Col } from 'uiw';\\n\\nconst data = [\\n {\\n label: '湖北省',\\n key: '0-0-0',\\n children:[\\n {\\n label: '武汉市',\\n key: '0-1-0',\\n children:[\\n { label: '新洲区', key: '0-1-1' },\\n { label: '武昌区', key: '0-1-2' },\\n {\\n label: '汉南区',\\n key: '0-1-3',\\n children:[\\n { label: '汉南区1', key: '0-1-3-1' },\\n { label: '汉南区2', key: '0-1-3-2' },\\n { label: '汉南区3', key: '0-1-3-3' },\\n ]\\n },\\n ]\\n },\\n { label: '黄冈市', key: '0-2-0' },\\n {\\n label: '黄石市',\\n key: '0-3-0',\\n children:[\\n { label: '青山区', key: '0-3-1' },\\n { label: '黄陂区', key: '0-3-2' },\\n { label: '青山区', key: '0-3-3' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '上海市',\\n key: '1-0-0',\\n children:[\\n { label: '黄浦区', key: '1-0-1' },\\n { label: '卢湾区', key: '1-0-2' },\\n {\\n label: '徐汇区',\\n key: '1-0-3',\\n children:[\\n { label: '半淞园路街道', key: '1-1-0' },\\n { label: '南京东路街道', key: '1-2-0' },\\n { label: '外滩街道', key: '1-3-0' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: '2-0-0',\\n children:[\\n { label: '东城区', key: '2-1-0' },\\n { label: '西城区', key: '2-2-0' },\\n {\\n label: '崇文区',\\n key: '2-3-0',\\n children:[\\n { label: '东花市街道', key: '2-3-1' },\\n { label: '体育馆路街道', key: '2-3-2' },\\n { label: '前门街道', key: '2-3-3' },\\n ]\\n },\\n ]\\n }\\n];\\n\\nconst Demo = () => (\\n <div>\\n <Row gutter={10}>\\n <Col fixed>\\n <Card title=\\\"单选\\\">\\n <Tree\\n defaultExpandAll={true}\\n data={data}\\n onExpand={(key, expanded, data, node) => {\\n console.log('onExpand',key, expanded, data, node);\\n }}\\n onSelected={(key, selected, item, evn) => {\\n console.log('onSelected',key, selected, item, evn);\\n }}\\n />\\n </Card>\\n </Col>\\n <Col fixed>\\n <Card title=\\\"多选,子节点不受控\\\">\\n <Tree\\n autoExpandParent={true}\\n data={data}\\n multiple\\n onExpand={(key, expanded, data, node) => {\\n console.log(key, expanded, data, node);\\n }}\\n onSelected={(key, selected, item, evn) => {\\n console.log(key, selected, item, evn);\\n }}\\n />\\n </Card>\\n </Col>\\n <Col fixed>\\n <Card title=\\\"多选,子节点受控\\\">\\n <Tree\\n data={data}\\n multiple\\n checkStrictly\\n onExpand={(key, expanded, data, node) => {\\n console.log(key, expanded, data, node);\\n }}\\n onSelected={(key, selected, item, evn) => {\\n console.log(key, selected, item, evn);\\n }}\\n />\\n </Card>\\n </Col>\\n </Row>\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 自定义图标\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tree, Card, Row, Col, Icon } from 'uiw';\\n\\nconst data = [\\n {\\n label: '湖北省',\\n key: '0-0-0',\\n children:[\\n {\\n label: '武汉市',\\n key: '0-1-0',\\n children:[\\n { label: '新洲区', key: '0-1-1' },\\n { label: '武昌区', key: '0-1-2' },\\n {\\n label: '汉南区',\\n key: '0-1-3',\\n children:[\\n { label: '汉南区1', key: '0-1-3-1' },\\n { label: '汉南区2', key: '0-1-3-2' },\\n { label: '汉南区3', key: '0-1-3-3' },\\n ]\\n },\\n ]\\n },\\n { label: '黄冈市', key: '0-2-0' },\\n {\\n label: '黄石市',\\n key: '0-3-0',\\n children:[\\n { label: '青山区', key: '0-3-1' },\\n { label: '黄陂区', key: '0-3-2' },\\n { label: '青山区', key: '0-3-3' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '上海市',\\n key: '1-0-0',\\n children:[\\n { label: '黄浦区', key: '1-0-1' },\\n { label: '卢湾区', key: '1-0-2' },\\n {\\n label: '徐汇区',\\n key: '1-0-3',\\n children:[\\n { label: '半淞园路街道', key: '1-1-0' },\\n { label: '南京东路街道', key: '1-2-0' },\\n { label: '外滩街道', key: '1-3-0' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: '2-0-0',\\n children:[\\n { label: '东城区', key: '2-1-0' },\\n { label: '西城区', key: '2-2-0' },\\n {\\n label: '崇文区',\\n key: '2-3-0',\\n children:[\\n { label: '东花市街道', key: '2-3-1' },\\n { label: '体育馆路街道', key: '2-3-2' },\\n { label: '前门街道', key: '2-3-3' },\\n ]\\n },\\n ]\\n }\\n];\\n\\nconst Demo = () => (\\n <div>\\n <Row gutter={10}>\\n <Col fixed>\\n <Card title=\\\"标题中添加图标\\\">\\n <Tree\\n data={data}\\n renderTitle={(item, { selected, noChild }) => (\\n <>\\n <Icon style={{ display: '-webkit-inline-box' }} type={noChild ? 'smile-o' : 'apple'} />\\n <span>{item.label}</span>\\n </>\\n )}\\n onExpand={(key, expanded, data, node) => {\\n console.log(key, expanded, data, node);\\n }}\\n onSelected={(key, selected, item, evn) => {\\n console.log(key, selected, item, evn);\\n }}\\n />\\n </Card>\\n </Col>\\n <Col fixed>\\n <Card title=\\\"替换默认折叠图标\\\">\\n <Tree\\n data={data}\\n icon=\\\"right-circle-o\\\"\\n onExpand={(key, expanded, data, node) => {\\n console.log(key, expanded, data, node);\\n }}\\n onSelected={(key, selected, item, evn) => {\\n console.log(key, selected, item, evn);\\n }}\\n />\\n </Card>\\n </Col>\\n <Col fixed>\\n <Card title=\\\"自定义展开图标\\\">\\n <Tree\\n data={data}\\n iconAnimation={false}\\n icon={(data, { isOpen, noChild }) => {\\n if(isOpen && !noChild) {\\n return 'folder-open';\\n } else if (!noChild) {\\n return 'folder';\\n }\\n return 'file-text';\\n }}\\n onExpand={(key, expanded, data) => {\\n console.log(key, expanded, data);\\n }}\\n onSelected={(key, selected, item, evn) => {\\n console.log(key, selected, item, evn);\\n }}\\n />\\n </Card>\\n </Col>\\n </Row>\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 自定义选中效果\\n\\n通过设置 `checkStrictly` 父节点受子节点控制,设置 `multiple` 为多选,设置 `isSelected` 取消选中效果,也可以使用 [`TreeChecked`](#/components/tree-checked) 组件。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tree, Card, Row, Col } from 'uiw';\\n\\nconst data = [\\n {\\n label: '湖北省',\\n key: '0-0-0',\\n children:[\\n {\\n label: '武汉市',\\n key: '0-1-0',\\n children:[\\n { label: '新洲区', key: '0-1-1', disabled: true },\\n { label: '武昌区', key: '0-1-2' },\\n {\\n label: '汉南区',\\n key: '0-1-3',\\n children:[\\n { label: '汉南区1', key: '0-1-3-1' },\\n { label: '汉南区2', key: '0-1-3-2' },\\n { label: '汉南区3', key: '0-1-3-3' },\\n ]\\n },\\n ]\\n },\\n { label: '黄冈市', key: '0-2-0' },\\n {\\n label: '黄石市',\\n key: '0-3-0',\\n children:[\\n { label: '青山区', key: '0-3-1' },\\n { label: '黄陂区', key: '0-3-2' },\\n { label: '青山区', key: '0-3-3' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '上海市',\\n key: '1-0-0',\\n children:[\\n { label: '黄浦区', key: '1-0-1' },\\n { label: '卢湾区', key: '1-0-2' },\\n {\\n label: '徐汇区',\\n key: '1-0-3',\\n children:[\\n { label: '半淞园路街道', key: '1-1-0' },\\n { label: '南京东路街道', key: '1-2-0' },\\n { label: '外滩街道', key: '1-3-0' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: '2-0-0',\\n children:[\\n { label: '东城区', key: '2-1-0' },\\n { label: '西城区', key: '2-2-0' },\\n {\\n label: '崇文区',\\n key: '2-3-0',\\n children:[\\n { label: '东花市街道', key: '2-3-1' },\\n { label: '体育馆路街道', key: '2-3-2' },\\n { label: '前门街道', key: '2-3-3' },\\n ]\\n },\\n ]\\n },\\n { label: '澳门', key: '3' },\\n];\\n\\nconst Demo = () => (\\n <div>\\n <Tree\\n data={data}\\n selectedKeys={['0-1-1']}\\n multiple\\n isSelected={false}\\n checkStrictly\\n renderTitle={(item, { selected, isHalfChecked }) => {\\n if(isHalfChecked) {\\n return (\\n <><Icon type=\\\"minus-square-o\\\" style={{ color: 'green' }} /> <span>{item.label}</span></>\\n );\\n }\\n if (selected) {\\n return (\\n <><Icon type=\\\"check-square-o\\\" style={{ color: 'green' }} /> <span>{item.label}</span></>\\n );\\n }\\n return (\\n <><Icon type=\\\"square-o\\\" style={{ color: '#b6b6b6' }} /> <span>{item.label}</span></>\\n );\\n }}\\n onExpand={(key, expanded, data, node) => {\\n console.log(key, expanded, data, node);\\n }}\\n onSelected={(key, selected, item, evn) => {\\n console.log(key, selected, item, evn);\\n }}\\n />\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 连接线\\n\\n带连接线的树,通过设置 `showLine`。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tree, Card, Row, Col } from 'uiw';\\n\\nconst data = [\\n {\\n label: '湖北省',\\n key: '0-0-0',\\n children:[\\n {\\n label: '武汉市',\\n key: '0-1-0',\\n children:[\\n { label: '新洲区', key: '0-1-1' },\\n { label: '武昌区', key: '0-1-2' },\\n {\\n label: '汉南区',\\n key: '0-1-3',\\n children:[\\n { label: '汉南区1', key: '0-1-3-1' },\\n { label: '汉南区2', key: '0-1-3-2' },\\n { label: '汉南区3', key: '0-1-3-3' },\\n ]\\n },\\n ]\\n },\\n { label: '黄冈市', key: '0-2-0' },\\n {\\n label: '黄石市',\\n key: '0-3-0',\\n children:[\\n { label: '青山区', key: '0-3-1' },\\n { label: '黄陂区', key: '0-3-2' },\\n { label: '青山区', key: '0-3-3' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '上海市',\\n key: '1-0-0',\\n children:[\\n { label: '黄浦区', key: '1-0-1' },\\n { label: '卢湾区', key: '1-0-2' },\\n {\\n label: '徐汇区',\\n key: '1-0-3',\\n children:[\\n { label: '半淞园路街道', key: '1-1-0' },\\n { label: '南京东路街道', key: '1-2-0' },\\n { label: '外滩街道', key: '1-3-0' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: '2-0-0',\\n children:[\\n { label: '东城区', key: '2-1-0' },\\n { label: '西城区', key: '2-2-0' },\\n {\\n label: '崇文区',\\n key: '2-3-0',\\n children:[\\n { label: '东花市街道', key: '2-3-1' },\\n { label: '体育馆路街道', key: '2-3-2' },\\n { label: '前门街道', key: '2-3-3' },\\n ]\\n },\\n ]\\n }\\n];\\n\\nconst Demo = () => (\\n <div>\\n <Row gutter={10}>\\n <Col fixed>\\n <Card title=\\\"自定义展开图标\\\">\\n <Tree\\n data={data}\\n showLine\\n iconAnimation={false}\\n icon={(data, {isOpen, noChild}) => {\\n if(isOpen && !noChild) {\\n return 'folder-open';\\n } else if (!noChild) {\\n return 'folder';\\n }\\n return 'file-text';\\n }}\\n onExpand={(key, expanded, data) => {\\n console.log(key, expanded, data);\\n }}\\n onSelected={(key, selected, item, evn) => {\\n console.log(key, selected, item, evn);\\n }}\\n />\\n </Card>\\n </Col>\\n <Col fixed>\\n <Card title=\\\"自定义展开图标\\\">\\n <Tree\\n data={data}\\n showLine\\n icon={(data, {isOpen, noChild}) => {\\n if(noChild) {\\n return 'file-text';\\n }\\n }}\\n onExpand={(key, expanded, data) => {\\n console.log(key, expanded, data);\\n }}\\n onSelected={(key, selected, item, evn) => {\\n console.log(key, selected, item, evn);\\n }}\\n />\\n </Card>\\n </Col>\\n </Row>\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 默认展开树\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tree, Card, Row, Col } from 'uiw';\\n\\nconst data = [\\n {\\n label: '湖北省',\\n key: '0-0-0',\\n children:[\\n {\\n label: '武汉市',\\n key: '0-1-0',\\n children:[\\n { label: '新洲区', key: '0-1-1' },\\n { label: '武昌区', key: '0-1-2' },\\n {\\n label: '汉南区',\\n key: '0-1-3',\\n children:[\\n { label: '汉南区1', key: '0-1-3-1' },\\n { label: '汉南区2', key: '0-1-3-2' },\\n { label: '汉南区3', key: '0-1-3-3' },\\n ]\\n },\\n ]\\n },\\n { label: '黄冈市', key: '0-2-0' },\\n {\\n label: '黄石市',\\n key: '0-3-0',\\n children:[\\n { label: '青山区', key: '0-3-1' },\\n { label: '黄陂区', key: '0-3-2' },\\n { label: '青山区', key: '0-3-3' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '上海市',\\n key: '1-0-0',\\n children:[\\n { label: '黄浦区', key: '1-0-1' },\\n { label: '卢湾区', key: '1-0-2' },\\n {\\n label: '徐汇区',\\n key: '1-0-3',\\n children:[\\n { label: '半淞园路街道', key: '1-1-0' },\\n { label: '南京东路街道', key: '1-2-0' },\\n { label: '外滩街道', key: '1-3-0' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: '2-0-0',\\n children:[\\n { label: '东城区', key: '2-1-0' },\\n { label: '西城区', key: '2-2-0' },\\n ]\\n }\\n];\\n\\nconst Demo = () => (\\n <div>\\n <Row gutter={10}>\\n <Col fixed>\\n <Card title=\\\"默认展开部分\\\">\\n <Tree\\n data={data}\\n showLine\\n openKeys={['0-0-0', '0-1-0']}\\n iconAnimation={false}\\n icon={(data, {isOpen, noChild}) => {\\n if(isOpen && !noChild) {\\n return 'folder-open';\\n } else if (!noChild) {\\n return 'folder';\\n }\\n return 'file-text';\\n }}\\n onExpand={(key, expanded, data) => {\\n console.log(key, expanded, data);\\n }}\\n onSelected={(key, selected, item, evn) => {\\n console.log(key, selected, item, evn);\\n }}\\n />\\n </Card>\\n </Col>\\n <Col fixed>\\n <Card title=\\\"展开所有\\\">\\n <Tree\\n data={data}\\n showLine\\n defaultExpandAll\\n icon={(data, {isOpen, noChild}) => {\\n if(noChild) {\\n return 'file-text';\\n }\\n }}\\n onExpand={(key, expanded, data) => {\\n console.log(key, expanded, data);\\n }}\\n onSelected={(key, selected, item, evn) => {\\n console.log(key, selected, item, evn);\\n }}\\n />\\n </Card>\\n </Col>\\n </Row>\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| data | 展示数据 | Array | `TreeData[]` |\\n| openKeys | 节点展开 `key` | Array | `[]` |\\n| selectedKeys | 设置选中的树节点 | Array | `[]` |\\n| autoExpandParent | 是否自动展开父节点 | Boolean | `true` |\\n| defaultExpandAll | 默认展开所有树节点 | Boolean | `false` |\\n| iconAnimation | 展开收缩图标,参数设为 `false` 禁用动画 | Boolean | `true` |\\n| isSelected | 是否选中当前节点样式。 | Boolean | `true` |\\n| showLine | 是否展示连接线 | Boolean | `false` |\\n| checkStrictly | 子节点受父节点控制设置 `true`,需要配合 `multiple` 参数使用。 | Boolean | `false` |\\n| multiple | 支持点选多个节点 | Boolean | `false` |\\n| icon | 重新定义,展开收缩图标,当为函数时视为自定义图标,并展示非折叠项的图标。 | ~~Function(data: object, noChild: bool)/String/Node~~ `@3.4.0+` Function(data: object, { selected: bool, noChild: bool })/String/Node| - |\\n| renderTitle | 重新定义每个标题节点的显示 | ~~Function(item, selected: bool, noChild: bool)~~ `@3.4.0+` Function(item: TreeData, node?: { selected?: boolean, noChild?: boolean, isHalfChecked?: boolean, openKeys?: TreeProps['openKeys'], selectedKeys?: TreeProps['selectedKeys'] }) => React.ReactElement; | - |\\n| onSelected | 点击选择树节点触发 | Function(selectedKeys: array, key, selected: bool, data, e) | - |\\n| onExpand | 展开/收起节点时触发 | Function(key, expanded: bool, data, evn) | - |\\n\\n### data\\n\\n```json\\n[\\n {\\n \\\"label\\\": \\\"湖北省\\\",\\n \\\"key\\\": \\\"0-0-0\\\",\\n \\\"disabled\\\": false,\\n \\\"children\\\":[]\\n }\\n ...\\n]\\n```\\n\";"],"names":[],"sourceRoot":""}
@@ -1,2 +0,0 @@
1
- "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6536],{36536:function(n,t,e){e.r(t),t.default='Popover \u6c14\u6ce1\u5361\u7247\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-popover/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-popover.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-popover)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-popover.svg?label=@uiw/react-popover)](https://npmjs.com/@uiw/react-popover)\n\n\u70b9\u51fb/\u9f20\u6807\u79fb\u5165\u5143\u7d20\uff0c\u5f39\u51fa\u6c14\u6ce1\u5f0f\u7684\u5361\u7247\u6d6e\u5c42\u3002\n\n```jsx\nimport { Popover } from \'uiw\';\n// or\nimport Popover from \'@uiw/react-popover\';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n\u6700\u7b80\u5355\u7684\u7528\u6cd5\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Button } from \'uiw\';\n\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n isOpen: false,\n }\n }\n onClick() {\n this.setState({ isOpen: false });\n }\n handleVisibleChange(isOpen) {\n this.setState({ isOpen });\n }\n render() {\n return (\n <div>\n <Popover\n trigger="click"\n placement="top"\n isOpen={this.state.isOpen}\n onVisibleChange={this.handleVisibleChange.bind(this)}\n content={\n <Card bordered={false} title="Card\u6807\u9898" extra={<a href="#">\u66f4\u591a</a>} style={{ width: 200 }}>\n <div>Are you sure you want to delete these items? You won\'t be able to recover them.</div>\n <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>\n <Button size="small" onClick={this.onClick.bind(this)}>\n Cancel\n </Button>\n <Button type="danger" size="small" onClick={this.onClick.bind(this)}>\n Delete\n </Button>\n </div>\n </Card>\n }\n >\n <Button active={this.state.isOpen}>\u5f39\u51fa\u76ee\u6807</Button>\n </Popover>\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4f4d\u7f6e\n\n\u4f4d\u7f6e\u6709 `12` \u4e2a\u65b9\u5411\uff0c\u6839\u636e `placement` \u53c2\u6570\u6765\u8bbe\u7f6e\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Button } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst content = (\n <Card bordered={false} style={{ width: 120 }}>\n <div>Are you sure you want to delete these items? You won\'t be able to recover them.</div>\n </Card>\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### \u9f20\u6807\u7ecf\u8fc7\u5f39\u51fa\u76ee\u6807\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Button } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst content = (\n <Card\n style={{ width: 220 }}\n bordered={false}\n title="Card\u6807\u9898"\n footer={\n <span>\u8fd9\u91cc\u662f\u9875\u811a</span>\n }\n >\n <div>\u8fd9\u662f\u4f60\u9f20\u6807\u7ecf\u8fc7\u5f39\u51fa\u7684\u76ee\u6807\u3002</div>\n </Card>\n)\nconst Demo = () => (\n <div>\n <Popover trigger="hover" placement="top" content={content}>\n <Button>\u9f20\u6807\u7ecf\u8fc7\u5f39\u51fa\u76ee\u6807</Button>\n </Popover>\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u7126\u70b9\u5c55\u793a\n\n\u901a\u8fc7\u8bbe\u7f6e `trigger="focus"` \u8ba9 `Input` \u7ec4\u4ef6\u5728\u83b7\u53d6\u7126\u70b9\u7684\u65f6\u5019\u5c55\u793a `Popover`\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Button, Input } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n isOpen: false,\n value: \'\',\n }\n }\n onClick(val) {\n const state = { isOpen: false }\n if (val) {\n state.value = val;\n }\n if (val === null) state.value = \'\';\n this.setState({ ...state });\n }\n handleVisibleChange(isOpen) {\n this.setState({ isOpen });\n }\n onChange(e) {\n this.setState({ value: e.target.value });\n }\n renderPopup() {\n return (\n <Card\n style={{ width: 220 }}\n bordered={false}\n footer={\n <div style={{ display: "flex", justifyContent: "flex-end" }}>\n <Button size="small" onClick={this.onClick.bind(this, undefined)}>\n \u53d6\u6d88\n </Button>\n <Button size="small" onClick={this.onClick.bind(this, null)}>\n \u6e05\u7a7a\n </Button>\n <Button type="success" size="small" onClick={this.onClick.bind(this, \'\u8fd9\u662f\u5411 Input \u8f93\u5165\u6846\u63d2\u5165\u7684\u5185\u5bb9\')}>\n \u63d2\u5165\u5185\u5bb9\n </Button>\n </div>\n }\n >\n <div>\u901a\u8fc7\u8bbe\u7f6e `trigger="focus"` \u8ba9 `Input` \u7ec4\u4ef6\u5728\u83b7\u53d6\u7126\u70b9\u7684\u65f6\u5019\u5c55\u793a `Popover`</div>\n </Card>\n )\n }\n render() {\n return (\n <div>\n <div style={{ width: 200 }}>\n <Popover\n trigger="focus"\n placement="top"\n isOpen={this.state.isOpen}\n onVisibleChange={this.handleVisibleChange.bind(this)}\n content={this.renderPopup()}\n >\n <Input placeholder="\u8bf7\u8f93\u5165\u5185\u5bb9" value={this.state.value} onChange={this.onChange.bind(this)}/>\n </Popover>\n </div>\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### usePortal\n\n\u8bbe\u7f6e `usePortal={false}` \u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u91cc\u9762\uff0c\u8fd9\u6837\u4e3a\u4e86\u8ba1\u7b97\u4f4d\u7f6e\u51c6\u786e\uff0c\u4f60\u9700\u8981\u5c06\u7236\u5c42\u6837\u5f0f\u8bbe\u4e3a `position: relative;` \u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Button } from \'uiw\';\n\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n isOpen: false,\n }\n }\n onClick() {\n this.setState({ isOpen: false });\n }\n handleVisibleChange(isOpen) {\n this.setState({ isOpen });\n }\n render() {\n return (\n <div>\n <div style={{ position: \'relative\' }}>\n <Popover\n trigger="click"\n placement="right"\n usePortal={false}\n isOpen={this.state.isOpen}\n onVisibleChange={this.handleVisibleChange.bind(this)}\n content={\n <Card bordered={false} title="Card\u6807\u9898" extra={<a href="#">\u66f4\u591a</a>} style={{ width: 200 }}>\n <div>Are you sure you want to delete these items? You won\'t be able to recover them.</div>\n <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>\n <Button size="small" onClick={this.onClick.bind(this)}>\n Cancel\n </Button>\n <Button type="danger" size="small" onClick={this.onClick.bind(this)}>\n Delete\n </Button>\n </div>\n </Card>\n }\n >\n <Button>\u5f39\u51fa\u76ee\u6807</Button>\n </Popover>\n </div>\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| content | \u663e\u793a\u7684\u5185\u5bb9 | String,React.ReactNode | - |\n| placement | \u6c14\u6ce1\u6846\u4f4d\u7f6e\uff0c\u53ef\u73b0\u5b9e\u7bad\u5934\u5728\u4e0d\u540c\u7684\u65b9\u4f4d | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\n| visibleArrow | \u662f\u5426\u663e\u793a\u7bad\u5934 | Boolean | `true` |\n| delay | \u5ef6\u8fdf\u8fdb\u5165\u548c\u6d88\u5931\uff0c`{ show: 2000, hide: 4000 }` \u6216\u8005\u76f4\u63a5\u8bbe\u7f6e `2000`\uff0c\u53ea\u5bf9 `trigger=hover` \u6709\u6548\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Object/Number | - |\n| trigger| \u60ac\u505c/\u70b9\u51fb\u5f39\u51fa\u7a97\u53e3\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Enum{`hover`, `click`, `focus`} | `hover` |\n| disabled | \u662f\u5426\u7981\u7528\u5f39\u51fa\u76ee\u6807 | Boolean | `false` |\n| isOpen | \u9ed8\u8ba4\u662f\u5426\u663e\u793a\u5f39\u7a97\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Boolean | `false` |\n| autoAdjustOverflow | \u5f39\u51fa\u5c42\u88ab\u906e\u6321\u65f6\u81ea\u52a8\u8c03\u6574\u4f4d\u7f6e\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Boolean | `false` |\n| onVisibleChange | \u663e\u793a\u9690\u85cf\u7684\u56de\u8c03\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Function(isVisible:bool) | - |\n\n\u66f4\u591a\u5c5e\u6027\u8bf7\u53c2\u8003 [OverlayTrigger](#/components/overlay-trigger)\u3002'}}]);
2
- //# sourceMappingURL=6536.6aaaba5b.chunk.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"static/js/6536.6aaaba5b.chunk.js","mappings":"gHAAA","sources":["../../packages/react-popover/README.md"],"sourcesContent":["export default \"Popover 气泡卡片\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-popover/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-popover.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-popover)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-popover.svg?label=@uiw/react-popover)](https://npmjs.com/@uiw/react-popover)\\n\\n点击/鼠标移入元素,弹出气泡式的卡片浮层。\\n\\n```jsx\\nimport { Popover } from 'uiw';\\n// or\\nimport Popover from '@uiw/react-popover';\\n```\\n\\n### 基础用法\\n\\n最简单的用法。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor() {\\n super();\\n this.state = {\\n isOpen: false,\\n }\\n }\\n onClick() {\\n this.setState({ isOpen: false });\\n }\\n handleVisibleChange(isOpen) {\\n this.setState({ isOpen });\\n }\\n render() {\\n return (\\n <div>\\n <Popover\\n trigger=\\\"click\\\"\\n placement=\\\"top\\\"\\n isOpen={this.state.isOpen}\\n onVisibleChange={this.handleVisibleChange.bind(this)}\\n content={\\n <Card bordered={false} title=\\\"Card标题\\\" extra={<a href=\\\"#\\\">更多</a>} style={{ width: 200 }}>\\n <div>Are you sure you want to delete these items? You won't be able to recover them.</div>\\n <div style={{ display: \\\"flex\\\", justifyContent: \\\"flex-end\\\", marginTop: 15 }}>\\n <Button size=\\\"small\\\" onClick={this.onClick.bind(this)}>\\n Cancel\\n </Button>\\n <Button type=\\\"danger\\\" size=\\\"small\\\" onClick={this.onClick.bind(this)}>\\n Delete\\n </Button>\\n </div>\\n </Card>\\n }\\n >\\n <Button active={this.state.isOpen}>弹出目标</Button>\\n </Popover>\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 位置\\n\\n位置有 `12` 个方向,根据 `placement` 参数来设置。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Button } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nconst content = (\\n <Card bordered={false} style={{ width: 120 }}>\\n <div>Are you sure you want to delete these items? You won't be able to recover them.</div>\\n </Card>\\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<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Button } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nconst content = (\\n <Card\\n style={{ width: 220 }}\\n bordered={false}\\n title=\\\"Card标题\\\"\\n footer={\\n <span>这里是页脚</span>\\n }\\n >\\n <div>这是你鼠标经过弹出的目标。</div>\\n </Card>\\n)\\nconst Demo = () => (\\n <div>\\n <Popover trigger=\\\"hover\\\" placement=\\\"top\\\" content={content}>\\n <Button>鼠标经过弹出目标</Button>\\n </Popover>\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 焦点展示\\n\\n通过设置 `trigger=\\\"focus\\\"` 让 `Input` 组件在获取焦点的时候展示 `Popover`\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Button, Input } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nclass Demo extends React.Component {\\n constructor() {\\n super();\\n this.state = {\\n isOpen: false,\\n value: '',\\n }\\n }\\n onClick(val) {\\n const state = { isOpen: false }\\n if (val) {\\n state.value = val;\\n }\\n if (val === null) state.value = '';\\n this.setState({ ...state });\\n }\\n handleVisibleChange(isOpen) {\\n this.setState({ isOpen });\\n }\\n onChange(e) {\\n this.setState({ value: e.target.value });\\n }\\n renderPopup() {\\n return (\\n <Card\\n style={{ width: 220 }}\\n bordered={false}\\n footer={\\n <div style={{ display: \\\"flex\\\", justifyContent: \\\"flex-end\\\" }}>\\n <Button size=\\\"small\\\" onClick={this.onClick.bind(this, undefined)}>\\n 取消\\n </Button>\\n <Button size=\\\"small\\\" onClick={this.onClick.bind(this, null)}>\\n 清空\\n </Button>\\n <Button type=\\\"success\\\" size=\\\"small\\\" onClick={this.onClick.bind(this, '这是向 Input 输入框插入的内容')}>\\n 插入内容\\n </Button>\\n </div>\\n }\\n >\\n <div>通过设置 `trigger=\\\"focus\\\"` 让 `Input` 组件在获取焦点的时候展示 `Popover`</div>\\n </Card>\\n )\\n }\\n render() {\\n return (\\n <div>\\n <div style={{ width: 200 }}>\\n <Popover\\n trigger=\\\"focus\\\"\\n placement=\\\"top\\\"\\n isOpen={this.state.isOpen}\\n onVisibleChange={this.handleVisibleChange.bind(this)}\\n content={this.renderPopup()}\\n >\\n <Input placeholder=\\\"请输入内容\\\" value={this.state.value} onChange={this.onChange.bind(this)}/>\\n </Popover>\\n </div>\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### usePortal\\n\\n设置 `usePortal={false}` 将模态对话框生成到根节点的里面,这样为了计算位置准确,你需要将父层样式设为 `position: relative;` 。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor() {\\n super();\\n this.state = {\\n isOpen: false,\\n }\\n }\\n onClick() {\\n this.setState({ isOpen: false });\\n }\\n handleVisibleChange(isOpen) {\\n this.setState({ isOpen });\\n }\\n render() {\\n return (\\n <div>\\n <div style={{ position: 'relative' }}>\\n <Popover\\n trigger=\\\"click\\\"\\n placement=\\\"right\\\"\\n usePortal={false}\\n isOpen={this.state.isOpen}\\n onVisibleChange={this.handleVisibleChange.bind(this)}\\n content={\\n <Card bordered={false} title=\\\"Card标题\\\" extra={<a href=\\\"#\\\">更多</a>} style={{ width: 200 }}>\\n <div>Are you sure you want to delete these items? You won't be able to recover them.</div>\\n <div style={{ display: \\\"flex\\\", justifyContent: \\\"flex-end\\\", marginTop: 15 }}>\\n <Button size=\\\"small\\\" onClick={this.onClick.bind(this)}>\\n Cancel\\n </Button>\\n <Button type=\\\"danger\\\" size=\\\"small\\\" onClick={this.onClick.bind(this)}>\\n Delete\\n </Button>\\n </div>\\n </Card>\\n }\\n >\\n <Button>弹出目标</Button>\\n </Popover>\\n </div>\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| content | 显示的内容 | String,React.ReactNode | - |\\n| placement | 气泡框位置,可现实箭头在不同的方位 | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\\n| visibleArrow | 是否显示箭头 | Boolean | `true` |\\n| delay | 延迟进入和消失,`{ show: 2000, hide: 4000 }` 或者直接设置 `2000`,只对 `trigger=hover` 有效,继承 `<OverlayTrigger />` 组件属性 | Object/Number | - |\\n| trigger| 悬停/点击弹出窗口,继承 `<OverlayTrigger />` 组件属性 | Enum{`hover`, `click`, `focus`} | `hover` |\\n| disabled | 是否禁用弹出目标 | Boolean | `false` |\\n| isOpen | 默认是否显示弹窗,继承 `<OverlayTrigger />` 组件属性 | Boolean | `false` |\\n| autoAdjustOverflow | 弹出层被遮挡时自动调整位置,继承 `<OverlayTrigger />` 组件属性 | Boolean | `false` |\\n| onVisibleChange | 显示隐藏的回调,继承 `<OverlayTrigger />` 组件属性 | Function(isVisible:bool) | - |\\n\\n更多属性请参考 [OverlayTrigger](#/components/overlay-trigger)。\";"],"names":[],"sourceRoot":""}
@@ -1,2 +0,0 @@
1
- "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7313],{67313:function(e,n,t){t.r(n),n.default="SearchSelect \u641c\u7d22\u9009\u62e9\u5668\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-select.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-select)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?label=@uiw/react-search-select)](https://npmjs.com/@uiw/react-search-select)\n\n\u641c\u7d22\u9009\u62e9\u5668\n\n```jsx\nimport { SearchSelect } from 'uiw';\n// or\nimport SearchSelect from '@uiw/react-search-select';\n```\n\n## \u57fa\u7840\u793a\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect } from 'uiw';\n\nconst Demo = () => {\n const selectOption=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n const [value, setValue] = React.useState([{label: 'a8', value: 8}]);\n function handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n setOption();\n setLoading(false);\n }, 2000);\n }\n return(\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 176 }}\n showSearch={true}\n labelInValue={true}\n maxTagCount={6}\n allowClear\n value={value}\n disabled={false}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n onSearch={handleSearch}\n // onSelect={(value)=>console.log('onSelect',value)}\n loading={loading}\n option={option}\n onChange={(value) => {\n console.log('value',value)\n setValue(value)\n }}\n />\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 `<SearchSelect />` \u7ec4\u4ef6\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';\n\nconst Demo = () => {\n const [option, setOption] = React.useState([]);\n const [loading, setLoading] = React.useState(false);\n function handleSearch(e) {\n console.log('handleSearch',e)\n setLoading(true)\n setTimeout(() => {\n setOption([\n { label: 'a', value: 2 },\n { label: 'aa', value: 3 },\n { label: 'aaa', value: 4 },\n ]);\n setLoading(false);\n }, 2000);\n }\n\n return (\n <div>\n <Form\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (!current.selectField) {\n errorObj.selectField = '\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n throw err;\n }\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n selectField: {\n children: (\n <SearchSelect\n showSearch={true}\n allowClear\n disabled={false}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n onSearch={handleSearch}\n onChange={(v)=>{\n console.log('onChange',v)\n }}\n option={option}\n loading={loading}\n />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row>\n <Col fixed>{fields.selectField}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: 10, marginTop: 10 }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n );\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c | \u7248\u672c |\n| ---- | ---- | ---- | ---- | ---- |\n| allowClear | \u652f\u6301\u6e05\u9664 | Boolean | `false` | - |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` | - |\n| mode | \u9009\u62e9\u6a21\u5f0f: `multiple` `single` | String | `single` | - |\n| defaultValue | \u6307\u5b9a\u9ed8\u8ba4\u9009\u4e2d\u7684\u6761\u76ee | String/Number | - | - |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee\uff0c\u591a\u9009\u65f6\u4e3a\u4e00\u4e2a\u6570\u7ec4 | String \\| Number \\| String[] \\| Number[] \\| LabeledValue \\| LabeledValue[] | - | - |\n| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - | - |\n| maxTagCount | \u591a\u9009\u6a21\u5f0f\u4e0b\u5c55\u793atag\u7684\u4e2a\u6570,\u9ed8\u8ba4\u6240\u6709 | number | - | - |\n| labelInValue | \u5f00\u542f\u4f1a\u628a Select \u7684 value \u7c7b\u578b\u4ece `string/number` \u53d8\u4e3a `{ value: string/number, label: string }` | Boolean | `false` | - |\n| showSearch | \u4f7f\u5355\u9009\u6a21\u5f0f\u53ef\u641c\u7d22 | Boolean | - | - |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum{large, default, small } | `default` | - |\n| tagProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Tag>`](https://uiwjs.github.io/#/components/tag) \u7ec4\u4ef6 | `TagProps` | `{}` | `4.13.0` |\n| onChange | \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 | function(value:String \\| Number \\| String[] \\| Number[] \\| LabeledValue \\| LabeledValue[]) | - | - |\n| onSearch | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 | function(value: String) | - | - |\n| onSelect | \u88ab\u9009\u4e2d\u65f6\u8c03\u7528\uff0c\u53c2\u6570\u4e3a\u9009\u4e2d\u9879\u7684 value | function(value: String/Number ) | - | - |\n| loading | \u52a0\u8f7d\u4e2d\u72b6\u6001 | Boolean | `false` | - |\n"}}]);
2
- //# sourceMappingURL=7313.18ac2eb2.chunk.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"static/js/7313.18ac2eb2.chunk.js","mappings":"gHAAA","sources":["../../packages/react-search-select/README.md"],"sourcesContent":["export default \"SearchSelect 搜索选择器\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-select.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-select)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?label=@uiw/react-search-select)](https://npmjs.com/@uiw/react-search-select)\\n\\n搜索选择器\\n\\n```jsx\\nimport { SearchSelect } from 'uiw';\\n// or\\nimport SearchSelect from '@uiw/react-search-select';\\n```\\n\\n## 基础示例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n const [value, setValue] = React.useState([{label: 'a8', value: 8}]);\\n function handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n setOption();\\n setLoading(false);\\n }, 2000);\\n }\\n return(\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 176 }}\\n showSearch={true}\\n labelInValue={true}\\n maxTagCount={6}\\n allowClear\\n value={value}\\n disabled={false}\\n placeholder=\\\"请输入选择\\\"\\n onSearch={handleSearch}\\n // onSelect={(value)=>console.log('onSelect',value)}\\n loading={loading}\\n option={option}\\n onChange={(value) => {\\n console.log('value',value)\\n setValue(value)\\n }}\\n />\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 在表单中使用\\n\\n在 [`<Form />`](#/components/form) 表单中应用 `<SearchSelect />` 组件。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';\\n\\nconst Demo = () => {\\n const [option, setOption] = React.useState([]);\\n const [loading, setLoading] = React.useState(false);\\n function handleSearch(e) {\\n console.log('handleSearch',e)\\n setLoading(true)\\n setTimeout(() => {\\n setOption([\\n { label: 'a', value: 2 },\\n { label: 'aa', value: 3 },\\n { label: 'aaa', value: 4 },\\n ]);\\n setLoading(false);\\n }, 2000);\\n }\\n\\n return (\\n <div>\\n <Form\\n onSubmitError={(error) => {\\n if (error.filed) {\\n return { ...error.filed };\\n }\\n return null;\\n }}\\n onSubmit={({initial, current}) => {\\n const errorObj = {};\\n if (!current.selectField) {\\n errorObj.selectField = '默认需要选择内容,选择入内容';\\n }\\n if(Object.keys(errorObj).length > 0) {\\n const err = new Error();\\n err.filed = errorObj;\\n Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });\\n throw err;\\n }\\n Notify.success({\\n title: '提交成功!',\\n description: `表单提交成功,选择值为:${current.selectField},将自动填充初始化值!`,\\n });\\n }}\\n fields={{\\n selectField: {\\n children: (\\n <SearchSelect\\n showSearch={true}\\n allowClear\\n disabled={false}\\n placeholder=\\\"请输入选择\\\"\\n onSearch={handleSearch}\\n onChange={(v)=>{\\n console.log('onChange',v)\\n }}\\n option={option}\\n loading={loading}\\n />\\n )\\n },\\n }}\\n >\\n {({ fields, state, canSubmit }) => {\\n return (\\n <div>\\n <Row>\\n <Col fixed>{fields.selectField}</Col>\\n </Row>\\n <Row>\\n <Col fixed>\\n <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n </Col>\\n </Row>\\n <Row>\\n <Col>\\n <pre style={{ padding: 10, marginTop: 10 }}>\\n {JSON.stringify(state.current, null, 2)}\\n </pre>\\n </Col>\\n </Row>\\n </div>\\n )\\n }}\\n </Form>\\n </div>\\n );\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\\n| ---- | ---- | ---- | ---- | ---- |\\n| allowClear | 支持清除 | Boolean | `false` | - |\\n| disabled | 禁用选择器 | Boolean | `false` | - |\\n| mode | 选择模式: `multiple` `single` | String | `single` | - |\\n| defaultValue | 指定默认选中的条目 | String/Number | - | - |\\n| value | 指定当前选中的条目,多选时为一个数组 | String \\\\| Number \\\\| String[] \\\\| Number[] \\\\| LabeledValue \\\\| LabeledValue[] | - | - |\\n| placeholder | 选择框默认文字 | String | - | - |\\n| maxTagCount | 多选模式下展示tag的个数,默认所有 | number | - | - |\\n| labelInValue | 开启会把 Select 的 value 类型从 `string/number` 变为 `{ value: string/number, label: string }` | Boolean | `false` | - |\\n| showSearch | 使单选模式可搜索 | Boolean | - | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` | - |\\n| tagProps | 将参数传递给 [`<Tag>`](https://uiwjs.github.io/#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |\\n| onChange | 选中 option,或 input 的 value,调用此函数 | function(value:String \\\\| Number \\\\| String[] \\\\| Number[] \\\\| LabeledValue \\\\| LabeledValue[]) | - | - |\\n| onSearch | 文本框值变化时回调 | function(value: String) | - | - |\\n| onSelect | 被选中时调用,参数为选中项的 value | function(value: String/Number ) | - | - |\\n| loading | 加载中状态 | Boolean | `false` | - |\\n\";"],"names":[],"sourceRoot":""}
@@ -1,2 +0,0 @@
1
- "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[766],{80766:function(e,n,l){l.r(n),n.default="SearchTree \u5e26\u641c\u7d22\u7684Tree\u9009\u62e9\u63a7\u4ef6\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-tree.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-tree)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-tree.svg?label=@uiw/react-search-tree)](https://npmjs.com/@uiw/react-search-tree)\n\n\u4f7f\u7528\u6811\u9009\u62e9\u63a7\u4ef6\u53ef\u4ee5\u5b8c\u6574\u5c55\u73b0\u5176\u4e2d\u7684\u5c42\u7ea7\u5173\u7cfb\uff0c\u5e76\u5177\u6709\u9009\u4e2d\u72b6\u6001\u3002\u65b0\u7ec4\u4ef6 v4.11.7+ \u652f\u6301\u3002\n\n```jsx\nimport { SearchTree } from 'uiw';\n// or\nimport SearchTree from '@uiw/react-search-tree';\n```\n\n### \u57fa\u7840\u5b9e\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { SearchTree } from 'uiw';\n\nconst data = [\n {\n label: '\u4e0a\u6d77\u5e02',\n key: '1-0-0',\n children:[\n { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n {\n label: '\u5f90\u6c47\u533a',\n key: '1-0-3',\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: '2-0-0',\n children:[\n { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n {\n label: '\u5d07\u6587\u533a',\n key: '2-3-0',\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n ]\n },\n ]\n },\n { label: '\u6fb3\u95e8', key: '3' },\n];\n\nconst datas =[\n { label: '\u4e0a\u6d77\u5e02', key: 0 },\n { label: '\u5317\u4eac\u5e02', key: 1 },\n { label: '\u6210\u90fd\u5e02', key: 2 },\n]\n\nconst Demo = () => {\n\nconst [value,valueSet]=useState([{ label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' }])\nconst [values,valuesSet]=useState([{ label: '\u5317\u4eac\u5e02', key: 1 }])\nconst [valueSinge,valueSingeSet]=useState([{ label: '\u4e0a\u6d77\u5e02', key: '1-0-0' }])\n\nconst onChange=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\n valueSet(selectedAll)\n}\n\nconst onChanges=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\n valuesSet(selectedAll)\n}\n\nconst onChangeSinge=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\n valueSingeSet(selectedAll)\n}\n\n return (\n <>\n <Row>\n <Col >\n <label>\u591a\u9009</label>\n <SearchTree\n style={{width:400}}\n allowClear={true}\n onSearch={(searchValue)=>console.log('multiple',searchValue)}\n onChange={onChange}\n value={value}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n </Col>\n </Row>\n <label>\u5355\u9009</label>\n <Row>\n <Col>\n <SearchTree\n style={{width:400}}\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('singe',searchValue)}\n onChange={onChanges}\n value={values}\n options={datas}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n </Col>\n <Col>\n <SearchTree\n style={{width:400}}\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('singe',searchValue)}\n onChange={onChangeSinge}\n value={valueSinge}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n </Col>\n </Row>\n </>\n )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u81ea\u5b9a\u4e49\u7a7a\u9009\u9879\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree } from 'uiw';\n\nconst Demo = () => {\n return(\n <>\n <SearchTree style={{ width:200 }} />\n <SearchTree\n style={{ width:200,marginTop:5 }}\n emptyOption={<span>\u6682\u65e0\u6570\u636e..</span>}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n </>\n )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Form\u4e2d\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Form, Button, SearchTree, Card, Row, Col } from 'uiw';;\n\n\nconst Demo = () => {\nconst form=useRef()\n\n const data = [\n {\n label: '\u4e0a\u6d77\u5e02',\n key: '1-0-0',\n children:[\n { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n {\n label: '\u5f90\u6c47\u533a',\n key: '1-0-3',\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: '2-0-0',\n children:[\n { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n {\n label: '\u5d07\u6587\u533a',\n key: '2-3-0',\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n ]\n },\n ]\n },\n { label: '\u6fb3\u95e8', key: '3' },\n ];\n\n const setValue=()=>{\n form.current.setFields({\n searchTree: [{ label: '\u4e1c\u57ce\u533a', key: '2-1-0' }, { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' }],\n searchTreeSinge:[{ label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' }]\n })\n }\n\n const resetValue=()=>{\n form.current.resetForm()\n }\n\n return (\n <div>\n <Form\n ref={form}\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (!current.searchTree) {\n errorObj.searchTree = '\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n throw err;\n }\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n searchTree: {\n initialValue:[{ label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },{ label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' }],\n children: (\n <SearchTree\n allowClear={true}\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n )\n },\n searchTreeSinge: {\n initialValue:[{ label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' }],\n children: (\n <SearchTree\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row>\n <Col fixed>{fields.searchTree}</Col>\n </Row>\n <Row>\n <Col fixed>{fields.searchTreeSinge}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n <Button onClick={setValue} type=\"primary\" >setValue</Button>\n <Button onClick={resetValue} type=\"primary\" >\u91cd\u7f6e</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: 10, marginTop: 10 }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n );\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| allowClear | \u652f\u6301\u6e05\u9664 | Boolean | `false` |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` |\n| multiple | \u662f\u5426\u53ef\u4ee5\u591a\u9009 | Boolean | `true` |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee | [{label:string, key:string}] | - |\n| options | \u4e0b\u62c9\u6570\u636e\u6e90,\u53ef\u53c2\u8003Tree\u4e0b\u62c9\u6570\u636e\u6e90 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\n| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum{large, default, small } | `default` |\n| onChange | \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 | function(selectd, selectdAll, isChecked)=>void | - |\n| onSearch | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 | function(searchValue) | - |\n| loading | \u52a0\u8f7d\u4e2d\u72b6\u6001 | Boolean | `false` |\n| emptyOption | \u81ea\u5b9a\u4e49\u4e0b\u62c9\u9009\u9879\u4e3a\u7a7a\u65f6\u663e\u793a\u5185\u5bb9 | React.ReactNode | [Empty](https://uiwjs.github.io/#/components/empty) |\n\n"}}]);
2
- //# sourceMappingURL=766.d3dd7e64.chunk.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"static/js/766.d3dd7e64.chunk.js","mappings":"+GAAA","sources":["../../packages/react-search-tree/README.md"],"sourcesContent":["export default \"SearchTree 带搜索的Tree选择控件\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-tree.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-tree)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-tree.svg?label=@uiw/react-search-tree)](https://npmjs.com/@uiw/react-search-tree)\\n\\n使用树选择控件可以完整展现其中的层级关系,并具有选中状态。新组件 v4.11.7+ 支持。\\n\\n```jsx\\nimport { SearchTree } from 'uiw';\\n// or\\nimport SearchTree from '@uiw/react-search-tree';\\n```\\n\\n### 基础实例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { SearchTree } from 'uiw';\\n\\nconst data = [\\n {\\n label: '上海市',\\n key: '1-0-0',\\n children:[\\n { label: '黄浦区', key: '1-0-1' },\\n { label: '卢湾区', key: '1-0-2' },\\n {\\n label: '徐汇区',\\n key: '1-0-3',\\n children:[\\n { label: '半淞园路街道', key: '1-1-0' },\\n { label: '南京东路街道', key: '1-2-0' },\\n { label: '外滩街道', key: '1-3-0' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: '2-0-0',\\n children:[\\n { label: '东城区', key: '2-1-0' },\\n { label: '西城区', key: '2-2-0' },\\n {\\n label: '崇文区',\\n key: '2-3-0',\\n children:[\\n { label: '东花市街道', key: '2-3-1' },\\n { label: '体育馆路街道', key: '2-3-2' },\\n { label: '前门街道', key: '2-3-3' },\\n ]\\n },\\n ]\\n },\\n { label: '澳门', key: '3' },\\n];\\n\\nconst datas =[\\n { label: '上海市', key: 0 },\\n { label: '北京市', key: 1 },\\n { label: '成都市', key: 2 },\\n]\\n\\nconst Demo = () => {\\n\\nconst [value,valueSet]=useState([{ label: '东花市街道', key: '2-3-1' }])\\nconst [values,valuesSet]=useState([{ label: '北京市', key: 1 }])\\nconst [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])\\n\\nconst onChange=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\\n valueSet(selectedAll)\\n}\\n\\nconst onChanges=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\\n valuesSet(selectedAll)\\n}\\n\\nconst onChangeSinge=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\\n valueSingeSet(selectedAll)\\n}\\n\\n return (\\n <>\\n <Row>\\n <Col >\\n <label>多选</label>\\n <SearchTree\\n style={{width:400}}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('multiple',searchValue)}\\n onChange={onChange}\\n value={value}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n </Col>\\n </Row>\\n <label>单选</label>\\n <Row>\\n <Col>\\n <SearchTree\\n style={{width:400}}\\n multiple={false}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('singe',searchValue)}\\n onChange={onChanges}\\n value={values}\\n options={datas}\\n placeholder=\\\"请输入选择\\\"\\n />\\n </Col>\\n <Col>\\n <SearchTree\\n style={{width:400}}\\n multiple={false}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('singe',searchValue)}\\n onChange={onChangeSinge}\\n value={valueSinge}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n </Col>\\n </Row>\\n </>\\n )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自定义空选项\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport { SearchTree } from 'uiw';\\n\\nconst Demo = () => {\\n return(\\n <>\\n <SearchTree style={{ width:200 }} />\\n <SearchTree\\n style={{ width:200,marginTop:5 }}\\n emptyOption={<span>暂无数据..</span>}\\n placeholder=\\\"请输入选择\\\"\\n />\\n </>\\n )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Form中使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Form, Button, SearchTree, Card, Row, Col } from 'uiw';;\\n\\n\\nconst Demo = () => {\\nconst form=useRef()\\n\\n const data = [\\n {\\n label: '上海市',\\n key: '1-0-0',\\n children:[\\n { label: '黄浦区', key: '1-0-1' },\\n { label: '卢湾区', key: '1-0-2' },\\n {\\n label: '徐汇区',\\n key: '1-0-3',\\n children:[\\n { label: '半淞园路街道', key: '1-1-0' },\\n { label: '南京东路街道', key: '1-2-0' },\\n { label: '外滩街道', key: '1-3-0' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: '2-0-0',\\n children:[\\n { label: '东城区', key: '2-1-0' },\\n { label: '西城区', key: '2-2-0' },\\n {\\n label: '崇文区',\\n key: '2-3-0',\\n children:[\\n { label: '东花市街道', key: '2-3-1' },\\n { label: '体育馆路街道', key: '2-3-2' },\\n { label: '前门街道', key: '2-3-3' },\\n ]\\n },\\n ]\\n },\\n { label: '澳门', key: '3' },\\n ];\\n\\n const setValue=()=>{\\n form.current.setFields({\\n searchTree: [{ label: '东城区', key: '2-1-0' }, { label: '外滩街道', key: '1-3-0' }],\\n searchTreeSinge:[{ label: '前门街道', key: '2-3-3' }]\\n })\\n }\\n\\n const resetValue=()=>{\\n form.current.resetForm()\\n }\\n\\n return (\\n <div>\\n <Form\\n ref={form}\\n onSubmitError={(error) => {\\n if (error.filed) {\\n return { ...error.filed };\\n }\\n return null;\\n }}\\n onSubmit={({initial, current}) => {\\n const errorObj = {};\\n if (!current.searchTree) {\\n errorObj.searchTree = '默认需要选择内容,选择入内容';\\n }\\n if(Object.keys(errorObj).length > 0) {\\n const err = new Error();\\n err.filed = errorObj;\\n Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });\\n throw err;\\n }\\n Notify.success({\\n title: '提交成功!',\\n description: `表单提交成功,选择值为:${current.selectField},将自动填充初始化值!`,\\n });\\n }}\\n fields={{\\n searchTree: {\\n initialValue:[{ label: '东花市街道', key: '2-3-1' },{ label: '前门街道', key: '2-3-3' }],\\n children: (\\n <SearchTree\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n )\\n },\\n searchTreeSinge: {\\n initialValue:[{ label: '东花市街道', key: '2-3-1' }],\\n children: (\\n <SearchTree\\n multiple={false}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n )\\n },\\n }}\\n >\\n {({ fields, state, canSubmit }) => {\\n return (\\n <div>\\n <Row>\\n <Col fixed>{fields.searchTree}</Col>\\n </Row>\\n <Row>\\n <Col fixed>{fields.searchTreeSinge}</Col>\\n </Row>\\n <Row>\\n <Col fixed>\\n <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n <Button onClick={setValue} type=\\\"primary\\\" >setValue</Button>\\n <Button onClick={resetValue} type=\\\"primary\\\" >重置</Button>\\n </Col>\\n </Row>\\n <Row>\\n <Col>\\n <pre style={{ padding: 10, marginTop: 10 }}>\\n {JSON.stringify(state.current, null, 2)}\\n </pre>\\n </Col>\\n </Row>\\n </div>\\n )\\n }}\\n </Form>\\n </div>\\n );\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| allowClear | 支持清除 | Boolean | `false` |\\n| disabled | 禁用选择器 | Boolean | `false` |\\n| multiple | 是否可以多选 | Boolean | `true` |\\n| value | 指定当前选中的条目 | [{label:string, key:string}] | - |\\n| options | 下拉数据源,可参考Tree下拉数据源 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\\n| placeholder | 选择框默认文字 | String | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` |\\n| onChange | 选中 option,或 input 的 value,调用此函数 | function(selectd, selectdAll, isChecked)=>void | - |\\n| onSearch | 文本框值变化时回调 | function(searchValue) | - |\\n| loading | 加载中状态 | Boolean | `false` |\\n| emptyOption | 自定义下拉选项为空时显示内容 | React.ReactNode | [Empty](https://uiwjs.github.io/#/components/empty) |\\n\\n\";"],"names":[],"sourceRoot":""}
@@ -1,2 +0,0 @@
1
- "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9188],{49188:function(e,n,t){t.r(n),n.default="Progress \u8fdb\u5ea6\u6761\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-progress/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-progress.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-progress)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-progress.svg?label=@uiw/react-progress)](https://npmjs.com/@uiw/react-progress)\n\n\u7528\u4e8e\u5c55\u793a\u64cd\u4f5c\u8fdb\u5ea6\uff0c\u544a\u77e5\u7528\u6237\u5f53\u524d\u72b6\u6001\u548c\u9884\u671f\u3002\n\n```jsx\nimport { Progress } from 'uiw';\nconst { Line, Circle } = Progress;\n// or\nimport Progress from '@uiw/react-progress'; \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 { Progress } from 'uiw';\n\nconst { Line } = Progress;\nconst sty = {marginBottom:10}\nconst Demo = () => (\n <div>\n <Progress.Line style={sty} percent={30} />\n <Line style={sty} percent={50} status=\"active\" />\n <Line style={sty} percent={70} status=\"exception\" />\n <Line style={sty} percent={100} />\n <Line style={sty} percent={50} showText={false} />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u8fdb\u5ea6\u6761\u5927\u5c0f\u8bbe\u7f6e\n\n\u8bbe\u7f6e\u53c2\u6570`strokeWidth`\u5373\u53ef\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Progress } from 'uiw';\n\nconst { Line } = Progress;\nconst sty = {marginBottom:10}\nconst Demo = () => (\n <div>\n <Progress.Line style={sty} strokeWidth={6} percent={30} />\n <Line style={sty} strokeWidth={14} percent={50} status=\"active\" />\n <Line style={sty} strokeWidth={18} percent={70} status=\"exception\" />\n <Line style={sty} strokeWidth={12} percent={100} />\n <Line style={sty} strokeWidth={14} percent={50} showText={false} />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5706\u5708\u8fdb\u5ea6\u6761\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Progress } from 'uiw';\n\nconst { Circle } = Progress;\nconst sty = {marginBottom:10}\nconst Demo = () => (\n <div>\n <Progress.Circle style={sty} percent={30} />\n <Circle style={sty} percent={75} />\n <Circle style={sty} percent={70} status=\"exception\" />\n <Circle style={sty} percent={100} />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4e0d\u540c\u5c3a\u5bf8\u5706\u5708\u8fdb\u5ea6\u6761\n\n\u901a\u8fc7`strokeWidth`\u8bbe\u7f6e\u5706\u5708\u8fdb\u5ea6\u5bbd\u5e26\uff0c\u901a\u8fc7`width`\uff08`type=\"circle\"`\u6709\u6548\uff09\u8bbe\u7f6e\u5706\u5708\u5927\u5c0f\uff0c\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Progress } from 'uiw';\n\nlet sty = {marginRight:15}\nconst Demo = () => (\n <div>\n <Progress.Circle style={sty} width={80} strokeWidth={2} percent={30} />\n <Progress.Circle style={sty} width={100} strokeWidth={10} percent={75} />\n <Progress.Circle style={sty} percent={70} status=\"exception\" />\n <Progress.Circle style={sty} width={100} strokeWidth={3} percent={75} />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u52a8\u6001\u5c55\u793a\n\n\u8fdb\u5ea6\u6761\u52a8\u6001\u5c55\u793a\u66f4\u76f4\u89c2\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Progress } from 'uiw';\n\nclass Demo extends React.Component {\n constructor(props){\n super(props);\n this.state = {\n percent: 50,\n }\n }\n increase(){\n let percent = this.state.percent + 10;\n if (percent > 100) {\n percent = 100;\n }\n this.setState({ percent });\n }\n decline(){\n let percent = this.state.percent - 10;\n if (percent < 0) {\n percent = 0;\n }\n this.setState({ percent });\n }\n render() {\n let sty = {marginRight:15}\n return (\n <div style={{maxWidth:400}}>\n <Progress.Line percent={this.state.percent} />\n <Progress.Circle percent={this.state.percent} />\n <div>\n <button onClick={this.decline.bind(this)}>minus -</button>\n <button onClick={this.increase.bind(this)}>plus +</button>\n </div>\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u81ea\u5b9a\u4e49\u6587\u5b57\u683c\u5f0f\n\n`format` \u5c5e\u6027\u6307\u5b9a\u683c\u5f0f\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Progress } from 'uiw';\n\nconst sty = {marginRight:10}\nclass Demo extends React.Component {\n render() {\n return (\n <div>\n <Progress.Circle style={sty} percent={80} type=\"circle\" format={percent => (\n <span>\n {`${percent} %`}\n <div style={{padding:\"10px 0 0 0\",fontSize:21}}>\u5df2\u5b8c\u6210</div>\n </span>\n )}/>\n <Progress.Circle style={sty} percent={70} status=\"exception\" type=\"circle\" format={percent => (\n <span>\n {`${percent} %`}\n <div style={{padding:\"10px 0 0 0\",fontSize:21}}>\u5df2\u5173\u95ed</div>\n </span>\n )}/>\n <Progress.Circle style={sty} percent={100} type=\"circle\" format={percent => `\u5df2\u5b8c\u6210`}/>\n <Progress.Line style={sty} percent={70} format={percent => `${percent}\u2103`}/>\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n## API\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|------ |-------- |---------- |-------- |\n| percent | \u767e\u5206\u6bd4 | Number | `0` |\n| showText | \u662f\u5426\u663e\u793a\u8fdb\u5ea6\u6761\u6587\u5b57\u5185\u5bb9 | Boolean | `true` |\n| format | \u5185\u5bb9\u7684\u6a21\u677f\u51fd\u6570\uff0c\u81ea\u5b9a\u4e49\u6587\u5b57\u683c\u5f0f\u3002 | Function | - |\n| strokeWidth | \u8fdb\u5ea6\u6761\u7ebf\u7684\u5bbd\u5ea6 | Number | `6` |\n| width | \u5706\u5f62\u8fdb\u5ea6\u6761\u753b\u5e03\u5bbd\u5ea6\uff0c\u5355\u4f4d px ,`type=\"circle\"`\u6709\u6548| Number | `126` |\n| status | \u72b6\u6001\uff0c\u53ef\u9009\uff1a`success` `exception` `active` | Enum{'`success`', '`exception`'} | - |\n"}}]);
2
- //# sourceMappingURL=9188.636af533.chunk.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"static/js/9188.636af533.chunk.js","mappings":"gHAAA","sources":["../../packages/react-progress/README.md"],"sourcesContent":["export default \"Progress 进度条\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-progress/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-progress.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-progress)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-progress.svg?label=@uiw/react-progress)](https://npmjs.com/@uiw/react-progress)\\n\\n用于展示操作进度,告知用户当前状态和预期。\\n\\n```jsx\\nimport { Progress } from 'uiw';\\nconst { Line, Circle } = Progress;\\n// or\\nimport Progress from '@uiw/react-progress'; \\n```\\n\\n### 基本用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Progress } from 'uiw';\\n\\nconst { Line } = Progress;\\nconst sty = {marginBottom:10}\\nconst Demo = () => (\\n <div>\\n <Progress.Line style={sty} percent={30} />\\n <Line style={sty} percent={50} status=\\\"active\\\" />\\n <Line style={sty} percent={70} status=\\\"exception\\\" />\\n <Line style={sty} percent={100} />\\n <Line style={sty} percent={50} showText={false} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 进度条大小设置\\n\\n设置参数`strokeWidth`即可\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Progress } from 'uiw';\\n\\nconst { Line } = Progress;\\nconst sty = {marginBottom:10}\\nconst Demo = () => (\\n <div>\\n <Progress.Line style={sty} strokeWidth={6} percent={30} />\\n <Line style={sty} strokeWidth={14} percent={50} status=\\\"active\\\" />\\n <Line style={sty} strokeWidth={18} percent={70} status=\\\"exception\\\" />\\n <Line style={sty} strokeWidth={12} percent={100} />\\n <Line style={sty} strokeWidth={14} percent={50} showText={false} />\\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 { Progress } from 'uiw';\\n\\nconst { Circle } = Progress;\\nconst sty = {marginBottom:10}\\nconst Demo = () => (\\n <div>\\n <Progress.Circle style={sty} percent={30} />\\n <Circle style={sty} percent={75} />\\n <Circle style={sty} percent={70} status=\\\"exception\\\" />\\n <Circle style={sty} percent={100} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 不同尺寸圆圈进度条\\n\\n通过`strokeWidth`设置圆圈进度宽带,通过`width`(`type=\\\"circle\\\"`有效)设置圆圈大小,\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Progress } from 'uiw';\\n\\nlet sty = {marginRight:15}\\nconst Demo = () => (\\n <div>\\n <Progress.Circle style={sty} width={80} strokeWidth={2} percent={30} />\\n <Progress.Circle style={sty} width={100} strokeWidth={10} percent={75} />\\n <Progress.Circle style={sty} percent={70} status=\\\"exception\\\" />\\n <Progress.Circle style={sty} width={100} strokeWidth={3} percent={75} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 动态展示\\n\\n进度条动态展示更直观。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Progress } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor(props){\\n super(props);\\n this.state = {\\n percent: 50,\\n }\\n }\\n increase(){\\n let percent = this.state.percent + 10;\\n if (percent > 100) {\\n percent = 100;\\n }\\n this.setState({ percent });\\n }\\n decline(){\\n let percent = this.state.percent - 10;\\n if (percent < 0) {\\n percent = 0;\\n }\\n this.setState({ percent });\\n }\\n render() {\\n let sty = {marginRight:15}\\n return (\\n <div style={{maxWidth:400}}>\\n <Progress.Line percent={this.state.percent} />\\n <Progress.Circle percent={this.state.percent} />\\n <div>\\n <button onClick={this.decline.bind(this)}>minus -</button>\\n <button onClick={this.increase.bind(this)}>plus +</button>\\n </div>\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自定义文字格式\\n\\n`format` 属性指定格式。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Progress } from 'uiw';\\n\\nconst sty = {marginRight:10}\\nclass Demo extends React.Component {\\n render() {\\n return (\\n <div>\\n <Progress.Circle style={sty} percent={80} type=\\\"circle\\\" format={percent => (\\n <span>\\n {`${percent} %`}\\n <div style={{padding:\\\"10px 0 0 0\\\",fontSize:21}}>已完成</div>\\n </span>\\n )}/>\\n <Progress.Circle style={sty} percent={70} status=\\\"exception\\\" type=\\\"circle\\\" format={percent => (\\n <span>\\n {`${percent} %`}\\n <div style={{padding:\\\"10px 0 0 0\\\",fontSize:21}}>已关闭</div>\\n </span>\\n )}/>\\n <Progress.Circle style={sty} percent={100} type=\\\"circle\\\" format={percent => `已完成`}/>\\n <Progress.Line style={sty} percent={70} format={percent => `${percent}℃`}/>\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n## API\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|------ |-------- |---------- |-------- |\\n| percent | 百分比 | Number | `0` |\\n| showText | 是否显示进度条文字内容 | Boolean | `true` |\\n| format | 内容的模板函数,自定义文字格式。 | Function | - |\\n| strokeWidth | 进度条线的宽度 | Number | `6` |\\n| width | 圆形进度条画布宽度,单位 px ,`type=\\\"circle\\\"`有效| Number | `126` |\\n| status | 状态,可选:`success` `exception` `active` | Enum{'`success`', '`exception`'} | - |\\n\";"],"names":[],"sourceRoot":""}