fe-fabric-react 0.0.1-security → 2.864.3

package/lib/fe-pagination/FePagination.js

@@ -0,0 +1,688 @@
+"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 _toInteger = _interopRequireDefault(require("lodash/toInteger"));
+
+var _helper = require("../core/utils/helper");
+
+var _core = require("../core");
+
+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 _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 _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;
+}
+
+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 _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+
+function _iterableToArray(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+      arr2[i] = arr[i];
+    }
+
+    return arr2;
+  }
+}
+
+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 FePagination =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(FePagination, _Component);
+
+  function FePagination(props) {
+    var _this;
+
+    _classCallCheck(this, FePagination);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(FePagination).call(this, props));
+    var rowsPerPage = _this.props.rowsPerPage || _this.props.rowsPerPageOptions.length && _this.props.rowsPerPageOptions[0] || 10;
+    _this.state = {
+      isDropdownOpen: false,
+      dropdownStyle: null,
+      rowsPerPage: rowsPerPage,
+      pageNumber: 1,
+      inputValue: 1,
+      offset: 0
+    };
+    _this.onRowsPerPageClick = _this.onRowsPerPageClick.bind(_assertThisInitialized(_this));
+    _this.onPageCountClick = _this.onPageCountClick.bind(_assertThisInitialized(_this));
+    _this.onBlipClick = _this.onBlipClick.bind(_assertThisInitialized(_this));
+    _this.onNextClick = _this.onNextClick.bind(_assertThisInitialized(_this));
+    _this.onPreviousClick = _this.onPreviousClick.bind(_assertThisInitialized(_this));
+    _this.onInputBlur = _this.onInputBlur.bind(_assertThisInitialized(_this));
+    _this.onInputChange = _this.onInputChange.bind(_assertThisInitialized(_this));
+    _this.onItemClick = _this.onItemClick.bind(_assertThisInitialized(_this));
+    _this.onDropdownToggle = _this.onDropdownToggle.bind(_assertThisInitialized(_this));
+    _this.onIconToggle = _this.onIconToggle.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(FePagination, [{
+    key: "getNumberOfPageCount",
+    value: function getNumberOfPageCount() {
+      var rowsPerPage = this.state.rowsPerPage;
+      var numberOfPages = 0;
+
+      if (rowsPerPage !== 'ALL') {
+        rowsPerPage = (0, _toInteger.default)(rowsPerPage);
+        numberOfPages = this.props.totalRecords / rowsPerPage;
+      }
+
+      var isMultiple = numberOfPages === (0, _toInteger.default)(numberOfPages);
+
+      if (!isMultiple) {
+        numberOfPages = (0, _toInteger.default)(numberOfPages) + 1;
+      }
+
+      return numberOfPages;
+    }
+  }, {
+    key: "onDropdownToggle",
+    value: function onDropdownToggle(event) {
+      this.setState({
+        isDropdownOpen: event && event.isOpen || false
+      });
+    }
+  }, {
+    key: "onIconToggle",
+    value: function onIconToggle(event) {
+      (0, _helper.stopPropagation)(event);
+      var isDropdownOpen = this.state.isDropdownOpen;
+      var dropdownStyle = {
+        position: 'absolute',
+        right: '-6px',
+        top: '100%'
+      };
+
+      if (this.props.dropdownPosition === 'top') {
+        dropdownStyle['top'] = '0px';
+      }
+
+      this.setState({
+        isDropdownOpen: !isDropdownOpen,
+        dropdownStyle: dropdownStyle
+      });
+    }
+  }, {
+    key: "onItemClick",
+    value: function onItemClick(event) {
+      var pageNumber = (0, _toInteger.default)(event.originalEvent.currentTarget.value);
+      var offset = this.state.rowsPerPage !== 'ALL' ? (pageNumber - 1) * this.state.rowsPerPage : 0;
+      this.setState({
+        pageNumber: pageNumber,
+        inputValue: pageNumber,
+        offset: offset
+      });
+    }
+  }, {
+    key: "onInputChange",
+    value: function onInputChange(event) {
+      var inputValue = event.target.value;
+      inputValue = inputValue && (0, _toInteger.default)(inputValue);
+      this.setState({
+        inputValue: inputValue
+      });
+    }
+  }, {
+    key: "onInputBlur",
+    value: function onInputBlur(event) {
+      var value = event.target.value;
+      value = value && (0, _toInteger.default)(value) || this.state.pageNumber;
+      var numberOfPages = this.getNumberOfPageCount();
+      var pageNumber = value >= numberOfPages ? numberOfPages : value;
+      var offset = (pageNumber - 1) * this.state.rowsPerPage;
+      this.setState({
+        pageNumber: pageNumber,
+        inputValue: pageNumber,
+        offset: offset
+      });
+
+      if (this.props.onPageChange) {
+        this.props.onPageChange({
+          rowsPerPage: this.state.rowsPerPage,
+          pageNumber: pageNumber,
+          offset: offset
+        });
+      }
+    }
+  }, {
+    key: "onNextClick",
+    value: function onNextClick() {
+      var pageNumber = this.state.pageNumber + 1;
+      var offset = (pageNumber - 1) * this.state.rowsPerPage;
+      this.setState({
+        pageNumber: pageNumber,
+        inputValue: pageNumber,
+        offset: offset
+      });
+
+      if (this.props.onPageChange) {
+        this.props.onPageChange({
+          rowsPerPage: this.state.rowsPerPage,
+          pageNumber: pageNumber,
+          offset: offset
+        });
+      }
+    }
+  }, {
+    key: "onPreviousClick",
+    value: function onPreviousClick() {
+      var pageNumber = this.state.pageNumber - 1;
+      var offset = (pageNumber - 1) * this.state.rowsPerPage;
+      this.setState({
+        pageNumber: pageNumber,
+        inputValue: pageNumber,
+        offset: offset
+      });
+
+      if (this.props.onPageChange) {
+        this.props.onPageChange({
+          rowsPerPage: this.state.rowsPerPage,
+          pageNumber: pageNumber,
+          offset: offset
+        });
+      }
+    }
+  }, {
+    key: "onRowsPerPageClick",
+    value: function onRowsPerPageClick(event) {
+      var rowsPerPage = event.target.value;
+
+      if (rowsPerPage !== 'ALL') {
+        rowsPerPage = (0, _toInteger.default)(rowsPerPage);
+      }
+
+      var pageNumber = 1;
+      var offset = this.state.rowsPerPage !== 'ALL' ? (pageNumber - 1) * this.state.rowsPerPage : 0;
+      this.setState({
+        rowsPerPage: rowsPerPage,
+        pageNumber: pageNumber,
+        inputValue: pageNumber,
+        offset: offset
+      });
+
+      if (this.props.onPageChange) {
+        this.props.onPageChange({
+          rowsPerPage: rowsPerPage,
+          pageNumber: pageNumber,
+          offset: offset
+        });
+      }
+    }
+  }, {
+    key: "onBlipClick",
+    value: function onBlipClick(event) {
+      var pageNumber = (0, _toInteger.default)(event.target.dataset.value);
+      var offset = this.state.rowsPerPage !== 'ALL' ? (pageNumber - 1) * this.state.rowsPerPage : 0;
+      this.setState({
+        pageNumber: pageNumber,
+        offset: offset
+      });
+
+      if (this.props.onPageChange) {
+        this.props.onPageChange({
+          rowsPerPage: this.state.rowsPerPage,
+          pageNumber: pageNumber,
+          offset: offset
+        });
+      }
+    }
+  }, {
+    key: "onPageCountClick",
+    value: function onPageCountClick(event) {
+      var pageNumber = (0, _toInteger.default)(event.target.value);
+      var offset = this.state.rowsPerPage !== 'ALL' ? (pageNumber - 1) * this.state.rowsPerPage : 0;
+      this.setState({
+        pageNumber: pageNumber,
+        offset: offset
+      });
+
+      if (this.props.onPageChange) {
+        this.props.onPageChange({
+          rowsPerPage: this.state.rowsPerPage,
+          pageNumber: pageNumber,
+          offset: offset
+        });
+      }
+    }
+  }, {
+    key: "getBlips",
+    value: function getBlips() {
+      var _this2 = this;
+
+      var numberOfPages = this.getNumberOfPageCount();
+      return _react.default.createElement(_react.Fragment, null, _toConsumableArray(Array(numberOfPages).keys()).map(function (i) {
+        var active = _this2.state.pageNumber === i + 1;
+        return _react.default.createElement(Blip, {
+          key: i,
+          dataValue: "".concat(i + 1),
+          active: active,
+          onClick: _this2.onBlipClick
+        });
+      }));
+    }
+  }, {
+    key: "getRowsPerPage",
+    value: function getRowsPerPage() {
+      var _this3 = this;
+
+      if (this.props.rowsPerPageOptions.length === 0) {
+        return null;
+      }
+
+      var options = Object.assign([], this.props.rowsPerPageOptions);
+      options.push('ALL');
+      return _react.default.createElement("div", {
+        className: "fe-pagination__rows"
+      }, _react.default.createElement("span", {
+        className: "fe-pagination__label"
+      }, this.props.leftContent), options.map(function (option, i) {
+        var active = _this3.state.rowsPerPage === option;
+        return _react.default.createElement(PaginationButton, {
+          key: i,
+          "aria-label": "page size ".concat(option),
+          label: "".concat(option),
+          value: "".concat(option),
+          active: active,
+          onClick: _this3.onRowsPerPageClick
+        });
+      }));
+    }
+  }, {
+    key: "getPageCountsAsButton",
+    value: function getPageCountsAsButton(numberOfPages) {
+      var _this4 = this;
+
+      return _react.default.createElement(_react.Fragment, null, _toConsumableArray(Array(numberOfPages).keys()).map(function (i) {
+        var active = _this4.state.pageNumber === i + 1;
+        return _react.default.createElement(PaginationButton, {
+          key: i,
+          "aria-label": "page ".concat(i + 1),
+          label: "".concat(i + 1),
+          value: "".concat(i + 1),
+          active: active,
+          onClick: _this4.onPageCountClick
+        });
+      }));
+    }
+  }, {
+    key: "getPageCountsAsInput",
+    value: function getPageCountsAsInput(numberOfPages) {
+      var list = [];
+
+      for (var i = 0; i < numberOfPages; i++) {
+        list.push({
+          label: "".concat(i + 1),
+          value: "".concat(i + 1)
+        });
+      }
+
+      var iconDrop = this.state.isDropdownOpen ? 'fa-chevron-up' : 'fa-chevron-down';
+      return _react.default.createElement(_core.FeSelfContainedInput, {
+        type: "number",
+        min: "1",
+        max: "".concat(numberOfPages),
+        value: "".concat(this.state.inputValue),
+        onBlur: this.onInputBlur,
+        onChange: this.onInputChange,
+        optionalComponent: _react.default.createElement("span", null, _react.default.createElement(IconButton, {
+          id: "".concat(this.props.id, "InputDropIcon"),
+          onClick: this.onIconToggle,
+          icon: iconDrop
+        }), _react.default.createElement(_core.FeDropdown, {
+          buttonStyle: "link",
+          referId: "inputDropIcon",
+          feType: "single-select",
+          position: "".concat(this.props.dropdownPosition, "-right"),
+          style: this.state.dropdownStyle,
+          list: list,
+          isOpen: this.state.isDropdownOpen,
+          activeItemIndex: "".concat(this.state.pageNumber - 1),
+          onItemClick: this.onItemClick,
+          onToggleDropdown: this.onDropdownToggle
+        }))
+      });
+    }
+  }, {
+    key: "getPageCounts",
+    value: function getPageCounts() {
+      var offsetStart = this.props.totalRecords ? this.state.offset + 1 : 0;
+      var offsetEnd = this.state.rowsPerPage !== 'ALL' ? this.state.rowsPerPage * this.state.pageNumber : this.props.totalRecords;
+      var numberOfPages = this.getNumberOfPageCount();
+
+      if (offsetEnd > this.props.totalRecords) {
+        offsetEnd = this.props.totalRecords;
+      }
+
+      var pageCountsAsButton = numberOfPages <= 5 && this.getPageCountsAsButton(numberOfPages);
+      var pageCountsAsInput = numberOfPages > 5 && this.getPageCountsAsInput(numberOfPages);
+      return _react.default.createElement("div", {
+        className: "fe-pagination__pages"
+      }, _react.default.createElement("span", {
+        className: "fe-pagination__label"
+      }, _react.default.createElement("strong", null, offsetStart), "-", _react.default.createElement("strong", null, offsetEnd), " of ", _react.default.createElement("strong", null, this.props.totalRecords), this.props.rightContent ? _react.default.createElement("span", {
+        className: "fe-pagination__pages-filter-label"
+      }, this.props.rightContent) : null), numberOfPages ? _react.default.createElement(PaginationButton, {
+        "aria-label": "Previous page",
+        iconFamily: "light",
+        icon: "chevron-left",
+        onClick: this.onPreviousClick,
+        disabled: this.state.pageNumber <= 1
+      }) : null, pageCountsAsButton, pageCountsAsInput, numberOfPages ? _react.default.createElement(PaginationButton, {
+        "aria-label": "Next page",
+        iconFamily: "light",
+        icon: "chevron-right",
+        onClick: this.onNextClick,
+        disabled: this.state.pageNumber >= numberOfPages
+      }) : null);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      /** Minimum condition required to render*/
+
+      /** Rendering of component */
+      var className = (0, _classnames.default)('fe-pagination', this.props.className);
+      var blips = this.props.feStyle === 'blip' && this.getBlips();
+      var rowsPerPage = this.props.feStyle === 'numeric' && this.getRowsPerPage();
+      var pageCounts = this.props.feStyle === 'numeric' && this.getPageCounts();
+      return _react.default.createElement("div", {
+        id: "".concat(this.props.id),
+        className: className
+      }, blips, rowsPerPage, pageCounts);
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (props.pageNumber !== null && props.pageNumber !== state.pageNumber) {
+        return {
+          pageNumber: props.pageNumber,
+          inputValue: props.pageNumber,
+          offset: (props.pageNumber - 1) * state.rowsPerPage
+        };
+      }
+
+      return null;
+    }
+  }]);
+
+  return FePagination;
+}(_react.Component);
+
+var PaginationButton = function PaginationButton(props) {
+  var label = props.label,
+      buttonProps = _objectWithoutProperties(props, ["label"]);
+
+  return _react.default.createElement(_core.FeButton, _extends({}, buttonProps, {
+    feStyle: "link",
+    size: "md"
+  }), label);
+};
+
+var Blip = function Blip(props) {
+  var className = (0, _classnames.default)('fe-pagination__blip', {
+    'active': props.active
+  });
+  return _react.default.createElement("span", {
+    className: className,
+    role: "button",
+    "aria-label": "page number ".concat(props.dataValue),
+    tabIndex: "0",
+    "data-value": props.dataValue,
+    onClick: props.onClick,
+    onKeyDown: function onKeyDown(event) {
+      if (event.keyCode === 13) {
+        //Enter
+        props.onClick(event);
+      }
+    }
+  });
+};
+
+var IconButton = function IconButton(props) {
+  return _react.default.createElement("span", {
+    id: props.id,
+    role: "button",
+    tabIndex: "0",
+    "aria-label": "pagination drop",
+    onClick: props.onClick,
+    onKeyDown: function onKeyDown(event) {
+      if (event.keyCode === 13) {
+        //Enter
+        props.onClick(event);
+      }
+    }
+  }, _react.default.createElement(_core.FeIcon, {
+    family: "light",
+    icon: props.icon
+  }));
+};
+
+FePagination.defaultProps = {
+  feStyle: 'numeric',
+  rowsPerPage: null,
+  rowsPerPageOptions: [],
+  leftContent: 'Rows per page',
+  rightContent: null,
+  totalRecords: null,
+  pageNumber: null,
+  dropdownPosition: 'bottom',
+  onPageChange: null
+};
+FePagination.propTypes = {
+  /** Provide id for pagination*/
+  id: _propTypes.default.string.isRequired,
+
+  /** Provide style for pagination like 'numeric' or 'blip' */
+  feStyle: _propTypes.default.oneOf(['numeric', 'blip']),
+
+  /** Provide rows per page */
+  rowsPerPage: _propTypes.default.number.isRequired,
+
+  /** Provide multiple options to switch number of rows per page */
+  rowsPerPageOptions: _propTypes.default.arrayOf(_propTypes.default.number),
+
+  /** Provide left content text */
+  leftContent: _propTypes.default.string,
+
+  /** Provide right content text */
+  rightContent: _propTypes.default.string,
+
+  /** Provide total number of records available */
+  totalRecords: _propTypes.default.number.isRequired,
+
+  /** Provide current active page count */
+  pageNumber: _propTypes.default.number,
+
+  /** Provide dropdown position */
+  dropdownPosition: _propTypes.default.string,
+
+  /** Provide icon class */
+  onPageChange: _propTypes.default.func
+};
+FePagination.displayName = 'FePagination';
+var _default = FePagination;
+exports.default = _default;

package/lib/fe-pagination/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _FePagination = _interopRequireDefault(require("./FePagination"));
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+
+var _default = _FePagination.default;
+exports.default = _default;