@smart-react-components/ui/Button/ButtonSelect.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const useChangeEffect_1 = __importDefault(require("@smart-react-components/core/hooks/useChangeEffect"));
const react_1 = __importDefault(require("react"));
const _1 = __importDefault(require("./"));
const DropdownArrowIcon_1 = __importDefault(require("../Dropdown/DropdownArrowIcon"));
const Dropdown_1 = __importDefault(require("../Dropdown"));
const DropdownListElement_1 = __importDefault(require("../components/Dropdown/DropdownListElement"));
const useSelectBoxHover_1 = __importDefault(require("../hooks/useSelectBoxHover"));
const useSelectBoxItemList_1 = __importDefault(require("../hooks/useSelectBoxItemList"));
const ButtonSelect = react_1.default.forwardRef((props, forwardRef) => {
    const ref = react_1.default.useRef(null);
    const { itemList } = (0, useSelectBoxItemList_1.default)({ children: props.children });
    const getContent = () => {
        var _a;
        if (typeof props.active === 'undefined'
            || props.active === null
            || props.active.length === 0) {
            return props.placeholder;
        }
        if (!Array.isArray(props.active)) {
            return (_a = itemList[String(props.active)]) === null || _a === void 0 ? void 0 : _a.children;
        }
        return (react_1.default.createElement("span", null, props.active
            .sort((a, b) => itemList[String(a)].idx < itemList[String(b)].idx ? -1 : 1)
            .map((item, idx) => (react_1.default.createElement(react_1.default.Fragment, { key: String(item) },
            react_1.default.createElement("span", null, itemList[String(item)].children),
            idx + 1 < props.active.length ? ', ' : '')))));
    };
    const [content, setContent] = react_1.default.useState(() => getContent());
    const [dropdownStatus, setDropdownStatus] = react_1.default.useState(false);
    (0, useChangeEffect_1.default)(() => {
        setContent(getContent());
    }, [props.active, props.placeholder, itemList]);
    (0, useChangeEffect_1.default)(() => {
        const event = new Event('src.fixedBox.setPosition');
        (forwardRef !== null && forwardRef !== void 0 ? forwardRef : ref).current.dispatchEvent(event);
    }, [content]);
    const { hovered, setHovered } = (0, useSelectBoxHover_1.default)({
        active: props.active,
        children: Array.isArray(props.children) ? props.children : [props.children],
        dropdownStatus,
        hasHover: props.hasHover,
        isDisabled: props.isDisabled,
        setActive: props.setActive,
        setDropdownStatus,
    });
    const handleOptionClick = active => {
        props.setActive(active);
        if (!Array.isArray(active)) {
            setDropdownStatus(false);
        }
    };
    return (react_1.default.createElement(Dropdown_1.default, { status: dropdownStatus, setStatus: setDropdownStatus },
        react_1.default.createElement(_1.default, Object.assign({}, props, { as: "div", ref: forwardRef !== null && forwardRef !== void 0 ? forwardRef : ref }),
            react_1.default.createElement("span", null, content),
            react_1.default.createElement(DropdownArrowIcon_1.default, null)),
        react_1.default.createElement(DropdownListElement_1.default, { dropdownListSize: props.size, dropdownListSizeSm: props.sizeSm, dropdownListSizeMd: props.sizeMd, dropdownListSizeLg: props.sizeLg, dropdownListSizeXl: props.sizeXl, isOutline: props.isOutline, isSoft: props.isSoft, palette: props.palette }, (Array.isArray(props.children) ? props.children : [props.children]).map((item, idx) => {
            var _a;
            return react_1.default.cloneElement(item, Object.assign({ key: (_a = item.key) !== null && _a !== void 0 ? _a : idx, active: props.active, cursorKey: 'selectBox', hasHover: false, hasWaveEffect: props.hasWaveEffect, hovered, isEmbedded: false, isOutline: props.isOutline, isSoft: props.isSoft, palette: props.palette, setActive: handleOptionClick, setHovered: props.hasHover ? setHovered : null, waveEffectPalette: props.waveEffectPalette }, (props.isDisabled && { isDisabled: true })));
        }))));
});
ButtonSelect.defaultProps = {
    hasHover: true,
    hasWaveEffect: true,
    palette: 'primary',
    shape: 'rectangle',
    size: 'medium',
    waveEffectPalette: 'light',
};
exports.default = ButtonSelect;