autodisol/components/VerticalTabMenu.js

"use strict";

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

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

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));

var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));

var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));

var _ExpandLess = _interopRequireDefault(require("@material-ui/icons/ExpandLess"));

var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));

var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));

var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));

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

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _compose = _interopRequireDefault(require("recompose/compose"));

var _styles2 = require("./styles");

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

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

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

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

// Aboslute index is index of tab considering all collapses flattened
// flow-disable-next-line
var computeAbsoluteTabIndex = function computeAbsoluteTabIndex(tabs, relativeTabIndex, itemIndex) {
  var anteriorTabs = 0;

  for (var i = 0; i < itemIndex; i += 1) {
    anteriorTabs += Array.isArray(tabs[i]) ? tabs[i].length : 1;
  }

  return anteriorTabs + relativeTabIndex;
}; // Returns the collapse containing the given tab
// Returns -1 if tab is not inside a collapse
// flow-disable-next-line


exports.computeAbsoluteTabIndex = computeAbsoluteTabIndex;

var computeCollapseIndex = function computeCollapseIndex(tabIndex, tabs) {
  var collapseIndex = -1;
  var cursor = 0;
  var absoluteIndex = 0;

  while (absoluteIndex <= tabIndex) {
    if (Array.isArray(tabs[cursor])) {
      absoluteIndex += tabs[cursor].length;
      collapseIndex += 1;
    } else if (absoluteIndex === tabIndex) {
      return -1;
    } else {
      absoluteIndex += 1;
    }

    cursor += 1;
  }

  return collapseIndex;
};

exports.computeCollapseIndex = computeCollapseIndex;

var computeTitleIndex = function computeTitleIndex(itemIndex, tabs) {
  var firstTabInCollapse = computeAbsoluteTabIndex(tabs, 0, itemIndex);
  return computeCollapseIndex(firstTabInCollapse, tabs);
};

var TabLabel = function TabLabel(_ref) {
  var title = _ref.title,
      subtitle = _ref.subtitle;
  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Typography["default"], {
    variant: "h3",
    style: {
      opacity: 0.6
    }
  }, subtitle), _react["default"].createElement(_Typography["default"], {
    variant: "body1"
  }, title));
};

TabLabel.propTypes = {
  title: _propTypes["default"].string,
  subtitle: _propTypes["default"].string
};

// Properties :
// Tabs : Array of tabs - if several tabs are grouped in one collapse, put them in one same array
// CollapseTitles : Array of titles for collapses headers, if necessary
// AreCollapsesSpaced : Whether collapses should have vertical margin to sepearate them from other tabs
var VerticalTabMenuJSX = function VerticalTabMenuJSX(_ref2) {
  var tabs = _ref2.tabs,
      collapseTitles = _ref2.collapseTitles,
      tabChangeHandler = _ref2.tabChangeHandler,
      isTabDisabled = _ref2.isTabDisabled,
      activeTab = _ref2.activeTab,
      css = _ref2.classes,
      areCollapsesSpaced = _ref2.areCollapsesSpaced;

  var _useState = (0, _react.useState)(activeTab ? computeCollapseIndex(activeTab, tabs) : -1),
      _useState2 = _slicedToArray(_useState, 2),
      collapse = _useState2[0],
      setCollapse = _useState2[1];

  return _react["default"].createElement("div", null, _react["default"].createElement(VerticalTabs, {
    value: collapse > -1 ? false : activeTab,
    onChange: function onChange(_, i) {
      setCollapse(-1);
      tabChangeHandler(i);
    },
    className: css.globalContainer
  }, tabs.map(function (item, itemIndex) {
    return Array.isArray(item) ? _react["default"].createElement("div", {
      key: item[0].title,
      className: areCollapsesSpaced ? css.collapseWithMargin : css.collapseBlock
    }, _react["default"].createElement(_ListItem["default"], {
      button: true,
      onClick: function onClick() {
        if (itemIndex !== collapse) {
          setCollapse(itemIndex);
          tabChangeHandler(computeAbsoluteTabIndex(tabs, 0, itemIndex));
        }
      },
      className: css.collapseHeader
    }, collapseTitles && collapseTitles[computeTitleIndex(itemIndex, tabs)].icon ? _react["default"].createElement(_ListItemIcon["default"], {
      className: css.collapseIcon
    }, collapseTitles[computeTitleIndex(itemIndex, tabs)].icon) : _react["default"].createElement("div", {
      className: css.collapseEmptyIcon
    }), _react["default"].createElement(_ListItemText["default"], {
      inset: true,
      primary: collapseTitles && collapseTitles[computeTitleIndex(itemIndex, tabs)].title,
      className: css.collapseText
    }), collapse === itemIndex ? _react["default"].createElement(_ExpandLess["default"], null) : _react["default"].createElement(_ExpandMore["default"], null)), _react["default"].createElement(_Collapse["default"], {
      "in": collapse === itemIndex,
      timeout: "auto",
      unmountOnExit: true,
      classes: {
        wrapperInner: css.collapseInner
      }
    }, _react["default"].createElement(VerticalTabs, {
      value: collapse !== itemIndex || collapse === -1 ? false : activeTab,
      onChange: function onChange(_, i) {
        return tabChangeHandler(i);
      }
    }, item.map(function (tab, tabIndex) {
      var absoluteTabIndex = computeAbsoluteTabIndex(tabs, tabIndex, itemIndex);
      return _react["default"].createElement(VerticalTab, {
        key: tab.title,
        value: absoluteTabIndex,
        label: _react["default"].createElement(TabLabel, {
          title: tab.title,
          subtitle: tab.subtitle
        }),
        icon: tab.icon,
        disabled: isTabDisabled ? isTabDisabled(absoluteTabIndex) : false,
        classes: {
          wrapper: activeTab === absoluteTabIndex ? css.selectedInsideCollapse : css.wrapperInsideCollapse
        }
      });
    })))) : _react["default"].createElement(VerticalTab, {
      key: item.title,
      value: computeAbsoluteTabIndex(tabs, 0, itemIndex),
      label: _react["default"].createElement(TabLabel, {
        title: item.title,
        subtitle: item.subtitle
      }),
      icon: item.icon,
      disabled: isTabDisabled ? isTabDisabled(computeAbsoluteTabIndex(tabs, 0, itemIndex)) : false,
      className: css.lonelyTab
    });
  })));
};

