xtreme-ui
Version:
Collection of reusable components that can be used in web projects
2 lines (1 loc) • 4.33 kB
JavaScript
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),l=require("@floating-ui/react"),C=require("clsx"),r=require("colord"),le=require("../ColorPicker/ColorPicker.cjs"),ne=require("../Icon/Icon.cjs"),ce=require("../Textfield/Textfield.cjs"),ie=require("../../hooks/useScreen.cjs"),ae=require("../../../utils/helper/colorHelper.cjs"),de=require("../../../utils/constants/theme.cjs"),ue=require("../../../utils/function/mergeRefs.cjs"),R=require("../Button/Button.cjs");;/* empty css */function F(L,O){const{className:T,popperClassName:V,input:g="textfield",size:z="default",placeholder:A="Color Picker",colorHeading:p="Pick color",schemeHeading:k,themeScheme:v,setThemeScheme:y,showReset:D=!0,alpha:U,shade:W,swatch:H,hideWheel:w=!1,color:d,setColor:m}=L,_=ie.useScreenType(),n=t.useMemo(()=>r.colord(d),[]),x=t.useMemo(()=>r.getFormat(d),[d]),[j,u]=t.useState(n.toHsv()),[c,h]=t.useState(n.toHex()),[G,J]=t.useState(p),b=t.useRef(!1),[I,P]=t.useState(!1),{refs:N,floatingStyles:K,context:S}=l.useFloating({open:I,onOpenChange:P,middleware:[l.shift({crossAxis:!0,padding:18}),l.flip(),l.offset(({placement:e})=>e==="bottom"?10:16)],whileElementsMounted:l.autoUpdate}),{isMounted:Q,styles:X}=l.useTransitionStyles(S,{duration:200,initial:({side:e})=>({opacity:0,translate:e==="bottom"?"0px 8px":"0px -8px"})}),{getReferenceProps:B,getFloatingProps:Y}=l.useInteractions([l.useClick(S),l.useDismiss(S)]),[$,Z,q]=t.useMemo(()=>{const e=r.colord(j),s=e.toHsl(),i=n.toHsl();return[`${Math.round(s.h)} ${Math.round(s.s)}% ${Math.round(s.l)}%`,`${Math.round(i.h)} ${Math.round(i.s)}% ${Math.round(i.l)}%`,e.isLight()?"black":"white"]},[n,j]),ee=c!==n.toHex(),M=g==="button"||g==="buttonLabel",f=e=>{b.current=!0,x==="rgb"?m(e.toRgb()):x==="hex"?m(e.toHex()):x==="hsl"?m(e.toHsl()):x==="hsv"&&m(e.toHsv())},E=e=>{h(e);const s=r.colord(e);s.isValid()&&(u(s.toHsv()),f(s))},oe=e=>{const s=r.colord(e);u(e),h(s.toHex()),f(s)},se=e=>{const s=r.colord(e);u(s.toHsv()),h(s.toHex()),f(s)},te=()=>{u(n.toHsv()),h(n.toHex()),f(n)};return t.useEffect(()=>{if(!b.current){const e=r.colord(d);u(e.toHsv()),h(e.toHex())}b.current=!1},[d]),t.useEffect(()=>{J(ae.getColorLabel(r.colord(c).toHsl())??p)},[p,c]),o.jsxs(o.Fragment,{children:[M?o.jsx(R.Button,{className:"xtrColorButton",ref:N.setReference,size:z,icon:"f53f",iconType:"solid",label:g==="buttonLabel"?c:void 0,style:{"--themeColor":$,"--iconColor":q,color:q},onClick:()=>P(!0),...B()}):o.jsx(ce.Textfield,{className:C("xtrColorInput",T),ref:N.setReference,placeholder:A,icon:"f53f",iconType:"solid",active:I,value:c,onChange:e=>E(e.target.value),style:{"--colorBrandPrimary":$,"--iconColor":q},onFocus:()=>P(!0),...B()}),Q&&o.jsxs("div",{ref:ue.mergeRefs([O,N.setFloating]),className:C("xtrColorPopper",V),style:{...K,...X,"--colorBrandPrimary":$},...Y(),children:[(H||!w)&&o.jsxs("div",{className:C("header",M&&"withInput"),children:[o.jsxs("div",{className:"heading",children:[o.jsxs("div",{children:[o.jsx("h1",{children:G}),M&&o.jsx("input",{placeholder:"#Hex",className:C("popperInput",T),value:c,autoFocus:_.isLargest,onChange:e=>E(e.target.value)})]}),o.jsx("h1",{children:p})]}),D&&o.jsx(ne.Icon,{code:"f1da",type:"solid",style:{"--colorBrandPrimary":Z,visibility:ee?"visible":"hidden"},onClick:te})]}),H&&o.jsx("div",{className:"swatch",children:H.map((e,s)=>{const i=r.colord(c).isEqual(e),a=r.colord(e).toHsl(),re=`${a.h} ${a.s}% ${a.l}%`;return o.jsx(R.Button,{className:"swatchItem",icon:"f00c",iconType:"solid",size:"mini",style:{"--themeColor":re,color:i?"white":"transparent"},onClick:()=>se(a)},`ThemeColor-${a.h}${a.s}${a.l}-${s}`)})}),!w&&o.jsx(le.ColorPicker,{className:"colorPicker",alpha:U,shade:W,color:j,setColor:oe}),k&&o.jsxs("div",{className:"themeScheme",children:[o.jsx("div",{className:"header",children:o.jsxs("div",{className:"heading",children:[o.jsx("div",{children:o.jsx("h1",{children:v})}),o.jsx("h1",{children:k})]})}),o.jsx("div",{className:"schemeSelector",children:de.THEME_SCHEME.map(({name:e,icon:s},i)=>o.jsx(R.Button,{icon:s,iconType:"solid",disabled:v===e,type:v===e?"primary":"secondary",onClick:()=>y==null?void 0:y(e)},`ThemeScheme-${e}-${i}`))})]})]})]})}const he=t.forwardRef(F);F.displayName="ColorPopper";exports.ColorPopper=he;