From ce33d16ace1dad6476691c83a287c73e6e758de2 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 9 Nov 2020 13:06:54 +0200
Subject: [PATCH] filter characters
---
.../SpecialCharactersComponent.js | 32 ++++++++++++++++---
1 file changed, 27 insertions(+), 5 deletions(-)
diff --git a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
index beaa9e642..03058cfed 100644
--- a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
+++ b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
@@ -1,10 +1,16 @@
/* eslint react/prop-types: 0 */
-import React, { useRef, useState, useContext } from 'react';
+import React, {
+ useRef,
+ useState,
+ useContext,
+ useCallback,
+ useEffect,
+} from 'react';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
import { v4 as uuidv4 } from 'uuid';
import { WaxContext } from 'wax-prosemirror-core';
-import { filter, groupBy } from 'lodash';
+import { filter, groupBy, debounce } from 'lodash';
import Icon from '../../helpers/Icon';
import CharactersList from './CharactersList';
@@ -74,6 +80,7 @@ const SpecialCharacter = styled.div`
border: 1px solid black;
border-radius: 50%;
span {
+ font-size: 16px;
text-align: center;
padding-top: 3px;
}
@@ -91,8 +98,15 @@ const SpecialCharactersComponent = ({ close }) => {
);
const onChange = () => {
setSearchValue(searchRef.current.value);
+ };
+
+ const delayedSearch = useCallback(
+ debounce(() => searchCharacters(), 300),
+ [searchValue],
+ );
+
+ const searchCharacters = () => {
const filtertedSpecialCharacters = filter(CharactersList, value => {
- console.log(value);
if (value.name.toLowerCase().includes(searchValue.toLowerCase()))
return value.name;
return false;
@@ -100,6 +114,10 @@ const SpecialCharactersComponent = ({ close }) => {
setSpecialCharactersList(filtertedSpecialCharacters);
};
+ useEffect(() => {
+ delayedSearch();
+ }, [searchValue, delayedSearch]);
+
const insertCharacter = () => {};
const renderList = () => {
@@ -110,9 +128,13 @@ const SpecialCharactersComponent = ({ close }) => {
<SpecialCharactersGroup key={key}>
<GroupTitle> {key} </GroupTitle>
<GroupCharacters>
- {groupedCharacters[key].map((item, index) => {
+ {groupBy(specialCharactersList, 'group')[key].map((item, index) => {
return (
- <SpecialCharacter key={uuidv4()} onMouseDown={insertCharacter}>
+ <SpecialCharacter
+ key={uuidv4()}
+ onMouseDown={insertCharacter}
+ title={item.name}
+ >
<span>{item.unicode}</span>
</SpecialCharacter>
);
--
GitLab