lucid-ui/dist/esm/components/Paginator/Paginator.js

A UI component library from Xandr.

import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import * as reducers from './Paginator.reducers';
import selectors from './Paginator.selectors';
import { SingleSelectDumb as SingleSelect, } from '../SingleSelect/SingleSelect';
import TextField from '../TextField/TextField';
import { Button } from '../Button/Button';
import ArrowIcon from '../Icon/ArrowIcon/ArrowIcon';
import { buildModernHybridComponent } from '../../util/state-management';
const cx = lucidClassNames.bind('&-Paginator');
const { arrayOf, bool, func, number, object, oneOfType, shape, string } = PropTypes;
const { Option } = SingleSelect;
const defaultProps = {
    hasPageSizeSelector: false,
    isDisabled: false,
    objectLabel: 'Object',
    onPageSelect: _.noop,
    selectedPageIndex: 0,
    selectedPageSizeIndex: 0,
    showTotalObjects: false,
    totalCount: null,
    totalPages: undefined,
    pageSizeOptions: [10, 50, 100],
    SingleSelect: {
        ...SingleSelect.defaultProps,
        selectedIndex: 0,
    },
    TextField: TextField.defaultProps,
};
const Paginator = (props) => {
    const { className, hasPageSizeSelector, isDisabled, objectLabel, objectLabelPlural, onPageSelect = defaultProps.onPageSelect, onPageSizeSelect, pageSizeOptions, selectedPageIndex = defaultProps.selectedPageIndex, selectedPageSizeIndex, showTotalObjects, totalPages = defaultProps.totalPages, totalCount, style, SingleSelect: singleSelectProps, TextField: textFieldProps, } = props;
    const handleTextFieldChange = (pageNum, { props, event, }) => {
        const parsedPageNum = _.parseInt(pageNum);
        if (_.isNaN(parsedPageNum)) {
            return (onPageSelect &&
                onPageSelect(selectedPageIndex, totalPages, { props, event }));
        }
        return (onPageSelect &&
            onPageSelect(parsedPageNum - 1, totalPages, { props, event }));
    };
    const isTextFieldDisabled = isDisabled || totalPages === 1;
    return (React.createElement("div", { style: style, className: cx('&', className) },
        showTotalObjects && _.isNumber(totalCount) && (React.createElement("div", { className: cx('&-total-count') },
            _.isFunction(showTotalObjects)
                ? showTotalObjects(totalCount)
                : totalCount.toLocaleString(),
            ' ',
            totalCount === 1
                ? objectLabel
                : objectLabelPlural || `${objectLabel}s`)),
        hasPageSizeSelector ? (React.createElement("div", { className: cx('&-page-size-container') },
            React.createElement("span", { className: cx('&-rows-per-page-label') }, "Rows per page:"),
            React.createElement(SingleSelect, { ...singleSelectProps, hasReset: false, isInvisible: true, isSelectionHighlighted: false, isDisabled: isDisabled, selectedIndex: selectedPageSizeIndex, onSelect: onPageSizeSelect }, _.map(pageSizeOptions, (option) => (React.createElement(Option, { key: option }, option)))))) : null,
        React.createElement(Button, { onClick: _.partial(onPageSelect, selectedPageIndex - 1, totalPages), isDisabled: isDisabled || selectedPageIndex === 0, kind: 'invisible', hasOnlyIcon: true },
            React.createElement(ArrowIcon, { direction: 'left' })),
        React.createElement(TextField, { lazyLevel: 100, ...textFieldProps, onBlur: handleTextFieldChange, onSubmit: handleTextFieldChange, isDisabled: isTextFieldDisabled, value: selectedPageIndex + 1 }),
        !_.isNil(totalPages) && React.createElement("span", null,
            "of ",
            totalPages.toLocaleString()),
        React.createElement(Button, { kind: 'invisible', onClick: _.partial(onPageSelect, selectedPageIndex + 1, totalPages), isDisabled: isDisabled || selectedPageIndex === (totalPages || 0) - 1, hasOnlyIcon: true },
            React.createElement(ArrowIcon, { direction: 'right' }))));
};
Paginator.displayName = 'Paginator';
Paginator.description = `A paginator that has an optional page size selector.`;
Paginator.categories = ['navigation'];
Paginator.madeFrom = ['ArrowIcon', 'TextField', 'Button', 'SingleSelect'];
Paginator.reducers = reducers;
Paginator.selectors = selectors;
Paginator.defaultProps = defaultProps;
export default buildModernHybridComponent(Paginator, { reducers, selectors });
export { Paginator as PaginatorDumb };
//# sourceMappingURL=Paginator.js.map