reactstrap#Nav TypeScript Examples

VerticalTabs: React.FC<TabsProps> = (props) => {
  const {
    tabs,
    navClass = '',
    tabContentClass = '',
    activeClass = '',
    activeTabId = '1',
    pills,
    verticalIcons = true,
  } = props;
  const [activeTab, setActiveTab] = React.useState(activeTabId);

  const toggle = (tab: string) => {
    if (activeTab !== tab) setActiveTab(tab);
  };
  return (
    <div className='tab d-flex flex-row'>
      <Nav
        vertical
        pills={pills}
        tabs
        className={classNames({ 'border-0 m-0 p-0 bg-white': activeClass, 'border-0': pills })}>
        {tabs.map((tab: TabType, index: number) => {
          const { label, tabId } = tab;
          const klassName = verticalIcons ? 'text-center' : 'd-flex align-items-center justify-content-between';
          return (
            <TabItem
              key={index}
              tabId={tabId}
              activeClass={activeClass}
              className={navClass}
              activeTab={activeTab}
              toggle={toggle}>
              <div className={klassName}>{label}</div>
            </TabItem>
          );
        })}
      </Nav>
      <TabContent className={`ml-1 ${tabContentClass}`} activeTab={activeTab}>
        {tabs.map((tab: TabType, index: number) => {
          const { tabId, content } = tab;
          return (
            <TabPane key={index} tabId={tabId}>
              <Row>
                <Col sm='12'>{content}</Col>
              </Row>
            </TabPane>
          );
        })}
      </TabContent>
    </div>
  );
}

HorizontalTabs: React.FC<TabsProps> = (props) => {
  const { tabs, navClass = '', activeClass = '', activeTabId = '1', pills, verticalIcons = true } = props;
  const [activeTab, setActiveTab] = React.useState(activeTabId);

  const toggle = (tab: string) => {
    if (activeTab !== tab) setActiveTab(tab);
  };
  return (
    <div className='tab'>
      <Nav pills={pills} tabs className={classNames({ 'border-0 m-0 p-0 bg-white': activeClass, 'border-0': pills })}>
        {tabs.map((tab: TabType, index: number) => {
          const { label, tabId } = tab;
          const klassName = verticalIcons ? 'text-center' : 'd-flex align-items-center justify-content-between';
          return (
            <TabItem
              key={index}
              tabId={tabId}
              activeClass={activeClass}
              className={navClass}
              activeTab={activeTab}
              toggle={toggle}>
              <div className={klassName}>{label}</div>
            </TabItem>
          );
        })}
      </Nav>
      <TabContent className='mt-3' activeTab={activeTab}>
        {tabs.map((tab: TabType, index: number) => {
          const { content, tabId } = tab;
          return (
            <TabPane key={index} tabId={tabId}>
              <Row>
                <Col sm='12'>{content}</Col>
              </Row>
            </TabPane>
          );
        })}
      </TabContent>
    </div>
  );
}

