@uiw/doc 4.21.16 → 4.21.18
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 +8 -6
- package/web/asset-manifest.json +18 -18
- package/web/index.html +1 -1
- package/web/static/css/{main.e615d578.css → main.7b5a1775.css} +2 -2
- package/web/static/css/main.7b5a1775.css.map +1 -0
- package/web/static/js/2717.a19136b6.js +3 -0
- package/web/static/js/{2784.03a44aed.js.LICENSE.txt → 2717.a19136b6.js.LICENSE.txt} +10 -15
- package/web/static/js/2717.a19136b6.js.map +1 -0
- package/web/static/js/4505.127ecd1b.chunk.js +3 -0
- package/web/static/js/{4505.541dfa8b.chunk.js.LICENSE.txt → 4505.127ecd1b.chunk.js.LICENSE.txt} +0 -0
- package/web/static/js/4505.127ecd1b.chunk.js.map +1 -0
- package/web/static/js/{5244.ec455612.chunk.js → 5244.38bcd057.chunk.js} +2 -2
- package/web/static/js/5244.38bcd057.chunk.js.map +1 -0
- package/web/static/js/{8768.5facbb82.chunk.js → 8768.0ea7e6a3.chunk.js} +2 -2
- package/web/static/js/{8768.5facbb82.chunk.js.map → 8768.0ea7e6a3.chunk.js.map} +1 -1
- package/web/static/js/main.75cd82a3.js +2 -0
- package/web/static/js/main.75cd82a3.js.map +1 -0
- package/web/static/js/vendors-react.8f806757.js +3 -0
- package/web/static/js/{vendors-react.a09f50fb.js.LICENSE.txt → vendors-react.8f806757.js.LICENSE.txt} +16 -13
- package/web/static/js/vendors-react.8f806757.js.map +1 -0
- package/web/static/css/main.e615d578.css.map +0 -1
- package/web/static/js/2784.03a44aed.js +0 -3
- package/web/static/js/2784.03a44aed.js.map +0 -1
- package/web/static/js/4505.541dfa8b.chunk.js +0 -3
- package/web/static/js/4505.541dfa8b.chunk.js.map +0 -1
- package/web/static/js/5244.ec455612.chunk.js.map +0 -1
- package/web/static/js/main.113a91e8.js +0 -2
- package/web/static/js/main.113a91e8.js.map +0 -1
- package/web/static/js/vendors-react.a09f50fb.js +0 -3
- package/web/static/js/vendors-react.a09f50fb.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5244],{84934:function(e){function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=function(){return[]},n.resolve=n,n.id=84934,e.exports=n},86082:function(e,n,t){"use strict";t.d(n,{Z:function(){return b}});var r=t(50189),o=t(53782),i=t(11026),
|
|
2
|
-
//# sourceMappingURL=5244.
|
|
1
|
+
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5244],{84934:function(e){function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=function(){return[]},n.resolve=n,n.id=84934,e.exports=n},86082:function(e,n,t){"use strict";t.d(n,{Z:function(){return b}});var r=t(50189),o=t(53782),i=t(11026),s=t(41473),c=t(87313),d=t(75752),a=t(11705),u=t(69286),l=["version","dependencies","codePen","codeSandbox"];function p(e){var n=e.version,t=e.dependencies,i=e.codePen,s=e.codeSandbox,c=(0,o.Z)(e,l),d=(0,r.Z)({},c);return i&&(d.codePenOption={title:"uiw".concat(n," - demo"),includeModule:["uiw"],js:(d.code||"").replace("_mount_",'document.getElementById("container")'),html:'<div id="container" style="padding: 24px"></div>',css_external:"https://unpkg.com/uiw@".concat(n,"/dist/uiw.min.css"),js_external:"https://unpkg.com/react@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@".concat(n,"/dist/uiw.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.1.3/index.js")}),s&&(d.codeSandboxOption={files:{"sandbox.config.json":{content:'{\n "template": "node",\n "container": {\n "startScript": "start",\n "node": "14"\n }\n }'},"public/index.html":{content:'<div id="container"></div>'},"src/index.js":{content:(d.code||"").replace("_mount_",'document.getElementById("container")')},".kktrc.js":{content:'import lessModules from "@kkt/less-modules";\nexport default (conf, env, options) => {\nconf = lessModules(conf, env, options);\nreturn conf;\n};'},"package.json":{content:{name:"uiw-demo",description:"uiw v".concat(n," - demo"),dependencies:{react:"^17.0.2","react-dom":"^17.0.2",uiw:"latest"},devDependencies:{"@kkt/less-modules":"~7.1.1",kkt:"~7.1.5"},license:"MIT",scripts:{start:"kkt start",build:"kkt build",test:"kkt test --env=jsdom"},browserslist:[">0.2%","not dead","not ie <= 11","not op_mini all"]}}}}),(0,u.jsx)(a.Z,(0,r.Z)((0,r.Z)({},d),{},{dependencies:t,style:{marginBottom:0}}))}var h=t(36131);function f(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.path,t=/^http/.test(n||"")?n:"https://github.com/uiwjs/uiw/blob/master/".concat(n);return(0,u.jsxs)(s.Fragment,{children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",t&&(0,u.jsx)("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,u.jsx)("br",{}),(0,u.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}var m="index_docinfo__3Vx8S",v="index_markdown__hcQCp",k=["inline","node"],x=function e(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return n.forEach((function(n){"text"===n.type?t+=n.value:n.children&&Array.isArray(n.children)&&(t+=e(n.children))})),t};function b(e){var n=e.renderPage,t=e.dependencies,a=e.path,l=(0,s.useState)(""),h=(0,i.Z)(l,2),b=h[0],j=h[1],g=d.i8||"2.0.0";return(0,s.useEffect)((function(){n&&n().then((function(e){j(e)})).catch((function(){}))}),[]),b?(0,u.jsxs)("div",{children:[(0,u.jsx)(c.Z,{source:b,className:v,components:{code:function(e){var n=e.inline,i=e.node,s=(0,o.Z)(e,k),c=s,d=c.noPreview,a=c.bordered,l=c.noScroll,h=c.bgWhite,f=c.noCode,m=c.codePen,v=c.codeSandbox;if(n)return(0,u.jsx)("code",(0,r.Z)({},s));var b={noPreview:d,bordered:a,noScroll:l,bgWhite:h,noCode:f,codePen:m,codeSandbox:v};return 0===Object.keys(b).filter((function(e){return void 0!==b[e]})).length?(0,u.jsx)("code",(0,r.Z)({},s)):(0,u.jsx)(p,{version:g,code:x(i.children),dependencies:t,noPreview:d,bordered:a,noScroll:l,bgWhite:h,noCode:f,codePen:m,codeSandbox:v})}}}),(0,u.jsx)("div",{className:m,children:(0,u.jsx)(f,{path:a})})]}):null}},91339:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return a}});var r=t(11092),o=t(27791),i=t(41473),s=t(36131),c=t(86082),d=t(69286);function a(){return(0,d.jsx)(c.Z,{path:"https://github.com/uiwjs/uiw/tree/master/packages/react-file-input/README.md",dependencies:{FileInput:s.FileInput,Button:s.Button,Overlay:s.Overlay,Icon:s.Icon,Form:s.Form,Row:s.Row,Col:s.Col,useRef:i.useRef},renderPage:(0,o.Z)((0,r.Z)().mark((function e(){var n;return(0,r.Z)().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.e(8768).then(t.bind(t,78768));case 2:return n=e.sent,e.abrupt("return",n.default||n);case 4:case"end":return e.stop()}}),e)})))})}}}]);
|
|
2
|
+
//# sourceMappingURL=5244.38bcd057.chunk.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"static/js/5244.38bcd057.chunk.js","mappings":"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","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/file-input/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, { useRef } from 'react';\nimport { FileInput, Overlay, Button, Icon, Form, Row, Col } from 'uiw';\nimport Markdown from '../../../components/Markdown';\n\nexport default function Page() {\n return (\n <Markdown\n path=\"https://github.com/uiwjs/uiw/tree/master/packages/react-file-input/README.md\"\n dependencies={{ FileInput, Button, Overlay, Icon, Form, Row, Col, useRef }}\n renderPage={async () => {\n const md = await import('uiw/node_modules/@uiw/react-file-input/README.md');\n return md.default || md;\n }}\n />\n );\n}\n"],"names":["webpackEmptyContext","req","e","Error","code","keys","resolve","id","module","exports","Code","version","dependencies","codePen","codeSandbox","other","props","codePenOption","title","includeModule","js","replace","html","css_external","js_external","codeSandboxOption","files","content","name","description","react","uiw","devDependencies","kkt","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","Page","FileInput","Button","Overlay","Icon","Form","Row","Col","useRef","md","default"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8768],{78768:function(n,e,t){t.r(e),e.default="FileInput \u4e0a\u4f20\u8f93\u5165\u6846\n===\n\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-file-input/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-file-input)\n[](https://npmjs.com/@uiw/react-file-input)\n\n\u8fd9\u4e2a\u7ec4\u4ef6\u4ec5\u4ec5\u662f\u5bf9 `<input type=\"file\">` \u7684\u7f8e\u5316\uff0c\u4ed6\u662f\u57fa\u4e8e Input \u7ec4\u4ef6\u5c01\u88c5 \u3002\n\n```jsx\nimport { FileInput } from 'uiw';\n// or\nimport FileInput from '@uiw/react-file-input';\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 { FileInput, Button } from 'uiw';\n\nconst Demo = () => {\n const onChange = (e) => {\n console.log(e)\n }\n return (\n <div>\n <FileInput multiple=\"multiple\" style={{ maxWidth: 200 }} size=\"small\" onChange={onChange} />\n <br />\n <FileInput multiple=\"multiple\" style={{ maxWidth: 200 }} />\n <br />\n </div>\n )\n}\n\nReactDOM.render(\n <Demo />,\n _mount_\n);\n```\n\n### \u56fe\u7247\u5899\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { FileInput, Button } from 'uiw';\n\nconst Demo = () => {\n return (\n <div>\n <FileInput\n uploadType=\"card\"\n size=\"large\"\n showFileIcon={{\n showPreviewIcon: false,\n showRemoveIcon: true\n }}\n onPreview={(file) => console.log(file)}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4'}\n ]}\n onChange={(items) => console.log(items)}\n >\n <Icon type=\"plus\" />\n </FileInput>\n <br />\n <FileInput\n uploadType=\"card\"\n shape=\"circle\"\n showFileIcon={{\n showPreviewIcon: false,\n showRemoveIcon: true\n }}\n onPreview={(file) => console.log(file)}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4'}\n ]}\n onChange={(items) => console.log(items)}\n >\n <Icon type=\"plus\" />\n </FileInput>\n <br />\n <FileInput\n uploadType=\"card\"\n size=\"small\"\n showFileIcon={{\n showPreviewIcon: false,\n showRemoveIcon: true\n }}\n onPreview={(file) => console.log(file)}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4'}\n ]}\n onChange={(items) => console.log(items)}\n >\n <Icon type=\"plus\" />\n </FileInput>\n </div>\n )\n}\n\nReactDOM.render(\n <Demo />,\n _mount_\n);\n```\n\n### \u56fe\u7247\u9884\u89c8\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { FileInput, Overlay } from 'uiw';\n\nconst Demo=()=>{\n const [visible,visibleSet]=React.useState(false)\n const [curfile,curFileSet]=React.useState(null)\n console.log('curfile',curfile)\n\n return(\n <>\n <Overlay\n isOpen={visible}\n onClosed={()=>visibleSet(false)}\n >\n <img src={`${curfile?.dataURL}`} alt={`${curfile?.name}`} />\n </Overlay>\n <FileInput\n uploadType=\"picture\"\n size=\"large\"\n onPreview={(file) =>{\n visibleSet(true)\n curFileSet(file)\n }}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\n ]}\n >\n <Icon type=\"plus\" />\n </FileInput>\n </>\n )\n}\n\nReactDOM.render(<Demo/> ,_mount_\n);\n```\n\n### \u56fe\u7247\u5217\u8868\u6837\u5f0f\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { FileInput, Button } from 'uiw';\n\nReactDOM.render(\n <div>\n <FileInput\n uploadType=\"picture\"\n size=\"large\"\n onPreview={() => console.log(234)}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\n ]}\n >\n <Button>\u65b0\u589e</Button>\n </FileInput>\n <br />\n <FileInput\n uploadType=\"picture\"\n shape=\"circle\"\n onPreview={() => console.log(234)}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\n ]}\n >\n <Button>\u65b0\u589e</Button>\n </FileInput>\n <br />\n <FileInput\n uploadType=\"picture\"\n size=\"small\"\n onPreview={() => console.log(234)}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\n ]}\n >\n <Button>\u65b0\u589e</Button>\n </FileInput>\n <br />\n <FileInput\n uploadType=\"text\"\n multiple\n maxNumber={2}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\n ]}\n >\n <Button>\u65b0\u589e</Button>\n </FileInput>\n </div>,\n _mount_\n);\n```\n\n### \u5728`Form`\u8868\u5355\u4e2d\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Row, Col, Icon } from 'uiw';\n\nReactDOM.render(\n <div>\n <Form\n onSubmit={({initial, current}) => {\n console.log('current',current)\n }}\n fields={{\n picture1: {\n label: '\u56fe\u7247\u5899',\n initialValue: [\n {\n dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'\n }\n ],\n children: (\n <FileInput uploadType=\"card\">\n <Icon type=\"plus\" />\n </FileInput>\n )\n },\n picture2: {\n label: '\u56fe\u7247\u5217\u8868',\n initialValue: [\n {\n dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'\n }\n ],\n children: (\n <FileInput uploadType=\"picture\">\n <Button>\u65b0\u589e</Button>\n </FileInput>\n )\n },\n picture3: {\n label: '\u56fe\u7247\u540d\u79f0\u5217\u8868',\n children: (\n <FileInput uploadType=\"text\">\n <Button>\u65b0\u589e</Button>\n </FileInput>\n )\n },\n }}>\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row>\n <Col>{fields.picture1}</Col>\n </Row>\n <Row>\n <Col>{fields.picture2}</Col>\n </Row>\n <Row>\n <Col>{fields.picture3}</Col>\n </Row>\n <Row gutter={10}>\n <Col>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: '10px 0 0 10px' }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>,\n _mount_\n);\n```\n\n## Props\n\n- `uploadType: input` \u57fa\u7840\u8f93\u5165\u6846\u4e0a\u4f20\n\n- `uploadType: picture` \u56fe\u7247\u5217\u5c55\u793a\u5217\u8868\uff0c\u663e\u793a\u56fe\u7247\n\n- `uploadType: text` \u56fe\u7247\u5217\u5c55\u793a\u5217\u8868\uff0c\u4e0d\u663e\u793a\u56fe\u7247\n\n- `uploadType: card` \u56fe\u7247\u5899\u5217\u8868\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| uploadType | \u4e0a\u4f20\u5c55\u793a\u7c7b\u578b | `input`\u3001`picture`\u3001`text`\u3001`card` | `input` |\n| className | CSS\u7c7b\u540d\u79f0 | String | - |\n| multiple | \u662f\u5426\u591a\u9009\u4e0a\u4f20 | boolean | - |\n\n\n### Props uploadType input\u7c7b\u578b\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| dataLabel | input \u540e\u7f6e\u6587\u5b57 | `string` | `Browse` |\n\n\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [Input](#/components/input)\u3002\n\n\n### Props uploadType \u975einput\u7c7b\u578b\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| value | \u9ed8\u8ba4\u56fe\u7247\u5217\u8868 | FileInputValue[] | - |\n| readonly | \u662f\u5426\u662f\u53ea\u8bfb\u6a21\u5f0f | boolean | false |\n| maxNumber | \u6587\u4ef6\u4e0a\u4f20\u6570\u91cf | boolean | false |\n| shape | \u56fe\u7247\u5c55\u793a\u5f62\u72b6 | `circle`\u3001`round` | `round` |\n| size | \u56fe\u7247\u5c55\u793a\u5927\u5c0f | `large`\u3001`middle`\u3001`small` | `middle` |\n| showFileIcon | \u8bbe\u7f6e\u56fe\u6807\u6309\u94ae\u662f\u5426\u5c55\u793a | {showPreviewIcon?: boolean,showRemoveIcon?: boolean} | {showPreviewIcon: true, showRemoveIcon: true} |\n| onChange | \u6587\u4ef6\u4e0a\u4f20\u56de\u8c03 | (value: FileInputValue[]) => void | - |\n| onPreview | \u9884\u89c8\u56fe\u6807\u65f6\u7684\u56de\u8c03 | (value: FileInputValue[]) => void | - |\n\n"}}]);
|
|
2
|
-
//# sourceMappingURL=8768.
|
|
1
|
+
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8768],{78768:function(n,e,t){t.r(e),e.default="FileInput \u4e0a\u4f20\u8f93\u5165\u6846\n===\n\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-file-input/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-file-input)\n[](https://npmjs.com/@uiw/react-file-input)\n\n\u8fd9\u4e2a\u7ec4\u4ef6\u4ec5\u4ec5\u662f\u5bf9 `<input type=\"file\">` \u7684\u7f8e\u5316\uff0c\u4ed6\u662f\u57fa\u4e8e Input \u7ec4\u4ef6\u5c01\u88c5 \u3002\n\n```jsx\nimport { FileInput } from 'uiw';\n// or\nimport FileInput from '@uiw/react-file-input';\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 { FileInput, Button } from 'uiw';\n\nconst Demo = () => {\n const onChange = (e) => {\n console.log(e)\n }\n return (\n <div>\n <FileInput multiple=\"multiple\" style={{ maxWidth: 200 }} size=\"small\" onChange={onChange} />\n <br />\n <FileInput multiple=\"multiple\" style={{ maxWidth: 200 }} />\n <br />\n </div>\n )\n}\n\nReactDOM.render(\n <Demo />,\n _mount_\n);\n```\n\n### \u56fe\u7247\u5899\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { FileInput, Button } from 'uiw';\n\nconst Demo = () => {\n return (\n <div>\n <FileInput\n uploadType=\"card\"\n size=\"large\"\n showFileIcon={{\n showPreviewIcon: false,\n showRemoveIcon: true\n }}\n onPreview={(file) => console.log(file)}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4'}\n ]}\n onChange={(items) => console.log(items)}\n >\n <Icon type=\"plus\" />\n </FileInput>\n <br />\n <FileInput\n uploadType=\"card\"\n shape=\"circle\"\n showFileIcon={{\n showPreviewIcon: false,\n showRemoveIcon: true\n }}\n onPreview={(file) => console.log(file)}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4'}\n ]}\n onChange={(items) => console.log(items)}\n >\n <Icon type=\"plus\" />\n </FileInput>\n <br />\n <FileInput\n uploadType=\"card\"\n size=\"small\"\n showFileIcon={{\n showPreviewIcon: false,\n showRemoveIcon: true\n }}\n onPreview={(file) => console.log(file)}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4'}\n ]}\n onChange={(items) => console.log(items)}\n >\n <Icon type=\"plus\" />\n </FileInput>\n </div>\n )\n}\n\nReactDOM.render(\n <Demo />,\n _mount_\n);\n```\n\n### \u56fe\u7247\u9884\u89c8\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { FileInput, Overlay } from 'uiw';\n\nconst Demo=()=>{\n const [visible,visibleSet]=React.useState(false)\n const [curfile,curFileSet]=React.useState(null)\n console.log('curfile',curfile)\n\n return(\n <>\n <Overlay\n isOpen={visible}\n onClosed={()=>visibleSet(false)}\n >\n <img src={`${curfile?.dataURL}`} alt={`${curfile?.name}`} />\n </Overlay>\n <FileInput\n uploadType=\"picture\"\n size=\"large\"\n onPreview={(file) =>{\n visibleSet(true)\n curFileSet(file)\n }}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\n ]}\n >\n <Icon type=\"plus\" />\n </FileInput>\n </>\n )\n}\n\nReactDOM.render(<Demo/> ,_mount_\n);\n```\n\n### \u56fe\u7247\u5217\u8868\u6837\u5f0f\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { FileInput, Button } from 'uiw';\n\nReactDOM.render(\n <div>\n <FileInput\n uploadType=\"picture\"\n size=\"large\"\n onPreview={() => console.log(234)}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\n ]}\n >\n <Button>\u65b0\u589e</Button>\n </FileInput>\n <br />\n <FileInput\n uploadType=\"picture\"\n shape=\"circle\"\n onPreview={() => console.log(234)}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\n ]}\n >\n <Button>\u65b0\u589e</Button>\n </FileInput>\n <br />\n <FileInput\n uploadType=\"picture\"\n size=\"small\"\n onPreview={() => console.log(234)}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\n ]}\n >\n <Button>\u65b0\u589e</Button>\n </FileInput>\n <br />\n <FileInput\n uploadType=\"text\"\n multiple\n maxNumber={2}\n value={[\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\n ]}\n >\n <Button>\u65b0\u589e</Button>\n </FileInput>\n </div>,\n _mount_\n);\n```\n\n### \u5728`Form`\u8868\u5355\u4e2d\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React,{ useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Form, Row, Col, Icon,FileInput,Button } from 'uiw';\n\nfunction Demo() {\n const form = useRef()\n return (\n <div>\n <Button\n type=\"danger\" \n onClick={()=>{\n const value = form.current.getFieldValues()\n form.current.setFields({\n ...value,\n picture1:[],\n picture2:[],\n picture3:[]\n })\n }}\n > \n \u6e05\u7a7a\u7167\u7247\n </Button>\n <Form\n ref={form}\n onSubmit={({initial, current}) => {\n console.log('current',current)\n }}\n fields={{\n picture1: {\n label: '\u56fe\u7247\u5899',\n initialValue: [\n {\n dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'\n }\n ],\n children: (\n <FileInput uploadType=\"card\">\n <Icon type=\"plus\" />\n </FileInput>\n )\n },\n picture2: {\n label: '\u56fe\u7247\u5217\u8868',\n initialValue: [\n {\n dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'\n }\n ],\n children: (\n <FileInput uploadType=\"picture\">\n <Button>\u65b0\u589e</Button>\n </FileInput>\n )\n },\n picture3: {\n label: '\u56fe\u7247\u540d\u79f0\u5217\u8868',\n children: (\n <FileInput uploadType=\"text\">\n <Button>\u65b0\u589e</Button>\n </FileInput>\n )\n },\n }}>\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row>\n <Col>{fields.picture1}</Col>\n </Row>\n <Row>\n <Col>{fields.picture2}</Col>\n </Row>\n <Row>\n <Col>{fields.picture3}</Col>\n </Row>\n <Row gutter={10}>\n <Col>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: '10px 0 0 10px' }}>\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- `uploadType: input` \u57fa\u7840\u8f93\u5165\u6846\u4e0a\u4f20\n\n- `uploadType: picture` \u56fe\u7247\u5217\u5c55\u793a\u5217\u8868\uff0c\u663e\u793a\u56fe\u7247\n\n- `uploadType: text` \u56fe\u7247\u5217\u5c55\u793a\u5217\u8868\uff0c\u4e0d\u663e\u793a\u56fe\u7247\n\n- `uploadType: card` \u56fe\u7247\u5899\u5217\u8868\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| uploadType | \u4e0a\u4f20\u5c55\u793a\u7c7b\u578b | `input`\u3001`picture`\u3001`text`\u3001`card` | `input` |\n| className | CSS\u7c7b\u540d\u79f0 | String | - |\n| multiple | \u662f\u5426\u591a\u9009\u4e0a\u4f20 | boolean | - |\n\n\n### Props uploadType input\u7c7b\u578b\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| dataLabel | input \u540e\u7f6e\u6587\u5b57 | `string` | `Browse` |\n\n\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [Input](#/components/input)\u3002\n\n\n### Props uploadType \u975einput\u7c7b\u578b\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| value | \u9ed8\u8ba4\u56fe\u7247\u5217\u8868 | FileInputValue[] | - |\n| readonly | \u662f\u5426\u662f\u53ea\u8bfb\u6a21\u5f0f | boolean | false |\n| maxNumber | \u6587\u4ef6\u4e0a\u4f20\u6570\u91cf | boolean | false |\n| shape | \u56fe\u7247\u5c55\u793a\u5f62\u72b6 | `circle`\u3001`round` | `round` |\n| size | \u56fe\u7247\u5c55\u793a\u5927\u5c0f | `large`\u3001`middle`\u3001`small` | `middle` |\n| showFileIcon | \u8bbe\u7f6e\u56fe\u6807\u6309\u94ae\u662f\u5426\u5c55\u793a | {showPreviewIcon?: boolean,showRemoveIcon?: boolean} | {showPreviewIcon: true, showRemoveIcon: true} |\n| onChange | \u6587\u4ef6\u4e0a\u4f20\u56de\u8c03 | (value: FileInputValue[]) => void | - |\n| onPreview | \u9884\u89c8\u56fe\u6807\u65f6\u7684\u56de\u8c03 | (value: FileInputValue[]) => void | - |\n\n"}}]);
|
|
2
|
+
//# sourceMappingURL=8768.0ea7e6a3.chunk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"static/js/8768.
|
|
1
|
+
{"version":3,"file":"static/js/8768.0ea7e6a3.chunk.js","mappings":"gHAAA,2iU","sources":["../../packages/react-file-input/README.md"],"sourcesContent":["export default \"FileInput 上传输入框\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-file-input/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-file-input)\\n[](https://npmjs.com/@uiw/react-file-input)\\n\\n这个组件仅仅是对 `<input type=\\\"file\\\">` 的美化，他是基于 Input 组件封装 。\\n\\n```jsx\\nimport { FileInput } from 'uiw';\\n// or\\nimport FileInput from '@uiw/react-file-input';\\n```\\n\\n### 基础用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { FileInput, Button } from 'uiw';\\n\\nconst Demo = () => {\\n const onChange = (e) => {\\n console.log(e)\\n }\\n return (\\n <div>\\n <FileInput multiple=\\\"multiple\\\" style={{ maxWidth: 200 }} size=\\\"small\\\" onChange={onChange} />\\n <br />\\n <FileInput multiple=\\\"multiple\\\" style={{ maxWidth: 200 }} />\\n <br />\\n </div>\\n )\\n}\\n\\nReactDOM.render(\\n <Demo />,\\n _mount_\\n);\\n```\\n\\n### 图片墙\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { FileInput, Button } from 'uiw';\\n\\nconst Demo = () => {\\n return (\\n <div>\\n <FileInput\\n uploadType=\\\"card\\\"\\n size=\\\"large\\\"\\n showFileIcon={{\\n showPreviewIcon: false,\\n showRemoveIcon: true\\n }}\\n onPreview={(file) => console.log(file)}\\n value={[\\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4'}\\n ]}\\n onChange={(items) => console.log(items)}\\n >\\n <Icon type=\\\"plus\\\" />\\n </FileInput>\\n <br />\\n <FileInput\\n uploadType=\\\"card\\\"\\n shape=\\\"circle\\\"\\n showFileIcon={{\\n showPreviewIcon: false,\\n showRemoveIcon: true\\n }}\\n onPreview={(file) => console.log(file)}\\n value={[\\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4'}\\n ]}\\n onChange={(items) => console.log(items)}\\n >\\n <Icon type=\\\"plus\\\" />\\n </FileInput>\\n <br />\\n <FileInput\\n uploadType=\\\"card\\\"\\n size=\\\"small\\\"\\n showFileIcon={{\\n showPreviewIcon: false,\\n showRemoveIcon: true\\n }}\\n onPreview={(file) => console.log(file)}\\n value={[\\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4'}\\n ]}\\n onChange={(items) => console.log(items)}\\n >\\n <Icon type=\\\"plus\\\" />\\n </FileInput>\\n </div>\\n )\\n}\\n\\nReactDOM.render(\\n <Demo />,\\n _mount_\\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 { FileInput, Overlay } from 'uiw';\\n\\nconst Demo=()=>{\\n const [visible,visibleSet]=React.useState(false)\\n const [curfile,curFileSet]=React.useState(null)\\n console.log('curfile',curfile)\\n\\n return(\\n <>\\n <Overlay\\n isOpen={visible}\\n onClosed={()=>visibleSet(false)}\\n >\\n <img src={`${curfile?.dataURL}`} alt={`${curfile?.name}`} />\\n </Overlay>\\n <FileInput\\n uploadType=\\\"picture\\\"\\n size=\\\"large\\\"\\n onPreview={(file) =>{\\n visibleSet(true)\\n curFileSet(file)\\n }}\\n value={[\\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\\n ]}\\n >\\n <Icon type=\\\"plus\\\" />\\n </FileInput>\\n </>\\n )\\n}\\n\\nReactDOM.render(<Demo/> ,_mount_\\n);\\n```\\n\\n### 图片列表样式\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { FileInput, Button } from 'uiw';\\n\\nReactDOM.render(\\n <div>\\n <FileInput\\n uploadType=\\\"picture\\\"\\n size=\\\"large\\\"\\n onPreview={() => console.log(234)}\\n value={[\\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\\n ]}\\n >\\n <Button>新增</Button>\\n </FileInput>\\n <br />\\n <FileInput\\n uploadType=\\\"picture\\\"\\n shape=\\\"circle\\\"\\n onPreview={() => console.log(234)}\\n value={[\\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\\n ]}\\n >\\n <Button>新增</Button>\\n </FileInput>\\n <br />\\n <FileInput\\n uploadType=\\\"picture\\\"\\n size=\\\"small\\\"\\n onPreview={() => console.log(234)}\\n value={[\\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\\n ]}\\n >\\n <Button>新增</Button>\\n </FileInput>\\n <br />\\n <FileInput\\n uploadType=\\\"text\\\"\\n multiple\\n maxNumber={2}\\n value={[\\n { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }\\n ]}\\n >\\n <Button>新增</Button>\\n </FileInput>\\n </div>,\\n _mount_\\n);\\n```\\n\\n### 在`Form`表单中使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React,{ useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Form, Row, Col, Icon,FileInput,Button } from 'uiw';\\n\\nfunction Demo() {\\n const form = useRef()\\n return (\\n <div>\\n <Button\\n type=\\\"danger\\\" \\n onClick={()=>{\\n const value = form.current.getFieldValues()\\n form.current.setFields({\\n ...value,\\n picture1:[],\\n picture2:[],\\n picture3:[]\\n })\\n }}\\n > \\n 清空照片\\n </Button>\\n <Form\\n ref={form}\\n onSubmit={({initial, current}) => {\\n console.log('current',current)\\n }}\\n fields={{\\n picture1: {\\n label: '图片墙',\\n initialValue: [\\n {\\n dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'\\n }\\n ],\\n children: (\\n <FileInput uploadType=\\\"card\\\">\\n <Icon type=\\\"plus\\\" />\\n </FileInput>\\n )\\n },\\n picture2: {\\n label: '图片列表',\\n initialValue: [\\n {\\n dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'\\n }\\n ],\\n children: (\\n <FileInput uploadType=\\\"picture\\\">\\n <Button>新增</Button>\\n </FileInput>\\n )\\n },\\n picture3: {\\n label: '图片名称列表',\\n children: (\\n <FileInput uploadType=\\\"text\\\">\\n <Button>新增</Button>\\n </FileInput>\\n )\\n },\\n }}>\\n {({ fields, state, canSubmit }) => {\\n return (\\n <div>\\n <Row>\\n <Col>{fields.picture1}</Col>\\n </Row>\\n <Row>\\n <Col>{fields.picture2}</Col>\\n </Row>\\n <Row>\\n <Col>{fields.picture3}</Col>\\n </Row>\\n <Row gutter={10}>\\n <Col>\\n <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n </Col>\\n </Row>\\n <Row>\\n <Col>\\n <pre style={{ padding: '10px 0 0 10px' }}>\\n {JSON.stringify(state.current, null, 2)}\\n </pre>\\n </Col>\\n </Row>\\n </div>\\n )\\n }}\\n </Form>\\n </div>\\n )\\n}\\nReactDOM.render(<Demo />,_mount_)\\n```\\n\\n## Props\\n\\n- `uploadType: input` 基础输入框上传\\n\\n- `uploadType: picture` 图片列展示列表，显示图片\\n\\n- `uploadType: text` 图片列展示列表，不显示图片\\n\\n- `uploadType: card` 图片墙列表\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| uploadType | 上传展示类型 | `input`、`picture`、`text`、`card` | `input` |\\n| className | CSS类名称 | String | - |\\n| multiple | 是否多选上传 | boolean | - |\\n\\n\\n### Props uploadType input类型\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| dataLabel | input 后置文字 | `string` | `Browse` |\\n\\n更多属性文档请参考 [Input](#/components/input)。\\n\\n\\n### Props uploadType 非input类型\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| value | 默认图片列表 | FileInputValue[] | - |\\n| readonly | 是否是只读模式 | boolean | false |\\n| maxNumber | 文件上传数量 | boolean | false |\\n| shape | 图片展示形状 | `circle`、`round` | `round` |\\n| size | 图片展示大小 | `large`、`middle`、`small` | `middle` |\\n| showFileIcon | 设置图标按钮是否展示 | {showPreviewIcon?: boolean,showRemoveIcon?: boolean} | {showPreviewIcon: true, showRemoveIcon: true} |\\n| onChange | 文件上传回调 | (value: FileInputValue[]) => void | - |\\n| onPreview | 预览图标时的回调 | (value: FileInputValue[]) => void | - |\\n\\n\";"],"names":[],"sourceRoot":""}
|