Add minimum width/height components.

Author: jameswilddev

index.ts

@@ -22,6 +22,8 @@ export { createImageBackgroundComponent } from './react-native/components/create
 export { createInputComponent } from './react-native/components/createInputComponent'
 export { createLimitedHeightComponent } from './react-native/components/createLimitedHeightComponent'
 export { createLimitedWidthComponent } from './react-native/components/createLimitedWidthComponent'
+export { createMinimumHeightComponent } from './react-native/components/createMinimumHeightComponent'
+export { createMinimumWidthComponent } from './react-native/components/createMinimumWidthComponent'
 export { createNullableEmailInputComponent } from './react-native/components/createNullableEmailInputComponent'
 export { createNullableFloatInputComponent } from './react-native/components/createNullableFloatInputComponent'
 export { createNullableIntegerInputComponent } from './react-native/components/createNullableIntegerInputComponent'
@@ -127,6 +129,8 @@ export type { KeyableTableCell } from './react-native/types/KeyableTableCell'
 export type { LimitedHeightProps } from './react-native/types/LimitedHeightProps'
 export type { LimitedWidthProps } from './react-native/types/LimitedWidthProps'
 export type { LoggerInterface } from './react-native/types/LoggerInterface'
+export type { MinimumHeightProps } from './react-native/types/MinimumHeightProps'
+export type { MinimumWidthProps } from './react-native/types/MinimumWidthProps'
 export type { NonKeyableTableCell } from './react-native/types/NonKeyableTableCell'
 export type { NullableEmailInputProps } from './react-native/types/NullableEmailInputProps'
 export type { NullableFloatInputProps } from './react-native/types/NullableFloatInputProps'

react-native/components/createMinimumHeightComponent/index.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
+import type { MinimumHeightProps } from '../../types/MinimumHeightProps'
+
+/**
+ * Creates a React component which has a minimum height.
+ * @param minimumHeight The minimum Height of the component
+ * @returns     The created component.
+ */
+export const createMinimumHeightComponent = (
+  minimumHeight: number
+): React.FunctionComponent<MinimumHeightProps> => {
+  const styles = StyleSheet.create({
+    fillsContainer: {
+      minHeight: minimumHeight,
+      width: '100%'
+    },
+    fitsContent: {
+      minHeight: minimumHeight
+    }
+  })
+
+  const MinimumHeight: React.FunctionComponent<MinimumHeightProps> = ({ children, width }) => (
+    <View
+      style={
+        width === 'fillsContainer' ? styles.fillsContainer : styles.fitsContent
+      }
+      pointerEvents="box-none"
+    >
+      {children}
+    </View>
+  )
+
+  return MinimumHeight
+}

react-native/components/createMinimumHeightComponent/readme.md

@@ -0,0 +1,29 @@
+# `react-native-app-helpers/createMinimumHeightComponent`
+
+Creates a React component which has a minimum height.
+
+## Usage
+
+```tsx
+import { createMinimumHeightComponent } from "react-native-app-helpers";
+
+const ExampleComponent = createMinimumHeightComponent(243);
+
+const ExampleScreen = () => (
+  <ExampleComponent width="fillsContainer">
+    <Text>This is at least 243 tall and fills its container horizontally.</Text>
+  </ExampleComponent>
+);
+```
+
+```tsx
+import { createMinimumHeightComponent } from "react-native-app-helpers";
+
+const ExampleComponent = createMinimumHeightComponent(243);
+
+const ExampleScreen = () => (
+  <ExampleComponent width="fitsContent">
+    <Text>This is at least 243 tall and fits its content horizontally.</Text>
+  </ExampleComponent>
+);
+```

react-native/components/createMinimumHeightComponent/unit.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Text, View } from 'react-native'
+import {
+  createMinimumHeightComponent,
+  unwrapRenderedFunctionComponent
+} from '../../..'
+
+test('renders as expected when filling its container vertically', () => {
+  const Component = createMinimumHeightComponent(243)
+
+  const rendered = (
+    <Component width="fillsContainer">
+      <Text>Example Content</Text>
+    </Component>
+  )
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <View style={{ minHeight: 243, width: '100%' }} pointerEvents="box-none">
+      <Text>Example Content</Text>
+    </View>
+  )
+})
+
+test('renders as expected when fitting its content vertically', () => {
+  const Component = createMinimumHeightComponent(243)
+
+  const rendered = (
+    <Component width="fitsContent">
+      <Text>Example Content</Text>
+    </Component>
+  )
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <View style={{ minHeight: 243 }} pointerEvents="box-none">
+      <Text>Example Content</Text>
+    </View>
+  )
+})

react-native/components/createMinimumWidthComponent/index.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
+import type { MinimumWidthProps } from '../../types/MinimumWidthProps'
+
+/**
+ * Creates a React component which has a maximum width.
+ * @param minimumWidth The maximum width of the component
+ * @returns     The created component.
+ */
+export const createMinimumWidthComponent = (
+  minimumWidth: number
+): React.FunctionComponent<MinimumWidthProps> => {
+  const styles = StyleSheet.create({
+    fillsContainer: {
+      minWidth: minimumWidth,
+      height: '100%'
+    },
+    fitsContent: {
+      minWidth: minimumWidth
+    }
+  })
+
+  const MinimumWidth: React.FunctionComponent<MinimumWidthProps> = ({ children, height }) => (
+    <View
+      style={
+        height === 'fillsContainer' ? styles.fillsContainer : styles.fitsContent
+      }
+      pointerEvents="box-none"
+    >
+      {children}
+    </View>
+  )
+
+  return MinimumWidth
+}

