@lanaco/lnc-react-ui
Version:
React component library
65 lines (64 loc) • 4.44 kB
JavaScript
;const l=require("react/jsx-runtime"),b=require("react"),V=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),t=require("./utils-BK6B_Y9X.cjs"),H=require("./index-Cp66dWMi.cjs"),K=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),L=require("./useUpdateEffect-BtMgpgIV.cjs"),F=(e,n)=>`calc(${t.getSizeValueWithUnits(e,n)} - 1rem)`,N=V.styled.label`
display: inline-flex;
align-items: center;
gap: 0.5rem;
${e=>t.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")};
min-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
max-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
background-color: ${e=>t.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
color: ${e=>t.getColorRgbaValue(e.theme,"Input",e.isFocused?"primary":e.color,"enabled","text")};
border: 1px solid
${e=>t.getColorRgbaValue(e.theme,"Input",e.isFocused?"primary":e.color,"enabled","border")};
border-radius: ${e=>t.getBorderRadiusValueWithUnits(e.theme,"regular")};
padding: 0.625rem 0.75rem;
width: 100%;
${e=>!e.disabled&&e.readOnly!==!0&&e.isFocused===!0&&t.getOutlineCss(e.theme)};
/* ${e=>e.disabled===!0&&t.getDisabledBackgroundCss(e.theme)} */
${e=>e.disabled===!0&&`background-color: ${t.getColorRgbaValue(e.theme,"Input",e.color,"disabled","background","backgroundOpacity")};
color: ${n=>t.getColorRgbaValue(n.theme,"Input",n.color,"disabled","text")};`}
border: 1px solid ${e=>t.getColorRgbaValue(e.theme,"Input",e.color,"disabled","border")};
`,P=V.styled.div`
${e=>!e.disabled&&e.readOnly!==!0&&"cursor: pointer;"}
min-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
max-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
display: inline-flex;
align-items: center;
justify-content: center;
${e=>e.withInput==!0&&"width: 100%;"}
& div {
&:focus {
${e=>e.disabled!==!0&&e.withInput!==!0&&e.readOnly!==!0&&t.getOutlineCss(e.theme)};
}
&:hover {
${e=>!e.disabled&&!e.withInput&&e.readOnly!==!0&&t.getOutlineCss(e.theme)};
}
${e=>e.disabled===!0&&`opacity: ${e.theme.palette.opacity[e.theme.palette.disabled.opacity]};`}
box-sizing: border-box;
min-width: ${e=>F(e.theme,e.size)};
height: ${e=>F(e.theme,e.size)};
border-radius: ${e=>t.getBorderRadiusValueWithUnits(e.theme,"curved")};
overflow: hidden;
& input[type="color"] {
border: 0;
padding: 0;
width: 200%;
height: 200%;
cursor: pointer;
transform: translate(-25%, -25%);
/* ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)}; */
${e=>e.disabled===!0&&`background-color: ${t.getColorRgbaValue(e.theme,"Input",e.color,"disabled","background","backgroundOpacity")};
color: ${n=>t.getColorRgbaValue(n.theme,"Input",n.color,"disabled","text")};`}
}
}
`,G=V.styled.span`
display: flex;
align-items: center;
overflow: hidden;
width: 100%;
& input {
outline: none;
border: none;
background-color: transparent;
width: 100%;
}
`,J=b.forwardRef((e,n)=>{const{id:u,name:m,defaultValue:w="#000000",value:a,size:z="small",tabIndex:y,withInput:$=!1,className:j="",style:k={},color:r="primary",debounceTime:O=0,readOnly:o,disabled:d,onChange:x=()=>{},onFocus:B=()=>{},onBlur:U=()=>{},onInput:q=()=>{},onKeyDown:W=()=>{},labelRef:E,inputProps:C,...v}=e,R=K.useTheme(),[s,f]=b.useState(a),[T,S]=b.useState(!1),_=new RegExp(/^#[0-9A-F]{6}$/i);L.useUpdateEffect(()=>f(a),[a]);const D=b.useCallback(H.debounce((i,I)=>A(i,I),O),[x]),A=(i,I)=>{x&&x(i,I)},c=i=>{a&&f(i.target.value),D(i,i.target.value)},h=i=>{S(!0),B(i)},g=i=>{_.test(s)||f(w),S(!1),U(i)};return l.jsx(P,{ref:n,theme:R,size:z,className:j,style:k,disabled:d,readOnly:o,withInput:$,...v,children:$?l.jsxs(N,{withInput:$,theme:R,color:r,size:z,disabled:d,readOnly:o,tabIndex:y,isFocused:T,children:[l.jsx("div",{children:l.jsx("input",{type:"color",ref:n,id:u,name:m,value:s,disabled:d||o,onChange:c,onBlur:g,onFocus:h,color:r,...C})}),l.jsx(G,{children:l.jsx("input",{ref:E,value:s,onChange:c,onFocus:h,onBlur:g,onInput:q,onKeyDown:W,disabled:d||o,...v})})]}):l.jsx("div",{children:a==null||a=="undefined"?l.jsx("input",{type:"color",ref:n,id:u,name:m,defaultValue:w,disabled:d||o,onChange:c,onBlur:g,onFocus:h,color:r,tabIndex:y,...C}):l.jsx("input",{type:"color",ref:n,id:u,name:m,value:s,disabled:d||o,onChange:c,onBlur:g,onFocus:h,color:r,tabIndex:y,...C})})})});module.exports=J;