fk-react-ui-components/lib/Paginator/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

/**
 * Created by sarunathan.s
 */
import React from "react";
import { PaginatorContainer, PageContainer, ItemsContainer, SelectContainer } from "./style.js";
import Icon from "../StyleComponents/icon";
import Select from "../FormElements/Select/Select";
import _ from "lodash";

class Paginator extends React.Component {

    constructor(props) {
        super(props);
        this.prevPage = this.prevPage.bind(this);
        this.nextPage = this.nextPage.bind(this);
        this.pageResize = this.pageResize.bind(this);
        let pageSize = this.props.pageSize || 10;
        this.state = {
            startItem: 1,
            pageSize: pageSize,
            endItem: pageSize > this.props.totalItems ? this.props.totalItems : pageSize,
            totalPages: Math.ceil(this.props.totalItems / pageSize),
            totalItems: this.props.totalItems,
            currentPage: this.props.initialPageNo || 1
        };
    }

    prevPage() {
        if (this.state.currentPage > 1) {
            this.setState(state => {
                return {
                    startItem: state.startItem - state.pageSize,
                    endItem: state.startItem - 1,
                    currentPage: --state.currentPage
                };
            });
        }
    }

    nextPage() {
        if (this.state.currentPage < this.state.totalPages) {
            this.setState(state => {
                return {
                    startItem: state.startItem + state.pageSize,
                    endItem: state.endItem + state.pageSize > state.totalItems ? state.totalItems : state.endItem + state.pageSize,
                    currentPage: ++state.currentPage
                };
            });
        }
    }

    pageResize(e) {
        let pageSize = parseInt(e.target.value);
        this.setState({
            startItem: 1,
            endItem: pageSize > this.state.totalItems ? this.state.totalItems : pageSize,
            currentPage: 1,
            pageSize: pageSize,
            totalPages: Math.ceil(this.props.totalItems / pageSize)
        });
    }

    render() {
        return React.createElement(
            "div",
            { className: "list-with-paginator" },
            this.props.children,
            React.createElement(
                PaginatorContainer,
                { className: "paginator-container" },
                React.createElement(
                    SelectContainer,
                    null,
                    React.createElement(
                        Select,
                        { onChange: this.pageResize, value: this.state.pageSize, initialValue: this.props.pageSize, className: "page-size-selector" },
                        React.createElement(
                            "option",
                            { value: 10 },
                            "10"
                        ),
                        React.createElement(
                            "option",
                            { value: 20 },
                            "20"
                        ),
                        React.createElement(
                            "option",
                            { value: 50 },
                            "50"
                        )
                    ),
                    " Items per page"
                ),
                React.createElement(
                    "i",
                    { className: "seperator" },
                    "|"
                ),
                React.createElement(
                    ItemsContainer,
                    null,
                    this.state.startItem,
                    " - ",
                    this.state.endItem,
                    " of ",
                    this.state.totalItems,
                    " items"
                ),
                React.createElement(
                    PageContainer,
                    null,
                    this.state.currentPage,
                    " of ",
                    this.state.totalPages,
                    " pages"
                ),
                React.createElement(Icon, { onClick: this.prevPage, className: "fa fa-angle-left left-pagination" }),
                React.createElement(Icon, { onClick: this.nextPage, className: "fa fa-angle-right right-pagination" })
            )
        );
    }

    componentDidMount() {
        this.props.onChange({
            pageNo: this.state.currentPage,
            pageSize: this.state.pageSize
        });
    }

    componentWillReceiveProps(nextProps) {
        if (!_.isEqual(nextProps, this.props)) {
            const pageSize = nextProps.pageSize || 10;
            this.setState({
                pageSize,
                endItem: this.state.currentPage * pageSize > nextProps.totalItems ? nextProps.totalItems : this.state.currentPage * pageSize,
                totalPages: Math.ceil(nextProps.totalItems / pageSize),
                totalItems: nextProps.totalItems
            });
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if (!_.isEqual(prevState, this.state) && this.props.onChange) {
            this.props.onChange({
                pageNo: this.state.currentPage,
                pageSize: this.state.pageSize
            });
        }
    }
}

export default Paginator;
//# sourceMappingURL=index.js.map