From efb921dbd0df2e4e816cf23cbac5ba613240e859 Mon Sep 17 00:00:00 2001 From: jameswilddev Date: Thu, 23 Dec 2021 14:09:39 +0000 Subject: [PATCH] Allow sizing of stack routers. --- .../createStackRoutingComponent/index.tsx | 138 +- .../createStackRoutingComponent/readme.md | 2 + .../createStackRoutingComponent/unit.tsx | 1210 ++++++++++++++++- types/StackRoute/index.tsx | 2 + 4 files changed, 1303 insertions(+), 49 deletions(-) diff --git a/components/createStackRoutingComponent/index.tsx b/components/createStackRoutingComponent/index.tsx index bd3bd148..03cae2da 100644 --- a/components/createStackRoutingComponent/index.tsx +++ b/components/createStackRoutingComponent/index.tsx @@ -2,24 +2,68 @@ import * as React from "react"; import type { FunctionComponent } from "react"; import type { RouteParameters } from "../../types/RouteParameters"; import type { StackRouterState } from "../../types/StackRouterState"; -import { StyleSheet, View, ViewStyle } from "react-native"; +import { StyleSheet, View } from "react-native"; import type { StackRouteTable } from "../../types/StackRouteTable"; -const viewBase: ViewStyle = { - width: `100%`, - height: `100%`, -}; - const styles = StyleSheet.create({ - activeView: { - ...viewBase, + activeViewFillsContainerVerticallyFitsContentHorizontally: { + height: `100%`, + }, + activeViewFitsContentVerticallyFillsContainerHorizontally: { + width: `100%`, + }, + activeViewFillsContainerVerticallyFillsContainerHorizontally: { + height: `100%`, + width: `100%`, + }, + inactiveViewFitsContentVerticallyFitsContentHorizontally: { + display: `none`, + }, + inactiveViewFillsContainerVerticallyFitsContentHorizontally: { + display: `none`, + height: `100%`, }, - inactiveView: { - ...viewBase, + inactiveViewFitsContentVerticallyFillsContainerHorizontally: { display: `none`, + width: `100%`, + }, + inactiveViewFillsContainerVerticallyFillsContainerHorizontally: { + display: `none`, + height: `100%`, + width: `100%`, }, }); +const hierarchy = { + active: { + fitsContent: { + fitsContent: null, + fillsContainer: + styles.activeViewFitsContentVerticallyFillsContainerHorizontally, + }, + fillsContainer: { + fitsContent: + styles.activeViewFillsContainerVerticallyFitsContentHorizontally, + fillsContainer: + styles.activeViewFillsContainerVerticallyFillsContainerHorizontally, + }, + }, + inactive: { + fitsContent: { + fitsContent: + styles.inactiveViewFitsContentVerticallyFitsContentHorizontally, + fillsContainer: + styles.inactiveViewFitsContentVerticallyFillsContainerHorizontally, + }, + fillsContainer: { + fitsContent: + styles.inactiveViewFillsContainerVerticallyFitsContentHorizontally, + fillsContainer: + styles.inactiveViewFillsContainerVerticallyFillsContainerHorizontally, + }, + }, +}; + /** * Creates a React component which displays the top of a stack of routes (though * all items in the stack are continuously rendered). @@ -38,51 +82,53 @@ export const createStackRoutingComponent = < { readonly routeState: StackRouterState; readonly setRouteState: (to: StackRouterState) => void; + readonly width: `fillsContainer` | `fitsContent`; + readonly height: `fillsContainer` | `fitsContent`; } & TOtherProps > => { return (props) => ( - {props.routeState.map((item, index) => ( - - {React.createElement(routeTable[item.key], { - parameters: item.parameters, - push: (...itemsToAdd) => { - props.setRouteState([...props.routeState, ...itemsToAdd]); - }, - pop: (numberOfItemsToRemove) => { - const popped = [...props.routeState]; + {props.routeState.map((item, index) => { + const style = + hierarchy[ + index === props.routeState.length - 1 ? `active` : `inactive` + ][props.height][props.width]; + + return ( + + {React.createElement(routeTable[item.key], { + parameters: item.parameters, + push: (...itemsToAdd) => { + props.setRouteState([...props.routeState, ...itemsToAdd]); + }, + pop: (numberOfItemsToRemove) => { + const popped = [...props.routeState]; - for (let i = 0; i < (numberOfItemsToRemove ?? 1); i++) { - popped.pop(); - } + for (let i = 0; i < (numberOfItemsToRemove ?? 1); i++) { + popped.pop(); + } - props.setRouteState(popped); - }, - replace: (numberOfItemsToRemove, ...itemsToAdd) => { - const popped = [...props.routeState]; + props.setRouteState(popped); + }, + replace: (numberOfItemsToRemove, ...itemsToAdd) => { + const popped = [...props.routeState]; - for (let i = 0; i < numberOfItemsToRemove; i++) { - popped.pop(); - } + for (let i = 0; i < numberOfItemsToRemove; i++) { + popped.pop(); + } - popped.push(...itemsToAdd); + popped.push(...itemsToAdd); - props.setRouteState(popped); - }, - reset: (...replacementItems) => { - props.setRouteState(replacementItems); - }, - ...props, - })} - - ))} + props.setRouteState(popped); + }, + reset: (...replacementItems) => { + props.setRouteState(replacementItems); + }, + ...props, + })} + + ); + })} ); }; diff --git a/components/createStackRoutingComponent/readme.md b/components/createStackRoutingComponent/readme.md index 455f7c1c..e4bea7de 100644 --- a/components/createStackRoutingComponent/readme.md +++ b/components/createStackRoutingComponent/readme.md @@ -244,6 +244,8 @@ export default () => { pop={() => { setRouteState(routeState.slice(0, routeState.length - 1)); }} + width="fillsContainer" + height="fillsContainer" /> ); diff --git a/components/createStackRoutingComponent/unit.tsx b/components/createStackRoutingComponent/unit.tsx index c7554e8a..466d1e8e 100644 --- a/components/createStackRoutingComponent/unit.tsx +++ b/components/createStackRoutingComponent/unit.tsx @@ -8,7 +8,7 @@ import { StackRoute, } from "../.."; -test(`can render one item`, () => { +test(`can render one item width fills container height fills container`, () => { type ParametersA = { readonly testRouteAParameterKey: | `Test Route A Parameter Value A` @@ -87,6 +87,8 @@ test(`can render one item`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> ); @@ -105,6 +107,8 @@ test(`can render one item`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> , ]} @@ -114,7 +118,7 @@ test(`can render one item`, () => { expect(setRouteState).not.toHaveBeenCalled(); }); -test(`can render two items`, () => { +test(`can render two items width fills container height fills container`, () => { type ParametersA = { readonly testRouteAParameterKey: | `Test Route A Parameter Value A` @@ -199,6 +203,8 @@ test(`can render two items`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> ); @@ -216,6 +222,8 @@ test(`can render two items`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> @@ -230,6 +238,8 @@ test(`can render two items`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> @@ -238,7 +248,7 @@ test(`can render two items`, () => { expect(setRouteState).not.toHaveBeenCalled(); }); -test(`can render three items`, () => { +test(`can render three items width fills container height fills container`, () => { type ParametersA = { readonly testRouteAParameterKey: | `Test Route A Parameter Value A` @@ -329,6 +339,8 @@ test(`can render three items`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> ); @@ -346,6 +358,8 @@ test(`can render three items`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> @@ -360,6 +374,8 @@ test(`can render three items`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> @@ -374,6 +390,1184 @@ test(`can render three items`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" + /> + + + ); + + expect(setRouteState).not.toHaveBeenCalled(); +}); + +test(`can render one item width fits content height fills container`, () => { + type ParametersA = { + readonly testRouteAParameterKey: + | `Test Route A Parameter Value A` + | `Test Route A Parameter Value B`; + }; + + type ParametersB = { + readonly testRouteBParameterKey: `Test Route B Parameter Value`; + }; + + type ParametersC = { + readonly testRouteCParameterKey: `Test Route C Parameter Value`; + }; + + type Parameters = { + testRouteAKey: ParametersA; + testRouteBKey: ParametersB; + testRouteCKey: ParametersC; + }; + + type OtherProps = { + exampleOtherPropKey: `Example Other Prop Value`; + }; + + const RouteA: StackRoute = ({ + parameters: { testRouteAParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route A with parameter {testRouteAParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteB: StackRoute = ({ + parameters: { testRouteBParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route B with parameter {testRouteBParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteC: StackRoute = ({ + parameters: { testRouteCParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route C with parameter {testRouteCParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const routeTable: StackRouteTable = { + testRouteAKey: RouteA, + testRouteBKey: RouteB, + testRouteCKey: RouteC, + }; + + const routeState: StackRouterState = [ + { + key: `testRouteBKey`, + parameters: { + testRouteBParameterKey: `Test Route B Parameter Value`, + }, + }, + ]; + + const setRouteState = jest.fn(); + + const Component = createStackRoutingComponent(routeTable); + + const rendered = ( + + ); + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + , + ]} + + ); + + expect(setRouteState).not.toHaveBeenCalled(); +}); + +test(`can render two items width fits content height fills container`, () => { + type ParametersA = { + readonly testRouteAParameterKey: + | `Test Route A Parameter Value A` + | `Test Route A Parameter Value B`; + }; + + type ParametersB = { + readonly testRouteBParameterKey: `Test Route B Parameter Value`; + }; + + type ParametersC = { + readonly testRouteCParameterKey: `Test Route C Parameter Value`; + }; + + type Parameters = { + testRouteAKey: ParametersA; + testRouteBKey: ParametersB; + testRouteCKey: ParametersC; + }; + + type OtherProps = { + exampleOtherPropKey: `Example Other Prop Value`; + }; + + const RouteA: StackRoute = ({ + parameters: { testRouteAParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route A with parameter {testRouteAParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteB: StackRoute = ({ + parameters: { testRouteBParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route B with parameter {testRouteBParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteC: StackRoute = ({ + parameters: { testRouteCParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route C with parameter {testRouteCParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const routeTable: StackRouteTable = { + testRouteAKey: RouteA, + testRouteBKey: RouteB, + testRouteCKey: RouteC, + }; + + const routeState: StackRouterState = [ + { + key: `testRouteBKey`, + parameters: { + testRouteBParameterKey: `Test Route B Parameter Value`, + }, + }, + { + key: `testRouteAKey`, + parameters: { + testRouteAParameterKey: `Test Route A Parameter Value A`, + }, + }, + ]; + + const setRouteState = jest.fn(); + + const Component = createStackRoutingComponent(routeTable); + + const rendered = ( + + ); + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + + + + + + + + ); + + expect(setRouteState).not.toHaveBeenCalled(); +}); + +test(`can render three items width fits content height fills container`, () => { + type ParametersA = { + readonly testRouteAParameterKey: + | `Test Route A Parameter Value A` + | `Test Route A Parameter Value B`; + }; + + type ParametersB = { + readonly testRouteBParameterKey: `Test Route B Parameter Value`; + }; + + type ParametersC = { + readonly testRouteCParameterKey: `Test Route C Parameter Value`; + }; + + type Parameters = { + testRouteAKey: ParametersA; + testRouteBKey: ParametersB; + testRouteCKey: ParametersC; + }; + + type OtherProps = { + exampleOtherPropKey: `Example Other Prop Value`; + }; + + const RouteA: StackRoute = ({ + parameters: { testRouteAParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route A with parameter {testRouteAParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteB: StackRoute = ({ + parameters: { testRouteBParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route B with parameter {testRouteBParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteC: StackRoute = ({ + parameters: { testRouteCParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route C with parameter {testRouteCParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const routeTable: StackRouteTable = { + testRouteAKey: RouteA, + testRouteBKey: RouteB, + testRouteCKey: RouteC, + }; + + const routeState: StackRouterState = [ + { + key: `testRouteBKey`, + parameters: { + testRouteBParameterKey: `Test Route B Parameter Value`, + }, + }, + { + key: `testRouteAKey`, + parameters: { + testRouteAParameterKey: `Test Route A Parameter Value A`, + }, + }, + { + key: `testRouteAKey`, + parameters: { + testRouteAParameterKey: `Test Route A Parameter Value B`, + }, + }, + ]; + + const setRouteState = jest.fn(); + + const Component = createStackRoutingComponent(routeTable); + + const rendered = ( + + ); + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + + + + + + + + + + + ); + + expect(setRouteState).not.toHaveBeenCalled(); +}); + +test(`can render one item width fills container height fits content`, () => { + type ParametersA = { + readonly testRouteAParameterKey: + | `Test Route A Parameter Value A` + | `Test Route A Parameter Value B`; + }; + + type ParametersB = { + readonly testRouteBParameterKey: `Test Route B Parameter Value`; + }; + + type ParametersC = { + readonly testRouteCParameterKey: `Test Route C Parameter Value`; + }; + + type Parameters = { + testRouteAKey: ParametersA; + testRouteBKey: ParametersB; + testRouteCKey: ParametersC; + }; + + type OtherProps = { + exampleOtherPropKey: `Example Other Prop Value`; + }; + + const RouteA: StackRoute = ({ + parameters: { testRouteAParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route A with parameter {testRouteAParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteB: StackRoute = ({ + parameters: { testRouteBParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route B with parameter {testRouteBParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteC: StackRoute = ({ + parameters: { testRouteCParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route C with parameter {testRouteCParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const routeTable: StackRouteTable = { + testRouteAKey: RouteA, + testRouteBKey: RouteB, + testRouteCKey: RouteC, + }; + + const routeState: StackRouterState = [ + { + key: `testRouteBKey`, + parameters: { + testRouteBParameterKey: `Test Route B Parameter Value`, + }, + }, + ]; + + const setRouteState = jest.fn(); + + const Component = createStackRoutingComponent(routeTable); + + const rendered = ( + + ); + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + , + ]} + + ); + + expect(setRouteState).not.toHaveBeenCalled(); +}); + +test(`can render two items width fills container height fits content`, () => { + type ParametersA = { + readonly testRouteAParameterKey: + | `Test Route A Parameter Value A` + | `Test Route A Parameter Value B`; + }; + + type ParametersB = { + readonly testRouteBParameterKey: `Test Route B Parameter Value`; + }; + + type ParametersC = { + readonly testRouteCParameterKey: `Test Route C Parameter Value`; + }; + + type Parameters = { + testRouteAKey: ParametersA; + testRouteBKey: ParametersB; + testRouteCKey: ParametersC; + }; + + type OtherProps = { + exampleOtherPropKey: `Example Other Prop Value`; + }; + + const RouteA: StackRoute = ({ + parameters: { testRouteAParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route A with parameter {testRouteAParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteB: StackRoute = ({ + parameters: { testRouteBParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route B with parameter {testRouteBParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteC: StackRoute = ({ + parameters: { testRouteCParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route C with parameter {testRouteCParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const routeTable: StackRouteTable = { + testRouteAKey: RouteA, + testRouteBKey: RouteB, + testRouteCKey: RouteC, + }; + + const routeState: StackRouterState = [ + { + key: `testRouteBKey`, + parameters: { + testRouteBParameterKey: `Test Route B Parameter Value`, + }, + }, + { + key: `testRouteAKey`, + parameters: { + testRouteAParameterKey: `Test Route A Parameter Value A`, + }, + }, + ]; + + const setRouteState = jest.fn(); + + const Component = createStackRoutingComponent(routeTable); + + const rendered = ( + + ); + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + + + + + + + + ); + + expect(setRouteState).not.toHaveBeenCalled(); +}); + +test(`can render three items width fills container height fits content`, () => { + type ParametersA = { + readonly testRouteAParameterKey: + | `Test Route A Parameter Value A` + | `Test Route A Parameter Value B`; + }; + + type ParametersB = { + readonly testRouteBParameterKey: `Test Route B Parameter Value`; + }; + + type ParametersC = { + readonly testRouteCParameterKey: `Test Route C Parameter Value`; + }; + + type Parameters = { + testRouteAKey: ParametersA; + testRouteBKey: ParametersB; + testRouteCKey: ParametersC; + }; + + type OtherProps = { + exampleOtherPropKey: `Example Other Prop Value`; + }; + + const RouteA: StackRoute = ({ + parameters: { testRouteAParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route A with parameter {testRouteAParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteB: StackRoute = ({ + parameters: { testRouteBParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route B with parameter {testRouteBParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteC: StackRoute = ({ + parameters: { testRouteCParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route C with parameter {testRouteCParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const routeTable: StackRouteTable = { + testRouteAKey: RouteA, + testRouteBKey: RouteB, + testRouteCKey: RouteC, + }; + + const routeState: StackRouterState = [ + { + key: `testRouteBKey`, + parameters: { + testRouteBParameterKey: `Test Route B Parameter Value`, + }, + }, + { + key: `testRouteAKey`, + parameters: { + testRouteAParameterKey: `Test Route A Parameter Value A`, + }, + }, + { + key: `testRouteAKey`, + parameters: { + testRouteAParameterKey: `Test Route A Parameter Value B`, + }, + }, + ]; + + const setRouteState = jest.fn(); + + const Component = createStackRoutingComponent(routeTable); + + const rendered = ( + + ); + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + + + + + + + + + + + ); + + expect(setRouteState).not.toHaveBeenCalled(); +}); + +test(`can render one item width fits content height fits content`, () => { + type ParametersA = { + readonly testRouteAParameterKey: + | `Test Route A Parameter Value A` + | `Test Route A Parameter Value B`; + }; + + type ParametersB = { + readonly testRouteBParameterKey: `Test Route B Parameter Value`; + }; + + type ParametersC = { + readonly testRouteCParameterKey: `Test Route C Parameter Value`; + }; + + type Parameters = { + testRouteAKey: ParametersA; + testRouteBKey: ParametersB; + testRouteCKey: ParametersC; + }; + + type OtherProps = { + exampleOtherPropKey: `Example Other Prop Value`; + }; + + const RouteA: StackRoute = ({ + parameters: { testRouteAParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route A with parameter {testRouteAParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteB: StackRoute = ({ + parameters: { testRouteBParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route B with parameter {testRouteBParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteC: StackRoute = ({ + parameters: { testRouteCParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route C with parameter {testRouteCParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const routeTable: StackRouteTable = { + testRouteAKey: RouteA, + testRouteBKey: RouteB, + testRouteCKey: RouteC, + }; + + const routeState: StackRouterState = [ + { + key: `testRouteBKey`, + parameters: { + testRouteBParameterKey: `Test Route B Parameter Value`, + }, + }, + ]; + + const setRouteState = jest.fn(); + + const Component = createStackRoutingComponent(routeTable); + + const rendered = ( + + ); + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + , + ]} + + ); + + expect(setRouteState).not.toHaveBeenCalled(); +}); + +test(`can render two items width fits content height fits content`, () => { + type ParametersA = { + readonly testRouteAParameterKey: + | `Test Route A Parameter Value A` + | `Test Route A Parameter Value B`; + }; + + type ParametersB = { + readonly testRouteBParameterKey: `Test Route B Parameter Value`; + }; + + type ParametersC = { + readonly testRouteCParameterKey: `Test Route C Parameter Value`; + }; + + type Parameters = { + testRouteAKey: ParametersA; + testRouteBKey: ParametersB; + testRouteCKey: ParametersC; + }; + + type OtherProps = { + exampleOtherPropKey: `Example Other Prop Value`; + }; + + const RouteA: StackRoute = ({ + parameters: { testRouteAParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route A with parameter {testRouteAParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteB: StackRoute = ({ + parameters: { testRouteBParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route B with parameter {testRouteBParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteC: StackRoute = ({ + parameters: { testRouteCParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route C with parameter {testRouteCParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const routeTable: StackRouteTable = { + testRouteAKey: RouteA, + testRouteBKey: RouteB, + testRouteCKey: RouteC, + }; + + const routeState: StackRouterState = [ + { + key: `testRouteBKey`, + parameters: { + testRouteBParameterKey: `Test Route B Parameter Value`, + }, + }, + { + key: `testRouteAKey`, + parameters: { + testRouteAParameterKey: `Test Route A Parameter Value A`, + }, + }, + ]; + + const setRouteState = jest.fn(); + + const Component = createStackRoutingComponent(routeTable); + + const rendered = ( + + ); + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + + + + + + + + ); + + expect(setRouteState).not.toHaveBeenCalled(); +}); + +test(`can render three items width fits content height fits content`, () => { + type ParametersA = { + readonly testRouteAParameterKey: + | `Test Route A Parameter Value A` + | `Test Route A Parameter Value B`; + }; + + type ParametersB = { + readonly testRouteBParameterKey: `Test Route B Parameter Value`; + }; + + type ParametersC = { + readonly testRouteCParameterKey: `Test Route C Parameter Value`; + }; + + type Parameters = { + testRouteAKey: ParametersA; + testRouteBKey: ParametersB; + testRouteCKey: ParametersC; + }; + + type OtherProps = { + exampleOtherPropKey: `Example Other Prop Value`; + }; + + const RouteA: StackRoute = ({ + parameters: { testRouteAParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route A with parameter {testRouteAParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteB: StackRoute = ({ + parameters: { testRouteBParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route B with parameter {testRouteBParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const RouteC: StackRoute = ({ + parameters: { testRouteCParameterKey }, + exampleOtherPropKey, + }) => ( + + Example Route C with parameter {testRouteCParameterKey}{" "} + {exampleOtherPropKey} + + ); + + const routeTable: StackRouteTable = { + testRouteAKey: RouteA, + testRouteBKey: RouteB, + testRouteCKey: RouteC, + }; + + const routeState: StackRouterState = [ + { + key: `testRouteBKey`, + parameters: { + testRouteBParameterKey: `Test Route B Parameter Value`, + }, + }, + { + key: `testRouteAKey`, + parameters: { + testRouteAParameterKey: `Test Route A Parameter Value A`, + }, + }, + { + key: `testRouteAKey`, + parameters: { + testRouteAParameterKey: `Test Route A Parameter Value B`, + }, + }, + ]; + + const setRouteState = jest.fn(); + + const Component = createStackRoutingComponent(routeTable); + + const rendered = ( + + ); + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + + + + + + + + @@ -477,6 +1671,8 @@ describe(`push`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> ); @@ -627,6 +1823,8 @@ describe(`pop`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> ); @@ -740,6 +1938,8 @@ describe(`pop default`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> ); @@ -859,6 +2059,8 @@ describe(`replace`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> ); @@ -1010,6 +2212,8 @@ describe(`reset`, () => { routeState={routeState} setRouteState={setRouteState} exampleOtherPropKey="Example Other Prop Value" + width="fillsContainer" + height="fillsContainer" /> ); diff --git a/types/StackRoute/index.tsx b/types/StackRoute/index.tsx index bd3c8766..28b57bda 100644 --- a/types/StackRoute/index.tsx +++ b/types/StackRoute/index.tsx @@ -41,5 +41,7 @@ export type StackRoute< readonly parameters: TRouteParameters[TRouteKey]; readonly routeState: StackRouterState; readonly setRouteState: (to: StackRouterState) => void; + readonly width: `fillsContainer` | `fitsContent`; + readonly height: `fillsContainer` | `fitsContent`; } & TOtherProps >;