@adaptabletools/adaptable/src/components/IconSelector/IconSelector.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { cn } from '../../lib/utils';
import AdaptableInput from '../../View/Components/AdaptableInput';
import { IconComponent } from '../Icon';
import { allIcons, Icon } from '../icons';
import OverlayTrigger from '../OverlayTrigger';
import SimpleButton from '../SimpleButton';
import { Box, Flex } from '../Flex';
import { wizardSelectionButtonClassName } from '../../Utilities/wizardSelection';
const ICON_GRID_BUTTON_CLASS = 'twa:!min-w-[36px] twa:!w-9 twa:!h-9 twa:!p-0 twa:justify-center twa:items-center';
const IconButton = (props) => {
    return (_jsx(SimpleButton, { onClick: () => props.onClick(), className: wizardSelectionButtonClassName(props.active, ICON_GRID_BUTTON_CLASS), variant: props.active ? 'outlined' : 'text', tone: "none", icon: props.icon, children: props.children }));
};
export const IconSelectorPanel = (props) => {
    const [query, setQuery] = React.useState('');
    const allIconsNames = Object.keys(allIcons);
    const filteredIcons = query
        ? allIconsNames.filter((iconName) => {
            return iconName.toLowerCase().includes(query.toLowerCase());
        })
        : allIconsNames;
    const iconsElements = filteredIcons.map((iconName) => (_jsx(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName }, iconName)));
    const customIconsElements = props.customIcons?.map((def) => {
        return (_jsx(IconButton, { active: def.name === props.value, onClick: () => props.onChange(def.name), children: _jsx(IconComponent, { icon: def.icon }, def.name) }, def.name));
    });
    return (_jsxs(Box, { className: cn('ab-IconSelector__Popup', props.className), children: [_jsxs(Box, { className: "twa:mb-2", children: [props.showTitle ? (_jsx(Box, { className: "twa:mb-2 twa:text-4", children: "Select an Icon" })) : null, _jsx(AdaptableInput, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full", placeholder: "Search Icons" })] }), _jsxs(Flex, { flexDirection: "row", flexWrap: "wrap", className: "twa:p-2 twa:w-[300px] twa:max-w-full twa:max-h-[300px] twa:overflow-auto twa:gap-0.5", children: [iconsElements, customIconsElements] })] }));
};
export const IconSelector = (props) => {
    const popup = (_jsx(IconSelectorPanel, { customIcons: props.customIcons, value: props.value, onChange: props.onChange, showTitle: true }));
    let value = 'No Icon Selected';
    if (props.value in allIcons) {
        value = (_jsx(Icon, { style: { display: 'inline-block' }, name: props.value }));
    }
    else {
        const icon = props.customIcons?.find((def) => def.name === props.value);
        if (icon)
            value = _jsx(IconComponent, { icon: icon.icon });
    }
    return (_jsxs(Flex, { className: "ab-IconSelector", children: [_jsx(OverlayTrigger, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300, children: _jsx(SimpleButton, { className: "ab-IconSelector__trigger twa:text-center twa:w-[150px] twa:justify-center", onClick: () => null, variant: "raised", children: value }) }), (props.clearable ?? true) && (_jsx(SimpleButton, { disabled: !props.value, className: "ab-IconSelector__clear-button twa:ml-2", onClick: (event) => {
                    event.stopPropagation();
                    event.preventDefault();
                    props.onChange('');
                }, variant: "text", icon: "close" }))] }));
};