@smart-react-components/ui/Select/SelectSearchBox.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 element_props_1 = __importDefault(require("@smart-react-components/core/element-props"));
const change_events_1 = __importDefault(require("@smart-react-components/core/element-props/change-events"));
const focus_events_1 = __importDefault(require("@smart-react-components/core/element-props/focus-events"));
const intrinsic_styled_flex_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-flex-props"));
const intrinsic_styled_margin_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-margin-props"));
const intrinsic_styled_size_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-size-props"));
const keyboard_events_1 = __importDefault(require("@smart-react-components/core/element-props/keyboard-events"));
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 DropdownListElement_1 = __importDefault(require("../components/Dropdown/DropdownListElement"));
const useSelectBoxHover_1 = __importDefault(require("../hooks/useSelectBoxHover"));
const useSelectSearch_1 = __importDefault(require("../hooks/useSelectSearch"));
const wave_effect_1 = require("../util/wave-effect");
const Dropdown_1 = __importDefault(require("../Dropdown"));
const Input_1 = __importDefault(require("../Input"));
const SelectSearchBox = react_1.default.forwardRef((props, forwardRef) => {
    const theme = (0, styled_components_1.useTheme)();
    const [dropdownStatus, setDropdownStatus] = react_1.default.useState(false);
    const { optionList } = (0, useSelectSearch_1.default)({
        children: props.children,
        dropdownStatus,
        searchValue: props.value,
    });
    const { hovered, setHovered } = (0, useSelectBoxHover_1.default)({
        active: props.value,
        children: optionList,
        dropdownStatus,
        hasHover: props.hasHover,
        isDisabled: props.isDisabled,
        setActive: props.setValue,
        setDropdownStatus,
    });
    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]);
    (0, useChangeEffect_1.default)(() => {
        setHovered(undefined);
    }, [optionList]);
    const handleOptionClick = value => {
        setDropdownStatus(false);
        props.setValue(value);
    };
    return (react_1.default.createElement(Dropdown_1.default, { elementProps: props.dropdownProps, status: dropdownStatus, setStatus: setDropdownStatus },
        react_1.default.createElement(Input_1.default, Object.assign({}, (0, element_props_1.default)(props, [change_events_1.default, focus_events_1.default, intrinsic_styled_flex_props_1.default, intrinsic_styled_margin_props_1.default, intrinsic_styled_size_props_1.default, keyboard_events_1.default]), { containerProps: props.containerProps, hasBorder: props.hasBorder, hasSpellCheck: props.hasSpellCheck, inputProps: props.inputProps, isBlock: props.isBlock, isDisabled: props.isDisabled, isOutline: props.isOutline, isReadOnly: props.isReadOnly, isRequired: props.isRequired, isSoft: props.isSoft, label: props.label, leftAddon: props.leftAddon, palette: props.palette, placeholder: props.placeholder, ref: forwardRef, rightAddon: props.rightAddon, setValue: props.setValue, shape: props.shape, size: props.size, sizeSm: props.sizeSm, sizeMd: props.sizeMd, sizeLg: props.sizeLg, sizeXl: props.sizeXl, template: props.template, value: props.value })),
        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 }, optionList.map((item, idx) => {
            var _a;
            return item && react_1.default.cloneElement(item, Object.assign({ key: (_a = item.key) !== null && _a !== void 0 ? _a : idx, active: props.value, 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.isDisabled && { isDisabled: true })));
        }))));
});
SelectSearchBox.defaultProps = {
    containerProps: {},
    dropdownProps: {},
    hasHover: true,
    hasWaveEffect: true,
    isOutline: true,
    palette: 'primary',
    size: 'medium',
};
exports.default = SelectSearchBox;