Repository URL to install this package:
|
Version:
2.8.4 ▾
|
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const words_1 = require("../../../words");
const exotic_1 = require("exotic");
const MaterialIcon_1 = require("../../atoms/MaterialIcon");
const styled_1 = require("./styled");
function resetPaginator(state) {
let paginator = 1;
state.disableIcon('left');
state.enableIcon('right');
state.setCount(paginator);
}
/**
* Handles select dropdown input change
*/
function handleDropdownChange(event, item, state, props) {
const {
onDropdownChange
} = props; // console.info('[Pagination] dropdownChange()')
// console.dir(state)
// This is for reseting the pagination to 1 whenever the dropdown value (i.e products per page ) changes
resetPaginator(state);
if (exotic_1.isFunction(onDropdownChange)) {
const changeArgs = {
type: 'dropdown',
state,
event,
item
}; // console.info('[Pagination] props.onChange() ==== onDropDownChange()')
// console.dir(changeArgs)
onDropdownChange(changeArgs);
}
}
/**
* Handles pagination input change
*/
function handlePaginationInputChange(event, props, state) {
const {
paginationLimit,
onPaginationInputChange
} = props;
let paginator = event.target.value;
paginator = paginator === '' ? '' : exotic_1.toNumber(paginator);
switch (true) {
case paginator === 1:
resetPaginator(state);
break;
case paginator > 1 && paginator < paginationLimit:
state.enableIcon();
state.setCount(paginator);
break;
case paginator === paginationLimit:
state.disableIcon('right');
state.enableIcon('left');
state.setCount(paginator);
break;
case paginator === '':
state.setCount(paginator);
break;
default:
resetPaginator(state);
break;
}
if (exotic_1.isFunction(onPaginationInputChange)) {
const changeArgs = {
type: 'input',
value: state.count,
state,
event
}; // console.info('[Pagination] props.onChange() ==== onPaginationInputChange()')
// console.dir(changeArgs)
onPaginationInputChange(changeArgs);
}
}
/**
* Handles pagination input blur
*/
function handlePaginationInputBlur(event, props, state) {
const {
onPaginationInputBlur
} = props;
let value = event.target.value; // value = (value === '' ? '' : toNumber(value))
// console.info('[Pagination] inputBlur()')
if (value === '') {
resetPaginator(state);
}
if (exotic_1.isFunction(onPaginationInputBlur)) {
const changeArgs = {
type: 'input',
value: state.count,
state,
event
}; // console.info('[Pagination] props.onBlur() ==== onPaginationInputBlur()')
// console.dir(changeArgs)
onPaginationInputBlur(changeArgs);
}
}
/**
* Handle Pagination Previous Button Click
*/
function defaultOnDecrement(props, state) {
state.decrementCount();
}
exports.defaultOnDecrement = defaultOnDecrement;
/**
* Handle Pagination Next Button Click
*/
function defaultOnIncrement(props, state) {
state.incrementCount(props.paginationLimit);
}
exports.defaultOnIncrement = defaultOnIncrement;
/**
* Renders right arrow
* @param props : PaginationProps
* @param state : PaginationState
*/
function defaultRenderRightButton(props, state) {
const increment = event => props.onIncrement(props, state);
return react_1.default.createElement(styled_1.RightPaginationButton, {
onClick: increment,
isDisabled: state.shouldDisableRightIcon,
"aria-label": words_1.wording.triggerNext
}, react_1.default.createElement(MaterialIcon_1.MaterialIcon, {
type: "right"
}));
}
exports.defaultRenderRightButton = defaultRenderRightButton;
/**
* Renders pagination count input with labels
* @param props : PaginationProps
* @param state : PaginationState
*/
function defaultRenderPaginationInput(props, state) {
const onChange = event => handlePaginationInputChange(event, props, state);
const onBlur = event => handlePaginationInputBlur(event, props, state);
return react_1.default.createElement(styled_1.CountSection, null, react_1.default.createElement(styled_1.PrimaryText, null, words_1.wording.pageLabel), react_1.default.createElement(styled_1.StyledPrimaryCount, {
value: state.count,
onChange: onChange,
onBlur: onBlur
}), react_1.default.createElement(styled_1.SecondaryText, null, words_1.wording.ofLabel), react_1.default.createElement(styled_1.StyledSecondaryCount, null, props.paginationLimit));
}
exports.defaultRenderPaginationInput = defaultRenderPaginationInput;
/**
* Renders left arrow
* @param props : PaginationProps
* @param state : PaginationState
*/
function defaultRenderLeftButton(props, state) {
const decrement = event => props.onDecrement(props, state);
return react_1.default.createElement(styled_1.LeftPaginationButton, {
onClick: decrement,
isDisabled: state.shouldDisableLeftIcon,
"aria-label": words_1.wording.triggerPrevious
}, react_1.default.createElement(MaterialIcon_1.MaterialIcon, {
type: "left"
}));
}
exports.defaultRenderLeftButton = defaultRenderLeftButton;
/**
* Renders the standalone pagination wrapper
* @param props : PaginationProps
* @param state : PaginationState
*/
function defaultRenderPaginationWithArrows(props, state) {
const {
renderLeftButton,
renderPaginationInput,
renderRightButton
} = props;
const leftArrowView = renderLeftButton(props, state);
const rightArrowView = renderRightButton(props, state);
const paginationInputView = renderPaginationInput(props, state);
return react_1.default.createElement(react_1.default.Fragment, null, leftArrowView, paginationInputView, rightArrowView);
}
exports.defaultRenderPaginationWithArrows = defaultRenderPaginationWithArrows;
/**
* renders select dropdown component
*/
function defaultRenderDropDown(props, state) {
const onChange = (event, item) => handleDropdownChange(event, item, state, props);
const paginationProps = {
// state: props.state,
// @todo !!! this needs to have these in props
// @todo person who made pagination preset
// ^ need to test the presets
// the same as someone using it functionally in the story
/* isDisabled: props.isDisabled, */
onChange: onChange,
// onClickOutside: props.onClickOutside,
options: props.list
};
return react_1.default.createElement(styled_1.PaginationDropDown, Object.assign({}, paginationProps));
}
exports.defaultRenderDropDown = defaultRenderDropDown;
/**
* renders pagination wrapper
*/
function defaultRenderWrapper(props, state) {
console.log('[Pagination] defaultRenderWrapper');
const {
children,
className
} = props;
return react_1.default.createElement(styled_1.PaginationWrapper, {
className: className
}, children);
}
exports.defaultRenderWrapper = defaultRenderWrapper; //# sourceMappingURL=renderProps.js.map