@chayns-components/core 5.0.0-beta.345 → 5.0.0-beta.347
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 +4 -0
- package/lib/components/checkbox/Checkbox.js +3 -2
- package/lib/components/checkbox/Checkbox.js.map +1 -1
- package/lib/components/code-highlighter/CodeHighlighter.d.ts +4 -0
- package/lib/components/code-highlighter/CodeHighlighter.js +3 -2
- package/lib/components/code-highlighter/CodeHighlighter.js.map +1 -1
- package/lib/utils/calculate.d.ts +1 -2
- package/lib/utils/calculate.js +7 -27
- package/lib/utils/calculate.js.map +1 -1
- package/package.json +2 -2
|
@@ -20,6 +20,10 @@ export type CheckboxProps = {
|
|
|
20
20
|
* Changes the design to use switch instead of checkbox
|
|
21
21
|
*/
|
|
22
22
|
shouldShowAsSwitch?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Whether the Checkbox should be displayed centered to the label or at the top
|
|
25
|
+
*/
|
|
26
|
+
shouldShowCentered?: boolean;
|
|
23
27
|
};
|
|
24
28
|
declare const Checkbox: FC<CheckboxProps>;
|
|
25
29
|
export default Checkbox;
|
|
@@ -16,7 +16,8 @@ const Checkbox = _ref => {
|
|
|
16
16
|
isChecked,
|
|
17
17
|
isDisabled,
|
|
18
18
|
onChange,
|
|
19
|
-
shouldShowAsSwitch
|
|
19
|
+
shouldShowAsSwitch,
|
|
20
|
+
shouldShowCentered = false
|
|
20
21
|
} = _ref;
|
|
21
22
|
const [isActive, setIsActive] = (0, _react.useState)(isChecked ?? false);
|
|
22
23
|
const handleChange = (0, _react.useCallback)(event => {
|
|
@@ -26,7 +27,7 @@ const Checkbox = _ref => {
|
|
|
26
27
|
}
|
|
27
28
|
}, [onChange]);
|
|
28
29
|
const uuid = (0, _uuid.useUuid)();
|
|
29
|
-
const lineHeight = (0, _react.useMemo)(() =>
|
|
30
|
+
const lineHeight = (0, _react.useMemo)(() => shouldShowCentered ? undefined : (0, _calculate.getHeightOfSingleTextLine)(), [shouldShowCentered]);
|
|
30
31
|
return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, null, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
|
|
31
32
|
checked: isChecked,
|
|
32
33
|
disabled: isDisabled,
|
|
@@ -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","prototype","hasOwnProperty","call","i","set","Checkbox","_ref","children","isChecked","isDisabled","onChange","shouldShowAsSwitch","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","
|
|
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","shouldShowCentered","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","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 * 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 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 () => (shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n [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 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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"}
|
|
@@ -19,6 +19,10 @@ export type CodeHighlighterProps = {
|
|
|
19
19
|
* The language of the displayed code.
|
|
20
20
|
*/
|
|
21
21
|
language: CodeHighlighterLanguage;
|
|
22
|
+
/**
|
|
23
|
+
* Whether the code should be formatted with prettier.
|
|
24
|
+
*/
|
|
25
|
+
shouldFormatCode?: boolean;
|
|
22
26
|
/**
|
|
23
27
|
* Whether the line numbers should be displayed.
|
|
24
28
|
*/
|
|
@@ -22,6 +22,7 @@ const CodeHighlighter = _ref => {
|
|
|
22
22
|
copyButtonText,
|
|
23
23
|
language,
|
|
24
24
|
highlightedLines,
|
|
25
|
+
shouldFormatCode = false,
|
|
25
26
|
shouldShowLineNumbers = false
|
|
26
27
|
} = _ref;
|
|
27
28
|
// function to style highlighted code
|
|
@@ -53,11 +54,11 @@ const CodeHighlighter = _ref => {
|
|
|
53
54
|
}, [highlightedLines]);
|
|
54
55
|
const formattedCode = (0, _react.useMemo)(() => {
|
|
55
56
|
const config = (0, _codeHighlighter2.getParserForLanguage)(language);
|
|
56
|
-
if (config) {
|
|
57
|
+
if (shouldFormatCode && config) {
|
|
57
58
|
return (0, _standalone.format)(code, config);
|
|
58
59
|
}
|
|
59
60
|
return code;
|
|
60
|
-
}, [code, language]);
|
|
61
|
+
}, [code, language, shouldFormatCode]);
|
|
61
62
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighter, {
|
|
62
63
|
codeTheme: theme
|
|
63
64
|
}, /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighterHeader, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlighter.js","names":["_standalone","require","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CodeHighlighter","_ref","theme","CodeHighlighterTheme","Dark","code","copyButtonText","language","highlightedLines","shouldShowLineNumbers","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","useMemo","config","getParserForLanguage","format","createElement","StyledCodeHighlighter","codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","text","PrismAsyncLight","showLineNumbers","oneDark","oneLight","wrapLines","lineProps","displayName","_default","exports"],"sources":["../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useMemo } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n CodeHighlighterLanguage,\n CodeHighlighterTheme,\n HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n StyledCodeHighlighter,\n StyledCodeHighlighterFileName,\n StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\nexport type CodeHighlighterProps = {\n /**\n * The code that should be displayed.\n */\n code: string;\n /**\n * The text that should be displayed after the copy button.\n * If not set, just the button is displayed without text.\n */\n copyButtonText?: string;\n /**\n * The lines of code that should be highlighted.\n * Following lines can be highlighted: added, removed and just marked.\n */\n highlightedLines?: HighlightedLines;\n /**\n * The language of the displayed code.\n */\n language: CodeHighlighterLanguage;\n /**\n * Whether the line numbers should be displayed.\n */\n shouldShowLineNumbers?: boolean;\n /**\n * The theme of the code block. Decide between dark and light.\n */\n theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n theme = CodeHighlighterTheme.Dark,\n code,\n copyButtonText,\n language,\n highlightedLines,\n shouldShowLineNumbers = false,\n}) => {\n // function to style highlighted code\n const lineWrapper = useCallback(\n (lineNumber: number) => {\n let style = {\n backgroundColor: 'none',\n display: 'block',\n borderRadius: '2px',\n };\n\n if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#2EF29930' };\n } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#F22E5B30' };\n } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#cccccc40' };\n }\n\n return { style };\n },\n [highlightedLines],\n );\n\n const formattedCode = useMemo(() => {\n const config = getParserForLanguage(language);\n\n if (config) {\n return format(code, config) as unknown as string;\n }\n\n return code;\n }, [code, language]);\n\n return useMemo(\n () => (\n <StyledCodeHighlighter codeTheme={theme}>\n <StyledCodeHighlighterHeader codeTheme={theme}>\n <StyledCodeHighlighterFileName codeTheme={theme}>\n {language}\n </StyledCodeHighlighterFileName>\n <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n </StyledCodeHighlighterHeader>\n <SyntaxHighlighter\n language={language}\n showLineNumbers={shouldShowLineNumbers}\n style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n wrapLines\n lineProps={lineWrapper}\n >\n {formattedCode}\n </SyntaxHighlighter>\n </StyledCodeHighlighter>\n ),\n [theme, language, code, copyButtonText, shouldShowLineNumbers, lineWrapper, formattedCode],\n );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":";;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AAKA,IAAAM,iBAAA,GAAAN,OAAA;AACA,IAAAO,gBAAA,GAAAP,OAAA;AAKA,IAAAQ,gBAAA,GAAAC,sBAAA,CAAAT,OAAA;AAAkE,SAAAS,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,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,SAAAZ,wBAAAY,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,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,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;
|
|
1
|
+
{"version":3,"file":"CodeHighlighter.js","names":["_standalone","require","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CodeHighlighter","_ref","theme","CodeHighlighterTheme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","shouldShowLineNumbers","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","useMemo","config","getParserForLanguage","format","createElement","StyledCodeHighlighter","codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","text","PrismAsyncLight","showLineNumbers","oneDark","oneLight","wrapLines","lineProps","displayName","_default","exports"],"sources":["../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useMemo } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n CodeHighlighterLanguage,\n CodeHighlighterTheme,\n HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n StyledCodeHighlighter,\n StyledCodeHighlighterFileName,\n StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\nexport type CodeHighlighterProps = {\n /**\n * The code that should be displayed.\n */\n code: string;\n /**\n * The text that should be displayed after the copy button.\n * If not set, just the button is displayed without text.\n */\n copyButtonText?: string;\n /**\n * The lines of code that should be highlighted.\n * Following lines can be highlighted: added, removed and just marked.\n */\n highlightedLines?: HighlightedLines;\n /**\n * The language of the displayed code.\n */\n language: CodeHighlighterLanguage;\n /**\n * Whether the code should be formatted with prettier.\n */\n shouldFormatCode?: boolean;\n /**\n * Whether the line numbers should be displayed.\n */\n shouldShowLineNumbers?: boolean;\n /**\n * The theme of the code block. Decide between dark and light.\n */\n theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n theme = CodeHighlighterTheme.Dark,\n code,\n copyButtonText,\n language,\n highlightedLines,\n shouldFormatCode = false,\n shouldShowLineNumbers = false,\n}) => {\n // function to style highlighted code\n const lineWrapper = useCallback(\n (lineNumber: number) => {\n let style = {\n backgroundColor: 'none',\n display: 'block',\n borderRadius: '2px',\n };\n\n if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#2EF29930' };\n } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#F22E5B30' };\n } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#cccccc40' };\n }\n\n return { style };\n },\n [highlightedLines],\n );\n\n const formattedCode = useMemo(() => {\n const config = getParserForLanguage(language);\n\n if (shouldFormatCode && config) {\n return format(code, config) as unknown as string;\n }\n\n return code;\n }, [code, language, shouldFormatCode]);\n\n return useMemo(\n () => (\n <StyledCodeHighlighter codeTheme={theme}>\n <StyledCodeHighlighterHeader codeTheme={theme}>\n <StyledCodeHighlighterFileName codeTheme={theme}>\n {language}\n </StyledCodeHighlighterFileName>\n <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n </StyledCodeHighlighterHeader>\n <SyntaxHighlighter\n language={language}\n showLineNumbers={shouldShowLineNumbers}\n style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n wrapLines\n lineProps={lineWrapper}\n >\n {formattedCode}\n </SyntaxHighlighter>\n </StyledCodeHighlighter>\n ),\n [theme, language, code, copyButtonText, shouldShowLineNumbers, lineWrapper, formattedCode],\n );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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"}
|
package/lib/utils/calculate.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { ReactElement } from 'react';
|
|
2
1
|
export declare const calculateContentWidth: (texts: string[]) => number;
|
|
3
2
|
export declare const calculateContentHeight: (elements: string[]) => number;
|
|
4
|
-
export declare const getHeightOfSingleTextLine: (
|
|
3
|
+
export declare const getHeightOfSingleTextLine: () => number;
|
package/lib/utils/calculate.js
CHANGED
|
@@ -37,33 +37,13 @@ const calculateContentHeight = elements => {
|
|
|
37
37
|
return length.reduce((partialSum, a) => partialSum + a, 0);
|
|
38
38
|
};
|
|
39
39
|
exports.calculateContentHeight = calculateContentHeight;
|
|
40
|
-
const getHeightOfSingleTextLine =
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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;
|
|
40
|
+
const getHeightOfSingleTextLine = () => {
|
|
41
|
+
const span = document.createElement('span');
|
|
42
|
+
span.innerText = 'A';
|
|
43
|
+
document.body.appendChild(span);
|
|
44
|
+
const height = span.offsetHeight;
|
|
45
|
+
document.body.removeChild(span);
|
|
46
|
+
return height;
|
|
67
47
|
};
|
|
68
48
|
exports.getHeightOfSingleTextLine = getHeightOfSingleTextLine;
|
|
69
49
|
//# 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","getHeightOfSingleTextLine","
|
|
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","span","height"],"sources":["../../src/utils/calculate.ts"],"sourcesContent":["export 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 = () => {\n const span = document.createElement('span');\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"],"mappings":";;;;;;AAAO,MAAMA,qBAAqB,GAAIC,KAAe,IAAK;EACtD,MAAMC,MAAgB,GAAG,EAAE;EAE3BD,KAAK,CAACE,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IACzCF,GAAG,CAACG,KAAK,CAACC,UAAU,GAAG,QAAQ;IAC/BJ,GAAG,CAACG,KAAK,CAACE,QAAQ,GAAG,UAAU;IAC/BL,GAAG,CAACG,KAAK,CAACG,KAAK,GAAG,MAAM;IACxBN,GAAG,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;IAC/BN,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACT,GAAG,CAAC;IAE9BA,GAAG,CAACU,SAAS,GAAGX,IAAI;IAEpBF,MAAM,CAACc,IAAI,CAACX,GAAG,CAACY,WAAW,CAAC;IAE5BX,QAAQ,CAACO,IAAI,CAACK,WAAW,CAACb,GAAG,CAAC;EAClC,CAAC,CAAC;EAEF,OAAOc,IAAI,CAACC,GAAG,CAACC,KAAK,CAAC,IAAI,EAAEnB,MAAM,CAAC;AACvC,CAAC;AAACoB,OAAA,CAAAtB,qBAAA,GAAAA,qBAAA;AAEK,MAAMuB,sBAAsB,GAAIC,QAAkB,IAAK;EAC1D,MAAMtB,MAAgB,GAAG,EAAE;EAE3BsB,QAAQ,CAACrB,OAAO,CAAEsB,OAAe,IAAK;IAClC,MAAMpB,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,GAAG,CAAC;IACvCF,GAAG,CAACG,KAAK,CAACC,UAAU,GAAG,QAAQ;IAC/BJ,GAAG,CAACG,KAAK,CAACE,QAAQ,GAAG,UAAU;IAC/BL,GAAG,CAACG,KAAK,CAACG,KAAK,GAAG,MAAM;IACxBN,GAAG,CAACG,KAAK,CAACkB,MAAM,GAAG,KAAK;IACxBrB,GAAG,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;IAC/BN,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACT,GAAG,CAAC;IAC9BA,GAAG,CAACU,SAAS,GAAGU,OAAO;IAEvBvB,MAAM,CAACc,IAAI,CAACX,GAAG,CAACsB,YAAY,CAAC;IAE7BrB,QAAQ,CAACO,IAAI,CAACK,WAAW,CAACb,GAAG,CAAC;EAClC,CAAC,CAAC;EAEF,OAAOH,MAAM,CAAC0B,MAAM,CAAC,CAACC,UAAU,EAAEC,CAAC,KAAKD,UAAU,GAAGC,CAAC,EAAE,CAAC,CAAC;AAC9D,CAAC;AAACR,OAAA,CAAAC,sBAAA,GAAAA,sBAAA;AAEK,MAAMQ,yBAAyB,GAAGA,CAAA,KAAM;EAC3C,MAAMC,IAAI,GAAG1B,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC;EAE3CyB,IAAI,CAACjB,SAAS,GAAG,GAAG;EAEpBT,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACkB,IAAI,CAAC;EAE/B,MAAMC,MAAM,GAAGD,IAAI,CAACL,YAAY;EAEhCrB,QAAQ,CAACO,IAAI,CAACK,WAAW,CAACc,IAAI,CAAC;EAE/B,OAAOC,MAAM;AACjB,CAAC;AAACX,OAAA,CAAAS,yBAAA,GAAAA,yBAAA"}
|
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.347",
|
|
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": "818fcc27717bc04ee628d417eb221d7a5d736496"
|
|
74
74
|
}
|