Merge pull request #40 from oasisprotocol/csillag/more-form-improveme…

…nts-2 More form improvements
oasisprotocol · Sep 24, 2024 · ae8d5cc · ae8d5cc
2 parents 4953abc + c7c82bf
commit ae8d5cc
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 8 deletions.
diff --git a/frontend/src/components/InputFields/InputField.tsx b/frontend/src/components/InputFields/InputField.tsx
@@ -24,7 +24,7 @@ export const InputField: FC<{ controls: InputFieldControls<any> }> = ({ controls
     case 'oneOf':
       return <SelectInput {...(controls as OneOfFieldControls<any>)} />
     case 'label':
-      return <Label {...(controls as unknown as LabelControls)} />
+      return <Label {...(controls as unknown as LabelControls<any>)} />
     case 'date':
       return <DateInput {...(controls as DateFieldControls)} />
     default:

diff --git a/frontend/src/components/InputFields/Label.tsx b/frontend/src/components/InputFields/Label.tsx
@@ -6,7 +6,7 @@ import { WithVisibility } from './WithVisibility'
 import { WithLabelAndDescription } from './WithLabelAndDescription'
 import { WithValidation } from './WithValidation'
 
-export const Label: FC<LabelControls> = props => {
+export const Label: FC<LabelControls<any>> = props => {
   const { value, allProblems, formatter, renderer, classnames } = props
 
   const formattedValue = formatter ? formatter(value) : value

diff --git a/frontend/src/components/InputFields/useInputField.ts b/frontend/src/components/InputFields/useInputField.ts
@@ -267,7 +267,7 @@ export function useInputField<DataType>(
   const [validatorProgress, setValidatorProgress] = useState<number>()
   const [validationStatusMessage, setValidationStatusMessage] = useState<string | undefined>()
 
-  const validatorControls: ValidatorControls = {
+  const validatorControls: Pick<ValidatorControls, 'updateStatus'> = {
     updateStatus: ({ progress, message }) => {
       if (progress) setValidatorProgress(progress)
       if (message) setValidationStatusMessage(message)
@@ -314,7 +314,7 @@ export function useInputField<DataType>(
             : await validator(
                 cleanValue,
                 forceChange || !wasOK || lastValidatedData !== cleanValue,
-                validatorControls,
+                { ...validatorControls, isStillFresh },
                 params.reason,
               ) // Execute the current validators
 

diff --git a/frontend/src/components/InputFields/useLabel.ts b/frontend/src/components/InputFields/useLabel.ts
@@ -6,8 +6,8 @@ export type FormatterFunction<DataType> = (rawValue: DataType) => string
 
 export type RendererFunction<DataType> = (rawValue: DataType) => ReactNode
 
-export type LabelProps = Pick<
-  InputFieldProps<string>,
+export type LabelProps<DataType = string> = Pick<
+  InputFieldProps<DataType>,
   | 'name'
   | 'label'
   | 'description'
@@ -24,13 +24,16 @@ export type LabelProps = Pick<
   renderer?: RendererFunction<string>
 }
 
-export type LabelControls = Omit<InputFieldControls<string>, 'placeholder' | 'enabled' | 'whyDisabled'> & {
+export type LabelControls<DataType> = Omit<
+  InputFieldControls<DataType>,
+  'placeholder' | 'enabled' | 'whyDisabled'
+> & {
   classnames: string[]
   formatter: FormatterFunction<string> | undefined
   renderer: RendererFunction<string> | undefined
 }
 
-export const useLabel = (props: LabelProps): LabelControls => {
+export function useLabel<DataType = string>(props: LabelProps<DataType>): LabelControls<DataType> {
   const { classnames = [], formatter, renderer } = props
 
   const controls = useInputField(

diff --git a/frontend/src/components/InputFields/util.ts b/frontend/src/components/InputFields/util.ts
@@ -54,6 +54,7 @@ export function flatten<Data>(array: Data[][]): Data[] {
 export type AllProblems = Record<string, Problem[]>
 
 export type ValidatorControls = {
+  isStillFresh: () => boolean
   updateStatus: (status: { message?: string; progress?: number }) => void
 }