@mikezimm/fps-library-v2/lib/components/atoms/Inputs/Dropdown/fps-Dropdown.js

Library of reusable typescript/javascript functions, interfaces and constants

import * as React from 'react';
require('@mikezimm/fps-styles/dist/fps-Dropdown.css');
const MultiSelectDropdownC = ({ key, label, description, maxVsibleRows = 5, multiple = false, options, selectedKeys, onChange, styles = {}, labelStyles = {}, className = '', autoClose = true, showCount = true, required = true, }) => {
    // Local state to manage dropdown open/closed state
    const [isOpen, setIsOpen] = React.useState(false);
    // Toggles the dropdown open/closed
    const handleToggle = () => setIsOpen(!isOpen);
    // Handles selection changes for single or multiple selections
    const handleOptionClick = (key) => {
        if (multiple) {
            const newSelectedKeys = selectedKeys.indexOf(key) !== -1
                ? selectedKeys.filter((k) => k !== key) // Remove if already selected
                : [...selectedKeys, key]; // Add if not selected
            onChange(newSelectedKeys);
        }
        else {
            onChange([key]); // Single selection
            setIsOpen(false); // Close dropdown after selection
        }
    };
    // Close dropdown on blur https://github.com/fps-solutions/SP-API-Tester/issues/59
    const handleBlur = (event) => {
        // Check if the blur event is triggered due to focus moving within the dropdown
        if (autoClose === true && !event.currentTarget.contains(event.relatedTarget)) {
            setIsOpen(false); // Close dropdown
        }
    };
    let needsSelect = required === true && selectedKeys.length === 0 ? true : false;
    let selectedLabel = showCount === false ? '' : `[ ${selectedKeys.length} of ${options.length} ]${needsSelect === true ? ' *' : ''}`;
    return (React.createElement("div", { tabIndex: -1, onBlur: handleBlur, className: `fps-Dropdown ${className}`, style: { display: 'flex', flexDirection: 'column', maxWidth: '200px', ...styles } },
        React.createElement("label", { className: "dropdown-label", style: labelStyles, title: needsSelect === true ? 'Selection is required' : '' }, `${label} ${selectedLabel}`),
        React.createElement("div", { tabIndex: 0, className: "dropdown-trigger", onClick: handleToggle },
            React.createElement("span", null, selectedKeys.length > 0
                ? options.filter((option) => selectedKeys.indexOf(option.key) !== -1).map((option) => option.text).join(', ')
                : 'Select...'),
            React.createElement("span", { className: `dropdown-arrow ${isOpen ? 'open' : ''}` }, "\u25BC")),
        isOpen && (React.createElement("div", { className: "dropdown-options", tabIndex: 0, style: {
                position: 'absolute',
                top: '100%',
                left: 0,
                width: '100%',
                maxHeight: `${Math.min(options.length, maxVsibleRows) * 2.5}em`,
                overflowY: 'auto',
                zIndex: 10,
            } }, options.map((option) => (React.createElement("div", { key: option.key, onClick: () => option.disabled !== true && handleOptionClick(option.key), className: `dropdown-option ${selectedKeys.indexOf(option.key) !== -1 ? 'selected' : ''} ${option.disabled === true ? 'disabled' : ''} ${option.heading ? 'heading' : ''}`, style: option.style },
            option.icon && React.createElement("span", { className: "dropdown-icon" }, option.icon),
            option.text))))),
        description && React.createElement("div", { className: "dropdown-description" }, description)));
};
export default MultiSelectDropdownC;
//# sourceMappingURL=fps-Dropdown.js.map