"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuTest = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
const menu_1 = require("@fluentui-react-native/menu");
const stack_1 = require("@fluentui-react-native/stack");
const switch_1 = require("@fluentui-react-native/switch");
const text_1 = require("@fluentui-react-native/text");
const E2EMenuTest_1 = require("./E2EMenuTest");
const MenuComponentOutsideMenuList_1 = require("./MenuComponentOutsideMenuList");
const MenuIcons_1 = require("./MenuIcons");
const MenuRefs_1 = require("./MenuRefs");
const MenuScrollView_1 = require("./MenuScrollView");
const MenuTooltips_1 = require("./MenuTooltips");
const MenuTriggerCallbacks_1 = require("./MenuTriggerCallbacks");
const styles_1 = require("../Common/styles");
const Test_1 = require("../Test");
const MenuDefault = () => {
    return (react_1.default.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        react_1.default.createElement(menu_1.Menu, null,
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, null, "Test")),
            react_1.default.createElement(menu_1.MenuPopover, null,
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem"),
                    react_1.default.createElement(menu_1.MenuItem, { disabled: true }, "A disabled MenuItem"),
                    react_1.default.createElement(menu_1.MenuItem, null, "A third plain MenuItem"))))));
};
const defaultCheckedTestCase = ['itemOne'];
const checkedTestCase = ['itemTwo'];
const MenuCheckmarks = () => {
    return (react_1.default.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        react_1.default.createElement(menu_1.Menu, { defaultChecked: defaultCheckedTestCase },
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, null, "All checkmark items")),
            react_1.default.createElement(menu_1.MenuPopover, null,
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(menu_1.MenuItemCheckbox, { name: "itemOne" }, "A MenuItem with checkmark"),
                    react_1.default.createElement(menu_1.MenuDivider, null),
                    react_1.default.createElement(menu_1.MenuItemCheckbox, { name: "itemTwo" }, "Another MenuItem with checkmark")))),
        react_1.default.createElement(menu_1.Menu, { hasCheckmarks: true, checked: checkedTestCase },
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, null, "Some controlled checkmark items with alignment")),
            react_1.default.createElement(menu_1.MenuPopover, null,
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem"),
                    react_1.default.createElement(menu_1.MenuItemCheckbox, { name: "itemTwo" }, "A MenuItem with checkmark"),
                    react_1.default.createElement(menu_1.MenuItemCheckbox, { disabled: true, name: "itemThree" }, "A disabled MenuItem with checkmark"),
                    react_1.default.createElement(menu_1.MenuItemCheckbox, { name: "itemFour" }, "A MenuItem with checkmark")))),
        react_1.default.createElement(menu_1.Menu, null,
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, null, "Some checkmark items without alignment")),
            react_1.default.createElement(menu_1.MenuPopover, null,
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem"),
                    react_1.default.createElement(menu_1.MenuItemCheckbox, { name: "itemTwo" }, "A MenuItem with checkmark without alignment"),
                    react_1.default.createElement(menu_1.MenuItemCheckbox, { name: "itemThree" }, "A MenuItem with checkmark without alignment"))))));
};
const MenuRadioItem = () => {
    const [checked, setChecked] = react_1.default.useState(['itemOne']);
    const onCheckedChange = react_1.default.useCallback((_e, checkedChange) => {
        setChecked(checkedChange);
    }, [setChecked]);
    return (react_1.default.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        react_1.default.createElement(text_1.TextV1, null,
            "Current checked: ",
            checked.join(' ')),
        react_1.default.createElement(menu_1.Menu, { defaultChecked: defaultCheckedTestCase, onCheckedChange: onCheckedChange },
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, null, "Items with radio selection")),
            react_1.default.createElement(menu_1.MenuPopover, null,
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(menu_1.MenuItemRadio, { name: "itemOne" }, "A MenuItem with checkmark and radio selection"),
                    react_1.default.createElement(menu_1.MenuItemRadio, { name: "itemTwo" }, "Another MenuItem with checkmark and radio selection"),
                    react_1.default.createElement(menu_1.MenuItemRadio, { name: "itemThree" }, "A third MenuItem with checkmark and radio selection"),
                    react_1.default.createElement(menu_1.MenuItemCheckbox, { name: "itemFour" }, "A MenuItem with checkmark and toggle selection"))))));
};
const Submenu = (props) => {
    return (react_1.default.createElement(menu_1.Menu, { ...props },
        react_1.default.createElement(menu_1.MenuTrigger, null,
            react_1.default.createElement(menu_1.MenuItem, null, "A second MenuItem trigger")),
        react_1.default.createElement(menu_1.MenuPopover, { minWidth: 230 },
            react_1.default.createElement(menu_1.MenuList, null,
                react_1.default.createElement(menu_1.MenuItemCheckbox, { name: 'a' }, "A nested MenuItemCheckbox"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(Submenu, null)))));
};
const MenuSubMenu = () => {
    return (react_1.default.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        react_1.default.createElement(menu_1.Menu, null,
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, null, "Test")),
            react_1.default.createElement(menu_1.MenuPopover, null,
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(menu_1.MenuItem, null, "A MenuItem"),
                    react_1.default.createElement(Submenu, null))))));
};
const SubmenuWithScrollView = (props) => {
    return (react_1.default.createElement(menu_1.Menu, { ...props },
        react_1.default.createElement(menu_1.MenuTrigger, null,
            react_1.default.createElement(menu_1.MenuItem, null, "A second MenuItem trigger")),
        react_1.default.createElement(menu_1.MenuPopover, { maxHeight: 200 },
            react_1.default.createElement(menu_1.MenuList, null,
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem"),
                react_1.default.createElement(menu_1.MenuItem, null, "A nested MenuItem")))));
};
const MenuSubMenuWithScrollView = () => {
    return (react_1.default.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        react_1.default.createElement(menu_1.Menu, null,
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, null, "Test")),
            react_1.default.createElement(menu_1.MenuPopover, { doNotTakePointerCapture: true },
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(menu_1.MenuItem, null, "A MenuItem"),
                    react_1.default.createElement(SubmenuWithScrollView, null))))));
};
const MenuOpenOnHover = () => {
    return (react_1.default.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        react_1.default.createElement(menu_1.Menu, { openOnHover: true },
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, null, "Test")),
            react_1.default.createElement(menu_1.MenuPopover, null,
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(menu_1.MenuItem, null, "A MenuItem"),
                    react_1.default.createElement(Submenu, null))))));
};
const rootStackStyle = react_native_1.StyleSheet.create({ root: { ...styles_1.stackStyle, flexDirection: 'row' } });
const MenuControlledOpen = () => {
    const [open, setOpen] = react_1.default.useState(false);
    const onOpenChange = () => {
        setOpen(false);
    };
    return (react_1.default.createElement(stack_1.Stack, { style: rootStackStyle.root },
        react_1.default.createElement(react_native_2.ButtonV1, { onClick: () => setOpen(!open) }, "Toggle open"),
        react_1.default.createElement(menu_1.Menu, { ...(react_native_1.Platform.OS === 'android' && { onOpenChange }), open: open },
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, null, "Test")),
            react_1.default.createElement(menu_1.MenuPopover, null,
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(menu_1.MenuItem, null, "A MenuItem"),
                    react_native_1.Platform.OS !== 'android' && react_1.default.createElement(Submenu, null))))));
};
const CustomMenuPopover = menu_1.MenuPopover.customize({ borderWidth: 4, borderColor: 'blue' });
const CustomMenuList = menu_1.MenuList.customize({ gap: 5, padding: 6, backgroundColor: 'pink' });
const CustomMenuItem = menu_1.MenuItem.customize({
    gap: 5,
    padding: 8,
    backgroundColor: 'red',
    color: 'white',
    borderRadius: 2,
    checkmarkSize: 10,
    submenuIndicatorPadding: 4,
    submenuIndicatorSize: 10,
    fontSize: 14,
});
const CustomMenuCheckmark = menu_1.MenuItemCheckbox.customize({
    gap: 5,
    padding: 8,
    backgroundColor: 'red',
    color: 'white',
    borderRadius: 2,
    checkmarkSize: 10,
    fontSize: 14,
    checkmarkColor: 'blue',
});
const CustomMenuDivider = menu_1.MenuDivider.customize({
    height: 8,
    margin: 4,
    marginVertical: 6,
    width: 100,
    backgroundColor: 'purple',
});
const MenuCustomized = () => {
    return (react_1.default.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        react_1.default.createElement(menu_1.Menu, null,
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, null, "Test")),
            react_1.default.createElement(CustomMenuPopover, { directionalHint: "rightCenter" },
                react_1.default.createElement(CustomMenuList, null,
                    react_1.default.createElement(CustomMenuItem, null, "A MenuItem"),
                    react_1.default.createElement(CustomMenuItem, null, "A MenuItem"),
                    react_1.default.createElement(CustomMenuDivider, null),
                    react_1.default.createElement(CustomMenuCheckmark, { name: 'custom' }, "A MenuItem"))))));
};
const MenuNofM = () => {
    return (react_1.default.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        react_1.default.createElement(menu_1.Menu, null,
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, null, "Test")),
            react_1.default.createElement(menu_1.MenuPopover, null,
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem"),
                    react_1.default.createElement(menu_1.MenuItem, { disabled: true }, "A disabled MenuItem"),
                    react_1.default.createElement(menu_1.MenuItem, { accessibilityPositionInSet: 9 }, "A plain MenuItem"),
                    react_1.default.createElement(menu_1.MenuDivider, null),
                    react_native_1.Platform.OS !== 'android' && react_1.default.createElement(Submenu, { accessibilityPositionInSet: 16, accessibilitySetSize: 7 }),
                    react_1.default.createElement(menu_1.MenuItem, { disabled: true, accessibilitySetSize: 2 }, "A disabled MenuItem"),
                    react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem"))))));
};
const CustomMenuTrigger = () => {
    return (react_1.default.createElement(react_native_1.View, { style: { backgroundColor: 'purple', width: 80, flexDirection: 'row', justifyContent: 'center' } },
        react_1.default.createElement(menu_1.MenuTrigger, null,
            react_1.default.createElement(react_native_2.ButtonV1, null, "Test"))));
};
const MenuWithCustomMenuTrigger = (props) => {
    return (react_1.default.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        react_1.default.createElement(menu_1.Menu, { ...props },
            react_1.default.createElement(CustomMenuTrigger, null),
            react_1.default.createElement(menu_1.MenuPopover, null,
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem"),
                    react_1.default.createElement(menu_1.MenuItem, { disabled: true }, "A disabled MenuItem"),
                    react_1.default.createElement(menu_1.MenuItem, { accessibilityPositionInSet: 9 }, "A plain MenuItem"),
                    react_1.default.createElement(menu_1.MenuDivider, null),
                    react_native_1.Platform.OS !== 'android' && react_1.default.createElement(Submenu, null),
                    react_1.default.createElement(menu_1.MenuItem, { disabled: true, accessibilitySetSize: 2 }, "A disabled MenuItem"),
                    react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem"))))));
};
const MenuWithGroups = () => {
    return (react_1.default.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        react_1.default.createElement(menu_1.Menu, null,
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, null, "Test")),
            react_1.default.createElement(menu_1.MenuPopover, null,
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(menu_1.MenuGroup, null,
                        react_1.default.createElement(menu_1.MenuGroupHeader, null, "Section 1"),
                        react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem"),
                        react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem")),
                    react_1.default.createElement(menu_1.MenuGroup, null,
                        react_1.default.createElement(menu_1.MenuGroupHeader, null, "Section 2"),
                        react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem"),
                        react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem"),
                        react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem")),
                    react_1.default.createElement(menu_1.MenuDivider, null),
                    react_1.default.createElement(menu_1.MenuGroup, null,
                        react_1.default.createElement(menu_1.MenuItem, null, "A plain MenuItem")))))));
};
const menuAsABlackboxStyles = react_native_1.StyleSheet.create({
    actionButton: { alignSelf: 'center', justifyContent: 'center' },
    switch: { marginHorizontal: 10 },
});
const MenuAsABlackbox = () => {
    const [open, setOpen] = react_1.default.useState(false);
    const [dnd, setDnD] = react_1.default.useState(false);
    const onOpenChange = react_1.default.useCallback(() => {
        setOpen(false);
    }, [setOpen]);
    const onSwitchChange = react_1.default.useCallback(() => {
        setDnD(!dnd);
    }, [dnd, setDnD]);
    const onMenuTriggerClicked = react_1.default.useCallback(() => {
        setOpen(!open);
    }, [open, setOpen]);
    return (react_1.default.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        react_1.default.createElement(menu_1.Menu, { onOpenChange: onOpenChange, open: open },
            react_1.default.createElement(menu_1.MenuTrigger, null,
                react_1.default.createElement(react_native_2.ButtonV1, { onClick: onMenuTriggerClicked }, "Blockbox Menu")),
            react_1.default.createElement(menu_1.MenuPopover, { minWidth: 200 },
                react_1.default.createElement(menu_1.MenuList, null,
                    react_1.default.createElement(switch_1.Switch, { checked: dnd, onChange: onSwitchChange, style: menuAsABlackboxStyles.switch, label: "Don't disturb" }),
                    react_1.default.createElement(menu_1.MenuItem, null, dnd ? 'DND is on' : 'DND is off'),
                    react_1.default.createElement(react_native_1.View, { style: menuAsABlackboxStyles.actionButton },
                        react_1.default.createElement(react_native_2.ButtonV1, { appearance: "subtle", onClick: onOpenChange }, "Action")))))));
};
const menuSections = [
    {
        name: 'Menu Default',
        testID: e2e_testing_1.MENU_TESTPAGE,
        component: MenuDefault,
    },
    {
        name: 'Menu Checkmarks',
        component: MenuCheckmarks,
    },
    {
        name: 'Menu Radioitem',
        component: MenuRadioItem,
    },
    react_native_1.Platform.select({
        android: null,
        default: {
            name: 'Menu Submenu with ScrollView',
            component: MenuSubMenuWithScrollView,
        },
    }),
    react_native_1.Platform.select({
        android: null,
        default: {
            name: 'Menu open on hover',
            component: MenuOpenOnHover,
        },
    }),
    {
        name: 'Menu open controlled',
        component: MenuControlledOpen,
    },
    react_native_1.Platform.select({
        android: null,
        default: {
            name: 'Menu with tooltips on items',
            component: MenuTooltips_1.MenuTooltips,
        },
    }),
    {
        name: 'Menu with icons',
        component: MenuIcons_1.MenuIcons,
    },
    react_native_1.Platform.select({
        android: null,
        default: {
            name: 'Menu Submenu',
            component: MenuSubMenu,
        },
    }),
    {
        name: 'Menu with ScrollView',
        component: MenuScrollView_1.MenuScrollView,
    },
    react_native_1.Platform.select({
        android: { name: 'Menu as a blackbox', component: MenuAsABlackbox },
        default: null,
    }),
    {
        name: 'Menu Trigger onClick Override',
        component: MenuTriggerCallbacks_1.MenuTriggerOnClickCallback,
    },
    react_native_1.Platform.select({
        android: null,
        default: {
            name: 'Menu Trigger Hover Override',
            component: MenuTriggerCallbacks_1.MenuTriggerHoverCallback,
        },
    }),
    {
        name: 'Menu Customized',
        component: MenuCustomized,
    },
    react_native_1.Platform.select({
        android: null,
        default: {
            name: 'Menu Refs',
            component: MenuRefs_1.MenuTriggerChildRef,
        },
    }),
    {
        name: 'Menu N of M Override',
        component: MenuNofM,
    },
    {
        name: 'Menu with custom MenuTrigger',
        component: MenuWithCustomMenuTrigger,
    },
    {
        name: 'Menu with groups',
        component: MenuWithGroups,
    },
    react_native_1.Platform.select({
        android: null,
        default: {
            name: 'MenuList component outside menu list test',
            component: MenuComponentOutsideMenuList_1.MenuComponentOutsideMenuList,
        },
    }),
];
const e2eSections = [
    {
        name: 'Menu E2E',
        component: E2EMenuTest_1.E2EMenuTest,
    },
];
const MenuTest = () => {
    const status = {
        win32Status: 'Production',
        uwpStatus: 'Backlog',
        iosStatus: 'Backlog',
        macosStatus: 'Production',
        androidStatus: 'Experimental',
    };
    const description = 'A Menu is an component that displays a list of options on a temporary surface. They are invoked when users interact with a button, action, or other control.';
    const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Menu/SPEC.md';
    return react_1.default.createElement(Test_1.Test, { name: "Menu Test", description: description, spec: spec, sections: menuSections, status: status, e2eSections: e2eSections });
};
exports.MenuTest = MenuTest;
//# sourceMappingURL=MenuTest.js.map