From 7ed3ecf5efdd69f8563df262a80094be49edbab2 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 16 Oct 2020 09:04:14 +0300
Subject: [PATCH] find and replace tool button and create component helpers
---
.../findAndReplace/FindAndReplaceTool.js | 63 ++++++++++++++++++-
.../src/components/tables/CreateTable.js | 24 +------
.../{ui/comments => helpers}/DateParser.js | 0
.../src/helpers/useOnClickOutside.js | 25 ++++++++
wax-prosemirror-components/src/icons/icons.js | 6 ++
.../src/ui/comments/CommentItem.js | 2 +-
.../FindAndReplaceService/FindAndReplace.js | 2 +-
7 files changed, 95 insertions(+), 27 deletions(-)
rename wax-prosemirror-components/src/{ui/comments => helpers}/DateParser.js (100%)
create mode 100644 wax-prosemirror-components/src/helpers/useOnClickOutside.js
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
index 8296fabc1..33790dab2 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
@@ -1,6 +1,63 @@
-import React from 'react';
+import React, { useEffect, useRef, useMemo, useContext, useState } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
import styled from 'styled-components';
+import { grid } from '@pubsweet/ui-toolkit';
-export default () => {
- return <span>Find</span>;
+import MenuButton from '../../ui/buttons/MenuButton';
+
+const CreateTable = ({ view = {}, item }) => {
+ const {
+ view: { main },
+ activeViewId,
+ } = useContext(WaxContext);
+ if (item.onlyOnMain) {
+ view = main;
+ }
+
+ 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 { state } = view;
+ const { enable, icon, run, select, title } = item;
+ const ref = useRef();
+ const [isOpen, setIsOpen] = useState(false);
+
+ const dropComponent = <div> find and replace</div>;
+
+ // const isDisabled =
+ // enable && !enable(state) && !(select && select(state, activeViewId));
+ //
+ // useOnClickOutside(ref, () => setIsOpen(false));
+
+ const MemorizedDropdown = useMemo(
+ () => (
+ <Wrapper ref={ref}>
+ <MenuButton
+ active={isOpen}
+ // disabled={isDisabled}
+ iconName={icon}
+ onMouseDown={() => {
+ setIsOpen(!isOpen);
+ }}
+ title={title}
+ />
+
+ {isOpen && <DropWrapper>{dropComponent}</DropWrapper>}
+ </Wrapper>
+ ),
+ [isOpen],
+ );
+
+ return MemorizedDropdown;
};
+
+export default CreateTable;
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index 31b2ec382..f88c45dc8 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -1,12 +1,13 @@
/* eslint react/prop-types: 0 */
-import React, { useState, useContext, useMemo, useEffect, useRef } from 'react';
+import React, { useState, useContext, useMemo, useRef } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
import MenuButton from '../../ui/buttons/MenuButton';
import InsertTableTool from '../../ui/tables/InsertTableTool';
+import useOnClickOutside from '../../helpers/useOnClickOutside';
const Wrapper = styled.div`
font-size: 0;
@@ -72,25 +73,4 @@ const CreateTable = ({ view = {}, item }) => {
return MemorizedDropdown;
};
-// Hook
-const useOnClickOutside = (ref, handler) => {
- useEffect(() => {
- const listener = event => {
- /* Do nothing if clicking ref's element or descendent elements */
- if (!ref.current || ref.current.contains(event.target)) {
- return;
- }
-
- handler(event);
- };
-
- document.addEventListener('mousedown', listener);
- document.addEventListener('touchstart', listener);
-
- return () => {
- document.removeEventListener('mousedown', listener);
- document.removeEventListener('touchstart', listener);
- };
- }, [ref, handler]);
-};
export default CreateTable;
diff --git a/wax-prosemirror-components/src/ui/comments/DateParser.js b/wax-prosemirror-components/src/helpers/DateParser.js
similarity index 100%
rename from wax-prosemirror-components/src/ui/comments/DateParser.js
rename to wax-prosemirror-components/src/helpers/DateParser.js
diff --git a/wax-prosemirror-components/src/helpers/useOnClickOutside.js b/wax-prosemirror-components/src/helpers/useOnClickOutside.js
new file mode 100644
index 000000000..25dffb0b9
--- /dev/null
+++ b/wax-prosemirror-components/src/helpers/useOnClickOutside.js
@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+// Hook
+const useOnClickOutside = (ref, handler) => {
+ useEffect(() => {
+ const listener = event => {
+ /* Do nothing if clicking ref's element or descendent elements */
+ if (!ref.current || ref.current.contains(event.target)) {
+ return;
+ }
+
+ handler(event);
+ };
+
+ document.addEventListener('mousedown', listener);
+ document.addEventListener('touchstart', listener);
+
+ return () => {
+ document.removeEventListener('mousedown', listener);
+ document.removeEventListener('touchstart', listener);
+ };
+ }, [ref, handler]);
+};
+
+export default useOnClickOutside;
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index 016facfe0..061b56b58 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -218,4 +218,10 @@ export default {
<path d="M5 4v3h5.5v12h3V7H19V4z" />
</Svg>
),
+ findAndReplace: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24" fill="none">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M11 6c1.38 0 2.63.56 3.54 1.46L12 10h6V4l-2.05 2.05C14.68 4.78 12.93 4 11 4c-3.53 0-6.43 2.61-6.92 6H6.1c.46-2.28 2.48-4 4.9-4zm5.64 9.14c.66-.9 1.12-1.97 1.28-3.14H15.9c-.46 2.28-2.48 4-4.9 4-1.38 0-2.63-.56-3.54-1.46L10 12H4v6l2.05-2.05C7.32 17.22 9.07 18 11 18c1.55 0 2.98-.51 4.14-1.36L20 21.49 21.49 20l-4.85-4.86z" />
+ </Svg>
+ ),
};
diff --git a/wax-prosemirror-components/src/ui/comments/CommentItem.js b/wax-prosemirror-components/src/ui/comments/CommentItem.js
index 0baeb8c2e..3afd06ba8 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentItem.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentItem.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import styled from 'styled-components';
import { grid, th } from '@pubsweet/ui-toolkit';
-import DateParser from './DateParser';
+import DateParser from '../../helpers/DateParser';
const Wrapper = styled.div``;
diff --git a/wax-prosemirror-services/src/FindAndReplaceService/FindAndReplace.js b/wax-prosemirror-services/src/FindAndReplaceService/FindAndReplace.js
index 0b4c557e9..87472e990 100644
--- a/wax-prosemirror-services/src/FindAndReplaceService/FindAndReplace.js
+++ b/wax-prosemirror-services/src/FindAndReplaceService/FindAndReplace.js
@@ -9,7 +9,7 @@ export default
@injectable()
class FindAndReplace extends Tools {
title = 'Find And Replace';
- icon = 'find';
+ icon = 'findAndReplace';
name = 'find';
get run() {
--
GitLab