@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
58 lines (57 loc) • 3.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconSelector = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
const Icon_1 = require("../Icon");
const icons_1 = require("../icons");
const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
const Flex_1 = require("../Flex");
const IconButton = (props) => {
return (react_1.default.createElement(SimpleButton_1.default, { onClick: () => props.onClick(), className: "twa:p-2", variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
};
const IconSelector = (props) => {
const [query, setQuery] = react_1.default.useState('');
const allIconsNames = Object.keys(icons_1.allIcons);
const filteredIcons = query
? allIconsNames.filter((iconName) => {
return iconName.toLowerCase().includes(query.toLowerCase());
})
: allIconsNames;
const iconsElements = filteredIcons.map((iconName) => {
return (react_1.default.createElement(Flex_1.Flex, { key: iconName },
react_1.default.createElement(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName })));
});
const customIconsElements = props.customIcons?.map((def) => {
return (react_1.default.createElement(IconButton, { key: def.name, active: false, onClick: () => props.onChange(def.name) },
react_1.default.createElement(Icon_1.IconComponent, { key: def.name, icon: def.icon })));
});
const popup = (react_1.default.createElement(Flex_1.Box, { className: "ab-IconSelector__Popup" },
react_1.default.createElement(Flex_1.Box, { className: "twa:mb-2" },
react_1.default.createElement(Flex_1.Box, { className: "twa:mb-2 twa:text-4" }, "Select an Icon"),
react_1.default.createElement(AdaptableInput_1.default, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full" })),
react_1.default.createElement(Flex_1.Flex, { className: "twa:p-2 twa:w-[300px] twa:max-h-[300px] twa:overflow-auto twa:flex-wrap" },
iconsElements,
" ",
customIconsElements)));
let value = 'No Icon Selected';
if (props.value in icons_1.allIcons) {
value = (react_1.default.createElement(icons_1.Icon, { style: { display: 'inline-block' }, name: props.value }));
}
else {
const icon = props.customIcons?.find((def) => def.name === props.value);
if (icon)
value = react_1.default.createElement(Icon_1.IconComponent, { icon: icon.icon });
}
return (react_1.default.createElement(Flex_1.Flex, { className: "ab-IconSelector" },
react_1.default.createElement(OverlayTrigger_1.default, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300 },
react_1.default.createElement(SimpleButton_1.default, { className: "ab-IconSelector__trigger twa:text-center twa:w-[150px] twa:justify-center", onClick: () => null, variant: "raised" }, value)),
(props.clearable ?? true) && (react_1.default.createElement(SimpleButton_1.default, { disabled: !props.value, className: "ab-IconSelector__clear-button twa:ml-2", onClick: (event) => {
event.stopPropagation();
event.preventDefault();
props.onChange('');
}, variant: "text", icon: "close" }))));
};
exports.IconSelector = IconSelector;