@e-group/material-module/DataTableCollapseRow/DataTableCollapseRow.js

EGroup Team react component modules.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

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

var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));

var _KeyboardArrowUp = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowUp"));

var _clsx = _interopRequireDefault(require("clsx"));

const styles = () => (0, _core.createStyles)({
  root: {
    '& > *': {
      borderBottom: 'unset'
    }
  },
  nostretch: {
    width: '1%',
    whiteSpace: 'nowrap'
  },
  detailCell: {
    paddingBottom: 0,
    paddingTop: 0
  }
});

const DataTableCollapseRow = (_ref) => {
  let className = _ref.className,
      classes = _ref.classes,
      children = _ref.children,
      startActions = _ref.startActions,
      colSpan = _ref.colSpan,
      _ref$tableCellCompone = _ref.tableCellComponent,
      tableCellComponent = _ref$tableCellCompone === void 0 ? _core.TableCell : _ref$tableCellCompone,
      TableCellProps = _ref.TableCellProps,
      other = (0, _objectWithoutProperties2.default)(_ref, ["className", "classes", "children", "startActions", "colSpan", "tableCellComponent", "TableCellProps"]);

  const _useState = (0, _react.useState)(false),
        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
        open = _useState2[0],
        setOpen = _useState2[1];

  const _Children$toArray = _react.Children.toArray(children),
        _Children$toArray2 = (0, _slicedToArray2.default)(_Children$toArray, 2),
        cells = _Children$toArray2[0],
        detail = _Children$toArray2[1];

  const TableCellComponent = tableCellComponent;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.TableRow, (0, _extends2.default)({
    className: (0, _clsx.default)(className, classes.root)
  }, other), /*#__PURE__*/_react.default.createElement(TableCellComponent, (0, _extends2.default)({
    className: classes.nostretch
  }, TableCellProps), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    size: "small",
    onClick: e => {
      e.stopPropagation();
      setOpen(!open);
    }
  }, open ? /*#__PURE__*/_react.default.createElement(_KeyboardArrowUp.default, null) : /*#__PURE__*/_react.default.createElement(_KeyboardArrowDown.default, null)), startActions), cells), /*#__PURE__*/_react.default.createElement(_core.TableRow, null, /*#__PURE__*/_react.default.createElement(_core.TableCell, {
    className: classes.detailCell,
    colSpan: colSpan + 1
  }, /*#__PURE__*/_react.default.createElement(_core.Collapse, {
    in: open,
    timeout: "auto",
    unmountOnExit: true
  }, detail))));
};

var _default = (0, _core.withStyles)(styles, {
  name: 'EgDataTableCollapseRow'
})(DataTableCollapseRow);

exports.default = _default;