@brightleaf/elements/lib/icon/icon.js

React UI elements styled with Bulma CSS

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MaterialIcon = exports.StackedIcons = exports.BaseIcon = exports.default = exports.Icon = void 0;

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _modifiers = require("../modifiers");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

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; }

var rotation = function rotation(_ref) {
  var rotation = _ref.rotation,
      flipHorizontal = _ref.flipHorizontal,
      flipVertical = _ref.flipVertical,
      flipBoth = _ref.flipBoth;
  var classes = {
    'fa-flip-horizontal': flipHorizontal,
    'fa-flip-vertical': flipVertical,
    'fa-flip-both': flipBoth
  };

  if (rotation) {
    classes["fa-rotate-".concat(rotation)] = !!rotation;
  }

  return classes;
};

var Icon = function Icon(_ref2) {
  var className = _ref2.className,
      iconClassName = _ref2.iconClassName,
      _ref2$icon = _ref2.icon,
      icon = _ref2$icon === void 0 ? 'home' : _ref2$icon,
      fas = _ref2.fas,
      fab = _ref2.fab,
      fa = _ref2.fa,
      isSmall = _ref2.isSmall,
      isMedium = _ref2.isMedium,
      isLarge = _ref2.isLarge,
      isMediumFA = _ref2.isMediumFA,
      isLargeFA = _ref2.isLargeFA,
      isLeft = _ref2.isLeft,
      isRight = _ref2.isRight,
      hasTextWhite = _ref2.hasTextWhite,
      hasTextBlack = _ref2.hasTextBlack,
      hasTextLight = _ref2.hasTextLight,
      hasTextDark = _ref2.hasTextDark,
      hasTextPrimary = _ref2.hasTextPrimary,
      hasTextInfo = _ref2.hasTextInfo,
      hasTextLink = _ref2.hasTextLink,
      hasTextSuccess = _ref2.hasTextSuccess,
      hasTextWarning = _ref2.hasTextWarning,
      hasTextDanger = _ref2.hasTextDanger,
      hasTextBlackBis = _ref2.hasTextBlackBis,
      hasTextBlackTer = _ref2.hasTextBlackTer,
      hasTextGreyDarker = _ref2.hasTextGreyDarker,
      hasTextGreyDark = _ref2.hasTextGreyDark,
      hasTextGrey = _ref2.hasTextGrey,
      hasTextGreyLight = _ref2.hasTextGreyLight,
      hasTextGreyLighter = _ref2.hasTextGreyLighter,
      hasTextWhiteTer = _ref2.hasTextWhiteTer,
      hasTextWhiteBis = _ref2.hasTextWhiteBis,
      far = _ref2.far,
      props = _objectWithoutProperties(_ref2, ["className", "iconClassName", "icon", "fas", "fab", "fa", "isSmall", "isMedium", "isLarge", "isMediumFA", "isLargeFA", "isLeft", "isRight", "hasTextWhite", "hasTextBlack", "hasTextLight", "hasTextDark", "hasTextPrimary", "hasTextInfo", "hasTextLink", "hasTextSuccess", "hasTextWarning", "hasTextDanger", "hasTextBlackBis", "hasTextBlackTer", "hasTextGreyDarker", "hasTextGreyDark", "hasTextGrey", "hasTextGreyLight", "hasTextGreyLighter", "hasTextWhiteTer", "hasTextWhiteBis", "far"]);

  var classes = {
    fa: fa,
    fas: fas,
    fab: fab,
    far: far,
    'fa-2x': isMediumFA,
    'fa-3x': isLargeFA
  };

  var parent = _objectSpread({
    'is-left': isLeft,
    'is-right': isRight
  }, (0, _modifiers.Sizes)({
    isSmall: isSmall,
    isMedium: isMedium,
    isLarge: isLarge
  }), {}, (0, _modifiers.HasText)({
    hasTextWhite: hasTextWhite,
    hasTextBlack: hasTextBlack,
    hasTextLight: hasTextLight,
    hasTextDark: hasTextDark,
    hasTextPrimary: hasTextPrimary,
    hasTextInfo: hasTextInfo,
    hasTextLink: hasTextLink,
    hasTextSuccess: hasTextSuccess,
    hasTextWarning: hasTextWarning,
    hasTextDanger: hasTextDanger,
    hasTextBlackBis: hasTextBlackBis,
    hasTextBlackTer: hasTextBlackTer,
    hasTextGreyDarker: hasTextGreyDarker,
    hasTextGreyDark: hasTextGreyDark,
    hasTextGrey: hasTextGrey,
    hasTextGreyLight: hasTextGreyLight,
    hasTextGreyLighter: hasTextGreyLighter,
    hasTextWhiteTer: hasTextWhiteTer,
    hasTextWhiteBis: hasTextWhiteBis
  }));

  var iconName = "fa-".concat(icon);
  var change = rotation(props);
  /*
   material-icons
  <span className="icon is-left is-small">
  <i className="material-icons">search</i>
  </span>
  */

  return _react.default.createElement("span", {
    className: (0, _classnames.default)(iconClassName, className, parent)
  }, _react.default.createElement("i", {
    className: (0, _classnames.default)(classes, iconName, change),
    "aria-hidden": "true"
  }));
};

