UNPKG

@saberlayer/avatar-upload

Version:

A React avatar upload component with image crop feature based on Ant Design

16 lines (15 loc) 17.3 kB
import e,{useState as r}from"react";import{Upload as t,message as n}from"antd";import o from"antd-img-crop";function a(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=Array(r);t<r;t++)n[t]=e[t];return n}function i(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,o,a,i,c=[],u=!0,f=!1;try{if(a=(t=t.call(e)).next,0===r){if(Object(t)!==t)return;u=!1}else for(;!(u=(n=a.call(t)).done)&&(c.push(n.value),c.length!==r);u=!0);}catch(e){f=!0,o=e}finally{try{if(!u&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(f)throw o}}return c}}(e,r)||function(e,r){if(e){if("string"==typeof e)return a(e,r);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?a(e,r):void 0}}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var u,f={exports:{}},s={exports:{}},l={};var p,y,d,m,b,v,h,g,S,O,w,E,x,j,$={}; /** @license React v16.13.1 * react-is.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */function T(){return y||(y=1,"production"===process.env.NODE_ENV?s.exports=function(){if(u)return l;u=1;var e="function"==typeof Symbol&&Symbol.for,r=e?Symbol.for("react.element"):60103,t=e?Symbol.for("react.portal"):60106,n=e?Symbol.for("react.fragment"):60107,o=e?Symbol.for("react.strict_mode"):60108,a=e?Symbol.for("react.profiler"):60114,i=e?Symbol.for("react.provider"):60109,c=e?Symbol.for("react.context"):60110,f=e?Symbol.for("react.async_mode"):60111,s=e?Symbol.for("react.concurrent_mode"):60111,p=e?Symbol.for("react.forward_ref"):60112,y=e?Symbol.for("react.suspense"):60113,d=e?Symbol.for("react.suspense_list"):60120,m=e?Symbol.for("react.memo"):60115,b=e?Symbol.for("react.lazy"):60116,v=e?Symbol.for("react.block"):60121,h=e?Symbol.for("react.fundamental"):60117,g=e?Symbol.for("react.responder"):60118,S=e?Symbol.for("react.scope"):60119;function O(e){if("object"==typeof e&&null!==e){var u=e.$$typeof;switch(u){case r:switch(e=e.type){case f:case s:case n:case a:case o:case y:return e;default:switch(e=e&&e.$$typeof){case c:case p:case b:case m:case i:return e;default:return u}}case t:return u}}}function w(e){return O(e)===s}return l.AsyncMode=f,l.ConcurrentMode=s,l.ContextConsumer=c,l.ContextProvider=i,l.Element=r,l.ForwardRef=p,l.Fragment=n,l.Lazy=b,l.Memo=m,l.Portal=t,l.Profiler=a,l.StrictMode=o,l.Suspense=y,l.isAsyncMode=function(e){return w(e)||O(e)===f},l.isConcurrentMode=w,l.isContextConsumer=function(e){return O(e)===c},l.isContextProvider=function(e){return O(e)===i},l.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},l.isForwardRef=function(e){return O(e)===p},l.isFragment=function(e){return O(e)===n},l.isLazy=function(e){return O(e)===b},l.isMemo=function(e){return O(e)===m},l.isPortal=function(e){return O(e)===t},l.isProfiler=function(e){return O(e)===a},l.isStrictMode=function(e){return O(e)===o},l.isSuspense=function(e){return O(e)===y},l.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===n||e===s||e===a||e===o||e===y||e===d||"object"==typeof e&&null!==e&&(e.$$typeof===b||e.$$typeof===m||e.$$typeof===i||e.$$typeof===c||e.$$typeof===p||e.$$typeof===h||e.$$typeof===g||e.$$typeof===S||e.$$typeof===v)},l.typeOf=O,l}():s.exports=(p||(p=1,"production"!==process.env.NODE_ENV&&function(){var e="function"==typeof Symbol&&Symbol.for,r=e?Symbol.for("react.element"):60103,t=e?Symbol.for("react.portal"):60106,n=e?Symbol.for("react.fragment"):60107,o=e?Symbol.for("react.strict_mode"):60108,a=e?Symbol.for("react.profiler"):60114,i=e?Symbol.for("react.provider"):60109,c=e?Symbol.for("react.context"):60110,u=e?Symbol.for("react.async_mode"):60111,f=e?Symbol.for("react.concurrent_mode"):60111,s=e?Symbol.for("react.forward_ref"):60112,l=e?Symbol.for("react.suspense"):60113,p=e?Symbol.for("react.suspense_list"):60120,y=e?Symbol.for("react.memo"):60115,d=e?Symbol.for("react.lazy"):60116,m=e?Symbol.for("react.block"):60121,b=e?Symbol.for("react.fundamental"):60117,v=e?Symbol.for("react.responder"):60118,h=e?Symbol.for("react.scope"):60119;function g(e){if("object"==typeof e&&null!==e){var p=e.$$typeof;switch(p){case r:var m=e.type;switch(m){case u:case f:case n:case a:case o:case l:return m;default:var b=m&&m.$$typeof;switch(b){case c:case s:case d:case y:case i:return b;default:return p}}case t:return p}}}var S=u,O=f,w=c,E=i,x=r,j=s,T=n,P=d,_=y,C=t,N=a,I=o,k=l,A=!1;function R(e){return g(e)===f}$.AsyncMode=S,$.ConcurrentMode=O,$.ContextConsumer=w,$.ContextProvider=E,$.Element=x,$.ForwardRef=j,$.Fragment=T,$.Lazy=P,$.Memo=_,$.Portal=C,$.Profiler=N,$.StrictMode=I,$.Suspense=k,$.isAsyncMode=function(e){return A||(A=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),R(e)||g(e)===u},$.isConcurrentMode=R,$.isContextConsumer=function(e){return g(e)===c},$.isContextProvider=function(e){return g(e)===i},$.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},$.isForwardRef=function(e){return g(e)===s},$.isFragment=function(e){return g(e)===n},$.isLazy=function(e){return g(e)===d},$.isMemo=function(e){return g(e)===y},$.isPortal=function(e){return g(e)===t},$.isProfiler=function(e){return g(e)===a},$.isStrictMode=function(e){return g(e)===o},$.isSuspense=function(e){return g(e)===l},$.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===n||e===f||e===a||e===o||e===l||e===p||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===y||e.$$typeof===i||e.$$typeof===c||e.$$typeof===s||e.$$typeof===b||e.$$typeof===v||e.$$typeof===h||e.$$typeof===m)},$.typeOf=g}()),$)),s.exports} /* object-assign (c) Sindre Sorhus @license MIT */function P(){if(m)return d;m=1;var e=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;return d=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var r={},t=0;t<10;t++)r["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(n,o){for(var a,i,c=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(n),u=1;u<arguments.length;u++){for(var f in a=Object(arguments[u]))r.call(a,f)&&(c[f]=a[f]);if(e){i=e(a);for(var s=0;s<i.length;s++)t.call(a,i[s])&&(c[i[s]]=a[i[s]])}}return c},d}function _(){if(v)return b;v=1;return b="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}function C(){return g?h:(g=1,h=Function.call.bind(Object.prototype.hasOwnProperty))}if("production"!==process.env.NODE_ENV){var N=T();f.exports=function(){if(E)return w;E=1;var e=T(),r=P(),t=_(),n=C(),o=function(){if(O)return S;O=1;var e=function(){};if("production"!==process.env.NODE_ENV){var r=_(),t={},n=C();e=function(e){var r="Warning: "+e;"undefined"!=typeof console&&console.error(r);try{throw new Error(r)}catch(e){}}}function o(o,a,i,c,u){if("production"!==process.env.NODE_ENV)for(var f in o)if(n(o,f)){var s;try{if("function"!=typeof o[f]){var l=Error((c||"React class")+": "+i+" type `"+f+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof o[f]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw l.name="Invariant Violation",l}s=o[f](a,f,c,i,null,r)}catch(e){s=e}if(!s||s instanceof Error||e((c||"React class")+": type specification of "+i+" `"+f+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof s+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),s instanceof Error&&!(s.message in t)){t[s.message]=!0;var p=u?u():"";e("Failed "+i+" type: "+s.message+(null!=p?p:""))}}}return o.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(t={})},S=o}(),a=function(){};function i(){return null}return"production"!==process.env.NODE_ENV&&(a=function(e){var r="Warning: "+e;"undefined"!=typeof console&&console.error(r);try{throw new Error(r)}catch(e){}}),w=function(c,u){var f="function"==typeof Symbol&&Symbol.iterator,s="<<anonymous>>",l={array:m("array"),bigint:m("bigint"),bool:m("boolean"),func:m("function"),number:m("number"),object:m("object"),string:m("string"),symbol:m("symbol"),any:d(i),arrayOf:function(e){return d((function(r,n,o,a,i){if("function"!=typeof e)return new y("Property `"+i+"` of component `"+o+"` has invalid PropType notation inside arrayOf.");var c=r[n];if(!Array.isArray(c))return new y("Invalid "+a+" `"+i+"` of type `"+h(c)+"` supplied to `"+o+"`, expected an array.");for(var u=0;u<c.length;u++){var f=e(c,u,o,a,i+"["+u+"]",t);if(f instanceof Error)return f}return null}))},element:d((function(e,r,t,n,o){var a=e[r];return c(a)?null:new y("Invalid "+n+" `"+o+"` of type `"+h(a)+"` supplied to `"+t+"`, expected a single ReactElement.")})),elementType:d((function(r,t,n,o,a){var i=r[t];return e.isValidElementType(i)?null:new y("Invalid "+o+" `"+a+"` of type `"+h(i)+"` supplied to `"+n+"`, expected a single ReactElement type.")})),instanceOf:function(e){return d((function(r,t,n,o,a){if(!(r[t]instanceof e)){var i=e.name||s;return new y("Invalid "+o+" `"+a+"` of type `"+((c=r[t]).constructor&&c.constructor.name?c.constructor.name:s)+"` supplied to `"+n+"`, expected instance of `"+i+"`.")}var c;return null}))},node:d((function(e,r,t,n,o){return v(e[r])?null:new y("Invalid "+n+" `"+o+"` supplied to `"+t+"`, expected a ReactNode.")})),objectOf:function(e){return d((function(r,o,a,i,c){if("function"!=typeof e)return new y("Property `"+c+"` of component `"+a+"` has invalid PropType notation inside objectOf.");var u=r[o],f=h(u);if("object"!==f)return new y("Invalid "+i+" `"+c+"` of type `"+f+"` supplied to `"+a+"`, expected an object.");for(var s in u)if(n(u,s)){var l=e(u,s,a,i,c+"."+s,t);if(l instanceof Error)return l}return null}))},oneOf:function(e){return Array.isArray(e)?d((function(r,t,n,o,a){for(var i=r[t],c=0;c<e.length;c++)if(p(i,e[c]))return null;var u=JSON.stringify(e,(function(e,r){return"symbol"===g(r)?String(r):r}));return new y("Invalid "+o+" `"+a+"` of value `"+String(i)+"` supplied to `"+n+"`, expected one of "+u+".")})):("production"!==process.env.NODE_ENV&&a(arguments.length>1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),i)},oneOfType:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&a("Invalid argument supplied to oneOfType, expected an instance of array."),i;for(var r=0;r<e.length;r++){var o=e[r];if("function"!=typeof o)return a("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+S(o)+" at index "+r+"."),i}return d((function(r,o,a,i,c){for(var u=[],f=0;f<e.length;f++){var s=(0,e[f])(r,o,a,i,c,t);if(null==s)return null;s.data&&n(s.data,"expectedType")&&u.push(s.data.expectedType)}return new y("Invalid "+i+" `"+c+"` supplied to `"+a+"`"+(u.length>0?", expected one of type ["+u.join(", ")+"]":"")+".")}))},shape:function(e){return d((function(r,n,o,a,i){var c=r[n],u=h(c);if("object"!==u)return new y("Invalid "+a+" `"+i+"` of type `"+u+"` supplied to `"+o+"`, expected `object`.");for(var f in e){var s=e[f];if("function"!=typeof s)return b(o,a,i,f,g(s));var l=s(c,f,o,a,i+"."+f,t);if(l)return l}return null}))},exact:function(e){return d((function(o,a,i,c,u){var f=o[a],s=h(f);if("object"!==s)return new y("Invalid "+c+" `"+u+"` of type `"+s+"` supplied to `"+i+"`, expected `object`.");var l=r({},o[a],e);for(var p in l){var d=e[p];if(n(e,p)&&"function"!=typeof d)return b(i,c,u,p,g(d));if(!d)return new y("Invalid "+c+" `"+u+"` key `"+p+"` supplied to `"+i+"`.\nBad object: "+JSON.stringify(o[a],null," ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null," "));var m=d(f,p,i,c,u+"."+p,t);if(m)return m}return null}))}};function p(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}function y(e,r){this.message=e,this.data=r&&"object"==typeof r?r:{},this.stack=""}function d(e){if("production"!==process.env.NODE_ENV)var r={},n=0;function o(o,i,c,f,l,p,d){if(f=f||s,p=p||c,d!==t){if(u){var m=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw m.name="Invariant Violation",m}if("production"!==process.env.NODE_ENV&&"undefined"!=typeof console){var b=f+":"+c;!r[b]&&n<3&&(a("You are manually calling a React.PropTypes validation function for the `"+p+"` prop on `"+f+"`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),r[b]=!0,n++)}}return null==i[c]?o?null===i[c]?new y("The "+l+" `"+p+"` is marked as required in `"+f+"`, but its value is `null`."):new y("The "+l+" `"+p+"` is marked as required in `"+f+"`, but its value is `undefined`."):null:e(i,c,f,l,p)}var i=o.bind(null,!1);return i.isRequired=o.bind(null,!0),i}function m(e){return d((function(r,t,n,o,a,i){var c=r[t];return h(c)!==e?new y("Invalid "+o+" `"+a+"` of type `"+g(c)+"` supplied to `"+n+"`, expected `"+e+"`.",{expectedType:e}):null}))}function b(e,r,t,n,o){return new y((e||"React class")+": "+r+" type `"+t+"."+n+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+o+"`.")}function v(e){switch(typeof e){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(v);if(null===e||c(e))return!0;var r=function(e){var r=e&&(f&&e[f]||e["@@iterator"]);if("function"==typeof r)return r}(e);if(!r)return!1;var t,n=r.call(e);if(r!==e.entries){for(;!(t=n.next()).done;)if(!v(t.value))return!1}else for(;!(t=n.next()).done;){var o=t.value;if(o&&!v(o[1]))return!1}return!0;default:return!1}}function h(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||!!r&&("Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol)}(r,e)?"symbol":r}function g(e){if(null==e)return""+e;var r=h(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}function S(e){var r=g(e);switch(r){case"array":case"object":return"an "+r;case"boolean":case"date":case"regexp":return"a "+r;default:return r}}return y.prototype=Error.prototype,l.checkPropTypes=o,l.resetWarningCache=o.resetWarningCache,l.PropTypes=l,l},w}()(N.isElement,!0)}else f.exports=function(){if(j)return x;j=1;var e=_();function r(){}function t(){}return t.resetWarningCache=r,x=function(){function n(r,t,n,o,a,i){if(i!==e){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function o(){return n}n.isRequired=n;var a={array:n,bigint:n,bool:n,func:n,number:n,object:n,string:n,symbol:n,any:n,arrayOf:o,element:n,elementType:n,instanceOf:o,node:n,objectOf:o,oneOf:o,oneOfType:o,shape:o,exact:o,checkPropTypes:t,resetWarningCache:r};return a.PropTypes=a,a}}()();var I=c(f.exports),k=function(a){var c=a.value,u=a.onChange,f=a.maxSize,s=void 0===f?2:f,l=i(r(!1),2),p=l[0],y=l[1],d=i(r(c||""),2),m=d[0],b=d[1];return e.createElement(o,{rotate:!0},e.createElement(t,{name:"avatar",listType:"picture-circle",className:"avatar-uploader",showUploadList:!1,action:"/api/upload",beforeUpload:function(e){return"image/jpeg"===e.type||"image/png"===e.type?!!(e.size/1024/1024<s)||(n.error("图片必须小于 ".concat(s,"MB!")),!1):(n.error("只能上传 JPG/PNG 格式的图片!"),!1)},onChange:function(e){if("uploading"!==e.file.status){if("done"===e.file.status){var r;y(!1);var t=(null===(r=e.file.response)||void 0===r?void 0:r.url)||"";b(t),null==u||u(t)}"error"===e.file.status&&(y(!1),n.error("上传失败,请重试!"))}else y(!0)}},m?e.createElement("img",{src:m,alt:"avatar",style:{width:"100%",height:"100%",borderRadius:"50%",objectFit:"cover"}}):e.createElement("div",null,p?"上传中...":"+ 上传")))};k.propTypes={value:I.string,onChange:I.func,maxSize:I.number};var A=k;export{A as AvatarUpload,A as default}; //# sourceMappingURL=index.esm.js.map