-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(SearchBox): header search form and sidebar popup UI
- Loading branch information
Showing
4 changed files
with
188 additions
and
6 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import React from 'react' | ||
| interface IProps { | ||
| title?: string, | ||
| size?: number, | ||
| color?: string | ||
| } | ||
| export default function IconSearchSVG({ title = "Qidirish", size = 16, color = 'black' }: IProps) { | ||
| return ( | ||
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 32 32"> | ||
| <title>{title}</title> | ||
| <path fill={color} d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path> | ||
| </svg> | ||
| ) | ||
| } |
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| import React, {useState} from 'react' | ||
| import IconSearchSVG from "../../components/svg/IconSearchSVG"; | ||
| import posed from "react-pose"; | ||
| import styled from "styled-components"; | ||
|
|
||
| interface IProps { | ||
| } | ||
|
|
||
| const SidebarStyle = styled.div` | ||
| .overlay-wrapper{ | ||
| position:fixed; | ||
| right:0; | ||
| top:60px; | ||
| bottom:0; | ||
| left:0; | ||
| z-index:1; | ||
| background:rgba(0,0,0,0.2); | ||
| } | ||
| .search-sidebar{ | ||
| position:fixed; | ||
| right:0; | ||
| top:60px; | ||
| bottom:0; | ||
| z-index:2; | ||
| overflow:auto; | ||
| width: 340px; | ||
| background: white; | ||
| box-shadow: -1px 1px 50px rgba(0,0,0,0.1); | ||
| display:flex; | ||
| flex-direction: column; | ||
| } | ||
| .search-sidebar header{ | ||
| display:flex; | ||
| border: 1px solid rgba(0,0,0,0.1); | ||
| color:#999; | ||
| } | ||
| .search-sidebar header h3{ | ||
| flex:1; | ||
| height:59px; | ||
| line-height:59px; | ||
| margin:0 10px; | ||
| font-weight:normal; | ||
| } | ||
| } | ||
| .search-sidebar header h3 svg{ | ||
| vertical-align:middle; | ||
| margin-right:3px; | ||
| } | ||
| .search-sidebar header .btn{ | ||
| background: transparent; | ||
| width: 40px; | ||
| color:#999; | ||
| } | ||
| ` | ||
|
|
||
| const SidebarBody = styled.div` | ||
| ul{ | ||
| font-size: 18px; | ||
| li{ | ||
| cursor:pointer; | ||
| padding: 15px 20px; | ||
| display:flex; | ||
| color:#666; | ||
| span{ | ||
| flex:1; | ||
| } | ||
| &+li{ | ||
| border-top:1px solid #fafafa; | ||
| } | ||
| svg{ | ||
| margin-right: 10px; | ||
| vertical-align: middle; | ||
| } | ||
| &.disabled{ | ||
| color:#ccc; | ||
| } | ||
| .feature-information{ | ||
| margin:0; | ||
| color:#999; | ||
| text-align:center; | ||
| } | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| const OverlayBox = posed.div({ | ||
| hidden: {opacity: 0}, | ||
| visible: {opacity: 1}, | ||
| }); | ||
|
|
||
| const SearchSidebar = posed.div({ | ||
| hidden: {opacity: 0}, | ||
| visible: {opacity: 1}, | ||
| exit: { | ||
| x: '200%' | ||
| }, | ||
| enter: { | ||
| x: '0%', | ||
| beforeChildren: true, | ||
| staggerChildren: 10 | ||
| } | ||
| }); | ||
|
|
||
|
|
||
| export default function WordSearchFormComponent({}: IProps) { | ||
| const [visibleSearchBar, setVisibleSearchBar] = useState<boolean>(false); | ||
| const searchSubmitListener = (e: any) => { | ||
|
|
||
| } | ||
| const inputKeyupListener = (e: any) => { | ||
| if (e.target.value) { | ||
|
|
||
| setVisibleSearchBar(true); | ||
| } else { | ||
| setVisibleSearchBar(false); | ||
| } | ||
| } | ||
| return ( | ||
| <> | ||
| <form className="word-search-box" onSubmit={searchSubmitListener}> | ||
| <input type="text" | ||
| className="word-search" | ||
| placeholder={"so'zni qidiring..."} | ||
| onKeyUp={inputKeyupListener} | ||
| /> | ||
| <button className="btn" type="submit"> | ||
| <IconSearchSVG color="white"/> | ||
| </button> | ||
| </form> | ||
|
|
||
| <SidebarStyle> | ||
| <OverlayBox | ||
| onClick={e => setVisibleSearchBar(false)} | ||
| className="overlay-wrapper" pose={visibleSearchBar ? 'visible' : 'hidden'}> | ||
| </OverlayBox> | ||
| <SearchSidebar className="search-sidebar" pose={visibleSearchBar ? 'visible' : 'hidden'}> | ||
| <SidebarBody> | ||
| <ul className="list"> | ||
| <li> | ||
| Word | ||
| </li> | ||
| </ul> | ||
| </SidebarBody> | ||
| <footer> | ||
|
|
||
| </footer> | ||
| </SearchSidebar> | ||
| </SidebarStyle> | ||
| </> | ||
| ) | ||
| } |