App: React.FC<AppProps> = (props) => {
    const [holderState, setHolderState] = useState<HolderState>(props.initialHolderState)
    const [uiState, dispatch] = useReducer(uiReducer, props.initialUiState)

    const [smartState, setSmartState] = useState<SmartState | null>(null)

    const issuerInteractions = holderState.interactions.filter(i => i.siopPartnerRole === 'issuer').slice(-1)
    const verifierInteractions = holderState.interactions.filter(i => i.siopPartnerRole === 'verifier').slice(-1)
    const siopAtNeedQr = issuerInteractions.concat(verifierInteractions).filter(i => i.status === 'need-qrcode').slice(-1)

    useEffect(() => {
        holderState.interactions.filter(i => i.status === 'need-redirect').forEach(i => {
            const redirectUrl = i.siopRequest.client_id + '#' + qs.encode(i.siopResponse.formPostBody)
            const opened = window.open(redirectUrl, "_blank")
            dispatchToHolder({ 'type': "siop-response-complete" })
        })
    }, [holderState.interactions])

    const dispatchToHolder = async (ePromise) => {
        const e = await ePromise
        const holder = await holderReducer(holderState, e)
        setHolderState(state => holder)
        console.log("After event", e, "Holder state is", holder)
    }

    const connectTo = who => async () => {
        dispatchToHolder({ 'type': 'begin-interaction', who })
    }

    const onScanned = async (qrCodeUrl: string) => {
        dispatch({ type: 'scan-barcode' })
        await dispatchToHolder(receiveSiopRequest(qrCodeUrl, holderState));
    }

    const connectToFhir = async () => {
        const connected = await makeFhirConnector(uiState, holderState)
        setSmartState(connected.newSmartState)
    }

    const [isOpen, setIsOpen] = useState(false);
    const toggle = () => setIsOpen(!isOpen);


    return <div style={{ paddingTop: "5em" }}>
        <RS.Navbar expand="" className="navbar-dark bg-info fixed-top">
            <RS.Container>
                <NavbarBrand style={{ marginRight: "2em" }} href="/">
                    <img className="d-inline-block" style={{ maxHeight: "1em", maxWidth: "1em", marginRight: "10px" }} src={logo} />
                            Health Wallet Demo
                    </NavbarBrand>
                <NavbarToggler onClick={toggle} />
                <Collapse navbar={true} isOpen={isOpen}>
                    <Nav navbar={true}>
                        <NavLink href="#" onClick={() => {
                            dispatch({ type: 'open-scanner', 'label': 'Verifier' })
                        }}>Scan QR to Share</NavLink>
                        <NavLink href="#" onClick={connectTo('verifier')}> Open Employer Portal</NavLink>
                        <NavLink href="#config" onClick={e => dispatch({ type: 'toggle-editing-config' })}> Edit Config</NavLink>
                        <NavLink target="_blank" href="https://github.com/microsoft-healthcare-madison/health-wallet-demo">Source on GitHub</NavLink>
                    </Nav>
                </Collapse></RS.Container>
        </RS.Navbar>

        {uiState.scanningBarcode?.active &&
            <SiopRequestReceiver
                onReady={onScanned}
                onCancel={() => dispatch({'type': 'close-scanner'})}
                redirectMode="qr"
                label={uiState.scanningBarcode?.label}
            />
        }

        {siopAtNeedQr.length > 0 &&
            <SiopRequestReceiver
                onReady={onScanned}
                onCancel={() => dispatch({'type': 'close-scanner'})}
                redirectMode="window-open"
                label={siopAtNeedQr[0].siopPartnerRole}
                startUrl={siopAtNeedQr[0].siopPartnerRole === 'issuer' ? uiState.issuer.issuerStartUrl : uiState.verifier.verifierStartUrl}
            />}

        {uiState.editingConfig && <ConfigEditModal uiState={uiState} defaultUiState={props.defaultUiState} dispatch={dispatch} />}
        {uiState.presentingQr?.active && <QRPresentationModal healthCard={uiState.presentingQr.vcToPresent} dispatch={dispatch} />}

        <SiopApprovalModal  {...parseSiopApprovalProps(holderState, dispatchToHolder)} />

        <RS.Container >
            <RS.Row>
                <RS.Col xs="12">
                    <CovidCard
                        holderState={holderState}
                        smartState={smartState}
                        uiState={uiState}
                        displayQr={async (vc) => {
                            dispatch({type: 'begin-qr-presentation', vc})
                        }}
                        openScannerUi={async () => {
                            dispatch({ type: 'open-scanner', 'label': 'Lab' })
                        }}
                        connectToIssuer={connectTo('issuer')}
                        connectToFhir={connectToFhir}
                        dispatchToHolder={dispatchToHolder}
                    />
                    <Card style={{ padding: ".5em" }}>
                        <CardTitle style={{ fontWeight: "bolder" }}>
                            Debugging Details
                        </CardTitle>
                        <CardSubtitle className="text-muted">Your browser's dev tools will show details on current page state + events </CardSubtitle>
                    </Card>
                </RS.Col>
            </RS.Row>
        </RS.Container>
        <div>
        </div>
    </div>
}