From 5eeed90dba22be6cbc3ee17a433933223bf14429 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 3 Feb 2020 16:31:13 +0200
Subject: [PATCH] ToolGroupComponent
---
wax-prosemirror-components/index.js | 3 ++
.../src/components/ToolGroupComponent.js | 42 +++++++++++++++++
wax-prosemirror-services/src/lib/ToolGroup.js | 46 ++++---------------
3 files changed, 54 insertions(+), 37 deletions(-)
create mode 100644 wax-prosemirror-components/src/components/ToolGroupComponent.js
diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index 38e547ec9..31b5aed9f 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -5,3 +5,6 @@ export { default as icons } from "./src/icons/icons";
export { default as TableDropDown } from "./src/components/TableDropDown";
export { default as ImageUpload } from "./src/components/ImageUpload";
export { default as LeftMenuTitle } from "./src/components/LeftMenuTitle";
+export {
+ default as ToolGroupComponent
+} from "./src/components/ToolGroupComponent";
diff --git a/wax-prosemirror-components/src/components/ToolGroupComponent.js b/wax-prosemirror-components/src/components/ToolGroupComponent.js
new file mode 100644
index 000000000..d1a90b093
--- /dev/null
+++ b/wax-prosemirror-components/src/components/ToolGroupComponent.js
@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { isFunction } from "lodash";
+import styled from "styled-components";
+
+const InnerStyled = styled.div`
+ display: flex;
+ width: 0;
+ top: 40px;
+ position: relative;
+ right: 100%;
+`;
+
+const ToolGroupComponent = ({ view, tools, name, title }) => {
+ const [more, showHide] = useState(false),
+ toolsShown = [],
+ rest = [],
+ DisplayTitle = isFunction(title) ? title : () => title;
+
+ tools.forEach(tool => {
+ tool.hideOnToolbar
+ ? rest.push(tool.renderTool(view))
+ : toolsShown.push(tool.renderTool(view));
+ });
+
+ return (
+ <div>
+ <DisplayTitle />
+ {toolsShown}
+ {rest.length && !more ? (
+ <button onClick={() => showHide(!more)}>...</button>
+ ) : null}
+ {more && (
+ <div>
+ <button onClick={() => showHide(!more)}>...</button>
+ <InnerStyled>{rest}</InnerStyled>
+ </div>
+ )}
+ </div>
+ );
+};
+
+export default ToolGroupComponent;
diff --git a/wax-prosemirror-services/src/lib/ToolGroup.js b/wax-prosemirror-services/src/lib/ToolGroup.js
index 93ae0ef7d..0191bfc95 100644
--- a/wax-prosemirror-services/src/lib/ToolGroup.js
+++ b/wax-prosemirror-services/src/lib/ToolGroup.js
@@ -1,6 +1,6 @@
import React, { useState } from "react";
import { injectable } from "inversify";
-import { isFunction } from "lodash";
+import { ToolGroupComponent } from "wax-prosemirror-components";
@injectable()
export default class ToolGroup {
@@ -42,43 +42,15 @@ export default class ToolGroup {
}
renderTools(view) {
- const [more, showHide] = useState(false);
- const tools = [];
- const rest = [];
- this._tools.forEach(tool => {
- if (tool.hideOnToolbar) {
- rest.push(tool.renderTool(view));
- } else {
- tools.push(tool.renderTool(view));
- }
- });
-
- const Title = isFunction(this.title) ? this.title : () => this.title;
-
+ const { name } = this.constructor;
return (
- <div key={`groupName-${this.constructor.name}`}>
- <Title />
- {tools}
- {rest.length && !more ? (
- <button onClick={() => showHide(!more)}>...</button>
- ) : null}
- {more && (
- <div>
- <button onClick={() => showHide(!more)}>...</button>
- <div
- style={{
- display: "flex",
- width: "0",
- top: "40px",
- position: "relative",
- right: "100%"
- }}
- >
- {rest}
- </div>
- </div>
- )}
- </div>
+ <ToolGroupComponent
+ key={`groupName-${name}`}
+ view={view}
+ tools={this._tools}
+ title={this.title}
+ name={name}
+ />
);
}
}
--
GitLab