From 696bb4f671ce6228ada51b596a48ac5edbf908cc Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 13 Oct 2020 19:02:10 +0300
Subject: [PATCH] create table with useMemo
---
.../src/components/tables/CreateTable.js | 79 ++++++++++++++-----
1 file changed, 61 insertions(+), 18 deletions(-)
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index c7795ea5e..ff64c3cea 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -1,11 +1,25 @@
/* eslint react/prop-types: 0 */
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useMemo } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
+import styled from 'styled-components';
+import { grid } from '@pubsweet/ui-toolkit';
-import Dropdown from '../../ui/buttons/Dropdown';
+import MenuButton from '../../ui/buttons/MenuButton';
import InsertTableTool from '../../ui/tables/InsertTableTool';
+const Wrapper = styled.div`
+ font-size: 0;
+ position: relative;
+ z-index: 2;
+`;
+
+const DropWrapper = styled.div`
+ margin-top: ${grid(1)};
+ position: absolute;
+ background: white;
+`;
+
const CreateTable = ({ view = {}, item }) => {
const {
view: { main },
@@ -15,33 +29,62 @@ const CreateTable = ({ view = {}, item }) => {
view = main;
}
- const [showTool, setShowTool] = useState(false);
- const toggleShowTool = () => setShowTool(!showTool);
-
- const { state, dispatch } = view;
+ const { state } = view;
const { enable, icon, run, select, title } = item;
+ const [isOpen, setIsOpen] = useState(false);
const dropComponent = (
<InsertTableTool
- onGridSelect={colRows => {
- run(colRows, state, dispatch);
- }}
+ onGridSelect={(colRows, editorState, editorDispatch) =>
+ handleSelect(colRows, view.state, view.dispatch)
+ }
/>
);
+ const handleSelect = (colRows, editorState, editorDispatch) => {
+ run(colRows, editorState, editorDispatch);
+ setIsOpen(!isOpen);
+ };
+
const isDisabled =
enable && !enable(state) && !(select && select(state, activeViewId));
- return (
- <Dropdown
- active={showTool}
- dropComponent={dropComponent}
- iconName={icon}
- disabled={isDisabled}
- onClick={toggleShowTool}
- title={title}
- />
+ const MemorizedDropdown = useMemo(
+ () => (
+ <Wrapper>
+ <MenuButton
+ active={isOpen}
+ disabled={isDisabled}
+ iconName={icon}
+ onMouseDown={() => {
+ setIsOpen(!isOpen);
+ }}
+ title={title}
+ />
+
+ {isOpen && <DropWrapper>{dropComponent}</DropWrapper>}
+ </Wrapper>
+ ),
+ [isDisabled, isOpen],
);
+
+ return MemorizedDropdown;
+
+ // const MemorizedDropdown = useMemo(
+ // () => (
+ // <Dropdown
+ // active={showTool}
+ // dropComponent={dropComponent}
+ // iconName={icon}
+ // disabled={isDisabled}
+ // onMouseDown={toggleShowTool}
+ // title={title}
+ // />
+ // ),
+ // [isDisabled, showTool],
+ // );
+ //
+ // return MemorizedDropdown;
};
export default CreateTable;
--
GitLab