uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 12:30:32 +09:00
Code Issues Releases Activity

chore: new animation

Browse Source
This commit is contained in:
uetchy 2020-03-07 13:16:01 +09:00
parent adacd60426
commit cbecbdbb2c
2 changed files with 5 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/components/Form.tsx
View File

@ -4,7 +4,7 @@ import {useTranslation} from 'react-i18next';
import {Link, useHistory} from 'react-router-dom'; import {Link, useHistory} from 'react-router-dom';
import {sanitize} from '../util/text'; import {sanitize} from '../util/text';
import {sendQueryEvent} from '../util/analytics'; import {sendQueryEvent} from '../util/analytics';
import {mobile, slideUp} from '../util/css'; import {mobile} from '../util/css';
import Suggestion from './Suggestion'; import Suggestion from './Suggestion';
import {useDeferredState} from '../util/hooks'; import {useDeferredState} from '../util/hooks';
@ -14,7 +14,6 @@ const Form: React.FC<{
const history = useHistory(); const history = useHistory();
const [inputValue, setInputValue] = useState(initialValue); const [inputValue, setInputValue] = useState(initialValue);
const [suggestionQuery, setSuggestionQuery] = useDeferredState(800, ''); const [suggestionQuery, setSuggestionQuery] = useDeferredState(800, '');
const [isFocused, setFocus] = useState(false);
const [suggested, setSuggested] = useState(false); const [suggested, setSuggested] = useState(false);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const {t} = useTranslation(); const {t} = useTranslation();
@ -66,18 +65,12 @@ const Form: React.FC<{
<form onSubmit={onSubmitQuery}> <form onSubmit={onSubmitQuery}>
<InputView <InputView
onChange={onInputChange} onChange={onInputChange}
onFocus={() => setFocus(true)} onBlur={onSubmitQuery}
onBlur={() => setFocus(false)}
value={inputValue} value={inputValue}
ref={inputRef} ref={inputRef}
placeholder={t('placeholder')} placeholder={t('placeholder')}
aria-label="search form" aria-label="search form"
/> />
{isFocused && (
<Tips>
<span>{t('pressEnterToSearch')}</span>
</Tips>
)}
</form> </form>
{queryGiven && !suggested ? ( {queryGiven && !suggested ? (
<Suggestion onSubmit={onSuggestionCompleted} query={suggestionQuery} /> <Suggestion onSubmit={onSuggestionCompleted} query={suggestionQuery} />
@ -126,8 +119,7 @@ const LogoImage = styled.img`
`; `;
const InputView = styled.input.attrs({ const InputView = styled.input.attrs({
type: 'input', type: 'search',
name: 'search',
autocomplete: 'off', autocomplete: 'off',
autocorrect: 'off', autocorrect: 'off',
autocapitalize: 'off', autocapitalize: 'off',
@ -140,6 +132,7 @@ const InputView = styled.input.attrs({
font-family: 'Montserrat', monospace; font-family: 'Montserrat', monospace;
font-weight: 600; font-weight: 600;
font-size: 6rem; font-size: 6rem;
appearance: none;
${mobile} { ${mobile} {
font-size: 2rem; font-size: 2rem;
@ -149,15 +142,3 @@ const InputView = styled.input.attrs({
color: #c8cdda; color: #c8cdda;
} }
`; `;
const Tips = styled.div`
color: #ababab;
text-align: center;
overflow: hidden;
span {
display: block;
animation: ${slideUp} 0.6s cubic-bezier(0.19, 1, 0.22, 1);
animation-fill-mode: both;
}
`;

2
web/src/util/css.ts
View File

@ -4,7 +4,7 @@ export const mobile = '@media screen and (max-width: 800px)';
export const slideUp = keyframes` export const slideUp = keyframes`
from { from {
transform: translateY(100%); transform: translateY(150%) skewY(10deg);
} }
to { to {
transform: translateY(0); transform: translateY(0);