react-antd-dashboard/build/layout/BasicLayout/index.js

React dashboard layout solution created using AntD and permission based navigation. Supports theming with Less, parameterized routes and private routing. Contains useful components for dashboard application.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Layout, Result, Spin } from "antd";
import BasicHeader from "../BasicHeader";
import SideMenu from "../SideMenu";
import Page from "../../core/router/Page";
import Login from "../Login";
const {
  Content,
  Footer
} = Layout;
let dom = {};

try {
  dom = require('react-router-dom');
} catch (e) {}

const {
  BrowserRouter,
  Route,
  Switch
} = dom;

function ForbiddenComponent(props) {
  return /*#__PURE__*/React.createElement("div", {
    className: "page-container result-item"
  }, /*#__PURE__*/React.createElement(Result, {
    status: "403",
    title: "403"
  }));
}

function NotFoundComponent(props) {
  return /*#__PURE__*/React.createElement("div", {
    className: "page-container result-item"
  }, /*#__PURE__*/React.createElement(Result, {
    status: "404",
    title: "404"
  }));
}

class BasicLayout extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "showAvailableRoutes", () => {
      const {
        menuItems,
        pages,
        otherItems
      } = this.props;
      const store = {};
      let firstItemKey = null;
      let firstItem = true;
      if (menuItems) menuItems.forEach(el => {
        if (el.subItems && el.subItems.length > 0) el.subItems.forEach(sub => {
          if (firstItem) {
            firstItem = false;
            firstItemKey = sub.key;
          }

          store[sub.key] = sub.rules || {};
        });else {
          if (firstItem) {
            firstItem = false;
            firstItemKey = el.key;
          }

          store[el.key] = el.rules || {};
        }
      });
      if (otherItems) otherItems.forEach(el => {
        if (firstItem) {
          firstItem = false;
          firstItemKey = el.key;
        }

        store[el.key] = el.rules || {};
      });
      return pages.map(el => {
        const path = [`/${el.key}${el.hasParam ? "/:param" : ""}`];

        if (firstItemKey === el.key) {
          path.push("/");
        }

        return /*#__PURE__*/React.createElement(Page, _extends({
          key: el.key,
          exact: true,
          component: el.component,
          path: path,
          id: el.key,
          store: store,
          redirectUrl: `/403`
        }, el.componentProps));
      });
    });
  }

  render() {
    if (this.props.loading) {
      const customSpinnerPage = this.props.loadingPage || /*#__PURE__*/React.createElement("div", {
        className: "basic-layout-spinner-container"
      }, /*#__PURE__*/React.createElement(Spin, {
        className: "basic-layout-spinner"
      }));
      return customSpinnerPage;
    }

    const authenticated = this.props.authenticated || false;
    const CustomLoginComponent = this.props.loginPage;
    if (!authenticated) return CustomLoginComponent ? /*#__PURE__*/React.createElement(CustomLoginComponent, {
      onLogin: this.props.onLogin,
      logo: this.props.loginLogo,
      loginLogoStyle: this.props.loginLogoStyle
    }) : /*#__PURE__*/React.createElement(Login, {
      onLogin: this.props.onLogin,
      logo: this.props.loginLogo,
      loginLogoStyle: this.props.loginLogoStyle
    });
    const {
      logo,
      dropdownItems,
      applicationName,
      menuItems,
      user,
      footerStyle,
      footer,
      notFound,
      forbidden,
      expandedLogo
    } = this.props;
    const forbiddenPage = forbidden || ForbiddenComponent;
    const notFoundPage = notFound || NotFoundComponent;
    return /*#__PURE__*/React.createElement(BrowserRouter, null, /*#__PURE__*/React.createElement(Layout, {
      style: {
        minHeight: "100vh"
      }
    }, menuItems && /*#__PURE__*/React.createElement(SideMenu, {
      logo: logo,
      expandedLogo: expandedLogo,
      menuItems: menuItems
    }), /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(BasicHeader, {
      user: user,
      applicationName: applicationName,
      menuItems: dropdownItems
    }, this.props.headerComponents), /*#__PURE__*/React.createElement(Content, {
      style: {
        margin: "0 16px"
      }
    }, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
      path: "/403",
      exact: true,
      component: forbiddenPage
    }), this.showAvailableRoutes(), /*#__PURE__*/React.createElement(Route, {
      component: notFoundPage
    }))), /*#__PURE__*/React.createElement(Footer, {
      style: footerStyle || {
        textAlign: "center"
      }
    }, footer))));
  }

}

let whatToExport;

if (dom.Route) {
  whatToExport = BasicLayout;
} else {
  whatToExport = props => /*#__PURE__*/React.createElement("div", null, "No React Router");
}

export default whatToExport;