@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
321 lines (320 loc) • 13.3 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;
require("core-js/modules/es.string.replace.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _errorHelper = require("../../shared/error-helper");
var _componentHelper = require("../../shared/component-helper");
var _Context = _interopRequireDefault(require("../../shared/Context"));
var _SpacingHelper = require("../space/SpacingHelper");
var _SkeletonHelper = require("../skeleton/SkeletonHelper");
var _IconHelpers = require("./IconHelpers");
const _excluded = ["sizeAsString"],
_excluded2 = ["icon", "size", "width", "height", "border", "color", "inheritColor", "inherit_color", "modifier", "alt", "title", "skeleton", "className"];
var _Fragment;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
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 && {}.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; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
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 === null || context === void 0 ? void 0 : context.skeleton
}, context.Icon);
const {
icon: iconProp,
size,
wrapperParams,
iconParams,
alt,
children
} = prepareIcon(props, context);
const icon = iconProp !== null && iconProp !== void 0 ? iconProp : children;
if (!icon) {
return null;
}
const IconContainer = prerenderIcon({
icon,
size,
alt
});
if (!IconContainer) {
return _Fragment || (_Fragment = _react.default.createElement(_react.default.Fragment, null));
}
return _react.default.createElement("span", wrapperParams, _react.default.createElement(IconContainer, iconParams));
}
function getIconNameFromComponent(icon) {
var _icon;
if (_react.default.isValidElement(icon) && (_icon = icon) !== null && _icon !== void 0 && _icon.type) {
var _icon2;
icon = (_icon2 = icon) === null || _icon2 === void 0 ? void 0 : _icon2.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) {
var _ListDefaultIconSizes, _ListDefaultIconSizes2;
const lastPartOfIconName = nameParts.reverse()[0];
const potentialSize = (_ListDefaultIconSizes = ListDefaultIconSizes.filter(_ref => {
let [key] = _ref;
return key === lastPartOfIconName;
})) === null || _ListDefaultIconSizes === void 0 ? void 0 : (_ListDefaultIconSizes2 = _ListDefaultIconSizes[0]) === null || _ListDefaultIconSizes2 === void 0 ? void 0 : _ListDefaultIconSizes2[1];
if (potentialSize) {
sizeAsInt = potentialSize;
}
if (ValidIconType.includes(lastPartOfIconName)) {
sizeAsString = lastPartOfIconName;
}
} else {
if (typeof icon === 'function') {
const elem = icon();
if (elem.props) {
let potentialSize = null;
if (elem.props.width) {
potentialSize = elem.props.width;
}
if (!potentialSize && elem.props.viewBox) {
potentialSize = parseFloat(/[0-9]+ [0-9]+ ([0-9]+)/.exec(elem.props.viewBox)[1]);
}
if (!isNaN(potentialSize)) {
sizeAsInt = potentialSize;
}
}
}
}
} else if (typeof size === 'string' && !(parseFloat(size) > 0)) {
var _ListDefaultIconSizes3, _ListDefaultIconSizes4, _ListDefaultIconSizes5;
sizeAsInt = (_ListDefaultIconSizes3 = (_ListDefaultIconSizes4 = ListDefaultIconSizes.filter(_ref2 => {
let [key] = _ref2;
return key === size;
})) === null || _ListDefaultIconSizes4 === void 0 ? void 0 : (_ListDefaultIconSizes5 = _ListDefaultIconSizes4[0]) === null || _ListDefaultIconSizes5 === void 0 ? void 0 : _ListDefaultIconSizes5[1]) !== null && _ListDefaultIconSizes3 !== void 0 ? _ListDefaultIconSizes3 : -1;
if (ValidIconType.includes(size)) {
sizeAsString = size;
}
} else if (parseFloat(String(size)) > 0) {
var _ListDefaultIconSizes6, _ListDefaultIconSizes7, _ListDefaultIconSizes8;
sizeAsInt = (_ListDefaultIconSizes6 = (_ListDefaultIconSizes7 = ListDefaultIconSizes.filter(_ref3 => {
let [key, value] = _ref3;
return key && value === parseFloat(String(size));
})) === null || _ListDefaultIconSizes7 === void 0 ? void 0 : (_ListDefaultIconSizes8 = _ListDefaultIconSizes7[0]) === null || _ListDefaultIconSizes8 === void 0 ? void 0 : _ListDefaultIconSizes8[1]) !== null && _ListDefaultIconSizes6 !== void 0 ? _ListDefaultIconSizes6 : -1;
if (sizeAsInt === -1) {
sizeAsInt = parseFloat(String(size));
sizeAsString = 'custom-size';
}
}
if (!sizeAsString && sizeAsInt > 0) {
const potentialSizeAsString = ListDefaultIconSizes.reduce((acc, _ref4) => {
let [key, value] = _ref4;
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(_ref5) {
let {
sizeAsString
} = _ref5,
rest = _objectWithoutProperties(_ref5, _excluded);
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) {
const {
icon,
size,
width,
height,
border,
color,
inheritColor,
inherit_color,
modifier,
alt,
title,
skeleton,
className
} = props,
attributes = _objectWithoutProperties(props, _excluded2);
const {
sizeAsString,
iconParams
} = calcSize({
icon,
size,
width,
height
});
if (color) {
iconParams.color = color;
}
const label = icon ? getIconNameFromComponent(icon) : null;
const wrapperParams = (0, _componentHelper.validateDOMAttributes)(props, _objectSpread({
role: alt ? 'img' : 'presentation',
alt,
'aria-label': label && !label.includes('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, _classnames.default)('dnb-icon', sizeAsString ? `dnb-icon--${sizeAsString}` : 'dnb-icon--default', (0, _SkeletonHelper.createSkeletonClass)(null, skeleton, context), (0, _SpacingHelper.createSpacingClasses)(props), className, modifier && `dnb-icon--${modifier}`, border && 'dnb-icon--border', (inheritColor !== null && inheritColor !== void 0 ? inheritColor : inherit_color) !== false && 'dnb-icon--inherit-color');
let iconToRender = getIcon(props);
if (iconToRender && typeof iconToRender.defaultProps !== 'undefined') {
iconToRender = _react.default.createElement(iconToRender, (0, _componentHelper.validateDOMAttributes)({}, {
color,
icon,
size,
width,
height
}));
}
return _objectSpread(_objectSpread({}, props), {}, {
icon: iconToRender,
alt,
iconParams,
wrapperParams
});
}
function prerenderIcon(props) {
const {
size = null,
listOfIcons = null,
alt = null
} = props;
let {
icon
} = props;
if (typeof icon === 'string' && /^data:image\//.test(icon)) {
return () => _react.default.createElement("img", {
src: String(icon),
alt: alt || 'no-alt'
});
}
if (typeof icon === 'function') {
const elem = icon();
if (_react.default.isValidElement(elem)) {
return icon;
}
return elem;
}
if (_react.default.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) && !icon.includes(size)) {
icon = `${icon}_${size}`;
}
const mod = (listOfIcons.dnbIcons ? listOfIcons.dnbIcons : listOfIcons)[icon];
return mod && mod.default ? mod.default : mod;
} catch (e) {
(0, _errorHelper.ErrorHandler)(`Icon '${icon}' did not exist!`);
return null;
}
}
function getIcon(props) {
if (props.icon) {
return props.icon;
}
return (0, _componentHelper.processChildren)(props);
}
Icon._supportsSpacingProps = true;
//# sourceMappingURL=Icon.js.map