Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from "react";
- import { Col, Row, Grid } from "react-native-easy-grid";
- import { Header, Input, Label, Item, Icon } from "native-base";
- import CartListPopOver from "../../popover/CartList/CartList.js";
- import Refs from "../../common/Refs.js";
- import LeftHeader from "./components/LeftHeader.js";
- import {searchProduct} from '../../actions/action';
- import {connect} from 'react-redux'
- class LayoutHeader extends React.Component {
- onSearch = (e) =>{
- this.props.dispatch(searchProduct(e))
- }
- render() {
- const { colWidth, withSearchBar, withCartMenu } = this.props;
- return (
- <React.Fragment>
- <Header style={{ backgroundColor: "#007dbb" }}>
- <Grid>
- <Row style={{ justifyContent: "center", alignItems: "center" }}>
- <Col style={{ width: colWidth.left }}>
- <LeftHeader {...this.props} />
- </Col>
- {withSearchBar && (
- <Col style={{ width: colWidth.center }}>
- <Item
- rounded
- regular
- style={{
- height: 30,
- backgroundColor: "#f6f7f8",
- width: "100%"
- }}
- >
- <Label style={{ paddingLeft: 15 }}>
- <Icon
- type="FontAwesome"
- name="search"
- style={{ fontSize: 17, color: "#0070c5" }}
- />
- </Label>
- <Input
- style={{ fontSize: 14 }} placeholder="Search"
- onChangeText={this.onSearch}
- />
- </Item>
- </Col>
- )}
- {withCartMenu && (
- <Col style={{ width: colWidth.right, alignItems: "flex-end" }}>
- <CartListPopOver
- {...this.props}
- ref={cartRef => {
- Refs.setRef(cartRef, "cartListPop");
- }}
- />
- </Col>
- )}
- </Row>
- </Grid>
- </Header>
- </React.Fragment>
- );
- }
- }
- const mapStateToProps = state =>({
- searchProduct : state.searchme.searchField
- })
- export default connect(mapStateToProps,{searchProduct})(LayoutHeader);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement