@krowdy-ui/views/TableGroup/TableGroup.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.styles = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styles = require("@krowdy-ui/styles");

var _core = require("@krowdy-ui/core");

var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));

var _Star = _interopRequireDefault(require("@material-ui/icons/Star"));

var _StarBorder = _interopRequireDefault(require("@material-ui/icons/StarBorder"));

var _dxReactGrid = require("@devexpress/dx-react-grid");

var _dxReactGridMaterialUi = require("@devexpress/dx-react-grid-material-ui");

var _Autocomplete = _interopRequireDefault(require("@material-ui/lab/Autocomplete"));

var _excluded = ["row"],
    _excluded2 = ["value"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var styles = function styles(theme) {
  return {
    containerFullwidth: {
      height: '100%'
    },
    containerHeaderTable: {
      padding: theme.spacing(2)
    },
    containerSearch: {
      display: 'flex',
      justifyContent: 'space-between'
    },
    contetPagination: {
      display: 'flex',
      justifyContent: 'flex-end',
      padding: 20
    },
    gridTableChip: {
      '&:focus': {
        '& > div': {
          '&:focus': {
            background: '#F3FBFF'
          }
        }
      },
      '&:hover': {
        background: '#F3FBFF'
      },
      background: '#F3FBFF',
      border: '1px solid #80DBFF'
    },
    gridTableGroupingEmpty: {
      '& > div': {
        background: 'transparent',
        border: "solid 1px ".concat(theme.palette.primary.main),
        color: '#595959'
      },
      alignItems: 'center',
      display: 'flex',
      height: '32px',
      marginTop: theme.spacing(1)
    },
    gridTableHeader: {
      '& svg': {
        color: "".concat(theme.palette.primary.main, " !important")
      },
      '& th': {},
      fontSize: '0.875rem',
      fontWeight: 'bold',
      padding: theme.spacing(1, 2)
    },
    gridTableHeaderGroup: {
      '& > td': {
        background: '#E6E9F0'
      },
      '& > td > div': {
        background: '#E6E9F0',
        color: '#262626',
        fontWeight: 'bold'
      },
      background: '#E6E9F0'
    },
    gridTableHeaderRoot: {
      background: '#F2F4F7'
    },
    gridTableSearch: {
      background: '#fff',
      padding: theme.spacing(2),
      paddingBottom: 0
    },
    gridTableToolbar: {
      display: 'flex',
      flexDirection: 'column',
      padding: theme.spacing(2)
    },
    inputSearch: {
      '& * input': {
        fontSize: 14,
        padding: '12px 10px !important'
      },
      '& > div': {
        padding: '0 14px 0 0 !important'
      },
      margin: '2px 0'
    },
    paperRoot: {
      '& > div:first-child': {
        height: '100%'
      },
      '& > div:first-child > div:nth-child(2)': {
        flex: 1,
        overflow: 'auto'
      },
      height: '100%'
    },
    searchIcon: {
      cursor: 'pointer'
    },
    tableContainer: {
      display: 'flex',
      flexDirection: 'column',
      height: '100%'
    }
  };
};

exports.styles = styles;

var formatColumnsExtension = function formatColumnsExtension(columns) {
  return columns.map(function (column) {
    if (column.type) if (column.type === 'star') column.width = 160;
    return (0, _extends2["default"])({}, column, {
      columnName: column.key,
      title: column.label
    });
  });
};

var formatColumns = function formatColumns(columns) {
  return columns.map(function (column) {
    return (0, _extends2["default"])({}, column, {
      name: column.key,
      title: column.label
    });
  });
};

var columnsDraggableDisable = function columnsDraggableDisable(columns) {
  return columns.map(function (column) {
    return {
      columnName: column.key,
      groupingEnabled: column.draggable
    };
  });
};

var sortingFormat = function sortingFormat(sortings) {
  return sortings.map(function (sorting) {
    return {
      columnName: sorting.orderBy,
      direction: sorting.sort
    };
  });
};

var sortingFormatReverse = function sortingFormatReverse(sortings) {
  return sortings.map(function (sorting) {
    return {
      orderBy: sorting.columnName,
      sort: sorting.direction
    };
  });
};

var getRowId = function getRowId(row) {
  return row._id;
};

var TableRow = function TableRow(_ref, callback) {
  var row = _ref.row,
      restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_dxReactGridMaterialUi.Table.Row, (0, _extends2["default"])({}, restProps, {
    onClick: function onClick() {
      return callback(row._id);
    },
    style: {
      cursor: 'pointer'
    }
  }));
};

