From 1495bdc5d3d896efea33b9f3620aa80e14070c74 Mon Sep 17 00:00:00 2001
From: Dorian Goepp <dorian.goepp@gmail.com>
Date: Thu, 4 Apr 2019 14:22:24 +0200
Subject: [PATCH] refactor the function to toggle widgets between modes
---
src/Board.js | 55 +++++++++++++++++++++++-----------------------------
1 file changed, 24 insertions(+), 31 deletions(-)
diff --git a/src/Board.js b/src/Board.js
index ffd04ec..c276a86 100755
--- a/src/Board.js
+++ b/src/Board.js
@@ -122,38 +122,31 @@ class Board extends React.Component {
RenderTabsetHandle(node, renderValues) {
// The node could be either a tab set or a border
if (node.getType() === "tabset") {
- function settingsToggleHandle() {
- // `this` is bound to the button's tabset
- const tab = this.getSelectedNode()
- const config = tab.getConfig()
- if ((!("displayMode" in config)) || (config.displayMode !== "settings")) {
- config.displayMode = "settings"
- this._model.doAction(
- FlexLayout.Actions.updateNodeAttributes(tab.getId(), {config: config}));
- }
-
- else {
- delete config.displayMode
- this._model.doAction(
- FlexLayout.Actions.updateNodeAttributes(tab.getId(), {config: config}));
+ /**
+ * Switch in and out of a display mode (for a widget in the dashboard). This function returns a fuction
+ * that does the real switching for a given mode.
+ *
+ * This mode is handled through a configuration object handled by FlexLayout.
+ * @param {String} modeName name of the mode to be switched
+ * @return function
+ */
+ function modeToggle(modeName) {
+ return function() {
+ // `this` is bound to the button's tabset
+ const tab = this.getSelectedNode(); // retrieve the selected tab
+ const config = tab.getConfig(); // get the configuration of this tab
+ if (!("displayMode" in config) || (config.displayMode !== modeName)) {
+ config.displayMode = modeName;
+ this._model.doAction(
+ FlexLayout.Actions.updateNodeAttributes(tab.getId(), {config: config}));
+ } else {
+ delete config.displayMode;
+ this._model.doAction(
+ FlexLayout.Actions.updateNodeAttributes(tab.getId(), {config: config}));
+ }
}
}
- function readmeToggleHandle() {
- const tab = this.getSelectedNode()
- const config = tab.getConfig()
- if ((!("displayMode" in config)) || (config.displayMode !== "readme")) {
- config.displayMode = "readme"
- this._model.doAction(
- FlexLayout.Actions.updateNodeAttributes(tab.getId(), {config: config}));
- }
- else {
- delete config.displayMode
- this._model.doAction(
- FlexLayout.Actions.updateNodeAttributes(tab.getId(), {config: config}));
- }
- }
-
const selected = node.getSelectedNode()
// did we actually get a node?
if (typeof selected !== 'undefined') {
@@ -164,7 +157,7 @@ class Board extends React.Component {
<img src="images/baseline-settings-20px.svg"
alt="settings"
key="settings"
- onClick={settingsToggleHandle.bind(node)}/>
+ onClick={modeToggle("settings").bind(node)}/>
)
}
// is the active (selected) tab declared as having a readme?
@@ -173,7 +166,7 @@ class Board extends React.Component {
<img src="images/readme-grey.svg"
alt="readme"
key="readme"
- onClick={readmeToggleHandle.bind(node)}/>
+ onClick={modeToggle("readme").bind(node)}/>
)
}
}
--
GitLab