From f5dc56a7e954bfee74413171a0462c323d47f09f Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 29 Oct 2020 11:12:38 +0200
Subject: [PATCH] special characters component structure and click outside
 close

---
 .../SpecialCharactersComponent.js             | 52 +++++++++++++++++--
 .../SpecialCharactersTool.js                  |  8 ++-
 .../src/components/tables/CreateTable.js      |  2 +-
 3 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
index b0bf081f2..71e98f86a 100644
--- a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
+++ b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
@@ -1,23 +1,69 @@
 /* eslint react/prop-types: 0 */
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
 import { WaxContext } from 'wax-prosemirror-core';
+import { each, groupBy, map } from 'lodash';
 import Icon from '../../helpers/Icon';
+import CharactersList from './CharactersList';
 
 const Wrapper = styled.div`
   width: 400px;
+  height: 200px;
+  overflow: hidden;
   background: #fff;
   font-size: 14px;
-  border-radius: 1.03093% / 8%;
   box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px 0px,
     rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;
   transform-origin: 50% 50% 0px;
   padding: ${grid(2)};
 `;
 
+const SearchInput = styled.input`
+  font-size: 15px;
+  font-weight: 400;
+  border-radius: 2px;
+  border: none;
+  padding: ${grid(1)} ${grid(10)} ${grid(1)} ${grid(1)};
+  width: 85%;
+  box-shadow: inset 0 0 0 1px rgba(27, 43, 75, 0.28);
+  ::placeholder {
+    color: #d8dae0;
+  }
+  &:focus {
+    outline: none;
+  }
+`;
+
+const CharactersListComponent = styled.div`
+  height: 150px;
+  overflow-y: sroll;
+`;
+
+const LastUsedComponent = styled.div``;
+
 const SpecialCharactersComponent = ({ close }) => {
-  return <Wrapper>Special Characters</Wrapper>;
+  const searchRef = useRef(null);
+  const [searchValue, setSearchValue] = useState('');
+  const GroupedCharacters = groupBy(CharactersList, 'group');
+  const onChange = () => {
+    setSearchValue(searchRef.current.value);
+    console.log(GroupedCharacters);
+  };
+
+  return (
+    <Wrapper>
+      <SearchInput
+        ref={searchRef}
+        type="text"
+        placeholder="Search"
+        value={searchValue}
+        onChange={onChange}
+      />
+      <CharactersListComponent>Characters List</CharactersListComponent>
+      <LastUsedComponent>Characters Last Used</LastUsedComponent>
+    </Wrapper>
+  );
 };
 
 export default SpecialCharactersComponent;
diff --git a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
index c6b2b3f26..ff6bbc9d4 100644
--- a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
+++ b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
@@ -1,10 +1,11 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useRef } from 'react';
 
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
 
 import MenuButton from '../../ui/buttons/MenuButton';
 import SpecialCharactersComponent from './SpecialCharactersComponent';
+import useOnClickOutside from '../../helpers/useOnClickOutside';
 
 const Wrapper = styled.div`
   font-size: 0;
@@ -22,10 +23,13 @@ const DropWrapper = styled.div`
 const SpecialCharactersTool = ({ view = {}, item }) => {
   const { icon, title } = item;
   const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef();
+
+  useOnClickOutside(ref, () => setIsOpen(false));
 
   const MemorizedDropdown = useMemo(
     () => (
-      <Wrapper>
+      <Wrapper ref={ref}>
         <MenuButton
           active={isOpen}
           disabled={false}
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index 42a08ffa9..032de1c8b 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -31,7 +31,7 @@ const CreateTable = ({ view = {}, item }) => {
   }
 
   const { state } = view;
-  const { enable, icon, run, select, title } = item;
+  const { icon, run, select, title } = item;
   const ref = useRef();
   const [isOpen, setIsOpen] = useState(false);
 
-- 
GitLab