@smart-react-components/ui/Select/SelectBox.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 Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const element_props_1 = __importDefault(require("@smart-react-components/core/element-props"));
const intrinsic_styled_core_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-core-props"));
const useChangeEffect_1 = __importDefault(require("@smart-react-components/core/hooks/useChangeEffect"));
const react_1 = __importDefault(require("react"));
const styled_components_1 = require("styled-components");
const Badge_1 = __importDefault(require("../Badge"));
const BadgeIcon_1 = __importDefault(require("../Badge/BadgeIcon"));
const BadgeList_1 = __importDefault(require("../Badge/BadgeList"));
const FormBlockLabel_1 = __importDefault(require("../components/Form/FormBlockLabel"));
const HiddenInput_1 = __importDefault(require("../components/Form/HiddenInput"));
const InputWrapper_1 = __importDefault(require("../components/Input/InputWrapper"));
const Dropdown_1 = __importDefault(require("../Dropdown"));
const DropdownArrowIcon_1 = __importDefault(require("../Dropdown/DropdownArrowIcon"));
const DropdownListElement_1 = __importDefault(require("../components/Dropdown/DropdownListElement"));
const useAddons_1 = __importDefault(require("../hooks/useAddons"));
const useSelectBoxItemList_1 = __importDefault(require("../hooks/useSelectBoxItemList"));
const Close_1 = __importDefault(require("../icons/Close"));
const InputElement_1 = __importDefault(require("../components/Input/InputElement"));
const InputPlaceholder_1 = __importDefault(require("../components/Input/InputPlaceholder"));
const useSelectBoxHover_1 = __importDefault(require("../hooks/useSelectBoxHover"));
const useSelectSearch_1 = __importDefault(require("../hooks/useSelectSearch"));
const form_1 = require("../util/form");
const props_1 = require("../util/props");
const wave_effect_1 = require("../util/wave-effect");
const DropdownItem_1 = __importDefault(require("../Dropdown/DropdownItem"));
const Input_1 = __importDefault(require("../Input"));
const SelectAddon_1 = __importDefault(require("./SelectAddon"));
const SelectBox = react_1.default.forwardRef((props, forwardRef) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
    const theme = (0, styled_components_1.useTheme)();
    const formEl = react_1.default.useRef(null);
    const { itemList } = (0, useSelectBoxItemList_1.default)({ children: props.children });
    const handleBadgeClick = value => props.setActive(props.active.filter(i => i !== value));
    const content = react_1.default.useMemo(() => {
        var _a;
        if (typeof props.active === 'undefined'
            || props.active === null
            || (Array.isArray(props.active) && props.active.length === 0)
            || (props.active === '' && !itemList[''])) {
            return react_1.default.createElement(InputPlaceholder_1.default, null, props.placeholder);
        }
        if (!Array.isArray(props.active)) {
            return react_1.default.createElement("div", null, (_a = itemList[String(props.active)]) === null || _a === void 0 ? void 0 : _a.children);
        }
        return (react_1.default.createElement(BadgeList_1.default, { palette: props.palette, isSoft: props.isSoft, shape: props.shape, size: props.size, sizeSm: props.sizeSm, sizeMd: props.sizeMd, sizeLg: props.sizeLg, sizeXl: props.sizeXl }, props.active
            .map(item => item)
            .sort((a, b) => itemList[String(a)].idx < itemList[String(b)].idx ? -1 : 1)
            .map(item => (react_1.default.createElement(Badge_1.default, { key: String(item), elementProps: { 'data-src-not-clickable': true } },
            react_1.default.createElement(BadgeIcon_1.default, { onClick: () => handleBadgeClick(item) },
                react_1.default.createElement(Close_1.default, null)),
            itemList[String(item)].children)))));
    }, [props.active, props.placeholder, itemList]);
    const [dropdownStatus, setDropdownStatus] = react_1.default.useState(false);
    const [searchValue, setSearchValue] = react_1.default.useState('');
    const waveEffectPalette = react_1.default.useMemo(() => (0, wave_effect_1.getWaveEffectPalette)(props, theme.$.vars.isDarkMode), [props.waveEffectPalette, props.palette, props.isOutline, props.isSoft, theme.$.vars.isDarkMode]);
    const { optionList } = (0, useSelectSearch_1.default)({
        children: props.children,
        dropdownStatus,
        searchValue,
    });
    const { hovered, setHovered } = (0, useSelectBoxHover_1.default)({
        active: props.active,
        children: optionList,
        dropdownStatus,
        hasHover: props.hasHover,
        isDisabled: props.isDisabled,
        setActive: props.setActive,
        setDropdownStatus,
    });
    (0, useChangeEffect_1.default)(() => {
        const event = new Event('src.fixedBox.setPosition');
        formEl.current.dispatchEvent(event);
    }, [content, optionList]);
    const { leftAddon, rightAddon } = (0, useAddons_1.default)({
        Component: SelectAddon_1.default,
        leftAddon: props.leftAddon,
        rightAddon: props.rightAddon,
        props: {
            cursorKey: 'selectBox',
            hasBorder: props.hasBorder,
            isDisabled: props.isDisabled,
            isFocused: false,
            isOutline: props.isOutline,
            isSoft: props.isSoft,
            palette: props.palette,
            shape: props.shape,
            size: props.size,
            sizeSm: props.sizeSm,
            sizeMd: props.sizeMd,
            sizeLg: props.sizeLg,
            sizeXl: props.sizeXl,
        },
    });
    (0, useChangeEffect_1.default)(() => {
        setHovered(undefined);
    }, [optionList]);
    const handleOptionClick = active => {
        props.setActive(active);
        if (!Array.isArray(active)) {
            setDropdownStatus(false);
        }
    };
    return (react_1.default.createElement(Dropdown_1.default, { elementProps: props.elementProps, status: dropdownStatus, setStatus: setDropdownStatus },
        react_1.default.createElement(FormBlockLabel_1.default, Object.assign({}, (0, element_props_1.default)(props, [intrinsic_styled_core_props_1.default]), { as: "div", cursorKey: "selectBox", formSize: props.size, formSizeSm: props.sizeSm, formSizeMd: props.sizeMd, formSizeLg: props.sizeLg, formSizeXl: props.sizeXl, isBlock: props.isBlock, isDisabled: props.isDisabled, ref: formEl, palette: props.palette }),
            props.label && react_1.default.createElement("span", null, props.label),
            react_1.default.createElement(Div_1.default, { display: "flex", flex: "1 1 auto" },
                ((_a = leftAddon === null || leftAddon === void 0 ? void 0 : leftAddon.props) === null || _a === void 0 ? void 0 : _a.isSeparated) && leftAddon,
                react_1.default.createElement(InputWrapper_1.default, { cursor: "$cursor.selectBox", hasBorder: props.hasBorder, hasSeparatedLeftAddon: (_b = leftAddon === null || leftAddon === void 0 ? void 0 : leftAddon.props) === null || _b === void 0 ? void 0 : _b.isSeparated, hasSeparatedRightAddon: (_c = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _c === void 0 ? void 0 : _c.isSeparated, isDisabled: props.isDisabled, isFocused: false, isOutline: props.isOutline, isSoft: props.isSoft, palette: props.palette, shape: props.shape },
                    (leftAddon && !((_d = leftAddon === null || leftAddon === void 0 ? void 0 : leftAddon.props) === null || _d === void 0 ? void 0 : _d.isSeparated)) && leftAddon,
                    react_1.default.createElement(InputElement_1.default, { hasLeftAddon: !!leftAddon, hasRightAddon: !!rightAddon, inputSize: props.size, inputSizeSm: props.sizeSm, inputSizeMd: props.sizeMd, inputSizeLg: props.sizeLg, inputSizeXl: props.sizeXl, isDisabled: props.isDisabled, isFocused: false, isInput: false, isOutline: props.isOutline, isSoft: props.isSoft, palette: props.palette },
                        react_1.default.createElement(HiddenInput_1.default, Object.assign({ onChange: () => { }, ref: forwardRef, value: (0, form_1.getInputValue)(props.active) }, (props.isDisabled && { disabled: true }), (props.isRequired && { required: true }))),
                        content,
                        react_1.default.createElement(DropdownArrowIcon_1.default, Object.assign({ fill: "currentcolor" }, (0, props_1.applyResponsiveStyledProp)(props, 'size', 'iconSize', v => `$size.icon.${v}`), props.dropdownArrowIconElementProps))),
                    (rightAddon && !((_e = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _e === void 0 ? void 0 : _e.isSeparated)) && rightAddon),
                ((_f = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _f === void 0 ? void 0 : _f.isSeparated) && rightAddon)),
        react_1.default.createElement(DropdownListElement_1.default, { dropdownListSize: props.size, dropdownListSizeSm: props.sizeSm, dropdownListSizeMd: props.sizeMd, dropdownListSizeLg: props.sizeLg, dropdownListSizeXl: props.sizeXl, isOutline: (_g = props.isDropdownOutline) !== null && _g !== void 0 ? _g : props.isOutline, isSoft: props.isSoft, palette: (_h = props.dropdownPalette) !== null && _h !== void 0 ? _h : props.palette },
            props.hasSearch && (react_1.default.createElement(DropdownItem_1.default, Object.assign({ elementProps: {
                    cursor: 'initial',
                } }, {
                hasHover: false,
                hasWaveEffect: false,
                isOutline: (_j = props.isDropdownOutline) !== null && _j !== void 0 ? _j : props.isOutline,
                isSoft: props.isSoft,
                palette: (_k = props.dropdownPalette) !== null && _k !== void 0 ? _k : props.palette,
                setStatus: () => { },
            }),
                react_1.default.createElement(Input_1.default, { isOutline: (_m = (_l = props.isSearchInputOutline) !== null && _l !== void 0 ? _l : props.isDropdownOutline) !== null && _m !== void 0 ? _m : props.isOutline, palette: (_p = (_o = props.searchInputPalette) !== null && _o !== void 0 ? _o : props.dropdownPalette) !== null && _p !== void 0 ? _p : props.palette, placeholder: props.searchInputPlaceholder, setValue: setSearchValue, size: (_q = props.searchInputSize) !== null && _q !== void 0 ? _q : props.size, sizeSm: (_r = props.searchInputSizeSm) !== null && _r !== void 0 ? _r : props.sizeSm, sizeMd: (_s = props.searchInputSizeMd) !== null && _s !== void 0 ? _s : props.sizeMd, sizeLg: (_t = props.searchInputSizeLg) !== null && _t !== void 0 ? _t : props.sizeLg, sizeXl: (_u = props.searchInputSizeLg) !== null && _u !== void 0 ? _u : props.sizeXl, value: searchValue }))),
            optionList.map((item, idx) => {
                var _a, _b, _c;
                return item && 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: (_b = props.isDropdownOutline) !== null && _b !== void 0 ? _b : props.isOutline, isSoft: props.isSoft, palette: (_c = props.dropdownPalette) !== null && _c !== void 0 ? _c : props.palette, setActive: handleOptionClick, setHovered: props.hasHover ? setHovered : null, waveEffectPalette }, (props.isDisabled && { isDisabled: true })));
            }))));
});
SelectBox.defaultProps = {
    dropdownArrowIconElementProps: {},
    elementProps: {},
    hasBorder: true,
    hasHover: true,
    hasSearch: false,
    hasWaveEffect: true,
    isBlock: true,
    isOutline: true,
    palette: 'primary',
    searchInputPlaceholder: 'Search...',
    shape: 'rectangle',
    size: 'medium',
};
exports.default = SelectBox;