npm - @uiw/doc - Versions diffs - 4.21.16 → 4.21.17 - Mend

@uiw/doc 4.21.16 → 4.21.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/web/static/js/{8768.5facbb82.chunk.js.map → 8768.0ea7e6a3.chunk.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"static/js/8768.~~5facbb82~~.chunk.js","mappings":"gHAAA,~~27S~~","sources":["../../packages/react-file-input/README.md"],"sourcesContent":["export default \"FileInput 上传输入框\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-file-input/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-file-input.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-file-input)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-file-input.svg?label=@uiw/react-file-input)](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 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: '图片墙',\\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 ~~_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":""}
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[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-file-input/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-file-input.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-file-input)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-file-input.svg?label=@uiw/react-file-input)](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":""}