From e5ea7d8ee6968b247ee612ebb81c0aad24cd35ce Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 19 Oct 2020 14:46:06 +0300
Subject: [PATCH] set non expanded searc text into expanded
---
.../ExandedFindAndReplaceComponent.js | 25 ++++++++++++++++---
.../findAndReplace/FindAndReplaceComponent.js | 17 ++++++++++---
.../findAndReplace/FindComponent.js | 3 ++-
3 files changed, 36 insertions(+), 9 deletions(-)
diff --git a/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js b/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js
index c0fd8ec97..2c2d20d12 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js
@@ -1,6 +1,6 @@
/* eslint react/prop-types: 0 */
-import React from 'react';
+import React, { useState, useRef } from 'react';
import styled from 'styled-components';
import { grid, th } from '@pubsweet/ui-toolkit';
import Icon from '../../helpers/Icon';
@@ -109,11 +109,17 @@ const PreviousNextContainer = styled.div`
}
`;
-const ExandedFindAndReplaceComponent = ({ close }) => {
+const ExandedFindAndReplaceComponent = ({ close, nonExpandedText }) => {
+ const searchRef = useRef(null);
+ const replaceRef = useRef(null);
+ const [searchValue, setsearchValue] = useState(nonExpandedText);
const closeFind = () => {
close();
};
+ const onChangeSearchInput = () => {};
+ const onChangeReplaceInput = () => {};
+
const replace = () => {};
const replaceAll = () => {};
@@ -126,9 +132,20 @@ const ExandedFindAndReplaceComponent = ({ close }) => {
</CloseWrapper>
</TitleContainer>
<InputLabel>Find</InputLabel>
- <FindReplaceInput type="text" placeholder="Something is this doc" />
+ <FindReplaceInput
+ type="text"
+ ref={searchRef}
+ placeholder="Something is this doc"
+ value={searchValue}
+ onChange={onChangeSearchInput}
+ />
<InputLabel>Replace with</InputLabel>
- <FindReplaceInput type="text" placeholder="Replace phrase" />
+ <FindReplaceInput
+ type="text"
+ ref={replaceRef}
+ placeholder="Replace text"
+ onChange={onChangeReplaceInput}
+ />
<CheckBoxWrapper>
<CheckBox name="case-sensitive" label="Case Sensitive" />
</CheckBoxWrapper>
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js
index baf9eb0da..2a36e0ed1 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js
@@ -5,17 +5,26 @@ import ExandedFindAndReplaceComponent from './ExandedFindAndReplaceComponent';
const FindAndReplaceComponent = ({ close }) => {
const [isExpanded, setExpanded] = useState(false);
-
+ const [nonExpandedText, SetnonExpandedText] = useState('');
const expand = () => {
setExpanded(true);
};
- const getNonExpandedText = () => {};
+ const getNonExpandedText = searcString => {
+ SetnonExpandedText(searcString);
+ };
return isExpanded ? (
- <ExandedFindAndReplaceComponent close={close} previousText="" />
+ <ExandedFindAndReplaceComponent
+ close={close}
+ nonExpandedText={nonExpandedText}
+ />
) : (
- <FindComponent close={close} expand={expand} />
+ <FindComponent
+ close={close}
+ expand={expand}
+ setPreviousSearcValue={getNonExpandedText}
+ />
);
};
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
index d647f05df..32b11ec5a 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
@@ -71,7 +71,7 @@ const CloseWrapper = styled.div`
const ExpandedWrapper = styled.div``;
-const FindComponent = ({ close, expand }) => {
+const FindComponent = ({ close, expand, setPreviousSearcValue }) => {
const {
app,
view: { main },
@@ -157,6 +157,7 @@ const FindComponent = ({ close, expand }) => {
const showExpanded = () => {
expand();
+ setPreviousSearcValue(searchValue);
};
return (
--
GitLab