Skip to content

Commit 825162e

Browse files
RomanHotsiyRomanHotsiy
committed
feat: add clear icon to searchbox
1 parent b797c96 commit 825162e

File tree

2 files changed

+90
-72
lines changed

2 files changed

+90
-72
lines changed

‎src/components/SearchBox/SearchBox.tsx

Lines changed: 5 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,13 @@
11
import * as React from 'react';
22

3-
import styled from '../../styled-components';
4-
53
import { IMenuItem } from '../../services/MenuStore';
64
import { SearchStore } from '../../services/SearchStore';
75
import { MenuItem } from '../SideMenu/MenuItem';
8-
import { MenuItemLabel } from '../SideMenu/styled.elements';
6+
97
import { MarkerService } from '../../services/MarkerService';
108
import { SearchDocument } from '../../services/SearchWorker.worker';
119

12-
const SearchInput = styled.input.attrs({
13-
className: 'search-input',
14-
})`
15-
width: calc(100% - ${props => props.theme.spacingUnit * 2}px);
16-
box-sizing: border-box;
17-
margin: 0 ${props => props.theme.spacingUnit}px;
18-
padding: 5px 0 5px ${props => props.theme.spacingUnit}px;
19-
border: 0;
20-
border-bottom: 1px solid #e1e1e1;
21-
font-weight: bold;
22-
font-size: 13px;
23-
color: ${props => props.theme.colors.text};
24-
background-color: transparent;
25-
outline: none;
26-
`;
27-
28-
const SearchIcon = styled((props: any) => (
29-
<svg
30-
className={props.className}
31-
version="1.1"
32-
viewBox="0 0 1000 1000"
33-
x="0px"
34-
xmlns="http://www.w3.org/2000/svg"
35-
y="0px"
36-
>
37-
<path d="M968.2,849.4L667.3,549c83.9-136.5,66.7-317.4-51.7-435.6C477.1-25,252.5-25,113.9,113.4c-138.5,138.3-138.5,362.6,0,501C219.2,730.1,413.2,743,547.6,666.5l301.9,301.4c43.6,43.6,76.9,14.9,104.2-12.4C981,928.3,1011.8,893,968.2,849.4z M524.5,522c-88.9,88.7-233,88.7-321.8,0c-88.9-88.7-88.9-232.6,0-321.3c88.9-88.7,233-88.7,321.8,0C613.4,289.4,613.4,433.3,524.5,522z" />
38-
</svg>
39-
)).attrs({
40-
className: 'search-icon',
41-
})`
42-
position: absolute;
43-
left: ${props => props.theme.spacingUnit}px;
44-
height: 1.8em;
45-
width: 0.9em;
46-
47-
path {
48-
fill: ${props => props.theme.colors.text};
49-
}
50-
`;
51-
52-
const SearchResultsBox = styled.div.attrs({
53-
className: 'search-results',
54-
})`
55-
padding: ${props => props.theme.spacingUnit / 4}px 0;
56-
background-color: #ededed;
57-
min-height: 150px;
58-
max-height: 250px;
59-
border-top: 1px solid #e1e1e1;
60-
border-bottom: 1px solid #e1e1e1;
61-
margin-top: 10px;
62-
line-height: 1.4;
63-
font-size: 0.9em;
64-
overflow: auto;
65-
66-
${MenuItemLabel} {
67-
padding-top: 6px;
68-
padding-bottom: 6px;
69-
70-
&:hover {
71-
background-color: #e1e1e1;
72-
}
73-
74-
> svg {
75-
display: none;
76-
}
77-
}
78-
`;
10+
import { ClearIcon, SearchIcon, SearchInput, SearchResultsBox } from './elements';
7911

8012
export interface SearchBoxProps {
8113
search: SearchStore;
@@ -113,13 +45,13 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
11345
this.props.marker.unmark();
11446
}
11547