exports.Icon = Icon;
Icon.propTypes = {
  className: _propTypes.default.string,
  iconClassName: _propTypes.default.string,
  icon: _propTypes.default.string,
  fas: _propTypes.default.bool,
  far: _propTypes.default.bool,
  fab: _propTypes.default.bool,
  fa: _propTypes.default.bool,
  isSmall: _propTypes.default.bool,
  isMedium: _propTypes.default.bool,
  isLarge: _propTypes.default.bool,
  hasTextWhite: _propTypes.default.bool,
  hasTextBlack: _propTypes.default.bool,
  hasTextLight: _propTypes.default.bool,
  hasTextDark: _propTypes.default.bool,
  hasTextPrimary: _propTypes.default.bool,
  hasTextInfo: _propTypes.default.bool,
  hasTextLink: _propTypes.default.bool,
  hasTextSuccess: _propTypes.default.bool,
  hasTextWarning: _propTypes.default.bool,
  hasTextDanger: _propTypes.default.bool,
  hasTextBlackBis: _propTypes.default.bool,
  hasTextBlackTer: _propTypes.default.bool,
  hasTextGreyDarker: _propTypes.default.bool,
  hasTextGreyDark: _propTypes.default.bool,
  hasTextGrey: _propTypes.default.bool,
  hasTextGreyLight: _propTypes.default.bool,
  hasTextGreyLighter: _propTypes.default.bool,
  hasTextWhiteTer: _propTypes.default.bool,
  hasTextWhiteBis: _propTypes.default.bool,
  flipVertical: _propTypes.default.bool,
  flipHorizontal: _propTypes.default.bool,
  rotation: _propTypes.default.oneOf(['90', '180', '270'])
};
Icon.defaultProps = {
  iconClassName: 'icon'
};
var _default = Icon;
exports.default = _default;

var BaseIcon = function BaseIcon(_ref3) {
  var _ref3$icon = _ref3.icon,
      icon = _ref3$icon === void 0 ? 'home' : _ref3$icon,
      fas = _ref3.fas,
      fab = _ref3.fab,
      far = _ref3.far,
      fa = _ref3.fa,
      isMediumFA = _ref3.isMediumFA,
      isLargeFA = _ref3.isLargeFA,
      className = _ref3.className,
      props = _objectWithoutProperties(_ref3, ["icon", "fas", "fab", "far", "fa", "isMediumFA", "isLargeFA", "className"]);

  var classes = {
    fa: fa,
    fas: fas,
    fab: fab,
    far: far,
    'fa-2x': isMediumFA,
    'fa-3x': isLargeFA
  };
  var allClasses = (0, _modifiers.allTheClasses)(props);
  var iconName = "fa-".concat(icon);
  var change = rotation(props);
  return _react.default.createElement("i", {
    className: (0, _classnames.default)(classes, className, iconName, allClasses, change),
    "aria-hidden": "true"
  });
};

