phx-react
Version:
PHX REACT
122 lines • 13.3 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { classNames } from '../types';
import { PHXBadge } from '../Badge';
import { PHXCard } from '../Card';
import { PHXSelect } from '../Select';
export function PHXTabs({ aggregate, children, className, dataTabs, dataTabsQuery, defaultTab, filterValue, getOnlyTitleOfTabs, getQuery, getQuerySearch, pagination, paginationData, titleComponent, tabComponent, type = 'default', onClickTab, isNotSpacing = false, }) {
var _a, _b;
const defaultActive = dataTabs
? getOnlyTitleOfTabs
? dataTabs[0].id
: dataTabs[0].name
: dataTabsQuery
? dataTabsQuery[0].name
: null;
const [current, setCurrent] = useState(defaultTab ? defaultTab : defaultActive);
const currTab = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find((tab) => (tab.id || tab.name) === current);
const handleChangeTabsQuery = (eventValue) => {
var _a, _b;
setCurrent(eventValue);
if (dataTabsQuery && paginationData) {
paginationData(0);
getQuery((_a = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find((tab) => tab.name === eventValue)) === null || _a === void 0 ? void 0 : _a.query);
getQuerySearch((_b = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find((tab) => tab.name === eventValue)) === null || _b === void 0 ? void 0 : _b.querySearch);
}
};
useEffect(() => {
var _a, _b;
if (dataTabsQuery && filterValue) {
getQuery((_a = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find((tab) => tab.name === current)) === null || _a === void 0 ? void 0 : _a.query);
getQuerySearch((_b = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find((tab) => tab.name === current)) === null || _b === void 0 ? void 0 : _b.querySearch);
}
}, [filterValue, pagination]);
const componentByTab = (React.createElement(React.Fragment, null, ((_a = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find((tab) => (tab.id || tab.name) === current)) === null || _a === void 0 ? void 0 : _a.component) && (React.createElement("div", { className: 'pt-4' }, (_b = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find((tab) => (tab.id || tab.name) === current)) === null || _b === void 0 ? void 0 : _b.component))));
const Tabs = () => dataTabsQuery ? (React.createElement("div", { className: classNames(isNotSpacing ? '' : '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', value: current, id: 'tabs', name: 'tabs', onChange: (e) => handleChangeTabsQuery(e.target.value) }, dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.map((tab) => (React.createElement("option", { key: tab.name, value: tab.name }, tab.name === current && aggregate ? `${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((tab) => (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: () => handleChangeTabsQuery(tab.name), type: 'button' }, tab.name === current && aggregate ? (React.createElement("span", null,
tab.name,
"\u00A0",
React.createElement(PHXBadge, { text: `${aggregate}`, type: 'informational' }))) : (tab.name)))))),
children)) : (React.createElement("div", { className: classNames(isNotSpacing ? '' : 'mb-4') },
React.createElement("div", { className: 'sm:hidden' },
React.createElement("label", { className: 'sr-only', htmlFor: 'tabs' }, "Select a tab"),
React.createElement(PHXSelect
// 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'
, {
// 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'
value: (currTab === null || currTab === void 0 ? void 0 : currTab.id) || (currTab === null || currTab === void 0 ? void 0 : currTab.name), id: 'tabs', name: 'tabs', onChange: (e) => {
const val = isNaN(Number(e.target.value)) ? e.target.value : Number(e.target.value);
setCurrent(val);
getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(val);
const tab = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find((item) => (item.id || item.name) === val);
onClickTab === null || onClickTab === void 0 ? void 0 : onClickTab(tab);
} }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map((tab) => (React.createElement("option", { key: tab.name, disabled: tab.disabled, value: tab.id || tab.name }, tab.name)))),
componentByTab),
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((tab) => (React.createElement("button", { key: tab.name, className: tab.disabled
? 'text-xs px-3 py-1.5 font-normal leading-4 text-gray-400'
: 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: () => {
setCurrent(tab.id || tab.name);
getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(tab.id);
onClickTab === null || onClickTab === void 0 ? void 0 : onClickTab(tab);
}, type: 'button', disabled: tab.disabled }, tab.name)))),
componentByTab)));
const TabsComponent = () => {
var _a, _b;
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((tab) => tab.name === current)) === null || _a === void 0 ? void 0 : _a.name, id: 'tabs', name: 'tabs', onChange: (e) => handleChangeTabsQuery(e.target.value) }, dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.map((tab) => (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((tab) => (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: () => handleChangeTabsQuery(tab.name), type: 'button' }, tab.name === current && aggregate ? (React.createElement("span", null,
tab.name,
"\u00A0",
React.createElement(PHXBadge, { text: `${aggregate}`, type: 'informational' }))) : (tab.name)))))),
children)) : (React.createElement("div", { className: 'mb-4', onClick: () => {
var _a;
const tabName = (_a = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find((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((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: (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((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((tab) => (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: () => {
setCurrent(tab.id || tab.name);
getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(tab.id);
}, type: 'button' }, tab.name))))),
componentByTab));
};
const TabBarUndeline = () => {
var _a;
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((tab) => (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((tab) => (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((tab, index) => (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: () => {
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') }))))),
componentByTab)));
};
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