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

EGroup Team react component modules.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { Children, useState } from 'react';
import { Collapse, createStyles, IconButton, TableCell, TableRow, withStyles } from '@material-ui/core';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import clsx from 'clsx';

const styles = () => 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 ? TableCell : _ref$tableCellCompone,
      TableCellProps = _ref.TableCellProps,
      other = _objectWithoutProperties(_ref, ["className", "classes", "children", "startActions", "colSpan", "tableCellComponent", "TableCellProps"]);

  const _useState = useState(false),
        _useState2 = _slicedToArray(_useState, 2),
        open = _useState2[0],
        setOpen = _useState2[1];

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

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

export default withStyles(styles, {
  name: 'EgDataTableCollapseRow'
})(DataTableCollapseRow);