@brizy/ui/es/IconSet/Cell.js

React elements in Brizy style

import React, { useCallback, useMemo } from "react";
import { classNames } from "../classNamesFn";
import { BRZ_PREFIX } from "../constants";
import { useTranslation } from "../utils/localization/useTranslation";
import { Icon } from "../Icon";
import { Delete } from "../icons";
export const Cell = ({ item, onChange, active, dimensions, onRemove }) => {
    const { t } = useTranslation();
    const isActive = useMemo(() => item.id === active, [item.id, active]);
    const className = classNames()("iconset__cell", {
        "iconset__cell--active": isActive,
    });
    const onClick = useCallback(() => onChange(item.id), [onChange, item]);
    const handleRemove = useCallback((e) => {
        e.stopPropagation();
        onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id);
    }, [onRemove, item]);
    return (React.createElement("div", { className: className, onClick: onClick, style: dimensions },
        typeof item.source === "string" ? React.createElement("img", { src: item.source, alt: t("Icon") }) : item.source,
        !isActive && onRemove && (React.createElement("div", { className: `${BRZ_PREFIX}-iconset-icon-remove`, onClick: handleRemove },
            React.createElement(Icon, { source: Delete, size: "12px" })))));
};