phx-react/dist/cjs/components/Tabs/Tabs.js

PHX REACT

"use strict";
exports.__esModule = true;
exports.PHXTabs = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var types_1 = require("../types");
var Badge_1 = require("../Badge");
var Card_1 = require("../Card");
function PHXTabs(_a) {
    var aggregate = _a.aggregate, children = _a.children, className = _a.className, dataTabs = _a.dataTabs, dataTabsQuery = _a.dataTabsQuery, defaultTab = _a.defaultTab, filterValue = _a.filterValue, getOnlyTitleOfTabs = _a.getOnlyTitleOfTabs, getQuery = _a.getQuery, getQuerySearch = _a.getQuerySearch, pagination = _a.pagination, paginationData = _a.paginationData, titleComponent = _a.titleComponent, tabComponent = _a.tabComponent, _b = _a.type, type = _b === void 0 ? 'default' : _b, onClickTab = _a.onClickTab;
    var defaultActive = dataTabs
        ? getOnlyTitleOfTabs
            ? dataTabs[0].id
            : dataTabs[0].name
        : dataTabsQuery
            ? dataTabsQuery[0].name
            : null;
    var _c = (0, react_1.useState)(defaultTab ? defaultTab : defaultActive), current = _c[0], setCurrent = _c[1];
    var handleChangeTabsQuery = function (eventValue) {
        var _a, _b;
        setCurrent(eventValue);
        if (dataTabsQuery && paginationData) {
            paginationData(0);
            getQuery((_a = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find(function (tab) { return tab.name === eventValue; })) === null || _a === void 0 ? void 0 : _a.query);
            getQuerySearch((_b = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find(function (tab) { return tab.name === eventValue; })) === null || _b === void 0 ? void 0 : _b.querySearch);
        }
    };
    (0, react_1.useEffect)(function () {
        var _a, _b;
        if (dataTabsQuery && filterValue) {
            getQuery((_a = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find(function (tab) { return tab.name === current; })) === null || _a === void 0 ? void 0 : _a.query);
            getQuerySearch((_b = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find(function (tab) { return tab.name === current; })) === null || _b === void 0 ? void 0 : _b.querySearch);
        }
    }, [filterValue, pagination]);
    var Tabs = function () {
        var _a, _b, _c;
        return dataTabsQuery ? (react_1["default"].createElement("div", { className: 'mb-4' },
            react_1["default"].createElement("div", { className: 'sm:hidden' },
                react_1["default"].createElement("label", { className: 'sr-only', htmlFor: 'tabs' }, "Select a tab"),
                react_1["default"].createElement("select", { className: 'block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm', defaultValue: (_a = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find(function (tab) { return tab.name === current; })) === null || _a === void 0 ? void 0 : _a.name, id: 'tabs', name: 'tabs', onChange: function (e) { return handleChangeTabsQuery(e.target.value); } }, dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.map(function (tab) { return (react_1["default"].createElement("option", { key: tab.name, value: tab.name }, tab.name === current && aggregate ? react_1["default"].createElement("span", null, tab.name + ' ' + '(' + aggregate + ')') : tab.name)); }))),
            react_1["default"].createElement("div", { className: 'hidden sm:block' },
                react_1["default"].createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1' }, dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.map(function (tab) { return (react_1["default"].createElement("button", { key: tab.name, 
                    // aria-current={tab.code === parentCode ? 'page' : undefined}
                    className: (0, types_1.classNames)(tab.name === current ? 'bg-gray-200 text-gray-800' : 'text-gray-600 hover:bg-gray-200', 'rounded-lg px-3 py-1.5 text-xs font-normal leading-4'), onClick: function () { return handleChangeTabsQuery(tab.name); }, type: 'button' }, tab.name === current && aggregate ? (react_1["default"].createElement("span", null,
                    tab.name,
                    "\u00A0",
                    react_1["default"].createElement(Badge_1.PHXBadge, { text: "".concat(aggregate), type: 'informational' }))) : (tab.name))); }))),
            children)) : (react_1["default"].createElement("div", { className: 'mb-4' },
            react_1["default"].createElement("div", { className: 'sm:hidden' },
                react_1["default"].createElement("label", { className: 'sr-only', htmlFor: 'tabs' }, "Select a tab"),
                react_1["default"].createElement("select", { className: 'block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm', defaultValue: (_b = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find(function (tab) { return (tab.id || tab.name) === current; })) === null || _b === void 0 ? void 0 : _b.name, id: 'tabs', name: 'tabs', onChange: function (e) {
                        setCurrent(e.target.value);
                        getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(e.target.value);
                    } }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map(function (tab) { return (react_1["default"].createElement("option", { key: tab.name, value: tab.id || tab.name }, tab.name)); }))),
            react_1["default"].createElement("div", { className: 'hidden sm:block' },
                react_1["default"].createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1' }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map(function (tab) { return (react_1["default"].createElement("button", { key: tab.name, className: (0, types_1.classNames)((tab.id || tab.name) === current ? 'bg-gray-200 text-gray-800' : 'text-gray-600 hover:bg-gray-200', 'rounded-lg px-3 py-1.5 text-xs font-normal leading-4'), onClick: function () {
                        setCurrent(tab.id || tab.name);
                        getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(tab.id);
                        onClickTab && onClickTab(tab);
                    }, type: 'button' }, tab.name)); }))),
            react_1["default"].createElement("div", { className: 'pt-4' }, dataTabs && ((_c = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find(function (tab) { return (tab.id || tab.name) === current; })) === null || _c === void 0 ? void 0 : _c.component))));
    };
    var TabsComponent = function () {
        var _a, _b, _c;
        return dataTabsQuery ? (react_1["default"].createElement("div", { className: 'mb-4' },
            react_1["default"].createElement("div", { className: 'sm:hidden' },
                react_1["default"].createElement("label", { className: 'sr-only', htmlFor: 'tabs' }, "Select a tab"),
                react_1["default"].createElement("select", { className: 'block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm', defaultValue: (_a = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find(function (tab) { return tab.name === current; })) === null || _a === void 0 ? void 0 : _a.name, id: 'tabs', name: 'tabs', onChange: function (e) { return handleChangeTabsQuery(e.target.value); } }, dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.map(function (tab) { return (react_1["default"].createElement("option", { key: tab.name, value: tab.name }, tab.name === current && aggregate ? react_1["default"].createElement("span", null, tab.name + ' ' + '(' + aggregate + ')') : tab.name)); }))),
            react_1["default"].createElement("div", { className: 'hidden sm:block' },
                react_1["default"].createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1' }, dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.map(function (tab) { return (react_1["default"].createElement("button", { key: tab.name, className: (0, types_1.classNames)(tab.name === current ? 'bg-gray-200 text-gray-800' : 'text-gray-600 hover:bg-gray-200', 'rounded-lg px-3 py-1.5 text-xs font-normal leading-4'), onClick: function () { return handleChangeTabsQuery(tab.name); }, type: 'button' }, tab.name === current && aggregate ? (react_1["default"].createElement("span", null,
                    tab.name,
                    "\u00A0",
                    react_1["default"].createElement(Badge_1.PHXBadge, { text: "".concat(aggregate), type: 'informational' }))) : (tab.name))); }))),
            children)) : (react_1["default"].createElement("div", { className: 'mb-4', onClick: function () {
                var _a;
                var tabName = (_a = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find(function (tab) { var _a; return ((_a = tab.id) !== null && _a !== void 0 ? _a : tab.name) === current; })) === null || _a === void 0 ? void 0 : _a.name;
                if (onClickTab && tabName) {
                    onClickTab(tabName);
                }
            } },
            react_1["default"].createElement("div", { className: 'flex items-center space-x-2' },
                react_1["default"].createElement("select", { className: 'rounded-md hidden border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm', defaultValue: (_b = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find(function (tab) { var _a; return ((_a = tab.id) !== null && _a !== void 0 ? _a : tab.name) === current; })) === null || _b === void 0 ? void 0 : _b.name, id: 'tabs', name: 'tabs', onChange: function (e) {
                        setCurrent(e.target.value);
                        getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(e.target.value);
                    } }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map(function (tab) {
                    var _a;
                    return (react_1["default"].createElement("option", { key: tab.name, value: (_a = tab.id) !== null && _a !== void 0 ? _a : tab.name }, tab.name));
                })),
                tabComponent),
            react_1["default"].createElement("div", { className: 'hidden sm:block' },
                react_1["default"].createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1' }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map(function (tab) { return (react_1["default"].createElement("button", { key: tab.name, className: (0, types_1.classNames)((tab.id || tab.name) === current ? 'bg-gray-200 text-gray-800' : 'text-gray-600 hover:bg-gray-200', 'rounded-lg px-3 py-1.5 text-xs font-normal leading-4'), onClick: function () {
                        setCurrent(tab.id || tab.name);
                        getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(tab.id);
                    }, type: 'button' }, tab.name)); }))),
            react_1["default"].createElement("div", { className: 'pt-4' }, dataTabs && ((_c = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find(function (tab) { return (tab.id || tab.name) === current; })) === null || _c === void 0 ? void 0 : _c.component))));
    };
    var TabBarUndeline = function () {
        var _a, _b;
        return (react_1["default"].createElement(react_1["default"].Fragment, null,
            react_1["default"].createElement("div", { className: 'sm:hidden' },
                react_1["default"].createElement("select", { className: 'block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500', defaultValue: (_a = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find(function (tab) { return (tab.id || tab.name) === current; })) === null || _a === void 0 ? void 0 : _a.name, id: 'tabs', name: 'tabs' }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map(function (tab) { return (react_1["default"].createElement("option", { key: tab.name, value: tab.id || tab.name }, tab.name)); }))),
            react_1["default"].createElement("div", { className: 'hidden sm:block' },
                react_1["default"].createElement("nav", { "aria-label": 'Tabs', className: 'isolate flex divide-x divide-gray-200 rounded-lg shadow' }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map(function (tab, index) { return (react_1["default"].createElement("button", { key: tab.name, className: (0, types_1.classNames)(tab.name ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700', index === 0 ? 'rounded-l-lg' : '', index === dataTabs.length - 1 ? 'rounded-r-lg' : '', 'group relative min-w-0 flex-1 overflow-hidden bg-white px-4 py-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10'), onClick: function () {
                        setCurrent(tab.id || tab.name);
                        getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(tab.id);
                        onClickTab && onClickTab(tab);
                    }, type: 'button' },
                    react_1["default"].createElement("span", null, tab.name),
                    react_1["default"].createElement("span", { "aria-hidden": 'true', className: (0, types_1.classNames)((tab.id || tab.name) === current ? 'bg-indigo-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5') }))); })),
                react_1["default"].createElement("div", { className: 'pt-4' }, dataTabs && ((_b = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find(function (tab) { return (tab.id || tab.name) === current; })) === null || _b === void 0 ? void 0 : _b.component)))));
    };
    return (react_1["default"].createElement("div", { className: className }, type === 'inside-of-card' ? (react_1["default"].createElement(Card_1.PHXCard, null,
        react_1["default"].createElement(Tabs, null))) : type === 'bar-underline' ? (react_1["default"].createElement(TabBarUndeline, null)) : type === 'inside-component' ? (react_1["default"].createElement(Card_1.PHXCard, { title: titleComponent, primaryHeader: true },
        react_1["default"].createElement(TabsComponent, null))) : (react_1["default"].createElement(Tabs, null))));
}
exports.PHXTabs = PHXTabs;
//# sourceMappingURL=Tabs.js.map