@occmundial/occ-atomic 3.0.0-beta.6 → 3.0.0-beta.61

package/build/Pager/Page/styles.js

@@ -5,28 +5,62 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _li;
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
+
+var _fonts2 = _interopRequireDefault(require("../../subatomic/fonts"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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; }
+var objectToFontValue = function objectToFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts2["default"].body);
+};
 
 var _default = {
-  li: (_li = {
-    display: 'inline-block',
+  page: {
+    display: 'flex',
     cursor: 'pointer',
-    padding: '2px 11px',
-    marginLeft: '4px',
-    marginRight: '4px',
-    borderRadius: '13px'
-  }, _defineProperty(_li, "cursor", 'pointer'), _defineProperty(_li, "transition", '0.3s all'), _defineProperty(_li, "outline", '0'), _defineProperty(_li, '&:hover', {
-    background: '#ECECEE'
-  }), _li),
+    minWidth: 45,
+    padding: [_spacing["default"]['size-3'], _spacing["default"]['size-2']],
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: _spacing["default"]['size-2'],
+    borderRadius: _borderRadius["default"]['br-xs'],
+    background: 'transparent',
+    font: objectToFontValue(_fonts["default"]['button-small']),
+    color: _colors["default"].text.corp.secondary,
+    transition: '0.3s all',
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-corp']
+    },
+    outline: 'none',
+    border: 'none',
+    '&:hover': {
+      background: _colors["default"].bg.action.ghost.hover
+    },
+    '&:active': {
+      background: _colors["default"].bg.action.ghost.active
+    }
+  },
+  "static": {
+    pointerEvents: 'none'
+  },
   active: {
-    background: "".concat(_colors["default"].blue, " !important"),
-    color: _colors["default"].white
+    background: "".concat(_colors["default"].bg.action.brand["default"], " !important"),
+    color: "".concat(_colors["default"].text.white.primary, " !important"),
+    zIndex: 1
+  },
+  disabled: {
+    pointerEvents: 'none',
+    background: 'transparent',
+    color: _colors["default"].text.corp.disabled
   }
 };
 exports["default"] = _default;

package/build/Pager/Pager.js

@@ -5,258 +5,185 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = Pager;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _Button = _interopRequireDefault(require("../Button"));
 
 var _Page = _interopRequireDefault(require("./Page"));
 
