130 lines
3.4 KiB
TypeScript
130 lines
3.4 KiB
TypeScript
// REQ0116/main-tab
|
|
|
|
import React, { useRef, useState } from 'react';
|
|
import {
|
|
IonTabs,
|
|
IonRouterOutlet,
|
|
IonTabBar,
|
|
IonTabButton,
|
|
IonIcon,
|
|
IonLabel,
|
|
IonModal,
|
|
} from '@ionic/react';
|
|
import { Route, Redirect } from 'react-router';
|
|
import { calendar, location, informationCircle, people } from 'ionicons/icons';
|
|
import SchedulePage from '../SchedulePage';
|
|
import SpeakerList from '../SpeakerList';
|
|
import SpeakerDetail from '../SpeakerDetail';
|
|
import SessionDetail from '../SessionDetail';
|
|
import MapView from '../MapView';
|
|
import About from '../About';
|
|
import PATHS from '../../PATHS';
|
|
import TabAppRoute from '../../TabAppRoute';
|
|
import { CartStore } from './store';
|
|
import { getCartCount } from './store/Selectors';
|
|
import { CartModal } from './components/CartModal';
|
|
|
|
interface MainTabsProps {}
|
|
|
|
const DemoReactShop: React.FC<MainTabsProps> = () => {
|
|
const cartCount = useStoreState(CartStore, getCartCount);
|
|
const [selected, setSelected] = useState('tab0');
|
|
const [open, setOpen] = useState(false);
|
|
const ref = useRef(null);
|
|
|
|
const handleClick = (tab) => {
|
|
tab === 'tabCart' ? setOpen(true) : setSelected(tab);
|
|
};
|
|
|
|
return (
|
|
<IonTabs>
|
|
<IonRouterOutlet ref={ref}>
|
|
{ReactShopPages.map((page, index) => (
|
|
<Route
|
|
key={`route_${index}`}
|
|
exact={true}
|
|
path={`/demo-react-shop${page.href}`}
|
|
component={page.component}
|
|
/>
|
|
))}
|
|
|
|
{/*
|
|
<Route exact path="/demo-react-shop">
|
|
<Redirect to={ReactShopPages.filter((p) => p.default)[0].href} />
|
|
</Route>
|
|
*/}
|
|
<Redirect exact path="/demo-react-shop" to="/demo-react-shop/categories" />
|
|
</IonRouterOutlet>
|
|
{/* */}
|
|
|
|
<IonTabBar slot="bottom">
|
|
{ReactShopPages.map((page, index) => {
|
|
const isSelected = selected === `tab${index}`;
|
|
|
|
if (page.isTab) {
|
|
return (
|
|
<IonTabButton
|
|
key={`tab${index}`}
|
|
tab={`tab${index}`}
|
|
href={`/demo-react-shop${page.href}`}
|
|
>
|
|
<IonIcon icon={page.icon} />
|
|
{isSelected && <div className="tab-dot" />}
|
|
</IonTabButton>
|
|
);
|
|
} else return null;
|
|
})}
|
|
|
|
<IonTabButton tab="tabCart">
|
|
<IonIcon icon={cartOutline} />
|
|
<div className="cart-count">{cartCount}</div>
|
|
</IonTabButton>
|
|
</IonTabBar>
|
|
|
|
{/* <IonModal presentingElement={ref.current} isOpen={open} onDidDismiss={() => setOpen(false)}> */}
|
|
{/* <CartModal close={() => setOpen(false)} /> */}
|
|
{/* </IonModal> */}
|
|
</IonTabs>
|
|
);
|
|
};
|
|
|
|
export default DemoReactShop;
|
|
|
|
import { cartOutline, heartOutline, homeOutline, shirtOutline } from 'ionicons/icons';
|
|
|
|
import Categories from './Categories';
|
|
import Favourites from './Favourites';
|
|
import ProductType from './ProductType';
|
|
import Category from './Category';
|
|
import { useStoreState } from 'pullstate';
|
|
|
|
export const ReactShopPages = [
|
|
{
|
|
href: '/categories',
|
|
icon: shirtOutline,
|
|
component: Categories,
|
|
default: true,
|
|
isTab: true,
|
|
},
|
|
{
|
|
href: '/categories/:category/:type',
|
|
component: ProductType,
|
|
default: false,
|
|
isTab: false,
|
|
},
|
|
{
|
|
href: '/categories/:category',
|
|
icon: shirtOutline,
|
|
component: Category,
|
|
default: true,
|
|
isTab: false,
|
|
},
|
|
{
|
|
href: '/favourites',
|
|
icon: heartOutline,
|
|
component: Favourites,
|
|
default: false,
|
|
isTab: true,
|
|
},
|
|
];
|