image-picker input type

Author: kkartunov

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 { InputImagePicker, 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'
@@ -86,6 +86,13 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                     />
                 )
                 break
+            case 'image-picker':
+                inputElement = (
+                    <InputImagePicker
+                        {...input}
+                    />
+                )
+                break
             default:
                 inputElement = (
                     <InputText

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

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

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

@@ -0,0 +1,39 @@
+@import "../../../../styles/includes";
+@import "../../../../styles/variables";
+
+.filePicker {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $black-5;
+    border-radius: 8px;
+    width: 132px;
+    height: 132px;
+    position: relative;
+
+    @include ltemd {
+        width: 100%;
+    }
+
+    .filePickerPlaceholder {
+        color: $turq-160;
+        text-align: center;
+        font-weight: $font-weight-bold;
+    }
+
+    .filePickerPencil {
+        position: absolute;
+        top: 0;
+        right: 0;
+        color: $turq-160;
+    }
+
+    .filePickerInput {
+        display: none;
+    }
+
+    .badgeImage {
+        width: 72px;
+        height: 72px;
+    }
+}

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

@@ -0,0 +1,65 @@
+import { createRef, Dispatch, FC, RefObject, SetStateAction, useEffect, useState } from 'react'
+
+import { Button, IconOutline } from '../../../../../lib'
+
+import styles from './InputImagePicker.module.scss'
+
+interface InputImagePickerProps {
+    readonly accept?: string
+    readonly name: string
+    readonly size?: number
+}
+
+const InputImagePicker: FC<InputImagePickerProps> = (props: InputImagePickerProps) => {
+
+    const fileInputRef: RefObject<HTMLInputElement> = createRef<HTMLInputElement>()
+
+    // tslint:disable-next-line:no-null-keyword
+    const [files, setFiles]: [FileList | null, Dispatch<SetStateAction<FileList | null>>] = useState<FileList | null>(null)
+    const [fileDataURL, setFileDataURL]: [string | undefined, Dispatch<SetStateAction<string | undefined>>] = useState<string | undefined>()
+
+    useEffect(() => {
+        if (files && files.length) {
+            const fileReader: FileReader = new FileReader()
+            fileReader.onload = e => {
+                const { result }: any = e.target
+                if (result) {
+                    setFileDataURL(result)
+                }
+            }
+            fileReader.readAsDataURL(files[0])
+        } else if (fileDataURL) {
+            setFileDataURL(undefined)
+        }
+    }, [
+        files,
+    ])
+
+    return (
+        <div className={styles.filePicker}>
+            <Button
+                buttonStyle='icon'
+                icon={IconOutline.PencilIcon}
+                className={styles.filePickerPencil}
+                onClick={() => fileInputRef.current?.click()} />
+            <input
+                name={props.name}
+                type={'file'}
+                accept={props.accept || '*'}
+                className={styles.filePickerInput}
+                ref={fileInputRef}
+                onChange={event => setFiles(event.target.files)}
+                size={props.size || Infinity}
+            />
+            {
+                fileDataURL ? (
+                    <img src={fileDataURL} className={styles.badgeImage} />
+                ) : (
+                    <div className={styles.filePickerPlaceholder}>UPLOAD<br />IMAGE</div>
+                )
+            }
+        </div>
+    )
+}
+
+export default InputImagePicker

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

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

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

@@ -8,7 +8,7 @@ import styles from './InputText.module.scss'
 
 export type InputTextTypes = 'checkbox' | 'password' | 'text'
 
-interface InputTextProps {
+export interface InputTextProps {
     readonly autocomplete?: FormInputAutocompleteOption
     readonly checked?: boolean
     readonly className?: string

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

@@ -18,6 +18,7 @@ export interface FormCard {
 }
 
 export interface FormInputModel {
+    readonly accept?: string
     readonly autocomplete?: FormInputAutocompleteOption
     readonly cards?: ReadonlyArray<FormCard>
     checked?: boolean
@@ -27,6 +28,7 @@ export interface FormInputModel {
     disabled?: boolean
     error?: string
     readonly events?: ReadonlyArray<InputEvent>
+    readonly files?: FileList
     readonly hideInlineErrors?: boolean
     readonly hint?: string
     readonly id?: string
@@ -36,10 +38,11 @@ export interface FormInputModel {
     readonly notTabbable?: boolean
     options?: ReadonlyArray<FormRadioButtonOption>
     readonly placeholder?: string
+    readonly size?: number
     readonly spellCheck?: boolean
     readonly title?: string
     touched?: boolean
-    readonly type: 'card-set' | 'checkbox' | 'password' | 'radio' | 'rating' | 'text' | 'textarea'
+    readonly type: 'card-set' | 'checkbox' | 'password' | 'radio' | 'rating' | 'text' | 'textarea' | 'image-picker'
     readonly validators?: ReadonlyArray<ValidatorFn>
     value?: string | boolean
 }

src-ts/tools/gamification-admin/game-config/gamification-config.model.ts

@@ -1,4 +1,6 @@
 export interface GamificationConfigModel {
+  ACCEPTED_BADGE_MIME_TYPES: string
+  MAX_BADGE_IMAGE_FILE_SIZE: number
   ORG_ID: string
   PAGE_SIZE: number
 }

src-ts/tools/gamification-admin/game-config/gamification.default.config.ts

@@ -1,6 +1,8 @@
 import { GamificationConfigModel } from './gamification-config.model'
 
 export const GamificationConfigDefault: GamificationConfigModel = {
+  ACCEPTED_BADGE_MIME_TYPES: 'image/svg+xml,image/svg',
+  MAX_BADGE_IMAGE_FILE_SIZE: 5000000, // 5mb in bytes
   ORG_ID: '6052dd9b-ea80-494b-b258-edd1331e27a3',
   PAGE_SIZE: 12,
 }

src-ts/tools/gamification-admin/pages/create-badge/CreateBadgePage.module.scss

@@ -1,3 +1,6 @@
+@import "../../../../lib/styles/variables";
+
 .container {
   display: flex;
+  padding-top: $space-xxxxl;
 }