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

React elements in Brizy style

import React, { useCallback, useMemo } from "react";
import { VirtuosoGrid } from "react-virtuoso";
import { BRZ_PREFIX } from "../constants";
import { Cell } from "./Cell";
import { VerticalSpacer } from "./VerticalSpacer";
import { getHexByColorType } from "../utils";
const scrollerClassName = `${BRZ_PREFIX}-iconset-wrapper`;
const listClassName = `${BRZ_PREFIX}-iconset`;
export const IconSet = (props) => {
    const { data, active, onChange, height = 240, itemSize = 51, spacing, background, onRemove } = props;
    const activeItemIndex = data.findIndex(item => item.id === active);
    const spacingStyles = useMemo(() => (spacing ? { [`--${BRZ_PREFIX}-iconset-gap`]: `${spacing}px` } : {}), [spacing]);
    const backgroundStyle = useMemo(() => (background ? { [`--${BRZ_PREFIX}-iconset-background`]: getHexByColorType(background) } : {}), [background]);
    const style = useMemo(() => (Object.assign(Object.assign({ height: `${height}px` }, spacingStyles), backgroundStyle)), [height, spacingStyles, backgroundStyle]);
    const dimensions = useMemo(() => ({
        width: itemSize,
        height: itemSize,
    }), [itemSize]);
    const Item = useCallback(({ children }) => React.createElement("div", { style: dimensions }, children), [dimensions]);
    const components = useMemo(() => ({
        Item,
        Footer: VerticalSpacer,
        Header: VerticalSpacer,
    }), [Item]);
    const itemContent = useCallback((_, item) => item && React.createElement(Cell, { item: item, active: active, onChange: onChange, dimensions: dimensions, onRemove: onRemove }), [active, dimensions, onChange, onRemove]);
    const scrollerRef = useCallback((ref) => {
        if (ref)
            ref.className = scrollerClassName;
    }, []);
    const ref = useCallback((reactVirtuoso) => {
        setTimeout(() => {
            if (reactVirtuoso)
                reactVirtuoso.scrollToIndex(activeItemIndex);
        }, 0);
    }, [activeItemIndex]);
    return (React.createElement(VirtuosoGrid, { style: style, ref: ref, scrollerRef: scrollerRef, data: data, totalCount: data.length, listClassName: listClassName, itemContent: itemContent, components: components }));
};