react-misc-toolbox/dist/OrderedList.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  justify-content: space-between;\n'], ['\n  display: flex;\n  justify-content: space-between;\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)([''], ['']),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  margin-top: 1rem;\n'], ['\n  margin-top: 1rem;\n']),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  height: 25rem;\n  overflow: hidden scroll;\n'], ['\n  height: 25rem;\n  overflow: hidden scroll;\n']),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n  width: 4rem;\n'], ['\n  width: 4rem;\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _dateFns = require('date-fns');

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _SlotfulCTCMercury = require('./SlotfulCTCMercury');

var _SlotfulCTCMercury2 = _interopRequireDefault(_SlotfulCTCMercury);

var _Button = require('./Button');

var _Button2 = _interopRequireDefault(_Button);

var _CTCPopover = require('./CTCPopover');

var _CTCPopover2 = _interopRequireDefault(_CTCPopover);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _MONTHNAMEFORMAT_ = 'MMM';
var _YEARNAMEFORMAT_ = 'YYYY';

var FLEX = _styledComponents2.default.div(_templateObject);
var DATE_HEADING = _styledComponents2.default.div(_templateObject2);
var CONTAINER = _styledComponents2.default.div(_templateObject3);
var DROPDOWN = _styledComponents2.default.div(_templateObject4);
var DROPDOWN_BUTTON = (0, _styledComponents2.default)(_Button2.default)(_templateObject5);

var defaultSharedCTCMercuryProps = {
  colors: 'lightsmoke',
  subcolors: 'smoke',
  size: 22.5,
  sizeFontRatio: 0.6,
  mercuryRatio: [10, 20],
  sideTransform: 0.8
};

var compare = function compare(a, b, sortOrder) {
  if (a > b) return sortOrder * -1;
  if (a < b) return sortOrder;
  return 0;
};

var _BIG_ = 10000000000000000;
var _SMALL_ = -10000000000000000;
var _LONG_ = 'zzzzzzzzzzzzzzzzzzzzzzzz';
var _SHORT_ = '';

