oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

disable form fields when form is submitting

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-07-17 13:19:38 +02:00
parent 8bfa030bed
commit a67a35e508
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/atoms/Input/index.module.css
View File

@ -3,6 +3,11 @@
position: relative; position: relative;
} }
.field[data-is-submitting] {
pointer-events: none;
opacity: 0.4;
}
.field .field { .field .field {
margin-bottom: calc(var(--spacer) / 2); margin-bottom: calc(var(--spacer) / 2);
} }

16
src/components/atoms/Input/index.tsx
View File

@ -3,7 +3,8 @@ import InputElement from './InputElement'
import Help from './Help' import Help from './Help'
import Label from './Label' import Label from './Label'
import styles from './index.module.css' import styles from './index.module.css'
import { ErrorMessage } from 'formik' import { ErrorMessage, FormikState, FieldProps, FieldInputProps } from 'formik'
import { MetadataPublishForm } from '../../../@types/Metadata'
export interface InputProps { export interface InputProps {
name: string name: string
@ -28,19 +29,18 @@ export interface InputProps {
pattern?: string pattern?: string
min?: string min?: string
disabled?: boolean disabled?: boolean
field?: { field?: FieldInputProps<any>
name: string form?: FormikState<any>
value: string
onChange: () => void
onBlur: () => void
}
} }
export default function Input(props: Partial<InputProps>): ReactElement { export default function Input(props: Partial<InputProps>): ReactElement {
const { required, name, label, help, additionalComponent, field } = props const { required, name, label, help, additionalComponent, field } = props
return ( return (
<div className={styles.field}> <div
className={styles.field}
data-is-submitting={props.form && props.form.isSubmitting ? true : null}
>
<Label htmlFor={name} required={required}> <Label htmlFor={name} required={required}>
{label} {label}
</Label> </Label>

2
src/components/pages/Publish/PublishForm.tsx
View File

@ -86,7 +86,7 @@ export default function PublishForm({
]) ])
// User feedback and redirect to new asset detail page // User feedback and redirect to new asset detail page
toast.success('asset created successfully') ddo && toast.success('asset created successfully')
toast.dismiss(submittingToast) toast.dismiss(submittingToast)
// TODO: reset form state and make sure persistant form in localStorage is cleared // TODO: reset form state and make sure persistant form in localStorage is cleared