suomifi-ui-components
Version:
Suomi.fi UI component library
225 lines (219 loc) • 10.2 kB
JavaScript
;
var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var classnames = require('classnames');
var suomifiIcons = require('suomifi-icons');
var SuomifiThemeProvider = require('../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../theme/SuomifiTheme/SuomifiTheme.js');
var SpacingProvider = require('../theme/SpacingProvider/SpacingProvider.js');
var spacing = require('../theme/utils/spacing.js');
var Pagination_baseStyles = require('./Pagination.baseStyles.js');
require('../../reset/HtmlA/HtmlA.js');
require('../../reset/HtmlButton/HtmlButton.js');
var HtmlDiv = require('../../reset/HtmlDiv/HtmlDiv.js');
require('../../reset/HtmlFieldSet/HtmlFieldSet.js');
require('../../reset/HtmlH/HtmlH.js');
require('../../reset/HtmlInput/HtmlInput.js');
require('../../reset/HtmlLabel/HtmlLabel.js');
require('../../reset/HtmlLegend/HtmlLegend.js');
require('../../reset/HtmlLi/HtmlLi.js');
var HtmlNav = require('../../reset/HtmlNav/HtmlNav.js');
require('../../reset/HtmlOl/HtmlOl.js');
var HtmlSpan = require('../../reset/HtmlSpan/HtmlSpan.js');
require('../../reset/HtmlTextarea/HtmlTextarea.js');
require('../../reset/HtmlUl/HtmlUl.js');
require('../../reset/HtmlTable/HtmlTable.js');
require('../../reset/HtmlTable/HtmlTableCaption.js');
require('../../reset/HtmlTable/HtmlTableHeader.js');
require('../../reset/HtmlTable/HtmlTableRow.js');
require('../../reset/HtmlTable/HtmlTableBody.js');
require('../../reset/HtmlTable/HtmlTableHeaderCell.js');
require('../../reset/HtmlTable/HtmlTableCell.js');
var PageInput = require('./PageInput/PageInput.js');
var Button = require('../Button/Button.js');
var VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
var AutoId = require('../utils/AutoId/AutoId.js');
var common = require('../../utils/common/common.js');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);
var baseClassName = 'fi-pagination';
var paginationClassNames = {
styleWrapper: "".concat(baseClassName, "_style-wrapper"),
content: "".concat(baseClassName, "_content"),
contentWrapper: "".concat(baseClassName, "_contentWrapper"),
heading: "".concat(baseClassName, "_heading"),
textContentWrapper: "".concat(baseClassName, "_text-content-wrapper"),
icon: "".concat(baseClassName, "_icon"),
iconWrapper: "".concat(baseClassName, "_icon-wrapper"),
pageButton: "".concat(baseClassName, "_page-button"),
arrowButton: "".concat(baseClassName, "_arrow-button"),
smallScreen: "".concat(baseClassName, "--small-screen"),
pageInputWrapper: "".concat(baseClassName, "_page-input-wrapper"),
buttonsWrapper: "".concat(baseClassName, "_buttons-wrapper"),
actionElementWrapper: "".concat(baseClassName, "_action-element-wrapper"),
pageNumbers: "".concat(baseClassName, "_page-numbers")
};
var BasePagination = function (_super) {
tslib.__extends(BasePagination, _super);
function BasePagination() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.leftButtonRef = /*#__PURE__*/React__default.default.createRef();
_this.rightButtonRef = /*#__PURE__*/React__default.default.createRef();
_this.onLeftButtonClick = function () {
if (_this.props.currentPage) {
var newPage = _this.props.currentPage - 1;
_this.props.onChange(newPage);
} else {
_this.setState(function (prevState) {
return {
currentPage: prevState.currentPage - 1
};
}, function () {
_this.props.onChange(_this.state.currentPage);
});
}
};
_this.onRightButtonClick = function () {
if (_this.props.currentPage) {
var newPage = _this.props.currentPage + 1;
_this.props.onChange(newPage);
} else {
_this.setState(function (prevState) {
return {
currentPage: prevState.currentPage + 1
};
}, function () {
_this.props.onChange(_this.state.currentPage);
});
}
};
_this.onNumberInputChange = function (page) {
_this.props.onChange(page);
_this.setState({
currentPage: page
});
};
_this.state = {
currentPage: 1
};
return _this;
}
BasePagination.prototype.getCurrentPage = function () {
return this.props.currentPage || this.state.currentPage;
};
BasePagination.prototype.render = function () {
var _a;
var _this = this;
var _b = this.props;
_b.children;
var className = _b.className,
pageIndicatorText = _b.pageIndicatorText,
ariaPageIndicatorText = _b.ariaPageIndicatorText;
_b.onChange;
_b.currentPage;
var lastPage = _b.lastPage,
_c = _b.previousButtonAriaLabel,
previousButtonAriaLabel = _c === void 0 ? '' : _c,
_d = _b.nextButtonAriaLabel,
nextButtonAriaLabel = _d === void 0 ? '' : _d,
customNextButton = _b.customNextButton,
customPreviousButton = _b.customPreviousButton,
pageInput = _b.pageInput,
pageInputProps = _b.pageInputProps,
smallScreen = _b.smallScreen,
id = _b.id,
style = _b.style,
rest = tslib.__rest(_b, ["children", "className", "pageIndicatorText", "ariaPageIndicatorText", "onChange", "currentPage", "lastPage", "previousButtonAriaLabel", "nextButtonAriaLabel", "customNextButton", "customPreviousButton", "pageInput", "pageInputProps", "smallScreen", "id", "style"]);
var _e = spacing.separateMarginProps(rest),
passProps = _e[1];
var pageInputId = "".concat(id, "-pageInput");
return /*#__PURE__*/React__default.default.createElement(HtmlNav.HtmlNav, tslib.__assign({}, passProps, {
className: classnames__default.default(baseClassName, className, (_a = {}, _a[paginationClassNames.smallScreen] = !!smallScreen, _a)),
style: style
}), /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: paginationClassNames.styleWrapper
}, /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: paginationClassNames.buttonsWrapper
}, /*#__PURE__*/React__default.default.createElement(VisuallyHidden.VisuallyHidden, {
"aria-live": "polite",
"aria-atomic": "true",
id: "".concat(id, "-page-change-announce")
}, ariaPageIndicatorText(this.getCurrentPage(), lastPage)), customPreviousButton || ( /*#__PURE__*/React__default.default.createElement(Button.Button, {
id: "".concat(id, "-previous-button"),
className: paginationClassNames.arrowButton,
variant: "secondary",
onClick: this.onLeftButtonClick,
icon: /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconArrowLeft, null),
disabled: this.getCurrentPage() <= 1,
"aria-label": previousButtonAriaLabel,
forwardedRef: this.leftButtonRef
})), /*#__PURE__*/React__default.default.createElement(HtmlSpan.HtmlSpan, {
className: paginationClassNames.pageNumbers
}, pageIndicatorText(this.getCurrentPage(), lastPage)), customNextButton || ( /*#__PURE__*/React__default.default.createElement(Button.Button, {
id: "".concat(id, "-next-button"),
className: paginationClassNames.arrowButton,
variant: "secondary",
onClick: this.onRightButtonClick,
disabled: this.getCurrentPage() >= lastPage,
"aria-label": nextButtonAriaLabel,
icon: /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconArrowRight, null),
forwardedRef: this.rightButtonRef
}))), pageInput === true && pageInputProps && ( /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: paginationClassNames.pageInputWrapper
}, /*#__PURE__*/React__default.default.createElement(PageInput.PageInput, {
id: pageInputId,
pageInputButtonLabel: pageInputProps.buttonText,
visualPlaceholder: pageInputProps.inputPlaceholderText,
maxValue: lastPage,
labelText: pageInputProps.labelText,
onPageChange: function onPageChange(page) {
_this.onNumberInputChange(Number(page));
},
invalidValueErrorText: pageInputProps.invalidValueErrorText
})))));
};
return BasePagination;
}(React.Component);
var StyledPagination = styled.styled(function (props) {
props.theme;
props.globalMargins;
var passProps = tslib.__rest(props, ["theme", "globalMargins"]);
return /*#__PURE__*/React__default.default.createElement(BasePagination, tslib.__assign({}, passProps));
}).withConfig({
componentId: "sc-1sr90lw-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme,
globalMargins = _a.globalMargins,
rest = tslib.__rest(_a, ["theme", "globalMargins"]);
var _b = spacing.separateMarginProps(rest),
marginProps = _b[0];
var cleanedGlobalMargins = common.filterDuplicateKeys(globalMargins.pagination, marginProps);
return Pagination_baseStyles.baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
var propId = props.id,
passProps = tslib.__rest(props, ["id"]);
return /*#__PURE__*/React__default.default.createElement(SpacingProvider.SpacingConsumer, null, function (_a) {
var margins = _a.margins;
return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React__default.default.createElement(AutoId.AutoId, {
id: propId
}, function (id) {
return /*#__PURE__*/React__default.default.createElement(StyledPagination, tslib.__assign({
id: id,
theme: suomifiTheme,
globalMargins: margins,
forwardedRef: ref
}, passProps));
});
});
});
});
Pagination.displayName = 'Pagination';
var templateObject_1;
exports.Pagination = Pagination;
exports.paginationClassNames = paginationClassNames;
//# sourceMappingURL=Pagination.js.map