"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuTest = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var menu_1 = require("@fluentui-react-native/menu");
var stack_1 = require("@fluentui-react-native/stack");
var switch_1 = require("@fluentui-react-native/switch");
var text_1 = require("@fluentui-react-native/text");
var E2EMenuTest_1 = require("./E2EMenuTest");
var MenuComponentOutsideMenuList_1 = require("./MenuComponentOutsideMenuList");
var MenuIcons_1 = require("./MenuIcons");
var MenuRefs_1 = require("./MenuRefs");
var MenuScrollView_1 = require("./MenuScrollView");
var MenuTooltips_1 = require("./MenuTooltips");
var MenuTriggerCallbacks_1 = require("./MenuTriggerCallbacks");
var consts_1 = require("../../../../E2E/src/Menu/consts");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
var MenuDefault = function () {
    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"))))));
};
var defaultCheckedTestCase = ['itemOne'];
var checkedTestCase = ['itemTwo'];
var MenuCheckmarks = function () {
    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"))))));
};
var MenuRadioItem = function () {
    var _a = react_1.default.useState(['itemOne']), checked = _a[0], setChecked = _a[1];
    var onCheckedChange = react_1.default.useCallback(function (_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"))))));
};
var Submenu = function (props) {
    return (react_1.default.createElement(menu_1.Menu, tslib_1.__assign({}, 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)))));
};
var MenuSubMenu = function () {
    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))))));
};
var SubmenuWithScrollView = function (props) {
    return (react_1.default.createElement(menu_1.Menu, tslib_1.__assign({}, 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")))));
};
var MenuSubMenuWithScrollView = function () {
    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))))));
};
var MenuOpenOnHover = function () {
    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))))));
};
var rootStackStyle = react_native_1.StyleSheet.create({ root: tslib_1.__assign(tslib_1.__assign({}, styles_1.stackStyle), { flexDirection: 'row' }) });
var MenuControlledOpen = function () {
    var _a = react_1.default.useState(false), open = _a[0], setOpen = _a[1];
    var onOpenChange = function () {
        setOpen(false);
    };
    return (react_1.default.createElement(stack_1.Stack, { style: rootStackStyle.root },
        react_1.default.createElement(react_native_2.ButtonV1, { onClick: function () { return setOpen(!open); } }, "Toggle open"),
        react_1.default.createElement(menu_1.Menu, tslib_1.__assign({}, (react_native_1.Platform.OS === 'android' && { onOpenChange: 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))))));
};
var CustomMenuPopover = menu_1.MenuPopover.customize({ borderWidth: 4, borderColor: 'blue' });
var CustomMenuList = menu_1.MenuList.customize({ gap: 5, padding: 6, backgroundColor: 'pink' });
var CustomMenuItem = menu_1.MenuItem.customize({
    gap: 5,
    padding: 8,
    backgroundColor: 'red',
    color: 'white',
    borderRadius: 2,
    checkmarkSize: 10,
    submenuIndicatorPadding: 4,
    submenuIndicatorSize: 10,
    fontSize: 14,
});
var CustomMenuCheckmark = menu_1.MenuItemCheckbox.customize({
    gap: 5,
    padding: 8,
    backgroundColor: 'red',
    color: 'white',
    borderRadius: 2,
    checkmarkSize: 10,
    fontSize: 14,
    checkmarkColor: 'blue',
});
var CustomMenuDivider = menu_1.MenuDivider.customize({
    height: 8,
    margin: 4,
    marginVertical: 6,
    width: 100,
    backgroundColor: 'purple',
});
var MenuCustomized = function () {
    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, null,
                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"))))));
};
var MenuNofM = function () {
    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"))))));
};
var CustomMenuTrigger = function () {
    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"))));
};
var MenuWithCustomMenuTrigger = function (props) {
    return (react_1.default.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        react_1.default.createElement(menu_1.Menu, tslib_1.__assign({}, 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"))))));
};
var MenuWithGroups = function () {
    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")))))));
};
var menuAsABlackboxStyles = react_native_1.StyleSheet.create({
    actionButton: { alignSelf: 'center', justifyContent: 'center' },
    switch: { marginHorizontal: 10 },
});
var MenuAsABlackbox = function () {
    var _a = react_1.default.useState(false), open = _a[0], setOpen = _a[1];
    var _b = react_1.default.useState(false), dnd = _b[0], setDnD = _b[1];
    var onOpenChange = react_1.default.useCallback(function () {
        setOpen(false);
    }, [setOpen]);
    var onSwitchChange = react_1.default.useCallback(function () {
        setDnD(!dnd);
    }, [dnd, setDnD]);
    var onMenuTriggerClicked = react_1.default.useCallback(function () {
        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")))))));
};
var menuSections = [
    {
        name: 'Menu Default',
        testID: consts_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,
        },
    }),
];
var e2eSections = [
    {
        name: 'Menu E2E',
        component: E2EMenuTest_1.E2EMenuTest,
    },
];
var MenuTest = function () {
    var status = {
        win32Status: 'Production',
        uwpStatus: 'Backlog',
        iosStatus: 'Backlog',
        macosStatus: 'Production',
        androidStatus: 'Experimental',
    };
    var 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.';
    var 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