@bikdotai/bik-component-library 0.0.821-3 → 0.0.821-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("react"),C=require("./CheckBox.styled.js"),a=require("../TypographyStyle.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("react"),C=require("./CheckBox.styled.js"),a=require("../TypographyStyle.js"),i=require("../../constants/Theme.js"),f=e=>{const s=c.useMemo(()=>e.activeColor||i.COLORS.background.positive.vibrant,[e.activeColor]),t=e.size==="XS"?{box:12,check:{w:6,h:5,x:3,y:3.5},partial:{x:3,y:5,w:6}}:e.size==="SMALL"?{box:16,check:{w:8,h:7,x:4,y:4},partial:{x:5,y:7,w:6}}:{box:18,check:{w:10,h:9,x:4,y:4},partial:{x:5,y:8,w:8}};return l.jsxs("svg",{width:t.box,height:t.box,viewBox:`0 0 ${t.box} ${t.box}`,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l.jsx("rect",{x:"0",y:"0",width:t.box,height:t.box,rx:"4",fill:e.isDisabled?i.COLORS.content.inactive:s}),!e.isPartial&&l.jsx("svg",{width:t.check.w,height:t.check.h,x:t.check.x,y:t.check.y,viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})}),e.isPartial&&l.jsx("rect",{x:t.partial.x,y:t.partial.y,width:t.partial.w,height:"2",rx:"1",fill:i.COLORS.surface.standard})]})},L=e=>{const[s,t]=c.useState(e.isChecked||!1),[d,o]=c.useState(e.isPartiallyChecked||!1),[n,y]=c.useState(e.isDisabled||!1),[S,h]=c.useState(!1),[u,x]=c.useState(!1),O=r=>{if(!e.isDisabled){const b=!s;d?o(!d):t(b),e.onValueChange?.(b,e.value,r)}};c.useEffect(()=>{t(e.isChecked)},[e.isChecked]),c.useEffect(()=>{y(e.isDisabled||!1)},[e.isDisabled]),c.useEffect(()=>{o(e.isPartiallyChecked||!1)},[e.isPartiallyChecked]);const k=()=>{if(!e.label)return l.jsx(l.Fragment,{});if(e.labelTypography){const r={bodyCaption:a.BodyCaption,bodySecondary:a.BodySecondary,bodyPrimary:a.BodyPrimary,titleSmall:a.TitleSmall}[e.labelTypography];return l.jsx(r,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label})}return e.size==="XS"?l.jsx(a.BodyCaption,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.boldOnChecked&&s||e.bold?e.labelSize==="DEFAULT"?l.jsx(a.TitleRegular,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(a.TitleSmall,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.size==="SMALL"?l.jsx(a.BodySecondary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.labelSize==="SMALL"?l.jsx(a.BodySecondary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(a.BodyPrimary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label})};return l.jsxs(C.CheckboxContainer,{onClick:O,onMouseEnter:()=>h(!e.skipHoverState),onMouseLeave:()=>h(!1),onMouseDown:()=>x(!e.skipHoverState),onMouseUp:()=>x(!1),isDisabled:n,enableHover:e.enableHover,style:e.style??{},children:[l.jsx(C.CheckboxIcon,{checked:s,hovered:S,clicked:u,isDisabled:n,size:e.size,borderColor:e.checkboxBorderColor,children:s&&l.jsx(f,{isPartial:d||!1,isDisabled:n,size:e.size,activeColor:e?.activeColor})}),k(),e.rightComponent]})};exports.CheckBox=L;
|
|
2
2
|
//# sourceMappingURL=CheckBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? { box: 12, check: { w: 6, h: 5, x: 3, y: 3.5 }, partial: { x: 3, y: 5, w: 6 } }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? { box: 16, check: { w: 8, h: 7, x: 4, y: 4 }, partial: { x: 5, y: 7, w: 6 } }\n\t\t\t: { box: 18, check: { w: 10, h: 9, x: 4, y: 4 }, partial: { x: 5, y: 8, w: 8 } };\n\n\treturn (\n\t\t<svg\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","event","newVal","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? { box: 12, check: { w: 6, h: 5, x: 3, y: 3.5 }, partial: { x: 3, y: 5, w: 6 } }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? { box: 16, check: { w: 8, h: 7, x: 4, y: 4 }, partial: { x: 5, y: 7, w: 6 } }\n\t\t\t: { box: 18, check: { w: 10, h: 9, x: 4, y: 4 }, partial: { x: 5, y: 8, w: 8 } };\n\n\treturn (\n\t\t<svg\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'XS') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","event","newVal","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as c, useEffect as o, useMemo as
|
|
3
|
-
import { CheckboxContainer as
|
|
4
|
-
import { TitleSmall as C, BodyPrimary as f, BodySecondary as s, BodyCaption as
|
|
5
|
-
import { COLORS as
|
|
1
|
+
import { jsxs as m, jsx as t, Fragment as L } from "react/jsx-runtime";
|
|
2
|
+
import { useState as c, useEffect as o, useMemo as S } from "react";
|
|
3
|
+
import { CheckboxContainer as z, CheckboxIcon as M } from "./CheckBox.styled.js";
|
|
4
|
+
import { TitleSmall as C, BodyPrimary as f, BodySecondary as s, BodyCaption as k, TitleRegular as P } from "../TypographyStyle.js";
|
|
5
|
+
import { COLORS as i } from "../../constants/Theme.js";
|
|
6
6
|
const B = (e) => {
|
|
7
|
-
const a =
|
|
8
|
-
() => e.activeColor ||
|
|
7
|
+
const a = S(
|
|
8
|
+
() => e.activeColor || i.background.positive.vibrant,
|
|
9
9
|
[e.activeColor]
|
|
10
|
-
),
|
|
11
|
-
return /* @__PURE__ */
|
|
10
|
+
), l = e.size === "XS" ? { box: 12, check: { w: 6, h: 5, x: 3, y: 3.5 }, partial: { x: 3, y: 5, w: 6 } } : e.size === "SMALL" ? { box: 16, check: { w: 8, h: 7, x: 4, y: 4 }, partial: { x: 5, y: 7, w: 6 } } : { box: 18, check: { w: 10, h: 9, x: 4, y: 4 }, partial: { x: 5, y: 8, w: 8 } };
|
|
11
|
+
return /* @__PURE__ */ m(
|
|
12
12
|
"svg",
|
|
13
13
|
{
|
|
14
|
-
width:
|
|
15
|
-
height:
|
|
16
|
-
viewBox: `0 0 ${
|
|
14
|
+
width: l.box,
|
|
15
|
+
height: l.box,
|
|
16
|
+
viewBox: `0 0 ${l.box} ${l.box}`,
|
|
17
17
|
fill: "none",
|
|
18
18
|
xmlns: "http://www.w3.org/2000/svg",
|
|
19
19
|
children: [
|
|
@@ -22,19 +22,19 @@ const B = (e) => {
|
|
|
22
22
|
{
|
|
23
23
|
x: "0",
|
|
24
24
|
y: "0",
|
|
25
|
-
width:
|
|
26
|
-
height:
|
|
25
|
+
width: l.box,
|
|
26
|
+
height: l.box,
|
|
27
27
|
rx: "4",
|
|
28
|
-
fill: e.isDisabled ?
|
|
28
|
+
fill: e.isDisabled ? i.content.inactive : a
|
|
29
29
|
}
|
|
30
30
|
),
|
|
31
31
|
!e.isPartial && /* @__PURE__ */ t(
|
|
32
32
|
"svg",
|
|
33
33
|
{
|
|
34
|
-
width:
|
|
35
|
-
height:
|
|
36
|
-
x:
|
|
37
|
-
y:
|
|
34
|
+
width: l.check.w,
|
|
35
|
+
height: l.check.h,
|
|
36
|
+
x: l.check.x,
|
|
37
|
+
y: l.check.y,
|
|
38
38
|
viewBox: "0 0 10 9",
|
|
39
39
|
fill: "none",
|
|
40
40
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -52,39 +52,39 @@ const B = (e) => {
|
|
|
52
52
|
e.isPartial && /* @__PURE__ */ t(
|
|
53
53
|
"rect",
|
|
54
54
|
{
|
|
55
|
-
x:
|
|
56
|
-
y:
|
|
57
|
-
width:
|
|
55
|
+
x: l.partial.x,
|
|
56
|
+
y: l.partial.y,
|
|
57
|
+
width: l.partial.w,
|
|
58
58
|
height: "2",
|
|
59
59
|
rx: "1",
|
|
60
|
-
fill:
|
|
60
|
+
fill: i.surface.standard
|
|
61
61
|
}
|
|
62
62
|
)
|
|
63
63
|
]
|
|
64
64
|
}
|
|
65
65
|
);
|
|
66
66
|
}, E = (e) => {
|
|
67
|
-
const [a,
|
|
67
|
+
const [a, l] = c(e.isChecked || !1), [d, h] = c(
|
|
68
68
|
e.isPartiallyChecked || !1
|
|
69
|
-
), [n,
|
|
69
|
+
), [n, w] = c(e.isDisabled || !1), [u, b] = c(!1), [v, x] = c(!1), g = (r) => {
|
|
70
70
|
if (!e.isDisabled) {
|
|
71
71
|
const y = !a;
|
|
72
|
-
d ? h(!d) :
|
|
72
|
+
d ? h(!d) : l(y), e.onValueChange?.(y, e.value, r);
|
|
73
73
|
}
|
|
74
74
|
};
|
|
75
75
|
o(() => {
|
|
76
|
-
|
|
76
|
+
l(e.isChecked);
|
|
77
77
|
}, [e.isChecked]), o(() => {
|
|
78
|
-
|
|
78
|
+
w(e.isDisabled || !1);
|
|
79
79
|
}, [e.isDisabled]), o(() => {
|
|
80
80
|
h(e.isPartiallyChecked || !1);
|
|
81
81
|
}, [e.isPartiallyChecked]);
|
|
82
|
-
const
|
|
82
|
+
const D = () => {
|
|
83
83
|
if (!e.label)
|
|
84
|
-
return /* @__PURE__ */ t(
|
|
84
|
+
return /* @__PURE__ */ t(L, {});
|
|
85
85
|
if (e.labelTypography) {
|
|
86
86
|
const r = {
|
|
87
|
-
bodyCaption:
|
|
87
|
+
bodyCaption: k,
|
|
88
88
|
bodySecondary: s,
|
|
89
89
|
bodyPrimary: f,
|
|
90
90
|
titleSmall: C
|
|
@@ -92,47 +92,53 @@ const B = (e) => {
|
|
|
92
92
|
return /* @__PURE__ */ t(
|
|
93
93
|
r,
|
|
94
94
|
{
|
|
95
|
-
color: e.isDisabled ?
|
|
95
|
+
color: e.isDisabled ? i.text.disabled : i.text.primary,
|
|
96
96
|
children: e.label
|
|
97
97
|
}
|
|
98
98
|
);
|
|
99
99
|
}
|
|
100
|
-
return e.
|
|
101
|
-
|
|
100
|
+
return e.size === "XS" ? /* @__PURE__ */ t(
|
|
101
|
+
k,
|
|
102
102
|
{
|
|
103
|
-
color: e.isDisabled ?
|
|
103
|
+
color: e.isDisabled ? i.text.disabled : i.text.primary,
|
|
104
|
+
children: e.label
|
|
105
|
+
}
|
|
106
|
+
) : e.boldOnChecked && a || e.bold ? e.labelSize === "DEFAULT" ? /* @__PURE__ */ t(
|
|
107
|
+
P,
|
|
108
|
+
{
|
|
109
|
+
color: e.isDisabled ? i.text.disabled : i.text.primary,
|
|
104
110
|
children: e.label
|
|
105
111
|
}
|
|
106
112
|
) : /* @__PURE__ */ t(
|
|
107
113
|
C,
|
|
108
114
|
{
|
|
109
|
-
color: e.isDisabled ?
|
|
115
|
+
color: e.isDisabled ? i.text.disabled : i.text.primary,
|
|
110
116
|
children: e.label
|
|
111
117
|
}
|
|
112
118
|
) : e.size === "SMALL" ? /* @__PURE__ */ t(
|
|
113
119
|
s,
|
|
114
120
|
{
|
|
115
|
-
color: e.isDisabled ?
|
|
121
|
+
color: e.isDisabled ? i.text.disabled : i.text.primary,
|
|
116
122
|
children: e.label
|
|
117
123
|
}
|
|
118
124
|
) : e.labelSize === "SMALL" ? /* @__PURE__ */ t(
|
|
119
125
|
s,
|
|
120
126
|
{
|
|
121
|
-
color: e.isDisabled ?
|
|
127
|
+
color: e.isDisabled ? i.text.disabled : i.text.primary,
|
|
122
128
|
children: e.label
|
|
123
129
|
}
|
|
124
130
|
) : /* @__PURE__ */ t(
|
|
125
131
|
f,
|
|
126
132
|
{
|
|
127
|
-
color: e.isDisabled ?
|
|
133
|
+
color: e.isDisabled ? i.text.disabled : i.text.primary,
|
|
128
134
|
children: e.label
|
|
129
135
|
}
|
|
130
136
|
);
|
|
131
137
|
};
|
|
132
|
-
return /* @__PURE__ */
|
|
133
|
-
|
|
138
|
+
return /* @__PURE__ */ m(
|
|
139
|
+
z,
|
|
134
140
|
{
|
|
135
|
-
onClick:
|
|
141
|
+
onClick: g,
|
|
136
142
|
onMouseEnter: () => b(!e.skipHoverState),
|
|
137
143
|
onMouseLeave: () => b(!1),
|
|
138
144
|
onMouseDown: () => x(!e.skipHoverState),
|
|
@@ -145,7 +151,7 @@ const B = (e) => {
|
|
|
145
151
|
M,
|
|
146
152
|
{
|
|
147
153
|
checked: a,
|
|
148
|
-
hovered:
|
|
154
|
+
hovered: u,
|
|
149
155
|
clicked: v,
|
|
150
156
|
isDisabled: n,
|
|
151
157
|
size: e.size,
|
|
@@ -161,7 +167,7 @@ const B = (e) => {
|
|
|
161
167
|
)
|
|
162
168
|
}
|
|
163
169
|
),
|
|
164
|
-
|
|
170
|
+
D(),
|
|
165
171
|
e.rightComponent
|
|
166
172
|
]
|
|
167
173
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? { box: 12, check: { w: 6, h: 5, x: 3, y: 3.5 }, partial: { x: 3, y: 5, w: 6 } }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? { box: 16, check: { w: 8, h: 7, x: 4, y: 4 }, partial: { x: 5, y: 7, w: 6 } }\n\t\t\t: { box: 18, check: { w: 10, h: 9, x: 4, y: 4 }, partial: { x: 5, y: 8, w: 8 } };\n\n\treturn (\n\t\t<svg\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","event","newVal","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? { box: 12, check: { w: 6, h: 5, x: 3, y: 3.5 }, partial: { x: 3, y: 5, w: 6 } }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? { box: 16, check: { w: 8, h: 7, x: 4, y: 4 }, partial: { x: 5, y: 7, w: 6 } }\n\t\t\t: { box: 18, check: { w: 10, h: 9, x: 4, y: 4 }, partial: { x: 5, y: 8, w: 8 } };\n\n\treturn (\n\t\t<svg\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'XS') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","event","newVal","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}
|