v1.0

react-widget · Jul 5, 2020 · 651ae32 · 651ae32
1 parent 383471b
commit 651ae32
Show file tree

Hide file tree

Showing 29 changed files with 20,399 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+/node_modules
+/lib
+/cjs
+/esm
+/dist
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+*.md
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,18 @@
+{
+	"arrowParens": "always",
+	"bracketSpacing": true,
+	"endOfLine": "auto",
+	"htmlWhitespaceSensitivity": "css",
+	"insertPragma": false,
+	"jsxBracketSameLine": false,
+	"jsxSingleQuote": false,
+	"printWidth": 100,
+	"proseWrap": "preserve",
+	"quoteProps": "as-needed",
+	"requirePragma": false,
+	"semi": true,
+	"singleQuote": false,
+	"tabWidth": 4,
+	"trailingComma": "es5",
+	"useTabs": true
+}
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 react-widget
+Copyright (c) 2020 nobo react-widget-upload
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1 +1,101 @@
-# upload
+# react-widget-upload
+
+Upload基础组件
+
+
+## 安装
+
+```
+npm install --save react-widget-upload
+```
+
+## 使用
+
+[![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)
+
+```js
+import Upload from 'react-widget-upload';
+import 'react-widget-upload/style';
+
+<Upload onChange={files => {...}}>选择文件</Upload>;
+
+```
+
+### Interfaces
+
+```ts
+export interface RWFile extends File {
+    webkitRelativePath?: string;
+}
+export interface UploadProps extends Omit<React.HTMLAttributes<any>, "onChange"> {
+    /** 组件样式前缀 */
+    prefixCls?: string;
+    /** 组件标签 */
+    tagName?: string;
+    /** input name属性 */
+    name?: string;
+    /** input accept */
+    accept?: string;
+    /** input multiple */
+    multiple?: boolean;
+    /** input key，用于部分情况下重新创建input */
+    inputKey?: React.Key;
+    /** 是否支持文件夹上传 */
+    directory?: boolean;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 禁用，相比disabled只是默认样式不同 */
+    readOnly?: boolean;
+    /** 点击时打开系统文件选择窗口 */
+    openFileDialogOnClick?: boolean;
+    /** 是否支持拖拽上传 */
+    droppable?: boolean;
+    /** 设置选择onChange接收的最大文件数，默认为无限 */
+    maxFiles?: number;
+    /** 用户选择或取消选择后的回调 */
+    onChange?: (files: RWFile[]) => void;
+}
+
+```
+
+### defaultProps
+
+```js
+{
+	prefixCls: "rw-upload",
+	tagName: "div",
+	tabIndex: 0,
+	maxFiles: Number.MAX_VALUE,
+	droppable: true,
+	openFileDialogOnClick: true,
+}
+```
+
+### 基础样式
+
+```css
+.rw-upload {
+    cursor: pointer;
+}
+
+
+```
+
+### FAQ
+
+`react-widget-upload`只负责将用户选择后的文件回传给使用者，并不进行实际的文件上传，使用者需要自行构建`FormData`，示例：
+
+```js
+
+function handleChange(files){
+    if(!files.length) return;
+    const file = files[0];
+
+    const formData = new FormData();
+
+    formData.append('file', file, file.name);
+
+    post(url, formData);
+}
+
+```
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,15 @@
+module.exports = api => {
+	const isTest = api.env("test");
+	if (!isTest) return {};
+
+	return {
+		presets: [
+			[
+				"babel-preset-packez",
+				{
+					modules: "cjs",
+				},
+			],
+		],
+	};
+};
diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -0,0 +1,7 @@
+{
+  "index.css": "static/css/index.fb7f5363.chunk.css",
+  "index.js": "static/js/index.fb7f5363.chunk.js",
+  "runtime-index.js": "static/js/runtime-index.92eae014.js",
+  "static/js/2.ebf3e006.chunk.js": "static/js/2.ebf3e006.chunk.js",
+  "index.html": "index.html"
+}
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +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>
diff --git a/docs/static/css/index.fb7f5363.chunk.css b/docs/static/css/index.fb7f5363.chunk.css
diff --git a/docs/static/js/2.ebf3e006.chunk.js b/docs/static/js/2.ebf3e006.chunk.js
diff --git a/docs/static/js/index.fb7f5363.chunk.js b/docs/static/js/index.fb7f5363.chunk.js
diff --git a/docs/static/js/runtime-index.92eae014.js b/docs/static/js/runtime-index.92eae014.js
diff --git a/examples/Demo.js b/examples/Demo.js
@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import DemoList from "./DemoList";
+
+export default class Demo extends Component {
+	state = {
+		current: DemoList[0],
+	};
+
+	onDemoChange(item, e) {
+		this.setState({
+			current: item,
+		});
+	}
+
+	render() {
+		const { current } = this.state;
+		return (
+			<div className="container">
+				<div className="slider">
+					{DemoList.map((item, i) => {
+						return (
+							<div
+								key={i}
+								className={current === item ? "active" : ""}
+								onClick={this.onDemoChange.bind(this, item)}
+							>
+								{item.label}
+							</div>
+						);
+					})}
+				</div>
+				<div className="content">{current ? <current.component /> : null}</div>
+			</div>
+		);
+	}
+}
diff --git a/examples/DemoList.js b/examples/DemoList.js
@@ -0,0 +1,8 @@
+import Demo1 from "./demos/demo1";
+
+export default [
+	{
+		label: "基本功能",
+		component: Demo1,
+	},
+];
diff --git a/examples/demos/demo1.js b/examples/demos/demo1.js
@@ -0,0 +1,76 @@
+import React, { Component } from "react";
+import Upload from "../../src";
+
+export default class DEMO extends Component {
+	state = {
+		files: [],
+	};
+
+	handleChange = (files) => {
+		this.setState({
+			files,
+		});
+
+		console.log(files);
+	};
+
+	render() {
+		const { files } = this.state;
+
+		return (
+			<div>
+				<div className="upload-test">
+					<Upload
+						onChange={this.handleChange}
+						className="upload1"
+						directory
+						multiple
+						openFileDialogOnClick={true}
+						droppable={true}
+					>
+						<div>拖拽文件到这里</div>
+					</Upload>
+					<Upload
+						onChange={this.handleChange}
+						className="upload2"
+						directory
+						multiple
+						droppable={false}
+					>
+						<button>文件上传</button>
+					</Upload>
+				</div>
+				<table
+					style={{
+						width: 600,
+						margin: "0 auto",
+						marginTop: 20,
+					}}
+				>
+					<thead>
+						<tr>
+							<th>文件名</th>
+							<th>类型</th>
+							<th>路径</th>
+							<th>大小</th>
+							<th>修改时间</th>
+						</tr>
+					</thead>
+					<tbody>
+						{files.map((file) => {
+							return (
+								<tr>
+									<td>{file.name}</td>
+									<td>{file.type}</td>
+									<td>{file.webkitRelativePath}</td>
+									<td>{file.size}</td>
+									<td>{file.lastModified}</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</table>
+			</div>
+		);
+	}
+}
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,24 @@
+<!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 type="text/css">
+			.demo {
+				width: 80%;
+				margin: 100px auto;
+				background: #fff;
+				font-size: 12px;
+				overflow: auto;
+			}
+		</style>
+	</head>
+
+	<body style="background: #f5f5f5;">
+		<div class="demo" id="demo"></div>
+	</body>
+</html>
diff --git a/examples/index.js b/examples/index.js
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import "./style/index.scss";
+
+import "../src/style/index.css";
+
+import Demo from "./Demo";
+
+ReactDOM.render(<Demo />, document.getElementById("demo"));
diff --git a/examples/style/index.scss b/examples/style/index.scss
@@ -0,0 +1,59 @@
+.container {
+    display: flex;
+    height: 100%;
+}
+
+.slider {
+    width: 200px;
+    border-right: 1px solid #f2f2fe;
+    > div {
+        padding: 10px;
+        border-bottom: 1px solid #f2f2fe;
+        cursor: pointer;
+    }
+
+    .active {
+        background: #3399ff;
+        color: #fff;
+    }
+}
+
+.content {
+    overflow: auto;
+    padding: 10px;
+
+    flex: 1;
+}
+
+.upload-test {
+    width: 400px;
+    margin: 0 auto;
+}
+
+.upload1 {
+    border: 2px dashed rgb(236, 236, 236);
+    border-radius: 5px;
+    height: 100px;
+    line-height: 96px;
+    position: relative;
+    text-align: center;
+}
+
+.tips {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    padding: 30px;
+}
+
+.upload2 {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.upload2 button {
+    width: 100%;
+    padding: 8px;
+}