Skip to content

Commit 651ae32

Browse files
bplok20010bplok20010
committed
v1.0
1 parent 383471b commit 651ae32

29 files changed

+20399
-2
lines changed

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/node_modules
2+
/lib
3+
/cjs
4+
/esm
5+
/dist

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.md

‎.prettierrc

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"arrowParens": "always",
3+
"bracketSpacing": true,
4+
"endOfLine": "auto",
5+
"htmlWhitespaceSensitivity": "css",
6+
"insertPragma": false,
7+
"jsxBracketSameLine": false,
8+
"jsxSingleQuote": false,
9+
"printWidth": 100,
10+
"proseWrap": "preserve",
11+
"quoteProps": "as-needed",
12+
"requirePragma": false,
13+
"semi": true,
14+
"singleQuote": false,
15+
"tabWidth": 4,
16+
"trailingComma": "es5",
17+
"useTabs": true
18+
}

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2020 react-widget
3+
Copyright (c) 2020 nobo react-widget-upload
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

+101-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,101 @@
1-
# upload
1+
# react-widget-upload
2+
3+
Upload基础组件
4+
5+
6+
## 安装
7+
8+
```
9+
npm install --save react-widget-upload
10+
```
11+
12+
## 使用
13+
14+
[![Edit react-widget-upload](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/winter-morning-7uuhn?fontsize=14&hidenavigation=1&theme=dark)
15+
16+
```js
17+
import Upload from 'react-widget-upload';
18+
import 'react-widget-upload/style';
19+
20+
<Upload onChange={files => {...}}>选择文件</Upload>;
21+
22+
```
23+
24+
### Interfaces
25+
26+
```ts
27+
export interface RWFile extends File {
28+
webkitRelativePath?: string;
29+
}
30+
export interface UploadProps extends Omit<React.HTMLAttributes<any>, "onChange"> {
31+
/** 组件样式前缀 */
32+
prefixCls?: string;
33+
/** 组件标签 */
34+
tagName?: string;
35+
/** input name属性 */
36+
name?: string;
37+
/** input accept */
38+
accept?: string;
39+
/** input multiple */
40+
multiple?: boolean;
41+
/** input key，用于部分情况下重新创建input */
42+
inputKey?: React.Key;
43+
/** 是否支持文件夹上传 */
44+
directory?: boolean;
45+
/** 禁用 */
46+
disabled?: boolean;
47+
/** 禁用，相比disabled只是默认样式不同 */
48+
readOnly?: boolean;
49+
/** 点击时打开系统文件选择窗口 */
50+
openFileDialogOnClick?: boolean;
51+
/** 是否支持拖拽上传 */
52+
droppable?: boolean;
53+
/** 设置选择onChange接收的最大文件数，默认为无限 */
54+
maxFiles?: number;
55+
/** 用户选择或取消选择后的回调 */
56+
onChange?: (files: RWFile[]) => void;
57+
}
58+
59+
```
60+
61+
### defaultProps
62+
63+
```js
64+
{
65+
prefixCls: "rw-upload",
66+
tagName: "div",
67+
tabIndex: 0,
68+
maxFiles: Number.MAX_VALUE,
69+
droppable: true,
70+
openFileDialogOnClick: true,
71+
}
72+
```
73+
74+
### 基础样式
75+
76+
```css
77+
.rw-upload {
78+
cursor: pointer;
79+
}
80+
81+
82+
```
83+
84+
### FAQ
85+
86+
`react-widget-upload`只负责将用户选择后的文件回传给使用者，并不进行实际的文件上传，使用者需要自行构建`FormData`，示例：
87+
88+
```js
89+
90+
function handleChange(files){
91+
if(!files.length) return;
92+
const file = files[0];
93+
94+
const formData = new FormData();
95+
96+
formData.append('file', file, file.name);
97+
98+
post(url, formData);
99+
}
100+
101+
```

‎babel.config.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = api => {
2+
const isTest = api.env("test");
3+
if (!isTest) return {};
4+
5+
return {
6+
presets: [
7+
[
8+
"babel-preset-packez",
9+
{
10+
modules: "cjs",
11+
},
12+
],
13+
],
14+
};
15+
};

‎docs/asset-manifest.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"index.css": "static/css/index.fb7f5363.chunk.css",
3+
"index.js": "static/js/index.fb7f5363.chunk.js",
4+
"runtime-index.js": "static/js/runtime-index.92eae014.js",
5+
"static/js/2.ebf3e006.chunk.js": "static/js/2.ebf3e006.chunk.js",
6+
"index.html": "index.html"
7+
}

‎docs/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!doctype html><html><head><meta charset="utf-8"/><title>Upload</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:80%;margin:100px auto;background:#fff;font-size:12px;overflow:auto}</style><link href="static/css/index.fb7f5363.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.ebf3e006.chunk.js"></script><script src="static/js/index.fb7f5363.chunk.js"></script></body></html>