VerticalTabMenuJSX.propTypes = {
  tabs: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].shape({
    title: _propTypes["default"].string.isRequired,
    subtitle: _propTypes["default"].string,
    icon: _propTypes["default"].any,
    childrenTabs: _propTypes["default"].object
  }), _propTypes["default"].arrayOf(_propTypes["default"].shape({
    title: _propTypes["default"].string.isRequired,
    subtitle: _propTypes["default"].string,
    icon: _propTypes["default"].any,
    childrenTabs: _propTypes["default"].object
  }).isRequired)]).isRequired).isRequired,
  collapseTitles: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    title: _propTypes["default"].string.isRequired,
    icon: _propTypes["default"].any
  }).isRequired),
  tabChangeHandler: _propTypes["default"].func.isRequired,
  isTabDisabled: _propTypes["default"].func,
  activeTab: _propTypes["default"].number,
  classes: _propTypes["default"].object.isRequired,
  areCollapsesSpaced: _propTypes["default"].bool
};
var VerticalTabs = (0, _styles.withStyles)({
  root: {
    boxShadow: 'none'
  },
  flexContainer: {
    flexDirection: 'column'
  }
})(_Tabs["default"]);
var VerticalTab = (0, _styles.withStyles)(function (_ref3) {
  var palette = _ref3.palette;
  return {
    root: {
      maxWidth: '100%',
      borderBottom: "1px solid  ".concat(palette.grey[300]),
      borderRight: "1px solid ".concat(palette.grey[300]),
      borderLeft: "1px solid ".concat(palette.grey[300]),
      opacity: 1
    },
    wrapper: {
      textAlign: 'left',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'left',
      '&>svg': {
        fontSize: '1.25rem',
        marginRight: 3
      },
      color: palette.secondary.dark
    },
    selected: {
      backgroundColor: 'white'
    },
    disabled: {
      opacity: '1 !important',
      '&>span': {
        opacity: 0.5
      }
    }
  };
})(_Tab["default"]);
var VerticalTabMenu = (0, _compose["default"])((0, _styles.withStyles)(function (_ref4) {
  var palette = _ref4.palette;
  return {
    globalContainer: {
      borderTop: "1px solid  ".concat(palette.grey[300]),
      borderRadius: '8px 8px 0px 0px'
    },
    collapseHeader: {
      paddingTop: 20,
      paddingBottom: 20,
      background: _styles2.secondaryColorExtraLight,
      borderBottom: "1px solid  ".concat(palette.grey[300]),
      borderRight: "1px solid ".concat(palette.grey[300]),
      borderLeft: "1px solid ".concat(palette.grey[300])
    },
    collapseEmptyIcon: {
      width: 40
    },
    collapseText: {
      paddingLeft: 0
    },
    collapseIcon: {
      color: palette.secondary.dark,
      marginLeft: 10,
      marginRight: 10,
      '&>svg': {
        fontSize: '1.25rem'
      }
    },
    wrapperInsideCollapse: {
      paddingLeft: 20,
      borderLeft: "3px solid ".concat(palette.grey[300]),
      height: '100%'
    },
    selectedInsideCollapse: {
      extend: 'wrapperInsideCollapse',
      borderLeft: "3px solid ".concat(palette.primary.main)
    },
    collapseInner: {
      display: 'flex',
      flexDirection: 'column'
    },
    collapseBlock: {
      '&:first-child': {
        '&>div': {
          borderRadius: '8px 8px 0px 0px'
        }
      }
    },
    collapseWithMargin: {
      extend: 'collapseBlock',
      '&:not(:first-child)': {
        borderTop: "1px solid  ".concat(palette.grey[300])
      },
      '&:not(:last-child)': {
        marginBottom: 20
      }
    },
    wrapperDisabled: {
      opacity: '0.5 !important'
    },
    lonelyTab: {
      '&:first-child': {
        borderRadius: '8px 8px 0px 0px'
      }
    }
  };
}))(VerticalTabMenuJSX);
var _default = VerticalTabMenu;
exports["default"] = _default;