@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
366 lines (365 loc) • 11.5 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ValidIconType = exports.ListDefaultIconSizes = exports.DefaultIconSizes = exports.DefaultIconSize = void 0;
exports.calcSize = calcSize;
exports.default = Icon;
exports.getIconNameFromComponent = getIconNameFromComponent;
exports.prepareIcon = prepareIcon;
exports.prerenderIcon = prerenderIcon;
var _includes = _interopRequireDefault(require("core-js-pure/stable/instance/includes.js"));
var _react = require("react");
var _clsx = require("clsx");
var _componentHelper = require("../../shared/component-helper.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _SpacingUtils = require("../space/SpacingUtils.js");
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _IconHelpers = require("./IconHelpers.js");
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _useCombinedRef = _interopRequireDefault(require("../../shared/helpers/useCombinedRef.js"));
var _useIsomorphicLayoutEffect = require("../../shared/helpers/useIsomorphicLayoutEffect.js");
var _IconTransition = require("./IconTransition.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DefaultIconSize = exports.DefaultIconSize = 16;
const DefaultIconSizes = exports.DefaultIconSizes = {
default: 16,
medium: 24
};
const ListDefaultIconSizes = exports.ListDefaultIconSizes = [['default', 16], ['medium', 24]];
const ValidIconType = exports.ValidIconType = ['small', 'default', 'medium', 'large', 'x-large', 'xx-large'];
function Icon(localProps) {
const context = (0, _react.useContext)(_Context.default);
const props = (0, _componentHelper.extendPropsWithContext)(localProps, {}, {
skeleton: context?.skeleton
}, context.Icon);
const {
icon: iconProp,
size,
wrapperParams,
iconParams,
alt,
children,
transitionState
} = usePrepareIcon(props, context);
const icon = iconProp !== null && iconProp !== void 0 ? iconProp : children;
const ref = (0, _react.useRef)(null);
const isInitialMount = (0, _react.useRef)(true);
const {
ref: externalRef,
...restWrapperParams
} = wrapperParams;
const combinedRef = (0, _useCombinedRef.default)(ref, externalRef);
(0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
if (!transitionState || !ref.current) {
return;
}
if (isInitialMount.current) {
isInitialMount.current = false;
(0, _IconTransition.suppressTransitions)(ref.current, () => {
_IconTransition.transition.activate(ref.current, transitionState);
});
} else {
_IconTransition.transition.activate(ref.current, transitionState);
}
}, [transitionState, icon]);
if (!icon) {
return null;
}
const IconContainer = prerenderIcon({
icon,
size,
alt
});
if (!IconContainer) {
return null;
}
return (0, _jsxRuntime.jsx)("span", {
...restWrapperParams,
ref: combinedRef,
children: (0, _jsxRuntime.jsx)(IconContainer, {
...iconParams
})
});
}
function getIconNameFromComponent(icon) {
if ((0, _react.isValidElement)(icon) && icon?.type) {
icon = icon?.type;
}
const name = typeof icon === 'function' ? icon.name : String(icon);
if (/^data:image\//.test(name)) {
return null;
}
return name;
}
function calcSize(props) {
const {
icon,
size,
width,
height
} = props;
let sizeAsInt = null;
let sizeAsString = null;
if (!size || size === DefaultIconSize) {
const name = getIconNameFromComponent(icon);
const nameParts = String(name || '').split('_');
if (nameParts.length > 1) {
const lastPartOfIconName = nameParts.reverse()[0];
const potentialSize = ListDefaultIconSizes.filter(([key]) => key === lastPartOfIconName)?.[0]?.[1];
if (potentialSize) {
sizeAsInt = potentialSize;
}
if ((0, _includes.default)(ValidIconType).call(ValidIconType, lastPartOfIconName)) {
sizeAsString = lastPartOfIconName;
}
} else {
const iconFn = typeof icon === 'function' ? icon : (0, _react.isValidElement)(icon) && typeof icon.type === 'function' ? icon.type : null;
const hasHooks = iconFn ? /\buse[A-Z][A-Za-z0-9_]*\b/.test(iconFn.toString()) : false;
if (iconFn && !hasHooks) {
try {
const elem = iconFn();
const potentialSize = elem?.props?.width;
if (potentialSize && !isNaN(potentialSize)) {
sizeAsInt = potentialSize;
}
} catch {}
}
}
} else if (typeof size === 'string' && !(parseFloat(size) > 0)) {
var _ListDefaultIconSizes;
sizeAsInt = (_ListDefaultIconSizes = ListDefaultIconSizes.filter(([key]) => key === size)?.[0]?.[1]) !== null && _ListDefaultIconSizes !== void 0 ? _ListDefaultIconSizes : -1;
if ((0, _includes.default)(ValidIconType).call(ValidIconType, size)) {
sizeAsString = size;
}
} else if (parseFloat(String(size)) > 0) {
var _ListDefaultIconSizes2;
sizeAsInt = (_ListDefaultIconSizes2 = ListDefaultIconSizes.filter(([key, value]) => key && value === parseFloat(String(size)))?.[0]?.[1]) !== null && _ListDefaultIconSizes2 !== void 0 ? _ListDefaultIconSizes2 : -1;
if (sizeAsInt === -1) {
sizeAsInt = parseFloat(String(size));
sizeAsString = 'custom-size';
}
}
if (!sizeAsString && sizeAsInt > 0) {
const potentialSizeAsString = ListDefaultIconSizes.reduce((acc, [key, value]) => {
if (key && value === sizeAsInt) {
return key;
}
return acc;
}, null);
if (potentialSizeAsString) {
sizeAsString = potentialSizeAsString;
}
}
const {
sizeAsString: isCustomSize,
params: iconParams
} = prepareIconParams({
sizeAsString,
sizeAsInt,
size,
width,
height
});
if (isCustomSize) {
sizeAsString = isCustomSize;
}
if (!(sizeAsInt > 0)) {
sizeAsInt = DefaultIconSize;
}
if (size === 'auto') {
iconParams.width = '100%';
iconParams.height = '100%';
sizeAsString = 'auto';
}
return {
iconParams,
sizeAsInt,
sizeAsString
};
}
function prepareIconParams({
sizeAsString,
...rest
}) {
const {
size,
width,
height,
sizeAsInt
} = rest;
const params = {};
if (!sizeAsString && !(sizeAsInt > 0) && parseFloat(String(size)) > -1) {
params.width = params.height = parseFloat(String(size));
} else if (sizeAsString === 'custom-size') {
params.width = params.height = parseFloat(String(sizeAsInt));
}
if (parseFloat(String(width)) > -1) {
sizeAsString = 'custom-size';
params.width = parseFloat(String(width));
}
if (parseFloat(String(height)) > -1) {
sizeAsString = 'custom-size';
params.height = parseFloat(String(height));
}
(0, _componentHelper.validateDOMAttributes)({}, params);
return {
params,
sizeAsString
};
}
function prepareIcon(props, context, cachedValues) {
var _cachedValues$label;
const {
icon,
size,
width,
height,
border,
color,
fill,
inheritColor,
modifier,
alt,
title,
skeleton,
className,
transitionState: _transitionState,
...attributes
} = props;
const {
sizeAsString,
iconParams
} = cachedValues || calcSize({
icon,
size,
width,
height
});
if (color) {
iconParams.color = color;
}
const label = (_cachedValues$label = cachedValues?.label) !== null && _cachedValues$label !== void 0 ? _cachedValues$label : icon ? getIconNameFromComponent(icon) : null;
const isFilled = Boolean(fill);
const wrapperParams = (0, _componentHelper.validateDOMAttributes)(props, {
role: alt ? 'img' : 'presentation',
alt,
'aria-label': label && !(0, _includes.default)(label).call(label, 'default') ? label.replace(/_/g, ' ') + ' icon' : null,
title,
...attributes
});
if (!alt && typeof wrapperParams['aria-hidden'] === 'undefined') {
wrapperParams['aria-hidden'] = true;
}
if (wrapperParams['aria-hidden']) {
if (!wrapperParams['data-testid'] && typeof process !== 'undefined' && process.env.NODE_ENV === 'test') {
wrapperParams['data-testid'] = wrapperParams['aria-label'];
}
delete wrapperParams['aria-label'];
}
wrapperParams.className = (0, _clsx.clsx)('dnb-icon', modifier && `dnb-icon--${modifier}`, border && 'dnb-icon--border', isFilled && 'dnb-icon--filled', inheritColor !== false && 'dnb-icon--inherit-color', sizeAsString ? `dnb-icon--${sizeAsString}` : 'dnb-icon--default', (0, _SkeletonHelper.createSkeletonClass)(null, skeleton, context), className);
const iconToRender = getIcon(props);
if (typeof iconToRender === 'function') {
if (iconToRender.__iconTransitionFallback) {
wrapperParams.className += ' dnb-icon--transition-fallback';
if (_transitionState) {
iconParams['data-transition-state'] = _transitionState;
}
}
if (iconToRender.__iconTransitionStyle) {
wrapperParams.style = {
...wrapperParams.style,
...iconToRender.__iconTransitionStyle,
...(_transitionState && {
'--icon-transition': `var(--icon-transition-${_transitionState})`
})
};
}
}
return {
...props,
icon: iconToRender,
alt,
iconParams,
wrapperParams
};
}
function usePrepareIcon(props, context) {
const {
icon,
size,
width,
height
} = props;
const cachedCalcSize = calcSize({
icon,
size,
width,
height
});
const label = (0, _react.useMemo)(() => icon ? getIconNameFromComponent(icon) : null, [icon]);
const result = (0, _react.useMemo)(() => prepareIcon(props, context, {
...cachedCalcSize,
label
}), [props, context, cachedCalcSize, label]);
const spacingProps = (0, _SpacingUtils.useSpacing)(props, {
className: result.wrapperParams.className,
style: result.wrapperParams.style
});
return {
...result,
wrapperParams: {
...result.wrapperParams,
...spacingProps
}
};
}
function prerenderIcon(props) {
const {
size = null,
listOfIcons = null,
alt = null
} = props;
let {
icon
} = props;
if (typeof icon === 'string' && /^data:image\//.test(icon)) {
return () => (0, _jsxRuntime.jsx)("img", {
src: String(icon),
alt: alt || ''
});
}
if (typeof icon === 'function') {
return icon;
}
if ((0, _react.isValidElement)(icon) || Array.isArray(icon)) {
return () => icon;
}
try {
icon = (0, _IconHelpers.iconCase)(icon);
if (size && DefaultIconSizes[size] && size !== 'basis' && size !== 'default' && !(parseFloat(String(size)) > 0) && !(0, _includes.default)(icon).call(icon, size)) {
icon = `${icon}_${size}`;
}
const mod = (listOfIcons.dnbIcons ? listOfIcons.dnbIcons : listOfIcons)[icon];
return mod && mod.default ? mod.default : mod;
} catch (e) {
(0, _componentHelper.warn)(`Icon '${icon}' did not exist!`);
return null;
}
}
function getIcon(props) {
if (props.icon) {
return props.icon;
}
if (typeof props.children === 'function') {
return props.children;
}
return (0, _componentHelper.processChildren)(props);
}
(0, _withComponentMarkers.default)(Icon, {
_supportsSpacingProps: true
});
Icon.transition = _IconTransition.transition;
//# sourceMappingURL=Icon.js.map