@arun-s-aot/formio-react/lib/components/Grid.js

React renderer for formsflow form.io forms.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _get2 = _interopRequireDefault(require("lodash/get"));
var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
var _isString2 = _interopRequireDefault(require("lodash/isString"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _constants = require("../constants");
var _types = require("../types");
var _Pagination = _interopRequireDefault(require("./Pagination"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function normalizePageSize(pageSize) {
  if ((0, _isObject2.default)(pageSize)) {
    return pageSize;
  }
  if (pageSize === _types.AllItemsPerPage) {
    return {
      label: 'All',
      value: 999999
    };
  }
  return {
    label: pageSize,
    value: pageSize
  };
}
const renderPagination = _ref => {
  let {
    pages,
    onPage
  } = _ref;
  return pages && onPage;
};
const renderPageSizeSelector = _ref2 => {
  let {
    pageSize,
    pageSizes,
    onPageSizeChanged
  } = _ref2;
  return pageSize && pageSizes && pageSizes.length && onPageSizeChanged;
};
const renderItemCounter = _ref3 => {
  let {
    firstItem,
    lastItem,
    total
  } = _ref3;
  return firstItem && lastItem && total;
};
const renderFooter = props => renderPagination(props) || renderItemCounter(props);
function Grid(props) {
  const {
    Cell = _ref4 => {
      let {
        column,
        row
      } = _ref4;
      return /*#__PURE__*/_react.default.createElement("span", null, (0, _get2.default)(row, column.key, ''));
    },
    activePage = 1,
    emptyText = 'No data found',
    firstItem = 0,
    lastItem = 0,
    onAction = () => {},
    onPage = () => {},
    onPageSizeChanged = () => {},
    onSort = () => {},
    pageNeighbours = 1,
    pageSize = 0,
    pageSizes = _constants.defaultPageSizes,
    pages = 0,
    sortOrder = '',
    total = 0,
    columns,
    items
  } = props;
  const normalizedPageSizes = pageSizes.map(normalizePageSize);
  const getColumn = column => {
    const {
      key,
      sort = false,
      title = '',
      width
    } = column;
    const className = `col col-md-${width}`;
    const columnProps = {
      key,
      className
    };
    if (!title) {
      return /*#__PURE__*/_react.default.createElement("div", columnProps);
    }
    if (!sort) {
      return /*#__PURE__*/_react.default.createElement("div", columnProps, /*#__PURE__*/_react.default.createElement("strong", null, title));
    }
    const sortKey = (0, _isString2.default)(sort) ? sort : key;
    const ascSort = sortKey;
    const descSort = `-${sortKey}`;
    let sortClass = '';
    if (sortOrder === ascSort) {
      sortClass = 'fa fa-caret-up bi bi-caret-up';
    } else if (sortOrder === descSort) {
      sortClass = 'fa fa-caret-down bi bi-caret-down';
    }
    return /*#__PURE__*/_react.default.createElement("div", columnProps, /*#__PURE__*/_react.default.createElement("span", {
      style: {
        cursor: 'pointer'
      },
      onClick: () => onSort(column)
    }, /*#__PURE__*/_react.default.createElement("strong", null, title, " ", /*#__PURE__*/_react.default.createElement("span", {
      className: sortClass
    }))));
  };
  const getItem = item => /*#__PURE__*/_react.default.createElement("li", {
    className: "list-group-item",
    key: item._id
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "row",
    onClick: () => onAction(item, 'row')
  }, columns.map(column => /*#__PURE__*/_react.default.createElement("div", {
    key: column.key,
    className: `col col-md-${column.width}`
  }, /*#__PURE__*/_react.default.createElement(Cell, {
    row: item,
    column: column
  })))));
  const PageSizeSelector = () => /*#__PURE__*/_react.default.createElement("div", {
    className: "col-auto"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "row align-items-center"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "col-auto"
  }, /*#__PURE__*/_react.default.createElement("select", {
    className: "form-control",
    value: pageSize,
    onChange: event => onPageSizeChanged(event.target.value)
  }, normalizedPageSizes.map(_ref5 => {
    let {
      label,
      value
    } = _ref5;
    return /*#__PURE__*/_react.default.createElement("option", {
      key: value,
      value: value
    }, label);
  }))), /*#__PURE__*/_react.default.createElement("span", {
    className: "col-auto"
  }, "items per page")));
  const FooterPagination = () => /*#__PURE__*/_react.default.createElement("div", {
    className: "col-auto"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "row align-items-center"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "col-auto"
  }, /*#__PURE__*/_react.default.createElement(_Pagination.default, {
    pages: pages,
    activePage: activePage,
    pageNeighbours: pageNeighbours,
    prev: "Previous",
    next: "Next",
    onSelect: onPage
  })), renderPageSizeSelector(props) ? /*#__PURE__*/_react.default.createElement(PageSizeSelector, null) : null));
  const ItemCounter = () => /*#__PURE__*/_react.default.createElement("div", {
    className: "col-auto ml-auto"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "item-counter float-end"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "page-num"
  }, firstItem, " - ", lastItem), ' ', "/ ", total, " total"));
  const Footer = () => /*#__PURE__*/_react.default.createElement("li", {
    className: "list-group-item"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "row align-items-center"
  }, renderPagination(props) ? /*#__PURE__*/_react.default.createElement(FooterPagination, null) : null, renderItemCounter(props) ? /*#__PURE__*/_react.default.createElement(ItemCounter, null) : null));
  return /*#__PURE__*/_react.default.createElement("div", null, items.length ? /*#__PURE__*/_react.default.createElement("ul", {
    className: "list-group list-group-striped"
  }, /*#__PURE__*/_react.default.createElement("li", {
    className: "list-group-item list-group-header hidden-xs hidden-md"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "row"
  }, columns.map(getColumn))), items.map(getItem), renderFooter(props) ? /*#__PURE__*/_react.default.createElement(Footer, null) : null) : /*#__PURE__*/_react.default.createElement("div", null, emptyText));
}
Grid.propTypes = {
  Cell: _propTypes.default.func,
  activePage: _propTypes.default.number,
  columns: _propTypes.default.array.isRequired,
  emptyText: _propTypes.default.string,
  firstItem: _propTypes.default.number,
  items: _propTypes.default.array.isRequired,
  lastItem: _propTypes.default.number,
  onAction: _propTypes.default.func,
  onPage: _propTypes.default.func,
  onPageSizeChanged: _propTypes.default.func,
  onSort: _propTypes.default.func,
  pageNeighbours: _propTypes.default.number,
  pageSize: _propTypes.default.number,
  pageSizes: _types.PageSizes,
  pages: _propTypes.default.number,
  sortOrder: _propTypes.default.string,
  total: _propTypes.default.number
};
var _default = exports.default = Grid;