From 651ae329f255694b807bfafeefe166ea080db0da Mon Sep 17 00:00:00 2001 From: bplok20010 Date: Sun, 5 Jul 2020 10:25:15 +0800 Subject: [PATCH] v1.0 --- .gitignore | 5 + .prettierignore | 1 + .prettierrc | 18 + LICENSE | 2 +- README.md | 102 +- babel.config.js | 15 + docs/asset-manifest.json | 7 + docs/index.html | 1 + docs/static/css/index.fb7f5363.chunk.css | 1 + docs/static/js/2.ebf3e006.chunk.js | 1 + docs/static/js/index.fb7f5363.chunk.js | 1 + docs/static/js/runtime-index.92eae014.js | 1 + examples/Demo.js | 36 + examples/DemoList.js | 8 + examples/demos/demo1.js | 76 + examples/index.html | 24 + examples/index.js | 10 + examples/style/index.scss | 59 + jest.config.js | 5 + package-lock.json | 19604 +++++++++++++++++++++ package.json | 76 + packez.config.js | 20 + src/index.tsx | 265 + src/style/index.css | 3 + src/style/index.ts | 1 + style/package.json | 6 + tests/index.test.tsx | 13 + transform-es.config.js | 21 + tsconfig.json | 19 + 29 files changed, 20399 insertions(+), 2 deletions(-) create mode 100644 .gitignore create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 babel.config.js create mode 100644 docs/asset-manifest.json create mode 100644 docs/index.html create mode 100644 docs/static/css/index.fb7f5363.chunk.css create mode 100644 docs/static/js/2.ebf3e006.chunk.js create mode 100644 docs/static/js/index.fb7f5363.chunk.js create mode 100644 docs/static/js/runtime-index.92eae014.js create mode 100644 examples/Demo.js create mode 100644 examples/DemoList.js create mode 100644 examples/demos/demo1.js create mode 100644 examples/index.html create mode 100644 examples/index.js create mode 100644 examples/style/index.scss create mode 100644 jest.config.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 packez.config.js create mode 100644 src/index.tsx create mode 100644 src/style/index.css create mode 100644 src/style/index.ts create mode 100644 style/package.json create mode 100644 tests/index.test.tsx create mode 100644 transform-es.config.js create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2220d83 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +/node_modules +/lib +/cjs +/esm +/dist diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..2e1fa2d --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +*.md \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..b2349f2 --- /dev/null +++ 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 index 49f1ff6..21b2758 100644 --- 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 index 23c8af1..694b231 100644 --- a/README.md +++ b/README.md @@ -1 +1,101 @@ -# upload \ No newline at end of file +# 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'; + + {...}}>选择文件; + +``` + +### Interfaces + +```ts +export interface RWFile extends File { + webkitRelativePath?: string; +} +export interface UploadProps extends Omit, "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 new file mode 100644 index 0000000..0ea13b0 --- /dev/null +++ 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 new file mode 100644 index 0000000..29440a4 --- /dev/null +++ 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" +} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..8206cab --- /dev/null +++ b/docs/index.html @@ -0,0 +1 @@ +Upload
\ No newline at end of file diff --git a/docs/static/css/index.fb7f5363.chunk.css b/docs/static/css/index.fb7f5363.chunk.css new file mode 100644 index 0000000..aff5992 --- /dev/null +++ b/docs/static/css/index.fb7f5363.chunk.css @@ -0,0 +1 @@ +.container{display:flex;height:100%}.slider{width:200px;border-right:1px solid #f2f2fe}.slider>div{padding:10px;border-bottom:1px solid #f2f2fe;cursor:pointer}.slider .active{background:#39f;color:#fff}.content{overflow:auto;padding:10px;flex:1 1}.upload-test{width:400px;margin:0 auto}.upload1{border:2px dashed #ececec;border-radius:5px;height:100px;line-height:96px;position:relative}.tips,.upload1{text-align:center}.tips{position:absolute;bottom:0;left:0;right:0;padding:30px}.upload2{margin-top:20px;text-align:center}.upload2 button{width:100%;padding:8px}.rw-upload{cursor:pointer} \ No newline at end of file diff --git a/docs/static/js/2.ebf3e006.chunk.js b/docs/static/js/2.ebf3e006.chunk.js new file mode 100644 index 0000000..ac09dfe --- /dev/null +++ b/docs/static/js/2.ebf3e006.chunk.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[2],[function(e,t,n){"use strict";e.exports=n(114)},function(e,t,n){(function(t){var n=function(e){return e&&e.Math==Math&&e};e.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof t&&t)||Function("return this")()}).call(this,n(88))},function(e,t,n){var r=n(1),o=n(46),i=n(7),l=n(49),a=n(50),u=n(89),c=o("wks"),s=r.Symbol,f=u?s:s&&s.withoutSetter||l;e.exports=function(e){return i(c,e)||(a&&i(s,e)?c[e]=s[e]:c[e]=f("Symbol."+e)),c[e]}},function(e,t){e.exports=function(e){try{return!!e()}catch(t){return!0}}},function(e,t){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}},function(e,t){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},function(e,t,n){var r=n(9);e.exports=function(e){if(!r(e))throw TypeError(String(e)+" is not an object");return e}},function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},function(e,t,n){var r=n(3);e.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(e,t){e.exports=function(e){return"object"===typeof e?null!==e:"function"===typeof e}},function(e,t,n){var r=n(8),o=n(11),i=n(24);e.exports=r?function(e,t,n){return o.f(e,t,i(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){var r=n(8),o=n(48),i=n(6),l=n(23),a=Object.defineProperty;t.f=r?a:function(e,t,n){if(i(e),t=l(t,!0),i(n),o)try{return a(e,t,n)}catch(r){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},function(e,t){var n={}.toString;e.exports=function(e){return n.call(e).slice(8,-1)}},function(e,t,n){var r=n(1),o=n(27).f,i=n(10),l=n(14),a=n(31),u=n(95),c=n(38);e.exports=function(e,t){var n,s,f,d,p,h=e.target,m=e.global,v=e.stat;if(n=m?r:v?r[h]||a(h,{}):(r[h]||{}).prototype)for(s in t){if(d=t[s],f=e.noTargetGet?(p=o(n,s))&&p.value:n[s],!c(m?s:h+(v?".":"#")+s,e.forced)&&void 0!==f){if(typeof d===typeof f)continue;u(d,f)}(e.sham||f&&f.sham)&&i(d,"sham",!0),l(n,s,d,e)}}},function(e,t,n){var r=n(1),o=n(10),i=n(7),l=n(31),a=n(37),u=n(26),c=u.get,s=u.enforce,f=String(String).split("String");(e.exports=function(e,t,n,a){var u=!!a&&!!a.unsafe,c=!!a&&!!a.enumerable,d=!!a&&!!a.noTargetGet;"function"==typeof n&&("string"!=typeof t||i(n,"name")||o(n,"name",t),s(n).source=f.join("string"==typeof t?t:"")),e!==r?(u?!d&&e[t]&&(c=!0):delete e[t],c?e[t]=n:o(e,t,n)):c?e[t]=n:l(t,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&c(this).source||a(this)}))},function(e,t,n){var r=n(93),o=n(1),i=function(e){return"function"==typeof e?e:void 0};e.exports=function(e,t){return arguments.length<2?i(r[e])||i(o[e]):r[e]&&r[e][t]||o[e]&&o[e][t]}},function(e,t){e.exports=function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}},function(e,t){e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on "+e);return e}},function(e,t){e.exports=!1},function(e,t,n){var r=n(25),o=Math.min;e.exports=function(e){return e>0?o(r(e),9007199254740991):0}},function(e,t){e.exports={}},function(e,t,n){var r=n(17);e.exports=function(e){return Object(r(e))}},function(e,t,n){var r=n(30),o=n(17);e.exports=function(e){return r(o(e))}},function(e,t,n){var r=n(9);e.exports=function(e,t){if(!r(e))return e;var n,o;if(t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;if("function"==typeof(n=e.valueOf)&&!r(o=n.call(e)))return o;if(!t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t){var n=Math.ceil,r=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?r:n)(e)}},function(e,t,n){var r,o,i,l=n(94),a=n(1),u=n(9),c=n(10),s=n(7),f=n(36),d=n(34),p=a.WeakMap;if(l){var h=new p,m=h.get,v=h.has,y=h.set;r=function(e,t){return y.call(h,e,t),t},o=function(e){return m.call(h,e)||{}},i=function(e){return v.call(h,e)}}else{var g=f("state");d[g]=!0,r=function(e,t){return c(e,g,t),t},o=function(e){return s(e,g)?e[g]:{}},i=function(e){return s(e,g)}}e.exports={set:r,get:o,has:i,enforce:function(e){return i(e)?o(e):r(e,{})},getterFor:function(e){return function(t){var n;if(!u(t)||(n=o(t)).type!==e)throw TypeError("Incompatible receiver, "+e+" required");return n}}}},function(e,t,n){var r=n(8),o=n(55),i=n(24),l=n(22),a=n(23),u=n(7),c=n(48),s=Object.getOwnPropertyDescriptor;t.f=r?s:function(e,t){if(e=l(e),t=a(t,!0),c)try{return s(e,t)}catch(n){}if(u(e,t))return i(!o.f.call(e,t),e[t])}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(String(e)+" is not a function");return e}},function(e,t,n){"use strict";var r=n(22),o=n(87),i=n(20),l=n(26),a=n(54),u=l.set,c=l.getterFor("Array Iterator");e.exports=a(Array,"Array",(function(e,t){u(this,{type:"Array Iterator",target:r(e),index:0,kind:t})}),(function(){var e=c(this),t=e.target,n=e.kind,r=e.index++;return!t||r>=t.length?(e.target=void 0,{value:void 0,done:!0}):"keys"==n?{value:r,done:!1}:"values"==n?{value:t[r],done:!1}:{value:[r,t[r]],done:!1}}),"values"),i.Arguments=i.Array,o("keys"),o("values"),o("entries")},function(e,t,n){var r=n(3),o=n(12),i="".split;e.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(e){return"String"==o(e)?i.call(e,""):Object(e)}:Object},function(e,t,n){var r=n(1),o=n(10);e.exports=function(e,t){try{o(r,e,t)}catch(n){r[e]=t}return t}},function(e,t,n){var r=n(1),o=n(9),i=r.document,l=o(i)&&o(i.createElement);e.exports=function(e){return l?i.createElement(e):{}}},function(e,t,n){var r,o=n(6),i=n(90),l=n(35),a=n(34),u=n(53),c=n(32),s=n(36),f=s("IE_PROTO"),d=function(){},p=function(e){return"