lucid-ui/lib/components/Icon/Icon.js

A UI component library from AppNexus.

import _values from "lodash/values";
import _keys from "lodash/keys";
import _noop from "lodash/noop";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { omitProps } from '../../util/component-types';
var cx = lucidClassNames.bind('&-Icon');
var any = PropTypes.any,
    string = PropTypes.string,
    number = PropTypes.number,
    bool = PropTypes.bool,
    func = PropTypes.func,
    oneOf = PropTypes.oneOf,
    oneOfType = PropTypes.oneOfType;
export var Color;

(function (Color) {
  Color["neutral-dark"] = "neutral-dark";
  Color["neutral-light"] = "neutral-light";
  Color["primary"] = "primary";
  Color["white"] = "white";
  Color["success"] = "success";
  Color["warning"] = "warning";
  Color["secondary-one"] = "secondary-one";
  Color["secondary-two"] = "secondary-two";
  Color["secondary-three"] = "secondary-three";
})(Color || (Color = {}));

var defaultProps = {
  size: 16,
  aspectRatio: 'xMidYMid meet',
  viewBox: '0 0 16 16',
  isDisabled: false,
  isClickable: false,
  color: Color.primary,
  onClick: _noop,
  onSelect: _noop
};
export var Icon = function Icon(props) {
  var _cx;

  var className = props.className,
      children = props.children,
      color = props.color,
      size = props.size,
      width = props.width,
      height = props.height,
      viewBox = props.viewBox,
      aspectRatio = props.aspectRatio,
      isClickable = props.isClickable,
      isDisabled = props.isDisabled,
      onClick = props.onClick,
      onSelect = props.onSelect,
      passThroughs = _objectWithoutProperties(props, ["className", "children", "color", "size", "width", "height", "viewBox", "aspectRatio", "isClickable", "isDisabled", "onClick", "onSelect"]);

  var svgRef = /*#__PURE__*/React.createRef();

  function handleClick(event) {
    onClick && onClick({
      event: event,
      props: props
    });

    if (isClickable && !isDisabled) {
      onSelect && onSelect({
        event: event,
        props: props
      });

      if (svgRef.current) {
        svgRef.current.focus();
      }
    }
  }

  return /*#__PURE__*/React.createElement("svg", _extends({
    width: width ? width : size,
    height: height ? height : size,
    viewBox: viewBox,
    preserveAspectRatio: aspectRatio
  }, omitProps(passThroughs, undefined, _keys(Icon.propTypes)), {
    className: cx('&', (_cx = {}, _defineProperty(_cx, "&-color-".concat(color), true), _defineProperty(_cx, '&-is-clickable', !isDisabled && isClickable), _defineProperty(_cx, '&-is-disabled', isDisabled), _cx), className),
    ref: svgRef,
    onClick: handleClick
  }), children);
};
Icon.displayName = 'Icon';
Icon.defaultProps = defaultProps;
Icon.peek = {
  description: "\n\t\tA basic svg icon. Any props that are not explicitly called out below\n\t\twill be passed through to the native `svg` component.\n\t",
  categories: ['visual design', 'icons']
};
export var propTypes = {
  className: any,
  size: number,
  width: oneOfType([number, string]),
  height: oneOfType([number, string]),
  viewBox: string,
  aspectRatio: string,
  isClickable: bool,
  isDisabled: bool,
  onClick: func,
  onSelect: func,
  children: any,
  color: oneOf(_values(Color))
};
Icon.propTypes = propTypes;
export default Icon;