phx-react
Version:
PHX REACT
112 lines • 13.7 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { classNames } from '../types';
import { PHXBadge } from '../Badge';
import { PHXCard } from '../Card';
export 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 = 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);
}
};
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.createElement("div", { className: 'mb-4' },
React.createElement("div", { className: 'sm:hidden' },
React.createElement("label", { className: 'sr-only', htmlFor: 'tabs' }, "Select a tab"),
React.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.createElement("option", { key: tab.name, value: tab.name }, tab.name === current && aggregate ? React.createElement("span", null, tab.name + ' ' + '(' + aggregate + ')') : tab.name)); }))),
React.createElement("div", { className: 'hidden sm:block' },
React.createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1' }, dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.map(function (tab) { return (React.createElement("button", { key: tab.name,
// aria-current={tab.code === parentCode ? 'page' : undefined}
className: 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.createElement("span", null,
tab.name,
"\u00A0",
React.createElement(PHXBadge, { text: "".concat(aggregate), type: 'informational' }))) : (tab.name))); }))),
children)) : (React.createElement("div", { className: 'mb-4' },
React.createElement("div", { className: 'sm:hidden' },
React.createElement("label", { className: 'sr-only', htmlFor: 'tabs' }, "Select a tab"),
React.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.createElement("option", { key: tab.name, value: tab.id || tab.name }, tab.name)); }))),
React.createElement("div", { className: 'hidden sm:block' },
React.createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1' }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map(function (tab) { return (React.createElement("button", { key: tab.name, className: 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.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.createElement("div", { className: 'mb-4' },
React.createElement("div", { className: 'sm:hidden' },
React.createElement("label", { className: 'sr-only', htmlFor: 'tabs' }, "Select a tab"),
React.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.createElement("option", { key: tab.name, value: tab.name }, tab.name === current && aggregate ? React.createElement("span", null, tab.name + ' ' + '(' + aggregate + ')') : tab.name)); }))),
React.createElement("div", { className: 'hidden sm:block' },
React.createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1' }, dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.map(function (tab) { return (React.createElement("button", { key: tab.name, className: 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.createElement("span", null,
tab.name,
"\u00A0",
React.createElement(PHXBadge, { text: "".concat(aggregate), type: 'informational' }))) : (tab.name))); }))),
children)) : (React.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.createElement("div", { className: 'flex items-center space-x-2' },
React.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.createElement("option", { key: tab.name, value: (_a = tab.id) !== null && _a !== void 0 ? _a : tab.name }, tab.name));
})),
tabComponent),
React.createElement("div", { className: 'hidden sm:block' },
React.createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1' }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map(function (tab) { return (React.createElement("button", { key: tab.name, className: 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.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.createElement(React.Fragment, null,
React.createElement("div", { className: 'sm:hidden' },
React.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.createElement("option", { key: tab.name, value: tab.id || tab.name }, tab.name)); }))),
React.createElement("div", { className: 'hidden sm:block' },
React.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.createElement("button", { key: tab.name, className: 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.createElement("span", null, tab.name),
React.createElement("span", { "aria-hidden": 'true', className: classNames((tab.id || tab.name) === current ? 'bg-indigo-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5') }))); })),
React.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.createElement("div", { className: className }, type === 'inside-of-card' ? (React.createElement(PHXCard, null,
React.createElement(Tabs, null))) : type === 'bar-underline' ? (React.createElement(TabBarUndeline, null)) : type === 'inside-component' ? (React.createElement(PHXCard, { title: titleComponent, primaryHeader: true },
React.createElement(TabsComponent, null))) : (React.createElement(Tabs, null))));
}
//# sourceMappingURL=Tabs.js.map