-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
185 additions
and
1 deletion.
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,140 @@ | ||
import _ from 'lodash'; | ||
import React from 'react'; | ||
import { useIntl } from 'react-intl'; | ||
import { useSelector } from 'react-redux'; | ||
import styled, { withTheme } from 'styled-components'; | ||
|
||
import { MagnifyGlassIcon, MagnifyGlassIconWhite } from '../icons'; | ||
|
||
const Input = styled('input')` | ||
color: ${props => props.theme.colors[props.selectedTheme].onSurface}; | ||
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; | ||
background-color: transparent; | ||
display: flex; | ||
border: 1px solid #d9d9d9; | ||
justify-content: center; | ||
border-top-left-radius: 0.1rem; | ||
border-bottom-left-radius: 0.1rem; | ||
font-size: 1rem; | ||
margin: 0; | ||
${props => | ||
(props.size === 'large' && 'width: 31.5625rem;height:2.5rem') || | ||
(props.size === 'default' && 'width: 32.0625rem;height:2rem') || | ||
(props.size === 'small' && 'width: 32.5625rem;height:1.5rem')}; | ||
&:focus { | ||
outline: none; | ||
} | ||
&::placeholder { | ||
font-family: ${props => props.theme.typography.primary.regular}; | ||
color: ${props => | ||
props.theme.hexToRgba( | ||
props.theme.colors[props.selectedTheme].onSurface, | ||
0.25, | ||
)}; | ||
} | ||
`; | ||
|
||
const SearchIconContainer = styled('div')` | ||
cursor: pointer; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
border-top-right-radius: 0.1rem; | ||
border-bottom-right-radius: 0.1rem; | ||
${props => props.outline && 'border: 0.0625rem solid #d9d9d9;'}; | ||
border-left-style: none; | ||
${props => | ||
(props.size === 'large' && 'width: 2.6875rem;height:2.625rem') || | ||
(props.size === 'default' && 'width: 2.1875rem;height:2.125rem') || | ||
(props.size === 'small' && 'width: 1.6875rem;height:1.625rem')}; | ||
${props => | ||
(typeof props.buttonText === 'string' && | ||
props.size === 'large' && | ||
'width:81px; height:2.75rem;') || | ||
(typeof props.buttonText === 'string' && | ||
props.size === 'default' && | ||
'width:81px; height:2.125rem;') || | ||
(typeof props.buttonText === 'string' && | ||
props.size === 'small' && | ||
'width:81px; height:1.625rem;')}; | ||
${props => | ||
(props.usePrimaryButton && | ||
props.size === 'large' && | ||
'background-color: #1890FF;height:2.75rem;') || | ||
(props.usePrimaryButton && | ||
props.size === 'default' && | ||
'background-color: #1890FF;height:2.25rem;') || | ||
(props.usePrimaryButton && | ||
props.size === 'small' && | ||
'background-color: #1890FF;height:1.75rem;')}; | ||
`; | ||
|
||
const SearchContainer = withTheme(styled('div')` | ||
font-family: ${props => props.theme.typography.primary.regular}; | ||
margin-top: 0.625rem; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
`); | ||
|
||
const ButtonSearchText = withTheme(styled('p')` | ||
margin: 0; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
font-size: 1rem; | ||
height: 2.5rem; | ||
width: 3.125rem; | ||
color: ${props => (props.usePrimaryButton ? '#ffffff' : '#000000')}; | ||
`); | ||
|
||
const SearchInput = withTheme( | ||
({ | ||
usePrimaryButton = false, | ||
buttonText = null, | ||
onChange, | ||
size = 'default', | ||
outline = false, | ||
onSearch = _.noop, | ||
}) => { | ||
const intl = useIntl(); | ||
const appStore = useSelector(state => state.app); | ||
|
||
return ( | ||
<SearchContainer usePrimaryButton={usePrimaryButton} size={size}> | ||
<Input | ||
type="text" | ||
selectedTheme={appStore.theme} | ||
placeholder={intl.formatMessage({ id: 'search' })} | ||
onChange={onChange} | ||
size={size} | ||
outline={outline} | ||
/> | ||
<SearchIconContainer | ||
outline={outline} | ||
onClick={onSearch} | ||
size={size} | ||
selectedTheme={appStore.theme} | ||
usePrimaryButton={usePrimaryButton} | ||
buttonText={buttonText}> | ||
{(buttonText && ( | ||
<ButtonSearchText usePrimaryButton={usePrimaryButton}> | ||
{buttonText} | ||
</ButtonSearchText> | ||
)) || | ||
(!buttonText && usePrimaryButton ? ( | ||
<MagnifyGlassIconWhite width={'13.75'} height={'13.75'} /> | ||
) : ( | ||
<MagnifyGlassIcon width={'13.75'} height={'13.75'} /> | ||
))} | ||
</SearchIconContainer> | ||
</SearchContainer> | ||
); | ||
}, | ||
); | ||
|
||
export { SearchInput }; |
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 |
---|---|---|
@@ -1,3 +1,4 @@ | ||
export * from './SearchInputField'; | ||
export * from './PrimaryButton'; | ||
export * from './StandardInput'; | ||
export * from './StandardInput'; | ||
export * from './SearchInput'; |
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,25 @@ | ||
import React from 'react'; | ||
import { withTheme } from 'styled-components'; | ||
|
||
const MagnifyGlassIconWhite = withTheme( | ||
({ style, width = 24, height = 24, cursor = 'unset' }) => { | ||
|
||
return ( | ||
<div style={{ cursor, width, height, ...style }}> | ||
<svg | ||
width={`${width}px`} | ||
height={`${height}px`} | ||
viewBox="0 0 14 14" | ||
fill="none" | ||
xmlns="http://www.w3.org/2000/svg"> | ||
<path | ||
d="M13.2125 12.3516L9.15469 8.29375C9.78438 7.47969 10.125 6.48438 10.125 5.4375C10.125 4.18438 9.63594 3.00937 8.75156 2.12344C7.86719 1.2375 6.68906 0.75 5.4375 0.75C4.18594 0.75 3.00781 1.23906 2.12344 2.12344C1.2375 3.00781 0.75 4.18438 0.75 5.4375C0.75 6.68906 1.23906 7.86719 2.12344 8.75156C3.00781 9.6375 4.18438 10.125 5.4375 10.125C6.48438 10.125 7.47813 9.78438 8.29219 9.15625L12.35 13.2125C12.3619 13.2244 12.376 13.2338 12.3916 13.2403C12.4071 13.2467 12.4238 13.2501 12.4406 13.2501C12.4575 13.2501 12.4741 13.2467 12.4897 13.2403C12.5052 13.2338 12.5194 13.2244 12.5312 13.2125L13.2125 12.5328C13.2244 12.5209 13.2338 12.5068 13.2403 12.4912C13.2467 12.4757 13.2501 12.459 13.2501 12.4422C13.2501 12.4254 13.2467 12.4087 13.2403 12.3931C13.2338 12.3776 13.2244 12.3635 13.2125 12.3516V12.3516ZM7.9125 7.9125C7.25 8.57344 6.37187 8.9375 5.4375 8.9375C4.50313 8.9375 3.625 8.57344 2.9625 7.9125C2.30156 7.25 1.9375 6.37187 1.9375 5.4375C1.9375 4.50313 2.30156 3.62344 2.9625 2.9625C3.625 2.30156 4.50313 1.9375 5.4375 1.9375C6.37187 1.9375 7.25156 2.3 7.9125 2.9625C8.57344 3.625 8.9375 4.50313 8.9375 5.4375C8.9375 6.37187 8.57344 7.25156 7.9125 7.9125Z" | ||
fill="white" | ||
/> | ||
</svg> | ||
</div> | ||
); | ||
}, | ||
); | ||
|
||
export { MagnifyGlassIconWhite }; |
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