fe-fabric-react 0.0.1-security → 2.864.3

package/lib/core/components/FeListItem.js

@@ -0,0 +1,719 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _toNumber = _interopRequireDefault(require("lodash/toNumber"));
+
+var _helper = require("../utils/helper");
+
+var _ariaRole = require("../utils/aria-role");
+
+var _utils = require("../utils");
+
+var _FeIcon = _interopRequireDefault(require("./FeIcon"));
+
+var _FeBadge = _interopRequireDefault(require("./FeBadge"));
+
+var _FeListItemGroup = _interopRequireDefault(require("./FeListItemGroup"));
+
+var _FeDefaultLink = _interopRequireDefault(require("./FeDefaultLink"));
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+
+function _interopRequireWildcard(obj) {
+  if (obj && obj.__esModule) {
+    return obj;
+  } else {
+    var newObj = {};
+
+    if (obj != null) {
+      for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+
+          if (desc.get || desc.set) {
+            Object.defineProperty(newObj, key, desc);
+          } else {
+            newObj[key] = obj[key];
+          }
+        }
+      }
+    }
+
+    newObj.default = obj;
+    return newObj;
+  }
+}
+
+function _typeof(obj) {
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function _typeof(obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+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 _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+var FeListItem =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(FeListItem, _Component);
+
+  function FeListItem(props) {
+    var _this;
+
+    _classCallCheck(this, FeListItem);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(FeListItem).call(this, props));
+    _this.onClickHandler = _this.onClickHandler.bind(_assertThisInitialized(_this));
+    _this.onIconRighClickHandler = _this.onIconRighClickHandler.bind(_assertThisInitialized(_this));
+    _this.onMouseEnterHandler = _this.onMouseEnterHandler.bind(_assertThisInitialized(_this));
+    _this.onMouseLeaveHandler = _this.onMouseLeaveHandler.bind(_assertThisInitialized(_this));
+    _this.onSubItemClickHandler = _this.onSubItemClickHandler.bind(_assertThisInitialized(_this));
+    _this.onSubItemIconRighClickHandler = _this.onSubItemIconRighClickHandler.bind(_assertThisInitialized(_this));
+    _this.onSubItemHoverHandler = _this.onSubItemHoverHandler.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(FeListItem, [{
+    key: "getBadgeCount",
+    value: function getBadgeCount() {
+      //badge value is getting calculated for one level deep.
+      var count = this.props.badgeLabel || 0;
+
+      if (!count && this.props.list) {
+        this.props.list.forEach(function (_ref) {
+          var badgeLabel = _ref.badgeLabel,
+              disabled = _ref.disabled;
+
+          if (!disabled && (0, _toNumber.default)(badgeLabel)) {
+            count += (0, _toNumber.default)(badgeLabel);
+          }
+        });
+      }
+
+      return count ? count : null;
+    }
+  }, {
+    key: "isActive",
+    value: function isActive() {
+      var _this2 = this;
+
+      var active = this.props.active;
+
+      if (!active && this.props.activeId) {
+        active = this.props[this.props.idAttribute] === this.props.activeId;
+      }
+
+      if (!active && this.props.activeIds) {
+        var index; //check for item id
+
+        if (this.props[this.props.idAttribute]) {
+          index = this.props.activeIds.indexOf(this.props[this.props.idAttribute]);
+
+          if (index < 0 && this.props.list.length) {
+            //check for  subitems
+            this.props.list.forEach(function (item) {
+              index = _this2.props.activeIds.indexOf(item[_this2.props.idAttribute]);
+
+              if (index > -1) {
+                return;
+              }
+            });
+          }
+        }
+
+        active = index > -1;
+      }
+
+      return active;
+    }
+  }, {
+    key: "getLeftContent",
+    value: function getLeftContent() {
+      return _react.default.createElement("span", {
+        className: "fe-".concat(this.props.feStyle, "__item-link-left-section")
+      }, _react.default.createElement(_FeIcon.default, {
+        family: this.props.iconFamily,
+        icon: this.props.icon
+      }));
+    }
+  }, {
+    key: "getLabel",
+    value: function getLabel() {
+      if (!this.props.disabled && this.props.textHighlight) {
+        var label = (0, _utils.textHighlight)(this.props.textHighlight, this.props.label);
+        return _react.default.createElement("span", {
+          className: "fe-".concat(this.props.feStyle, "__item-link-text"),
+          dangerouslySetInnerHTML: {
+            __html: label
+          }
+        });
+      }
+
+      return _react.default.createElement("span", {
+        className: "fe-".concat(this.props.feStyle, "__item-link-text")
+      }, this.props.label);
+    }
+  }, {
+    key: "getRightContent",
+    value: function getRightContent() {
+      var _this3 = this;
+
+      var badgeCount = !this.props.disabled && this.getBadgeCount();
+      var iconRight = this.props.iconRight;
+
+      if (this.props.list && this.props.list.length && this.props.withDropIcon) {
+        iconRight = this.props.expanded ? this.props.iconExpand : this.props.iconCollapse;
+      }
+
+      if (!badgeCount && !iconRight) {
+        return null;
+      }
+
+      var className = (0, _classnames.default)("fe-".concat(this.props.feStyle, "__icon-gutter"), _defineProperty({}, "fe-".concat(this.props.feStyle, "__icon-multilevel"), this.props.list.length > 0));
+      var iconRightAttributes = {};
+
+      if (this.props.onIconRighClick) {
+        iconRightAttributes = {
+          role: 'button',
+          tabIndex: '-1',
+          onClick: this.onIconRighClickHandler,
+          onKeyDown: function onKeyDown(event) {
+            if (event.keyCode === 13) {
+              //Enter
+              _this3.onIconRighClickHandler(event);
+            }
+          }
+        };
+      }
+
+      return _react.default.createElement("span", {
+        className: "fe-".concat(this.props.feStyle, "__item-link-right-section")
+      }, _react.default.createElement(_FeBadge.default, {
+        feStyle: this.props.badgeStyle,
+        label: "".concat(badgeCount || ''),
+        max: this.props.badgeMax
+      }), _react.default.createElement("span", _extends({
+        className: className
+      }, iconRightAttributes), _react.default.createElement(_FeIcon.default, {
+        family: this.props.iconRightFamily,
+        icon: iconRight
+      })));
+    }
+  }, {
+    key: "getMainItem",
+    value: function getMainItem() {
+      var _classNames2;
+
+      var className = (0, _classnames.default)("fe-".concat(this.props.feStyle, "__item-link"), (_classNames2 = {}, _defineProperty(_classNames2, "fe-".concat(this.props.feStyle, "__item-link--active"), this.isActive()), _defineProperty(_classNames2, "fe-".concat(this.props.feStyle, "__item-link--has-sub-item"), this.props.list && this.props.list.length), _defineProperty(_classNames2, "fe-".concat(this.props.feStyle, "__item-link--expanded"), this.props.expanded), _defineProperty(_classNames2, "fe-".concat(this.props.feStyle, "__item-link--disabled"), this.props.disabled), _classNames2));
+      var leftContent = this.props.icon && this.getLeftContent();
+      var label = !this.props.children && this.getLabel();
+      var rightContent = this.getRightContent(); //Aria attributes
+
+      var ariaProps = {};
+      var id = this.props.id || this.props.idAttribute && this.props[this.props.idAttribute] || null;
+
+      if (id) {
+        ariaProps['id'] = id;
+      }
+
+      if (this.props.list && this.props.list.length) {
+        ariaProps['aria-haspopup'] = 'true';
+      }
+
+      if (this.props.list && this.props.list.length && this.props.expanded) {
+        ariaProps['aria-expanded'] = 'true';
+      }
+
+      if (this.props.feStyle === 'dropdown') {
+        ariaProps['tabIndex'] = '-1';
+        ariaProps['role'] = this.props.role || 'option';
+      } //Other attributes
+
+
+      var wrapperProps = Object.assign({}, this.props);
+      delete wrapperProps.label;
+      delete wrapperProps.icon;
+      delete wrapperProps.iconRight;
+      delete wrapperProps.iconCollapse;
+      delete wrapperProps.iconExpand;
+      delete wrapperProps.badgeLabel;
+      delete wrapperProps.badgeStyle;
+      delete wrapperProps.badgeMax;
+      delete wrapperProps.textHighlight;
+      delete wrapperProps.list;
+      delete wrapperProps.isHashRoute;
+      delete wrapperProps.idAttribute;
+      delete wrapperProps.itemIndex;
+      delete wrapperProps.isSectioned;
+      delete wrapperProps.activeId;
+      delete wrapperProps.activeIds;
+      delete wrapperProps.active;
+      delete wrapperProps.activeItemIndex;
+      delete wrapperProps.expanded;
+      delete wrapperProps.onClick;
+      delete wrapperProps.onIconRighClick;
+      delete wrapperProps.onMouseEnter;
+      delete wrapperProps.groupClickHandler;
+      delete wrapperProps.groupIconRighClickHandler;
+      delete wrapperProps.groupHoverHandler;
+      delete wrapperProps.withDropIcon;
+      return _react.default.createElement(Wrapper, _extends({}, wrapperProps, ariaProps, {
+        className: className,
+        onClick: this.onClickHandler,
+        onMouseEnter: this.onMouseEnterHandler,
+        onMouseLeave: this.onMouseLeaveHandler
+      }), leftContent, label, this.props.children, rightContent);
+    }
+  }, {
+    key: "getSectionedItem",
+    value: function getSectionedItem() {
+      var _classNames3;
+
+      var className = (0, _classnames.default)("fe-".concat(this.props.feStyle, "__item-link"), (_classNames3 = {}, _defineProperty(_classNames3, "fe-".concat(this.props.feStyle, "__item-link--active"), this.isActive()), _defineProperty(_classNames3, "fe-".concat(this.props.feStyle, "__item-link--expanded"), this.props.expanded), _defineProperty(_classNames3, "fe-".concat(this.props.feStyle, "__item-link--disabled"), this.props.disabled), _defineProperty(_classNames3, "fe-".concat(this.props.feStyle, "__item-link-header"), this.props.isSectioned), _classNames3)); //Aria attributes
+
+      var ariaProps = {
+        'aria-haspopup': 'true',
+        'aria-expanded': "".concat(this.props.expanded ? true : false)
+      };
+      var id = this.props.id || this.props.idAttribute && this.props[this.props.idAttribute] || null;
+
+      if (id) {
+        ariaProps['id'] = id;
+      }
+
+      return _react.default.createElement("a", _extends({}, ariaProps, {
+        className: className
+      }), _react.default.createElement("span", {
+        className: "fe-".concat(this.props.feStyle, "__item-link-text")
+      }, this.props.label));
+    }
+  }, {
+    key: "getSublists",
+    value: function getSublists() {
+      //Aria attributes
+      var ariaProps = {
+        'role': (0, _ariaRole.getRole)(this.props.role) || 'listbox'
+      };
+      var id = this.props.id || this.props.idAttribute && this.props[this.props.idAttribute] || null;
+
+      if (id) {
+        ariaProps['aria-labelledby'] = id;
+      } else {
+        ariaProps['aria-label'] = this.props.label;
+      }
+
+      return _react.default.createElement(_FeListItemGroup.default, _extends({}, ariaProps, {
+        iconRight: this.props.iconRight,
+        feStyle: this.props.feStyle,
+        isSublist: true,
+        activeParent: this.isActive(),
+        activeItemIndex: this.props.activeItemIndex,
+        list: this.props.list,
+        activeId: this.props.activeId,
+        activeIds: this.props.activeIds,
+        idAttribute: this.props.idAttribute,
+        onItemClick: this.onSubItemClickHandler,
+        textHighlight: this.props.textHighlight,
+        onIconRighClick: this.onSubItemIconRighClickHandler,
+        onItemHover: this.onSubItemHoverHandler,
+        customRenderLink: this.props.customRenderLink
+      }));
+    }
+  }, {
+    key: "onClickHandler",
+    value: function onClickHandler(event) {
+      if (this.props.onClick) {
+        this.props.onClick({
+          originalEvent: event,
+          itemIndex: this.props.itemIndex,
+          item: this.props.id || this.props.idAttribute && this.props[this.props.idAttribute],
+          hasSubItems: this.props.list.length > 0
+        });
+      }
+
+      if (this.props.groupClickHandler) {
+        this.props.groupClickHandler({
+          originalEvent: event,
+          itemIndex: this.props.itemIndex,
+          item: this.props.id || this.props.idAttribute && this.props[this.props.idAttribute],
+          hasSubItems: this.props.list.length > 0
+        });
+      }
+    }
+  }, {
+    key: "onIconRighClickHandler",
+    value: function onIconRighClickHandler(event) {
+      (0, _helper.stopPropagation)(event);
+
+      if (this.props.onIconRighClick) {
+        this.props.onIconRighClick({
+          originalEvent: event,
+          itemIndex: this.props.itemIndex,
+          item: this.props.id || this.props.idAttribute && this.props[this.props.idAttribute],
+          hasSubItems: this.props.list.length > 0
+        });
+      }
+
+      if (this.props.groupIconRighClickHandler) {
+        this.props.groupIconRighClickHandler({
+          originalEvent: event,
+          itemIndex: this.props.itemIndex,
+          item: this.props.id || this.props.idAttribute && this.props[this.props.idAttribute],
+          hasSubItems: this.props.list.length > 0
+        });
+      }
+    }
+  }, {
+    key: "onMouseEnterHandler",
+    value: function onMouseEnterHandler(event) {
+      if (this.props.onMouseEnter) {
+        this.props.onMouseEnter({
+          originalEvent: event,
+          itemIndex: this.props.itemIndex,
+          hasSubItems: this.props.list.length > 0
+        });
+      }
+
+      if (this.props.groupHoverHandler) {
+        this.props.groupHoverHandler({
+          originalEvent: event,
+          eventType: 'mouseenter',
+          itemIndex: this.props.itemIndex,
+          hasSubItems: this.props.list.length > 0
+        });
+      }
+    }
+  }, {
+    key: "onMouseLeaveHandler",
+    value: function onMouseLeaveHandler(event) {
+      if (this.props.onMouseLeave) {
+        this.props.onMouseEnter({
+          originalEvent: event,
+          itemIndex: this.props.itemIndex,
+          hasSubItems: this.props.list.length > 0
+        });
+      }
+
+      if (this.props.groupHoverHandler) {
+        this.props.groupHoverHandler({
+          originalEvent: event,
+          eventType: 'mouseleave',
+          itemIndex: this.props.itemIndex,
+          hasSubItems: this.props.list.length > 0
+        });
+      }
+    }
+  }, {
+    key: "onSubItemClickHandler",
+    value: function onSubItemClickHandler(event) {
+      var originalEvent = event.originalEvent,
+          itemIndex = event.itemIndex,
+          item = event.item;
+
+      if (this.props.groupClickHandler) {
+        this.props.groupClickHandler({
+          originalEvent: originalEvent,
+          item: item,
+          itemIndex: this.props.itemIndex,
+          subItemIndex: itemIndex
+        });
+      }
+    }
+  }, {
+    key: "onSubItemIconRighClickHandler",
+    value: function onSubItemIconRighClickHandler(event) {
+      var originalEvent = event.originalEvent,
+          itemIndex = event.itemIndex,
+          item = event.item;
+
+      if (this.props.groupIconRighClickHandler) {
+        this.props.groupIconRighClickHandler({
+          originalEvent: originalEvent,
+          item: item,
+          itemIndex: this.props.itemIndex,
+          subItemIndex: itemIndex
+        });
+      }
+    }
+  }, {
+    key: "onSubItemHoverHandler",
+    value: function onSubItemHoverHandler(event) {
+      var originalEvent = event.originalEvent,
+          eventType = event.eventType,
+          itemIndex = event.itemIndex;
+
+      if (this.props.groupHoverHandler) {
+        this.props.groupHoverHandler({
+          originalEvent: originalEvent,
+          eventType: eventType,
+          itemIndex: this.props.itemIndex,
+          subItemIndex: itemIndex
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      /** Minimum condition required to render*/
+      if (!this.props.label && !this.props.children) {
+        return null;
+      }
+      /** Rendering of component */
+
+
+      var className = (0, _classnames.default)("fe-".concat(this.props.feStyle, "__item"), _defineProperty({}, "fe-".concat(this.props.feStyle, "__item-section-header"), this.props.isSectioned), this.props.className);
+      var mainItem = this.props.isSectioned && this.props.list.length ? this.getSectionedItem() : this.getMainItem();
+      var subLists = !(this.props.feStyle === 'dropdown' && !this.props.isSectioned) && this.props.list && this.getSublists();
+      return _react.default.createElement("li", {
+        className: className
+      }, mainItem, subLists);
+    }
+  }]);
+
+  return FeListItem;
+}(_react.Component);
+
+var Wrapper = function Wrapper(props) {
+  var buttonProps = Object.assign({}, props);
+  delete buttonProps.href;
+  delete buttonProps.route;
+  delete buttonProps.feStyle;
+  delete buttonProps.customRenderLink;
+
+  if ((props.route || props.href) && !props.disabled) {
+    var Link = props.customRenderLink || _FeDefaultLink.default;
+    return _react.default.createElement(Link, {
+      route: props.route,
+      isNavLink: true,
+      href: props.href,
+      additionalProps: buttonProps,
+      activeClassName: "fe-".concat(props.feStyle, "__item-link--active")
+    }, props.children);
+  } else {
+    if (props.disabled) {
+      delete buttonProps.onClick;
+      delete buttonProps.onMouseEnter;
+      delete buttonProps.onMouseLeave;
+    }
+
+    return _react.default.createElement("button", _extends({
+      type: "button"
+    }, buttonProps), props.children);
+  }
+};
+
+FeListItem.defaultProps = {
+  feStyle: 'list',
+  label: null,
+  route: null,
+  href: null,
+  isHashRoute: false,
+  badgeLabel: null,
+  badgeStyle: 'alert',
+  badgeMax: null,
+  textHighlight: null,
+  idAttribute: 'id',
+  list: [],
+  activeId: null,
+  activeIds: null,
+  activeItemIndex: null,
+  withDropIcon: false,
+  active: false,
+  disabled: false,
+  onIconRighClick: null,
+  customRenderLink: null
+};
+FeListItem.propTypes = {
+  /** Provide list variants like "list" or "dropdown"*/
+  feStyle: _propTypes.default.oneOf(['list', 'dropdown']),
+
+  /** Provide label for list item*/
+  label: _propTypes.default.string.isRequired,
+
+  /** Provide route for list item*/
+  route: _propTypes.default.string,
+
+  /** Provide href for list item*/
+  href: _propTypes.default.string,
+
+  /** set true/false if href/route contains hash value*/
+  isHashRoute: _propTypes.default.bool,
+
+  /** Provide icon name for the left icon*/
+  icon: _propTypes.default.string,
+
+  /** Provide icon family for the left icon*/
+  iconFamily: _propTypes.default.string,
+
+  /** Provide icon class for the right icon */
+  iconRight: _propTypes.default.string,
+
+  /** Provide icon family for the right icon */
+  iconRightFamily: _propTypes.default.string,
+
+  /** Provide badge label*/
+  badgeLabel: _propTypes.default.string,
+
+  /** Provide badge variants like 'default', 'alert', 'count-only', 'inline-count'*/
+  badgeStyle: _propTypes.default.oneOf(['default', 'alert', 'count-only', 'inline-count']),
+
+  /** Provide max count for badge*/
+  badgeMax: _propTypes.default.number,
+
+  /** Provide substring to highlight*/
+  textHighlight: _propTypes.default.string,
+
+  /** Provide idAttribute for list item if id attributes is not passes and other attribute can be assumed as id and same for subitems*/
+  idAttribute: _propTypes.default.string,
+
+  /** Provide subitem list*/
+  list: _propTypes.default.arrayOf(_propTypes.default.object),
+
+  /** Provide active id*/
+  activeId: _propTypes.default.string,
+
+  /** Provide active ids*/
+  activeIds: _propTypes.default.array,
+
+  /** Provide subitem index to set active*/
+  activeItemIndex: _propTypes.default.string,
+
+  /** Set true/false to change list item active state*/
+  active: _propTypes.default.bool,
+
+  /** Set true/false to change list item disabled state*/
+  disabled: _propTypes.default.bool,
+
+  /** Provide handler for right icon click*/
+  onIconRighClick: _propTypes.default.func,
+
+  /** A function that returns a react element to render the wrapping link.
+   *  Will receive url, className, and children props
+   */
+  customRenderLink: _propTypes.default.func
+};
+FeListItem.displayName = 'FeListItem';
+var _default = FeListItem;
+exports.default = _default;