UNPKG

react-component-placeholder

Version:

A toolbox to create highly customisable responsive component placeholders.

2 lines 15.5 kB
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[function(t,e,n){"use strict";t.exports=n(2)},function(t,e,n){t.exports=n(6)},function(t,e,n){"use strict";var r=n(3),o="function"===typeof Symbol&&Symbol.for,i=o?Symbol.for("react.element"):60103,u=o?Symbol.for("react.portal"):60106,c=o?Symbol.for("react.fragment"):60107,a=o?Symbol.for("react.strict_mode"):60108,l=o?Symbol.for("react.profiler"):60114,s=o?Symbol.for("react.provider"):60109,f=o?Symbol.for("react.context"):60110,p=o?Symbol.for("react.concurrent_mode"):60111,y=o?Symbol.for("react.forward_ref"):60112,d=o?Symbol.for("react.suspense"):60113,h=o?Symbol.for("react.memo"):60115,g=o?Symbol.for("react.lazy"):60116,b="function"===typeof Symbol&&Symbol.iterator;function m(t){for(var e=arguments.length-1,n="https://reactjs.org/docs/error-decoder.html?invariant="+t,r=0;r<e;r++)n+="&args[]="+encodeURIComponent(arguments[r+1]);!function(t,e,n,r,o,i,u,c){if(!t){if(t=void 0,void 0===e)t=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var a=[n,r,o,i,u,c],l=0;(t=Error(e.replace(/%s/g,function(){return a[l++]}))).name="Invariant Violation"}throw t.framesToPop=1,t}}(!1,"Minified React error #"+t+"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ",n)}var v={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},x={};function w(t,e,n){this.props=t,this.context=e,this.refs=x,this.updater=n||v}function k(){}function S(t,e,n){this.props=t,this.context=e,this.refs=x,this.updater=n||v}w.prototype.isReactComponent={},w.prototype.setState=function(t,e){"object"!==typeof t&&"function"!==typeof t&&null!=t&&m("85"),this.updater.enqueueSetState(this,t,e,"setState")},w.prototype.forceUpdate=function(t){this.updater.enqueueForceUpdate(this,t,"forceUpdate")},k.prototype=w.prototype;var O=S.prototype=new k;O.constructor=S,r(O,w.prototype),O.isPureReactComponent=!0;var _={current:null,currentDispatcher:null},j=Object.prototype.hasOwnProperty,C={key:!0,ref:!0,__self:!0,__source:!0};function E(t,e,n){var r=void 0,o={},u=null,c=null;if(null!=e)for(r in void 0!==e.ref&&(c=e.ref),void 0!==e.key&&(u=""+e.key),e)j.call(e,r)&&!C.hasOwnProperty(r)&&(o[r]=e[r]);var a=arguments.length-2;if(1===a)o.children=n;else if(1<a){for(var l=Array(a),s=0;s<a;s++)l[s]=arguments[s+2];o.children=l}if(t&&t.defaultProps)for(r in a=t.defaultProps)void 0===o[r]&&(o[r]=a[r]);return{$$typeof:i,type:t,key:u,ref:c,props:o,_owner:_.current}}function P(t){return"object"===typeof t&&null!==t&&t.$$typeof===i}var R=/\/+/g,$=[];function T(t,e,n,r){if($.length){var o=$.pop();return o.result=t,o.keyPrefix=e,o.func=n,o.context=r,o.count=0,o}return{result:t,keyPrefix:e,func:n,context:r,count:0}}function V(t){t.result=null,t.keyPrefix=null,t.func=null,t.context=null,t.count=0,10>$.length&&$.push(t)}function F(t,e,n){return null==t?0:function t(e,n,r,o){var c=typeof e;"undefined"!==c&&"boolean"!==c||(e=null);var a=!1;if(null===e)a=!0;else switch(c){case"string":case"number":a=!0;break;case"object":switch(e.$$typeof){case i:case u:a=!0}}if(a)return r(o,e,""===n?"."+I(e,0):n),1;if(a=0,n=""===n?".":n+":",Array.isArray(e))for(var l=0;l<e.length;l++){var s=n+I(c=e[l],l);a+=t(c,s,r,o)}else if(s=null===e||"object"!==typeof e?null:"function"===typeof(s=b&&e[b]||e["@@iterator"])?s:null,"function"===typeof s)for(e=s.call(e),l=0;!(c=e.next()).done;)a+=t(c=c.value,s=n+I(c,l++),r,o);else"object"===c&&m("31","[object Object]"===(r=""+e)?"object with keys {"+Object.keys(e).join(", ")+"}":r,"");return a}(t,"",e,n)}function I(t,e){return"object"===typeof t&&null!==t&&null!=t.key?function(t){var e={"=":"=0",":":"=2"};return"$"+(""+t).replace(/[=:]/g,function(t){return e[t]})}(t.key):e.toString(36)}function z(t,e){t.func.call(t.context,e,t.count++)}function q(t,e,n){var r=t.result,o=t.keyPrefix;t=t.func.call(t.context,e,t.count++),Array.isArray(t)?L(t,r,n,function(t){return t}):null!=t&&(P(t)&&(t=function(t,e){return{$$typeof:i,type:t.type,key:e,ref:t.ref,props:t.props,_owner:t._owner}}(t,o+(!t.key||e&&e.key===t.key?"":(""+t.key).replace(R,"$&/")+"/")+n)),r.push(t))}function L(t,e,n,r,o){var i="";null!=n&&(i=(""+n).replace(R,"$&/")+"/"),F(t,q,e=T(e,i,r,o)),V(e)}var A={Children:{map:function(t,e,n){if(null==t)return t;var r=[];return L(t,r,null,e,n),r},forEach:function(t,e,n){if(null==t)return t;F(t,z,e=T(null,null,e,n)),V(e)},count:function(t){return F(t,function(){return null},null)},toArray:function(t){var e=[];return L(t,e,null,function(t){return t}),e},only:function(t){return P(t)||m("143"),t}},createRef:function(){return{current:null}},Component:w,PureComponent:S,createContext:function(t,e){return void 0===e&&(e=null),(t={$$typeof:f,_calculateChangedBits:e,_currentValue:t,_currentValue2:t,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:s,_context:t},t.Consumer=t},forwardRef:function(t){return{$$typeof:y,render:t}},lazy:function(t){return{$$typeof:g,_ctor:t,_status:-1,_result:null}},memo:function(t,e){return{$$typeof:h,type:t,compare:void 0===e?null:e}},Fragment:c,StrictMode:a,Suspense:d,createElement:E,cloneElement:function(t,e,n){(null===t||void 0===t)&&m("267",t);var o=void 0,u=r({},t.props),c=t.key,a=t.ref,l=t._owner;if(null!=e){void 0!==e.ref&&(a=e.ref,l=_.current),void 0!==e.key&&(c=""+e.key);var s=void 0;for(o in t.type&&t.type.defaultProps&&(s=t.type.defaultProps),e)j.call(e,o)&&!C.hasOwnProperty(o)&&(u[o]=void 0===e[o]&&void 0!==s?s[o]:e[o])}if(1===(o=arguments.length-2))u.children=n;else if(1<o){s=Array(o);for(var f=0;f<o;f++)s[f]=arguments[f+2];u.children=s}return{$$typeof:i,type:t.type,key:c,ref:a,props:u,_owner:l}},createFactory:function(t){var e=E.bind(null,t);return e.type=t,e},isValidElement:P,version:"16.6.3",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentOwner:_,assign:r}};A.unstable_ConcurrentMode=p,A.unstable_Profiler=l;var U={default:A},M=U&&A||U;t.exports=M.default||M},function(t,e,n){"use strict";var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;t.exports=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},n=0;n<10;n++)e["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[t]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(t){r[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(o){return!1}}()?Object.assign:function(t,e){for(var n,u,c=function(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}(t),a=1;a<arguments.length;a++){for(var l in n=Object(arguments[a]))o.call(n,l)&&(c[l]=n[l]);if(r){u=r(n);for(var s=0;s<u.length;s++)i.call(n,u[s])&&(c[u[s]]=n[u[s]])}}return c}},function(t,e,n){},,function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function i(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t}function u(t){return(u="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function c(t){return(c="function"===typeof Symbol&&"symbol"===u(Symbol.iterator)?function(t){return u(t)}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":u(t)})(t)}function a(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function l(t,e){return!e||"object"!==c(e)&&"function"!==typeof e?a(t):e}function s(t){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function f(t,e){return(f=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function p(t,e){if("function"!==typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&f(t,e)}n.r(e);var y=n(0),d=n.n(y),h=d.a.createContext({}),g=(n(4),function(t){function e(t){var n;r(this,e);var o=(n=l(this,s(e).call(this,t))).config,i=o.columns,u=o.gutter,c=o.color,f=o.borderRadius,p=(o.delay,o.animation);return n.state={borderRadius:f||0,color:c||"#E9EBEE",animation:p||"",viewport:n.viewport,columns:i||12,gutter:u||30},n.getViewport=n.getViewport.bind(a(a(n))),n}return p(e,y["Component"]),i(e,[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.getViewport)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.getViewport)}},{key:"getViewport",value:function(){this.setState({viewport:this.viewport})}},{key:"render",value:function(){var t=this.props.children,e=this.state.animation;return d.a.createElement(h.Provider,{value:this.state},d.a.createElement("div",{className:e?"rcp-".concat(e):"",name:"placeholder",style:this.style},t))}},{key:"config",get:function(){return this.props.config||{}}},{key:"viewport",get:function(){var t=this.config.viewport,e=window.innerWidth,n=t?t.xs:360,r=t?t.sm:768,o=t?t.md:1024;return e>(t?t.lg:1280)?"xl":e>o?"lg":e>r?"md":e>n?"sm":"xs"}},{key:"style",get:function(){return{width:"100%",backgroundColor:this.config.backgroundColor||"#FFF"}}}]),e}()),b=function(t){function e(){return r(this,e),l(this,s(e).apply(this,arguments))}return p(e,y["Component"]),i(e,[{key:"render",value:function(){return d.a.createElement("div",{name:"row",style:this.style},this.props.children)}},{key:"gutter",get:function(){var t=this.context.gutter;return t?t/2:15}},{key:"style",get:function(){return{display:"flex",flexWrap:"wrap",marginLeft:"-".concat(this.gutter,"px"),marginRight:"-".concat(this.gutter,"px")}}}]),e}();b.contextType=h;var m=b,v=function(t){function e(){return r(this,e),l(this,s(e).apply(this,arguments))}return p(e,y["Component"]),i(e,[{key:"render",value:function(){return d.a.createElement("div",{name:"col",style:this.style},this.props.children)}},{key:"gutter",get:function(){var t=this.context.gutter;return t?t/2:15}},{key:"width",get:function(){var t=this.props,e=t.xs,n=t.sm,r=t.md,o=t.lg,i=t.xl,u=this.context,c=u.viewport,a=u.columns||12,l=e||a;return{xs:100/a*l,sm:100/a*(n||l),md:100/a*(r||(n||l)),lg:100/a*(o||(r||(n||l))),xl:100/a*(i||(o||(r||(n||l))))}[c]||100}},{key:"offset",get:function(){var t=this.props,e=t.xsOffset,n=t.smOffset,r=t.mdOffset,o=t.lgOffset,i=t.xlOffset,u=this.context,c=u.viewport,a=u.columns||12;return{xs:e&&100/a*e,sm:n&&100/a*n,md:r&&100/a*r,lg:o&&100/a*o,xl:i&&100/a*i}[c]||0}},{key:"style",get:function(){return{width:"100%",minHeight:"1px",position:"relative",boxSizing:"border-box",flex:"0 0 ".concat(this.width,"%"),maxWidth:"".concat(this.width,"%"),marginLeft:"".concat(this.offset,"%"),paddingLeft:"".concat(this.gutter,"px"),paddingRight:"".concat(this.gutter,"px")}}}]),e}();v.contextType=h;var x=v;function w(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function k(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},r=Object.keys(n);"function"===typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),r.forEach(function(e){w(t,e,n[e])})}return t}var S=function(t){function e(){return r(this,e),l(this,s(e).apply(this,arguments))}return p(e,y["Component"]),i(e,[{key:"render",value:function(){return console.log(typeof this.props.backgroundImage),d.a.createElement("div",{name:"circle",style:this.style})}},{key:"style",get:function(){var t=this.context.color,e=this.props,n=e.backgroundImage;return k({},{backgroundColor:e.backgroundColor||t,width:"100%",paddingTop:"100%",borderRadius:"50%"},n?{backgroundImage:n?"url(".concat(n,")"):"none",backgroundRepeat:"no-repeat",backgroundSize:"cover",backgroundPosition:"center"}:{})}}]),e}();S.contextType=h;var O=S,_=function(t){function e(){return r(this,e),l(this,s(e).apply(this,arguments))}return p(e,y["Component"]),i(e,[{key:"render",value:function(){return d.a.createElement("div",null,this.rows)}},{key:"style",get:function(){var t=this.context,e=t.color,n=t.borderRadius,r=t.fontSize,o=this.props,i=o.color,u=o.borderRadius,c=o.fontSize,a=o.width,l=o.rows,s=e||i,f=r||c,p=n||u||3;return{width:a&&1===l?"".concat(a,"px"):"100%",backgroundColor:s,height:f?"".concat(f,"px"):"16px",marginBottom:f?"".concat(f/2,"px"):"8px",borderRadius:"".concat(p>f/2?f/2:p,"px")}}},{key:"rows",get:function(){for(var t=this.props.rows,e=void 0===t?1:t,n=[],r=0;r<e;r++){var o=r+1===e&&e>1?"70%":"100%";n.push(d.a.createElement("div",{name:"text",key:r,style:k({},this.style,{maxWidth:o})}))}return n}}]),e}();_.contextType=h;var j=_,C=function(t){function e(){return r(this,e),l(this,s(e).apply(this,arguments))}return p(e,y["Component"]),i(e,[{key:"render",value:function(){return d.a.createElement("div",{name:"line",style:this.style})}},{key:"style",get:function(){var t=this.context.color,e=this.props,n=e.color,r=e.width,o=e.margin,i=void 0===o?10:o;return{width:"100%",height:r?"".concat(r,"px"):"1px",backgroundColor:n||t,margin:"".concat(i,"px 0")}}}]),e}();C.contextType=h;var E=C,P=function(t){function e(){return r(this,e),l(this,s(e).apply(this,arguments))}return p(e,y["Component"]),i(e,[{key:"getValue",value:function(t,e){if(t)return typeof t===typeof!0?e:t}},{key:"render",value:function(){return d.a.createElement("div",{name:"block",style:k({},this.style,this.props.style)},this.props.children)}},{key:"gutter",get:function(){var t=this.context.gutter;return t?t/2:15}},{key:"style",get:function(){var t=this.context,e=t.borderRadius,n=t.color,r=this.props,o=r.borderRadius,i=r.backgroundColor,u=r.padding,c=r.height,a=r.border,l=r.boxShadow,s=o||e;return{width:"100%",height:c?"".concat(c,"px"):"auto",backgroundColor:i||"#FFF",padding:this.getValue(u,this.gutter),boxSizing:"border-box",borderRadius:"".concat(s,"px"),border:this.getValue(a,"1px solid ".concat(n)),boxShadow:this.getValue(l,"0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16)")}}}]),e}();P.contextType=h;var R=P,$=function(t){function e(){return r(this,e),l(this,s(e).apply(this,arguments))}return p(e,y["Component"]),i(e,[{key:"render",value:function(){return d.a.createElement("div",{name:"square",style:this.style})}},{key:"style",get:function(){var t=this.context,e=t.color,n=t.borderRadius,r=this.props,o=r.backgroundImage,i=r.backgroundColor,u=r.borderRadius||n;return k({},{backgroundColor:i||e,width:"100%",paddingTop:"100%",borderRadius:u?"".concat(u,"px"):0},o?{backgroundImage:o?"url(".concat(o,")"):"none",backgroundRepeat:"no-repeat",backgroundSize:"cover",backgroundPosition:"center"}:{})}}]),e}();$.contextType=h;var T=$;n.d(e,"Placeholder",function(){return g}),n.d(e,"Row",function(){return m}),n.d(e,"Col",function(){return x}),n.d(e,"Circle",function(){return O}),n.d(e,"Text",function(){return j}),n.d(e,"Line",function(){return E}),n.d(e,"Block",function(){return R}),n.d(e,"Square",function(){return T})}],[[1,1]]]); //# sourceMappingURL=main.c14b911a.chunk.js.map