exports.BaseIcon = BaseIcon;
BaseIcon.propTypes = {
  icon: _propTypes.default.string,
  fas: _propTypes.default.bool,
  fab: _propTypes.default.bool,
  far: _propTypes.default.bool,
  fa: _propTypes.default.bool,
  isSmall: _propTypes.default.bool,
  isMedium: _propTypes.default.bool,
  isLarge: _propTypes.default.bool,
  hasTextWhite: _propTypes.default.bool,
  hasTextBlack: _propTypes.default.bool,
  hasTextLight: _propTypes.default.bool,
  hasTextDark: _propTypes.default.bool,
  hasTextPrimary: _propTypes.default.bool,
  hasTextInfo: _propTypes.default.bool,
  hasTextLink: _propTypes.default.bool,
  hasTextSuccess: _propTypes.default.bool,
  hasTextWarning: _propTypes.default.bool,
  hasTextDanger: _propTypes.default.bool,
  hasTextBlackBis: _propTypes.default.bool,
  hasTextBlackTer: _propTypes.default.bool,
  hasTextGreyDarker: _propTypes.default.bool,
  hasTextGreyDark: _propTypes.default.bool,
  hasTextGrey: _propTypes.default.bool,
  hasTextGreyLight: _propTypes.default.bool,
  hasTextGreyLighter: _propTypes.default.bool,
  hasTextWhiteTer: _propTypes.default.bool,
  hasTextWhiteBis: _propTypes.default.bool,
  flipVertical: _propTypes.default.bool,
  flipHorizontal: _propTypes.default.bool,
  rotation: _propTypes.default.oneOf(['90', '180', '270'])
};

var StackedIcons = function StackedIcons(_ref4) {
  var children = _ref4.children,
      className = _ref4.className,
      isSmall = _ref4.isSmall,
      isMedium = _ref4.isMedium,
      isLarge = _ref4.isLarge,
      isMediumFA = _ref4.isMediumFA,
      isLargeFA = _ref4.isLargeFA,
      isLeft = _ref4.isLeft,
      isRight = _ref4.isRight,
      hasTextWhite = _ref4.hasTextWhite,
      hasTextBlack = _ref4.hasTextBlack,
      hasTextLight = _ref4.hasTextLight,
      hasTextDark = _ref4.hasTextDark,
      hasTextPrimary = _ref4.hasTextPrimary,
      hasTextInfo = _ref4.hasTextInfo,
      hasTextLink = _ref4.hasTextLink,
      hasTextSuccess = _ref4.hasTextSuccess,
      hasTextWarning = _ref4.hasTextWarning,
      hasTextDanger = _ref4.hasTextDanger,
      hasTextBlackBis = _ref4.hasTextBlackBis,
      hasTextBlackTer = _ref4.hasTextBlackTer,
      hasTextGreyDarker = _ref4.hasTextGreyDarker,
      hasTextGreyDark = _ref4.hasTextGreyDark,
      hasTextGrey = _ref4.hasTextGrey,
      hasTextGreyLight = _ref4.hasTextGreyLight,
      hasTextGreyLighter = _ref4.hasTextGreyLighter,
      hasTextWhiteTer = _ref4.hasTextWhiteTer,
      hasTextWhiteBis = _ref4.hasTextWhiteBis,
      is4x = _ref4.is4x,
      is3x = _ref4.is3x;
  var classes = {
    'fa-lg': isLargeFA,
    'fa-4x': is4x,
    'fa-3x': is3x
  };

  var parent = _objectSpread({
    'is-left': isLeft,
    'is-right': isRight
  }, (0, _modifiers.Sizes)({
    isSmall: isSmall,
    isMedium: isMedium,
    isLarge: isLarge
  }), {}, (0, _modifiers.HasText)({
    hasTextWhite: hasTextWhite,
    hasTextBlack: hasTextBlack,
    hasTextLight: hasTextLight,
    hasTextDark: hasTextDark,
    hasTextPrimary: hasTextPrimary,
    hasTextInfo: hasTextInfo,
    hasTextLink: hasTextLink,
    hasTextSuccess: hasTextSuccess,
    hasTextWarning: hasTextWarning,
    hasTextDanger: hasTextDanger,
    hasTextBlackBis: hasTextBlackBis,
    hasTextBlackTer: hasTextBlackTer,
    hasTextGreyDarker: hasTextGreyDarker,
    hasTextGreyDark: hasTextGreyDark,
    hasTextGrey: hasTextGrey,
    hasTextGreyLight: hasTextGreyLight,
    hasTextGreyLighter: hasTextGreyLighter,
    hasTextWhiteTer: hasTextWhiteTer,
    hasTextWhiteBis: hasTextWhiteBis
  }));

  return _react.default.createElement("span", {
    className: (0, _classnames.default)('icons', className, parent)
  }, _react.default.createElement("span", {
    className: (0, _classnames.default)('fa-stack', classes)
  }, children));
};

