norma-library/dist/esm/components/Select.js

Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.

import { __assign, __rest } from "tslib";
import React from 'react';
import { FormControl, InputLabel, ListItemText, MenuItem, Select as MuiSelect, OutlinedInput, } from '@mui/material';
import { styled } from '@mui/material/styles';
import { CheckBox } from './CheckBox';
var ITEM_HEIGHT = 48;
var ITEM_PADDING_TOP = 8;
var MenuProps = {
    PaperProps: {
        style: {
            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
            width: 250,
        },
    },
};
var SelectStyled = styled(MuiSelect)(function (_a) {
    var multiple = _a.multiple, variant = _a.variant;
    return ({
        '& .MuiOutlinedInput-notchedOutline': {
            border: multiple === true ? 'none' : '1px solid #666666 ',
            borderRadius: multiple === true ? 0 : 4,
            borderBottom: '1px solid #666666',
        },
        '& .MuiFormLabel-root': {
            backgroundColor: variant === 'standard' ? '#fff' : 'inherit',
            padding: variant === 'standard' ? '0 5px' : 0,
        },
    });
});
export var Select = function (_a) {
    var label = _a.label, onChange = _a.onChange, _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.value, value = _c === void 0 ? '' : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, props = __rest(_a, ["label", "onChange", "data", "value", "multiple"]);
    return (React.createElement(FormControl, { fullWidth: true },
        React.createElement(InputLabel, { id: props.id }, label),
        multiple ? (React.createElement(SelectStyled, __assign({ labelId: props.id, id: "demo-simple-select", value: value, MenuProps: MenuProps, input: React.createElement(OutlinedInput, { label: "Tag" }), renderValue: function (selected) { return selected.join(', '); }, onChange: onChange, multiple: true }, props), data &&
            data.map(function (item, key) { return (React.createElement(MenuItem, { value: item.value, key: key },
                React.createElement(CheckBox, { checked: value.includes(String(item.value)) }),
                React.createElement(ListItemText, { primary: String(item.label) }))); }))) : (React.createElement(SelectStyled, __assign({ labelId: props.id, id: "demo-simple-select", value: value, onChange: onChange }, props), data &&
            data.map(function (item, key) { return (React.createElement(MenuItem, { value: item.value, key: key },
                React.createElement(ListItemText, { primary: String(item.label) }))); })))));
};
//# sourceMappingURL=Select.js.map