dedicated checkbox input init

Author: kkartunov

src-ts/lib/contact-support-form/ContactSupportForm.tsx

@@ -19,6 +19,9 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
     const { profile }: ProfileContextData = useContext(profileContext)
 
     function generateRequest(inputs: ReadonlyArray<FormInputModel>): ContactSupportRequest {
+        const activeEl: any = formGetInputModel(inputs, 'active')
+        console.log('generateRequest', activeEl)
+
         const firstName: string = formGetInputModel(inputs, ContactSupportFormField.first).value as string
         const lastName: string = formGetInputModel(inputs, ContactSupportFormField.last).value as string
         const email: string = formGetInputModel(inputs, ContactSupportFormField.email).value as string

src-ts/lib/contact-support-form/contact-support-form.config.ts

@@ -22,6 +22,12 @@ export const contactSupportFormDef: FormDefinition = {
     groups: [
         {
             inputs: [
+                {
+                    checked: true,
+                    label: 'Activate',
+                    name: 'active',
+                    type: 'checkbox',
+                },
                 {
                     label: 'First Name',
                     name: ContactSupportFormField.first,

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 { InputRating, InputText, InputTextarea } from './form-input'
+import { InputCheckbox, 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'
@@ -44,7 +44,6 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                     />
                 )
                 break
-
             case 'textarea':
                 inputElement = (
                     <InputTextarea
@@ -57,6 +56,15 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                 )
                 break
             case 'checkbox':
+                inputElement = (
+                    <InputCheckbox
+                        {...input}
+                        onChange={onChange}
+                        tabIndex={tabIndex}
+                        type={'checkbox'}
+                    />
+                )
+                break
             case 'radio':
                 inputElement = (
                     <FormRadio

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

@@ -1,3 +1,4 @@
+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

@@ -0,0 +1,32 @@
+@use '../../../../styles/typography';
+@import '../../../../styles/includes';
+
+.form-input-checkbox {
+    @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

@@ -0,0 +1,53 @@
+import cn from 'classnames'
+import { ChangeEvent, Dispatch, FC, FocusEvent, SetStateAction, useState } from 'react'
+
+import { InputWrapper } from '../input-wrapper'
+
+import styles from './InputCheckbox.module.scss'
+
+export type InputCheckboxTypes = 'checkbox' | 'password' | 'text'
+
+interface InputCheckboxProps {
+    readonly checked?: boolean
+    readonly className?: string
+    readonly dirty?: boolean
+    readonly disabled?: boolean
+    readonly error?: string
+    readonly hideInlineErrors?: boolean
+    readonly hint?: string
+    readonly label?: string | JSX.Element
+    readonly name: string
+    readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void
+    readonly tabIndex: number
+    readonly type: InputCheckboxTypes
+}
+
+const InputCheckbox: FC<InputCheckboxProps> = (props: InputCheckboxProps) => {
+
+    const [checked, setChecked]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(props.checked || false)
+
+    return (
+        <InputWrapper
+            {...props}
+            dirty={!!props.dirty}
+            disabled={!!props.disabled}
+            label={props.label || props.name}
+            hideInlineErrors={props.hideInlineErrors}
+        >
+            <input
+                className={cn(styles['form-input-checkbox'], styles[props.type])}
+                disabled={!!props.disabled}
+                onChange={(event) => {
+                    setChecked(!checked)
+                    props.onChange(event)
+                }}
+                name={props.name}
+                tabIndex={props.tabIndex}
+                type={'checkbox'}
+                checked={checked}
+            />
+        </InputWrapper>
+    )
+}
+
+export default InputCheckbox

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

@@ -0,0 +1 @@
+export { default as InputCheckbox } from './InputCheckbox'

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

@@ -20,6 +20,7 @@ export interface FormCard {
 export interface FormInputModel {
     readonly autocomplete?: FormInputAutocompleteOption
     readonly cards?: ReadonlyArray<FormCard>
+    checked?: boolean
     readonly className?: string
     readonly dependentFields?: Array<string>
     dirty?: boolean