@chayns-components/core 5.0.0-beta.844 → 5.0.0-beta.845
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.
|
@@ -57,9 +57,15 @@ const Icon = ({
|
|
|
57
57
|
$size: size
|
|
58
58
|
}, icons.map(icon => {
|
|
59
59
|
const stackSizeFactor = (0, _icon.getStackSizeFactor)(icon);
|
|
60
|
-
|
|
61
|
-
const
|
|
62
|
-
|
|
60
|
+
|
|
61
|
+
// const isIconStyleGiven =
|
|
62
|
+
// /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
|
|
63
|
+
//
|
|
64
|
+
// const iconStyle = isIconStyleGiven
|
|
65
|
+
// ? undefined
|
|
66
|
+
// : (theme?.iconStyle as string) ?? 'fa-regular';
|
|
67
|
+
|
|
68
|
+
const iconClasses = (0, _clsx.default)(icon, {
|
|
63
69
|
'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
|
|
64
70
|
});
|
|
65
71
|
return /*#__PURE__*/_react.default.createElement(_Icon.StyledIcon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_styledComponents","_icon","_Icon","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","useTheme","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","$size","map","
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_styledComponents","_icon","_Icon","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","useTheme","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","$size","map","iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","key","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { useTheme } from 'styled-components';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /**\n * Additional class names for the root element\n */\n className?: string;\n /**\n * The color of the icon\n */\n color?: string;\n /**\n * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n */\n icons: string[];\n /**\n * Disables the icon so that it cannot be clicked anymore\n */\n isDisabled?: boolean;\n /**\n * Function to be executed when the icon was clicked\n */\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Function to be executed when the icon was double-clicked\n */\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Function to be executed when a mouse button is pressed on the icon\n */\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Size of the icon in pixel\n */\n size?: number;\n /**\n * Stops event propagation on click\n */\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n const theme = useTheme();\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className,\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n $isDisabled={isDisabled}\n onClick={typeof onClick === 'function' ? handleClick : undefined}\n $isOnClick={typeof onClick === 'function'}\n onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n onMouseDown={onMouseDown}\n $size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n // const isIconStyleGiven =\n // /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);\n //\n // const iconStyle = isIconStyleGiven\n // ? undefined\n // : (theme?.iconStyle as string) ?? 'fa-regular';\n\n const iconClasses = clsx(icon, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n $color={icon.includes('fa-inverse') ? 'white' : color}\n $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n $isStacked={shouldUseStackedIcon}\n key={icon}\n $size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -51,9 +51,15 @@ const Icon = _ref => {
|
|
|
51
51
|
$size: size
|
|
52
52
|
}, icons.map(icon => {
|
|
53
53
|
const stackSizeFactor = getStackSizeFactor(icon);
|
|
54
|
-
|
|
55
|
-
const
|
|
56
|
-
|
|
54
|
+
|
|
55
|
+
// const isIconStyleGiven =
|
|
56
|
+
// /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
|
|
57
|
+
//
|
|
58
|
+
// const iconStyle = isIconStyleGiven
|
|
59
|
+
// ? undefined
|
|
60
|
+
// : (theme?.iconStyle as string) ?? 'fa-regular';
|
|
61
|
+
|
|
62
|
+
const iconClasses = clsx(icon, {
|
|
57
63
|
'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
|
|
58
64
|
});
|
|
59
65
|
return /*#__PURE__*/React.createElement(StyledIcon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["clsx","React","useTheme","getStackSizeFactor","StyledIcon","StyledIconWrapper","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","$size","map","
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["clsx","React","useTheme","getStackSizeFactor","StyledIcon","StyledIconWrapper","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","$size","map","iconClasses","$color","includes","$fontSize","$isStacked","key","displayName"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { useTheme } from 'styled-components';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /**\n * Additional class names for the root element\n */\n className?: string;\n /**\n * The color of the icon\n */\n color?: string;\n /**\n * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n */\n icons: string[];\n /**\n * Disables the icon so that it cannot be clicked anymore\n */\n isDisabled?: boolean;\n /**\n * Function to be executed when the icon was clicked\n */\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Function to be executed when the icon was double-clicked\n */\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Function to be executed when a mouse button is pressed on the icon\n */\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Size of the icon in pixel\n */\n size?: number;\n /**\n * Stops event propagation on click\n */\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n const theme = useTheme();\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className,\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n $isDisabled={isDisabled}\n onClick={typeof onClick === 'function' ? handleClick : undefined}\n $isOnClick={typeof onClick === 'function'}\n onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n onMouseDown={onMouseDown}\n $size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n // const isIconStyleGiven =\n // /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);\n //\n // const iconStyle = isIconStyleGiven\n // ? undefined\n // : (theme?.iconStyle as string) ?? 'fa-regular';\n\n const iconClasses = clsx(icon, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n $color={icon.includes('fa-inverse') ? 'white' : color}\n $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n $isStacked={shouldUseStackedIcon}\n key={icon}\n $size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,MAAiC,OAAO;AACpD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,kBAAkB,QAAQ,kBAAkB;AACrD,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,eAAe;AAyC7D,MAAMC,IAAmB,GAAGC,IAAA,IAUtB;EAAA,IAVuB;IACzBC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,IAAI,GAAG,EAAE;IACTC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAOP,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACM,KAAK,CAAC;IAClB;EACJ,CAAC;EAED,MAAME,iBAAqD,GAAIF,KAAK,IAAK;IACrE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,MAAMG,KAAK,GAAGnB,QAAQ,CAAC,CAAC;EAExB,IAAIoB,kBAAkB,GAAG,CAAC;EAE1BZ,KAAK,CAACa,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAGtB,kBAAkB,CAACqB,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAMC,oBAAoB,GAAGhB,KAAK,CAACiB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG5B,IAAI,CACvB,kBAAkB,EAClB0B,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtClB,SACJ,CAAC;EAED,oBACIP,KAAA,CAAA4B,aAAA,CAACxB,iBAAiB;IACdG,SAAS,EAAEoB,cAAe;IAC1BE,WAAW,EAAEnB,UAAW;IACxBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,GAAGK,WAAW,GAAGc,SAAU;IACjEC,UAAU,EAAE,OAAOpB,OAAO,KAAK,UAAW;IAC1CC,aAAa,EAAE,OAAOA,aAAa,KAAK,UAAU,GAAGO,iBAAiB,GAAGW,SAAU;IACnFjB,WAAW,EAAEA,WAAY;IACzBmB,KAAK,EAAElB;EAAK,GAEXL,KAAK,CAACwB,GAAG,CAAEV,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAGtB,kBAAkB,CAACqB,IAAI,CAAC;;IAEhD;IACA;IACA;IACA;IACA;IACA;;IAEA,MAAMW,WAAW,GAAGnC,IAAI,CAACwB,IAAI,EAAE;MAC3B,aAAa,EAAEE,oBAAoB,IAAID,eAAe,KAAKM;IAC/D,CAAC,CAAC;IAEF,oBACI9B,KAAA,CAAA4B,aAAA,CAACzB,UAAU;MACPI,SAAS,EAAE2B,WAAY;MACvBC,MAAM,EAAEZ,IAAI,CAACa,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,GAAG5B,KAAM;MACtD6B,SAAS,EAAG,CAACb,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIP,IAAK;MAChEwB,UAAU,EAAEb,oBAAqB;MACjCc,GAAG,EAAEhB,IAAK;MACVS,KAAK,EAAElB;IAAK,CACf,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDT,IAAI,CAACmC,WAAW,GAAG,MAAM;AAEzB,eAAenC,IAAI","ignoreList":[]}
|
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.845",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "f1be75337f534fc33003d9f511d84a22fcfecb6c"
|
|
89
89
|
}
|