@chayns-components/core 5.0.0-beta.901 → 5.0.0-beta.902
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.
- package/lib/cjs/components/checkbox/Checkbox.js +3 -1
- package/lib/cjs/components/checkbox/Checkbox.js.map +1 -1
- package/lib/cjs/components/checkbox/Checkbox.styles.js +3 -2
- package/lib/cjs/components/checkbox/Checkbox.styles.js.map +1 -1
- package/lib/esm/components/checkbox/Checkbox.js +3 -1
- package/lib/esm/components/checkbox/Checkbox.js.map +1 -1
- package/lib/esm/components/checkbox/Checkbox.styles.js +3 -2
- package/lib/esm/components/checkbox/Checkbox.styles.js.map +1 -1
- package/lib/types/components/checkbox/Checkbox.d.ts +4 -0
- package/lib/types/components/checkbox/Checkbox.styles.d.ts +1 -0
- package/package.json +2 -2
|
@@ -14,6 +14,7 @@ const Checkbox = ({
|
|
|
14
14
|
children,
|
|
15
15
|
isChecked,
|
|
16
16
|
isDisabled,
|
|
17
|
+
shouldChangeOnLabelClick = false,
|
|
17
18
|
labelClassName,
|
|
18
19
|
onChange,
|
|
19
20
|
shouldShowAsSwitch,
|
|
@@ -36,10 +37,11 @@ const Checkbox = ({
|
|
|
36
37
|
type: "checkbox"
|
|
37
38
|
}), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxLabel, {
|
|
38
39
|
className: labelClassName,
|
|
39
|
-
htmlFor: uuid,
|
|
40
|
+
htmlFor: shouldChangeOnLabelClick ? uuid : 'nothing here',
|
|
40
41
|
$isChecked: isChecked ?? isActive,
|
|
41
42
|
$isDisabled: isDisabled,
|
|
42
43
|
$shouldShowAsSwitch: shouldShowAsSwitch,
|
|
44
|
+
$shouldChangeOnLabelClick: shouldChangeOnLabelClick,
|
|
43
45
|
$lineHeight: lineHeight
|
|
44
46
|
}, children));
|
|
45
47
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","className","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n ReactElement,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n /**\n * Text for checkbox or switch\n */\n children?: ReactElement | string;\n /**\n * Indicates whether the checkbox or switch is selected\n */\n isChecked?: boolean;\n /**\n * Disables the checkbox or switch so it cannot be toggled\n */\n isDisabled?: boolean;\n /**\n * Classname for the label\n */\n labelClassName?: string;\n /**\n * Function to be executed if the checked value changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Changes the design to use switch instead of checkbox\n */\n shouldShowAsSwitch?: boolean;\n /**\n * Whether the Checkbox should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n labelClassName,\n onChange,\n shouldShowAsSwitch,\n shouldShowCentered = false,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n const lineHeight = useMemo(\n () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n [children, shouldShowCentered],\n );\n\n return (\n <StyledCheckbox>\n <StyledCheckboxInput\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n <StyledCheckboxLabel\n className={labelClassName}\n htmlFor={uuid}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $lineHeight={lineHeight}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AASA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAA6F,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Checkbox","children","isChecked","isDisabled","shouldChangeOnLabelClick","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","className","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$shouldChangeOnLabelClick","$lineHeight","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n ReactElement,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n /**\n * Text for checkbox or switch\n */\n children?: ReactElement | string;\n /**\n * Indicates whether the checkbox or switch is selected\n */\n isChecked?: boolean;\n /**\n * Disables the checkbox or switch so it cannot be toggled\n */\n isDisabled?: boolean;\n /**\n * Classname for the label\n */\n labelClassName?: string;\n /**\n * Function to be executed if the checked value changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Whether the state should be changed on the label click\n */\n shouldChangeOnLabelClick?: boolean;\n /**\n * Changes the design to use switch instead of checkbox\n */\n shouldShowAsSwitch?: boolean;\n /**\n * Whether the Checkbox should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n shouldChangeOnLabelClick = false,\n labelClassName,\n onChange,\n shouldShowAsSwitch,\n shouldShowCentered = false,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n const lineHeight = useMemo(\n () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n [children, shouldShowCentered],\n );\n\n return (\n <StyledCheckbox>\n <StyledCheckboxInput\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n <StyledCheckboxLabel\n className={labelClassName}\n htmlFor={shouldChangeOnLabelClick ? uuid : 'nothing here'}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n $lineHeight={lineHeight}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -23,8 +23,9 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
|
|
|
23
23
|
theme
|
|
24
24
|
}) => theme.text};
|
|
25
25
|
cursor: ${({
|
|
26
|
-
$isDisabled
|
|
27
|
-
|
|
26
|
+
$isDisabled,
|
|
27
|
+
$shouldChangeOnLabelClick
|
|
28
|
+
}) => $shouldChangeOnLabelClick && !$isDisabled ? 'pointer' : 'default'};
|
|
28
29
|
opacity: ${({
|
|
29
30
|
$isDisabled
|
|
30
31
|
}) => $isDisabled ? 0.5 : 1};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_checkBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","theme","text","$isDisabled","$shouldShowAsSwitch","$isChecked","$lineHeight","css","getCheckBoxPosition","Number","fontSize","green","red"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? '
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_checkBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","theme","text","$isDisabled","$shouldChangeOnLabelClick","$shouldShowAsSwitch","$isChecked","$lineHeight","css","getCheckBoxPosition","Number","fontSize","green","red"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $lineHeight?: number;\n $shouldChangeOnLabelClick: boolean;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $isDisabled, $shouldChangeOnLabelClick }) => ($shouldChangeOnLabelClick && !$isDisabled ? 'pointer' : 'default')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n transition: opacity 0.2s ease;\n user-select: none;\n width: 100%;\n\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxLabelProps) =>\n $shouldShowAsSwitch\n ? css`\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n height: 16px;\n left: 7px;\n top: ${$lineHeight\n ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n : '50%'};\n transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n transition: transform 0.2s ease;\n width: 16px;\n `\n : css`\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n height: 10px;\n left: 2px;\n opacity: ${$isChecked ? 1 : 0};\n top: ${$lineHeight\n ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n : 'calc(50% - 2px)'};\n transform: rotateZ(37deg) translateY(-50%);\n transition: opacity 0.2s ease;\n width: 5.5px;\n `}\n\n content: ' ';\n position: absolute;\n }\n\n &:before {\n background-color: ${({\n $isChecked,\n $shouldShowAsSwitch,\n theme,\n }: StyledCheckboxLabelProps) => {\n if ($shouldShowAsSwitch) {\n return $isChecked ? theme.green : theme.red;\n }\n\n return $isChecked ? theme['408'] : theme['403'];\n }};\n \n ${({ $shouldShowAsSwitch, theme }) =>\n !$shouldShowAsSwitch &&\n css`\n border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n `}\n \n border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n content: ' ';\n height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n position: absolute;\n transition: background-color 0.2s ease;\n width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxLabelProps) =>\n $lineHeight\n ? css`\n top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n 5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n `\n : css`\n top: 50%;\n transform: translateY(-50%);\n `}\n }\n }\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,6 +7,7 @@ const Checkbox = _ref => {
|
|
|
7
7
|
children,
|
|
8
8
|
isChecked,
|
|
9
9
|
isDisabled,
|
|
10
|
+
shouldChangeOnLabelClick = false,
|
|
10
11
|
labelClassName,
|
|
11
12
|
onChange,
|
|
12
13
|
shouldShowAsSwitch,
|
|
@@ -29,10 +30,11 @@ const Checkbox = _ref => {
|
|
|
29
30
|
type: "checkbox"
|
|
30
31
|
}), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
|
|
31
32
|
className: labelClassName,
|
|
32
|
-
htmlFor: uuid,
|
|
33
|
+
htmlFor: shouldChangeOnLabelClick ? uuid : 'nothing here',
|
|
33
34
|
$isChecked: isChecked ?? isActive,
|
|
34
35
|
$isDisabled: isDisabled,
|
|
35
36
|
$shouldShowAsSwitch: shouldShowAsSwitch,
|
|
37
|
+
$shouldChangeOnLabelClick: shouldChangeOnLabelClick,
|
|
36
38
|
$lineHeight: lineHeight
|
|
37
39
|
}, children));
|
|
38
40
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["React","useCallback","useMemo","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","_ref","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","handleChange","event","target","checked","uuid","lineHeight","undefined","createElement","disabled","id","type","className","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n ReactElement,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n /**\n * Text for checkbox or switch\n */\n children?: ReactElement | string;\n /**\n * Indicates whether the checkbox or switch is selected\n */\n isChecked?: boolean;\n /**\n * Disables the checkbox or switch so it cannot be toggled\n */\n isDisabled?: boolean;\n /**\n * Classname for the label\n */\n labelClassName?: string;\n /**\n * Function to be executed if the checked value changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Changes the design to use switch instead of checkbox\n */\n shouldShowAsSwitch?: boolean;\n /**\n * Whether the Checkbox should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n labelClassName,\n onChange,\n shouldShowAsSwitch,\n shouldShowCentered = false,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n const lineHeight = useMemo(\n () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n [children, shouldShowCentered],\n );\n\n return (\n <StyledCheckbox>\n <StyledCheckboxInput\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n <StyledCheckboxLabel\n className={labelClassName}\n htmlFor={uuid}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $lineHeight={lineHeight}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,OAAO,EACPC,QAAQ,QACL,OAAO;AACd,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SAASC,cAAc,EAAEC,mBAAmB,EAAEC,mBAAmB,QAAQ,mBAAmB;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["React","useCallback","useMemo","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","_ref","children","isChecked","isDisabled","shouldChangeOnLabelClick","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","handleChange","event","target","checked","uuid","lineHeight","undefined","createElement","disabled","id","type","className","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$shouldChangeOnLabelClick","$lineHeight","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n ReactElement,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n /**\n * Text for checkbox or switch\n */\n children?: ReactElement | string;\n /**\n * Indicates whether the checkbox or switch is selected\n */\n isChecked?: boolean;\n /**\n * Disables the checkbox or switch so it cannot be toggled\n */\n isDisabled?: boolean;\n /**\n * Classname for the label\n */\n labelClassName?: string;\n /**\n * Function to be executed if the checked value changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Whether the state should be changed on the label click\n */\n shouldChangeOnLabelClick?: boolean;\n /**\n * Changes the design to use switch instead of checkbox\n */\n shouldShowAsSwitch?: boolean;\n /**\n * Whether the Checkbox should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n shouldChangeOnLabelClick = false,\n labelClassName,\n onChange,\n shouldShowAsSwitch,\n shouldShowCentered = false,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n const lineHeight = useMemo(\n () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n [children, shouldShowCentered],\n );\n\n return (\n <StyledCheckbox>\n <StyledCheckboxInput\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n <StyledCheckboxLabel\n className={labelClassName}\n htmlFor={shouldChangeOnLabelClick ? uuid : 'nothing here'}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n $lineHeight={lineHeight}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,OAAO,EACPC,QAAQ,QACL,OAAO;AACd,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SAASC,cAAc,EAAEC,mBAAmB,EAAEC,mBAAmB,QAAQ,mBAAmB;AAqC5F,MAAMC,QAA2B,GAAGC,IAAA,IAS9B;EAAA,IAT+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,wBAAwB,GAAG,KAAK;IAChCC,cAAc;IACdC,QAAQ;IACRC,kBAAkB;IAClBC,kBAAkB,GAAG;EACzB,CAAC,GAAAR,IAAA;EACG,MAAM,CAACS,QAAQ,EAAEC,WAAW,CAAC,GAAGjB,QAAQ,CAACS,SAAS,IAAI,KAAK,CAAC;EAE5D,MAAMS,YAAY,GAAGpB,WAAW,CAC3BqB,KAAoC,IAAK;IACtCF,WAAW,CAACE,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOR,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACM,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACN,QAAQ,CACb,CAAC;EAED,MAAMS,IAAI,GAAGrB,OAAO,CAAC,CAAC;EAEtB,MAAMsB,UAAU,GAAGxB,OAAO,CACtB,MAAO,CAACS,QAAQ,IAAIO,kBAAkB,GAAGS,SAAS,GAAGtB,yBAAyB,CAAC,CAAE,EACjF,CAACM,QAAQ,EAAEO,kBAAkB,CACjC,CAAC;EAED,oBACIlB,KAAA,CAAA4B,aAAA,CAACtB,cAAc,qBACXN,KAAA,CAAA4B,aAAA,CAACrB,mBAAmB;IAChBiB,OAAO,EAAEZ,SAAU;IACnBiB,QAAQ,EAAEhB,UAAW;IACrBiB,EAAE,EAAEL,IAAK;IACTT,QAAQ,EAAEK,YAAa;IACvBU,IAAI,EAAC;EAAU,CAClB,CAAC,eACF/B,KAAA,CAAA4B,aAAA,CAACpB,mBAAmB;IAChBwB,SAAS,EAAEjB,cAAe;IAC1BkB,OAAO,EAAEnB,wBAAwB,GAAGW,IAAI,GAAG,cAAe;IAC1DS,UAAU,EAAEtB,SAAS,IAAIO,QAAS;IAClCgB,WAAW,EAAEtB,UAAW;IACxBuB,mBAAmB,EAAEnB,kBAAmB;IACxCoB,yBAAyB,EAAEvB,wBAAyB;IACpDwB,WAAW,EAAEZ;EAAW,GAEvBf,QACgB,CACT,CAAC;AAEzB,CAAC;AAEDF,QAAQ,CAAC8B,WAAW,GAAG,UAAU;AAEjC,eAAe9B,QAAQ","ignoreList":[]}
|
|
@@ -19,9 +19,10 @@ export const StyledCheckboxLabel = styled.label`
|
|
|
19
19
|
}};
|
|
20
20
|
cursor: ${_ref2 => {
|
|
21
21
|
let {
|
|
22
|
-
$isDisabled
|
|
22
|
+
$isDisabled,
|
|
23
|
+
$shouldChangeOnLabelClick
|
|
23
24
|
} = _ref2;
|
|
24
|
-
return $isDisabled ? '
|
|
25
|
+
return $shouldChangeOnLabelClick && !$isDisabled ? 'pointer' : 'default';
|
|
25
26
|
}};
|
|
26
27
|
opacity: ${_ref3 => {
|
|
27
28
|
let {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","names":["styled","css","getCheckBoxPosition","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","Number","fontSize","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? '
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","names":["styled","css","getCheckBoxPosition","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","$isDisabled","$shouldChangeOnLabelClick","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","Number","fontSize","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $lineHeight?: number;\n $shouldChangeOnLabelClick: boolean;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $isDisabled, $shouldChangeOnLabelClick }) => ($shouldChangeOnLabelClick && !$isDisabled ? 'pointer' : 'default')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n transition: opacity 0.2s ease;\n user-select: none;\n width: 100%;\n\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxLabelProps) =>\n $shouldShowAsSwitch\n ? css`\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n height: 16px;\n left: 7px;\n top: ${$lineHeight\n ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n : '50%'};\n transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n transition: transform 0.2s ease;\n width: 16px;\n `\n : css`\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n height: 10px;\n left: 2px;\n opacity: ${$isChecked ? 1 : 0};\n top: ${$lineHeight\n ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n : 'calc(50% - 2px)'};\n transform: rotateZ(37deg) translateY(-50%);\n transition: opacity 0.2s ease;\n width: 5.5px;\n `}\n\n content: ' ';\n position: absolute;\n }\n\n &:before {\n background-color: ${({\n $isChecked,\n $shouldShowAsSwitch,\n theme,\n }: StyledCheckboxLabelProps) => {\n if ($shouldShowAsSwitch) {\n return $isChecked ? theme.green : theme.red;\n }\n\n return $isChecked ? theme['408'] : theme['403'];\n }};\n \n ${({ $shouldShowAsSwitch, theme }) =>\n !$shouldShowAsSwitch &&\n css`\n border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n `}\n \n border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n content: ' ';\n height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n position: absolute;\n transition: background-color 0.2s ease;\n width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxLabelProps) =>\n $lineHeight\n ? css`\n top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n 5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n `\n : css`\n top: 50%;\n transform: translateY(-50%);\n `}\n }\n }\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -20,6 +20,10 @@ export type CheckboxProps = {
|
|
|
20
20
|
* Function to be executed if the checked value changes
|
|
21
21
|
*/
|
|
22
22
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
23
|
+
/**
|
|
24
|
+
* Whether the state should be changed on the label click
|
|
25
|
+
*/
|
|
26
|
+
shouldChangeOnLabelClick?: boolean;
|
|
23
27
|
/**
|
|
24
28
|
* Changes the design to use switch instead of checkbox
|
|
25
29
|
*/
|
|
@@ -7,6 +7,7 @@ type StyledCheckboxLabelProps = WithTheme<{
|
|
|
7
7
|
$isDisabled?: CheckboxProps['isDisabled'];
|
|
8
8
|
$isChecked?: CheckboxProps['isChecked'];
|
|
9
9
|
$lineHeight?: number;
|
|
10
|
+
$shouldChangeOnLabelClick: boolean;
|
|
10
11
|
}>;
|
|
11
12
|
export declare const StyledCheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxLabelProps>> & string;
|
|
12
13
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.902",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "7a7f142da9a7b3fda4a4608cc155fc2aba5e5633"
|
|
91
91
|
}
|