Advertisement
Guest User

Untitled

a guest
Feb 22nd, 2020
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.41 KB | None | 0 0
  1. import React from "react";
  2.  
  3. import { Col, Row, Grid } from "react-native-easy-grid";
  4. import { Header, Input, Label, Item, Icon } from "native-base";
  5. import CartListPopOver from "../../popover/CartList/CartList.js";
  6. import Refs from "../../common/Refs.js";
  7. import LeftHeader from "./components/LeftHeader.js";
  8. import {searchProduct} from '../../actions/action';
  9. import {connect} from 'react-redux'
  10.  
  11. class LayoutHeader extends React.Component {
  12.  
  13. onSearch = (e) =>{
  14. this.props.dispatch(searchProduct(e))
  15. }
  16.  
  17. render() {
  18. const { colWidth, withSearchBar, withCartMenu } = this.props;
  19. return (
  20. <React.Fragment>
  21. <Header style={{ backgroundColor: "#007dbb" }}>
  22. <Grid>
  23. <Row style={{ justifyContent: "center", alignItems: "center" }}>
  24. <Col style={{ width: colWidth.left }}>
  25. <LeftHeader {...this.props} />
  26. </Col>
  27. {withSearchBar && (
  28. <Col style={{ width: colWidth.center }}>
  29. <Item
  30. rounded
  31. regular
  32. style={{
  33. height: 30,
  34. backgroundColor: "#f6f7f8",
  35. width: "100%"
  36. }}
  37. >
  38. <Label style={{ paddingLeft: 15 }}>
  39. <Icon
  40. type="FontAwesome"
  41. name="search"
  42. style={{ fontSize: 17, color: "#0070c5" }}
  43. />
  44. </Label>
  45. <Input
  46. style={{ fontSize: 14 }} placeholder="Search"
  47. onChangeText={this.onSearch}
  48. />
  49. </Item>
  50. </Col>
  51. )}
  52. {withCartMenu && (
  53. <Col style={{ width: colWidth.right, alignItems: "flex-end" }}>
  54. <CartListPopOver
  55. {...this.props}
  56. ref={cartRef => {
  57. Refs.setRef(cartRef, "cartListPop");
  58. }}
  59. />
  60. </Col>
  61. )}
  62. </Row>
  63. </Grid>
  64. </Header>
  65. </React.Fragment>
  66. );
  67. }
  68. }
  69.  
  70. const mapStateToProps = state =>({
  71. searchProduct : state.searchme.searchField
  72. })
  73. export default connect(mapStateToProps,{searchProduct})(LayoutHeader);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement