ultra-design/lib/select/option.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var _pt = require('prop-types');
require('react');
var react = require('@emotion/react');
var clsx = require('clsx');
var fade = require('../utils/fade.js');
var mergeProps = require('../utils/mergeProps.js');
var withStyle = require('../utils/withStyle.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
var _pt__default = /*#__PURE__*/_interopDefaultLegacy(_pt);
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);

var _templateObject;
var defaultProps = {};

var Option = function Option(p) {
  var props = mergeProps.useMergeProps(defaultProps, p);
  var label = props.label,
      disabled = props.disabled,
      children = props.children,
      onClick = props.onClick,
      onMouseEnter = props.onMouseEnter,
      className = props.className;

  var handleClick = function handleClick(e) {
    if (disabled) return;
    onClick === null || onClick === void 0 ? void 0 : onClick(e);
  };

  return jsxRuntime.jsx("div", {
    className: clsx__default["default"]('ultra-select-option', disabled && 'ultra-select-option--disabled', className),
    css: optionStyles(props),
    onClick: handleClick,
    onMouseEnter: onMouseEnter,
    children: children || label && jsxRuntime.jsx("div", {
      children: label
    })
  });
};

Option.propTypes = {
  label: _pt__default["default"].string,
  value: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].number]),
  disabled: _pt__default["default"].bool,
  onClick: _pt__default["default"].func,
  onMouseEnter: _pt__default["default"].func,
  className: _pt__default["default"].string
};
Option.displayName = 'UltraSelectOption';
var Option$1 = withStyle["default"](Option);

var optionStyles = function optionStyles(props) {
  var theme = props.theme;
  var primaryColor = theme.style.primaryColor;
  var _theme$theme$mode = theme[theme.mode],
      textColor = _theme$theme$mode.textColor,
      disabledBgColor = _theme$theme$mode.disabledBgColor,
      disabledTextColor = _theme$theme$mode.disabledTextColor,
      reverseBgColor = _theme$theme$mode.reverseBgColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    display: flex;\n    align-items: center;\n    padding: 0 12px;\n    min-height: 32px;\n    cursor: pointer;\n    user-select: none;\n\n    &.ultra-select-option--disabled {\n      background-color: ", ";\n      color: ", ";\n      cursor: not-allowed;\n    }\n    &.ultra-select-option--active {\n      background-color: ", ";\n      color: ", ";\n\n      &.ultra-select-option--hover {\n        background-color: ", ";\n      }\n    }\n    &:not(.ultra-select-option--disabled, .ultra-select-option--active).ultra-select-option--hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), disabledBgColor, disabledTextColor, fade.fade(primaryColor, 0.1), primaryColor, fade.fade(primaryColor, 0.3), fade.fade(reverseBgColor, 0.1), textColor);
};

exports["default"] = Option$1;