@chayns-components/core 5.0.0-beta.908 → 5.0.0-beta.909
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 +8 -3
- package/lib/cjs/components/checkbox/Checkbox.js.map +1 -1
- package/lib/cjs/components/checkbox/Checkbox.styles.js +17 -6
- package/lib/cjs/components/checkbox/Checkbox.styles.js.map +1 -1
- package/lib/esm/components/checkbox/Checkbox.js +9 -4
- package/lib/esm/components/checkbox/Checkbox.js.map +1 -1
- package/lib/esm/components/checkbox/Checkbox.styles.js +25 -5
- 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 +6 -1
- package/package.json +2 -2
|
@@ -17,7 +17,8 @@ const Checkbox = ({
|
|
|
17
17
|
labelClassName,
|
|
18
18
|
onChange,
|
|
19
19
|
shouldShowAsSwitch,
|
|
20
|
-
shouldShowCentered = false
|
|
20
|
+
shouldShowCentered = false,
|
|
21
|
+
shouldChangeOnLabelClick = false
|
|
21
22
|
}) => {
|
|
22
23
|
const [isActive, setIsActive] = (0, _react.useState)(isChecked ?? false);
|
|
23
24
|
const handleChange = (0, _react.useCallback)(event => {
|
|
@@ -34,13 +35,17 @@ const Checkbox = ({
|
|
|
34
35
|
id: uuid,
|
|
35
36
|
onChange: handleChange,
|
|
36
37
|
type: "checkbox"
|
|
37
|
-
}), /*#__PURE__*/_react.default.createElement(_Checkbox.
|
|
38
|
-
className: labelClassName,
|
|
38
|
+
}), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxBox, {
|
|
39
39
|
htmlFor: uuid,
|
|
40
40
|
$isChecked: isChecked ?? isActive,
|
|
41
41
|
$isDisabled: isDisabled,
|
|
42
42
|
$shouldShowAsSwitch: shouldShowAsSwitch,
|
|
43
43
|
$lineHeight: lineHeight
|
|
44
|
+
}), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxLabel, {
|
|
45
|
+
className: labelClassName,
|
|
46
|
+
$isDisabled: isDisabled,
|
|
47
|
+
$shouldChangeOnLabelClick: shouldChangeOnLabelClick,
|
|
48
|
+
htmlFor: shouldChangeOnLabelClick ? uuid : undefined
|
|
44
49
|
}, children));
|
|
45
50
|
};
|
|
46
51
|
Checkbox.displayName = 'Checkbox';
|
|
@@ -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","
|
|
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","shouldChangeOnLabelClick","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","StyledCheckboxLabel","className","$shouldChangeOnLabelClick","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 {\n StyledCheckbox,\n StyledCheckboxBox,\n StyledCheckboxInput,\n StyledCheckboxLabel,\n} 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 label should change the state\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 labelClassName,\n onChange,\n shouldShowAsSwitch,\n shouldShowCentered = false,\n shouldChangeOnLabelClick = 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 <StyledCheckboxBox\n htmlFor={uuid}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $lineHeight={lineHeight}\n />\n <StyledCheckboxLabel\n className={labelClassName}\n $isDisabled={isDisabled}\n $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckbox = void 0;
|
|
6
|
+
exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckboxBox = exports.StyledCheckbox = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
var _checkBox = require("../../utils/checkBox");
|
|
9
9
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
@@ -18,7 +18,7 @@ const StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
|
|
|
18
18
|
const StyledCheckboxInput = exports.StyledCheckboxInput = _styledComponents.default.input`
|
|
19
19
|
display: none;
|
|
20
20
|
`;
|
|
21
|
-
const
|
|
21
|
+
const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.label`
|
|
22
22
|
color: ${({
|
|
23
23
|
theme
|
|
24
24
|
}) => theme.text};
|
|
@@ -33,7 +33,6 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
|
|
|
33
33
|
}) => $shouldShowAsSwitch ? '48px' : '20px'};
|
|
34
34
|
transition: opacity 0.2s ease;
|
|
35
35
|
user-select: none;
|
|
36
|
-
width: 100%;
|
|
37
36
|
|
|
38
37
|
&:after {
|
|
39
38
|
${({
|
|
@@ -78,14 +77,14 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
|
|
|
78
77
|
}
|
|
79
78
|
return $isChecked ? theme['408'] : theme['403'];
|
|
80
79
|
}};
|
|
81
|
-
|
|
80
|
+
|
|
82
81
|
${({
|
|
83
82
|
$shouldShowAsSwitch,
|
|
84
83
|
theme
|
|
85
84
|
}) => !$shouldShowAsSwitch && (0, _styledComponents.css)`
|
|
86
85
|
border: 1px solid rgba(${theme['409-rgb']}, 0.5);
|
|
87
86
|
`}
|
|
88
|
-
|
|
87
|
+
|
|
89
88
|
border-radius: ${({
|
|
90
89
|
$shouldShowAsSwitch
|
|
91
90
|
}) => $shouldShowAsSwitch ? '100px' : 0};
|
|
@@ -111,7 +110,19 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
|
|
|
111
110
|
top: 50%;
|
|
112
111
|
transform: translateY(-50%);
|
|
113
112
|
`}
|
|
114
|
-
}
|
|
115
113
|
}
|
|
114
|
+
}
|
|
115
|
+
`;
|
|
116
|
+
const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.default.label`
|
|
117
|
+
color: ${({
|
|
118
|
+
theme
|
|
119
|
+
}) => theme.text};
|
|
120
|
+
cursor: ${({
|
|
121
|
+
$shouldChangeOnLabelClick
|
|
122
|
+
}) => !$shouldChangeOnLabelClick ? 'default' : 'pointer'};
|
|
123
|
+
opacity: ${({
|
|
124
|
+
$isDisabled
|
|
125
|
+
}) => $isDisabled ? 0.5 : 1};
|
|
126
|
+
transition: opacity 0.2s ease;
|
|
116
127
|
`;
|
|
117
128
|
//# sourceMappingURL=Checkbox.styles.js.map
|
|
@@ -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","
|
|
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","StyledCheckboxBox","label","theme","text","$isDisabled","$shouldShowAsSwitch","$isChecked","$lineHeight","css","getCheckBoxPosition","Number","fontSize","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"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 StyledCheckboxBoxProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\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\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxBoxProps) =>\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 }: StyledCheckboxBoxProps) => {\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 }: StyledCheckboxBoxProps) =>\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\ntype StyledCheckboxLabelProps = WithTheme<{\n $isDisabled?: CheckboxProps['isDisabled'];\n $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $shouldChangeOnLabelClick }) =>\n !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAA2D,SAAAE,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,SAAAJ,wBAAAI,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;AAIpD,MAAMW,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAG;AACxC;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,mBAAmB,GAAAH,OAAA,CAAAG,mBAAA,GAAGF,yBAAM,CAACG,KAAK;AAC/C;AACA,CAAC;AASM,MAAMC,iBAAiB,GAAAL,OAAA,CAAAK,iBAAA,GAAGJ,yBAAM,CAACK,KAA6B;AACrE,aAAa,CAAC;EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC9D,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,oBAAoB,CAAC;EAAEC;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACxF;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,UAAU;EAAED,mBAAmB;EAAEE,WAAW;EAAEL;AAA8B,CAAC,KAC9EG,mBAAmB,GACb,IAAAG,qBAAG;AACrB;AACA;AACA;AACA;AACA;AACA,6BAA6BD,WAAW,GACZ,GAAG,CAAC,IAAAE,6BAAmB,EAACC,MAAM,CAACR,KAAK,CAACS,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAC7D,KAAK;AACjC,8CAA8CL,UAAU,GAAG,MAAM,GAAG,CAAC;AACrE;AACA;AACA,mBAAmB,GACD,IAAAE,qBAAG;AACrB;AACA;AACA;AACA;AACA,iCAAiCF,UAAU,GAAG,CAAC,GAAG,CAAC;AACnD,6BAA6BC,WAAW,GACZ,GAAG,CAAC,IAAAE,6BAAmB,EAACC,MAAM,CAACR,KAAK,CAACS,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAC7D,iBAAiB;AAC7C;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,CAAC;EACjBL,UAAU;EACVD,mBAAmB;EACnBH;AACoB,CAAC,KAAK;EAC1B,IAAIG,mBAAmB,EAAE;IACrB,OAAOC,UAAU,GAAGJ,KAAK,CAACU,KAAK,GAAGV,KAAK,CAACW,GAAG;EAC/C;EAEA,OAAOP,UAAU,GAAGJ,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AACT;AACA,UAAU,CAAC;EAAEG,mBAAmB;EAAEH;AAAM,CAAC,KAC7B,CAACG,mBAAmB,IACpB,IAAAG,qBAAG;AACf,yCAAyCN,KAAK,CAAC,SAAS,CAAC;AACzD,aAAa;AACb;AACA,yBAAyB,CAAC;EAAEG;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,OAAO,GAAG,CAAE;AACzF;AACA,kBAAkB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACtF,gBAAgB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,CAAE;AAC/E;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACrF,UAAU,CAAC;EAAEE,WAAW;EAAEL,KAAK;EAAEG;AAA4C,CAAC,KAClEE,WAAW,GACL,IAAAC,qBAAG;AACrB,6BAA6B,IAAAC,6BAAmB,EAACC,MAAM,CAACR,KAAK,CAACS,QAAQ,CAAC,CAAC,IAClD,CAAC,IAAIN,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAC;AACvD,mBAAmB,GACD,IAAAG,qBAAG;AACrB;AACA;AACA,mBAAmB;AACnB;AACA;AACA,CAAC;AAOM,MAAMM,mBAAmB,GAAAnB,OAAA,CAAAmB,mBAAA,GAAGlB,yBAAM,CAACK,KAA+B;AACzE,aAAa,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAACC,IAAI;AAChE,cAAc,CAAC;EAAEY;AAA0B,CAAC,KACpC,CAACA,yBAAyB,GAAG,SAAS,GAAG,SAAS;AAC1D,eAAe,CAAC;EAAEX;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
2
2
|
import { useUuid } from '../../hooks/uuid';
|
|
3
3
|
import { getHeightOfSingleTextLine } from '../../utils/calculate';
|
|
4
|
-
import { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';
|
|
4
|
+
import { StyledCheckbox, StyledCheckboxBox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';
|
|
5
5
|
const Checkbox = _ref => {
|
|
6
6
|
let {
|
|
7
7
|
children,
|
|
@@ -10,7 +10,8 @@ const Checkbox = _ref => {
|
|
|
10
10
|
labelClassName,
|
|
11
11
|
onChange,
|
|
12
12
|
shouldShowAsSwitch,
|
|
13
|
-
shouldShowCentered = false
|
|
13
|
+
shouldShowCentered = false,
|
|
14
|
+
shouldChangeOnLabelClick = false
|
|
14
15
|
} = _ref;
|
|
15
16
|
const [isActive, setIsActive] = useState(isChecked ?? false);
|
|
16
17
|
const handleChange = useCallback(event => {
|
|
@@ -27,13 +28,17 @@ const Checkbox = _ref => {
|
|
|
27
28
|
id: uuid,
|
|
28
29
|
onChange: handleChange,
|
|
29
30
|
type: "checkbox"
|
|
30
|
-
}), /*#__PURE__*/React.createElement(
|
|
31
|
-
className: labelClassName,
|
|
31
|
+
}), /*#__PURE__*/React.createElement(StyledCheckboxBox, {
|
|
32
32
|
htmlFor: uuid,
|
|
33
33
|
$isChecked: isChecked ?? isActive,
|
|
34
34
|
$isDisabled: isDisabled,
|
|
35
35
|
$shouldShowAsSwitch: shouldShowAsSwitch,
|
|
36
36
|
$lineHeight: lineHeight
|
|
37
|
+
}), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
|
|
38
|
+
className: labelClassName,
|
|
39
|
+
$isDisabled: isDisabled,
|
|
40
|
+
$shouldChangeOnLabelClick: shouldChangeOnLabelClick,
|
|
41
|
+
htmlFor: shouldChangeOnLabelClick ? uuid : undefined
|
|
37
42
|
}, children));
|
|
38
43
|
};
|
|
39
44
|
Checkbox.displayName = 'Checkbox';
|
|
@@ -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","
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["React","useCallback","useMemo","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","_ref","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","handleChange","event","target","checked","uuid","lineHeight","undefined","createElement","disabled","id","type","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","className","$shouldChangeOnLabelClick","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 {\n StyledCheckbox,\n StyledCheckboxBox,\n StyledCheckboxInput,\n StyledCheckboxLabel,\n} 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 label should change the state\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 labelClassName,\n onChange,\n shouldShowAsSwitch,\n shouldShowCentered = false,\n shouldChangeOnLabelClick = 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 <StyledCheckboxBox\n htmlFor={uuid}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $lineHeight={lineHeight}\n />\n <StyledCheckboxLabel\n className={labelClassName}\n $isDisabled={isDisabled}\n $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\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,SACIC,cAAc,EACdC,iBAAiB,EACjBC,mBAAmB,EACnBC,mBAAmB,QAChB,mBAAmB;AAqC1B,MAAMC,QAA2B,GAAGC,IAAA,IAS9B;EAAA,IAT+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,cAAc;IACdC,QAAQ;IACRC,kBAAkB;IAClBC,kBAAkB,GAAG,KAAK;IAC1BC,wBAAwB,GAAG;EAC/B,CAAC,GAAAR,IAAA;EACG,MAAM,CAACS,QAAQ,EAAEC,WAAW,CAAC,GAAGlB,QAAQ,CAACU,SAAS,IAAI,KAAK,CAAC;EAE5D,MAAMS,YAAY,GAAGrB,WAAW,CAC3BsB,KAAoC,IAAK;IACtCF,WAAW,CAACE,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACO,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACP,QAAQ,CACb,CAAC;EAED,MAAMU,IAAI,GAAGtB,OAAO,CAAC,CAAC;EAEtB,MAAMuB,UAAU,GAAGzB,OAAO,CACtB,MAAO,CAACU,QAAQ,IAAIM,kBAAkB,GAAGU,SAAS,GAAGvB,yBAAyB,CAAC,CAAE,EACjF,CAACO,QAAQ,EAAEM,kBAAkB,CACjC,CAAC;EAED,oBACIlB,KAAA,CAAA6B,aAAA,CAACvB,cAAc,qBACXN,KAAA,CAAA6B,aAAA,CAACrB,mBAAmB;IAChBiB,OAAO,EAAEZ,SAAU;IACnBiB,QAAQ,EAAEhB,UAAW;IACrBiB,EAAE,EAAEL,IAAK;IACTV,QAAQ,EAAEM,YAAa;IACvBU,IAAI,EAAC;EAAU,CAClB,CAAC,eACFhC,KAAA,CAAA6B,aAAA,CAACtB,iBAAiB;IACd0B,OAAO,EAAEP,IAAK;IACdQ,UAAU,EAAErB,SAAS,IAAIO,QAAS;IAClCe,WAAW,EAAErB,UAAW;IACxBsB,mBAAmB,EAAEnB,kBAAmB;IACxCoB,WAAW,EAAEV;EAAW,CAC3B,CAAC,eACF3B,KAAA,CAAA6B,aAAA,CAACpB,mBAAmB;IAChB6B,SAAS,EAAEvB,cAAe;IAC1BoB,WAAW,EAAErB,UAAW;IACxByB,yBAAyB,EAAEpB,wBAAyB;IACpDc,OAAO,EAAEd,wBAAwB,GAAGO,IAAI,GAAGE;EAAU,GAEpDhB,QACgB,CACT,CAAC;AAEzB,CAAC;AAEDF,QAAQ,CAAC8B,WAAW,GAAG,UAAU;AAEjC,eAAe9B,QAAQ","ignoreList":[]}
|
|
@@ -10,7 +10,7 @@ export const StyledCheckbox = styled.div`
|
|
|
10
10
|
export const StyledCheckboxInput = styled.input`
|
|
11
11
|
display: none;
|
|
12
12
|
`;
|
|
13
|
-
export const
|
|
13
|
+
export const StyledCheckboxBox = styled.label`
|
|
14
14
|
color: ${_ref => {
|
|
15
15
|
let {
|
|
16
16
|
theme
|
|
@@ -37,7 +37,6 @@ export const StyledCheckboxLabel = styled.label`
|
|
|
37
37
|
}};
|
|
38
38
|
transition: opacity 0.2s ease;
|
|
39
39
|
user-select: none;
|
|
40
|
-
width: 100%;
|
|
41
40
|
|
|
42
41
|
&:after {
|
|
43
42
|
${_ref5 => {
|
|
@@ -86,7 +85,7 @@ export const StyledCheckboxLabel = styled.label`
|
|
|
86
85
|
}
|
|
87
86
|
return $isChecked ? theme['408'] : theme['403'];
|
|
88
87
|
}};
|
|
89
|
-
|
|
88
|
+
|
|
90
89
|
${_ref7 => {
|
|
91
90
|
let {
|
|
92
91
|
$shouldShowAsSwitch,
|
|
@@ -96,7 +95,7 @@ export const StyledCheckboxLabel = styled.label`
|
|
|
96
95
|
border: 1px solid rgba(${theme['409-rgb']}, 0.5);
|
|
97
96
|
`;
|
|
98
97
|
}}
|
|
99
|
-
|
|
98
|
+
|
|
100
99
|
border-radius: ${_ref8 => {
|
|
101
100
|
let {
|
|
102
101
|
$shouldShowAsSwitch
|
|
@@ -137,7 +136,28 @@ export const StyledCheckboxLabel = styled.label`
|
|
|
137
136
|
transform: translateY(-50%);
|
|
138
137
|
`;
|
|
139
138
|
}}
|
|
140
|
-
}
|
|
141
139
|
}
|
|
140
|
+
}
|
|
141
|
+
`;
|
|
142
|
+
export const StyledCheckboxLabel = styled.label`
|
|
143
|
+
color: ${_ref13 => {
|
|
144
|
+
let {
|
|
145
|
+
theme
|
|
146
|
+
} = _ref13;
|
|
147
|
+
return theme.text;
|
|
148
|
+
}};
|
|
149
|
+
cursor: ${_ref14 => {
|
|
150
|
+
let {
|
|
151
|
+
$shouldChangeOnLabelClick
|
|
152
|
+
} = _ref14;
|
|
153
|
+
return !$shouldChangeOnLabelClick ? 'default' : 'pointer';
|
|
154
|
+
}};
|
|
155
|
+
opacity: ${_ref15 => {
|
|
156
|
+
let {
|
|
157
|
+
$isDisabled
|
|
158
|
+
} = _ref15;
|
|
159
|
+
return $isDisabled ? 0.5 : 1;
|
|
160
|
+
}};
|
|
161
|
+
transition: opacity 0.2s ease;
|
|
142
162
|
`;
|
|
143
163
|
//# sourceMappingURL=Checkbox.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","names":["styled","css","getCheckBoxPosition","StyledCheckbox","div","StyledCheckboxInput","input","
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","names":["styled","css","getCheckBoxPosition","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBox","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","Number","fontSize","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12","StyledCheckboxLabel","_ref13","_ref14","$shouldChangeOnLabelClick","_ref15"],"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 StyledCheckboxBoxProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\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\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxBoxProps) =>\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 }: StyledCheckboxBoxProps) => {\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 }: StyledCheckboxBoxProps) =>\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\ntype StyledCheckboxLabelProps = WithTheme<{\n $isDisabled?: CheckboxProps['isDisabled'];\n $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $shouldChangeOnLabelClick }) =>\n !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\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 label should change the state
|
|
25
|
+
*/
|
|
26
|
+
shouldChangeOnLabelClick?: boolean;
|
|
23
27
|
/**
|
|
24
28
|
* Changes the design to use switch instead of checkbox
|
|
25
29
|
*/
|
|
@@ -2,11 +2,16 @@ import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
|
|
|
2
2
|
import type { CheckboxProps } from './Checkbox';
|
|
3
3
|
export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
4
4
|
export declare const StyledCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
|
|
5
|
-
type
|
|
5
|
+
type StyledCheckboxBoxProps = WithTheme<{
|
|
6
6
|
$shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];
|
|
7
7
|
$isDisabled?: CheckboxProps['isDisabled'];
|
|
8
8
|
$isChecked?: CheckboxProps['isChecked'];
|
|
9
9
|
$lineHeight?: number;
|
|
10
10
|
}>;
|
|
11
|
+
export declare const StyledCheckboxBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxBoxProps>> & string;
|
|
12
|
+
type StyledCheckboxLabelProps = WithTheme<{
|
|
13
|
+
$isDisabled?: CheckboxProps['isDisabled'];
|
|
14
|
+
$shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];
|
|
15
|
+
}>;
|
|
11
16
|
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
17
|
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.909",
|
|
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": "0167ba09548a532679a1116dee1bf7be4561edb6"
|
|
91
91
|
}
|