You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.7 KiB
94 lines
2.7 KiB
import React, { Component } from "react"; |
|
import { connect } from "react-redux"; |
|
import { publicApi } from "~/Redux/actions"; |
|
|
|
import Select from "./Select/index"; |
|
import dropdown from "../../../assets/icons/dropdown.png"; |
|
|
|
import "./index.scss"; |
|
class HomeSearch extends Component { |
|
state = { |
|
filters: { |
|
levels: [], |
|
search: null, |
|
}, |
|
}; |
|
|
|
componentDidUpdate(prevProps, prevState) { |
|
if ( |
|
prevState.filters.levels !== this.state.filters.levels || |
|
prevState.filters.search !== this.state.filters.search |
|
) { |
|
this.props.filterNewProducts(this.state.filters); |
|
} |
|
} |
|
|
|
render() { |
|
const { levels } = this.props; |
|
return window.innerWidth > 1000 ? ( |
|
<div className="home-search d-flex"> |
|
<input |
|
placeholder={window.t("جستجو در عناوین کتاب ...")} |
|
className="home-search__input d-flex" |
|
type="text" |
|
name="searchBox" |
|
onChange={(e) => |
|
this.setState({ |
|
filters: { ...this.state.filters, search: e.target.value }, |
|
}) |
|
} |
|
/> |
|
<div className="home-search__select"> |
|
<Select options={levels} name="levels" parent={this} /> |
|
{/* <img src={dropdown} alt={window.t("فلش") style={{ position: "relative" }} /> */} |
|
</div> |
|
<button className="home-search__submit">{window.t("جستجو")}</button> |
|
</div> |
|
) : ( |
|
<> |
|
<div className="home-mobile-search d-flex"> |
|
<div className="home-mobile-search__select" style={{ width: "100%" }}> |
|
<Select options={levels} name="levels" parent={this} /> |
|
<img src={dropdown} alt={window.t("فلش")} /> |
|
</div> |
|
</div> |
|
<div className="home-mobile-search "> |
|
<input |
|
ref="input" |
|
placeholder={window.t("نام یک کتاب را جستجو کنید")} |
|
className="home-mobile-search__input " |
|
type="text" |
|
name="searchBox" |
|
onChange={(e) => |
|
this.setState({ |
|
filters: { ...this.state.filters, search: e.target.value }, |
|
}) |
|
} |
|
/> |
|
|
|
<button |
|
className="home-mobile-search__submit" |
|
style={{ float: "left" }} |
|
onClick={() => { |
|
this.setState({ |
|
filters: { |
|
...this.state.filters, |
|
search: this.refs.input.value, |
|
}, |
|
}); |
|
}} |
|
> |
|
{window.t("جستجو")} |
|
</button> |
|
</div> |
|
</> |
|
); |
|
} |
|
} |
|
|
|
export default connect( |
|
(state) => ({ |
|
levels: state.publicApi.levels, |
|
}), |
|
{ filterNewProducts: publicApi.filterNewProducts } |
|
)(HomeSearch);
|
|
|