react-select-material-ui/lib/SelectDropdownStyles.js

A react SELECT component based on react-select and looking like a material-ui component

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var ColorConstants_1 = require("./ColorConstants");
var styleControl = function () { return ({
    background: 'transparent',
    borderWidth: 0,
    borderBottomStyle: 'solid',
    borderBottomWidth: 1,
    borderRadius: 0,
    boxShadow: 'none',
    marginTop: 8,
    marginRight: 25,
    '&:hover': {
        boxShadow: 'none',
        backgroundPosition: '0 100%',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 1px',
        transition: 'background-size .2s',
    },
}); };
var styleIndicatorsContainer = {
    position: 'absolute',
    right: 0,
    marginLeft: 8,
    marginRight: -25,
    backgroundColor: 'transparent',
    height: '100%',
};
var styleClearIndicator = function (base) { return ({
    color: ColorConstants_1.colorClearNormal,
    margin: '0 4px 0 0',
    padding: 0,
    cursor: 'pointer',
    '&:hover': {
        color: ColorConstants_1.colorClearHover,
    },
}); };
var styleDropdownIndicator = {
    margin: '0 0 0 4px',
    padding: 0,
    cursor: 'pointer',
};
var styleMenuList = {
    padding: 0,
};
var styleNoOptionsMessage = {
    textAlign: 'left',
    color: '#ff8080',
};
var styleMultiValueRemove = function (isDisabled) {
    if (isDisabled === void 0) { isDisabled = false; }
    return function (base) { return (__assign(__assign({}, base), { display: isDisabled ? 'none' : base.display })); };
};
var styleValueContainer = function (isClearable) {
    if (isClearable === void 0) { isClearable = false; }
    return ({
        padding: 0,
        marginRight: isClearable ? 25 : 0,
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
    });
};
var getStyles = function (props) {
    var customStyles = (props === null || props === void 0 ? void 0 : props.styles) || {};
    var isDisabled = (props === null || props === void 0 ? void 0 : props.isDisabled) ? true : false;
    var isClearable = (props === null || props === void 0 ? void 0 : props.isClearable) ? true : false;
    return __assign(__assign({}, customStyles), { control: mixStyle(styleControl(), customStyles.control), clearIndicator: mixStyle(styleClearIndicator, customStyles.clearIndicator), dropdownIndicator: mixStyle(styleDropdownIndicator, customStyles.dropdownIndicator), indicatorsContainer: mixStyle(styleIndicatorsContainer, customStyles.indicatorsContainer), menuList: mixStyle(styleMenuList, customStyles.menuList), multiValueRemove: mixStyle(styleMultiValueRemove(isDisabled), customStyles.multiValueRemove), noOptionsMessage: mixStyle(styleNoOptionsMessage, customStyles.noOptionsMessage), valueContainer: mixStyle(styleValueContainer(isClearable), customStyles.valueContainer) });
};
exports.getStyles = getStyles;
var mixStyle = function (customStyle, styleFn) {
    return function (base, props) { return (__assign(__assign(__assign({}, base), (typeof customStyle === 'function'
        ? customStyle(base, props)
        : customStyle)), (styleFn ? styleFn(base, props) : {}))); };
};