@blaze-cms/plugin-admin-core-ui 0.131.0-project-admin-customisations.0 → 0.131.0

package/src/components/Menu/Icons/ChevronDown.js

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const ChevronDown = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    strokeWidth={1.5}
-    width="20"
-    height="20"
-    stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-  </svg>
-);
-
-export default ChevronDown;

package/src/components/Menu/Icons/ChevronUp.js

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const ChevronUp = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 22 22"
-    strokeWidth={1.5}
-    width="20"
-    height="20"
-    stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
-  </svg>
-);
-
-export default ChevronUp;

package/src/components/Menu/Items/MenuActionItem.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-const MenuActionItem = ({ item }) => {
-  const { label, icon: MenuSectionIcon, onClick, uri } = item;
-
-  const modifier = MenuSectionIcon ? '' : 'side-nav__list-link--noIcon';
-
-  return (
-    <li className="side-nav__list--item" key={item.label}>
-      <Link
-        to={uri}
-        className={`side-nav__list-link ${modifier}`}
-        onClick={() => {
-          if (onClick) {
-            onClick();
-          }
-        }}>
-        {MenuSectionIcon && (
-          <div className="side-nav__list-link--icon">
-            <MenuSectionIcon />
-          </div>
-        )}
-        <div className="side-nav__list-label">{label}</div>
-      </Link>
-    </li>
-  );
-};
-
-export default MenuActionItem;

package/src/components/Menu/Items/MenuItem.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import { useLocation } from 'react-router-dom';
-import MenuLinkItem from './MenuLinkItem';
-
-const MenuItem = ({ item, RenderItems }) => {
-  const location = useLocation();
-  const { label, items, uri } = item;
-
-  if (label && uri) {
-    const isActive = location.pathname === uri;
-    return <MenuLinkItem item={item} isActive={isActive} root />;
-  }
-
-  if (label && items && Object.values(items).length > 0) {
-    const childrenMenu = Object.keys(items).map(key => items[key]);
-
-    const childrenComponents = childrenMenu.map(child => {
-      const { label: childLabel, uri: childUri } = child;
-      const isActive = location.pathname === childUri;
-
-      if (childLabel && childUri) {
-        return <MenuLinkItem item={child} isActive={isActive} root={false} />;
-      }
-
-      return null;
-    });
-
-    return <RenderItems item={item}>{childrenComponents}</RenderItems>;
-  }
-
-  if (!label && items) {
-    const childrenMenu = Object.keys(items).map(key => items[key]);
-
-    return childrenMenu.map(child => {
-      const { label: childLabel, uri: childUri } = child;
-      const isActive = location.pathname === childUri;
-
-      if (childLabel && childUri) {
-        return <MenuLinkItem item={child} isActive={isActive} root />;
-      }
-
-      return null;
-    });
-  }
-
-  return null;
-};
-
-export default MenuItem;

package/src/components/Menu/Items/MenuLinkItem.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-const MenuLinkItem = ({ item, isActive, root = true }) => {
-  const { label, icon: MenuSectionIcon, uri } = item;
-
-  const modifier = MenuSectionIcon ? '' : 'side-nav__list-link--noIcon';
-
-  const activeModifier = isActive ? 'side-nav__list-link--active' : '';
-
-  return (
-    <li className="side-nav__list--item" key={item.label}>
-      <Link to={uri} className={`side-nav__list-link ${modifier} ${activeModifier}`}>
-        {MenuSectionIcon && (
-          <div className="side-nav__list-link--icon">
-            <MenuSectionIcon />
-          </div>
-        )}
-        <div className="side-nav__list-link--label">{label}</div>
-      </Link>
-    </li>
-  );
-};
-
-export default MenuLinkItem;

package/src/components/Menu/Menu.js

@@ -1,48 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import menuHandler from '../../utils/menu-handler-singleton';
-import MenuSection from './Section/MenuSection';
-
-const Menu = ({ children }) => {
-  const [config, setConfig] = useState();
-
-  useEffect(() => {
-    const loadConfig = async () => {
-      await menuHandler.loadConfig();
-    };
-
-    loadConfig().then(() => setConfig(menuHandler.getAll()));
-  }, []);
-
-  const MenuSections = () => {
-    if (!config) return null;
-
-    return config.map(sections => {
-      if (!sections || !Array.isArray(sections) || !sections.length) {
-        return null;
-      }
-
-      const menuSections = sections.filter(section => section.items);
-
-      return menuSections.map(menuSection => <MenuSection items={menuSection} />);
-    });
-  };
-
-  return (
-    <div className="side-nav__block">
-      <ul className="side-nav__list">
-        <MenuSections />
-      </ul>
-    </div>
-  );
-};
-
-Menu.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
-};
-
-Menu.defaultProps = {
-  children: null
-};
-
-export default Menu;

package/src/components/Menu/Section/MenuSection.js

@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import MenuSectionItems from './MenuSectionItems';
-
-const MenuSection = ({ items, children }) => <MenuSectionItems sectionItems={items} />;
-
-MenuSection.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  items: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
-};
-
-MenuSection.defaultProps = {
-  children: null
-};
-
-export default MenuSection;

package/src/components/Menu/Section/MenuSectionCollapsible.js

