dap-ps/discover
1
0
Fork 0
mirror of https://github.com/dap-ps/discover.git synced 2025-02-07 06:54:49 +00:00
Code Issues Projects Releases Wiki Activity

Update changes

Browse Source
This commit is contained in:
Onuwa Nnachi Isaac 2019-09-16 12:19:39 +01:00 committed by Andy Tudhope
parent a5ce9cc472
commit b087743fa9
2 changed files with 58 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/common/components/Search/Search.jsx
View File

@ -11,6 +11,7 @@ class Search extends React.Component {
this.state = { this.state = {
dapps: [], dapps: [],
isSearching: false, isSearching: false,
isOpen: false,
} }
this.nodes = React.createRef() this.nodes = React.createRef()
this.handleChange = this.handleChange.bind(this) this.handleChange = this.handleChange.bind(this)
@ -32,6 +33,7 @@ class Search extends React.Component {
this.setState({ this.setState({
isSearching: false, isSearching: false,
isOpen: false,
dapps: [], dapps: [],
}) })
} }
@ -41,15 +43,15 @@ class Search extends React.Component {
applyClass(e) { applyClass(e) {
e.preventDefault() e.preventDefault()
this.setState({ this.setState({
isSearching: true, isOpen: true,
}) })
} }
handleChange(e) { handleChange(e) {
const { value } = e.target const { value } = e.target
const { dappState } = this.props const { dappState } = this.props
this.setState({ isSearching: true })
if (value.length > 1) { if (value.length > 1) {
this.setState({ isSearching: true })
const searchExp = new RegExp(value, 'i') const searchExp = new RegExp(value, 'i')
const dapps = dappState.dapps.filter(dapp => { const dapps = dappState.dapps.filter(dapp => {
if (dapp.name.search(searchExp) != -1) { if (dapp.name.search(searchExp) != -1) {
@ -61,36 +63,44 @@ class Search extends React.Component {
} else { } else {
this.setState({ this.setState({
dapps: [], dapps: [],
isSearching: false,
}) })
} }
} }
render() { render() {
const { searchStyle, searchResultStyle } = this.props const { searchStyle, searchResultStyle } = this.props
const { dapps, isSearching } = this.state const { dapps, isSearching, isOpen } = this.state
const cssClassVisible = isSearching ? styles.isOpen : '' const searchBoxIsOpen = isOpen ? styles.isOpen : ''
return ( return (
<> <>
<div className={`${styles.dim}`} /> <div className={styles.dim} />
<div <div
ref={this.nodes} className={[
className={[styles.search_container, cssClassVisible].join(' ')} searchBoxIsOpen,
onClick={e => this.applyClass(e)} isSearching && dapps.length > 0 ? styles.isSearching : '',
].join(' ')}
> >
<img src={searchIcon} alt="Search Icon" width="16" height="16" /> <div
<input ref={this.nodes}
type="text" className={styles.search_container}
onChange={e => this.handleChange(e)} onClick={e => this.applyClass(e)}
className={[styles.search, searchStyle].join(' ')} >
placeholder="Search Dapps" <img src={searchIcon} alt="Search Icon" width="16" height="16" />
/> <input
{isSearching && ( type="text"
<div onChange={e => this.handleChange(e)}
className={[styles.searchResults, searchResultStyle].join(' ')} className={[styles.search, searchStyle].join(' ')}
> placeholder="Search Dapps"
<SearchResultItem showActionButtons={false} dapps={dapps} /> />
</div> {isSearching && (
)} <div
className={[styles.searchResults, searchResultStyle].join(' ')}
>
<SearchResultItem showActionButtons={false} dapps={dapps} />
</div>
)}
</div>
</div> </div>
</> </>
) )

50
src/common/components/Search/Search.module.scss
View File

@ -3,7 +3,7 @@
@media (min-width: $desktop) { @media (min-width: $desktop) {
.search_container { .search_container {
height: calculateRem(20); height: calculateRem(20);
border-radius: calculateRem(40); border-radius: calculateRem(50);
background: #ffffff; background: #ffffff;
padding: calculateRem(10); padding: calculateRem(10);
position: absolute; position: absolute;
@ -14,6 +14,7 @@
display: flex; display: flex;
z-index: 1; z-index: 1;
transform: translateY(-50%); transform: translateY(-50%);
cursor: pointer;
img { img {
align-self: center; align-self: center;
@ -38,24 +39,31 @@
width: 100%; width: 100%;
} }
} }
}
.isOpen { .isOpen {
width: calculateRem(240);
.search {
width: calculateRem(240); width: calculateRem(240);
display: block; .search {
width: calculateRem(240);
display: block;
}
} }
.searchResults { .isSearching {
z-index: 99; .search_container {
display: block; border-bottom-left-radius: 0;
position: absolute; border-bottom-right-radius: 0;
top: 1.6rem; border-top-right-radius: calculateRem(20);
background: #ffffff; border-top-left-radius: calculateRem(20);
left: 0; cursor: default;
border-bottom-left-radius: calculateRem(5); }
border-bottom-right-radius: calculateRem(5); .searchResults {
box-shadow: 0 0 0 rgba(0, 34, 51, 0.08), 0px 2px 4px rgba(0, 34, 51, 0.16); z-index: 99;
display: block;
position: absolute;
top: calculateRem(40);
background: #ffffff;
left: 0;
box-shadow: 0 0 0 rgba(0, 34, 51, 0.08), 0px 2px 4px rgba(0, 34, 51, 0.16);
}
} }
} }
@ -85,14 +93,8 @@
.searchResults { .searchResults {
z-index: 99; z-index: 99;
top: calculateRem(100); top: calculateRem(100);
width: 92vw; width: 94vw;
background-position: center center; margin-left: calculateRem(-16);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
} }
} }
.isOpen {
width: 90vw;
}
} }