@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
105 lines • 6.97 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconSelector = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Panel_1 = require("@fluentui/react/lib/Panel");
const IconsList_1 = require("../iconsList/IconsList");
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const SearchBox_1 = require("@fluentui/react/lib/SearchBox");
const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
const IconSelector_module_scss_1 = tslib_1.__importDefault(require("./IconSelector.module.scss"));
const FluentIconsService_1 = require("../../services/FluentIconsService");
const Button_1 = require("@fluentui/react/lib/Button");
const Icon_1 = require("@fluentui/react/lib/Icon");
const Dialog_1 = tslib_1.__importStar(require("@fluentui/react/lib/Dialog"));
const Icons_1 = require("@fluentui/react/lib/Icons");
(0, Icons_1.initializeIcons)();
const _fluentIconsService = new FluentIconsService_1.FluentIconsService();
const _icons = _fluentIconsService.getAll();
const IconSelector = ({ renderOption = 'panel', currentIcon, panelClassName, panelType = Panel_1.PanelType.medium, dialogType = Dialog_1.DialogType.normal, isOpen, onChange, onDismiss, onSave }) => {
const [selectedIconName, setSelectedIconName] = React.useState();
const [icons, setIcons] = React.useState();
const onSelectedIconChange = React.useCallback((iconName) => {
setSelectedIconName(iconName);
if (onChange) {
onChange(iconName);
}
}, [onChange]);
const internalOnDismiss = React.useCallback(() => {
setSelectedIconName(currentIcon);
if (onDismiss) {
onDismiss();
}
}, [currentIcon, onDismiss]);
const onSearchAbort = React.useCallback(() => {
setIcons(_icons);
}, []);
const onSearchChange = React.useCallback((searchText) => {
let items;
if (searchText && searchText.trim().length > 2) {
items = _fluentIconsService.search(searchText);
}
else {
items = _fluentIconsService.getAll();
}
setIcons(items);
}, []);
const confirmSelection = React.useCallback(() => {
if (onSave) {
onSave(selectedIconName);
}
}, [selectedIconName]);
const renderContent = () => {
return React.createElement("div", null,
React.createElement(IconsList_1.IconsList, { icons: icons, selectedIconName: selectedIconName, onChange: onSelectedIconChange }));
};
const renderPanelNav = (props, defaultRender) => {
return React.createElement("div", { className: IconSelector_module_scss_1.default.navArea },
React.createElement("h2", { className: IconSelector_module_scss_1.default.headTitle }, strings.SelectIcon),
React.createElement(SearchBox_1.SearchBox, { className: IconSelector_module_scss_1.default.searchBox, onAbort: onSearchAbort, "data-automation-id": `icon-picker-search`, onSearch: (0, debounce_1.default)(onSearchChange, 300), onChange: (0, debounce_1.default)((e, value) => onSearchChange(value), 300) }),
React.createElement("div", { className: IconSelector_module_scss_1.default.closeBtnContainer }, defaultRender(props)));
};
const renderPanelFooter = () => {
return React.createElement("div", { className: IconSelector_module_scss_1.default.footer, "data-automation-id": `icon-picker-footer` },
React.createElement(Button_1.PrimaryButton, { text: strings.SaveButtonLabel, onClick: confirmSelection, disabled: !selectedIconName, className: IconSelector_module_scss_1.default.btnSave, "data-automation-id": `icon-picker-save` }),
React.createElement("div", { className: `${IconSelector_module_scss_1.default.selectionDisplay} ${selectedIconName ? 'noSelection' : ''}` },
React.createElement("span", { className: IconSelector_module_scss_1.default.selectionLabel },
strings.SelectedLabel,
":"),
React.createElement(Icon_1.Icon, { iconName: selectedIconName, className: IconSelector_module_scss_1.default.selectionIcon })),
React.createElement(Button_1.DefaultButton, { text: strings.CancelButtonLabel, onClick: internalOnDismiss, className: IconSelector_module_scss_1.default.btnCancel, "data-automation-id": `icon-picker-close` }));
};
const renderPanel = () => {
return React.createElement(Panel_1.Panel, { isOpen: isOpen, onDismiss: internalOnDismiss, type: panelType, "data-automation-id": `icon-picker-panel`, closeButtonAriaLabel: strings.CloseButton, className: panelClassName, onRenderNavigation: renderPanelNav, onRenderFooterContent: renderPanelFooter, isFooterAtBottom: true }, renderContent());
};
const renderDialog = () => {
return React.createElement(Dialog_1.default, { hidden: !isOpen, onDismiss: internalOnDismiss, isBlocking: true, containerClassName: IconSelector_module_scss_1.default.dialog, dialogContentProps: {
type: dialogType,
title: strings.SelectIcon,
showCloseButton: true,
className: panelClassName
} },
React.createElement(SearchBox_1.SearchBox, { className: IconSelector_module_scss_1.default.searchBox, onAbort: onSearchAbort, "data-automation-id": `icon-picker-search`, onSearch: (0, debounce_1.default)(onSearchChange, 300), onChange: (0, debounce_1.default)((e, value) => onSearchChange(value), 300) }),
React.createElement("div", { className: IconSelector_module_scss_1.default.dialogIconsContainer }, renderContent()),
React.createElement(Dialog_1.DialogFooter, null,
React.createElement("div", { className: IconSelector_module_scss_1.default.dialogFooter },
React.createElement(Icon_1.Icon, { iconName: selectedIconName, className: IconSelector_module_scss_1.default.dialogSelectedIcons }),
React.createElement(Button_1.PrimaryButton, { className: IconSelector_module_scss_1.default.save, text: strings.SaveButtonLabel, onClick: confirmSelection, disabled: !selectedIconName, "data-automation-id": `icon-picker-save` }),
React.createElement(Button_1.DefaultButton, { text: strings.CancelButtonLabel, onClick: internalOnDismiss, className: IconSelector_module_scss_1.default.btnCancel, "data-automation-id": `icon-picker-close` }))));
};
React.useEffect(() => {
setIcons(_icons);
}, []);
React.useEffect(() => {
if (isOpen === false) {
setIcons(_icons);
}
}, [isOpen]);
React.useEffect(() => {
setSelectedIconName(currentIcon);
}, [currentIcon]);
return (React.createElement(React.Fragment, null, renderOption === 'panel' ? renderPanel() : renderDialog()));
};
exports.IconSelector = IconSelector;
//# sourceMappingURL=IconSelector.js.map