feat: Refactored and improved the dimension readngs (moved to a hook). Fixed the can submit logic

Author: kevinwang5658

src/Form.tsx

@@ -9,7 +9,7 @@ import { canSubmit } from './canSubmit.js';
 import { SubmitButton } from './SubmitButton.js';
 import { Button } from './Button.js';
 import { ScrollArea } from './ScrollArea.js';
-import { FullScreen } from './FullScreen.js';
+import { FullScreen, useStdoutDimensions } from './FullScreen.js';
 
 export const Form: React.FC<FormProps> = props => {
   const isControlled = props.value !== undefined;
@@ -98,30 +98,13 @@ export const Form: React.FC<FormProps> = props => {
     setValue([...value]);
   }
 
-  const [size, setSize] = useState({
-    columns: process.stdout.columns,
-    rows: process.stdout.rows,
-  });
-
-  useEffect(() => {
-    function onResize() {
-      setSize({
-        columns: process.stdout.columns,
-        rows: process.stdout.rows,
-      });
-    }
-
-    process.stdout.on("resize", onResize);
-    return () => {
-      process.stdout.off("resize", onResize);
-    };
-  }, []);
+  const [, fullHeight] = useStdoutDimensions()
 
   return (
     <FullScreen>
       <Box width="100%" height="90%" flexDirection="column" overflowY="hidden">
         <FormHeader {...props} headerRef={headerRef} form={{ ...props.form, sections }} currentTab={currentTab} onChangeTab={onChangeTab} editingField={editingField} />
-        <ScrollArea height={size.rows - headerHeight} key={currentTab} isStart={focusedElement === 0}>
+        <ScrollArea height={fullHeight - headerHeight} key={currentTab} isStart={focusedElement === 0}>
           {!editingField && sections[currentTab].description && (
             <Box marginX={4}>
               <DescriptionRenderer description={props.form.sections[currentTab]?.description} />

src/FullScreen.tsx

@@ -2,7 +2,7 @@ import { Box, BoxProps } from 'ink';
 import React, { PropsWithChildren, useLayoutEffect } from 'react';
 import { useEffect, useState } from 'react';
 
-function useStdoutDimensions(): [number, number] {
+export function useStdoutDimensions(): [number, number] {
   const {columns, rows} = process.stdout;
   const [size, setSize] = useState({columns, rows});
   useEffect(() => {

src/ScrollArea.tsx

@@ -1,5 +1,5 @@
 import { Box, measureElement, useFocusManager, useInput } from 'ink';
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useLayoutEffect, useState } from 'react';
 
 const reducer = (state, action) => {
   switch (action.type) {
@@ -46,7 +46,7 @@ export function ScrollArea({height, isStart, children}) {
 
   const innerRef = React.useRef();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (isStart || (children.length) * 1 + 3 * 3 < (height - 6)) {
       setCanScroll(false);
       dispatch({

src/canSubmit.ts

@@ -1,11 +1,15 @@
-import { FormStructure } from './types.js';
+import { FormField, FormStructure } from './types.js';
 
 export const canSubmit = (form: FormStructure, values: Array<Record<string, unknown>>) => {
-  return form.sections
-    .map(section => section.fields)
-    .reduce((fields1, fields2) => [...fields1, ...fields2], [])
-    .map(field => !field.required || (values[field.name] !== undefined && values[field.name] !== ''))
-    .reduce((field1, field2) => field1 && field2, true);
+  for (const [idx, value] of Object.entries(values)) {
+    const fields = form.sections[idx].fields as FormField[];
+
+    for (const field of fields) {
+      if (field.required && (value[field.name] === undefined || value[field.name] === '')) {
+        return false;
+      }
+    }
+  }
 
   return true;
 };