Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/ui / dist / components / presets / Pagination / renderProps.js
Size: Mime:
"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