diff --git a/packages/app/src/components/Layout/sidebar/index.jsx b/packages/app/src/components/Layout/sidebar/index.jsx
index 98af04ef..4d6357bd 100755
--- a/packages/app/src/components/Layout/sidebar/index.jsx
+++ b/packages/app/src/components/Layout/sidebar/index.jsx
@@ -1,59 +1,99 @@
import React from "react"
-import { Layout, Menu, Avatar } from "antd"
+import { Menu, Avatar } from "antd"
+import { Translation } from "react-i18next"
import classnames from "classnames"
import config from "config"
import { Icons, createIconRender } from "components/Icons"
import { sidebarKeys as defaultSidebarItems } from "schemas/defaultSettings"
+
import sidebarItems from "schemas/routes.json"
-import { Translation } from "react-i18next"
-import { SidebarEditor } from "./components"
import "./index.less"
-const { Sider } = Layout
-
const onClickHandlers = {
settings: (event) => {
window.app.openSettings()
},
}
+const getSidebarComponents = () => {
+ const items = {}
+
+ sidebarItems.forEach((item, index) => {
+ items[item.id] = {
+ ...item,
+ index,
+ content: (
+ <>
+ {createIconRender(item.icon)} {item.title}
+
+ ),
+ }
+ })
+
+ return items
+}
+
+const generateItems = () => {
+ const components = getSidebarComponents()
+ const itemsMap = []
+ const pathResolvers = {}
+
+ const keys = window.app?.settings.get("sidebarKeys") ?? defaultSidebarItems
+
+ // filter undefined components to avoid error
+ keys.filter((key) => {
+ if (typeof components[key] !== "undefined") {
+ return true
+ }
+ })
+
+ keys.forEach((key, index) => {
+ const component = components[key]
+
+ try {
+ // avoid if item is duplicated
+ if (itemsMap.includes(component)) {
+ return false
+ }
+
+ if (typeof component.path !== "undefined") {
+ pathResolvers[component.id] = component.path
+ }
+
+ itemsMap.push(component)
+ } catch (error) {
+ return console.log(error)
+ }
+ })
+
+ return {
+ itemsMap,
+ pathResolvers,
+ }
+}
+
export default class Sidebar extends React.Component {
constructor(props) {
super(props)
this.controller = window.app["SidebarController"] = {
toggleVisibility: this.toggleVisibility,
- toggleEdit: this.toggleEditMode,
toggleElevation: this.toggleElevation,
- attachElement: this.attachElement,
+ toggleCollapse: this.toggleCollapse,
isVisible: () => this.state.visible,
- isEditMode: () => this.state.visible,
isCollapsed: () => this.state.collapsed,
}
this.state = {
- editMode: false,
visible: false,
- loading: true,
- collapsed: window.app.settings.get("collapseOnLooseFocus") ?? false,
- pathResolve: {},
- menus: {},
- extraItems: {
- bottom: [],
- top: [],
- },
elevated: false,
- additionalElements: [],
+ collapsed: window.app.settings.get("collapseOnLooseFocus") ?? false,
+ pathResolvers: null,
+ menus: null,
}
- window.app.eventBus.on("edit_sidebar", () => this.toggleEditMode())
-
- window.app.eventBus.on("settingChanged.sidebar_collapse", (value) => {
- this.toggleCollapse(value)
- })
-
// handle sidedrawer open/close
window.app.eventBus.on("sidedrawer.hasDrawers", () => {
this.toggleElevation(true)
@@ -66,112 +106,21 @@ export default class Sidebar extends React.Component {
collapseDebounce = null
componentDidMount = async () => {
- await this.loadSidebarItems()
+ await this.loadItems()
setTimeout(() => {
this.controller.toggleVisibility(true)
}, 100)
}
- getStoragedKeys = () => {
- return window.app.settings.get("sidebarKeys")
- }
-
- attachElement = (element) => {
- this.setState({
- additionalElements: [...this.state.additionalElements, element],
- })
- }
-
- appendItem = (item = {}) => {
- const { position } = item
-
- if (typeof position === "undefined" && typeof this.state.extraItems[position] === "undefined") {
- console.error("Invalid position")
- return false
- }
-
- const state = this.state.extraItems
-
- state[position].push(item)
-
- this.setState({ extraItems: state })
- }
-
- loadSidebarItems = () => {
- const items = {}
- const itemsMap = []
-
- // parse all items from schema
- sidebarItems.forEach((item, index) => {
- items[item.id] = {
- ...item,
- index,
- content: (
- <>
- {createIconRender(item.icon)} {item.title}
-
- ),
- }
- })
-
- // filter undefined to avoid error
- let keys = (this.getStoragedKeys() ?? defaultSidebarItems).filter((key) => {
- if (typeof items[key] !== "undefined") {
- return true
- }
- })
-
- // short items
- keys.forEach((id, index) => {
- const item = items[id]
-
- if (item.locked) {
- if (item.index !== index) {
- keys = keys.move(index, item.index)
-
- //update index
- window.app.settings.set("sidebarKeys", keys)
- }
- }
- })
-
- // set items from scoped keys
- keys.forEach((key, index) => {
- const item = items[key]
-
- try {
- // avoid if item is duplicated
- if (itemsMap.includes(item)) {
- return false
- }
-
- let valid = true
-
- if (typeof item.requireState === "object") {
- const { key, value } = item.requireState
- //* TODO: check global state
- }
-
- // end validation
- if (!valid) {
- return false
- }
-
- if (typeof item.path !== "undefined") {
- let resolvers = this.state.pathResolve ?? {}
- resolvers[item.id] = item.path
- this.setState({ pathResolve: resolvers })
- }
-
- itemsMap.push(item)
- } catch (error) {
- return console.log(error)
- }
- })
+ loadItems = async () => {
+ const generation = generateItems()
// update states
- this.setState({ items, menus: itemsMap, loading: false })
+ await this.setState({
+ menus: generation.itemsMap,
+ pathResolvers: generation.pathResolvers,
+ })
}
renderMenuItems(items) {
@@ -184,29 +133,25 @@ export default class Sidebar extends React.Component {
return items.map((item) => {
if (Array.isArray(item.children)) {
- return (
-
-
- {t => t(item.title)}
-
- }
- {...item.props}
- >
- {this.renderMenuItems(item.children)}
-
- )
+ return
+
+ {t => t(item.title)}
+
+ }
+ {...item.props}
+ >
+ {this.renderMenuItems(item.children)}
+
}
- return (
-
-
- {t => t(item.title ?? item.id)}
-
-
- )
+ return
+
+ {t => t(item.title ?? item.id)}
+
+
})
}
@@ -223,27 +168,14 @@ export default class Sidebar extends React.Component {
if (typeof onClickHandlers[e.key] === "function") {
return onClickHandlers[e.key](e)
}
- if (typeof this.state.pathResolve[e.key] !== "undefined") {
- return window.app.setLocation(`/${this.state.pathResolve[e.key]}`, 150)
- }
- return window.app.setLocation(`/${e.key}`, 150)
- }
-
- toggleEditMode = (to) => {
- if (typeof to === "undefined") {
- to = !this.state.editMode
- }
-
- if (to) {
- window.app.eventBus.emit("clearAllOverlays")
- } else {
- if (this.itemsMap !== this.getStoragedKeys()) {
- this.loadSidebarItems()
+ if (typeof this.state.pathResolvers === "object") {
+ if (typeof this.state.pathResolvers[e.key] !== "undefined") {
+ return window.app.setLocation(`/${this.state.pathResolvers[e.key]}`, 150)
}
}
- this.setState({ editMode: to, collapsed: false })
+ return window.app.setLocation(`/${e.key}`, 150)
}
toggleCollapse = (to) => {
@@ -261,11 +193,12 @@ export default class Sidebar extends React.Component {
}
onMouseEnter = () => {
- if (window.app.settings.is("collapseOnLooseFocus", false)) {
- return false
- }
+ if (!this.state.visible) return
+
+ if (window.app.settings.is("collapseOnLooseFocus", false)) return
clearTimeout(this.collapseDebounce)
+
this.collapseDebounce = null
if (this.state.collapsed) {
@@ -274,49 +207,29 @@ export default class Sidebar extends React.Component {
}
handleMouseLeave = () => {
- if (window.app.settings.is("collapseOnLooseFocus", false)) {
- return false
- }
+ if (!this.state.visible) return
+
+ if (window.app.settings.is("collapseOnLooseFocus", false)) return
if (!this.state.collapsed) {
this.collapseDebounce = setTimeout(() => { this.toggleCollapse(true) }, window.app.settings.get("autoCollapseDelay") ?? 500)
}
}
- renderExtraItems = (position) => {
- return this.state.extraItems[position].map((item = {}) => {
- if (typeof item.icon !== "undefined") {
- if (typeof item.props !== "object") {
- item.props = Object()
- }
-
- item.props["icon"] = createIconRender(item.icon)
- }
-
- return {item.children}
- })
- }
-
render() {
- if (this.state.loading) return null
-
- const { user } = this.props
+ if (!this.state.menus) return null
return (
- this.props.onCollapse()}
className={
classnames(
- "sidebar",
+ "app_sidebar",
{
- ["edit_mode"]: this.state.editMode,
+ ["collapsed"]: this.state.visible && this.state.collapsed,
+ ["elevated"]: this.state.visible && this.state.elevated,
["hidden"]: !this.state.visible,
- ["elevated"]: this.state.elevated
}
)
}
@@ -327,70 +240,49 @@ export default class Sidebar extends React.Component {
- {this.state.editMode && (
-
-
-
- )}
+
+
+
- {!this.state.editMode && (
-
-
-
- )}
-
- {!this.state.editMode &&
- {this.state.additionalElements}
-
}
-
- {!this.state.editMode && (
-
-
+