UNPKG

react-spectrum

Version:

Generate colorful text placeholders 🎨

3 lines (2 loc) • 2.85 kB
"use strict";var r=require("react/jsx-runtime");function t(r){var t=Object.create(null);return r&&Object.keys(r).forEach((function(e){if("default"!==e){var n=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(t,e,n.get?n:{enumerable:!0,get:function(){return r[e]}})}})),t.default=r,Object.freeze(t)}var e=t(require("react"));function n(r,t){if(r===t)return!0;if(null==r||null==t)return!1;if(r.length!==t.length)return!1;const e=[...r].sort(),n=[...t].sort();for(let r=0;r<e.length;r+=1)if(e[r]!==n[r])return!1;return!0}function o(r,t){const e=Math.ceil(r),n=Math.floor(t);return Math.floor(Math.random()*(n-e+1))+e}const i=({width:r,colors:t,wordWidths:e,wordDistances:n,truncate:i})=>{const s=Math.min(...e),a=Math.floor(r/s),d=o(Math.max(0,i?1:a-Math.floor(a/2)),i?Math.floor(a/2):a),c=[];let u=0;for(let i=0;i<d;i+=1){const i=e[o(0,e.length-1)];let s=n[o(0,n.length-1)];const a=u+i;u=a+s;const d=a<=r&&u>r,l=u<=r;if(!d&&!l){const[r]=[...c].reverse();r&&(r.distance=0);break}{d&&!l&&(s=0);const r=t[o(0,t.length-1)];if(c.push({width:i,distance:s,background:r}),d&&!l)break}}return c};var s=e.memo((({width:t,colors:o,wordWidths:s,wordDistances:a,wordHeight:d,wordRadius:c,lineDistance:u,truncate:l,renderWord:h})=>{const w=function(r){const t=e.useRef(null);return e.useEffect((()=>{t.current=r})),t.current}({width:t,colors:o,wordWidths:s,wordDistances:a,wordHeight:d,wordRadius:c,lineDistance:u,truncate:l,renderWord:h}),[f,g]=e.useState((()=>i({width:t,colors:o,wordWidths:s,wordDistances:a,truncate:l})));return e.useEffect((()=>{if(w&&(w.width!==t||w.wordHeight!==d||w.wordRadius!==c||w.lineDistance!==u||w.truncate!==l||!n(w.wordWidths,s)||!n(w.wordDistances,a)||!n(w.colors,o))){const r=i({width:t,colors:o,wordWidths:s,wordDistances:a,truncate:l});g(r)}}),[w,t,o,s,a,l,d,c,u]),r.jsx(r.Fragment,{children:f.map((({width:r,distance:t,background:e},n)=>{const o=h({key:n,style:{width:r,marginRight:t,height:d,background:e,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}))})}));var a=e.memo((({width:t=500,colors:e=["#eee"],wordWidths:n=[30,60,90,120,150],wordDistances:o=[4,8,12],wordHeight:i=12,wordRadius:a=20,linesPerParagraph:d=8,lineDistance:c=12,paragraphs:u=1,paragraphDistance:l=24,truncateLastLine:h=!0,renderWord:w=({key:t,style:e})=>r.jsx("span",{style:e},t)})=>r.jsx(r.Fragment,{children:new Array(u).fill(!0).map(((u,f)=>{const g=new Array(d).fill(!0).map(((u,l)=>r.jsx("div",{"data-line":l,children:r.jsx(s,{width:t,colors:e,wordWidths:n,wordDistances:o,wordHeight:i,wordRadius:a,lineDistance:c,truncate:!!h&&l===d-1,renderWord:w})},l)));return r.jsx("div",{"data-paragraph":f,style:{marginBottom:l,fontSize:0},children:g},f)}))})));module.exports=a; //# sourceMappingURL=react-spectrum.cjs.map