From 82a5347a2c51d58c9028770cfe7708d8c47d76f6 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 16 Oct 2020 17:59:13 +0300
Subject: [PATCH] close button plus funcionality
---
.../findAndReplace/FindAndReplaceComponent.js | 33 ++++++++++++++++---
.../findAndReplace/FindAndReplaceTool.js | 6 +++-
wax-prosemirror-components/src/icons/icons.js | 6 ++++
3 files changed, 39 insertions(+), 6 deletions(-)
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js
index 1a60e782c..9d4c0bc6d 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js
@@ -1,5 +1,6 @@
-import React, { useRef, useMemo, useContext, useState } from 'react';
-import { WaxContext } from 'wax-prosemirror-core';
+/* eslint react/prop-types: 0 */
+
+import React from 'react';
import styled from 'styled-components';
import { grid, th } from '@pubsweet/ui-toolkit';
import Icon from '../../helpers/Icon';
@@ -26,7 +27,7 @@ const SearchInput = styled.input`
border-radius: 2px;
border: none;
padding: ${grid(1)};
- width: 80%;
+ width: 73%;
box-shadow: inset 0 0 0 1px rgba(27, 43, 75, 0.28);
::placeholder {
color: #d8dae0;
@@ -42,9 +43,24 @@ const StyledIcon = styled(Icon)`
cursor: pointer;
`;
-const FindAndReplaceComponent = () => {
+const CloseWrapper = styled.div`
+ border-left: 1px solid #e0e2e7;
+ margin-left: 1%;
+`;
+
+const ExpandedWrapper = styled.div``;
+
+const FindAndReplaceComponent = ({ close }) => {
const onChange = () => {};
+ const closeFind = () => {
+ close();
+ };
+
+ const showExpanded = () => {
+ console.log('expanded');
+ };
+
return (
<Wrapper>
<SingleRow>
@@ -56,7 +72,14 @@ const FindAndReplaceComponent = () => {
/>
<StyledIcon name="navigatePrevious" />
<StyledIcon name="navigateNext" />
- <StyledIcon name="more" />
+
+ <ExpandedWrapper onClick={showExpanded}>
+ <StyledIcon name="more" />
+ </ExpandedWrapper>
+
+ <CloseWrapper onClick={closeFind}>
+ <StyledIcon name="close" />
+ </CloseWrapper>
</SingleRow>
</Wrapper>
);
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
index 95aaf8e3f..5e4724e45 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
@@ -73,7 +73,11 @@ const FindAndReplaceTool = ({ view = {}, item }) => {
{isOpen && (
<DropWrapper style={style} ref={dropElement}>
- <FindAndReplaceComponent />
+ <FindAndReplaceComponent
+ close={() => {
+ setIsOpen(false);
+ }}
+ />
</DropWrapper>
)}
</Wrapper>
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index e5bb65706..6f3fdc7be 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -236,4 +236,10 @@ export default {
<path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z" />
</Svg>
),
+ close: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24" fill="none">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+ </Svg>
+ ),
};
--
GitLab