var StartCell = function StartCell(_ref2) {
  var value = _ref2.value,
      restProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
  var column = restProps.column;
  return /*#__PURE__*/_react["default"].createElement(_dxReactGridMaterialUi.Table.Cell, restProps, /*#__PURE__*/_react["default"].createElement("span", null, value ? [1, 2, 3, 4, 5].map(function (currentValue) {
    return currentValue <= value ? /*#__PURE__*/_react["default"].createElement(_Star["default"], {
      color: "primary",
      key: "star-".concat(column._id, "-").concat(currentValue)
    }) : /*#__PURE__*/_react["default"].createElement(_StarBorder["default"], {
      color: "primary",
      key: "star-".concat(column._id, "-").concat(currentValue)
    });
  }) : ''));
};

var TableCell = function TableCell(props) {
  var column = props.column;
  if (column.type === 'star') return /*#__PURE__*/_react["default"].createElement(StartCell, props);
  return /*#__PURE__*/_react["default"].createElement(_dxReactGridMaterialUi.Table.Cell, props);
};

var _ref3 = /*#__PURE__*/_react["default"].createElement(_Search["default"], null);

var _ref4 = /*#__PURE__*/_react["default"].createElement(_dxReactGridMaterialUi.DragDropProvider, null);

var _ref5 = /*#__PURE__*/_react["default"].createElement(_dxReactGrid.IntegratedSorting, null);

var _ref7 = /*#__PURE__*/_react["default"].createElement(_dxReactGridMaterialUi.Toolbar, null);

