Untitled
unknown
plain_text
a month ago
1.9 kB
1
Indexable
Never
import React, { useState } from "react"; import { Box } from "../../../../../../../Sources/bm.front.millenet.retail/libs/design-system/components/src"; export const TopBarProgress = ({ steps, currentStep }: { steps: number; currentStep: number }) => { const { centerElementRef } = useMobileTopBar(); return ( <> {centerElementRef && ( <Portal container={centerElementRef}> <Box> {/*progress bar implementation here*/} </Box> </Portal> )} </> ); }; export const TopBarSearch = ({ value, onChange }: { value: string; onChange: (value: string) => void }) => { const { centerElementRef } = useMobileTopBar(); return ( <> {centerElementRef && ( <Portal container={centerElementRef}> <Box> {/*some search implementation here here*/} </Box> </Portal> )} </> ); }; // przykładowa implementacja topbara export const Topbar = () => { const [centerElementRef, setCenterElementRef] = useState<HTMLDivElement>(null); return <Topbar> <Box display="flex" ref={setContactRef} /> </Topbar> } i teraz w dowolnym miejscu w kodzie, mogę wywołać <TopBarSearch ... /> i search pojawi mi się w topbarze zauważ że zarówno TopbarSearch jak i TopbarProgress używają tej samej referencji do boxa, więc renderują sie w dokładnie w tym samym miejscu przez użycie Portalu teraz pytanie jak mogę zrobić, aby renderował się tylko jeden (ostatni) element w boxie teraz jest tak, że jak mam aktywny gdzieś TopBarProgress, a później włączę TopBarSearch używając po prostu tego gdzieś w kodzie, to w topbarze pojawią mi się te dwa elementy naraz, a chciałbym aby TopbarProgress zniknął, i pojawił się Search
Leave a Comment