From d253f867588f125c678f1d47aed8b1d9c0699279 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 29 Oct 2020 14:00:07 +0200
Subject: [PATCH] render lists
---
.../SpecialCharactersComponent.js | 27 +++++++++++++++----
1 file changed, 22 insertions(+), 5 deletions(-)
diff --git a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
index 71e98f86a..fe693ad72 100644
--- a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
+++ b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
@@ -3,7 +3,7 @@ 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 { groupBy } from 'lodash';
import Icon from '../../helpers/Icon';
import CharactersList from './CharactersList';
@@ -37,7 +37,7 @@ const SearchInput = styled.input`
const CharactersListComponent = styled.div`
height: 150px;
- overflow-y: sroll;
+ overflow-y: scroll;
`;
const LastUsedComponent = styled.div``;
@@ -45,10 +45,27 @@ const LastUsedComponent = styled.div``;
const SpecialCharactersComponent = ({ close }) => {
const searchRef = useRef(null);
const [searchValue, setSearchValue] = useState('');
- const GroupedCharacters = groupBy(CharactersList, 'group');
+ const groupedCharacters = groupBy(CharactersList, 'group');
const onChange = () => {
setSearchValue(searchRef.current.value);
- console.log(GroupedCharacters);
+ };
+
+ const renderList = () => {
+ const lists = [];
+
+ Object.keys(groupedCharacters).forEach(key => {
+ lists.push(
+ <div key={key}>
+ {key}
+ <>
+ {groupedCharacters[key].map((item, index) => {
+ return <div>{item.unicode}</div>;
+ })}
+ </>
+ </div>,
+ );
+ });
+ return <div>{lists}</div>;
};
return (
@@ -60,7 +77,7 @@ const SpecialCharactersComponent = ({ close }) => {
value={searchValue}
onChange={onChange}
/>
- <CharactersListComponent>Characters List</CharactersListComponent>
+ <CharactersListComponent>{renderList()}</CharactersListComponent>
<LastUsedComponent>Characters Last Used</LastUsedComponent>
</Wrapper>
);
--
GitLab