Commit f5dc56a7 authored by chris's avatar chris
Browse files

special characters component structure and click outside close

parent 172a2910
/* 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;
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}
......
......@@ -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);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment