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

netdata UI kit

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); }
import React, { Fragment, useCallback, useState } from "react";
import styled from "styled-components";
import useToggle from "../../hooks/useToggle";
import { H5 } from "../../components/typography";
import { Icon } from "../../components/icon";
import { Button } from "../../components/button";
import Flex from "../../components/templates/flex";
import Layer from "../../components/templates/layer";
import General from "./general";
import Dashboard from "./dashboard";
import SearchProvider, { SearchInput, SearchResults } from "./search";
var Container = styled(Flex).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.createElement(Flex, {
    width: "100%",
    alignItems: "center",
    justifyContent: "between",
    padding: [0, 0, 4],
    border: {
      side: "bottom",
      color: "disabled"
    }
  }, /*#__PURE__*/React.createElement(Flex, {
    gap: 2,
    alignItems: "center"
  }, children), /*#__PURE__*/React.createElement(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 = useToggle(),
    isOpen = _useToggle[0],
    toggle = _useToggle[1];
  var _useState = useState(views.general),
    view = _useState[0],
    setView = _useState[1];
  var isGeneral = view === views.general;
  var setDashboardView = useCallback(function () {
    return setView(views.dashboard);
  }, []);
  var setGeneralView = useCallback(function () {
    return setView(views.general);
  }, []);
  var setSearchView = useCallback(function () {
    return setView(views.search);
  }, []);
  var closeClicked = useCallback(function () {
    toggle();
    if (onCloseClick) onCloseClick();
  }, []);
  return /*#__PURE__*/React.createElement(Fragment, null, children(toggle, isOpen), isOpen && /*#__PURE__*/React.createElement(Layer, {
    position: "bottom-left",
    backdrop: true,
    margin: [5, 17],
    onClickOutside: toggle,
    onEsc: toggle
  }, /*#__PURE__*/React.createElement(SearchProvider, null, function (_ref3) {
    var searchTerm = _ref3.searchTerm,
      setSearchTerm = _ref3.setSearchTerm,
      results = _ref3.results,
      reset = _ref3.reset;
    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
      width: {
        max: isGeneral ? "325px" : view === views.dashboard ? "600px" : "100%"
      },
      "data-testid": "documentation-layer"
    }, modalProps), /*#__PURE__*/React.createElement(Header, {
      onClose: closeClicked
    }, isGeneral && /*#__PURE__*/React.createElement(Icon, {
      color: "text",
      name: "questionFilled",
      width: "18px",
      height: "18px"
    }), !isGeneral && /*#__PURE__*/React.createElement(Button, {
      icon: "arrow_left",
      neutral: true,
      small: true,
      onClick: function onClick() {
        setGeneralView();
        reset();
      },
      flavour: "borderless",
      "data-testid": "dashboard-back"
    }), /*#__PURE__*/React.createElement(H5, {
      margin: [0]
    }, titles[view] || titles.general)), view !== views.dashboard && /*#__PURE__*/React.createElement(SearchInput, {
      value: searchTerm,
      setSearchTerm: setSearchTerm,
      setSearchView: setSearchView
    }), isGeneral && /*#__PURE__*/React.createElement(Flex, {
      gap: 6,
      overflow: {
        vertical: "auto"
      },
      column: true,
      padding: [1]
    }, /*#__PURE__*/React.createElement(General, {
      app: app,
      onDashboardClick: setDashboardView,
      onVisitDocumentClick: onVisitDocumentClick,
      onOpenIssueClick: onOpenIssueClick,
      onOpenBugClick: onOpenBugClick,
      onContributeClick: onContributeClick,
      onSupportClick: onSupportClick,
      onGoToDemoClick: onGoToDemoClick,
      demoUrl: demoUrl
    })), view === views.dashboard && /*#__PURE__*/React.createElement(Dashboard, null), view === views.search && /*#__PURE__*/React.createElement(SearchResults, {
      results: results
    })));
  })));
};
export default Documentation;