@makeen.io/material-ui-kit/distr/atoms/Select/index.js

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject8() {var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  position: ", ";\n  top: ", ";\n  left: ", ";\n  transform: ", ";\n  padding-left: ", ";\n  svg {\n    left: ", ";\n  }\n  &.MuiInputLabel-shrink {\n    transform: ", ";\n  }\n"]);_templateObject8 = function _templateObject8() {return data;};return data;}function _templateObject7() {var data = _taggedTemplateLiteral(["\n  color: #8f9bb3;\n  font-size: ", ";\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n"]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = _taggedTemplateLiteral(["\n      ", "\n    "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = _taggedTemplateLiteral(["\n  &:hover {\n    border-radius: 4px;\n    background-color: ", ";\n  }\n  ", "\n"]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = _taggedTemplateLiteral(["\n      ", "\n      ", "\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n  .MuiOutlinedInput-notchedOutline,\n  .MuiOutlinedInput-root.Mui-disabled .MuiOutlinedInput-notchedOutline {\n    border-color: ", ";\n  }\n\n  .MuiSelect-icon {\n    top: initial;\n    display: ", ";\n  }\n\n  fieldset {\n    legend {\n      max-width: 0;\n    }\n  }\n  ", "\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n      ", "\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  min-width: 100px;\n  // Dropdown of Select Styling\n  && {\n    background-color: ", ";\n    ul {\n      padding: 0;\n    }\n  }\n  .MuiSelect-outlined.MuiSelect-outlined {\n    padding-left: 10px;\n    padding-top: 13px;\n    padding-bottom: 13px;\n  }\n  .MuiSelect-select:focus {\n    background: none;\n  }\n  .MuiSelect-selectMenu {\n    min-height: initial !important;\n  }\n  .MuiSelect-icon {\n    font-size: 24px;\n    color: #aaa;\n  }\n  ", "\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import MaterialSelect from "@material-ui/core/Select";
import _ from "lodash";
import { RiArrowDownSLine } from "react-icons/ri";
import styled, { css } from "styled-components";
var switchBorderStyle = function switchBorderStyle(borderStyle, propsThemePalette) {
  switch (borderStyle) {
    case "active":
      return propsThemePalette.activeBorder;
    case "success":
      return propsThemePalette.successBorder;
    case "error":
      return propsThemePalette.errorBorder;
    case "ghost":
      return propsThemePalette.ghostBorder;
    default:
      return propsThemePalette.defaultBorder;}

};
var ExplorerSelect = styled(function (_ref) {var selectStyle = _ref.selectStyle,className = _ref.className,rest = _objectWithoutProperties(_ref, ["selectStyle", "className"]);return /*#__PURE__*/React.createElement(MaterialSelect, _extends({}, rest, { MenuProps: { classes: { paper: className } } }));})(_templateObject(),



function (props) {return props.menuItemColor;},



















function (props) {return css(_templateObject2(),
  props.selectStyle ? props.selectStyle(props) : "");});


var ExplorerFormControl = styled(function (_ref2) {var formControlStyle = _ref2.formControlStyle,showInputLabel = _ref2.showInputLabel,rest = _objectWithoutProperties(_ref2, ["formControlStyle", "showInputLabel"]);return /*#__PURE__*/React.createElement(FormControl, _extends({}, rest));})(_templateObject3(),


function (props) {return switchBorderStyle(props.borderStyle, props.theme.palette.Select);},




function (props) {return props.showIcon ? "block" : "none";},







function (props) {return css(_templateObject4(),
  !props.showInputLabel ? "\n      fieldset {\n        top: 0;\n        legend {\n          display: none;\n          max-width: 0;\n        }\n      }" :








  "",
  props.formControlStyle ? props.formControlStyle(props) : "");});


var SMItem = styled(function (_ref3) {var menuItemStyle = _ref3.menuItemStyle,innerRef = _ref3.innerRef,rest = _objectWithoutProperties(_ref3, ["menuItemStyle", "innerRef"]);return /*#__PURE__*/React.createElement(MenuItem, _extends({ ref: innerRef }, rest));})(_templateObject5(),


function (props) {return props.theme.palette.Select.menuItemColor;},

function (props) {return css(_templateObject6(),
  props.menuItemStyle ? props.menuItemStyle(props) : "");});


// Intermediary to handle ref forwarding
var SelectMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {return /*#__PURE__*/React.createElement(SMItem, _extends({ innerRef: ref }, props));});
var RenderHint = styled.span(_templateObject7(),

function (props) {return props.isSmall ? "13px !important" : "15px !important";});






