@catho/quantum
Version:
Catho react components
102 lines (101 loc) • 4.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ActionButton = _interopRequireDefault(require("./ActionButton"));
var _theme = require("../../shared/theme");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var Info = _styledComponents["default"].span.withConfig({
displayName: "Mobile__Info",
componentId: "sc-1h7l4jx-0"
})(["border-bottom:1px solid;border-top:1px solid;transition:background-color 0.2s ease-in-out,color 0.2s ease-in-out;", ""], function (_ref) {
var _ref$theme = _ref.theme,
_ref$theme$colors$neu = _ref$theme.colors.neutral,
neutral300 = _ref$theme$colors$neu[300],
neutral700 = _ref$theme$colors$neu[700],
_ref$theme$spacing = _ref$theme.spacing,
xsmall = _ref$theme$spacing.xsmall,
medium = _ref$theme$spacing.medium;
return "\n border-color: ".concat(neutral300, ";\n color: ").concat(neutral700, ";\n padding: ").concat(xsmall, "px ").concat(medium, "px;\n ");
});
var StyledActionButton = (0, _styledComponents["default"])(_ActionButton["default"]).withConfig({
displayName: "Mobile__StyledActionButton",
componentId: "sc-1h7l4jx-1"
})(["", " ", " ", ""], function (_ref2) {
var neutral300 = _ref2.theme.colors.neutral[300];
return "\n border-color: ".concat(neutral300, ";\n border-radius: 10px;\n border-width: 1px;\n\n &[aria-disabled=true] {\n color: ").concat(neutral300, ";\n display: block;\n }\n\n &[aria-disabled=false] {\n &:focus {\n border-width: 1px;\n }\n }\n ");
}, function (_ref3) {
var rightSquared = _ref3.rightSquared;
return rightSquared ? "\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n margin: 0;\n " : '';
}, function (_ref4) {
var leftSquared = _ref4.leftSquared;
return leftSquared ? "\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin: 0;\n " : '';
});
Info.displayName = 'Info';
var Mobile = function Mobile(_ref5) {
var _ref5$activePage = _ref5.activePage,
activePage = _ref5$activePage === void 0 ? 1 : _ref5$activePage,
_ref5$handlePageClick = _ref5.handlePageClick,
handlePageClick = _ref5$handlePageClick === void 0 ? function () {} : _ref5$handlePageClick,
_ref5$handleHref = _ref5.handleHref,
handleHref = _ref5$handleHref === void 0 ? function () {} : _ref5$handleHref,
_ref5$prevButtonText = _ref5.prevButtonText,
prevButtonText = _ref5$prevButtonText === void 0 ? 'Previous' : _ref5$prevButtonText,
_ref5$nextButtonText = _ref5.nextButtonText,
nextButtonText = _ref5$nextButtonText === void 0 ? 'Next' : _ref5$nextButtonText,
totalPages = _ref5.totalPages,
_ref5$infoFormatter = _ref5.infoFormatter,
infoFormatter = _ref5$infoFormatter === void 0 ? function (currentPage, lastPage) {
return "".concat(currentPage, " of ").concat(lastPage);
} : _ref5$infoFormatter,
_ref5$theme = _ref5.theme,
theme = _ref5$theme === void 0 ? {
colors: _theme.colors,
spacing: _theme.spacing
} : _ref5$theme,
_ref5$followOnlyFirst = _ref5.followOnlyFirstPage,
followOnlyFirstPage = _ref5$followOnlyFirst === void 0 ? false : _ref5$followOnlyFirst;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledActionButton, {
tabIndex: 0,
"aria-disabled": activePage === 1,
onClick: handlePageClick(activePage - 1),
href: handleHref(activePage - 1),
rightSquared: true,
theme: theme,
rel: followOnlyFirstPage && activePage > 2 ? 'nofollow' : undefined,
children: prevButtonText
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Info, {
theme: theme,
children: infoFormatter(activePage, totalPages)
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledActionButton, {
tabIndex: 0,
"aria-disabled": activePage === totalPages,
onClick: handlePageClick(activePage + 1),
href: handleHref(activePage + 1),
leftSquared: true,
theme: theme,
rel: followOnlyFirstPage ? 'nofollow' : undefined,
children: nextButtonText
})]
});
};
Mobile.propTypes = {
activePage: _propTypes["default"].number,
totalPages: _propTypes["default"].number.isRequired,
infoFormatter: _propTypes["default"].func,
nextButtonText: _propTypes["default"].string,
prevButtonText: _propTypes["default"].string,
handleHref: _propTypes["default"].func,
handlePageClick: _propTypes["default"].func,
theme: _propTypes["default"].shape({
colors: _propTypes["default"].object,
spacing: _propTypes["default"].object
}),
followOnlyFirstPage: _propTypes["default"].bool
};
var _default = exports["default"] = Mobile;