0

I need a conditional render of the MenuOption's at the moment of opening the menu.

It would appear that the MenuOption's in MenuOptions are rendered before the menu even opens from my tests.

Based on a timestamp diff I need to change and Icon and a style.

I notice there is that will fire when the menu opens, I wrote a function to update a global variable but the global variable seems to be set when the Menu is built, not when the options are opened.

Simplified version of what I am trying. Note the conditional style in each of the <Text> elements canSplit

let canSplit = false;

const canSplitEntry = () => {
    canSplit =  true;  
};

return (
    <Menu onOpen={() => canSplitEntry()}>
        <MenuTrigger style={styles.menuTrigger}>
            <Icon
                name="more-vert"
                color={theme.text.color}
                size={20}
            />
        </MenuTrigger>
        <MenuOptions style={theme.popupMenu}>
            <MenuOption
                style={styles.menuOption}
                onSelect={() => canSplit ? setModal('splitEntry', logTimestamp) : {}}
            >
                <SplitIcon color={theme.text.color} size={15} />
                <Text style={[theme.text, (canSplit ? theme.opacityStrong : theme.opacityMid), { paddingLeft: 10 }]}>
                    Split
                </Text>
            </MenuOption>

            <MenuOption
                style={styles.menuOption}
                onSelect={() => canMerge ? setModal('mergeEntry', logTimestamp) : {}}
            >
                <MergeIcon color={theme.text.color} size={15} />
                <Text style={[theme.text, !canMerge && theme.opacityStrong, { paddingLeft: 10 }]}>
                    Merge
                </Text>
            </MenuOption>
        </MenuOptions>
    </Menu>
)

I would hope that when onOpen is fired the global var is updated and the MenuOption's would respond to the change rather than pre render and never change again

P-Rick Stephens
  • 235
  • 1
  • 5
  • 15
  • well, if you want react to update the menu, you need to re-render your component (e.g. setting state). – sodik Jul 07 '19 at 18:57
  • My goodness... haha. HOW did I overlook this. I will try to pass a callback function from the parent down to the functional component that changes its parent state and hopefully that re-renders / re-calculates the child. Duh :) – P-Rick Stephens Jul 08 '19 at 15:20

0 Answers0