@netdata/netdata-ui/dist/organisms/documentation/index.js

netdata UI kit

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _useToggle2 = _interopRequireDefault(require("../../hooks/useToggle"));
var _typography = require("../../components/typography");
var _icon = require("../../components/icon");
var _button = require("../../components/button");
var _flex = _interopRequireDefault(require("../../components/templates/flex"));
var _layer = _interopRequireDefault(require("../../components/templates/layer"));
var _general = _interopRequireDefault(require("./general"));
var _dashboard = _interopRequireDefault(require("./dashboard"));
var _search = _interopRequireWildcard(require("./search"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
var Container = (0, _styledComponents["default"])(_flex["default"]).attrs({
  padding: [6],
  background: "dropdown",
  gap: 6,
  column: true,
  round: true,
  overflow: {
    vertical: "auto"
  }
}).withConfig({
  displayName: "documentation__Container",
  componentId: "sc-13yq5u1-0"
})(["box-shadow:0px 4px 4px rgba(0,0,0,0.25);"]);
var Header = function Header(_ref) {
  var children = _ref.children,
    onClose = _ref.onClose;
  return /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    width: "100%",
    alignItems: "center",
    justifyContent: "between",
    padding: [0, 0, 4],
    border: {
      side: "bottom",
      color: "disabled"
    }
  }, /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    gap: 2,
    alignItems: "center"
  }, children), /*#__PURE__*/_react["default"].createElement(_button.Button, {
    icon: "x",
    neutral: true,
    small: true,
    onClick: onClose,
    flavour: "borderless",
    "data-testid": "documentation-help-close"
  }));
};
var views = {
  general: "general",
  dashboard: "dashboard",
  search: "search"
};
var titles = {
  general: "Need help?",
  dashboard: "Need help?"
};
var Documentation = function Documentation(_ref2) {
  var _ref2$app = _ref2.app,
    app = _ref2$app === void 0 ? "cloud" : _ref2$app,
    onCloseClick = _ref2.onCloseClick,
    onVisitDocumentClick = _ref2.onVisitDocumentClick,
    onOpenIssueClick = _ref2.onOpenIssueClick,
    onOpenBugClick = _ref2.onOpenBugClick,
    onContributeClick = _ref2.onContributeClick,
    onSupportClick = _ref2.onSupportClick,
    onGoToDemoClick = _ref2.onGoToDemoClick,
    children = _ref2.children,
    demoUrl = _ref2.demoUrl,
    _ref2$modalProps = _ref2.modalProps,
    modalProps = _ref2$modalProps === void 0 ? {} : _ref2$modalProps;
  var _useToggle = (0, _useToggle2["default"])(),
    isOpen = _useToggle[0],
    toggle = _useToggle[1];
  var _useState = (0, _react.useState)(views.general),
    view = _useState[0],
    setView = _useState[1];
  var isGeneral = view === views.general;
  var setDashboardView = (0, _react.useCallback)(function () {
    return setView(views.dashboard);
  }, []);
  var setGeneralView = (0, _react.useCallback)(function () {
    return setView(views.general);
  }, []);
  var setSearchView = (0, _react.useCallback)(function () {
    return setView(views.search);
  }, []);
  var closeClicked = (0, _react.useCallback)(function () {
    toggle();
    if (onCloseClick) onCloseClick();
  }, []);
  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, children(toggle, isOpen), isOpen && /*#__PURE__*/_react["default"].createElement(_layer["default"], {
    position: "bottom-left",
    backdrop: true,
    margin: [5, 17],
    onClickOutside: toggle,
    onEsc: toggle
  }, /*#__PURE__*/_react["default"].createElement(_search["default"], null, function (_ref3) {
    var searchTerm = _ref3.searchTerm,
      setSearchTerm = _ref3.setSearchTerm,
      results = _ref3.results,
      reset = _ref3.reset;
    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(Container, _extends({
      width: {
        max: isGeneral ? "325px" : view === views.dashboard ? "600px" : "100%"
      },
      "data-testid": "documentation-layer"
    }, modalProps), /*#__PURE__*/_react["default"].createElement(Header, {
      onClose: closeClicked
    }, isGeneral && /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
      color: "text",
      name: "questionFilled",
      width: "18px",
      height: "18px"
    }), !isGeneral && /*#__PURE__*/_react["default"].createElement(_button.Button, {
      icon: "arrow_left",
      neutral: true,
      small: true,
      onClick: function onClick() {
        setGeneralView();
        reset();
      },
      flavour: "borderless",
      "data-testid": "dashboard-back"
    }), /*#__PURE__*/_react["default"].createElement(_typography.H5, {
      margin: [0]
    }, titles[view] || titles.general)), view !== views.dashboard && /*#__PURE__*/_react["default"].createElement(_search.SearchInput, {
      value: searchTerm,
      setSearchTerm: setSearchTerm,
      setSearchView: setSearchView
    }), isGeneral && /*#__PURE__*/_react["default"].createElement(_flex["default"], {
      gap: 6,
      overflow: {
        vertical: "auto"
      },
      column: true,
      padding: [1]
    }, /*#__PURE__*/_react["default"].createElement(_general["default"], {
      app: app,
      onDashboardClick: setDashboardView,
      onVisitDocumentClick: onVisitDocumentClick,
      onOpenIssueClick: onOpenIssueClick,
      onOpenBugClick: onOpenBugClick,
      onContributeClick: onContributeClick,
      onSupportClick: onSupportClick,
      onGoToDemoClick: onGoToDemoClick,
      demoUrl: demoUrl
    })), view === views.dashboard && /*#__PURE__*/_react["default"].createElement(_dashboard["default"], null), view === views.search && /*#__PURE__*/_react["default"].createElement(_search.SearchResults, {
      results: results
    })));
  })));
};
var _default = exports["default"] = Documentation;