var OrderedList = function OrderedList(_ref) {
  var externallySetPageSize = _ref.pageSize,
      externallySetPageNumber = _ref.pageNumber,
      _ref$falsyValueSortPr = _ref.falsyValueSortPriority,
      falsyValueSortPriority = _ref$falsyValueSortPr === undefined ? -1 : _ref$falsyValueSortPr,
      sortBy = _ref.sortBy,
      _ref$locale = _ref.locale,
      locale = _ref$locale === undefined ? {
    nextPage: 'Next Page',
    prevPage: 'Previous Page',
    emptyList: 'No items'
  } : _ref$locale,
      sortOrder = _ref.sortOrder,
      _ref$sharedCTCMercury = _ref.sharedCTCMercuryProps,
      sharedCTCMercuryProps = _ref$sharedCTCMercury === undefined ? defaultSharedCTCMercuryProps : _ref$sharedCTCMercury,
      items = _ref.items,
      headers = _ref.headers,
      itemToSlotsConvertFunction = _ref.itemToSlotsConvertFunction,
      children = _ref.children,
      externalSortingFunction = _ref.sortingFunction;

  var localCompare = function localCompare(a, b) {
    return compare(a, b, sortOrder);
  };
  var sortingFunction = void 0;
  var type = headers.find(function (header) {
    return header.key === sortBy;
  }).type;
  if (typeof externalSortingFunction !== 'function') {
    sortingFunction = function sortingFunction(a, b) {
      var aValue = void 0,
          bValue = void 0;

      if (sortBy.includes('.')) {
        var keys = sortBy.split('.');
        aValue = a;
        bValue = b;
        keys.forEach(function (v) {
          aValue = aValue[v];
          bValue = bValue[v];
        });
      } else {
        aValue = a[sortBy];
        bValue = b[sortBy];
      }

      if (type === 'string') {
        var A = aValue ? aValue.toLowerCase() : sortOrder === falsyValueSortPriority ? _LONG_ : _SHORT_;
        var B = bValue ? bValue.toLowerCase() : sortOrder === falsyValueSortPriority ? _LONG_ : _SHORT_;
        return localCompare(A, B);
      }

      if (type === 'number') {
        var _A = aValue ? aValue : sortOrder === falsyValueSortPriority ? _BIG_ : _SMALL_;
        var _B = bValue ? bValue : sortOrder === falsyValueSortPriority ? _BIG_ : _SMALL_;
        return localCompare(_A, _B);
      }
    };
  } else {
    sortingFunction = externalSortingFunction;
  }

  var _useState = (0, _react.useState)(15),
      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
      pageSize = _useState2[0],
      setPageSizeTo = _useState2[1];

  var _useState3 = (0, _react.useState)(0),
      _useState4 = (0, _slicedToArray3.default)(_useState3, 2),
      pageNumber = _useState4[0],
      setPageNumberTo = _useState4[1];

  if (externallySetPageSize) {
    pageSize = externallySetPageSize;
  }

  if (externallySetPageNumber) {
    pageNumber = externallySetPageNumber;
  }

  var pageCount = Math.ceil(items.length / pageSize);

  var goToPageButtons = [];

  var _loop = function _loop(i) {
    goToPageButtons.push(_react2.default.createElement(
      DROPDOWN_BUTTON,
      { key: i, colors: 'neutral', onClick: function onClick() {
          return setPageNumberTo(i);
        } },
      i + 1
    ));
  };

  for (var i = 0; i < pageCount; i++) {
    _loop(i);
  }
  var setPageSizeButtons = [];

  var _loop2 = function _loop2(i) {
    setPageSizeButtons.push(_react2.default.createElement(
      DROPDOWN_BUTTON,
      { key: i, colors: 'neutral', onClick: function onClick() {
          return setPageSizeTo(i);
        } },
      i
    ));
  };

  for (var i = 0; i < 100; i = i + 10) {
    _loop2(i);
  }

  var sortedItems = items.sort(sortingFunction);
  var paginatedItems = sortedItems.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize);

  var renderGoToPage = function renderGoToPage() {
    return _react2.default.createElement(
      _CTCPopover2.default,
      {
        pivotFrom: 'UPLEFT',
        renderTrigger: function renderTrigger(_ref2) {
          var getTriggerProps = _ref2.getTriggerProps;
          return _react2.default.createElement(
            _Button2.default,
            (0, _extends3.default)({}, getTriggerProps()),
            pageNumber + 1,
            ' out of ',
            pageCount
          );
        }
      },
      function (_ref3) {
        var getChildrenProps = _ref3.getChildrenProps;
        return _react2.default.createElement(
          DROPDOWN,
          (0, _extends3.default)({}, getChildrenProps()),
          goToPageButtons
        );
      }
    );
  };

  var renderPageSize = function renderPageSize() {
    return _react2.default.createElement(
      _CTCPopover2.default,
      {
        pivotFrom: 'UPLEFT',
        renderTrigger: function renderTrigger(_ref4) {
          var getTriggerProps = _ref4.getTriggerProps;
          return _react2.default.createElement(
            _Button2.default,
            (0, _extends3.default)({}, getTriggerProps()),
            '(showing ',
            pageNumber * pageSize,
            ' -',
            ' ',
            (pageNumber + 1) * pageSize < items.length ? (pageNumber + 1) * pageSize : items.length,
            ' ',
            'out of ',
            items.length,
            ')'
          );
        }
      },
      function (_ref5) {
        var getChildrenProps = _ref5.getChildrenProps;
        return _react2.default.createElement(
          DROPDOWN,
          (0, _extends3.default)({}, getChildrenProps()),
          setPageSizeButtons
        );
      }
    );
  };

  var renderNextPageButton = function renderNextPageButton() {
    return _react2.default.createElement(
      _Button2.default,
      {
        isDisabled: pageNumber + 1 >= pageCount,
        onClick: function onClick() {
          return setPageNumberTo(pageNumber + 1);
        }
      },
      locale.nextPage
    );
  };

  var renderPrevPageButton = function renderPrevPageButton() {
    return _react2.default.createElement(
      _Button2.default,
      {
        isDisabled: pageNumber === 0,
        onClick: function onClick() {
          return setPageNumberTo(pageNumber - 1);
        }
      },
      locale.prevPage
    );
  };

  var isDate = headers.find(function (header) {
    return header.key === sortBy;
  }).isDate;

  return paginatedItems.length > 0 ? _react2.default.createElement(
    _react.Fragment,
    null,
    _react2.default.createElement(_SlotfulCTCMercury2.default, (0, _extends3.default)({}, sharedCTCMercuryProps, {
      isDisabled: true,
      marginLock: true,
      slots: headers
    })),
    _react2.default.createElement(
      CONTAINER,
      { className: 'orderedlist__container' },
      paginatedItems.map(function (item, i) {
        var slotfulButtons = itemToSlotsConvertFunction(item);

        var monthName = (0, _dateFns.format)(item[sortBy], _MONTHNAMEFORMAT_);
        var yearName = (0, _dateFns.format)(item[sortBy], _YEARNAMEFORMAT_);

        var monthNumber = (0, _dateFns.format)(item[sortBy], 'MM');

        var prevItem = paginatedItems[i - 1];

        var prevMonthName = prevItem && (0, _dateFns.format)(prevItem[sortBy], _MONTHNAMEFORMAT_);
        var prevYearName = prevItem && (0, _dateFns.format)(prevItem[sortBy], _YEARNAMEFORMAT_);

        var renderDate = function renderDate() {
          var isAvailable = typeof item[sortBy] === 'number';
          var renderDate = function renderDate(placeholder, value) {
            return isAvailable ? _react2.default.createElement(
              DATE_HEADING,
              null,
              value
            ) : placeholder ? _react2.default.createElement(
              DATE_HEADING,
              null,
              'pending dates'
            ) : null;
          };
          var yearValue = renderDate(true, yearName);
          var monthValue = renderDate(false, monthNumber + '.' + yearName + ' [' + monthName + ']');
          return _react2.default.createElement(
            _react.Fragment,
            null,
            i === 0 && yearValue,
            i === 0 && monthValue,
            paginatedItems[i - 1] && prevYearName !== yearName && yearValue,
            paginatedItems[i - 1] && prevMonthName !== monthName && monthValue
          );
        };

        return _react2.default.createElement(
          'div',
          { key: i + '_' + item.id, className: 'orderedlist__item' },
          isDate === true && renderDate(),
          children({ item: item, slotfulButtons: slotfulButtons })
        );
      })
    ),
    _react2.default.createElement(
      FLEX,
      null,
      renderPrevPageButton(),
      renderGoToPage(),
      renderPageSize(),
      renderNextPageButton()
    )
  ) : _react2.default.createElement(
    'div',
    null,
    locale.emptyList
  );
};

exports.default = _react2.default.memo(OrderedList);