@chayns-components/core 5.0.0-beta.340 → 5.0.0-beta.342
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/components/checkbox/Checkbox.d.ts +2 -2
- package/lib/components/checkbox/Checkbox.js +4 -1
- package/lib/components/checkbox/Checkbox.js.map +1 -1
- package/lib/components/checkbox/Checkbox.styles.d.ts +6 -1
- package/lib/components/checkbox/Checkbox.styles.js +20 -8
- package/lib/components/checkbox/Checkbox.styles.js.map +1 -1
- package/lib/utils/calculate.d.ts +2 -0
- package/lib/utils/calculate.js +30 -1
- package/lib/utils/calculate.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { ChangeEventHandler, FC,
|
|
1
|
+
import { ChangeEventHandler, FC, ReactElement } from 'react';
|
|
2
2
|
export type CheckboxProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Text for checkbox or switch
|
|
5
5
|
*/
|
|
6
|
-
children?:
|
|
6
|
+
children?: ReactElement;
|
|
7
7
|
/**
|
|
8
8
|
* Indicates whether the checkbox or switch is selected
|
|
9
9
|
*/
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _uuid = require("../../hooks/uuid");
|
|
9
|
+
var _calculate = require("../../utils/calculate");
|
|
9
10
|
var _Checkbox = require("./Checkbox.styles");
|
|
10
11
|
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); }
|
|
11
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -25,6 +26,7 @@ const Checkbox = _ref => {
|
|
|
25
26
|
}
|
|
26
27
|
}, [onChange]);
|
|
27
28
|
const uuid = (0, _uuid.useUuid)();
|
|
29
|
+
const lineHeight = (0, _react.useMemo)(() => children ? (0, _calculate.getHeightOfSingleTextLine)(children) : undefined, [children]);
|
|
28
30
|
return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, null, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
|
|
29
31
|
checked: isChecked,
|
|
30
32
|
disabled: isDisabled,
|
|
@@ -35,7 +37,8 @@ const Checkbox = _ref => {
|
|
|
35
37
|
htmlFor: uuid,
|
|
36
38
|
isChecked: isChecked ?? isActive,
|
|
37
39
|
isDisabled: isDisabled,
|
|
38
|
-
shouldShowAsSwitch: shouldShowAsSwitch
|
|
40
|
+
shouldShowAsSwitch: shouldShowAsSwitch,
|
|
41
|
+
lineHeight: lineHeight
|
|
39
42
|
}, children));
|
|
40
43
|
};
|
|
41
44
|
Checkbox.displayName = 'Checkbox';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Checkbox","_ref","children","isChecked","isDisabled","onChange","shouldShowAsSwitch","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","htmlFor","displayName","_default","exports"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n
|
|
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","prototype","hasOwnProperty","call","i","set","Checkbox","_ref","children","isChecked","isDisabled","onChange","shouldShowAsSwitch","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","getHeightOfSingleTextLine","undefined","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","htmlFor","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;\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 * 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\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n onChange,\n shouldShowAsSwitch,\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 ? getHeightOfSingleTextLine(children) : undefined),\n [children],\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 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":"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"}
|
|
@@ -576,6 +576,11 @@ export declare const StyledCheckboxInput: import("styled-components").IStyledCom
|
|
|
576
576
|
onTransitionEnd?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
|
|
577
577
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
|
|
578
578
|
}>;
|
|
579
|
-
type StyledCheckboxLabelProps = WithTheme<
|
|
579
|
+
type StyledCheckboxLabelProps = WithTheme<{
|
|
580
|
+
shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];
|
|
581
|
+
isDisabled?: CheckboxProps['isDisabled'];
|
|
582
|
+
isChecked?: CheckboxProps['isChecked'];
|
|
583
|
+
lineHeight?: number;
|
|
584
|
+
}>;
|
|
580
585
|
export declare const StyledCheckboxLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxLabelProps>>;
|
|
581
586
|
export {};
|
|
@@ -47,7 +47,8 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
|
|
|
47
47
|
${_ref5 => {
|
|
48
48
|
let {
|
|
49
49
|
isChecked,
|
|
50
|
-
shouldShowAsSwitch
|
|
50
|
+
shouldShowAsSwitch,
|
|
51
|
+
lineHeight
|
|
51
52
|
} = _ref5;
|
|
52
53
|
return shouldShowAsSwitch ? (0, _styledComponents.css)`
|
|
53
54
|
background-color: white;
|
|
@@ -55,18 +56,18 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
|
|
|
55
56
|
box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
|
|
56
57
|
height: 16px;
|
|
57
58
|
left: 7px;
|
|
58
|
-
top:
|
|
59
|
-
transform: translateX(${isChecked ? '18px' : 0});
|
|
59
|
+
top: ${lineHeight ? `${lineHeight / 1.5}px` : '50%'};
|
|
60
|
+
transform: translateX(${isChecked ? '18px' : 0}) translateY(-50%);
|
|
60
61
|
transition: transform 0.2s ease;
|
|
61
62
|
width: 16px;
|
|
62
63
|
` : (0, _styledComponents.css)`
|
|
63
64
|
border-right: 2px solid #fff;
|
|
64
65
|
border-bottom: 2px solid #fff;
|
|
65
66
|
height: 10px;
|
|
66
|
-
left:
|
|
67
|
+
left: 2px;
|
|
67
68
|
opacity: ${isChecked ? 1 : 0};
|
|
68
|
-
top:
|
|
69
|
-
transform: rotateZ(37deg);
|
|
69
|
+
top: ${lineHeight ? `calc(${lineHeight / 1.5}px - 2px)` : 'calc(50% - 2px)'};
|
|
70
|
+
transform: rotateZ(37deg) translateY(-50%);
|
|
70
71
|
transition: opacity 0.2s ease;
|
|
71
72
|
width: 5.5px;
|
|
72
73
|
`;
|
|
@@ -74,7 +75,6 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
|
|
|
74
75
|
|
|
75
76
|
content: ' ';
|
|
76
77
|
position: absolute;
|
|
77
|
-
transform-origin: 100% 100%;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
&:before {
|
|
@@ -115,7 +115,6 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
|
|
|
115
115
|
return shouldShowAsSwitch ? '10px' : 0;
|
|
116
116
|
}};
|
|
117
117
|
position: absolute;
|
|
118
|
-
top: 5px;
|
|
119
118
|
transition: background-color 0.2s ease;
|
|
120
119
|
width: ${_ref11 => {
|
|
121
120
|
let {
|
|
@@ -123,6 +122,19 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
|
|
|
123
122
|
} = _ref11;
|
|
124
123
|
return shouldShowAsSwitch ? '28px' : '15px';
|
|
125
124
|
}};
|
|
125
|
+
${_ref12 => {
|
|
126
|
+
let {
|
|
127
|
+
lineHeight
|
|
128
|
+
} = _ref12;
|
|
129
|
+
return lineHeight ? (0, _styledComponents.css)`
|
|
130
|
+
top: ${lineHeight / 1.5}px;
|
|
131
|
+
transform: translateY(-50%);
|
|
132
|
+
` : (0, _styledComponents.css)`
|
|
133
|
+
top: 50%;
|
|
134
|
+
transform: translateY(-50%);
|
|
135
|
+
`;
|
|
136
|
+
}}
|
|
137
|
+
}
|
|
126
138
|
}
|
|
127
139
|
`;
|
|
128
140
|
//# sourceMappingURL=Checkbox.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","isDisabled","_ref3","_ref4","shouldShowAsSwitch","_ref5","isChecked","css","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11"],"sources":["../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\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`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","isDisabled","_ref3","_ref4","shouldShowAsSwitch","_ref5","isChecked","lineHeight","css","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12"],"sources":["../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\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`;\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 ? '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 }) =>\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 ? `${lineHeight / 1.5}px` : '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 ? `calc(${lineHeight / 1.5}px - 2px)` : '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 border: 1px solid rgba(${({ theme }: StyledCheckboxLabelProps) => theme['409-rgb']}, 0.5);\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 }) =>\n lineHeight\n ? css`\n top: ${lineHeight / 1.5}px;\n transform: translateY(-50%);\n `\n : css`\n top: 50%;\n transform: translateY(-50%);\n `}\n }\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,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,SAAAH,wBAAAG,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,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAIzC,MAAMY,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAI;AACzC;AACA;AACA;AACA,CAAC;AAEM,MAAMC,mBAAmB,GAAAH,OAAA,CAAAG,mBAAA,GAAGF,yBAAM,CAACG,KAAM;AAChD;AACA,CAAC;AASM,MAAMC,mBAAmB,GAAAL,OAAA,CAAAK,mBAAA,GAAGJ,yBAAM,CAACK,KAAgC;AAC1E,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AACjE,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAE;AACvE,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAW,CAAC,GAAAC,KAAA;EAAA,OAAMD,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D,oBAAoBE,KAAA;EAAA,IAAC;IAAEC;EAAmB,CAAC,GAAAD,KAAA;EAAA,OAAMC,kBAAkB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAE;AACvF;AACA;AACA;AACA;AACA,UAAUC,KAAA;EAAA,IAAC;IAAEC,SAAS;IAAEF,kBAAkB;IAAEG;EAAW,CAAC,GAAAF,KAAA;EAAA,OAC5CD,kBAAkB,GACZ,IAAAI,qBAAG,CAAC;AACtB;AACA;AACA;AACA;AACA;AACA,6BAA6BD,UAAU,GAAI,GAAEA,UAAU,GAAG,GAAI,IAAG,GAAG,KAAM;AAC1E,8CAA8CD,SAAS,GAAG,MAAM,GAAG,CAAE;AACrE;AACA;AACA,mBAAmB,GACD,IAAAE,qBAAG,CAAC;AACtB;AACA;AACA;AACA;AACA,iCAAiCF,SAAS,GAAG,CAAC,GAAG,CAAE;AACnD,6BAA6BC,UAAU,GAAI,QAAOA,UAAU,GAAG,GAAI,WAAU,GAAG,iBAAkB;AAClG;AACA;AACA;AACA,mBAAmB;AAAA,CAAC;AACpB;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BE,KAAA,IAIY;EAAA,IAJX;IACjBH,SAAS;IACTF,kBAAkB;IAClBN;EACsB,CAAC,GAAAW,KAAA;EACvB,IAAIL,kBAAkB,EAAE;IACpB,OAAOE,SAAS,GAAGR,KAAK,CAACY,KAAK,GAAGZ,KAAK,CAACa,GAAG;EAC9C;EAEA,OAAOL,SAAS,GAAGR,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAClD,CAAE;AACV,iCAAiCc,KAAA;EAAA,IAAC;IAAEd;EAAgC,CAAC,GAAAc,KAAA;EAAA,OAAKd,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC3F,yBAAyBe,KAAA;EAAA,IAAC;IAAET;EAAmB,CAAC,GAAAS,KAAA;EAAA,OAAMT,kBAAkB,GAAG,OAAO,GAAG,CAAC;AAAA,CAAE;AACxF;AACA,kBAAkBU,KAAA;EAAA,IAAC;IAAEV;EAAmB,CAAC,GAAAU,KAAA;EAAA,OAAMV,kBAAkB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAE;AACrF,gBAAgBW,MAAA;EAAA,IAAC;IAAEX;EAAmB,CAAC,GAAAW,MAAA;EAAA,OAAMX,kBAAkB,GAAG,MAAM,GAAG,CAAC;AAAA,CAAE;AAC9E;AACA;AACA,iBAAiBY,MAAA;EAAA,IAAC;IAAEZ;EAAmB,CAAC,GAAAY,MAAA;EAAA,OAAMZ,kBAAkB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAE;AACpF,UAAUa,MAAA;EAAA,IAAC;IAAEV;EAAW,CAAC,GAAAU,MAAA;EAAA,OACbV,UAAU,GACJ,IAAAC,qBAAG,CAAC;AACtB,6BAA6BD,UAAU,GAAG,GAAI;AAC9C;AACA,mBAAmB,GACD,IAAAC,qBAAG,CAAC;AACtB;AACA;AACA,mBAAmB;AAAA,CAAC;AACpB;AACA;AACA,CAAC"}
|
package/lib/utils/calculate.d.ts
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
1
2
|
export declare const calculateContentWidth: (texts: string[]) => number;
|
|
2
3
|
export declare const calculateContentHeight: (elements: string[]) => number;
|
|
4
|
+
export declare const getHeightOfSingleTextLine: (element: ReactElement) => number | undefined;
|
package/lib/utils/calculate.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.calculateContentWidth = exports.calculateContentHeight = void 0;
|
|
6
|
+
exports.getHeightOfSingleTextLine = exports.calculateContentWidth = exports.calculateContentHeight = void 0;
|
|
7
7
|
const calculateContentWidth = texts => {
|
|
8
8
|
const length = [];
|
|
9
9
|
texts.forEach(text => {
|
|
@@ -37,4 +37,33 @@ const calculateContentHeight = elements => {
|
|
|
37
37
|
return length.reduce((partialSum, a) => partialSum + a, 0);
|
|
38
38
|
};
|
|
39
39
|
exports.calculateContentHeight = calculateContentHeight;
|
|
40
|
+
const getHeightOfSingleTextLine = element => {
|
|
41
|
+
const isTextNode = typeof element === 'string';
|
|
42
|
+
const isChildrenTextNode = !isTextNode ?
|
|
43
|
+
// ToDo find a fix for this error
|
|
44
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
45
|
+
!Array.isArray(element.props.children) && typeof element.props.children[0] === 'string' : false;
|
|
46
|
+
if (isTextNode || isChildrenTextNode) {
|
|
47
|
+
const span = document.createElement('span');
|
|
48
|
+
if (isChildrenTextNode) {
|
|
49
|
+
const elementStyles = element.props.style;
|
|
50
|
+
if (elementStyles) {
|
|
51
|
+
Object.keys(elementStyles).forEach(styleKey => {
|
|
52
|
+
// ToDo find a fix for these errors
|
|
53
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
54
|
+
// @ts-ignore
|
|
55
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
56
|
+
span.style[styleKey] = elementStyles[styleKey];
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
span.innerText = 'A';
|
|
61
|
+
document.body.appendChild(span);
|
|
62
|
+
const height = span.offsetHeight;
|
|
63
|
+
document.body.removeChild(span);
|
|
64
|
+
return height;
|
|
65
|
+
}
|
|
66
|
+
return undefined;
|
|
67
|
+
};
|
|
68
|
+
exports.getHeightOfSingleTextLine = getHeightOfSingleTextLine;
|
|
40
69
|
//# sourceMappingURL=calculate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calculate.js","names":["calculateContentWidth","texts","length","forEach","text","div","document","createElement","style","visibility","position","width","whiteSpace","body","appendChild","innerText","push","offsetWidth","removeChild","Math","max","apply","exports","calculateContentHeight","elements","element","margin","offsetHeight","reduce","partialSum","a"],"sources":["../../src/utils/calculate.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"calculate.js","names":["calculateContentWidth","texts","length","forEach","text","div","document","createElement","style","visibility","position","width","whiteSpace","body","appendChild","innerText","push","offsetWidth","removeChild","Math","max","apply","exports","calculateContentHeight","elements","element","margin","offsetHeight","reduce","partialSum","a","getHeightOfSingleTextLine","isTextNode","isChildrenTextNode","Array","isArray","props","children","span","elementStyles","Object","keys","styleKey","height","undefined"],"sources":["../../src/utils/calculate.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from 'react';\n\nexport const calculateContentWidth = (texts: string[]) => {\n const length: number[] = [];\n\n texts.forEach((text) => {\n const div = document.createElement('div');\n div.style.visibility = 'hidden';\n div.style.position = 'absolute';\n div.style.width = 'auto';\n div.style.whiteSpace = 'nowrap';\n document.body.appendChild(div);\n\n div.innerText = text;\n\n length.push(div.offsetWidth);\n\n document.body.removeChild(div);\n });\n\n return Math.max.apply(null, length);\n};\n\nexport const calculateContentHeight = (elements: string[]) => {\n const length: number[] = [];\n\n elements.forEach((element: string) => {\n const div = document.createElement('p');\n div.style.visibility = 'hidden';\n div.style.position = 'absolute';\n div.style.width = 'auto';\n div.style.margin = '5px';\n div.style.whiteSpace = 'nowrap';\n document.body.appendChild(div);\n div.innerText = element;\n\n length.push(div.offsetHeight);\n\n document.body.removeChild(div);\n });\n\n return length.reduce((partialSum, a) => partialSum + a, 0);\n};\n\nexport const getHeightOfSingleTextLine = (element: ReactElement) => {\n const isTextNode = typeof element === 'string';\n const isChildrenTextNode = !isTextNode\n ? // ToDo find a fix for this error\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n !Array.isArray(element.props.children) && typeof element.props.children[0] === 'string'\n : false;\n\n if (isTextNode || isChildrenTextNode) {\n const span = document.createElement('span');\n\n if (isChildrenTextNode) {\n const elementStyles = (element.props as HTMLAttributes<HTMLSpanElement>).style;\n\n if (elementStyles) {\n Object.keys(elementStyles).forEach((styleKey) => {\n // ToDo find a fix for these errors\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n span.style[styleKey] = elementStyles[styleKey];\n });\n }\n }\n\n span.innerText = 'A';\n\n document.body.appendChild(span);\n\n const height = span.offsetHeight;\n\n document.body.removeChild(span);\n\n return height;\n }\n\n return undefined;\n};\n"],"mappings":"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"}
|
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.342",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "4eb43e7076a61bb0568712915fa8adc734fa44aa"
|
|
74
74
|
}
|