var TableGroup = function TableGroup(props) {
  var classes = props.classes,
      _props$rows = props.rows,
      rows = _props$rows === void 0 ? [] : _props$rows,
      _props$columns = props.columns,
      columns = _props$columns === void 0 ? [] : _props$columns,
      _props$groupingData = props.groupingData,
      groupingData = _props$groupingData === void 0 ? [] : _props$groupingData,
      _props$changeGrouping = props.changeGrouping,
      changeGrouping = _props$changeGrouping === void 0 ? function () {} : _props$changeGrouping,
      _props$sorting = props.sorting,
      sorting = _props$sorting === void 0 ? false : _props$sorting,
      _props$grouping = props.grouping,
      grouping = _props$grouping === void 0 ? false : _props$grouping,
      _props$sortingData = props.sortingData,
      sortingData = _props$sortingData === void 0 ? [] : _props$sortingData,
      _props$changeSorting = props.changeSorting,
      changeSorting = _props$changeSorting === void 0 ? function () {} : _props$changeSorting,
      _props$withPagination = props.withPagination,
      withPagination = _props$withPagination === void 0 ? false : _props$withPagination,
      _props$withHeader = props.withHeader,
      withHeader = _props$withHeader === void 0 ? false : _props$withHeader,
      _props$withSearch = props.withSearch,
      withSearch = _props$withSearch === void 0 ? false : _props$withSearch,
      _props$onChangePerPag = props.onChangePerPage,
      onChangePerPage = _props$onChangePerPag === void 0 ? function () {} : _props$onChangePerPag,
      _props$withAutocomple = props.withAutocomplete,
      withAutocomplete = _props$withAutocomple === void 0 ? false : _props$withAutocomple,
      _props$searchSuggesti = props.searchSuggestions,
      searchSuggestions = _props$searchSuggesti === void 0 ? [] : _props$searchSuggesti,
      _props$onHandleSearch = props.onHandleSearch,
      onHandleSearch = _props$onHandleSearch === void 0 ? function () {} : _props$onHandleSearch,
      _props$groupingDataTe = props.groupingDataTemp,
      groupingDataTemp = _props$groupingDataTe === void 0 ? null : _props$groupingDataTe,
      _props$pagination = props.pagination,
      pagination = _props$pagination === void 0 ? {} : _props$pagination,
      _props$limitDragable = props.limitDragable,
      limitDragable = _props$limitDragable === void 0 ? 1 : _props$limitDragable,
      _props$onChangePage = props.onChangePage,
      onChangePage = _props$onChangePage === void 0 ? function () {} : _props$onChangePage,
      _props$onClickRow = props.onClickRow,
      onClickRow = _props$onClickRow === void 0 ? function () {} : _props$onClickRow,
      _props$onHandleSelect = props.onHandleSelectAutocomplete,
      onHandleSelectAutocomplete = _props$onHandleSelect === void 0 ? function () {} : _props$onHandleSelect;

  var _useState = (0, _react.useState)(formatColumns(columns)),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      columnsData = _useState2[0],
      setColumnData = _useState2[1];

  var _useState3 = (0, _react.useState)(formatColumnsExtension(columns)),
      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
      columnsDataExtension = _useState4[0],
      setColumnsDataExtension = _useState4[1];

  var _useState5 = (0, _react.useState)(sortingFormat(sortingData)),
      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
      sortingDataFormat = _useState6[0],
      setSortingFormat = _useState6[1];

  var _useState7 = (0, _react.useState)(columnsDraggableDisable(columns)),
      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
      groupingStateColumnExtensions = _useState8[0],
      setGroupingStateColumnExtensions = _useState8[1];

  var _useState9 = (0, _react.useState)([]),
      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
      expandData = _useState10[0],
      setExpandData = _useState10[1];

  var inputSearch = (0, _react.useRef)(null); // effects

  (0, _react.useEffect)(function () {
    if (columns.length) {
      setColumnData(formatColumns(columns));
      setGroupingStateColumnExtensions(columnsDraggableDisable(columns));
      setColumnsDataExtension(formatColumnsExtension(columns));
    }
  }, [columns]);
  (0, _react.useEffect)(function () {
    if (sortingData.length) setSortingFormat(sortingFormat(sortingData));
  }, [sortingData]); // actions

  var getChildGroups = function getChildGroups(groups) {
    return groups.map(function (group) {
      return {
        childRows: group.items,
        key: group.key
      };
    });
  };

  var setExpandedGroups = function setExpandedGroups(value) {
    // recibe un array de string ["Confirmed", "Completed"]
    setExpandData(value);
  };

  var _handleSearchValidate = function _handleSearchValidate(e) {
    var value = e.target.value;
    if (e.keyCode === 13) onHandleSearch(value);
  };

  var onChangeSorting = function onChangeSorting(value) {
    // if(multiSorting)
    //   if(sortingData.length) {
    //     const data = [
    //       ...sortingDataFormat.map(item => item.columnName === value[0].columnName ? value[0] : item),
    //       ...value
    //     ]
    //     changeSorting(sortingFormatReverse(data))
    //   } else {
    //   }
    changeSorting(sortingFormatReverse(value));
  };

  var onChangeGrouping = function onChangeGrouping(value) {
    if (rows.length) if (value.length <= limitDragable) changeGrouping(value);
  };

  return /*#__PURE__*/_react["default"].createElement(_core.Paper, {
    classes: {
      root: classes.paperRoot
    },
    style: {
      position: 'relative'
    },
    variant: "outlined"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.tableContainer
  }, withHeader ? /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.containerHeaderTable
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.containerSearch
  }, withSearch ? withAutocomplete ? /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
    freeSolo: true,
    noOptionsText: "No hay coincidencias",
    onChange: onHandleSelectAutocomplete,
    options: searchSuggestions.map(function (option) {
      return option.title;
    }),
    popupIcon: _ref3,
    renderInput: function renderInput(params) {
      return /*#__PURE__*/_react["default"].createElement(_core.TextField, (0, _extends2["default"])({}, params, {
        className: classes.inputSearch,
        fullWidth: true,
        InputLabelProps: {
          shrink: false
        },
        InputProps: (0, _extends2["default"])({}, params.InputProps, {
          endAdornment: /*#__PURE__*/_react["default"].createElement(_core.InputAdornment, {
            position: "end"
          }, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
            className: classes.searchIcon,
            onClick: function onClick() {
              return onHandleSearch(inputSearch.current.value);
            }
          }))
        }),
        inputRef: inputSearch,
        onKeyUp: _handleSearchValidate,
        placeholder: "Buscar",
        variant: "outlined"
      }));
    },
    style: {
      width: 400
    }
  }) : /*#__PURE__*/_react["default"].createElement(_core.TextField, {
    className: classes.inputSearch,
    InputLabelProps: {
      shrink: false
    },
    InputProps: {
      endAdornment: /*#__PURE__*/_react["default"].createElement(_core.InputAdornment, {
        position: "end"
      }, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
        className: classes.searchIcon,
        onClick: function onClick() {
          return onHandleSearch(inputSearch.current.value);
        }
      }))
    },
    inputRef: inputSearch,
    onKeyUp: _handleSearchValidate,
    placeholder: "Buscar",
    style: {
      width: 400
    },
    variant: "outlined"
  }) : null)) : null, /*#__PURE__*/_react["default"].createElement(_dxReactGridMaterialUi.Grid, {
    columns: columnsData,
    getRowId: getRowId,
    rows: rows
  }, /*#__PURE__*/_react["default"].createElement(_dxReactGrid.SortingState, {
    onSortingChange: onChangeSorting,
    sorting: sortingDataFormat
  }), grouping && _ref4, /*#__PURE__*/_react["default"].createElement(_dxReactGrid.GroupingState // expandedGroups={[ 'Confirmed' ]}
  , {
    columnExtensions: groupingStateColumnExtensions,
    grouping: groupingData,
    onExpandedGroupsChange: setExpandedGroups,
    onGroupingChange: onChangeGrouping
  }), /*#__PURE__*/_react["default"].createElement(_dxReactGrid.CustomGrouping, {
    expandedGroups: expandData,
    getChildGroups: getChildGroups,
    grouping: groupingDataTemp
  }), _ref5, /*#__PURE__*/_react["default"].createElement(_dxReactGridMaterialUi.Table, {
    cellComponent: TableCell,
    columnExtensions: columnsDataExtension,
    rowComponent: function rowComponent(row) {
      return TableRow(row, onClickRow);
    }
  }), /*#__PURE__*/_react["default"].createElement(_dxReactGridMaterialUi.TableHeaderRow, {
    messages: {
      sortingHint: 'Ordenar'
    },
    showSortingControls:
    /* groupingData.length ? false : */
    sorting
  }), /*#__PURE__*/_react["default"].createElement(_dxReactGridMaterialUi.TableGroupRow, {
    rowComponent: function rowComponent(_ref6) {
      var children = _ref6.children;
      return /*#__PURE__*/_react["default"].createElement(_dxReactGridMaterialUi.TableHeaderRow.Row, {
        className: classes.gridTableHeaderGroup
      }, children);
    }
  }), _ref7, /*#__PURE__*/_react["default"].createElement(_dxReactGridMaterialUi.GroupingPanel, {
    emptyMessageComponent: function emptyMessageComponent() {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: classes.gridTableGroupingEmpty
      }, "Arrastra aqu\xED una columna para agrupar tus registros.");
    },
    itemComponent: function itemComponent(ev) {
      var customSorting = true; // const customSorting = (ev.item && ev.item.column && groupingData.length) ?
      //   Boolean(ev.item.column.name === groupingData[0].columnName) : true

      return /*#__PURE__*/_react["default"].createElement(_dxReactGridMaterialUi.GroupingPanel.Item, (0, _extends2["default"])({}, ev, {
        className: classes.gridTableChip,
        sortingEnabled: customSorting
      }));
    },
    showGroupingControls: true,
    showSortingControls: true
  })), withPagination ? /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.contetPagination
  }, /*#__PURE__*/_react["default"].createElement(_core.TablePagination, {
    backIconButtonText: "P\xE1gina anterior",
    component: "div",
    labelRowsPerPage: "Mostrar",
    nextIconButtonText: "P\xE1gina siguiente",
    onChangePage: onChangePage,
    onChangeRowsPerPage: onChangePerPage,
    page: pagination.page,
    rowsPerPage: pagination.perPage,
    rowsPerPageOptions: [10, 25, 100],
    totalItems: pagination.totalItems,
    totalPages: pagination.totalPages
  })) : null));
};

