2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2019-07-18 13:40:50 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
import Button from "../button";
|
|
|
|
import ComboBox from "../combobox";
|
2021-02-09 10:18:59 +00:00
|
|
|
import { StyledPage, StyledOnPage, StyledPaging } from "./styled-paging";
|
2019-07-18 13:40:50 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const Paging = (props) => {
|
2019-07-29 14:25:04 +00:00
|
|
|
//console.log("Paging render");
|
2020-10-16 13:16:01 +00:00
|
|
|
const {
|
|
|
|
previousLabel,
|
|
|
|
nextLabel,
|
|
|
|
previousAction,
|
|
|
|
nextAction,
|
|
|
|
pageItems,
|
|
|
|
countItems,
|
|
|
|
openDirection,
|
|
|
|
disablePrevious,
|
|
|
|
disableNext,
|
2020-12-21 14:54:34 +00:00
|
|
|
disableHover,
|
2020-10-16 13:16:01 +00:00
|
|
|
selectedPageItem,
|
|
|
|
selectedCountItem,
|
|
|
|
id,
|
|
|
|
className,
|
|
|
|
style,
|
2020-12-23 14:55:03 +00:00
|
|
|
showCountItem,
|
2020-10-16 13:16:01 +00:00
|
|
|
} = props;
|
2019-07-29 14:25:04 +00:00
|
|
|
|
2019-07-30 13:49:33 +00:00
|
|
|
const onSelectPageAction = (option) => {
|
|
|
|
props.onSelectPage(option);
|
2020-10-16 13:16:01 +00:00
|
|
|
};
|
2019-07-30 13:49:33 +00:00
|
|
|
|
2019-08-05 12:53:32 +00:00
|
|
|
const onSelectCountAction = (option) => {
|
2020-10-16 13:16:01 +00:00
|
|
|
props.onSelectCount(option);
|
|
|
|
};
|
2019-07-30 13:49:33 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const setDropDownMaxHeight =
|
|
|
|
pageItems && pageItems.length > 6 ? { dropDownMaxHeight: 200 } : {};
|
2019-08-13 11:14:32 +00:00
|
|
|
|
2019-07-29 14:25:04 +00:00
|
|
|
return (
|
2020-10-16 13:16:01 +00:00
|
|
|
<StyledPaging id={id} className={className} style={style}>
|
2019-12-03 12:25:17 +00:00
|
|
|
<Button
|
2022-07-03 13:25:41 +00:00
|
|
|
className="not-selectable"
|
2022-03-10 12:59:04 +00:00
|
|
|
size="small"
|
2019-12-03 12:25:17 +00:00
|
|
|
scale={true}
|
|
|
|
label={previousLabel}
|
|
|
|
onClick={previousAction}
|
2020-10-16 13:16:01 +00:00
|
|
|
isDisabled={disablePrevious}
|
2020-12-21 14:54:34 +00:00
|
|
|
disableHover={disableHover}
|
2020-10-16 13:16:01 +00:00
|
|
|
/>
|
|
|
|
{pageItems && (
|
2019-07-29 14:25:04 +00:00
|
|
|
<StyledPage>
|
2019-12-03 12:25:17 +00:00
|
|
|
<ComboBox
|
2022-07-06 12:12:02 +00:00
|
|
|
isDisabled={disablePrevious && disableNext}
|
2019-12-24 11:14:47 +00:00
|
|
|
className="manualWidth"
|
2019-12-03 12:25:17 +00:00
|
|
|
directionY={openDirection}
|
|
|
|
options={pageItems}
|
2019-09-26 09:08:39 +00:00
|
|
|
onSelect={onSelectPageAction}
|
2021-10-12 15:22:31 +00:00
|
|
|
scaledOptions={pageItems.length < 6}
|
2019-08-14 14:24:01 +00:00
|
|
|
selectedOption={selectedPageItem}
|
2020-10-16 13:16:01 +00:00
|
|
|
{...setDropDownMaxHeight}
|
|
|
|
/>
|
2019-07-29 14:25:04 +00:00
|
|
|
</StyledPage>
|
2020-10-16 13:16:01 +00:00
|
|
|
)}
|
2019-12-03 12:25:17 +00:00
|
|
|
<Button
|
2022-07-03 13:25:41 +00:00
|
|
|
className="not-selectable"
|
2022-03-10 12:59:04 +00:00
|
|
|
size="small"
|
2019-12-03 12:25:17 +00:00
|
|
|
scale={true}
|
|
|
|
label={nextLabel}
|
|
|
|
onClick={nextAction}
|
2020-10-16 13:16:01 +00:00
|
|
|
isDisabled={disableNext}
|
2020-12-21 14:54:34 +00:00
|
|
|
disableHover={disableHover}
|
2020-10-16 13:16:01 +00:00
|
|
|
/>
|
2020-12-23 14:55:03 +00:00
|
|
|
{showCountItem
|
|
|
|
? countItems && (
|
|
|
|
<StyledOnPage>
|
|
|
|
<ComboBox
|
|
|
|
className="hideDisabled"
|
|
|
|
directionY={openDirection}
|
|
|
|
directionX="right"
|
|
|
|
options={countItems}
|
2021-10-12 15:22:31 +00:00
|
|
|
scaledOptions={true}
|
2020-12-23 14:55:03 +00:00
|
|
|
onSelect={onSelectCountAction}
|
|
|
|
selectedOption={selectedCountItem}
|
|
|
|
/>
|
|
|
|
</StyledOnPage>
|
|
|
|
)
|
|
|
|
: null}
|
2019-07-29 14:25:04 +00:00
|
|
|
</StyledPaging>
|
|
|
|
);
|
2019-07-18 13:40:50 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
Paging.propTypes = {
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Label for previous button */
|
2019-07-29 14:25:04 +00:00
|
|
|
previousLabel: PropTypes.string,
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Label for next button */
|
2019-08-05 12:53:32 +00:00
|
|
|
nextLabel: PropTypes.string,
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Action for previous button */
|
2019-08-14 12:54:16 +00:00
|
|
|
previousAction: PropTypes.func,
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Action for next button */
|
2019-08-05 12:53:32 +00:00
|
|
|
nextAction: PropTypes.func,
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Set previous button disabled */
|
2019-08-14 12:54:16 +00:00
|
|
|
disablePrevious: PropTypes.bool,
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Set next button disabled */
|
2019-07-29 14:25:04 +00:00
|
|
|
disableNext: PropTypes.bool,
|
2020-12-21 14:54:34 +00:00
|
|
|
disableHover: PropTypes.bool,
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Initial value for pageItems */
|
2019-08-14 14:24:01 +00:00
|
|
|
selectedPageItem: PropTypes.object,
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Initial value for countItems */
|
2019-08-14 14:24:01 +00:00
|
|
|
selectedCountItem: PropTypes.object,
|
2019-08-14 12:54:16 +00:00
|
|
|
|
2019-07-30 11:37:25 +00:00
|
|
|
onSelectPage: PropTypes.func,
|
2019-09-09 14:32:47 +00:00
|
|
|
onSelectCount: PropTypes.func,
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Paging combo box items */
|
2019-09-09 14:32:47 +00:00
|
|
|
pageItems: PropTypes.array,
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Items per page combo box items */
|
2019-09-09 14:32:47 +00:00
|
|
|
countItems: PropTypes.array,
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Indicates opening direction of combo box */
|
2021-09-13 09:56:02 +00:00
|
|
|
openDirection: PropTypes.oneOf(["bottom", "top", "both"]),
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Accepts class */
|
2019-12-03 12:25:17 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Accepts id */
|
2019-12-03 12:25:17 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-10 07:57:15 +00:00
|
|
|
/** Accepts css style */
|
2020-10-16 13:16:01 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2020-12-23 14:55:03 +00:00
|
|
|
|
|
|
|
showCountItem: PropTypes.bool.isRequired,
|
2020-10-16 13:16:01 +00:00
|
|
|
};
|
2019-07-18 13:40:50 +00:00
|
|
|
|
|
|
|
Paging.defaultProps = {
|
2019-07-29 14:25:04 +00:00
|
|
|
disablePrevious: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
disableNext: false,
|
2020-12-21 14:54:34 +00:00
|
|
|
disableHover: false,
|
2020-12-23 14:55:03 +00:00
|
|
|
showCountItem: true,
|
2020-10-16 13:16:01 +00:00
|
|
|
};
|
2019-07-18 13:40:50 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
export default Paging;
|