suomifi-ui-components
Version:
Suomi.fi UI component library
217 lines (214 loc) • 9.39 kB
JavaScript
import { __extends, __rest, __assign, __makeTemplateObject } from 'tslib';
import React, { Component, forwardRef } from 'react';
import { styled } from 'styled-components';
import classnames from 'classnames';
import { IconArrowLeft, IconArrowRight } from 'suomifi-icons';
import { SuomifiThemeConsumer } from '../theme/SuomifiThemeProvider/SuomifiThemeProvider.js';
import '../theme/SuomifiTheme/SuomifiTheme.js';
import { SpacingConsumer } from '../theme/SpacingProvider/SpacingProvider.js';
import { separateMarginProps } from '../theme/utils/spacing.js';
import { baseStyles } from './Pagination.baseStyles.js';
import '../../reset/HtmlA/HtmlA.js';
import '../../reset/HtmlButton/HtmlButton.js';
import { HtmlDiv } from '../../reset/HtmlDiv/HtmlDiv.js';
import '../../reset/HtmlFieldSet/HtmlFieldSet.js';
import '../../reset/HtmlH/HtmlH.js';
import '../../reset/HtmlInput/HtmlInput.js';
import '../../reset/HtmlLabel/HtmlLabel.js';
import '../../reset/HtmlLegend/HtmlLegend.js';
import '../../reset/HtmlLi/HtmlLi.js';
import { HtmlNav } from '../../reset/HtmlNav/HtmlNav.js';
import '../../reset/HtmlOl/HtmlOl.js';
import { HtmlSpan } from '../../reset/HtmlSpan/HtmlSpan.js';
import '../../reset/HtmlTextarea/HtmlTextarea.js';
import '../../reset/HtmlUl/HtmlUl.js';
import '../../reset/HtmlTable/HtmlTable.js';
import '../../reset/HtmlTable/HtmlTableCaption.js';
import '../../reset/HtmlTable/HtmlTableHeader.js';
import '../../reset/HtmlTable/HtmlTableRow.js';
import '../../reset/HtmlTable/HtmlTableBody.js';
import '../../reset/HtmlTable/HtmlTableHeaderCell.js';
import '../../reset/HtmlTable/HtmlTableCell.js';
import { PageInput } from './PageInput/PageInput.js';
import { Button } from '../Button/Button.js';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
import { AutoId } from '../utils/AutoId/AutoId.js';
import { filterDuplicateKeys } from '../../utils/common/common.js';
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) {
__extends(BasePagination, _super);
function BasePagination() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.leftButtonRef = /*#__PURE__*/React.createRef();
_this.rightButtonRef = /*#__PURE__*/React.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 = __rest(_b, ["children", "className", "pageIndicatorText", "ariaPageIndicatorText", "onChange", "currentPage", "lastPage", "previousButtonAriaLabel", "nextButtonAriaLabel", "customNextButton", "customPreviousButton", "pageInput", "pageInputProps", "smallScreen", "id", "style"]);
var _e = separateMarginProps(rest),
passProps = _e[1];
var pageInputId = "".concat(id, "-pageInput");
return /*#__PURE__*/React.createElement(HtmlNav, __assign({}, passProps, {
className: classnames(baseClassName, className, (_a = {}, _a[paginationClassNames.smallScreen] = !!smallScreen, _a)),
style: style
}), /*#__PURE__*/React.createElement(HtmlDiv, {
className: paginationClassNames.styleWrapper
}, /*#__PURE__*/React.createElement(HtmlDiv, {
className: paginationClassNames.buttonsWrapper
}, /*#__PURE__*/React.createElement(VisuallyHidden, {
"aria-live": "polite",
"aria-atomic": "true",
id: "".concat(id, "-page-change-announce")
}, ariaPageIndicatorText(this.getCurrentPage(), lastPage)), customPreviousButton || ( /*#__PURE__*/React.createElement(Button, {
id: "".concat(id, "-previous-button"),
className: paginationClassNames.arrowButton,
variant: "secondary",
onClick: this.onLeftButtonClick,
icon: /*#__PURE__*/React.createElement(IconArrowLeft, null),
disabled: this.getCurrentPage() <= 1,
"aria-label": previousButtonAriaLabel,
forwardedRef: this.leftButtonRef
})), /*#__PURE__*/React.createElement(HtmlSpan, {
className: paginationClassNames.pageNumbers
}, pageIndicatorText(this.getCurrentPage(), lastPage)), customNextButton || ( /*#__PURE__*/React.createElement(Button, {
id: "".concat(id, "-next-button"),
className: paginationClassNames.arrowButton,
variant: "secondary",
onClick: this.onRightButtonClick,
disabled: this.getCurrentPage() >= lastPage,
"aria-label": nextButtonAriaLabel,
icon: /*#__PURE__*/React.createElement(IconArrowRight, null),
forwardedRef: this.rightButtonRef
}))), pageInput === true && pageInputProps && ( /*#__PURE__*/React.createElement(HtmlDiv, {
className: paginationClassNames.pageInputWrapper
}, /*#__PURE__*/React.createElement(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;
}(Component);
var StyledPagination = styled(function (props) {
props.theme;
props.globalMargins;
var passProps = __rest(props, ["theme", "globalMargins"]);
return /*#__PURE__*/React.createElement(BasePagination, __assign({}, passProps));
}).withConfig({
componentId: "sc-1sr90lw-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme,
globalMargins = _a.globalMargins,
rest = __rest(_a, ["theme", "globalMargins"]);
var _b = separateMarginProps(rest),
marginProps = _b[0];
var cleanedGlobalMargins = filterDuplicateKeys(globalMargins.pagination, marginProps);
return baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
var propId = props.id,
passProps = __rest(props, ["id"]);
return /*#__PURE__*/React.createElement(SpacingConsumer, null, function (_a) {
var margins = _a.margins;
return /*#__PURE__*/React.createElement(SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React.createElement(AutoId, {
id: propId
}, function (id) {
return /*#__PURE__*/React.createElement(StyledPagination, __assign({
id: id,
theme: suomifiTheme,
globalMargins: margins,
forwardedRef: ref
}, passProps));
});
});
});
});
Pagination.displayName = 'Pagination';
var templateObject_1;
export { Pagination, paginationClassNames };
//# sourceMappingURL=Pagination.js.map