@centreon/react-components/lib/MaterialComponents/RightPanel/index.js

react components used by centreon web frontend

"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

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

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

var _List = _interopRequireDefault(require("@material-ui/core/List"));

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

var _Box = _interopRequireDefault(require("@material-ui/core/Box"));

var _ArrowForwardIos = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIos"));

var _Slide = _interopRequireDefault(require("@material-ui/core/Slide"));

var _IconClose = _interopRequireDefault(require("../Icons/IconClose"));

var _Loader = _interopRequireDefault(require("../../Loader"));

var _ExpandableSection = _interopRequireDefault(require("./ExpandableSection"));

var panelWidth = 560;
var inAnimationDurationMs = 150;
var outAnimationDurationMs = 50;
var Header = (0, _styles.styled)(_Box["default"])({
  paddingLeft: 20,
  boxShadow: '0px 3px 4px 0px rgba(0,0,0,0.15)',
  WebkitBoxShadow: '0px 3px 4px 0px rgba(0,0,0,0.15)',
  MozBoxShadow: '0px 3px 4px 0px rgba(0,0,0,0.15)',
  height: 49
});
var Container = (0, _styles.styled)('div')({
  top: 52,
  right: 0,
  bottom: 30,
  backgroundColor: '#ededed',
  minWidth: panelWidth,
  position: 'absolute',
  pointerEvents: 'all',
  outline: 'none',
  boxShadow: '0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12)',
  WebkitBoxShadow: '0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12)',
  MozBoxShadow: '0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12)',
  transition: '.3s ease-in-out',
  zIndex: 90
});
var Body = (0, _styles.styled)(_Box["default"])({
  height: '100%'
});
var MainPanel = (0, _styles.styled)(_Box["default"])({
  width: 540
});
var SecondaryPanelBar = (0, _styles.styled)(_Box["default"])({
  border: '1px solid #D6D6D8',
  width: 20,
  height: '100%',
  cursor: 'pointer'
});
var useSecondaryPanelStyles = (0, _styles.makeStyles)({
  secondaryPanel: {
    width: function width(_ref) {
      var active = _ref.active;
      return active ? 500 : 0;
    },
    transition: '.1s ease-in-out',
    overflow: 'hidden',
    backgroundColor: '#c7c8c9',
    padding: function padding(_ref2) {
      var active = _ref2.active;
      return active ? 5 : 0;
    }
  }
});
var CloseSecondaryPanelIcon = (0, _styles.styled)(_ArrowForwardIos["default"])({
  width: 15,
  margin: 'auto'
});

var RightPanel = function RightPanel(_ref3) {
  var active = _ref3.active,
      headerComponent = _ref3.headerComponent,
      secondaryPanelComponent = _ref3.secondaryPanelComponent,
      onSecondaryPanelClose = _ref3.onSecondaryPanelClose,
      sections = _ref3.sections,
      onClose = _ref3.onClose,
      onOpen = _ref3.onOpen,
      loading = _ref3.loading;

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      secondaryPanelActive = _useState2[0],
      setSecondaryPanelActive = _useState2[1];

  var _useSecondaryPanelSty = useSecondaryPanelStyles({
    active: secondaryPanelActive
  }),
      secondaryPanel = _useSecondaryPanelSty.secondaryPanel;

  (0, _react.useEffect)(function () {
    setSecondaryPanelActive(secondaryPanelComponent !== undefined);
  }, [secondaryPanelComponent]);

  var toggleSecondaryPanel = function toggleSecondaryPanel() {
    if (!secondaryPanelComponent) {
      return;
    }

    setSecondaryPanelActive(!secondaryPanelActive);
  };

  var onTransitionEnd = function onTransitionEnd() {
    if (!secondaryPanelActive) {
      onSecondaryPanelClose();
    }
  };

  var close = function close() {
    setSecondaryPanelActive(false);
    onClose();
  };

  return _react["default"].createElement(_Slide["default"], {
    "in": active,
    direction: "left",
    onEntered: onOpen,
    timeout: {
      enter: inAnimationDurationMs,
      exit: outAnimationDurationMs
    }
  }, _react["default"].createElement(Container, null, loading && _react["default"].createElement(_Loader["default"], {
    fullContent: true
  }), _react["default"].createElement(Header, {
    display: "flex",
    flexDirection: "row"
  }, _react["default"].createElement(_Box["default"], {
    flexGrow: 1
  }, headerComponent), _react["default"].createElement(_Box["default"], null, _react["default"].createElement(_IconClose["default"], {
    onClick: close,
    style: {
      width: 39,
      height: 39,
      padding: 5
    }
  }))), _react["default"].createElement(Body, {
    display: "flex",
    flexDirection: "row",
    flexGrow: 1
  }, _react["default"].createElement(MainPanel, {
    flexGrow: 1
  }, _react["default"].createElement(_List["default"], null, sections.map(function (_ref4) {
    var id = _ref4.id,
        title = _ref4.title,
        component = _ref4.component,
        expandable = _ref4.expandable;
    return expandable ? _react["default"].createElement(_ExpandableSection["default"], {
      key: id,
      title: title
    }, component) : _react["default"].createElement(_ListItem["default"], {
      key: id
    }, component);
  }))), _react["default"].createElement(SecondaryPanelBar, {
    "aria-label": "Close Secondary Panel",
    display: "flex",
    alignItems: "center",
    alignContent: "center",
    onClick: toggleSecondaryPanel
  }, secondaryPanelActive && _react["default"].createElement(CloseSecondaryPanelIcon, null)), _react["default"].createElement("div", {
    className: secondaryPanel,
    onTransitionEnd: onTransitionEnd
  }, secondaryPanelComponent))));
};

RightPanel.defaultProps = {
  onClose: function onClose() {},
  onOpen: function onOpen() {},
  onSecondaryPanelClose: function onSecondaryPanelClose() {},
  secondaryPanelComponent: undefined,
  loading: false
};
RightPanel.propTypes = {
  active: _propTypes["default"].bool.isRequired,
  loading: _propTypes["default"].bool,
  headerComponent: _propTypes["default"].node.isRequired,
  secondaryPanelComponent: _propTypes["default"].node,
  sections: _propTypes["default"].arrayOf(_propTypes["default"].shape).isRequired,
  onClose: _propTypes["default"].func,
  onOpen: _propTypes["default"].func,
  onSecondaryPanelClose: _propTypes["default"].func
};
var _default = RightPanel;
exports["default"] = _default;