‎docs/static/css/index.fb7f5363.chunk.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/2.ebf3e006.chunk.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/index.fb7f5363.chunk.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/runtime-index.92eae014.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/Demo.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React, { Component } from "react";
2+
import DemoList from "./DemoList";
3+
4+
export default class Demo extends Component {
5+
state = {
6+
current: DemoList[0],
7+
};
8+
9+
onDemoChange(item, e) {
10+
this.setState({
11+
current: item,
12+
});
13+
}
14+
15+
render() {
16+
const { current } = this.state;
17+
return (
18+
<div className="container">
19+
<div className="slider">
20+
{DemoList.map((item, i) => {
21+
return (
22+
<div
23+
key={i}
24+
className={current === item ? "active" : ""}
25+
onClick={this.onDemoChange.bind(this, item)}
26+
>
27+
{item.label}
28+
</div>
29+
);
30+
})}
31+
</div>
32+
<div className="content">{current ? <current.component /> : null}</div>
33+
</div>
34+
);
35+
}
36+
}

‎examples/DemoList.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Demo1 from "./demos/demo1";
2+
3+
export default [
4+
{
5+
label: "基本功能",
6+
component: Demo1,
7+
},
8+
];

‎examples/demos/demo1.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React, { Component } from "react";
2+
import Upload from "../../src";
3+
4+
export default class DEMO extends Component {
5+
state = {
6+
files: [],
7+
};
8+
9+
handleChange = (files) => {
10+
this.setState({
11+
files,
12+
});
13+
14+
console.log(files);
15+
};
16+
17+
render() {
18+
const { files } = this.state;
19+
20+
return (
21+
<div>
22+
<div className="upload-test">
23+
<Upload
24+
onChange={this.handleChange}
25+
className="upload1"
26+
directory
27+
multiple
28+
openFileDialogOnClick={true}
29+
droppable={true}
30+
>
31+
<div>拖拽文件到这里</div>
32+
</Upload>
33+
<Upload
34+
onChange={this.handleChange}
35+
className="upload2"
36+
directory
37+
multiple
38+
droppable={false}
39+
>
40+
<button>文件上传</button>
41+
</Upload>
42+
</div>
43+
<table
44+
style={{
45+
width: 600,
46+
margin: "0 auto",
47+
marginTop: 20,
48+
}}
49+
>
50+
<thead>
51+
<tr>
52+
<th>文件名</th>
53+
<th>类型</th>
54+
<th>路径</th>
55+
<th>大小</th>
56+
<th>修改时间</th>
57+
</tr>
58+
</thead>
59+
<tbody>
60+
{files.map((file) => {
61+
return (
62+
<tr>
63+
<td>{file.name}</td>
64+
<td>{file.type}</td>
65+
<td>{file.webkitRelativePath}</td>
66+
<td>{file.size}</td>
67+
<td>{file.lastModified}</td>
68+
</tr>
69+
);
70+
})}
71+
</tbody>
72+
</table>
73+
</div>
74+
);
75+
}
76+
}

‎examples/index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Upload</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"
9+
/>
10+
<style type="text/css">
11+
.demo {
12+
width: 80%;
13+
margin: 100px auto;
14+
background: #fff;
15+
font-size: 12px;
16+
overflow: auto;
17+
}
18+
</style>
19+
</head>
20+
21+
<body style="background: #f5f5f5;">
22+
<div class="demo" id="demo"></div>
23+
</body>
24+
</html>

‎examples/index.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
4+
import "./style/index.scss";
5+
6+
import "../src/style/index.css";
7+
8+
import Demo from "./Demo";
9+
10+
ReactDOM.render(<Demo />, document.getElementById("demo"));

‎examples/style/index.scss

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.container {
2+
display: flex;
3+
height: 100%;
4+
}
5+
6+
.slider {
7+
width: 200px;
8+
border-right: 1px solid #f2f2fe;
9+
> div {
10+
padding: 10px;
11+
border-bottom: 1px solid #f2f2fe;
12+
cursor: pointer;
13+
}
14+
15+
.active {
16+
background: #3399ff;
17+
color: #fff;
18+
}
19+
}
20+
21+
.content {
22+
overflow: auto;
23+
padding: 10px;
24+
25+
flex: 1;
26+
}
27+
28+
.upload-test {
29+
width: 400px;
30+
margin: 0 auto;
31+
}
32+
33+
.upload1 {
34+
border: 2px dashed rgb(236, 236, 236);
35+
border-radius: 5px;
36+
height: 100px;
37+
line-height: 96px;
38+
position: relative;
39+
text-align: center;
40+
}
41+
42+
.tips {
43+
position: absolute;
44+
bottom: 0;
45+
left: 0;
46+
right: 0;
47+
text-align: center;
48+
padding: 30px;
49+
}
50+
51+
.upload2 {
52+
margin-top: 20px;
53+
text-align: center;
54+
}
55+
56+
.upload2 button {
57+
width: 100%;
58+
padding: 8px;
59+
}

0 commit comments

Comments
 (0)