-var _Break = _interopRequireDefault(require("./Break"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 _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); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** This pager allows the user to navigate between pages with 'Next' and 'Previous' buttons and numerical buttons. */
+function Pager(_ref) {
+  var classes = _ref.classes,
+      currentPage = _ref.currentPage,
+      onPageChange = _ref.onPageChange,
+      _ref$pageCount = _ref.pageCount,
+      pageCount = _ref$pageCount === void 0 ? 10 : _ref$pageCount,
+      _ref$centerPages = _ref.centerPages,
+      centerPages = _ref$centerPages === void 0 ? 3 : _ref$centerPages,
+      _ref$marginPages = _ref.marginPages,
+      marginPages = _ref$marginPages === void 0 ? 2 : _ref$marginPages,
+      _ref$previousLabel = _ref.previousLabel,
+      previousLabel = _ref$previousLabel === void 0 ? 'Previous' : _ref$previousLabel,
+      _ref$nextLabel = _ref.nextLabel,
+      nextLabel = _ref$nextLabel === void 0 ? 'Next' : _ref$nextLabel,
+      _ref$breakSymbol = _ref.breakSymbol,
+      breakSymbol = _ref$breakSymbol === void 0 ? '...' : _ref$breakSymbol,
+      hideNumbers = _ref.hideNumbers,
+      disabled = _ref.disabled,
+      className = _ref.className,
+      id = _ref.id;
+  var handlePageSelected = (0, _react.useCallback)(function (newPage) {
+    if (currentPage === newPage) return;
+    if (onPageChange) onPageChange(newPage);
+  }, [currentPage, onPageChange]);
+  (0, _react.useEffect)(function () {
+    if (currentPage > pageCount || currentPage < 1) {
+      handlePageSelected(1);
+    }
+  }, [currentPage, pageCount, handlePageSelected]);
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+  var handlePrevPage = function handlePrevPage() {
+    if (currentPage > 1) handlePageSelected(currentPage - 1);
+  };
 
-/** This pager allows the user to navigate between pages with 'Next' and 'Previous' buttons and numerical buttons. */
-var Pager = /*#__PURE__*/function (_React$Component) {
-  _inherits(Pager, _React$Component);
+  var handleNextPage = function handleNextPage() {
+    if (currentPage < pageCount) handlePageSelected(currentPage + 1);
+  };
 
-  var _super = _createSuper(Pager);
+  var addPage = function addPage(page) {
+    var pageData = {
+      key: page.toString(),
+      type: 'page',
+      selected: currentPage === page
+    };
+    return pageData;
+  };
 
-  function Pager(props) {
-    var _this;
+  var getStartAndEndPages = function getStartAndEndPages() {
+    var startPage = Math.max(currentPage - Math.floor(centerPages / 2), marginPages + 1);
+    var endPage = Math.min(startPage + centerPages - 1, pageCount - marginPages);
 
-    _classCallCheck(this, Pager);
+    if (endPage === pageCount - marginPages) {
+      startPage = Math.max(endPage - centerPages + 1, marginPages + 1);
+    }
 
-    _this = _super.call(this, props);
-    _this.state = {
-      selected: props.initialPage ? props.initialPage : props.forcePage ? props.forcePage : 1
+    return {
+      startPage: startPage,
+      endPage: endPage
     };
-    _this.callCallback = _this.callCallback.bind(_assertThisInitialized(_this));
-    _this.handlePrevPage = _this.handlePrevPage.bind(_assertThisInitialized(_this));
-    _this.handleNextPage = _this.handleNextPage.bind(_assertThisInitialized(_this));
-    _this.handlePageSelected = _this.handlePageSelected.bind(_assertThisInitialized(_this));
-    _this.getPageElement = _this.getPageElement.bind(_assertThisInitialized(_this));
-    _this.pagination = _this.pagination.bind(_assertThisInitialized(_this));
-    return _this;
-  }
+  };
 
-  _createClass(Pager, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-          initialPage = _this$props.initialPage,
-          disableInitialCallback = _this$props.disableInitialCallback;
+  function getPagination() {
+    var elements = [];
 
-      if (typeof initialPage != 'undefined' && !disableInitialCallback) {
-        this.callCallback(initialPage);
+    if (pageCount <= centerPages + marginPages * 2) {
+      for (var i = 1; i <= pageCount; i++) {
+        elements.push(addPage(i));
       }
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(props) {
-      if (typeof props.forcePage != 'undefined' && this.props.forcePage != props.forcePage) {
-        this.setState({
-          selected: props.forcePage
-        });
+    } else {
+      for (var _i = 1; _i <= marginPages; _i++) {
+        elements.push(addPage(_i));
       }
-    }
-  }, {
-    key: "callCallback",
-    value: function callCallback(selectedItem) {
-      var onPageChange = this.props.onPageChange;
-
-      if (typeof onPageChange != 'undefined' && typeof onPageChange == 'function') {
-        onPageChange({
-          selected: selectedItem
+
+      var _getStartAndEndPages = getStartAndEndPages(),
+          startPage = _getStartAndEndPages.startPage,
+          endPage = _getStartAndEndPages.endPage;
+
+      if (currentPage > marginPages + 1 && startPage > marginPages + 1) {
+        elements.push({
+          key: 'left-break',
+          type: 'break'
         });
       }
-    }
-  }, {
-    key: "handlePrevPage",
-    value: function handlePrevPage(e) {
-      var selected = this.state.selected;
-      e.preventDefault ? e.preventDefault() : e.returnValue = false;
-
-      if (selected > 1) {
-        this.handlePageSelected(selected - 1, e);
+
+      for (var _i2 = startPage; _i2 <= endPage; _i2++) {
+        elements.push(addPage(_i2));
       }
-    }
-  }, {
-    key: "handleNextPage",
-    value: function handleNextPage(e) {
-      var selected = this.state.selected;
-      var pageCount = this.props.pageCount;
-      e.preventDefault ? e.preventDefault() : e.returnValue = false;
-
-      if (selected < pageCount) {
-        this.handlePageSelected(selected + 1, e);
+
+      if (currentPage < pageCount - marginPages - 1) {
+        elements.push({
+          key: 'right-break',
+          type: 'break'
+        });
+      }
+
+      for (var _i3 = pageCount - marginPages + 1; _i3 <= pageCount; _i3++) {
+        elements.push(addPage(_i3));
       }
     }
-  }, {
-    key: "handlePageSelected",
-    value: function handlePageSelected(selected, e) {
-      e.preventDefault ? e.preventDefault() : e.returnValue = false;
-      if (this.state.selected == selected) return;
-      this.setState({
-        selected: selected
-      });
-      this.callCallback(selected);
-    }
-  }, {
-    key: "getPageElement",
-    value: function getPageElement(index) {
-      var selected = this.state.selected;
+
+    return elements;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.pager).concat(className ? " ".concat(className) : '')
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    className: classes.prev,
+    disabled: currentPage === 1 || disabled,
+    theme: "secondary",
+    onClick: handlePrevPage,
+    icon: "arrow-left",
+    size: !previousLabel ? 'lg' : 'sm',
+    id: id ? "".concat(id, "Previo") : undefined
+  }, previousLabel), !hideNumbers && getPagination().map(function (_ref2) {
+    var key = _ref2.key,
+        type = _ref2.type,
+        selected = _ref2.selected;
+
+    if (type === 'page') {
       return /*#__PURE__*/_react["default"].createElement(_Page["default"], {
-        key: index,
-        onClick: this.handlePageSelected.bind(null, index),
-        selected: selected == index,
-        page: index
+        key: key,
+        onClick: function onClick() {
+          return handlePageSelected(Number(key));
+        },
+        selected: selected,
+        page: Number(key),
+        disabled: disabled,
+        id: id
       });
     }
-  }, {
-    key: "pagination",
-    value: function pagination() {
-      var _this2 = this;
-
-      var items = [];
-      var selected = this.state.selected;
-      var _this$props2 = this.props,
-          pageRangeDisplayed = _this$props2.pageRangeDisplayed,
-          pageCount = _this$props2.pageCount,
-          marginPagesDisplayed = _this$props2.marginPagesDisplayed,
-          breakLabel = _this$props2.breakLabel;
-
-      if (pageCount <= pageRangeDisplayed) {
-        for (var index = 1; index <= pageCount; index++) {
-          items.push(this.getPageElement(index));
-        }
-      } else {
-        var leftSide = pageRangeDisplayed / 2;
-        var rightSide = pageRangeDisplayed - leftSide;
-
-        if (selected > pageCount - pageRangeDisplayed / 2) {
-          rightSide = pageCount - selected;
-          leftSide = pageRangeDisplayed - rightSide;
-        } else if (selected < pageRangeDisplayed / 2) {
-          leftSide = selected;
-          rightSide = pageRangeDisplayed - leftSide;
-        }
-
-        var _index;
-
-        var page;
-        var breakView;
-
-        var createPage = function createPage(index) {
-          return _this2.getPageElement(index);
-        };
-
-        for (_index = 1; _index <= pageCount; _index++) {
-          page = _index;
-
-          if (page <= marginPagesDisplayed) {
-            items.push(createPage(_index));
-            continue;
-          }
-
-          if (page > pageCount - marginPagesDisplayed) {
-            items.push(createPage(_index));
-            continue;
-          }
-
-          if (_index >= selected - leftSide && _index <= selected + rightSide) {
-            items.push(createPage(_index));
-            continue;
-          }
-
-          if (breakLabel && items[items.length - 1] != breakView) {
-            breakView = /*#__PURE__*/_react["default"].createElement(_Break["default"], {
-              key: _index,
-              label: breakLabel
-            });
-            items.push(breakView);
-          }
-        }
-      }
 
-      return items;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var selected = this.state.selected;
-      var _this$props3 = this.props,
-          classes = _this$props3.classes,
-          pageCount = _this$props3.pageCount,
-          previousLabel = _this$props3.previousLabel,
-          nextLabel = _this$props3.nextLabel,
-          hideNumbers = _this$props3.hideNumbers,
-          className = _this$props3.className;
-      return /*#__PURE__*/_react["default"].createElement("ul", {
-        className: "".concat(classes.pager).concat(className ? " ".concat(className) : '')
-      }, /*#__PURE__*/_react["default"].createElement("li", {
-        className: "".concat(classes.btn, " ").concat(classes.listItemPrevious).concat(selected == 1 ? " ".concat(classes.disabled) : ''),
-        tabIndex: "0",
-        onClick: this.handlePrevPage
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.prev
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "chevron-left",
-        width: 14,
-        height: 14,
-        colors: ['#adb4bb']
-      }), previousLabel)), !hideNumbers && this.pagination(), /*#__PURE__*/_react["default"].createElement("li", {
-        className: "".concat(classes.btn, " ").concat(classes.listItemNext).concat(selected == pageCount ? " ".concat(classes.disabled) : ''),
-        tabIndex: "0",
-        onClick: this.handleNextPage
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.next
-      }, nextLabel, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "chevron-right",
-        width: 14,
-        height: 14,
-        colors: ['#adb4bb']
-      }))));
-    }
-  }]);
-
-  return Pager;
-}(_react["default"].Component);
+    return /*#__PURE__*/_react["default"].createElement(_Page["default"], {
+      key: key,
+      page: breakSymbol,
+      disabled: disabled,
+      id: id
+    });
+  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    className: classes.next,
+    disabled: currentPage === pageCount || disabled,
+    theme: "secondary",
+    onClick: handleNextPage,
+    iconRight: "arrow-right",
+    size: !nextLabel ? 'lg' : 'sm',
+    id: id ? "".concat(id, "Siguiente") : undefined
+  }, nextLabel));
+}
 
 Pager.propTypes = {
   classes: _propTypes["default"].object,
 
+  /** The current page number. */
+  currentPage: _propTypes["default"].number.isRequired,
+
   /** The total number of pages. */
-  pageCount: _propTypes["default"].number.isRequired,
+  pageCount: _propTypes["default"].number,
 
   /** The number of page numbers displayed at the center, between the '...' separators. */
-  pageRangeDisplayed: _propTypes["default"].number.isRequired,
+  centerPages: _propTypes["default"].number,
 
   /** The number of page numbers displayed on the sides of the pager. */
-  marginPagesDisplayed: _propTypes["default"].number.isRequired,
+  marginPages: _propTypes["default"].number,
 
   /** The label for the 'Previous' button. */
   previousLabel: _propTypes["default"].node,
@@ -267,31 +194,13 @@ Pager.propTypes = {
   /** Function to call after clicking a button to change the page. */
   onPageChange: _propTypes["default"].func,
 
-  /** Default page to start the Pager. */
-  initialPage: _propTypes["default"].number,
-
-  /** Force a page change externally. */
-  forcePage: _propTypes["default"].number,
-
-  /** By default, a callback triggers after mounting, calling the onPageChange function. Set this to false if you don't want that to happen. */
-  disableInitialCallback: _propTypes["default"].bool,
-
   /** Hide the numerical buttons, leaving just the 'Next' and 'Previous' buttons to interact with. */
   hideNumbers: _propTypes["default"].bool,
 
   /** Label for the separators. */
-  breakLabel: _propTypes["default"].string,
+  breakSymbol: _propTypes["default"].string,
+
+  /** Disable the pager */
+  disabled: _propTypes["default"].bool,
   className: _propTypes["default"].string
-};
-Pager.defaultProps = {
-  pageCount: 10,
-  pageRangeDisplayed: 2,
-  marginPagesDisplayed: 3,
-  previousLabel: 'Previous',
-  nextLabel: 'Next',
-  breakLabel: '...',
-  disableInitialCallback: false,
-  hideNumbers: false
-};
-var _default = Pager;
-exports["default"] = _default;
+};