Merge pull request #301 from topcoder-platform/GAME-108_bjcs

GAME-108 Support Checkboxes -> fix/GAME-108

Author: kkartunov

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

@@ -121,7 +121,13 @@ function handleFieldEvent<T>(input: HTMLInputElement | HTMLTextAreaElement, inpu
     inputDef.touched = true
 
     // set the def value
-    inputDef.value = input.value
+    if (input.type === 'checkbox') {
+        const checkbox: HTMLInputElement = input as HTMLInputElement
+        inputDef.value = checkbox.checked
+        inputDef.checked = checkbox.checked
+    } else {
+        inputDef.value = input.value
+    }
 
     // now let's validate the field
     const formElements: HTMLFormControlsCollection = (input.form as HTMLFormElement).elements

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

@@ -6,7 +6,7 @@ import { FormInputModel } from '../form-input.model'
 
 import { FormCardSet } from './form-card-set'
 import FormGroupItem from './form-group-item/FormGroupItem'
-import { InputCheckbox, InputRating, InputText, InputTextarea } from './form-input'
+import { InputRating, InputText, InputTextarea } from './form-input'
 import { FormInputRow } from './form-input-row'
 import { InputTextTypes } from './form-input/input-text/InputText'
 import FormRadio from './form-radio'
@@ -23,12 +23,13 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
 
     const { formDef, onBlur, onChange }: FormGroupsProps = props
 
-    const getTabIndex: (input: FormInputModel, index: number) => number = (input, index) => {
+    function getTabIndex(input: FormInputModel, index: number): number {
         const tabIndex: number = input.notTabbable ? -1 : index + 1 + (formDef.tabIndexStart || 0)
         return tabIndex
     }
 
-    const renderInputField: (input: FormInputModel, index: number) => JSX.Element | undefined = (input, index) => {
+    function renderInputField(input: FormInputModel, index: number): JSX.Element | undefined {
+
         const tabIndex: number = getTabIndex(input, index)
 
         let inputElement: JSX.Element
@@ -40,7 +41,7 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                         {...input}
                         onChange={onChange}
                         tabIndex={tabIndex}
-                        value={input.value}
+                        value={input.value as number | undefined}
                     />
                 )
                 break
@@ -51,17 +52,19 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                         onBlur={onBlur}
                         onChange={onChange}
                         tabIndex={tabIndex}
-                        value={input.value}
+                        value={input.value as string | undefined}
                     />
                 )
                 break
             case 'checkbox':
                 inputElement = (
-                    <InputCheckbox
+                    <InputText
                         {...input}
+                        checked={!!input.value}
+                        onBlur={onBlur}
                         onChange={onChange}
                         tabIndex={tabIndex}
-                        type={'checkbox'}
+                        type='checkbox'
                     />
                 )
                 break
@@ -91,7 +94,7 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                         onChange={onChange}
                         tabIndex={tabIndex}
                         type={input.type as InputTextTypes || 'text'}
-                        value={input.value}
+                        value={input.value as string | undefined}
                     />
                 )
                 break
@@ -108,9 +111,18 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
         )
     }
 
-    const formGroups: Array<JSX.Element | undefined> = formDef?.groups?.map((element: FormGroup, index: number) => {
-        return <FormGroupItem key={`element-${index}`} group={element} renderFormInput={renderInputField} totalGroupCount={formDef.groups?.length || 0} />
-    }) || []
+    const formGroups: Array<JSX.Element | undefined> = formDef?.groups
+        ?.map((element: FormGroup, index: number) => {
+            return (
+                <FormGroupItem
+                    key={`element-${index}`}
+                    group={element}
+                    renderFormInput={renderInputField}
+                    totalGroupCount={formDef.groups?.length || 0}
+                />
+            )
+        })
+        || []
 
     return (
         <div className={styles['form-groups']}>

src-ts/lib/form/form-groups/form-input/index.ts

@@ -1,4 +1,3 @@
-export * from './input-checkbox'
 export * from './form-input-autcomplete-option.enum'
 export * from './input-rating'
 export * from './input-text'

src-ts/lib/form/form-groups/form-input/input-checkbox/InputCheckbox.module.scss

@@ -30,9 +30,32 @@
     }
 
     &.checkbox {
-        & {
-            width: 20px;
-            height: 20px;
+        @extend .body-small;
+        color: $black-60;
+        box-sizing: border-box;
+        border: 0;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+        height: auto;
+        border-radius: 0;
+    
+        &:focus {
+            box-shadow: none;
+            border: none;
+            outline: none;
+            color: $black-100;
+        }
+      
+        &:disabled {
+            background-color: $black-10;
+        }
+    
+        &.checkbox {
+            & {
+                width: 20px;
+                height: 20px;
+            }
         }
     }
 }

src-ts/lib/form/form-groups/form-input/input-checkbox/InputCheckbox.tsx

@@ -10,6 +10,7 @@ export type InputTextTypes = 'checkbox' | 'password' | 'text'
 
 interface InputTextProps {
     readonly autocomplete?: FormInputAutocompleteOption
+    readonly checked?: boolean
     readonly className?: string
     readonly dirty?: boolean
     readonly disabled?: boolean
@@ -24,11 +25,15 @@ interface InputTextProps {
     readonly spellCheck?: boolean
     readonly tabIndex: number
     readonly type: InputTextTypes
-    readonly value?: string | number
+    readonly value?: string | number | boolean
 }
 
 const InputText: FC<InputTextProps> = (props: InputTextProps) => {
 
+    const defaultValue: string | number | undefined = props.type === 'checkbox' && !!props.checked
+        ? 'on'
+        : props.value as string | number | undefined
+
     return (
         <InputWrapper
             {...props}
@@ -40,7 +45,7 @@ const InputText: FC<InputTextProps> = (props: InputTextProps) => {
             <input
                 autoComplete={props.autocomplete}
                 className={cn(styles['form-input-text'], styles[props.type])}
-                defaultValue={props.value}
+                defaultValue={defaultValue}
                 disabled={!!props.disabled}
                 onBlur={props.onBlur}
                 onChange={props.onChange}

src-ts/lib/form/form-groups/form-input/input-checkbox/index.ts

@@ -41,5 +41,5 @@ export interface FormInputModel {
     touched?: boolean
     readonly type: 'card-set' | 'checkbox' | 'password' | 'radio' | 'rating' | 'text' | 'textarea'
     readonly validators?: ReadonlyArray<ValidatorFn>
-    value?: string
+    value?: string | boolean
 }