@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.
- package/package.json +1 -1
- package/web/CONTRIBUTORS.svg +7 -7
- package/web/asset-manifest.json +24 -24
- package/web/index.html +1 -1
- package/web/static/css/{main.74129d99.css → main.16434244.css} +2 -2
- package/web/static/css/main.16434244.css.map +1 -0
- package/web/static/js/{2316.eee2d477.chunk.js → 2316.de77050f.chunk.js} +2 -2
- package/web/static/js/2316.de77050f.chunk.js.map +1 -0
- package/web/static/js/2854.ff43f045.chunk.js +3 -0
- package/web/static/js/{2854.377c4863.chunk.js.LICENSE.txt → 2854.ff43f045.chunk.js.LICENSE.txt} +0 -0
- package/web/static/js/2854.ff43f045.chunk.js.map +1 -0
- package/web/static/js/{5393.8729db46.chunk.js → 5393.b105bd5e.chunk.js} +2 -2
- package/web/static/js/5393.b105bd5e.chunk.js.map +1 -0
- package/web/static/js/5468.462bf55f.chunk.js +2 -0
- package/web/static/js/5468.462bf55f.chunk.js.map +1 -0
- package/web/static/js/6536.8d9d4af6.chunk.js +2 -0
- package/web/static/js/6536.8d9d4af6.chunk.js.map +1 -0
- package/web/static/js/7313.558b6522.chunk.js +2 -0
- package/web/static/js/7313.558b6522.chunk.js.map +1 -0
- package/web/static/js/766.c8931dff.chunk.js +2 -0
- package/web/static/js/766.c8931dff.chunk.js.map +1 -0
- package/web/static/js/{8768.2b6b6aab.chunk.js → 8768.5facbb82.chunk.js} +2 -2
- package/web/static/js/{8768.2b6b6aab.chunk.js.map → 8768.5facbb82.chunk.js.map} +1 -1
- package/web/static/js/9188.b7ce0cf2.chunk.js +2 -0
- package/web/static/js/9188.b7ce0cf2.chunk.js.map +1 -0
- package/web/static/js/main.0e545723.js +2 -0
- package/web/static/js/main.0e545723.js.map +1 -0
- package/web/static/css/main.74129d99.css.map +0 -1
- package/web/static/js/2316.eee2d477.chunk.js.map +0 -1
- package/web/static/js/2854.377c4863.chunk.js +0 -3
- package/web/static/js/2854.377c4863.chunk.js.map +0 -1
- package/web/static/js/5393.8729db46.chunk.js.map +0 -1
- package/web/static/js/5468.ea87a4b5.chunk.js +0 -2
- package/web/static/js/5468.ea87a4b5.chunk.js.map +0 -1
- package/web/static/js/6536.6aaaba5b.chunk.js +0 -2
- package/web/static/js/6536.6aaaba5b.chunk.js.map +0 -1
- package/web/static/js/7313.18ac2eb2.chunk.js +0 -2
- package/web/static/js/7313.18ac2eb2.chunk.js.map +0 -1
- package/web/static/js/766.d3dd7e64.chunk.js +0 -2
- package/web/static/js/766.d3dd7e64.chunk.js.map +0 -1
- package/web/static/js/9188.636af533.chunk.js +0 -2
- package/web/static/js/9188.636af533.chunk.js.map +0 -1
- package/web/static/js/main.b8836d2a.js +0 -2
- 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[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tree/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-tree)\n[](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[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tree/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-tree)\\n[](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[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-popover/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-popover)\n[](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[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-popover/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-popover)\\n[](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[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-search-select)\n[](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[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-search-select)\\n[](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[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-search-tree)\n[](https://npmjs.com/@uiw/react-search-tree)\n\n\u4f7f\u7528\u6811\u9009\u62e9\u63a7\u4ef6\u53ef\u4ee5\u5b8c\u6574\u5c55\u73b0\u5176\u4e2d\u7684\u5c42\u7ea7\u5173\u7cfb\uff0c\u5e76\u5177\u6709\u9009\u4e2d\u72b6\u6001\u3002\u65b0\u7ec4\u4ef6 v4.11.7+ \u652f\u6301\u3002\n\n```jsx\nimport { SearchTree } from 'uiw';\n// or\nimport SearchTree from '@uiw/react-search-tree';\n```\n\n### \u57fa\u7840\u5b9e\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { SearchTree } from 'uiw';\n\nconst data = [\n {\n label: '\u4e0a\u6d77\u5e02',\n key: '1-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[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-search-tree)\\n[](https://npmjs.com/@uiw/react-search-tree)\\n\\n使用树选择控件可以完整展现其中的层级关系,并具有选中状态。新组件 v4.11.7+ 支持。\\n\\n```jsx\\nimport { SearchTree } from 'uiw';\\n// or\\nimport SearchTree from '@uiw/react-search-tree';\\n```\\n\\n### 基础实例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { SearchTree } from 'uiw';\\n\\nconst data = [\\n {\\n label: '上海市',\\n key: '1-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[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-progress/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-progress)\n[](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[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-progress/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-progress)\\n[](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":""}
|