ShareX
/
micro
mirror of https://github.com/sylv/micro.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(web): submit button

This commit is contained in:
sylv 2022-07-26 06:05:50 +08:00
parent 840defcf6d
commit 1aeaace977
6 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/package.json
View File

@ -37,7 +37,6 @@
"react": "18.2.0",
"react-dom": "^18.1.0",
"react-feather": "^2.0.9",
"react-icons": "^4.4.0",
"react-markdown": "^8.0.3",
"rehype-raw": "^6.1.1",
"remark-gfm": "^3.0.1",

6
packages/web/src/components/header/header.tsx
View File

@ -96,9 +96,9 @@ export const Header = memo(() => {
{user.data ? (
<HeaderUser userId={user.data.id} username={user.data.username} />
) : (
<Button style={ButtonStyle.Secondary} href={paths.login}>
Sign In
</Button>
<Link href={paths.login}>
<Button style={ButtonStyle.Secondary}>Sign In</Button>
</Link>
)}
</div>
</nav>

17
packages/web/src/components/input/submit.tsx Normal file
View File

@ -0,0 +1,17 @@
import type { ButtonProps } from '@ryanke/pandora';
import { Button } from '@ryanke/pandora';
import { useFormikContext } from 'formik';
import type { FC } from 'react';
/**
* Wraps a button and disables when the form is not ready to be submitted.
* Requires a form in context.
*/
export const Submit: FC<ButtonProps> = (props: ButtonProps) => {
const form = useFormikContext();
return (
<Button {...props} disabled={!form.dirty || !form.isValid || form.isSubmitting}>
{props.children}
</Button>
);
};

30
packages/web/src/containers/login-form.tsx
View File

@ -3,8 +3,8 @@ import { useRouter } from 'next/router';
import type { FC } from 'react';
import { Fragment, useCallback, useEffect } from 'react';
import * as Yup from 'yup';
import { Button } from '@ryanke/pandora';
import { Input } from '../components/input/input';
import { Submit } from '../components/input/submit';
import { useUser } from '../hooks/useUser';
const schema = Yup.object().shape({
@ -38,21 +38,19 @@ export const LoginForm: FC = () => {
redirect();
}}
>
{({ isValid, isSubmitting, dirty }) => (
<Form>
<Input id="username" type="username" placeholder="Username or email" autoComplete="username" autoFocus />
<Input
id="password"
type="password"
placeholder="Password"
autoComplete="current-password"
className="mt-2"
/>
<Button className="mt-4" type="submit" disabled={!dirty || !isValid || isSubmitting}>
Sign In
</Button>
</Form>
)}
<Form>
<Input id="username" type="username" placeholder="Username or email" autoComplete="username" autoFocus />
<Input
id="password"
type="password"
placeholder="Password"
autoComplete="current-password"
className="mt-2"
/>
<Submit className="mt-4" type="submit">
Sign In
</Submit>
</Form>
</Formik>
</Fragment>
);

20
packages/web/src/containers/signup-form.tsx
View File

@ -2,8 +2,8 @@ import { Form, Formik } from 'formik';
import type { FC } from 'react';
import { Fragment, useMemo } from 'react';
import * as Yup from 'yup';
import { Button } from '@ryanke/pandora';
import { Input } from '../components/input/input';
import { Submit } from '../components/input/submit';
import { useConfig } from '../hooks/useConfig';
export interface SignupData {
@ -41,16 +41,14 @@ export const SignupForm: FC<SignupFormProps> = ({ onSubmit }) => {
await onSubmit(values);
}}
>
{({ isValid, isSubmitting, dirty }) => (
<Form className="space-y-2">
{config.data?.requireEmails && <Input id="email" type="email" placeholder="Email" autoFocus />}
<Input id="username" type="username" placeholder="Username" autoComplete="username" />
<Input id="password" type="password" placeholder="Password" autoComplete="new-password" />
<Button className="mt-4" type="submit" disabled={!dirty || !isValid || isSubmitting}>
Sign Up
</Button>
</Form>
)}
<Form className="space-y-2">
{config.data?.requireEmails && <Input id="email" type="email" placeholder="Email" autoFocus />}
<Input id="username" type="username" placeholder="Username" autoComplete="username" />
<Input id="password" type="password" placeholder="Password" autoComplete="new-password" />
<Submit className="mt-4" type="submit">
Sign Up
</Submit>
</Form>
</Formik>
</Fragment>
);

10
pnpm-lock.yaml
View File

@ -204,7 +204,6 @@ importers:
react: 18.2.0
react-dom: ^18.1.0
react-feather: ^2.0.9
react-icons: ^4.4.0
react-markdown: ^8.0.3
rehype-raw: ^6.1.1
remark-gfm: ^3.0.1
@ -235,7 +234,6 @@ importers:
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-feather: 2.0.10_react@18.2.0
react-icons: 4.4.0_react@18.2.0
react-markdown: 8.0.3_luyos4mouogwq6z3wafb3re4ce
rehype-raw: 6.1.1
remark-gfm: 3.0.1
@ -11740,14 +11738,6 @@ packages:
react: 18.2.0
dev: false
/react-icons/4.4.0_react@18.2.0:
resolution: {integrity: sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==}
peerDependencies:
react: '*'
dependencies:
react: 18.2.0
dev: false
/react-is/16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}