@uiw/doc 4.10.4 → 4.10.5

package/web/static/js/8768.9960b4fe.chunk.js

@@ -0,0 +1,2 @@
+"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\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\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      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>\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"}}]);
+//# sourceMappingURL=8768.9960b4fe.chunk.js.map

package/web/static/js/8768.9960b4fe.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/8768.9960b4fe.chunk.js","mappings":"gHAAA","sources":["../../packages/react-file-input/README.md"],"sourcesContent":["export default \"FileInput 上传输入框\\n===\\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 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 ReactDOM from 'react-dom';\\nimport { Form, Row, Col, Icon } from 'uiw';\\n\\nReactDOM.render(\\n  <div>\\n    <Form \\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>\\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` 基础输入框上传\\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":""}