Add autofocus throughout all input component types. Disabled is now a…

… required prop.
jameswilddev · May 28, 2024 · 45c7df4 · 45c7df4
1 parent 9fa991c
commit 45c7df4
Show file tree

Hide file tree

Showing 78 changed files with 2,950 additions and 871 deletions.
diff --git a/react-native/components/Hitbox/index.tsx b/react-native/components/Hitbox/index.tsx
@@ -15,7 +15,7 @@ React.PropsWithChildren<{
      * This will, of course, not apply until the next render.  To synchronously
      * disable all Hitboxes, use the "enabled" static property.
      */
-  readonly disabled?: undefined | boolean
+  readonly disabled: boolean
 
   /**
      * Passed down to TouchableOpacity.
@@ -60,7 +60,7 @@ export const Hitbox: Component & {
 
   return (
     <TouchableOpacity
-      disabled={disabled ?? false}
+      disabled={disabled}
       style={style}
       ref={ref}
       onLayout={onLayout}

diff --git a/react-native/components/Hitbox/unit.tsx b/react-native/components/Hitbox/unit.tsx
@@ -53,52 +53,7 @@ test('renders as expected when enabled', () => {
   renderer.unmount()
 })
 
-test('renders as expected when enabled by not disabling', () => {
-  const onPress = jest.fn()
-  const onMeasure = jest.fn()
-
-  const renderer = TestRenderer.create(
-    <Hitbox
-      style={{ backgroundColor: 'red' }}
-      onPress={onPress}
-      onMeasure={onMeasure}
-    >
-      <Text>Test Children</Text>
-    </Hitbox>
-  )
-
-  expect(renderer.toTree()?.rendered).toEqual(
-    expect.objectContaining({
-      nodeType: 'component',
-      props: expect.objectContaining({
-        disabled: false,
-        style: { backgroundColor: 'red' },
-        hostRef: expect.any(Function),
-        onLayout: expect.any(Function),
-        onPress: expect.any(Function),
-        children: expect.objectContaining({
-          type: Text,
-          props: {
-            children: 'Test Children'
-          }
-        })
-      })
-    })
-  )
-  expect(
-    (
-      (renderer.toTree()?.rendered as TestRenderer.ReactTestRendererTree)
-        .type as unknown as () => void
-    ).name
-  ).toEqual('TouchableOpacity')
-
-  expect(onPress).not.toHaveBeenCalled()
-  expect(onMeasure).not.toHaveBeenCalled()
-
-  renderer.unmount()
-})
-
-test('renders as expected when enabled by disabled being undefined', () => {
+test('renders as expected when enabled', () => {
   const onPress = jest.fn()
   const onMeasure = jest.fn()
 
@@ -107,7 +62,7 @@ test('renders as expected when enabled by disabled being undefined', () => {
       style={{ backgroundColor: 'red' }}
       onPress={onPress}
       onMeasure={onMeasure}
-      disabled={undefined}
+      disabled={false}
     >
       <Text>Test Children</Text>
     </Hitbox>

diff --git a/react-native/components/createBottomTabBarComponent/index.tsx b/react-native/components/createBottomTabBarComponent/index.tsx
@@ -94,6 +94,7 @@ export function createBottomTabBarComponent<
             }}
             key={bottomTab.tab}
             style={isActive ? styles.activeHitbox : styles.inactiveHitbox}
+            disabled={false}
           >
             <HorizontallySymmetricalSafeAreaView
               style={styles.innerHorizontallySymmetricalSafeAreaView}

diff --git a/react-native/components/createBottomTabBarComponent/unit.tsx b/react-native/components/createBottomTabBarComponent/unit.tsx
@@ -86,6 +86,7 @@ test('renders as expected', () => {
             flexGrow: 1,
             backgroundColor: 'yellow'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -114,6 +115,7 @@ test('renders as expected', () => {
             flexGrow: 1,
             backgroundColor: 'purple'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -142,6 +144,7 @@ test('renders as expected', () => {
             flexGrow: 1,
             backgroundColor: 'yellow'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -170,6 +173,7 @@ test('renders as expected', () => {
             flexGrow: 1,
             backgroundColor: 'yellow'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -275,6 +279,7 @@ test('renders as expected without top padding', () => {
             flexGrow: 1,
             backgroundColor: 'yellow'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingBottom: 5 }}
@@ -303,6 +308,7 @@ test('renders as expected without top padding', () => {
             flexGrow: 1,
             backgroundColor: 'purple'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingBottom: 5 }}
@@ -331,6 +337,7 @@ test('renders as expected without top padding', () => {
             flexGrow: 1,
             backgroundColor: 'yellow'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingBottom: 5 }}
@@ -359,6 +366,7 @@ test('renders as expected without top padding', () => {
             flexGrow: 1,
             backgroundColor: 'yellow'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingBottom: 5 }}
@@ -464,6 +472,7 @@ test('renders as expected without bottom padding', () => {
             flexGrow: 1,
             backgroundColor: 'yellow'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingTop: 12 }}
@@ -492,6 +501,7 @@ test('renders as expected without bottom padding', () => {
             flexGrow: 1,
             backgroundColor: 'purple'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingTop: 12 }}
@@ -520,6 +530,7 @@ test('renders as expected without bottom padding', () => {
             flexGrow: 1,
             backgroundColor: 'yellow'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingTop: 12 }}
@@ -548,6 +559,7 @@ test('renders as expected without bottom padding', () => {
             flexGrow: 1,
             backgroundColor: 'yellow'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingTop: 12 }}
@@ -653,6 +665,7 @@ test('renders as expected without icon-text spacing', () => {
             flexGrow: 1,
             backgroundColor: 'yellow'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -680,6 +693,7 @@ test('renders as expected without icon-text spacing', () => {
             flexGrow: 1,
             backgroundColor: 'purple'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -707,6 +721,7 @@ test('renders as expected without icon-text spacing', () => {
             flexGrow: 1,
             backgroundColor: 'yellow'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -734,6 +749,7 @@ test('renders as expected without icon-text spacing', () => {
             flexGrow: 1,
             backgroundColor: 'yellow'
           }}
+          disabled={false}
         >
           <HorizontallySymmetricalSafeAreaView
             style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}

diff --git a/react-native/components/createButtonComponent/index.tsx b/react-native/components/createButtonComponent/index.tsx
@@ -160,8 +160,6 @@ export const createButtonComponent = (
   })
 
   const Button: React.FunctionComponent<ButtonProps> = ({ leftIcon, rightIcon, onPress, disabled, children }) => {
-    disabled = disabled ?? false
-
     const color = disabled
       ? buttonStyle.disabled.color
       : buttonStyle.default.color

diff --git a/react-native/components/createButtonComponent/unit.tsx b/react-native/components/createButtonComponent/unit.tsx
@@ -74,137 +74,6 @@ test('renders when enabled', () => {
   expect(onPress).not.toHaveBeenCalled()
 })
 
-test('renders when enabled by not disabling', () => {
-  const Component = createButtonComponent({
-    fontFamily: 'Example Font Family',
-    fontSize: 16,
-    horizontalPadding: 10,
-    verticalPadding: 2,
-    iconSpacing: 7,
-    default: {
-      backgroundColor: 'yellow',
-      color: 'blue',
-      radius: 25,
-      border: {
-        width: 5,
-        color: 'aquamarine'
-      }
-    },
-    disabled: {
-      backgroundColor: 'orange',
-      color: 'purple',
-      radius: 7,
-      border: {
-        width: 2,
-        color: 'aquamarine'
-      }
-    }
-  })
-  const onPress = jest.fn()
-
-  const rendered = (
-    <Component leftIcon={() => null} rightIcon={() => null} onPress={onPress}>
-      Example Content
-    </Component>
-  )
-
-  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
-    <Hitbox
-      disabled={false}
-      onPress={onPress}
-      style={{
-        backgroundColor: 'yellow',
-        borderRadius: 25,
-        paddingHorizontal: 10,
-        paddingVertical: 2,
-        borderWidth: 5,
-        borderColor: 'aquamarine',
-        alignItems: 'center'
-      }}
-    >
-      <Text
-        style={{
-          color: 'blue',
-          fontFamily: 'Example Font Family',
-          fontSize: 16,
-          lineHeight: 22.4
-        }}
-      >
-        Example Content
-      </Text>
-    </Hitbox>
-  )
-  expect(onPress).not.toHaveBeenCalled()
-})
-
-test('renders when enabled by disabled being undefined', () => {
-  const Component = createButtonComponent({
-    fontFamily: 'Example Font Family',
-    fontSize: 16,
-    horizontalPadding: 10,
-    verticalPadding: 2,
-    iconSpacing: 7,
-    default: {
-      backgroundColor: 'yellow',
-      color: 'blue',
-      radius: 25,
-      border: {
-        width: 5,
-        color: 'aquamarine'
-      }
-    },
-    disabled: {
-      backgroundColor: 'orange',
-      color: 'purple',
-      radius: 7,
-      border: {
-        width: 2,
-        color: 'aquamarine'
-      }
-    }
-  })
-  const onPress = jest.fn()
-
-  const rendered = (
-    <Component
-      leftIcon={() => null}
-      rightIcon={() => null}
-      onPress={onPress}
-      disabled={undefined}
-    >
-      Example Content
-    </Component>
-  )
-
-  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
-    <Hitbox
-      disabled={false}
-      onPress={onPress}
-      style={{
-        backgroundColor: 'yellow',
-        borderRadius: 25,
-        paddingHorizontal: 10,
-        paddingVertical: 2,
-        borderWidth: 5,
-        borderColor: 'aquamarine',
-        alignItems: 'center'
-      }}
-    >
-      <Text
-        style={{
-          color: 'blue',
-          fontFamily: 'Example Font Family',
-          fontSize: 16,
-          lineHeight: 22.4
-        }}
-      >
-        Example Content
-      </Text>
-    </Hitbox>
-  )
-  expect(onPress).not.toHaveBeenCalled()
-})
-
 test('renders when disabled', () => {
   const Component = createButtonComponent({
     fontFamily: 'Example Font Family',

diff --git a/...omponents/createCreatableSelectComponent/createCreatableSelectChildrenComponent/index.tsx b/...omponents/createCreatableSelectComponent/createCreatableSelectChildrenComponent/index.tsx
@@ -71,7 +71,6 @@ export const createCreatableSelectChildrenComponent = <
     'off',
     'default',
     'sentences',
-    true,
     false,
     'left'
   )
@@ -225,6 +224,7 @@ export const createCreatableSelectChildrenComponent = <
             }
           }}
           context={null}
+          autoFocus
         />
       </View>
     )
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,7 +71,6 @@ export const createCreatableSelectChildrenComponent = < @@
         'off',
         'default',
         'sentences',
-        true,
         false,
         'left'
       )
@@ Expand Down Expand Up / @@ -225,6 +224,7 @@ export const createCreatableSelectChildrenComponent = < @@
                 }
               }}
               context={null}
+              autoFocus
             />
           </View>
         )
@@ Expand Down @@