@lanaco/lnc-react-ui
Version:
React component library
119 lines (118 loc) • 6.2 kB
JavaScript
"use strict";const n=require("react/jsx-runtime"),z=require("react"),t=require("./index-BPVoEhTF.cjs"),R=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),o=require("./utils-NZLCh-J5.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),V=e=>e=="left"?"row-reverse":"row",i=(e,s)=>`calc(${e.components.Checkbox.default.enabled.sizes[s]} / 2)`,O=R.newStyled.label`
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
min-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
max-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
display: inline-flex;
align-items: center;
justify-content: start;
flex-direction: ${e=>V(e.labelPosition)};
${e=>e.spaceBetween==!0&&"justify-content: space-between;"}
width: 100%;
${e=>e.disabled===!0&&"pointer-events: none;"}
${e=>o.getComponentTypographyCss(e.theme,"Checkbox",e.size,"enabled")};
gap: 0.75rem;
position: relative;
& .checkbox-label {
${e=>!e.disabled&&e.readOnly!==!0&&"cursor: pointer;"}
min-width: 0;
flex-shrink: 1;
min-height: 0;
overflow: hidden;
text-overflow: ellipsis;
color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"enabled","text")};
}
& input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 100%;
width: 100%;
z-index: 3;
}
& input:focus {
outline: none;
background: transparent;
}
& input:active {
outline: none;
background: transparent;
}
& .checkmark {
min-height: ${e=>e.theme.components.Checkbox.default.enabled.sizes[e.size]};
min-width: ${e=>e.theme.components.Checkbox.default.enabled.sizes[e.size]};
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease;
background-color: transparent;
color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"enabled","text")};
border: 1px solid
${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"enabled","border")};
border-radius: ${e=>o.getBorderRadiusValueWithUnits(e.theme,"slight")};
${e=>e.disabled===!0&&`background-color: ${o.getColorRgbaValue(e.theme,"Checkbox",e.color,"disabled","border")}`};
& svg {
height: 0;
width: 0;
stroke: transparent;
}
& img {
max-height: 0;
max-width: 0;
filter: brightness(0) invert(1);
}
}
& input:checked ~ .checkmark {
background-color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"active","background","backgroundOpacity")};
border: 1px solid
${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"active","border")};
& .checked {
height: ${e=>i(e.theme,e.size)};
width: ${e=>i(e.theme,e.size)};
stroke: white;
}
& .indeterminate {
height: 0;
width: 0;
}
& img {
max-height: ${e=>i(e.theme,e.size)};
max-width: ${e=>i(e.theme,e.size)};
}
}
& input:checked ~ .checkbox-label {
color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"active","text")};
}
& input:indeterminate ~ .checkmark {
& .checked {
height: 0;
width: 0;
}
background-color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"active","background","backgroundOpacity")};
& .indeterminate {
height: ${e=>i(e.theme,e.size)};
width: ${e=>i(e.theme,e.size)};
stroke: white;
}
}
& input:indeterminate ~ .checkbox-label {
color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"enabled","text")};
}
& input:disabled ~ .checkmark {
${e=>e.readOnly!==!0&&`background-color: ${o.getColorRgbaValue(e.theme,"Checkbox",e.color,"disabled","border")};
border-color: ${o.getColorRgbaValue(e.theme,"Checkbox",e.color,"disabled","border")};
`};
}
& input:disabled ~ .checkbox-label {
color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"disabled","text")};
}
& input:focus ~ .checkmark {
${e=>o.getOutlineCss(e.theme)};
}
& input:active ~ .checkmark {
${e=>o.getOutlineCss(e.theme)};
}
`,g=z.forwardRef((e,s)=>{const{containerRef:k,id:B,indeterminate:I,disabled:u,readOnly:d,label:a,labelPosition:m="right",spaceBetween:x,customCheckmark:h,onChange:b,onFocus:l,onBlur:c,onClick:y,color:p="primary",size:C="small",className:w="",style:f={},children:L,...$}=e;var P={theme:j.useTheme(),size:C,color:p,disabled:u,readOnly:d};const T=r=>{c&&(c==null||c(r))},v=r=>{l&&(l==null||l(r))};return n.jsxs(O,{ref:k,direction:m,className:w,style:f,label:a,labelPosition:m,spaceBetween:x,tabIndex:-1,readOnly:d,onClick:y,...P,children:[n.jsx("input",{ref:s,type:"checkbox",onBlur:T,onFocus:v,disabled:u||d,onChange:r=>b==null?void 0:b(r),...$}),n.jsxs("div",{className:"checkmark",tabIndex:-1,children:[!h&&n.jsx("svg",{viewBox:"0 0 8 6",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,disabled:!0,tabIndex:-1,className:"checked",children:n.jsx("path",{d:"M1 3.15385L2.89474 5L7 1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",tabIndex:-1})}),n.jsx("svg",{width:"8",height:"2",viewBox:"0 0 8 2",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,disabled:!0,tabIndex:-1,className:"indeterminate",children:n.jsx("path",{d:"M1 1H7",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",tabIndex:-1,title:a})}),h&&n.jsx(n.Fragment,{children:h})]}),a&&n.jsx("div",{className:"checkbox-label",tabIndex:-1,children:a})]})});g.propTypes={containerRef:t.PropTypes.any,id:t.PropTypes.any,defaultChecked:t.PropTypes.bool,checked:t.PropTypes.bool,disabled:t.PropTypes.bool,readOnly:t.PropTypes.bool,label:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),indeterminate:t.PropTypes.bool,labelPosition:t.PropTypes.oneOf(["right","left"]),tabIndex:t.PropTypes.number,spaceBetween:t.PropTypes.bool,customCheckmark:t.PropTypes.element,onChange:t.PropTypes.func,onBlur:t.PropTypes.func,onFocus:t.PropTypes.func,onClick: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=g;