4 changed files with 157 additions and 49 deletions
@ -1,26 +1,113 @@ |
|||
|
|||
import { SubmitHandler, useForm } from "react-hook-form"; |
|||
import { Button, FormGroup, InputGroup, Intent, Tooltip } from "@blueprintjs/core" |
|||
import { FC, ReactNode, useCallback, useState } from "react" |
|||
import { SubmitHandler, useForm } from "react-hook-form" |
|||
|
|||
interface IProps { |
|||
|
|||
onSuccess?: () => void |
|||
children?: { |
|||
Wrapper?: FC<{ children: ReactNode }> |
|||
Default?: FC<{ children: ReactNode }> |
|||
} |
|||
} |
|||
|
|||
type Inputs = { |
|||
email: string, |
|||
}; |
|||
email: string |
|||
password: string |
|||
} |
|||
|
|||
export function Login({ onSuccess, children }: IProps) { |
|||
const [showPassword, setShowPassword] = useState(false) |
|||
const { |
|||
register, |
|||
handleSubmit, |
|||
formState: { errors }, |
|||
} = useForm<Inputs>() |
|||
const onSubmit: SubmitHandler<Inputs> = data => { |
|||
console.log(data) |
|||
onSuccess && onSuccess() |
|||
} |
|||
|
|||
export function Login(props: IProps) { |
|||
const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>(); |
|||
const onSubmit: SubmitHandler<Inputs> = data => console.log(data); |
|||
const inputEmail = register("email", { required: true }) |
|||
const inputPwd = register("password", { |
|||
required: { |
|||
value: true, |
|||
message: "请输入密码", |
|||
}, |
|||
minLength: { |
|||
value: 6, |
|||
message: "不能少于6个字符", |
|||
}, |
|||
maxLength: { |
|||
value: 18, |
|||
message: "不能多于18个字符", |
|||
}, |
|||
}) |
|||
|
|||
console.log(watch("email")); |
|||
|
|||
return <> |
|||
<form onSubmit={handleSubmit(onSubmit)}> |
|||
<input {...register("email", { required: true })} /> |
|||
{errors.email && <span>This field is required</span>} |
|||
<input type="submit" /> |
|||
</form> |
|||
</> |
|||
} |
|||
const WrapperComp = useCallback( |
|||
({ children: child }: { children: ReactNode }) => children?.Wrapper?.({ children: child }) ?? <>{child}</>, |
|||
[children?.Wrapper], |
|||
) |
|||
const DefaultComp = useCallback( |
|||
({ children: child }: { children: ReactNode }) => children?.Default?.({ children: child }) ?? <>{child}</>, |
|||
[children?.Default], |
|||
) |
|||
|
|||
return ( |
|||
<> |
|||
<form onSubmit={handleSubmit(onSubmit)}> |
|||
<WrapperComp> |
|||
<FormGroup |
|||
intent={errors.email ? Intent.DANGER : Intent.NONE} |
|||
helperText={errors.email && "请输入一个可用的邮箱"} |
|||
label="邮箱" |
|||
labelInfo="(必须)" |
|||
labelFor="text-input" |
|||
> |
|||
<InputGroup |
|||
intent={errors.email ? Intent.DANGER : Intent.NONE} |
|||
name={inputEmail.name} |
|||
placeholder="请输入邮箱" |
|||
id="text-input" |
|||
onBlur={inputEmail.onBlur} |
|||
onChange={inputEmail.onChange} |
|||
inputRef={inputEmail.ref} |
|||
/> |
|||
</FormGroup> |
|||
<FormGroup |
|||
intent={errors.password ? Intent.DANGER : Intent.NONE} |
|||
helperText={errors.password && errors.password.message} |
|||
label="密码" |
|||
labelInfo="(必须)" |
|||
labelFor="pwd-input" |
|||
> |
|||
<InputGroup |
|||
id="pwd-input" |
|||
type={showPassword ? "text" : "password"} |
|||
intent={errors.password ? Intent.DANGER : Intent.NONE} |
|||
name={inputPwd.name} |
|||
onBlur={inputPwd.onBlur} |
|||
onChange={inputPwd.onChange} |
|||
inputRef={inputPwd.ref} |
|||
placeholder="请输入密码" |
|||
rightElement={ |
|||
<Tooltip content={`${showPassword ? "Hide" : "Show"} Password`}> |
|||
<Button |
|||
icon={showPassword ? "unlock" : "lock"} |
|||
intent={Intent.WARNING} |
|||
minimal={true} |
|||
onClick={() => setShowPassword(!showPassword)} |
|||
/> |
|||
</Tooltip> |
|||
} |
|||
/> |
|||
</FormGroup> |
|||
</WrapperComp> |
|||
<DefaultComp> |
|||
<Button intent="primary" type="submit"> |
|||
登陆 |
|||
</Button> |
|||
</DefaultComp> |
|||
</form> |
|||
</> |
|||
) |
|||
} |
|||
|
|||
Loading…
Reference in new issue