@smart-react-components/ui/Select/index.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 react_1 = __importDefault(require("react"));
const styled_components_1 = require("styled-components");
const FormBlockLabel_1 = __importDefault(require("../components/Form/FormBlockLabel"));
const useAddons_1 = __importDefault(require("../hooks/useAddons"));
const SelectElement_1 = __importDefault(require("../components/Select/SelectElement"));
const HiddenInput_1 = __importDefault(require("../components/Form/HiddenInput"));
const InputWrapper_1 = __importDefault(require("../components/Input/InputWrapper"));
const form_1 = require("../util/form");
const SelectAddon_1 = __importDefault(require("./SelectAddon"));
const wave_effect_1 = require("../util/wave-effect");
const Select = react_1.default.forwardRef((props, forwardRef) => {
    var _a, _b, _c, _d, _e, _f;
    const theme = (0, styled_components_1.useTheme)();
    const { leftAddon, rightAddon } = (0, useAddons_1.default)({
        Component: SelectAddon_1.default,
        leftAddon: props.leftAddon,
        rightAddon: props.rightAddon,
        props: {
            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,
        },
    });
    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]);
    return (react_1.default.createElement(FormBlockLabel_1.default, Object.assign({}, (0, element_props_1.default)(props, [intrinsic_styled_core_props_1.default]), { as: "div", formSize: props.size, formSizeSm: props.sizeSm, formSizeMd: props.sizeMd, formSizeLg: props.sizeLg, formSizeXl: props.sizeXl, isBlock: props.isBlock, isDisabled: props.isDisabled, 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, { 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(SelectElement_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, 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 }))),
                    (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: 'select', hasHover: props.hasHover, hasWaveEffect: props.hasWaveEffect, isEmbedded: true, isOutline: props.isOutline, isSoft: props.isSoft, palette: props.palette, setActive: props.setActive, waveEffectPalette }, (props.isDisabled && { isDisabled: true })));
                    })),
                (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)));
});
Select.defaultProps = {
    hasBorder: true,
    hasHover: true,
    hasWaveEffect: true,
    isBlock: true,
    isOutline: true,
    palette: 'primary',
    shape: 'rectangle',
    size: 'medium',
};
exports.default = Select;