@blend-ui/core/dist/esm/Select.js

Blend core cmponents

import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
import React, { forwardRef, useState } from 'react';
import styled from 'styled-components';
import { space, typography } from 'styled-system';
import styledProps from '@styled-system/prop-types';
import { BlendIcon } from '@blend-ui/icons';
import bxChevronUp from '@iconify/icons-bx/bx-chevron-up';
import bxChevronDown from '@iconify/icons-bx/bx-chevron-down';
import PropTypes from 'prop-types';
import Box from './Box.js';
var _excluded = ["variation", "size", "onChange"];
var selectVariations = ["fill", "outline"];

var componentStyle = function componentStyle(props) {
  console.log("VARIATION ", props);
  var selectProps = props.theme.componentStyles.select[props.sizevariation];
  var variationProps = null;

  if (props.variation === "fill") {
    variationProps = {
      color: props.theme.colors.baseWhite,
      backgroundColor: props.theme.colors.baseSecondary,
      border: "none"
    };
  } else if (props.variation === "outline") {
    variationProps = {
      color: props.theme.colors.baseSecondary,
      backgroundColor: 'transparent',
      border: "1px solid ".concat(props.theme.colors.baseSecondary)
    };
  }

  return [selectProps, variationProps];
};

var SelectElement = styled.select.withConfig({
  displayName: "Select__SelectElement",
  componentId: "sc-hvu8mh-0"
})(["appearance:none;display:block;width:", ";height:", " font-family:", ";margin:0;", " ", " ", " ::-ms-expand{display:none;}&:disabled{opacity:0.25;}&:focus{outline:none;-webkit-box-shadow:none;box-shadow:none;}"], function (props) {
  return props.width || "100%";
}, function (props) {
  return props.height || "20px";
}, function (props) {
  return props.theme.fonts.body;
}, componentStyle, space, typography);
var StyledBox = styled(Box).withConfig({
  displayName: "Select__StyledBox",
  componentId: "sc-hvu8mh-1"
})(["display:flex;align-items:center;"]);
var ClickableIcon = styled(BlendIcon).withConfig({
  displayName: "Select__ClickableIcon",
  componentId: "sc-hvu8mh-2"
})(["color:", ";color:", ";pointer-events:none;margin-left:", ";"], function (props) {
  return props.variation === "fill" ? props.theme.colors.baseWhite : props.theme.colors.basePrimary;
}, function (props) {
  return props.variation === "outline" ? props.theme.colors.baseSecondary : props.theme.colors.baseWhite;
}, function (props) {
  return props.sizevariation === "xs" || props.sizevariation === "sm" ? "-22px" : "-32px";
});
var Select = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var _ref$variation = _ref.variation,
      variation = _ref$variation === void 0 ? "fill" : _ref$variation,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? "xs" : _ref$size,
      onChange = _ref.onChange,
      props = _objectWithoutProperties(_ref, _excluded);

  var iconUp;
  var iconDown;

  if (size === "xs" || size === "sm") {
    iconDown = bxChevronDown;
    iconUp = bxChevronUp;
  }

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isOpen = _useState2[0],
      setIsOpen = _useState2[1];

  var onSelectClick = function onSelectClick(e) {
    //console.log("SELECT ", isOpen, e);
    setIsOpen(!isOpen);
  };

  var onSelect = function onSelect(e) {
    //console.log("SELECT ", isOpen, e);
    setIsOpen(!isOpen);

    if (onChange) {
      onChange(e);
    }
  };

  return /*#__PURE__*/React.createElement(StyledBox, {
    width: "100%"
  }, /*#__PURE__*/React.createElement(SelectElement, _extends({}, props, {
    ref: ref,
    onClick: onSelectClick,
    onChange: onSelect,
    sizevariation: size,
    variation: variation
  })), /*#__PURE__*/React.createElement(ClickableIcon, {
    iconify: isOpen ? iconUp : iconDown,
    sizevariation: size,
    variation: variation
  }));
});
Select.propTypes = _objectSpread2(_objectSpread2(_objectSpread2({}, styledProps.space), styledProps.typography), {}, {
  /** Variations */
  variation: PropTypes.oneOf(selectVariations)
});
Select.displayName = "Select";
Select.isField = true;
Select.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Select",
  "props": {
    "variation": {
      "defaultValue": {
        "value": "\"fill\"",
        "computed": false
      },
      "description": "Variations",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"fill\"",
          "computed": false
        }, {
          "value": "\"outline\"",
          "computed": false
        }]
      },
      "required": false
    },
    "size": {
      "defaultValue": {
        "value": "\"xs\"",
        "computed": false
      },
      "required": false
    }
  },
  "composes": ["@styled-system/prop-types"]
};
export { Select as default };