Instantly share code, notes, and snippets.
Created
June 1, 2020 14:56
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
Save nsulistiyawan/7e55b65e180bac3967a5ff379df0bd8d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Fragment } from "react"; | |
import { Link } from "react-router-dom"; | |
import $ from "jquery"; | |
import { | |
MDBNavbar, | |
MDBNavbarBrand, | |
MDBNavbarNav, | |
MDBNavItem, | |
MDBLink, | |
MDBNavbarToggler, | |
MDBCollapse, | |
MDBContainer, | |
MDBIcon, | |
MDBFormInline, | |
MDBModal, | |
MDBModalBody, | |
} from "mdbreact"; | |
const WhiteNavbar = (props) => { | |
const { allProducts, handleChangePlace, place } = props; | |
// state = { | |
// collapseID: '' | |
// }; | |
// toggleCollapse = collapseID => () => | |
// setState(prevState => ({ | |
// collapseID: prevState.collapseID !== collapseID ? collapseID : '' | |
// })); | |
// const { isOpen, collapseID } = state; | |
const changeRouter = async (Category) => { | |
if (props.handleRouter) { | |
props.handleRouter(Category); | |
} | |
}; | |
$("#name").bind("input", function () { | |
if (checkExists($("#name").val()) === true) { | |
changeRouter($("#name").val()); | |
} | |
}); | |
const checkExists = (inputValue) => { | |
const x = document.getElementById("potentials"); | |
let i; | |
let flag; | |
for (i = 0; i < x.options.length; i++) { | |
if (+inputValue === +x.options[i].value) { | |
flag = true; | |
} | |
} | |
return flag; | |
}; | |
const postSignout = async () => { | |
await props.doLogOut(); | |
props.history.push("/"); | |
}; | |
const isLogin = localStorage.getItem("isLogin"); | |
return ( | |
<MDBContainer | |
id="container-navbar-white" | |
className="mt-0 mb-0" | |
style={{ position: "sticky" }} | |
fluid | |
> | |
<MDBNavbar | |
color="white" | |
dark | |
expand="md" | |
className="navbar-mdbnavbar d-flex align-items-center" | |
style={{ | |
paddingLeft: "0px", | |
paddingTop: "14px", | |
marginLeft: "0px", | |
fontSize: "14px", | |
}} | |
> | |
<MDBNavbarBrand style={{ marginLeft: "180px" }}> | |
<Link to="/"> | |
<img | |
src={require("../assets/images/spacestock.svg")} | |
style={{ | |
width: "148px", | |
maxHeight: "31px", | |
paddingLeft: "0px", | |
}} | |
alt="logo" | |
/> | |
</Link> | |
</MDBNavbarBrand> | |
<MDBNavbarToggler | |
// onClick={toggleCollapse('navbarCollapse3')} | |
/> | |
{/* <MDBCollapse id='navbarCollapse3' isOpen={collapseID} navbar> */} | |
<MDBCollapse id="navbarCollapse3" navbar> | |
<MDBNavbarNav id="nav-item-white"> | |
<MDBNavItem> | |
<MDBFormInline | |
className="mr-auto m-0 ml-1 search-input-form" | |
style={{ width: "590px", border: "1px solid #c3c1c1" }} | |
> | |
<div className="dropdown"> | |
<button | |
className="dropbtn d-flex justify-content-between" | |
style={{ | |
borderRadius: "8px 0 0 8px", | |
backgroundColor: "#f15c60", | |
padding: "6px 10px 6px 15px", | |
color: "white", | |
width: "125px", | |
}} | |
> | |
Apartemen{" "} | |
<MDBIcon | |
icon="caret-down" | |
style={{ | |
color: "white", | |
paddingTop: "5px", | |
fontSize: "16px", | |
}} | |
/> | |
</button> | |
<div className="dropdown-content"> | |
<Link to="#">Apartemen</Link> | |
<Link to="#">Kantor</Link> | |
</div> | |
</div> | |
<input | |
className="form-control search-input-text" | |
type="text" | |
placeholder="Ketik lokasi atau nama gedung" | |
aria-label="Search" | |
autoComplete="off" | |
id="name" | |
value={props.place} onChange={props.handleChangePlace} | |
list="potentials" | |
/> | |
<datalist id="potentials"> | |
{allProducts.map((item, index) => ( | |
<Fragment key={index}> | |
<option id="option-list" value={item.id}> | |
{item.city} | |
</option> | |
<option id="option-list" value={item.id}> | |
{item.building} | |
</option> | |
</Fragment> | |
))} | |
; | |
</datalist> | |
<div className="input-group-append ml-0 mr-2"> | |
<MDBIcon | |
icon="search" | |
style={{ color: "rgba(195, 193, 193, 0.5)" }} | |
/> | |
</div> | |
</MDBFormInline> | |
</MDBNavItem> | |
{/* <MDBNavItem className="my-auto "> */} | |
<MDBLink | |
type="button" | |
className="text-reset font-weight-bold ml-5 mr-0 my-auto" | |
data-toggle="modal" | |
data-target="#modalContactForm" | |
onClick={props.toggle} | |
to="#" | |
> | |
<MDBIcon | |
brand | |
icon="whatsapp" | |
className="logo-icon-whatsapp" | |
style={{ | |
color: "#29a860 !important", | |
fontSize: "17px", | |
fontWeight: "600", | |
}} | |
/>{" "} | |
Hubungi kami | |
</MDBLink> | |
<MDBModal isOpen={props.isOpen} toggle={props.toggle} centered> | |
<MDBModalBody toggle={props.toggle} className="contact-us-modal"> | |
<h2 className="modal-form-title mt-2 mb-4"> | |
Contact Us via WhatsApp | |
</h2> | |
<input | |
type="text" | |
id="nameInput" | |
placeholder="Name*" | |
className="form-control form-control-sm modal-input-form" | |
required | |
/> | |
<br /> | |
<input | |
type="email" | |
id="emailInput" | |
placeholder="Email*" | |
className="form-control form-control-sm modal-input-form" | |
required | |
/> | |
<br /> | |
<MDBFormInline className="mr-auto m-auto phone-input-form d-flex align-items-center"> | |
<div | |
className="px-1 pt-2" | |
style={{ | |
borderRight: "1px solid #ccc", | |
height: "100%", | |
fontSize: "12px", | |
}} | |
> | |
+62 | |
</div> | |
<input | |
type="tel" | |
id="whatsappNumber" | |
placeholder="WhatsApp Number*" | |
className="form-control form-control-sm modal-input-form2 mt-0" | |
required | |
/> | |
</MDBFormInline> | |
<div className="text-center my-3 ml-0"> | |
<button className="btn btn-primary btn-whatsapp-modal text-capitalize pt-2"> | |
WhatsApp Now | |
</button> | |
</div> | |
</MDBModalBody> | |
</MDBModal> | |
{/* </MDBNavItem> */} | |
{isLogin ? ( | |
<MDBLink | |
onClick={() => postSignout()} | |
className="text-reset my-auto ml-0 font-weight-bold" | |
style={{ marginRight: "200px", color: "#f15c60" }} | |
> | |
Logout | |
</MDBLink> | |
) : ( | |
<MDBLink | |
className="text-reset my-auto ml-0 font-weight-bold" | |
style={{ marginRight: "200px" }} | |
to="/signin" | |
> | |
Login/Register | |
</MDBLink> | |
)} | |
</MDBNavbarNav> | |
</MDBCollapse> | |
</MDBNavbar> | |
</MDBContainer> | |
); | |
}; | |
export default WhiteNavbar; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment