@lanaco/lnc-react-ui
Version:
React component library
61 lines (60 loc) • 4.7 kB
JavaScript
;const i=require("react/jsx-runtime"),b=require("react"),C=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),t=require("./index-BPVoEhTF.cjs"),n=require("./utils-NZLCh-J5.cjs"),N=require("./index-DaiUAQVF.cjs"),A=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),H=require("./useUpdateEffect-BtMgpgIV.cjs"),V=(e,r)=>`calc(${n.getSizeValueWithUnits(e,r)} - 1rem)`,L=C.newStyled.label`
display: inline-flex;
align-items: center;
gap: 0.5rem;
${e=>n.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")};
min-height: ${e=>n.getSizeValueWithUnits(e.theme,e.size)};
max-height: ${e=>n.getSizeValueWithUnits(e.theme,e.size)};
background-color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.isFocused?"primary":e.color,"enabled","text")};
border: 1px solid
${e=>n.getColorRgbaValue(e.theme,"Input",e.isFocused?"primary":e.color,"enabled","border")};
border-radius: ${e=>n.getBorderRadiusValueWithUnits(e.theme,"regular")};
padding: 0.625rem 0.75rem;
width: 100%;
${e=>!e.disabled&&e.readOnly!==!0&&e.isFocused===!0&&n.getOutlineCss(e.theme)};
${e=>e.disabled===!0&&n.getDisabledBackgroundCss(e.theme)}
border: 1px solid ${e=>n.getColorRgbaValue(e.theme,"Input",e.color,"disabled","border")};
`,G=C.newStyled.div`
${e=>!e.disabled&&e.readOnly!==!0&&"cursor: pointer;"}
min-height: ${e=>n.getSizeValueWithUnits(e.theme,e.size)};
max-height: ${e=>n.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&&n.getOutlineCss(e.theme)};
}
&:hover {
${e=>!e.disabled&&!e.withInput&&e.readOnly!==!0&&n.getOutlineCss(e.theme)};
}
${e=>e.disabled===!0&&`opacity: ${e.theme.palette.opacity[e.theme.palette.disabled.opacity]};`}
box-sizing: border-box;
min-width: ${e=>V(e.theme,e.size)};
height: ${e=>V(e.theme,e.size)};
border-radius: ${e=>n.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&&n.getDisabledStateCss(e.theme)};
}
}
`,J=C.newStyled.span`
display: flex;
align-items: center;
overflow: hidden;
width: 100%;
& input {
outline: none;
border: none;
background-color: transparent;
width: 100%;
}
`,F=b.forwardRef((e,r)=>{const{id:u,name:y,defaultValue:P="#000000",value:s,size:v="small",tabIndex:p,withInput:f=!1,className:R="",style:j={},color:d="primary",debounceTime:O=0,readOnly:l,disabled:a,onChange:x=()=>{},onFocus:B=()=>{},onBlur:U=()=>{},onInput:q=()=>{},onKeyDown:W=()=>{},labelRef:k,inputProps:T,...z}=e,I=A.useTheme(),[c,$]=b.useState(s),[D,S]=b.useState(!1),E=new RegExp(/^#[0-9A-F]{6}$/i);H.useUpdateEffect(()=>$(s),[s]);const _=b.useCallback(N.debounce((o,w)=>K(o,w),O),[x]),K=(o,w)=>{x&&x(o,w)},h=o=>{s&&$(o.target.value),_(o,o.target.value)},g=o=>{S(!0),B(o)},m=o=>{E.test(c)||$(P),S(!1),U(o)};return i.jsx(G,{ref:r,theme:I,size:v,className:R,style:j,disabled:a,readOnly:l,withInput:f,...z,children:f?i.jsxs(L,{withInput:f,theme:I,color:d,size:v,disabled:a,readOnly:l,tabIndex:p,isFocused:D,children:[i.jsx("div",{children:i.jsx("input",{type:"color",ref:r,id:u,name:y,value:c,disabled:a||l,onChange:h,onBlur:m,onFocus:g,color:d,...T})}),i.jsx(J,{children:i.jsx("input",{ref:k,value:c,onChange:h,onFocus:g,onBlur:m,onInput:q,onKeyDown:W,disabled:a||l,...z})})]}):i.jsx("div",{children:s==null||s=="undefined"?i.jsx("input",{type:"color",ref:r,id:u,name:y,defaultValue:P,disabled:a||l,onChange:h,onBlur:m,onFocus:g,color:d,tabIndex:p,...T}):i.jsx("input",{type:"color",ref:r,id:u,name:y,value:c,disabled:a||l,onChange:h,onBlur:m,onFocus:g,color:d,tabIndex:p,...T})})})});F.propTypes={id:t.PropTypes.any,name:t.PropTypes.string,defaultValue:t.PropTypes.string,value:t.PropTypes.string,debounceTime:t.PropTypes.number,disabled:t.PropTypes.bool,readOnly:t.PropTypes.bool,tabIndex:t.PropTypes.number,preventDefault:t.PropTypes.bool,labelRef:t.PropTypes.any,inputProps:t.PropTypes.bool,withInput:t.PropTypes.bool,onChange:t.PropTypes.func,onBlur:t.PropTypes.func,onFocus:t.PropTypes.func,onInput:t.PropTypes.func,onKeyDown:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=F;