@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
73 lines (72 loc) • 3.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.isAdaptableIcon = exports.isAdaptableElementIcon = exports.isAdaptableCustomIcon = exports.isAdaptableSystemIcon = exports.IconComponent = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("../icons");
const join_1 = tslib_1.__importDefault(require("../utils/join"));
const react_1 = require("react");
const IconComponent = (props) => {
const { icon, iconClassName } = props;
if (!icon) {
return null;
}
const className = !(0, exports.isAdaptableElementIcon)(icon)
? (0, join_1.default)(icon.className, iconClassName)
: iconClassName;
const divRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
let htmlElement;
if ((0, exports.isAdaptableElementIcon)(icon)) {
if (typeof icon.element === 'string') {
const domParser = new DOMParser();
htmlElement = domParser.parseFromString(icon.element, 'text/html').body
.firstChild;
}
else {
htmlElement = icon.element;
// THe element neets to be cloned.
// when it is used in more than one plce the element is removed from the DOM
htmlElement = htmlElement.cloneNode(true);
}
divRef.current.insertAdjacentElement('afterend', htmlElement);
}
return () => {
if ((0, exports.isAdaptableElementIcon)(icon)) {
htmlElement?.remove();
}
};
}, [icon]);
if ((0, exports.isAdaptableSystemIcon)(icon) && icon.name in icons_1.allIcons) {
return (React.createElement(icons_1.Icon, { "aria-hidden": "true", name: icon.name, size: icon.size, style: icon.style, className: className }));
}
if ((0, exports.isAdaptableCustomIcon)(icon)) {
let width = icon.style?.width ?? 'var(--ab-cmp-icon__width)';
let height = icon.style?.height ?? 'var(--ab-cmp-icon__height)';
const iconStyle = icon.style ?? {};
return React.createElement("img", { src: icon.src, className: className, style: { height, width, ...iconStyle } });
}
if ((0, exports.isAdaptableElementIcon)(icon)) {
return (React.createElement("span", { ref: divRef, style: { display: 'none' }, "data-name": "adaptable-icon-placeholder" }));
}
return null;
};
exports.IconComponent = IconComponent;
const isAdaptableSystemIcon = (icon) => {
return typeof icon?.name === 'string';
};
exports.isAdaptableSystemIcon = isAdaptableSystemIcon;
const isAdaptableCustomIcon = (icon) => {
return typeof icon?.src === 'string';
};
exports.isAdaptableCustomIcon = isAdaptableCustomIcon;
const isAdaptableElementIcon = (icon) => {
return ((typeof HTMLElement === 'function' &&
icon?.element instanceof HTMLElement) ||
typeof icon?.element === 'string');
};
exports.isAdaptableElementIcon = isAdaptableElementIcon;
const isAdaptableIcon = (icon) => {
return (0, exports.isAdaptableSystemIcon)(icon) || (0, exports.isAdaptableCustomIcon)(icon) || (0, exports.isAdaptableElementIcon)(icon);
};
exports.isAdaptableIcon = isAdaptableIcon;