mirror of
https://github.com/vercel/commerce.git
synced 2025-07-04 04:01:21 +00:00
✨ feat: auto
focus input in form login/ register :%s
This commit is contained in:
parent
f29f675438
commit
a3170ee04d
@ -40,7 +40,6 @@ const Header = memo(() => {
|
||||
</div>
|
||||
</header>
|
||||
<HeaderSubMenuMobile />
|
||||
visible = {visibleModalAuthen.toString()}
|
||||
<ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
|
||||
</>
|
||||
)
|
||||
|
@ -1,11 +1,12 @@
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import React, { useRef, useEffect } from 'react'
|
||||
import { Inputcommon, ButtonCommon } from 'src/components/common'
|
||||
import { ROUTE } from 'src/utils/constanst.utils'
|
||||
import SocialAuthen from '../SocialAuthen/SocialAuthen'
|
||||
import s from '../FormAuthen.module.scss'
|
||||
import styles from './FormLogin.module.scss'
|
||||
import classNames from 'classnames'
|
||||
import { CustomInputCommon } from 'src/utils/type.utils'
|
||||
|
||||
interface Props {
|
||||
isHide: boolean,
|
||||
@ -13,6 +14,14 @@ interface Props {
|
||||
}
|
||||
|
||||
const FormLogin = ({ onSwitch, isHide }: Props) => {
|
||||
const emailRef = useRef<CustomInputCommon>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!isHide) {
|
||||
emailRef.current?.focus()
|
||||
}
|
||||
}, [isHide])
|
||||
|
||||
return (
|
||||
<section className={classNames({
|
||||
[s.formAuthen]: true,
|
||||
@ -20,7 +29,7 @@ const FormLogin = ({ onSwitch, isHide }: Props) => {
|
||||
})}>
|
||||
<div className={s.inner}>
|
||||
<div className={s.body}>
|
||||
<Inputcommon placeholder='Email Address' type='email' />
|
||||
<Inputcommon placeholder='Email Address' type='email' ref={emailRef} />
|
||||
<Inputcommon placeholder='Password' type='password' />
|
||||
</div>
|
||||
<div className={styles.bottom}>
|
||||
|
@ -6,10 +6,9 @@
|
||||
transform: none;
|
||||
}
|
||||
.passwordNote {
|
||||
@apply text-center caption;
|
||||
@apply text-center caption text-label;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
@apply flex justify-between items-center w-full;
|
||||
margin: 4rem auto;
|
||||
|
@ -1,9 +1,10 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import { ButtonCommon, Inputcommon } from 'src/components/common'
|
||||
import s from '../FormAuthen.module.scss'
|
||||
import styles from './FormRegister.module.scss'
|
||||
import SocialAuthen from '../SocialAuthen/SocialAuthen'
|
||||
import classNames from 'classnames'
|
||||
import { CustomInputCommon } from 'src/utils/type.utils'
|
||||
|
||||
interface Props {
|
||||
isHide: boolean,
|
||||
@ -11,6 +12,14 @@ interface Props {
|
||||
}
|
||||
|
||||
const FormRegister = ({ onSwitch, isHide }: Props) => {
|
||||
const emailRef = useRef<CustomInputCommon>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!isHide) {
|
||||
emailRef.current?.focus()
|
||||
}
|
||||
}, [isHide])
|
||||
|
||||
return (
|
||||
<section className={classNames({
|
||||
[s.formAuthen]: true,
|
||||
|
@ -1,3 +1,5 @@
|
||||
@import '../../../styles/utilities';
|
||||
|
||||
.background{
|
||||
@apply fixed inset-0 overflow-y-auto;
|
||||
background: rgba(20, 20, 20, 0.65);
|
||||
@ -10,10 +12,12 @@
|
||||
padding: 3.2rem;
|
||||
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24);
|
||||
border-radius: 1.2rem;
|
||||
.top {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.title{
|
||||
@apply font-heading heading-3;
|
||||
padding: 0 0.8rem 0 0.8rem;
|
||||
font-size: 3.2rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
.close{
|
||||
@apply absolute;
|
||||
|
Loading…
x
Reference in New Issue
Block a user