I have an high order component called Box.
const Box = ({ children, ...props }: any) => { const { constraints } = props; return (<View style={ { paddingTop: constraints.top, paddingRight: constraints.Right, paddingBottom: constraints.Bottom, paddingLeft: constraints.Left, } }> {Children.map(children, (child, index) => { return (<View style={{ paddingTop: constraints.spacer.top[0].includes(index) && constraints.spacer.top[1], paddingRight: constraints.spacer.right[0].includes(index) && constraints.spacer.right[1], paddingBottom: constraints.spacer.bottom[0].includes(index) && constraints.spacer.bottom[1], paddingLeft: constraints.spacer.left[0].includes(index) && constraints.spacer.left[1], }}><child.type {...child.props} > {child}</child.type></View> ); }) }</View > );};
As you can see, I'm applying constraint certain children based on their indexes, like so:
<Box constraints={{ top: 100, right: 0, bottom: 0, left: 0, spacer: { top: [[], 0], <--| I FIRST PASS THE INDEX OF THE CHILD(REN) right: [[1], 100], <--| AND THEN bottom: [[0], 30], <--| I PASS THE VALUE OF THE CONTRAINT left: [[], 0] <--| } }}><View style={{ padding: 10, backgroundColor: 'blue' }}><Text>I am the component A</Text></View><View style={{ padding: 10, backgroundColor: 'pink' }}><Text>I am the component B</Text></View></Box>
When providing the children index for the spacer prop, I want Typescript to be able to display the available choices based on the number of children.
Is it feasible?