"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabListTest = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var react_native_1 = require("react-native");
var divider_1 = require("@fluentui-react-native/divider");
var tablist_1 = require("@fluentui-react-native/tablist");
var text_1 = require("@fluentui-react-native/text");
var Test_1 = require("../Test");
var Header = text_1.TextV1.customize({ variant: 'subheaderStandard' });
var Line = divider_1.Divider.customize({ paddingVertical: 4 });
var PaddedTabList = tablist_1.TabList.customize({
    paddingVertical: 4,
});
var styles = react_native_1.StyleSheet.create({
    container: {
        paddingVertical: 8,
    },
});
var TabListSizeTest = function () {
    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
        react_1.default.createElement(Header, null, "Small"),
        react_1.default.createElement(PaddedTabList, { size: "small" },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
        react_1.default.createElement(Line, null),
        react_1.default.createElement(Header, null, "Medium (default)"),
        react_1.default.createElement(PaddedTabList, { size: "medium" },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
        react_1.default.createElement(Line, null),
        react_1.default.createElement(Header, null, "Large"),
        react_1.default.createElement(PaddedTabList, { size: "large" },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2"))));
};
var TabListVerticalTest = function () {
    return (react_1.default.createElement(tablist_1.TabList, { vertical: true },
        react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
        react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")));
};
var TabListAppearanceTest = function () {
    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
        react_1.default.createElement(Header, null, "Transparent Appearance"),
        react_1.default.createElement(PaddedTabList, { appearance: "transparent" },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
        react_1.default.createElement(Header, null, "Subtle Appearance"),
        react_1.default.createElement(PaddedTabList, { appearance: "subtle" },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2"))));
};
var TabListDisabledTest = function () {
    return (react_1.default.createElement(react_native_1.View, null,
        react_1.default.createElement(PaddedTabList, null,
            react_1.default.createElement(tablist_1.Tab, { disabled: true, tabKey: "hello" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
        react_1.default.createElement(PaddedTabList, { disabled: true },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2"))));
};
var TabListIconTest = function () {
    var iconProp = {
        fontSource: {
            fontFamily: 'Arial',
            codepoint: 0x2663,
        },
    };
    return (react_1.default.createElement(tablist_1.TabList, null,
        react_1.default.createElement(tablist_1.Tab, { icon: iconProp, tabKey: "withIcon" }, "Tab Item"),
        react_1.default.createElement(tablist_1.Tab, { icon: iconProp, tabKey: "iconOnly" })));
};
var sections = [
    {
        name: 'Size',
        component: TabListSizeTest,
    },
    {
        name: 'Vertical',
        component: TabListVerticalTest,
    },
    {
        name: 'Appearance',
        component: TabListAppearanceTest,
    },
    {
        name: 'Disabled',
        component: TabListDisabledTest,
    },
    {
        name: 'Icon',
        component: TabListIconTest,
    },
];
var TabListTest = function () {
    var status = {
        win32Status: 'Experimental',
        uwpStatus: 'Experimental',
        iosStatus: 'Backlog',
        macosStatus: 'Experimental',
        androidStatus: 'Backlog',
    };
    var description = 'With Tabs, users can navigate to another view.';
    return react_1.default.createElement(Test_1.Test, { name: "TabsV1 Test", description: description, sections: sections, status: status });
};
exports.TabListTest = TabListTest;
//# sourceMappingURL=TabListTest.js.map