exports.StackedIcons = StackedIcons;
StackedIcons.propTypes = {
  className: _propTypes.default.string,
  iconClassName: _propTypes.default.string,
  icon: _propTypes.default.string,
  fas: _propTypes.default.bool,
  fab: _propTypes.default.bool,
  far: _propTypes.default.bool,
  fa: _propTypes.default.bool,
  isSmall: _propTypes.default.bool,
  isMedium: _propTypes.default.bool,
  isLarge: _propTypes.default.bool,
  hasTextWhite: _propTypes.default.bool,
  hasTextBlack: _propTypes.default.bool,
  hasTextLight: _propTypes.default.bool,
  hasTextDark: _propTypes.default.bool,
  hasTextPrimary: _propTypes.default.bool,
  hasTextInfo: _propTypes.default.bool,
  hasTextLink: _propTypes.default.bool,
  hasTextSuccess: _propTypes.default.bool,
  hasTextWarning: _propTypes.default.bool,
  hasTextDanger: _propTypes.default.bool,
  hasTextBlackBis: _propTypes.default.bool,
  hasTextBlackTer: _propTypes.default.bool,
  hasTextGreyDarker: _propTypes.default.bool,
  hasTextGreyDark: _propTypes.default.bool,
  hasTextGrey: _propTypes.default.bool,
  hasTextGreyLight: _propTypes.default.bool,
  hasTextGreyLighter: _propTypes.default.bool,
  hasTextWhiteTer: _propTypes.default.bool,
  hasTextWhiteBis: _propTypes.default.bool
};
StackedIcons.defaultProps = {};

