From 04ba95f9979991e5d93b4f7ea5deca0118c73b7c Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 22 Oct 2020 23:23:11 +0300
Subject: [PATCH] buttons for previous next
---
.../ExandedFindAndReplaceComponent.js | 25 ++++++++++++++++---
.../findAndReplace/FindComponent.js | 22 ++++++++++++++--
2 files changed, 41 insertions(+), 6 deletions(-)
diff --git a/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js b/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js
index c42edf520..4393d703e 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js
@@ -68,7 +68,6 @@ const StyledIcon = styled(Icon)`
const CloseWrapper = styled.div`
margin-left: auto;
- border-left: 1px solid #e0e2e7;
`;
const FindReplaceInput = styled.input`
@@ -118,7 +117,7 @@ const ButtonReplaceAll = styled.button`
`;
const PreviousNextContainer = styled.div`
- margin: 5px 0 0 auto;
+ margin: 3px 0 0 auto;
svg {
padding: ${grid(2)};
@@ -133,6 +132,12 @@ const PreviousNextContainer = styled.div`
}
`;
+const PreviousNextButton = styled.span`
+ &:focus {
+ outline: none;
+ }
+`;
+
const ExandedFindAndReplaceComponent = ({ close, nonExpandedText }) => {
const { app, view } = useContext(WaxContext);
const searchRef = useRef(null);
@@ -206,6 +211,14 @@ const ExandedFindAndReplaceComponent = ({ close, nonExpandedText }) => {
close();
};
+ const findNext = () => {
+ console.log('next');
+ };
+
+ const findPrevious = () => {
+ console.log('previous');
+ };
+
return (
<Wrapper>
<TitleContainer>
@@ -240,8 +253,12 @@ const ExandedFindAndReplaceComponent = ({ close, nonExpandedText }) => {
<ButtonReplace onClick={replace}>Replace</ButtonReplace>
<ButtonReplaceAll onClick={replaceAll}>Replace All</ButtonReplaceAll>
<PreviousNextContainer>
- <StyledIcon name="navigatePrevious" />
- <StyledIcon name="navigateNext" />
+ <PreviousNextButton onClick={findPrevious} role="button" tabIndex="0">
+ <StyledIcon name="navigatePrevious" />
+ </PreviousNextButton>
+ <PreviousNextButton onClick={findNext} role="button" tabIndex="0">
+ <StyledIcon name="navigateNext" />
+ </PreviousNextButton>
</PreviousNextContainer>
</ControlContainer>
</Wrapper>
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
index 900fffe9a..70ac578a3 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
@@ -70,6 +70,12 @@ const CloseWrapper = styled.div`
margin-left: 1%;
`;
+const PreviousNextButton = styled.span`
+ &:focus {
+ outline: none;
+ }
+`;
+
const ExpandedWrapper = styled.div``;
const FindComponent = ({ close, expand, setPreviousSearcValue }) => {
@@ -126,6 +132,14 @@ const FindComponent = ({ close, expand, setPreviousSearcValue }) => {
setPreviousSearcValue(searchValue);
};
+ const findNext = () => {
+ console.log('next');
+ };
+
+ const findPrevious = () => {
+ console.log('previous');
+ };
+
return (
<Wrapper>
<SingleRow>
@@ -139,8 +153,12 @@ const FindComponent = ({ close, expand, setPreviousSearcValue }) => {
/>
<CounterInput> {counterText} </CounterInput>
</SearchInputWrapper>
- <StyledIcon name="navigatePrevious" />
- <StyledIcon name="navigateNext" />
+ <PreviousNextButton onClick={findPrevious} role="button" tabIndex="0">
+ <StyledIcon name="navigatePrevious" />
+ </PreviousNextButton>
+ <PreviousNextButton onClick={findNext} role="button" tabIndex="0">
+ <StyledIcon name="navigateNext" />
+ </PreviousNextButton>
<ExpandedWrapper onClick={showExpanded}>
<StyledIcon name="more" />
--
GitLab