retro-react/dist/cjs/components/sevensegmentdisplay/SevenSegmentDisplay.js

A React component library for building retro-style websites

"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react"),s=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),i=require("../../utils/classNames.js"),a=require("../../utils/getColorScheme.js"),r=require("./SevenSegmentDisplay.styled.js");const l=[["a","b","c","d","e","f"],["b","c"],["a","b","g","e","d"],["a","b","g","c","d"],["f","g","b","c"],["a","f","g","c","d"],["a","f","g","e","c","d"],["a","b","c"],["a","b","c","d","e","f","g"],["a","b","c","d","f","g"]],o={a:{top:0,left:"10%",width:"80%",height:"10%"},b:{top:"10%",right:0,width:"10%",height:"40%"},c:{bottom:"10%",right:0,width:"10%",height:"40%"},d:{bottom:0,left:"10%",width:"80%",height:"10%"},e:{bottom:"10%",left:0,width:"10%",height:"40%"},f:{top:"10%",left:0,width:"10%",height:"40%"},g:{top:"45%",left:"10%",width:"80%",height:"10%"}},n=t.forwardRef(((t,n)=>{var{className:c,value:d=0,segmentThickness:g="none",color:h="black",size:m="medium",sx:p}=t,b=e.__rest(t,["className","value","segmentThickness","color","size","sx"]);const u=d.toString().split("").filter((e=>e.match(/[0-9]/))),x={small:16,medium:32,large:64}[m],f={thin:16===x?"2px":32===x?"3px":"5px",thick:16===x?"3px":32===x?"4px":"8px",none:"0px"}[g];return s.jsx(r.SevenSegmentDisplayContainer,Object.assign({className:i.classNames("seven-segment-display-root",c),ref:n,sx:p},b,{children:u.map(((e,t)=>{const i=l[Number(e)];return s.jsx("div",Object.assign({className:"seven-segment-display-digit",style:{display:"inline-block",position:"relative",width:`${x}px`,height:2*x+"px"}},{children:Object.keys(o).map((r=>s.jsx("div",{className:"seven-segment-display-segment",style:Object.assign(Object.assign({},o[r]),{position:"absolute",backgroundColor:a.default(h),opacity:i.includes(r)?1:.1,border:`${f} solid ${a.default(h)}`,boxSizing:"border-box"})},`retro-display-${e}-${t}-${r}`)))}),`retro-display-${e}-${t}`)}))}),void 0)}));exports.SevenSegmentDisplay=n;