UNPKG

react-spectrum

Version:

Generate colorful text placeholders 🎨

3 lines (2 loc) • 3.12 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).ReactSpectrum=t(e.jsxRuntime,e.React)}(this,(function(e,t){"use strict";function r(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(t);function o(e,t){if(e===t)return!0;if(null==e||null==t)return!1;if(e.length!==t.length)return!1;const r=[...e].sort(),n=[...t].sort();for(let e=0;e<r.length;e+=1)if(r[e]!==n[e])return!1;return!0}function i(e,t){const r=Math.ceil(e),n=Math.floor(t);return Math.floor(Math.random()*(n-r+1))+r}const s=({width:e,colors:t,wordWidths:r,wordDistances:n,truncate:o})=>{const s=Math.min(...r),a=Math.floor(e/s),d=i(Math.max(0,o?1:a-Math.floor(a/2)),o?Math.floor(a/2):a),c=[];let u=0;for(let o=0;o<d;o+=1){const o=r[i(0,r.length-1)];let s=n[i(0,n.length-1)];const a=u+o;u=a+s;const d=a<=e&&u>e,l=u<=e;if(!d&&!l){const[e]=[...c].reverse();e&&(e.distance=0);break}{d&&!l&&(s=0);const e=t[i(0,t.length-1)];if(c.push({width:o,distance:s,background:e}),d&&!l)break}}return c};var a=n.memo((({width:t,colors:r,wordWidths:i,wordDistances:a,wordHeight:d,wordRadius:c,lineDistance:u,truncate:l,renderWord:h})=>{const f=function(e){const t=n.useRef(null);return n.useEffect((()=>{t.current=e})),t.current}({width:t,colors:r,wordWidths:i,wordDistances:a,wordHeight:d,wordRadius:c,lineDistance:u,truncate:l,renderWord:h}),[w,g]=n.useState((()=>s({width:t,colors:r,wordWidths:i,wordDistances:a,truncate:l})));return n.useEffect((()=>{if(f&&(f.width!==t||f.wordHeight!==d||f.wordRadius!==c||f.lineDistance!==u||f.truncate!==l||!o(f.wordWidths,i)||!o(f.wordDistances,a)||!o(f.colors,r))){const e=s({width:t,colors:r,wordWidths:i,wordDistances:a,truncate:l});g(e)}}),[f,t,r,i,a,l,d,c,u]),e.jsx(e.Fragment,{children:w.map((({width:e,distance:t,background:r},n)=>{const o=h({key:n,style:{width:e,marginRight:t,height:d,background:r,display:"inline-block",borderRadius:c,marginBottom:u}});if(o instanceof Promise)throw new Error("`renderWord` must be synchronous function and not return a Promise.");return o}))})}));return n.memo((({width:t=500,colors:r=["#eee"],wordWidths:n=[30,60,90,120,150],wordDistances:o=[4,8,12],wordHeight:i=12,wordRadius:s=20,linesPerParagraph:d=8,lineDistance:c=12,paragraphs:u=1,paragraphDistance:l=24,truncateLastLine:h=!0,renderWord:f=({key:t,style:r})=>e.jsx("span",{style:r},t)})=>e.jsx(e.Fragment,{children:new Array(u).fill(!0).map(((u,w)=>{const g=new Array(d).fill(!0).map(((u,l)=>e.jsx("div",{"data-line":l,children:e.jsx(a,{width:t,colors:r,wordWidths:n,wordDistances:o,wordHeight:i,wordRadius:s,lineDistance:c,truncate:!!h&&l===d-1,renderWord:f})},l)));return e.jsx("div",{"data-paragraph":w,style:{marginBottom:l,fontSize:0},children:g},w)}))})))})); //# sourceMappingURL=react-spectrum.umd.js.map