fix: Fixed calculations for scrolling and focus position

Author: kevinwang5658

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@codify/ink-form",
+  "name": "@codify-cli/ink-form",
   "type": "module",
   "version": "0.0.0",
   "description": "Complex user-friendly form component for Codify",
@@ -18,7 +18,7 @@
     "commandline",
     "cmd"
   ],
-  "repository": "https://github.com/kevinwang5658/@codify/ink-form",
+  "repository": "https://github.com/kevinwang5658/codify-ink-form",
   "author": "Lukas Bach <lbach@outlook.de> modified by Kevin Wang",
   "devDependencies": {
     "@types/node": "20.14.8",

src/Form.tsx

@@ -76,7 +76,8 @@ export const Form: React.FC<FormProps> = props => {
       } else if (key.downArrow) {
         // This calculates the maximum amount of children there is. We don't want to scroll past the last item
         // Fields.length is number of json fields. 2 is the add and remove buttons. Submit button is sometimes focusable
-        if (focusedElement + 1 >= sections[currentTab].fields.length + 2 + (canSubmitForm ? 1 : 0)) {
+        const totalFocusableElements = sections[currentTab].fields.length + 2 + (canSubmitForm ? 1 : 0) + ((sections.length <= 1) ? -1 : 0)
+        if (focusedElement + 1 >= totalFocusableElements) {
           return;
         }
 
@@ -119,12 +120,7 @@ export const Form: React.FC<FormProps> = props => {
     <FullScreen>
       <Box width="100%" height="90%" flexDirection="column" overflowY="hidden">
         <FormHeader {...props} headerRef={headerRef} form={form} currentTab={currentTab} onChangeTab={onChangeTab} editingField={editingField} />
-        <ScrollArea height={fullHeight - headerHeight} key={currentTab} isStart={focusedElement === -1} editingMode={!!editingField}>
-          {!editingField && sections[currentTab].description && (
-            <Box marginX={4}>
-              <DescriptionRenderer description={sections[currentTab]?.description} />
-            </Box>
-          )}
+        <ScrollArea height={fullHeight - headerHeight} key={currentTab} isStart={focusedElement === -1} numFields={sections[currentTab].fields.length} editingMode={!!editingField}>
           {!editingField && (
             <Box flexDirection='column'>
               <Box marginLeft={1} marginTop={1}>
@@ -153,19 +149,31 @@ export const Form: React.FC<FormProps> = props => {
             {!editingField && (
               <Text>{' }'}</Text>
             )}
-            <Box flexDirection="row-reverse">
-              <Button label="Add (duplicate)" id={'addButton'} onClicked={() => duplicateCurrentSection()}/>
-            </Box>
-            <Box flexDirection="row-reverse">
-              <Button label="Remove" id={'removeButton'} isEnabled={sections.length > 1} onClicked={() => removeCurrentSection()}/>
-            </Box>
           </Box>
           {!editingField && (
-            <Box flexDirection="row-reverse">
-              <SubmitButton canSubmit={canSubmitForm} onSubmit={() => {
-                props.onSubmit?.(value)
-                setIsSubmitted(true);
-              }}/>
+            <Box flexDirection="row">
+              <Box flexDirection="column" flexGrow={1} width='40%'>
+                {!editingField && sections[currentTab].description && (
+                  <Box marginX={1} marginTop={1} flexDirection='column'>
+                    <Text underline>Description:</Text>
+                    <DescriptionRenderer description={sections[currentTab]?.description} />
+                  </Box>
+                )}
+              </Box>
+              <Box flexDirection="column" flexGrow={1} width='40%'>
+                <Box flexDirection="row-reverse">
+                  <Button label="Add (duplicate)" id={'addButton'} onClicked={() => duplicateCurrentSection()}/>
+                </Box>
+                <Box flexDirection="row-reverse">
+                  <Button label="Remove" id={'removeButton'} isEnabled={sections.length > 1} onClicked={() => removeCurrentSection()}/>
+                </Box>
+                <Box flexDirection="row-reverse">
+                  <SubmitButton canSubmit={canSubmitForm} onSubmit={() => {
+                    props.onSubmit?.(value)
+                    setIsSubmitted(true);
+                  }}/>
+                </Box>
+              </Box>
             </Box>
           )}
         </ScrollArea>

src/ScrollArea.tsx

@@ -34,7 +34,7 @@ const reducer = (state, action) => {
   }
 };
 
-export function ScrollArea({height, isStart, children, editingMode}) {
+export function ScrollArea({height, isStart, children, numFields, editingMode}) {
   const [state, dispatch] = React.useReducer(reducer, {
     height: 10,
     scrollTop: 0,
@@ -48,7 +48,8 @@ export function ScrollArea({height, isStart, children, editingMode}) {
     // Couple of custom logic baked into here to improve the user experience
     // isStart ensures that the first down event will not scroll. This is because initially nothing has focus so the first down gives focus to the first element
     // The children.length calculation calculates a rough estimate of the total height. The 3 is the height of the buttons at the bottom.
-    if (isStart || (children.length) * 1 + 3 * 3 < (height - 6)) {
+    // The 4 is the fixed length of the brackets in the display.
+    if (isStart || ((numFields + (3 * 3) + 4) < height)) {
       setCanScroll(false);
       dispatch({
         type: 'RESET'
@@ -58,7 +59,7 @@ export function ScrollArea({height, isStart, children, editingMode}) {
     }
 
     focusManager.enableFocus();
-  }, [height, isStart, children.length]);
+  }, [height, isStart, numFields]);
 
   // Scroll to the top when entering or exiting edit mode
   if (!isEditing && editingMode) {

src/SubmitButton.tsx

@@ -14,15 +14,6 @@ export const SubmitButton: React.FC<{
 
   return (
     <Box marginRight={2}>
-      <Box marginRight={2} paddingY={1}>
-        <Text>
-          {!props.canSubmit
-            ? 'There are still required inputs you have not competed yet.'
-            : isFocused
-            ? 'Press Enter to submit'
-            : 'Use the arrow keys to navigate to the submit button.'}
-        </Text>
-      </Box>
       <Box borderStyle={'round'} borderColor={!props.canSubmit ? 'gray' : isFocused ? 'blue' : 'green'} paddingX={2}>
         <Text color={!props.canSubmit ? 'gray' : isFocused ? 'blue' : 'green'} bold={true} underline={isFocused}>
           {props.canSubmit ? 'Submit' : 'Cannot submit yet'}

src/demo/Test.tsx

@@ -49,6 +49,7 @@ export function Test() {
             },
             {
               title: "asdf-install",
+              description: 'Asdf install is responsible for installing an asdf resource',
               fields: [
                 { type: 'string', name: 'directory', label: 'directory', required: true },
               ]