react-native/components/createMinimumWidthComponent/readme.md

@@ -0,0 +1,29 @@
+# `react-native-app-helpers/createMinimumWidthComponent`
+
+Creates a React component which has a minimum width.
+
+## Usage
+
+```tsx
+import { createMinimumWidthComponent } from "react-native-app-helpers";
+
+const ExampleComponent = createMinimumWidthComponent(243);
+
+const ExampleScreen = () => (
+  <ExampleComponent height="fillsContainer">
+    <Text>This is up to 243 wide and fills its container vertically.</Text>
+  </ExampleComponent>
+);
+```
+
+```tsx
+import { createMinimumWidthComponent } from "react-native-app-helpers";
+
+const ExampleComponent = createMinimumWidthComponent(243);
+
+const ExampleScreen = () => (
+  <ExampleComponent height="fitsContent">
+    <Text>This is up to 243 wide and fits its content vertically.</Text>
+  </ExampleComponent>
+);
+```

react-native/components/createMinimumWidthComponent/unit.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Text, View } from 'react-native'
+import {
+  createMinimumWidthComponent,
+  unwrapRenderedFunctionComponent
+} from '../../..'
+
+test('renders as expected when filling its container vertically', () => {
+  const Component = createMinimumWidthComponent(243)
+
+  const rendered = (
+    <Component height="fillsContainer">
+      <Text>Example Content</Text>
+    </Component>
+  )
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <View style={{ minWidth: 243, height: '100%' }} pointerEvents="box-none">
+      <Text>Example Content</Text>
+    </View>
+  )
+})
+
+test('renders as expected when fitting its content vertically', () => {
+  const Component = createMinimumWidthComponent(243)
+
+  const rendered = (
+    <Component height="fitsContent">
+      <Text>Example Content</Text>
+    </Component>
+  )
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <View style={{ minWidth: 243 }} pointerEvents="box-none">
+      <Text>Example Content</Text>
+    </View>
+  )
+})

react-native/types/MinimumHeightProps/index.tsx

@@ -0,0 +1,11 @@
+import type * as React from 'react'
+
+/**
+ * Props to be given to minimum height components.
+ */
+export type MinimumHeightProps = React.PropsWithChildren<{
+  /**
+   * Describes how the component's width should be sized.
+   */
+  readonly width: 'fillsContainer' | 'fitsContent'
+}>

react-native/types/MinimumHeightProps/readme.md

@@ -0,0 +1,13 @@
+# `react-native-app-helpers/MinimumHeightProps`
+
+Props to be given to minimum height components.
+
+## Usage
+
+```tsx
+import type { MinimumHeightProps } from "react-native-app-helpers";
+
+const example: MinimumHeightProps = {
+  width: "fitsContent",
+};
+```

react-native/types/MinimumWidthProps/index.tsx

@@ -0,0 +1,11 @@
+import type * as React from 'react'
+
+/**
+ * Props to be given to minimum width components.
+ */
+export type MinimumWidthProps = React.PropsWithChildren<{
+  /**
+   * Describes how the component's height should be sized.
+   */
+  readonly height: 'fillsContainer' | 'fitsContent'
+}>

react-native/types/MinimumWidthProps/readme.md

@@ -0,0 +1,13 @@
+# `react-native-app-helpers/MinimumWidthProps`
+
+Props to be given to minimum width components.
+
+## Usage
+
+```tsx
+import type { MinimumWidthProps } from "react-native-app-helpers";
+
+const example: MinimumWidthProps = {
+  height: "fitsContent",
+};
+```

readme.md

@@ -41,6 +41,8 @@ import { createTextComponent } from "react-native-app-helpers";
 - [createInputComponent](./react-native/components/createInputComponent/readme.md)
 - [createLimitedHeightComponent](./react-native/components/createLimitedHeightComponent/readme.md)
 - [createLimitedWidthComponent](./react-native/components/createLimitedWidthComponent/readme.md)
+- [createMinimumHeightComponent](./react-native/components/createMinimumHeightComponent/readme.md)
+- [createMinimumWidthComponent](./react-native/components/createMinimumWidthComponent/readme.md)
 - [createNullableEmailInputComponent](./react-native/components/createNullableEmailInputComponent/readme.md)
 - [createNullableFloatInputComponent](./react-native/components/createNullableFloatInputComponent/readme.md)
 - [createNullableIntegerInputComponent](./react-native/components/createNullableIntegerInputComponent/readme.md)
@@ -145,6 +147,8 @@ import { createTextComponent } from "react-native-app-helpers";
 - [KeyableTableCell](./react-native/types/KeyableTableCell/readme.md)
 - [LimitedHeightProps](./react-native/types/LimitedHeightProps/readme.md)
 - [LimitedWidthProps](./react-native/types/LimitedWidthProps/readme.md)
+- [MinimumHeightProps](./react-native/types/MinimumHeightProps/readme.md)
+- [MinimumWidthProps](./react-native/types/MinimumWidthProps/readme.md)
 - [NonKeyableTableCell](./react-native/types/NonKeyableTableCell/readme.md)
 - [NullableEmailInputProps](./react-native/types/NullableEmailInputProps/readme.md)
 - [NullableFloatInputProps](./react-native/types/NullableFloatInputProps/readme.md)