116-
clear() {
48+
clear = () => {
11749
this.setState({
11850
results: [],
11951
term: '',
12052
});
12153
this.props.marker.unmark();
122-
}
54+
};
12355

12456
clearIfEsq = event => {
12557
if (event && event.keyCode === 27) {
@@ -163,6 +95,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
16395

16496
return (
16597
<div>
98+
{this.state.term && <ClearIcon onClick={this.clear}>×</ClearIcon>}
16699
<SearchIcon />
167100
<SearchInput
168101
value={this.state.term}

‎src/components/SearchBox/elements.tsx

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import * as React from 'react';
2+
import styled from '../../styled-components';
3+
import { MenuItemLabel } from '../SideMenu/styled.elements';
4+
5+
export const SearchInput = styled.input.attrs({
6+
className: 'search-input',
7+
})`
8+
width: calc(100% - ${props => props.theme.spacingUnit * 2}px);
9+
box-sizing: border-box;
10+
margin: 0 ${props => props.theme.spacingUnit}px;
11+
padding: 5px ${props => props.theme.spacingUnit / 2}px 5px ${props => props.theme.spacingUnit}px;
12+
border: 0;
13+
border-bottom: 1px solid #e1e1e1;
14+
font-weight: bold;
15+
font-size: 13px;
16+
color: ${props => props.theme.colors.text};
17+
background-color: transparent;
18+
outline: none;
19+
`;
20+
21+
export const SearchIcon = styled((props: any) => (
22+
<svg
23+
className={props.className}
24+
version="1.1"
25+
viewBox="0 0 1000 1000"
26+
x="0px"
27+
xmlns="http://www.w3.org/2000/svg"
28+
y="0px"
29+
>
30+
<path d="M968.2,849.4L667.3,549c83.9-136.5,66.7-317.4-51.7-435.6C477.1-25,252.5-25,113.9,113.4c-138.5,138.3-138.5,362.6,0,501C219.2,730.1,413.2,743,547.6,666.5l301.9,301.4c43.6,43.6,76.9,14.9,104.2-12.4C981,928.3,1011.8,893,968.2,849.4z M524.5,522c-88.9,88.7-233,88.7-321.8,0c-88.9-88.7-88.9-232.6,0-321.3c88.9-88.7,233-88.7,321.8,0C613.4,289.4,613.4,433.3,524.5,522z" />
31+
</svg>
32+
)).attrs({
33+
className: 'search-icon',
34+
})`
35+
position: absolute;
36+
left: ${props => props.theme.spacingUnit}px;
37+
height: 1.8em;
38+
width: 0.9em;
39+
40+
path {
41+
fill: ${props => props.theme.colors.text};
42+
}
43+
`;
44+
45+
export const SearchResultsBox = styled.div.attrs({
46+
className: 'search-results',
47+
})`
48+
padding: ${props => props.theme.spacingUnit / 4}px 0;
49+
background-color: #ededed;
50+
min-height: 150px;
51+
max-height: 250px;
52+
border-top: 1px solid #e1e1e1;
53+
border-bottom: 1px solid #e1e1e1;
54+
margin-top: 10px;
55+
line-height: 1.4;
56+
font-size: 0.9em;
57+
overflow: auto;
58+
59+
${MenuItemLabel} {
60+
padding-top: 6px;
61+
padding-bottom: 6px;
62+
63+
&:hover {
64+
background-color: #e1e1e1;
65+
}
66+
67+
> svg {
68+
display: none;
69+
}
70+
}
71+
`;
72+
73+
export const ClearIcon = styled.i`
74+
position: absolute;
75+
display: inline-block;
76+
width: ${props => props.theme.spacingUnit / 2}px;
77+
text-align: center;
78+
right: ${props => props.theme.spacingUnit}px;
79+
line-height: 2em;
80+
vertical-align: middle;
81+
margin-right: 2px;
82+
cursor: pointer;
83+
font-style: normal;
84+
color: '#666';
85+
`;

0 commit comments

Comments
 (0)