@@ -1,59 +0,0 @@
-import React, { useState } from 'react';
-import ChevronDown from '../Icons/ChevronDown';
-import ChevronUp from '../Icons/ChevronUp';
-
-const capitalise = s => {
-  if (typeof s !== 'string') return '';
-  return s.charAt(0).toUpperCase() + s.slice(1);
-};
-
-const MenuSectionCollapsible = ({ name, item, children }) => {
-  const { label, loadOpen, icon: MenuSectionIcon, items } = item;
-  const [collapsed, setCollapsed] = useState(!loadOpen);
-
-  const CollapseIcon = () => (collapsed ? <ChevronDown /> : <ChevronUp />);
-
-  const handleClick = () => {
-    setCollapsed(!collapsed);
-  };
-
-  const modifier = collapsed ? 'side-nav__list--item' : 'side-nav__list--item__selected';
-
-  const buttonModifier = collapsed ? 'side-nav__list-link' : 'side-nav__list-link--selected';
-
-  if (name) {
-    return (
-      <li className={modifier}>
-        <button type="button" className={buttonModifier} onClick={handleClick}>
-          <div className="side-nav__list-link--icon">{MenuSectionIcon && <MenuSectionIcon />}</div>
-          <div className="side-nav__list-link--wrapper">
-            <div className="side-nav__list-link--label">{capitalise(name)}</div>
-            <div className="side-nav__list-link--toggleCollapseIcon" role="button">
-              <CollapseIcon />
-            </div>
-          </div>
-        </button>
-        <div className="side-nav__list-link--children">{collapsed ? null : children}</div>
-      </li>
-    );
-  }
-
-  if (label && items && Object.keys(items).length > 0) {
-    return <li className={modifier}>{children}</li>;
-  }
-
-  if (label && items && Object.keys(items).length === 0) {
-    return (
-      <li className={modifier}>
-        <button type="button" className="side-nav__list-link" onClick={handleClick}>
-          <div className="side-nav__list-link--icon">{MenuSectionIcon && <MenuSectionIcon />}</div>
-          <div className="side-nav__list-label">{label}</div>
-        </button>
-      </li>
-    );
-  }
-
-  return null;
-};
-
-export default MenuSectionCollapsible;

package/src/components/Menu/Section/MenuSectionItem.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import MenuItem from '../Items/MenuItem';
-import MenuSectionCollapsible from './MenuSectionCollapsible';
-
-const MenuSectionItem = ({ name, item }) => {
-  if (!item) return null;
-
-  if (item.uri) {
-    return <MenuItem item={item} RenderItems={MenuSectionCollapsible} />;
-  }
-
-  if (Object.values(item.items).length === 0) return null;
-
-  return (
-    <MenuSectionCollapsible name={name} item={item}>
-      <MenuItem item={item} RenderItems={MenuSectionCollapsible} />
-    </MenuSectionCollapsible>
-  );
-};
-
-export default MenuSectionItem;
-
-MenuSectionItem.propTypes = {
-  name: PropTypes.string.isRequired,
-  item: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.object])
-    .isRequired
-};

package/src/components/Menu/Section/MenuSectionItems.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import MenuSectionItem from './MenuSectionItem';
-
-const MenuSectionItems = ({ sectionItems }) => {
-  const { items } = sectionItems;
-
-  const menuSections = Object.entries(items).sort((a, b) => a[1].order - b[1].order);
-
-  return menuSections.map(menuItem => <MenuSectionItem name={menuItem[0]} item={menuItem[1]} />);
-};
-
-export default MenuSectionItems;
-
-MenuSectionItems.propTypes = {
-  sectionItems: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
-};

package/src/components/Menu/index.js

@@ -1,3 +0,0 @@
-import Menu from './Menu';
-
-export default Menu;

package/src/utils/menu-handler-singleton.js

@@ -1,64 +0,0 @@
-import merge from 'lodash.merge';
-
-let instance;
-
-export class MenuHandler {
-  menuSections = new Map();
-
-  menuConfig;
-
-  app;
-
-  constructor(app) {
-    if (instance) {
-      throw new Error('You can only create one instance!');
-    }
-    instance = this;
-    this.menuConfig = {};
-    this.app = null;
-  }
-
-  setApp(app) {
-    this.app = app;
-  }
-
-  get app() {
-    return this.app;
-  }
-
-  get menuConfig() {
-    return this.menuConfig;
-  }
-
-  addConfig(newConfig) {
-    this.menuConfig = merge(this.menuConfig, newConfig);
-  }
-
-  async loadConfig() {
-    const addConfig = newConfig => {
-      this.addConfig(newConfig);
-    };
-
-    const { menuConfig } = this;
-
-    if (this.app && this.app.events) {
-      await this.app.events.emitAsync('admin:menu:config:load', { addConfig });
-      await this.app.events.emitAsync('admin:menu:config:load:after', { addConfig, menuConfig });
-    }
-  }
-
-  getInstance() {
-    return this;
-  }
-
-  getAll() {
-    const sortedByOrder = Object.entries(this.menuConfig).sort(
-      (a, b) => (a.order > b.order ? 1 : -1)
-    );
-
-    return sortedByOrder;
-  }
-}
-
-const menuHandler = new MenuHandler();
-export default menuHandler;