Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

In React, is there a way to generate dynamic enum given a number of children within a high order component?

$
0
0

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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>