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

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);