diff --git a/index.ts b/index.ts index 696d3ff..c75aa25 100644 --- a/index.ts +++ b/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' diff --git a/react-native/components/createMinimumHeightComponent/index.tsx b/react-native/components/createMinimumHeightComponent/index.tsx new file mode 100644 index 0000000..0522074 --- /dev/null +++ b/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 => { + const styles = StyleSheet.create({ + fillsContainer: { + minHeight: minimumHeight, + width: '100%' + }, + fitsContent: { + minHeight: minimumHeight + } + }) + + const MinimumHeight: React.FunctionComponent = ({ children, width }) => ( + + {children} + + ) + + return MinimumHeight +} diff --git a/react-native/components/createMinimumHeightComponent/readme.md b/react-native/components/createMinimumHeightComponent/readme.md new file mode 100644 index 0000000..543f519 --- /dev/null +++ b/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 = () => ( + + This is at least 243 tall and fills its container horizontally. + +); +``` + +```tsx +import { createMinimumHeightComponent } from "react-native-app-helpers"; + +const ExampleComponent = createMinimumHeightComponent(243); + +const ExampleScreen = () => ( + + This is at least 243 tall and fits its content horizontally. + +); +``` diff --git a/react-native/components/createMinimumHeightComponent/unit.tsx b/react-native/components/createMinimumHeightComponent/unit.tsx new file mode 100644 index 0000000..0945569 --- /dev/null +++ b/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 = ( + + Example Content + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + Example Content + + ) +}) + +test('renders as expected when fitting its content vertically', () => { + const Component = createMinimumHeightComponent(243) + + const rendered = ( + + Example Content + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + Example Content + + ) +}) diff --git a/react-native/components/createMinimumWidthComponent/index.tsx b/react-native/components/createMinimumWidthComponent/index.tsx new file mode 100644 index 0000000..c475774 --- /dev/null +++ b/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 => { + const styles = StyleSheet.create({ + fillsContainer: { + minWidth: minimumWidth, + height: '100%' + }, + fitsContent: { + minWidth: minimumWidth + } + }) + + const MinimumWidth: React.FunctionComponent = ({ children, height }) => ( + + {children} + + ) + + return MinimumWidth +} diff --git a/react-native/components/createMinimumWidthComponent/readme.md b/react-native/components/createMinimumWidthComponent/readme.md new file mode 100644 index 0000000..4fbed13 --- /dev/null +++ b/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 = () => ( + + This is up to 243 wide and fills its container vertically. + +); +``` + +```tsx +import { createMinimumWidthComponent } from "react-native-app-helpers"; + +const ExampleComponent = createMinimumWidthComponent(243); + +const ExampleScreen = () => ( + + This is up to 243 wide and fits its content vertically. + +); +``` diff --git a/react-native/components/createMinimumWidthComponent/unit.tsx b/react-native/components/createMinimumWidthComponent/unit.tsx new file mode 100644 index 0000000..c91b616 --- /dev/null +++ b/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 = ( + + Example Content + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + Example Content + + ) +}) + +test('renders as expected when fitting its content vertically', () => { + const Component = createMinimumWidthComponent(243) + + const rendered = ( + + Example Content + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + Example Content + + ) +}) diff --git a/react-native/types/MinimumHeightProps/index.tsx b/react-native/types/MinimumHeightProps/index.tsx new file mode 100644 index 0000000..767a8f7 --- /dev/null +++ b/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' +}> diff --git a/react-native/types/MinimumHeightProps/readme.md b/react-native/types/MinimumHeightProps/readme.md new file mode 100644 index 0000000..fcfce8c --- /dev/null +++ b/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", +}; +``` diff --git a/react-native/types/MinimumWidthProps/index.tsx b/react-native/types/MinimumWidthProps/index.tsx new file mode 100644 index 0000000..e58ac64 --- /dev/null +++ b/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' +}> diff --git a/react-native/types/MinimumWidthProps/readme.md b/react-native/types/MinimumWidthProps/readme.md new file mode 100644 index 0000000..d10d579 --- /dev/null +++ b/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", +}; +``` diff --git a/readme.md b/readme.md index 10fdabc..b521ba8 100644 --- a/readme.md +++ b/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)