@j2inn/app-react
Version:
React implementation of the j2inn-app framework
56 lines (55 loc) • 2.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright (c) 2022, J2 Innovations. All Rights Reserved
*/
import { ant_prefix, Tabs } from '@j2inn/ui';
import { usei18n } from '@j2inn/utils';
import classNames from 'classnames';
import { capitalize, omit } from 'lodash';
import { observer } from 'mobx-react-lite';
import { createUseStyles } from 'react-jss';
import { useAppRootStore } from '../hooks/useAppRootStore';
import { Suspense } from './Suspense';
const { TabPane } = Tabs;
const tabBarStyles = createUseStyles((theme) => ({
tabs: {
padding: `0 1rem`,
[`& .${ant_prefix}-tabs-nav`]: {
margin: 0,
[`&::before`]: {
borderBottomColor: [[theme.borderColor], '!important'],
},
[`& .${ant_prefix}-tabs-tab`]: {
marginTop: `0.5rem`,
padding: `0.8rem 0`,
fontWeight: 500,
[`&.${ant_prefix}-tabs-tab-active .${ant_prefix}-tabs-tab-btn`]: {
textShadow: 'none',
},
},
},
},
}));
/**
* The application view's tabs.
*
* This component will automatically update the history and address bar
* with the application the user has selected.
*/
export const AppViewTabs = observer(({ clearStates: tabStates, tabOptions, className, extra, tabsProps, }) => {
const { t } = usei18n();
const { history } = useAppRootStore();
const name = tabOptions[0]?.name ?? '';
const classes = tabBarStyles();
const tab = String(history.state.tab ?? '');
return (_jsx(Tabs, { className: classNames(classes.tabs, className), activeKey: history.state.tab ? capitalize(tab) : tabOptions[0].name, tabBarExtraContent: extra, onTabClick: (activeKey) => {
// Removes non-tab states when navigating
history.replaceState(omit(history.state, [...tabStates]));
// Removes tab state if first/initial tab
if (name === activeKey) {
history.replaceState(omit(history.state, ['tab', ...tabStates]));
return;
}
history.replaceState({ tab: activeKey.toLowerCase() });
}, ...tabsProps, children: tabOptions.map((tab) => (_jsx(TabPane, { tab: _jsxs("span", { children: [tab.icon, tab.localeKey ? t(tab.localeKey) : null] }), children: _jsx(Suspense, { children: tab.content }) }, tab.name))) }));
});