process.env.NODE_ENV !== "production" ? TableGroup.propTypes = {
  changeGrouping: _propTypes["default"].func,
  changeSorting: _propTypes["default"].func,
  columns: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    align: _propTypes["default"].string,
    currency: _propTypes["default"].bool,
    key: _propTypes["default"].string.isRequired,
    label: _propTypes["default"].string.isRequired,
    minWidth: _propTypes["default"].number,
    ordering: _propTypes["default"].bool
  })).isRequired,
  grouping: _propTypes["default"].bool,
  groupingData: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    name: _propTypes["default"].string
  })),
  limitDragable: _propTypes["default"].number,
  onChangePage: _propTypes["default"].func,
  onChangePerPage: _propTypes["default"].func,
  onClickRow: _propTypes["default"].func,
  onHandleSearch: _propTypes["default"].func,
  onHandleSelectAutocomplete: _propTypes["default"].func,
  pagination: _propTypes["default"].object,
  rows: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    _id: _propTypes["default"].string.isRequired
  })).isRequired,
  searchSuggestions: _propTypes["default"].array,
  sorting: _propTypes["default"].bool,
  sortingData: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    orderBy: _propTypes["default"].string,
    sort: _propTypes["default"].string
  })),
  withAutocomplete: _propTypes["default"].bool,
  withHeader: _propTypes["default"].bool,
  withPagination: _propTypes["default"].bool,
  withSearch: _propTypes["default"].bool
} : void 0;
TableGroup.muiName = 'TableGroup';

var _default = (0, _styles.withStyles)(styles, {
  name: 'KrowdyTableGroup'
})(TableGroup);

exports["default"] = _default;