image picker to use value & groups config API

Author: kkartunov

src-ts/lib/form/form-definition.model.ts

@@ -1,4 +1,4 @@
-import { FormButton, FormGroup } from '.'
+import { FormButton, FormGroup, FormGroupOptions } from '.'
 
 export type FormAction = 'save' | 'submit' | undefined
 
@@ -10,6 +10,7 @@ export interface FormButtons {
 export interface FormDefinition {
     readonly buttons: FormButtons
     readonly groups?: Array<FormGroup>
+    readonly groupsOptions?: FormGroupOptions
     readonly shortName?: string
     readonly subtitle?: string
     readonly successMessage?: string

src-ts/lib/form/form-functions/form.functions.ts

@@ -68,6 +68,7 @@ export async function onSubmitAsync<T>(
     formValue: T,
     save: (value: T) => Promise<void>,
     onSuccess?: () => void,
+    customValidateForm?: (formElements: HTMLFormControlsCollection, event: ValidationEvent, inputs: ReadonlyArray<FormInputModel>) => boolean
 ): Promise<void> {
 
     event.preventDefault()
@@ -84,7 +85,7 @@ export async function onSubmitAsync<T>(
     // want to have it look like the submit succeeded
     const formValues: HTMLFormControlsCollection = (event.target as HTMLFormElement).elements
     if (action === 'submit') {
-        const isValid: boolean = validateForm(formValues, action, inputs)
+        const isValid: boolean = (customValidateForm || validateForm)(formValues, action, inputs)
         if (!isValid) {
             return Promise.reject()
         }
@@ -119,16 +120,19 @@ function handleFieldEvent<T>(input: HTMLInputElement | HTMLTextAreaElement, inpu
 
     const inputDef: FormInputModel = getInputModel(inputs, input.name)
 
+    const inputEl: HTMLInputElement = input as HTMLInputElement
+
     if (event === 'change') {
         inputDef.dirty = input.value !== originalValue
     }
     inputDef.touched = true
 
     // set the def value
     if (input.type === 'checkbox') {
-        const checkbox: HTMLInputElement = input as HTMLInputElement
-        inputDef.value = checkbox.checked
-        inputDef.checked = checkbox.checked
+        inputDef.value = inputEl.checked
+        inputDef.checked = inputEl.checked
+    } else if (input.type === 'file') {
+        inputDef.value = inputEl.files || undefined
     } else {
         inputDef.value = input.value
     }
@@ -181,7 +185,9 @@ function validateField(formInputDef: FormInputModel, formElements: HTMLFormContr
         })
 }
 
-export function validateForm(formElements: HTMLFormControlsCollection, event: 'blur' | 'change' | 'submit' | 'initial', inputs: ReadonlyArray<FormInputModel>): boolean {
+export type ValidationEvent =  'blur' | 'change' | 'submit' | 'initial'
+
+export function validateForm(formElements: HTMLFormControlsCollection, event: ValidationEvent, inputs: ReadonlyArray<FormInputModel>): boolean {
     const errors: ReadonlyArray<FormInputModel> = inputs?.filter(formInputDef => {
         formInputDef.dirty = formInputDef.dirty || event === 'submit'
         validateField(formInputDef, formElements, event)

src-ts/lib/form/form-group.model.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react'
+
 import { FormInputModel } from './form-input.model'
 
 export interface FormGroup {
@@ -6,3 +8,8 @@ export interface FormGroup {
   readonly instructions?: string
   readonly title?: string
 }
+
+export interface FormGroupOptions {
+  groupWrapStyles?: CSSProperties
+  renderGroupDividers?: boolean
+}

src-ts/lib/form/form-groups/FormGroups.module.scss

@@ -1,5 +1,11 @@
+@import "../../styles/includes";
+
 .form-groups {
     display: grid;
     grid-template-columns: 1fr;
     justify-content: center;
+
+    @include ltemd {
+        grid-template-columns: 1fr !important;
+    }
 }

src-ts/lib/form/form-groups/FormGroups.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent, FocusEvent } from 'react'
 
+import { PageDivider } from '../../page-divider'
 import { FormDefinition } from '../form-definition.model'
 import { FormGroup } from '../form-group.model'
 import { FormInputModel } from '../form-input.model'
@@ -33,6 +34,8 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
         const tabIndex: number = getTabIndex(input, index)
 
         let inputElement: JSX.Element
+
+        /* tslint:disable:cyclomatic-complexity */
         switch (input.type) {
 
             case 'rating':
@@ -90,6 +93,8 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                 inputElement = (
                     <InputImagePicker
                         {...input}
+                        onChange={onChange}
+                        value={input.value}
                     />
                 )
                 break
@@ -126,15 +131,21 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                     group={element}
                     renderFormInput={renderInputField}
                     totalGroupCount={formDef.groups?.length || 0}
+                    renderDividers={props.formDef.groupsOptions?.renderGroupDividers}
                 />
             )
         })
         || []
 
     return (
-        <div className={styles['form-groups']}>
-            {formGroups}
-        </div>
+        <>
+            <div className={styles['form-groups']} style={props.formDef.groupsOptions?.groupWrapStyles}>
+                {formGroups}
+            </div>
+            {
+                props.formDef.groupsOptions?.renderGroupDividers === false && <PageDivider />
+            }
+        </>
     )
 }
 

src-ts/lib/form/form-groups/form-group-item/FormGroupItem.tsx

@@ -9,6 +9,7 @@ import styles from './FormGroupItem.module.scss'
 
 interface FormGroupItemProps {
     group: FormGroup
+    renderDividers?: boolean
     renderFormInput: (input: FormInputModel, index: number) => JSX.Element | undefined
     totalGroupCount: number
 }
@@ -19,10 +20,11 @@ interface ItemRowProps {
     hasMultipleGroups: boolean,
     instructions?: string | undefined,
     isMultiFieldGroup: boolean,
+    renderDividers?: boolean
     title?: string,
 }
 
-const TwoColumnItem: React.FC<ItemRowProps> = ({ element, formInputs, hasMultipleGroups, instructions, isMultiFieldGroup, title }: ItemRowProps) => {
+const TwoColumnItem: React.FC<ItemRowProps> = ({ element, formInputs, hasMultipleGroups, instructions, isMultiFieldGroup, title, renderDividers }: ItemRowProps) => {
     return (
         <>
             <div className={cn(styles['form-group-item'], !isMultiFieldGroup && styles['single-field'])}>
@@ -41,7 +43,9 @@ const TwoColumnItem: React.FC<ItemRowProps> = ({ element, formInputs, hasMultipl
                     {formInputs}
                 </div>
             </div>
-            <PageDivider styleNames={[!hasMultipleGroups ? 'spacingSmall' : '']} />
+            {
+                renderDividers !== false && <PageDivider styleNames={[!hasMultipleGroups ? 'spacingSmall' : '']} />
+            }
         </>
     )
 }
@@ -67,7 +71,7 @@ const SingleColumnItem: React.FC<ItemRowProps> = ({ formInputs, hasMultipleGroup
     )
 }
 
-const FormGroupItem: React.FC<FormGroupItemProps> = ({ group, renderFormInput, totalGroupCount }: FormGroupItemProps) => {
+const FormGroupItem: React.FC<FormGroupItemProps> = ({ group, renderDividers, renderFormInput, totalGroupCount }: FormGroupItemProps) => {
     const { instructions, title, inputs, element }: FormGroup = group
 
     const formInputs: Array<JSX.Element | undefined> = inputs?.map((field: FormInputModel, index: number) => renderFormInput(field as FormInputModel, index)) || []
@@ -77,7 +81,7 @@ const FormGroupItem: React.FC<FormGroupItemProps> = ({ group, renderFormInput, t
 
     return isCardSet ?
         <SingleColumnItem hasMultipleGroups={hasMultipleGroups} instructions={instructions} isMultiFieldGroup={isMultiFieldGroup} formInputs={formInputs} title={title} /> :
-        <TwoColumnItem hasMultipleGroups={hasMultipleGroups} element={element} instructions={instructions} isMultiFieldGroup={isMultiFieldGroup} formInputs={formInputs} title={title} />
+        <TwoColumnItem hasMultipleGroups={hasMultipleGroups} element={element} instructions={instructions} isMultiFieldGroup={isMultiFieldGroup} formInputs={formInputs} title={title} renderDividers={renderDividers} />
 }
 
 export default FormGroupItem

src-ts/lib/form/form-groups/form-input/input-image-picker/InputImagePicker.module.scss

@@ -10,6 +10,7 @@
     width: 132px;
     height: 132px;
     position: relative;
+    margin-bottom: $space-xl;
 
     @include ltemd {
         width: 100%;

src-ts/lib/form/form-groups/form-input/input-image-picker/InputImagePicker.tsx

@@ -1,13 +1,16 @@
-import { createRef, Dispatch, FC, RefObject, SetStateAction, useEffect, useState } from 'react'
+import { ChangeEvent, createRef, Dispatch, FC, RefObject, SetStateAction, useEffect, useState } from 'react'
 
 import { Button, IconOutline } from '../../../../../lib'
+import { InputValue } from '../../../form-input.model'
 
 import styles from './InputImagePicker.module.scss'
 
 interface InputImagePickerProps {
     readonly accept?: string
     readonly name: string
+    readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void
     readonly size?: number
+    readonly value?: InputValue
 }
 
 const InputImagePicker: FC<InputImagePickerProps> = (props: InputImagePickerProps) => {
@@ -48,7 +51,10 @@ const InputImagePicker: FC<InputImagePickerProps> = (props: InputImagePickerProp
                 accept={props.accept || '*'}
                 className={styles.filePickerInput}
                 ref={fileInputRef}
-                onChange={event => setFiles(event.target.files)}
+                onChange={event => {
+                    setFiles(event.target.files)
+                    props.onChange(event)
+                }}
                 size={props.size || Infinity}
             />
             {

src-ts/lib/form/form-groups/form-input/input-text/InputText.tsx

@@ -1,6 +1,7 @@
 import cn from 'classnames'
 import { FC, FocusEvent } from 'react'
 
+import { InputValue } from '../../../form-input.model'
 import { FormInputAutocompleteOption } from '../form-input-autcomplete-option.enum'
 import { InputWrapper } from '../input-wrapper'
 
@@ -25,7 +26,7 @@ export interface InputTextProps {
     readonly spellCheck?: boolean
     readonly tabIndex: number
     readonly type: InputTextTypes
-    readonly value?: string | number | boolean
+    readonly value?: InputValue
 }
 
 const InputText: FC<InputTextProps> = (props: InputTextProps) => {

src-ts/lib/form/form-input.model.ts

@@ -17,6 +17,8 @@ export interface FormCard {
     title: string
 }
 
+export type InputValue = string | boolean | FileList | undefined
+
 export interface FormInputModel {
     readonly accept?: string
     readonly autocomplete?: FormInputAutocompleteOption
@@ -44,5 +46,5 @@ export interface FormInputModel {
     touched?: boolean
     readonly type: 'card-set' | 'checkbox' | 'password' | 'radio' | 'rating' | 'text' | 'textarea' | 'image-picker'
     readonly validators?: ReadonlyArray<ValidatorFn>
-    value?: string | boolean
+    value?: InputValue
 }