var StyledInputLabel = styled(InputLabel)(_templateObject8(),
function (props) {return props.isFilled ? "#222b45" : "#8f9bb3";},
function (props) {return props.isSmall ? "13px" : "15px";},
function (props) {return props.labelIcon ? "absolute" : "";},
function (props) {return props.labelIcon ? "50%" : "";},
function (props) {return props.labelIcon ? "10px" : "";},
function (props) {return props.labelIcon ? "translateY(-50%)" : "";},
function (props) {return props.iconHint ? "30px" : "10px";},

function (props) {return props.iconHint ? "0" : "30px";},


function (props) {return props.labelIcon ?
  "translateY(-50%) !important" :
  "translate(14px, 16px) scale(1)";});


export default (function (_ref4) {var id = _ref4.id,name = _ref4.name,label = _ref4.label,options = _ref4.options,value = _ref4.value,dropdownStyle = _ref4.dropdownStyle,selectStyle = _ref4.selectStyle,formControlStyle = _ref4.formControlStyle,menuItemStyle = _ref4.menuItemStyle,showInputLabel = _ref4.showInputLabel,_onChange = _ref4.onChange,multiple = _ref4.multiple,showNone = _ref4.showNone,withHint = _ref4.withHint,hint = _ref4.hint,iconHint = _ref4.iconHint,_ref4$isFilled = _ref4.isFilled,isFilled = _ref4$isFilled === void 0 ? false : _ref4$isFilled,_ref4$isSmall = _ref4.isSmall,isSmall = _ref4$isSmall === void 0 ? false : _ref4$isSmall,borderStyle = _ref4.borderStyle,labelIcon = _ref4.labelIcon,showIcon = _ref4.showIcon,props = _objectWithoutProperties(_ref4, ["id", "name", "label", "options", "value", "dropdownStyle", "selectStyle", "formControlStyle", "menuItemStyle", "showInputLabel", "onChange", "multiple", "showNone", "withHint", "hint", "iconHint", "isFilled", "isSmall", "borderStyle", "labelIcon", "showIcon"]);return /*#__PURE__*/React.createElement(ExplorerFormControl, { variant: "outlined", formControlStyle: formControlStyle, showInputLabel: showInputLabel, borderStyle: borderStyle, showIcon: showIcon },
  showInputLabel && label && id && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
  React.createElement(StyledInputLabel, { id: id + "-label", isFilled: isFilled, isSmall: isSmall, labelIcon: labelIcon, iconHint: iconHint },
  iconHint ? /*#__PURE__*/React.createElement(RenderHint, { isSmall: isSmall }, iconHint) : "",
  !value && label ? label : "",
  withHint ? /*#__PURE__*/React.createElement(RenderHint, { isSmall: isSmall }, hint) : "")), /*#__PURE__*/
  React.createElement(ExplorerSelect, _extends({ id: id, name: name, IconComponent: RiArrowDownSLine, style: dropdownStyle, onChange: function onChange(e) {return _onChange(e.target.value);}, labelId: id + "-label", label: label, borderStyle: borderStyle, selectStyle: selectStyle }, !_.isUndefined(multiple) ? { multiple: multiple } : {}, !_.isUndefined(value) ? { value: value } : {}, props),
  showNone && /*#__PURE__*/React.createElement(SelectMenuItem, { value: "", menuItemStyle: menuItemStyle }, /*#__PURE__*/
  React.createElement("em", null, "None")),
  (options || []).map(function (_ref5) {var value = _ref5.value,label = _ref5.label;return /*#__PURE__*/React.createElement(SelectMenuItem, { key: value, value: value, menuItemStyle: menuItemStyle }, label);})));});
//# sourceMappingURL=index.js.map