fe-fabric-react 0.0.1-security → 2.864.3

package/lib/core/components/FeDropdown.js

@@ -0,0 +1,677 @@
+"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 _utils = require("../utils");
+
+var _helper = require("../utils/helper");
+
+var _FeSearchField = _interopRequireDefault(require("./FeSearchField"));
+
+var _FeButton = _interopRequireDefault(require("./FeButton"));
+
+var _FeCogButton = _interopRequireDefault(require("./FeCogButton"));
+
+var _FeListItemGroup = _interopRequireDefault(require("./FeListItemGroup"));
+
+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 _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 _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 _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 FeDropdown =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(FeDropdown, _Component);
+
+  function FeDropdown(props) {
+    var _this;
+
+    _classCallCheck(this, FeDropdown);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(FeDropdown).call(this, props));
+    _this.state = {
+      isOpen: false,
+      itemIndex: null,
+      filteredList: null,
+      isSelectBox: _this.props.feType === 'single-select' || _this.props.feType === 'multi-select'
+    };
+    _this.toggleDropdown = _this.toggleDropdown.bind(_assertThisInitialized(_this));
+    _this.onItemClick = _this.onItemClick.bind(_assertThisInitialized(_this));
+    _this.onFilterHandler = _this.onFilterHandler.bind(_assertThisInitialized(_this));
+    _this.onBack = _this.onBack.bind(_assertThisInitialized(_this));
+    _this.handleOutsideClick = _this.handleOutsideClick.bind(_assertThisInitialized(_this));
+    _this.checkDocumentKeyDown = _this.checkDocumentKeyDown.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(FeDropdown, [{
+    key: "getCurrentList",
+    value: function getCurrentList() {
+      var itemIndex = this.state.itemIndex;
+
+      if (itemIndex == null) {
+        return this.props.list;
+      } else {
+        return this.props.list[itemIndex]['list'];
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.handleOutsideClick, false); //add keydown event
+
+      document.addEventListener('keydown', this.checkDocumentKeyDown);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.handleOutsideClick, false); //remove keydown event
+
+      document.removeEventListener('keydown', this.checkDocumentKeyDown);
+    }
+  }, {
+    key: "checkDocumentKeyDown",
+    value: function checkDocumentKeyDown(event) {
+      if (!this.state.isOpen) {
+        return false;
+      }
+
+      if (event.keyCode === 27 && this.props.onEscapeClose) {
+        //Escape
+        this.toggleDropdown(event);
+        this.restoreFocus();
+      } else if (event.keyCode === 9) {
+        //Tab
+        this.toggleDropdown(event);
+      } else if (event.keyCode === 40 || event.keyCode === 38) {
+        //ArrowDown || ArrowUp
+        (0, _utils.trapFocus)(event, this.listContainer, true);
+      }
+    }
+  }, {
+    key: "handleOutsideClick",
+    value: function handleOutsideClick(event) {
+      if (this.state.isOpen && !this.node.contains(event.target)) {
+        this.setState({
+          isOpen: false,
+          itemIndex: null,
+          filteredList: null
+        });
+        this.searchField && this.clearSearchField();
+
+        if (this.props.onToggleDropdown) {
+          this.props.onToggleDropdown({
+            originalEvent: event,
+            isOpen: false
+          });
+        }
+      } else {
+        return;
+      }
+    }
+  }, {
+    key: "toggleDropdown",
+    value: function toggleDropdown(event) {
+      var isOpen = this.state.isOpen;
+      this.setState({
+        isOpen: !isOpen,
+        itemIndex: null,
+        filteredList: null
+      });
+
+      if (this.props.onToggleDropdown) {
+        this.props.onToggleDropdown({
+          originalEvent: event,
+          isOpen: !isOpen
+        });
+      }
+    }
+  }, {
+    key: "onBack",
+    value: function onBack(event) {
+      this.setState({
+        itemIndex: null,
+        filteredList: null
+      });
+      this.searchField && this.clearSearchField();
+    }
+  }, {
+    key: "onFilterHandler",
+    value: function onFilterHandler(event) {
+      this.setState({
+        filteredList: event.list
+      });
+    }
+  }, {
+    key: "clearSearchField",
+    value: function clearSearchField() {
+      this.searchField.clear();
+    }
+  }, {
+    key: "onItemClick",
+    value: function onItemClick(event) {
+      (0, _helper.stopPropagation)(event.originalEvent);
+      var hasSubItems = event.hasSubItems,
+          itemIndex = event.itemIndex,
+          subItemIndex = event.subItemIndex,
+          originalEvent = event.originalEvent;
+      var activeIds = this.props.activeIds; //setting item index
+
+      if (this.state.itemIndex) {
+        itemIndex = this.state.itemIndex;
+        subItemIndex = event.itemIndex;
+      }
+
+      var shouldClose = !hasSubItems && !this.state.isSelectBox;
+      var params = Object.assign({}, {
+        originalEvent: originalEvent,
+        itemIndex: itemIndex,
+        subItemIndex: subItemIndex,
+        hasSubItems: hasSubItems
+      });
+
+      if (this.props.feType === 'multi-select') {
+        var item = event.originalEvent.currentTarget.id || this.props.idAttribute && event.originalEvent.currentTarget[this.props.idAttribute];
+        var index = -1;
+
+        if (item && activeIds) {
+          index = activeIds.indexOf(item);
+        }
+
+        if (index < 0 && item) {
+          activeIds = activeIds || [];
+          activeIds.push(item);
+        } else if (index > -1) {
+          activeIds.splice(index, 1);
+        }
+
+        params['activeIds'] = activeIds && activeIds.length ? activeIds : null;
+      }
+
+      if (this.props.feType === 'single-select') {
+        params['activeId'] = event.originalEvent.currentTarget.id || this.props.idAttribute && event.originalEvent.currentTarget[this.props.idAttribute];
+      }
+
+      this.setState({
+        itemIndex: event.hasSubItems ? event.itemIndex : null,
+        filteredList: null,
+        isOpen: !shouldClose
+      });
+      this.searchField && this.clearSearchField();
+
+      if (this.props.onItemClick) {
+        params['otherProps'] = this.getOtherProps();
+        this.props.onItemClick(params);
+      }
+
+      shouldClose && this.restoreFocus(event.originalEvent);
+    }
+  }, {
+    key: "restoreFocus",
+    value: function restoreFocus(event) {
+      var element;
+
+      if (this.props.referId) {
+        element = document.getElementById(this.props.referId);
+      } else {
+        element = this.node.getElementsByClassName('fe-dropdown__toggle')[0];
+      }
+
+      setTimeout(function () {
+        element && element.focus();
+      }, 200);
+    }
+  }, {
+    key: "getSearch",
+    value: function getSearch() {
+      var _this2 = this;
+
+      return _react.default.createElement(_FeSearchField.default, {
+        feBackground: "light",
+        ref: function ref(node) {
+          return _this2.searchField = node;
+        },
+        list: this.getCurrentList(),
+        queryAt: "label",
+        isMultiLevel: this.props.feStyle === 'sectioned',
+        multiLevelKey: "list",
+        onChange: this.onFilterHandler
+      });
+    }
+  }, {
+    key: "getBack",
+    value: function getBack() {
+      var className = (0, _classnames.default)({
+        'hide': this.state.itemIndex == null
+      });
+      var ariaAttributes = {
+        'aria-label': 'back to mainitem'
+      };
+      return _react.default.createElement(_FeButton.default, _extends({
+        type: "button",
+        feStyle: "link",
+        className: className,
+        icon: "arrow-alt-circle-left",
+        iconPosition: "left"
+      }, ariaAttributes, {
+        disabled: this.state.itemIndex == null,
+        onClick: this.onBack
+      }), "Back");
+    }
+  }, {
+    key: "getSelectedLabel",
+    value: function getSelectedLabel() {
+      if (this.props.activeItemIndex && !this.props.activeSubItemIndex) {
+        return this.props.list[this.props.activeItemIndex]['label'] || null;
+      } else if (this.props.activeItemIndex && this.props.activeSubItemIndex) {
+        return this.props.list[this.props.activeItemIndex]['list'][this.props.activeSubItemIndex]['label'] || null;
+      }
+
+      return null;
+    }
+  }, {
+    key: "getOtherProps",
+    value: function getOtherProps() {
+      var params = Object.assign({}, this.props);
+      delete params.referId;
+      delete params.feStyle;
+      delete params.feType;
+      delete params.idAttribute;
+      delete params.buttonStyle;
+      delete params.iconSelect;
+      delete params.iconMultiLevel;
+      delete params.list;
+      delete params.position;
+      delete params.role;
+      delete params.active;
+      delete params.activeId;
+      delete params.activeIds;
+      delete params.activeItemIndex;
+      delete params.activeSubItemIndex;
+      delete params.withSearch;
+      delete params.textHighlight;
+      delete params.isOpen;
+      delete params.onItemClick;
+      delete params.onToggleDropdown;
+      delete params.onIconRighClick;
+      delete params.onEscapeClose;
+      delete params.className;
+      delete params.customRenderLink;
+      delete params.children;
+      delete params.route;
+      delete params.isNavLink;
+      return params;
+    }
+  }, {
+    key: "getLabel",
+    value: function getLabel() {
+      var buttonProps = this.getOtherProps();
+
+      if (this.props.label) {
+        buttonProps.label = this.state.isSelectBox && this.getSelectedLabel() || this.props.label;
+        buttonProps.icon = this.state.isOpen ? 'chevron-up' : 'chevron-down';
+        buttonProps.iconFamily = 'light';
+        buttonProps.iconPosition = 'right';
+      }
+
+      if (this.props.buttonStyle === 'cog') {
+        return _react.default.createElement(_FeCogButton.default, _extends({}, buttonProps, {
+          className: "fe-dropdown__toggle",
+          active: this.props.active || this.state.isOpen,
+          onClick: this.toggleDropdown
+        }));
+      }
+
+      return _react.default.createElement(_FeButton.default, _extends({}, buttonProps, {
+        className: "fe-dropdown__toggle",
+        feStyle: this.props.buttonStyle,
+        active: this.props.active || this.state.isOpen,
+        onClick: this.toggleDropdown
+      }), buttonProps.label);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      /** Minimum condition required to render*/
+
+
+      if (!this.props.list.length && !this.props.children) {
+        return null;
+      }
+      /** Rendering of component */
+
+
+      var dropdownClass = (0, _classnames.default)('fe-dropdown', this.props.className);
+      var containerClassName = (0, _classnames.default)('fe-dropdown__list-container', _defineProperty({}, "fe-dropdown__list--open-".concat(this.props.position), this.props.position && this.state.isOpen));
+      var search = this.props.list.length > 0 && this.props.withSearch && this.getSearch();
+      var button = this.getLabel();
+      var back = this.props.list.length > 0 && this.props.feStyle !== 'sectioned' && this.getBack();
+      var list = this.state.filteredList || this.getCurrentList();
+      var iconRight = this.props.feType === 'menu' || this.state.isSelectBox ? this.props.iconSelect : null;
+      var activeItemIndex = this.state.itemIndex ? this.props.activeSubItemIndex : this.props.activeItemIndex;
+      var wrapperClass = (0, _classnames.default)({
+        'fe-dropdown__list--is-sectioned': this.props.feStyle === 'sectioned' && list.length
+      }); //Aria Attributes
+
+      var ariaAttributes = {};
+
+      if (this.props.id || this.props.referId) {
+        ariaAttributes = {
+          'aria-labelledby': "".concat(this.props.id || this.props.referId),
+          'role': this.props.role
+        };
+      } else {
+        ariaAttributes = {
+          'aria-label': "".concat(this.props.label || 'dropdown', " items"),
+          'role': this.props.role
+        };
+      }
+
+      return _react.default.createElement("div", {
+        className: dropdownClass,
+        ref: function ref(node) {
+          return _this3.node = node;
+        },
+        style: this.props.style
+      }, button, _react.default.createElement("div", {
+        className: containerClassName,
+        ref: function ref(listContainer) {
+          return _this3.listContainer = listContainer;
+        }
+      }, search || back || this.props.children ? _react.default.createElement("div", {
+        className: wrapperClass
+      }, this.props.children, search, back) : null, _react.default.createElement(_FeListItemGroup.default, _extends({
+        feStyle: "dropdown",
+        list: list,
+        iconRight: iconRight,
+        activeItemIndex: this.props.feType !== 'default' ? activeItemIndex : null,
+        iconMultiLevel: this.props.iconMultiLevel,
+        activeSubItemIndex: this.props.feType !== 'default' ? this.props.activeSubItemIndex : null,
+        onItemClick: this.onItemClick,
+        onIconRighClick: this.props.onIconRighClick,
+        isSectioned: this.props.feStyle === 'sectioned',
+        idAttribute: this.props.idAttribute,
+        activeIds: this.props.activeIds,
+        activeId: this.props.activeId,
+        textHighlight: this.props.textHighlight,
+        customRenderLink: this.props.customRenderLink
+      }, ariaAttributes))));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (props.isOpen !== null) {
+        return {
+          isOpen: props.isOpen,
+          isSelectBox: props.feType === 'single-select' || props.feType === 'multi-select'
+        };
+      }
+
+      return null;
+    }
+  }]);
+
+  return FeDropdown;
+}(_react.Component);
+
+FeDropdown.defaultProps = {
+  referId: null,
+  feStyle: 'multilevel',
+  feType: 'default',
+  label: null,
+  idAttribute: null,
+  buttonStyle: 'primary',
+  size: 'md',
+  role: 'listbox',
+  list: [],
+  position: 'bottom-left',
+  iconSelect: 'fas fa-check',
+  iconMultiLevel: 'fa fa-angle-right',
+  active: false,
+  activeItemIndex: null,
+  activeSubItemIndex: null,
+  activeId: null,
+  activeIds: null,
+  textHighlight: null,
+  isOpen: null,
+  onEscapeClose: true,
+  withSearch: false,
+  onItemClick: null,
+  onToggleDropdown: null,
+  onIconRighClick: null,
+  customRenderLink: null
+};
+FeDropdown.propTypes = {
+  /** Provide referId if label isn't provided*/
+  referId: _propTypes.default.string,
+
+  /** 'sectioned', 'multilevel'*/
+  feStyle: _propTypes.default.oneOf(['sectioned', 'multilevel']),
+
+  /** 'default', 'menu', 'single-select', 'multi-select'*/
+  feType: _propTypes.default.oneOf(['default', 'menu', 'single-select', 'multi-select']),
+
+  /** Provide idAttribute for dropdown list items*/
+  idAttribute: _propTypes.default.string,
+
+  /** Provide label for dropdown button*/
+  label: _propTypes.default.string,
+
+  /** Provide button variants like 'primary', 'primary-link', 'secondary', 'secondary-link', 'danger', 'danger-link'*/
+  buttonStyle: _propTypes.default.oneOf(['primary', 'primary-danger', 'secondary', 'secondary-danger', 'link', 'link-secondary', 'link-danger', 'cog']),
+
+  /** Provide button size like 'sm', 'md', 'lg' for small, medium and large respectively*/
+  size: _propTypes.default.oneOf(['sm', 'md', 'lg']),
+
+  /** Provide role for dropdown*/
+  role: _propTypes.default.string,
+
+  /** Provide list[{`FeListItem` props}] for dropdown*/
+  list: _propTypes.default.arrayOf(_propTypes.default.object),
+
+  /** Provide popup position*/
+  position: _propTypes.default.string,
+
+  /** Provide icon class*/
+  iconSelect: _propTypes.default.string,
+
+  /** Provide icon class*/
+  iconMultiLevel: _propTypes.default.string,
+
+  /** Provide icon class*/
+  active: _propTypes.default.bool,
+
+  /** Provide item index to set active*/
+  activeItemIndex: _propTypes.default.string,
+
+  /** Provide subitem index to set active*/
+  activeSubItemIndex: _propTypes.default.string,
+
+  /** Provide active ids*/
+  activeId: _propTypes.default.string,
+
+  /** Provide active ids*/
+  activeIds: _propTypes.default.array,
+
+  /** Provide substring to highlight*/
+  textHighlight: _propTypes.default.string,
+
+  /** Set true/false to enable searchField*/
+  withSearch: _propTypes.default.bool,
+
+  /** Set true/false to toggle dropdown*/
+  isOpen: _propTypes.default.bool,
+
+  /** Set true/false to toggle escape close*/
+  onEscapeClose: _propTypes.default.bool,
+
+  /** Provide item click handler for dropdown items*/
+  onItemClick: _propTypes.default.func,
+
+  /** Provide toggle handler for dropdown*/
+  onToggleDropdown: _propTypes.default.func,
+
+  /** Provide icon right click handler for dropdown items*/
+  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
+};
+FeDropdown.displayName = 'FeDropdown';
+var _default = FeDropdown;
+exports.default = _default;