Adm 160 (#103)

ADM-160; (Feat) Add logic for adding focus to the first available field in ArrayInput --------- Co-authored-by: Viachaslau Biziukin <[email protected]> Co-authored-by: Arthur Volokhin <[email protected]>
dev-family · Oct 30, 2023 · d60c464 · d60c464
1 parent c42178e
commit d60c464
Show file tree

Hide file tree

Showing 8 changed files with 3,707 additions and 2,468 deletions.
diff --git a/admiral/form/fields/ArrayInput.tsx b/admiral/form/fields/ArrayInput.tsx
@@ -109,7 +109,7 @@ export const ArrayInput: InputComponentWithName<React.FC<ArrayInputProps>> = ({
         [],
     )
 
-    const handleAdd = () => {
+    const handleAdd = (e: React.MouseEvent<HTMLButtonElement>) => {
         setValues((values: any) => {
             const forms: DataProviderRecord[] = values?.[name] ?? []
 
@@ -124,12 +124,55 @@ export const ArrayInput: InputComponentWithName<React.FC<ArrayInputProps>> = ({
         })
     }
 
+    const renderChildrenAutoFocus = useCallback(
+        (children: React.ReactNode, isNewCreatedFormItem: boolean) => {
+            if (!Array.isArray(children)) {
+                return React.isValidElement(children)
+                    ? React.cloneElement<any>(children, {
+                          autoFocus: isNewCreatedFormItem,
+                          props: {
+                              autoFocus: isNewCreatedFormItem,
+                          },
+                          key: children.key,
+                      })
+                    : children
+            }
+
+            let foundFirstInput = false
+
+            return React.Children.map(children, (childrenItem, index) => {
+                const isDisabled = childrenItem.props?.disabled
+
+                if (!foundFirstInput && React.isValidElement(childrenItem)) {
+                    if (!isDisabled) {
+                        foundFirstInput = true
+                        return React.cloneElement<any>(childrenItem, {
+                            autoFocus: true,
+                            key: childrenItem.key,
+                        })
+                    }
+                }
+
+                return childrenItem
+            })
+        },
+        [],
+    )
+
     return (
         <Form.Item label={label} columnSpan={2} labelAs="div" required={required}>
             <ol className={styles.arrayInput}>
                 {forms.map((form, idx) => {
                     const formErrors = formsErrors[idx] ?? {}
                     const key = idx
+                    const isNewCreatedFormItem = Object.keys(form).length === 1 && form.id
+
+                    const propsChildren =
+                        typeof children === 'function' ? children(form, idx) : children
+                    const renderedChildren = renderChildrenAutoFocus(
+                        propsChildren,
+                        !!isNewCreatedFormItem,
+                    )
 
                     return (
                         <Form.ChildForm
@@ -167,9 +210,7 @@ export const ArrayInput: InputComponentWithName<React.FC<ArrayInputProps>> = ({
                                     </Button>
                                 )}
                             </div>
-                            <div className={styles.arrayInput_Children}>
-                                {typeof children === 'function' ? children(form, idx) : children}
-                            </div>
+                            <div className={styles.arrayInput_Children}>{renderedChildren}</div>
                         </Form.ChildForm>
                     )
                 })}

diff --git a/admiral/ui/Editor/Editor.tsx b/admiral/ui/Editor/Editor.tsx
@@ -18,6 +18,7 @@ const Editor = ({
     autocompleter,
     height = 300,
     locale,
+    autoFocus,
     ...rest
 }: EditorProps) => {
     const { themeName } = useTheme()
@@ -44,6 +45,7 @@ const Editor = ({
 
                 if (autocompleter) setupAutocompleters(editor, autocompleter)
             },
+            auto_focus: autoFocus ? autoFocus : '',
             menubar: false,
             toolbar:
                 'blocks bold italic underline strikethrough | link image charmap emoticons | alignleft aligncenter alignright alignjustify | bullist numlist blockquote table | pastetext removeformat fullscreen code',

diff --git a/admiral/ui/Editor/interfaces.ts b/admiral/ui/Editor/interfaces.ts
@@ -28,6 +28,7 @@ export interface EditorProps extends Omit<TinyEditorProps, 'onChange' | 'onEdito
     onImageUpload?: (file: Blob) => Promise<string>
     autocompleter?: AutocompleterConfig | AutocompleterConfig[]
     locale?: EditorLocaleType
+    autoFocus?: boolean
 }
 
 export type AutocompleterItem = {