@dxc-technology/halstack-react 0.0.0-40fd4e3 → 0.0.0-4254e6c

package/dist/select/Select.js

@@ -1,473 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
-
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox"));
-
-require("../common/OpenSans.css");
-
-var _variables = require("../common/variables.js");
-
-var _utils = require("../common/utils.js");
-
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
-
-var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
-
-function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  display: inline-block;\n  .MuiFormControl-root {\n    width: 100%;\n  }\n  .MuiFormLabel-root {\n    font-size: 16px;\n    color: ", ";\n    margin-top: -3px;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    height: 22px;\n    display: flex;\n    align-items: center;\n\n    &.Mui-disabled {\n      color: ", ";\n      opacity: ", ";\n    }\n    &.Mui-focused {\n      font-size: 16px;\n      color: ", ";\n    }\n  }\n  .MuiSelect-select.MuiSelect-select {\n      padding-right: unset;\n  }\n\n  .MuiSelect-select {\n    width: 100%;\n    height: 20px;\n    display: flex;\n    padding-right: unset;\n    color: ", ";\n    align-items: center;\n    :focus {\n      background-color: transparent;\n    }\n    & > *:last-child::after {\n      content: unset;\n    }\n    & > *:last-child::before {\n      content: unset;\n    }\n    &.Mui-disabled {\n      color: ", ";\n      cursor: not-allowed;\n    }\n  }\n  .MuiInputBase-root {\n    width: 100%;\n    &:focus {\n      outline: ", " auto 1px;\n    }\n    &.Mui-disabled {\n      opacity: ", ";\n      cursor: not-allowed;\n      &:focus {\n        outline: none;\n      }\n    }\n  }\n  .MuiInput-underline {\n    &:focus {\n      border-bottom: 2px solid;\n      border-bottom-color: ", ";\n    }\n    &.Mui-disabled:before {\n      border-bottom-style: solid;\n    }\n  }\n  .MuiInput-underline:hover:not(.Mui-disabled):before {\n    border-bottom: 1px solid;\n    border-bottom-color: ", ";\n  }\n  .MuiInput-underline:after {\n    border-bottom: 1px solid;\n    border-bottom-color: ", ";\n  }\n  .MuiInput-underline:before {\n    border-bottom: 1px solid;\n    border-bottom-color: ", "};\n  }\n  .MuiSelect-icon {\n    color: ", ";\n  }\n  & label {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: calc(100% - 24px);\n  }\n"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 20px;\n  max-width: 20px;\n  width: 20px;\n  height: 20px;\n  margin-left: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 20px;\n  max-width: 20px;\n  width: 20px;\n  height: 20px;\n  margin-left: ", ";\n  margin-right: ", ";\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: \"Open Sans\", sans-serif;\n  display: flex;\n  align-items: center;\n  flex-direction: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: \"Open Sans\", sans-serif;\n  margin-left: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: ", ";\n\n  &::before {\n    margin: 0 4px;\n    ", ";\n  }\n  &::after {\n    margin: 0 4px;\n    ", ";\n  }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: calc(100% - 24px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var useStyles = (0, _styles.makeStyles)(function () {
-  return {
-    root: function root(props) {
-      return {
-        minWidth: props.width
-      };
-    },
-    dropdownStyle: function dropdownStyle(props) {
-      return {
-        boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.3)",
-        minWidth: props.width,
-        width: props.width,
-        maxHeight: "250px",
-        "&::-webkit-scrollbar": {
-          width: "3px",
-          margin: "5px"
-        },
-        "&::-webkit-scrollbar-track": {
-          borderRadius: "3px",
-          backgroundColor: props.scrollBarTrackColor
-        },
-        "&::-webkit-scrollbar-thumb": {
-          borderRadius: "3px",
-          backgroundColor: props.scrollBarThumbColor
-        },
-        "& .MuiList-root": {
-          width: "auto !important",
-          paddingRight: "0 !important"
-        }
-      };
-    },
-    itemList: function itemList(props) {
-      return {
-        color: props.color,
-        "&.MuiList-padding": {
-          paddingBottom: "0px",
-          paddingTop: "0px"
-        },
-        "& li": {
-          fontSize: "16px",
-          "&:hover": {
-            backgroundColor: props.selectedOptionBackgroundColor + props.hoverOptionBackgroundColor,
-            color: props.color
-          },
-          "&:active": {
-            backgroundColor: props.selectedOptionBackgroundColor + props.hoverOptionBackgroundColor,
-            color: props.color
-          },
-          "&.MuiListItem-root.Mui-selected": {
-            backgroundColor: props.selectedOptionBackgroundColor,
-            color: props.color
-          }
-        }
-      };
-    }
-  };
-});
-
-var DxcSelect = function DxcSelect(_ref) {
-  var value = _ref.value,
-      name = _ref.name,
-      onChange = _ref.onChange,
-      label = _ref.label,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$invalid = _ref.invalid,
-      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-      _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
-      _ref$multiple = _ref.multiple,
-      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-      margin = _ref.margin,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "medium" : _ref$size;
-  var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
-  var colorsTheme = (0, _react.useMemo)(function () {
-    return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
-  }, [customTheme]);
-
-  var _useState = (0, _react.useState)(multiple && [] || ""),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedValue = _useState2[0],
-      setSelectedValue = _useState2[1];
-
-  var selectValues = _objectSpread({
-    width: "auto"
-  }, colorsTheme.select);
-
-  var classes = useStyles(selectValues);
-
-  var handleSelectChange = function handleSelectChange(selectedOption) {
-    if (multiple) {
-      setSelectedValue(selectedOption.target.value);
-
-      if (typeof onChange === "function") {
-        onChange(selectedOption.target.value);
-      }
-    } else {
-      setSelectedValue(selectedOption.target.value);
-
-      if (typeof onChange === "function") {
-        onChange(selectedOption.target.value);
-      }
-    }
-  };
-
-  var getLabelForSingleSelect = function getLabelForSingleSelect(selected) {
-    var selectedItem = options.filter(function (option) {
-      return option.value === selected;
-    })[0];
-    return _react["default"].createElement(SelectedIconContainer, {
-      iconPosition: iconPosition,
-      multiple: multiple,
-      label: selectedItem && selectedItem.label,
-      key: selectedItem && selectedItem.label
-    }, selectedItem && selectedItem.icon ? _react["default"].createElement(ListIconContainer, null, (0, _typeof2["default"])(selectedItem.icon) === "object" ? selectedItem.icon : _react["default"].createElement(selectedItem.icon)) : selectedItem && selectedItem.iconSrc && _react["default"].createElement(ListIcon, {
-      src: selectedItem && selectedItem.iconSrc
-    }), selectedItem && selectedItem.label && _react["default"].createElement(SelectedLabelContainer, {
-      iconSrc: selectedItem && selectedItem.iconSrc && selectedItem.icon,
-      iconPosition: iconPosition,
-      disabled: disabled
-    }, selectedItem && selectedItem.label));
-  };
-
-  var getSelectedValuesWithLabel = function getSelectedValuesWithLabel(optionsList, selected) {
-    return _react["default"].createElement(MultipleLabelSelected, null, optionsList.filter(function (x) {
-      return selected.includes(x.value);
-    }).map(function (optionToRender) {
-      return optionToRender.label;
-    }).join(", "));
-  };
-
-  var getSelectedValuesWithIcons = function getSelectedValuesWithIcons(optionsList, selected) {
-    return options.filter(function (x) {
-      return selected.includes(x.value);
-    }).map(function (optionToRender) {
-      return getLabelForSingleSelect(optionToRender.value);
-    });
-  };
-
-  var labelForMultipleSelect = function labelForMultipleSelect(selected) {
-    return options.findIndex(function (option) {
-      return !option.label;
-    }) !== -1 ? getSelectedValuesWithIcons(options, selected) : getSelectedValuesWithLabel(options, selected);
-  };
-
-  var getRenderValue = function getRenderValue(selected) {
-    return multiple && labelForMultipleSelect(selected) || getLabelForSingleSelect(selected);
-  };
-
-  var isChecked = function isChecked(checkedValue, value, option) {
-    if (value !== undefined) {
-      var result = false;
-      value.map(function (val) {
-        if (val === option.value) {
-          result = true;
-        }
-      });
-      return result;
-    } else if (checkedValue) {
-      return checkedValue.findIndex(function (element) {
-        return element === option.value;
-      }) !== -1 || false;
-    }
-  };
-
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme
-  }, _react["default"].createElement(SelectContainer, {
-    margin: margin,
-    size: size,
-    invalid: invalid
-  }, _react["default"].createElement(_FormControl["default"], null, _react["default"].createElement(_InputLabel["default"], {
-    disabled: disabled
-  }, required && _react["default"].createElement(_RequiredComponent["default"], null), label), _react["default"].createElement(_Select["default"], {
-    tabIndex: "0",
-    name: name,
-    multiple: multiple,
-    renderValue: getRenderValue,
-    onChange: handleSelectChange,
-    value: value !== undefined ? value : selectedValue,
-    disabled: disabled,
-    MenuProps: {
-      classes: {
-        paper: classes.dropdownStyle,
-        list: classes.itemList
-      },
-      getContentAnchorEl: null,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "left"
-      }
-    }
-  }, options.map(function (option) {
-    return _react["default"].createElement(_MenuItem["default"], {
-      id: option.value,
-      value: option.value,
-      disableRipple: true,
-      key: option.value
-    }, multiple && _react["default"].createElement(_Checkbox["default"], {
-      size: "fitContent",
-      checked: isChecked(selectedValue, value, option)
-    }), _react["default"].createElement(OptionContainer, {
-      iconPosition: iconPosition
-    }, option.icon ? _react["default"].createElement(ListIconContainer, {
-      label: option.label,
-      iconPosition: iconPosition
-    }, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : _react["default"].createElement(option.icon)) : option.iconSrc && _react["default"].createElement(ListIcon, {
-      src: option.iconSrc,
-      label: option.label,
-      iconPosition: iconPosition
-    }), " ", _react["default"].createElement(LabelCont, null, option.label)));
-  })))));
-};
-
-var sizes = {
-  small: "60px",
-  medium: "240px",
-  large: "480px",
-  fillParent: "100%"
-};
-
-var calculateWidth = function calculateWidth(margin, size) {
-  if (size === "fillParent") {
-    return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
-  }
-
-  return sizes[size];
-};
-
-var MultipleLabelSelected = _styledComponents["default"].div(_templateObject());
-
-var LabelCont = _styledComponents["default"].span(_templateObject2());
-
-var SelectedIconContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
-  return props.iconPosition === "before" && "row" || "row-reverse";
-}, function (props) {
-  return props.iconPosition === "before" && "flex-start" || "flex-end";
-}, function (props) {
-  return props.multiple && props.label && "15px" || "0px";
-}, function (props) {
-  return !props.multiple && "calc(100% - 24px)" || "auto";
-}, function (props) {
-  return props.iconPosition === "after" && (props.label !== "" || props.label === undefined) && "content:','";
-}, function (props) {
-  return props.iconPosition === "before" && (props.label !== "" || props.label === undefined) && "content:','";
-});
-
-var SelectedLabelContainer = _styledComponents["default"].span(_templateObject4(), function (props) {
-  return (props.iconPosition === "after" || !props.iconSrc) && "0px" || "10px";
-}, function (props) {
-  return (props.iconPosition === "before" || !props.iconSrc) && "0px" || "10px";
-});
-
-var OptionContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
-  return props.iconPosition === "before" && "row" || "row-reverse";
-});
-
-var ListIcon = _styledComponents["default"].img(_templateObject6(), function (props) {
-  return props.iconPosition === "after" && props.label !== "" && "10px" || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && "10px" || "0px";
-});
-
-var ListIconContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
-  return props.iconPosition === "after" && props.label !== "" && "10px" || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && "10px" || "0px";
-});
-
-var SelectContainer = _styledComponents["default"].div(_templateObject8(), function (props) {
-  return calculateWidth(props.margin, props.size);
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-}, function (props) {
-  return props.invalid === true ? props.theme.select.error : props.theme.select.color;
-}, function (props) {
-  return props.theme.select.color;
-}, function (props) {
-  return props.theme.select.disabled;
-}, function (props) {
-  return props.invalid === true ? props.theme.select.error : props.theme.select.color;
-}, function (props) {
-  return props.theme.select.color;
-}, function (props) {
-  return props.theme.select.color;
-}, function (props) {
-  return props.theme.select.focusColor;
-}, function (props) {
-  return props.theme.select.disabled;
-}, function (props) {
-  return props.invalid === true ? props.theme.select.error : props.theme.select.color;
-}, function (props) {
-  return props.invalid === true ? props.theme.select.error : props.theme.select.color;
-}, function (props) {
-  return props.invalid === true ? props.theme.select.error : props.theme.select.color;
-}, function (props) {
-  return props.invalid === true ? props.theme.select.error : props.theme.select.color;
-}, function (props) {
-  return props.theme.select.color;
-});
-
-DxcSelect.propTypes = {
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  label: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]))]),
-  disabled: _propTypes["default"].bool,
-  required: _propTypes["default"].bool,
-  invalid: _propTypes["default"].bool,
-  iconPosition: _propTypes["default"].oneOf(["after", "before"]),
-  onChange: _propTypes["default"].func,
-  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    value: _propTypes["default"].any.isRequired,
-    label: _propTypes["default"].string,
-    icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
-    iconSrc: _propTypes["default"].string
-  })),
-  multiple: _propTypes["default"].bool,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
-};
-var _default = DxcSelect;
-exports["default"] = _default;