var MaterialIcon = function MaterialIcon(_ref5) {
  var className = _ref5.className,
      iconClassName = _ref5.iconClassName,
      _ref5$icon = _ref5.icon,
      icon = _ref5$icon === void 0 ? 'home' : _ref5$icon,
      isSmall = _ref5.isSmall,
      isMedium = _ref5.isMedium,
      isLarge = _ref5.isLarge,
      isMediumFA = _ref5.isMediumFA,
      isLargeFA = _ref5.isLargeFA,
      isLeft = _ref5.isLeft,
      isRight = _ref5.isRight,
      hasTextWhite = _ref5.hasTextWhite,
      hasTextBlack = _ref5.hasTextBlack,
      hasTextLight = _ref5.hasTextLight,
      hasTextDark = _ref5.hasTextDark,
      hasTextPrimary = _ref5.hasTextPrimary,
      hasTextInfo = _ref5.hasTextInfo,
      hasTextLink = _ref5.hasTextLink,
      hasTextSuccess = _ref5.hasTextSuccess,
      hasTextWarning = _ref5.hasTextWarning,
      hasTextDanger = _ref5.hasTextDanger,
      hasTextBlackBis = _ref5.hasTextBlackBis,
      hasTextBlackTer = _ref5.hasTextBlackTer,
      hasTextGreyDarker = _ref5.hasTextGreyDarker,
      hasTextGreyDark = _ref5.hasTextGreyDark,
      hasTextGrey = _ref5.hasTextGrey,
      hasTextGreyLight = _ref5.hasTextGreyLight,
      hasTextGreyLighter = _ref5.hasTextGreyLighter,
      hasTextWhiteTer = _ref5.hasTextWhiteTer,
      hasTextWhiteBis = _ref5.hasTextWhiteBis,
      props = _objectWithoutProperties(_ref5, ["className", "iconClassName", "icon", "isSmall", "isMedium", "isLarge", "isMediumFA", "isLargeFA", "isLeft", "isRight", "hasTextWhite", "hasTextBlack", "hasTextLight", "hasTextDark", "hasTextPrimary", "hasTextInfo", "hasTextLink", "hasTextSuccess", "hasTextWarning", "hasTextDanger", "hasTextBlackBis", "hasTextBlackTer", "hasTextGreyDarker", "hasTextGreyDark", "hasTextGrey", "hasTextGreyLight", "hasTextGreyLighter", "hasTextWhiteTer", "hasTextWhiteBis"]);

  var parent = _objectSpread({
    'is-left': isLeft,
    'is-right': isRight
  }, (0, _modifiers.Sizes)({
    isSmall: isSmall,
    isMedium: isMedium,
    isLarge: isLarge
  }), {}, (0, _modifiers.HasText)({
    hasTextWhite: hasTextWhite,
    hasTextBlack: hasTextBlack,
    hasTextLight: hasTextLight,
    hasTextDark: hasTextDark,
    hasTextPrimary: hasTextPrimary,
    hasTextInfo: hasTextInfo,
    hasTextLink: hasTextLink,
    hasTextSuccess: hasTextSuccess,
    hasTextWarning: hasTextWarning,
    hasTextDanger: hasTextDanger,
    hasTextBlackBis: hasTextBlackBis,
    hasTextBlackTer: hasTextBlackTer,
    hasTextGreyDarker: hasTextGreyDarker,
    hasTextGreyDark: hasTextGreyDark,
    hasTextGrey: hasTextGrey,
    hasTextGreyLight: hasTextGreyLight,
    hasTextGreyLighter: hasTextGreyLighter,
    hasTextWhiteTer: hasTextWhiteTer,
    hasTextWhiteBis: hasTextWhiteBis
  }));

  var iconName = "".concat(icon);
  /*
   material-icons
  <span className="icon is-left is-small">
  <i className="material-icons">search</i>
  </span>
  <MaterialIcon icon="search" />
  */

  return _react.default.createElement("span", {
    className: (0, _classnames.default)('icon', className, parent)
  }, _react.default.createElement("i", {
    className: "material-icons"
  }, iconName));
};

exports.MaterialIcon = MaterialIcon;
MaterialIcon.propTypes = {
  className: _propTypes.default.string,
  iconClassName: _propTypes.default.string,
  icon: _propTypes.default.string,
  isSmall: _propTypes.default.bool,
  isMedium: _propTypes.default.bool,
  isLarge: _propTypes.default.bool,
  hasTextWhite: _propTypes.default.bool,
  hasTextBlack: _propTypes.default.bool,
  hasTextLight: _propTypes.default.bool,
  hasTextDark: _propTypes.default.bool,
  hasTextPrimary: _propTypes.default.bool,
  hasTextInfo: _propTypes.default.bool,
  hasTextLink: _propTypes.default.bool,
  hasTextSuccess: _propTypes.default.bool,
  hasTextWarning: _propTypes.default.bool,
  hasTextDanger: _propTypes.default.bool,
  hasTextBlackBis: _propTypes.default.bool,
  hasTextBlackTer: _propTypes.default.bool,
  hasTextGreyDarker: _propTypes.default.bool,
  hasTextGreyDark: _propTypes.default.bool,
  hasTextGrey: _propTypes.default.bool,
  hasTextGreyLight: _propTypes.default.bool,
  hasTextGreyLighter: _propTypes.default.bool,
  hasTextWhiteTer: _propTypes.default.bool,
  hasTextWhiteBis: _propTypes.default.bool,
  flipVertical: _propTypes.default.bool,
  flipHorizontal: _propTypes.default.bool,
  rotation: _propTypes.default.oneOf(['90', '180', '270'])
};
MaterialIcon.defaultProps = {
  iconClassName: 'icon'
};