Untitled
unknown
plain_text
2 years ago
5.5 kB
4
Indexable
export type DownloadItemProps = PropsWithClickstream< { children: string; disabled?: boolean; tip?: string; onDownload: () => void; } & Pick<ListItemProps, "children" | "tip" | "disabled"> >; export const DownloadItem = withClickstream<DownloadItemProps>( ({ children, tip, disabled, onDownload }) => { const { sendEvent } = useClickstream(); const handleDownload = async () => { sendEvent("Click", { label: children.toString(), }); onDownload(); }; return ( <ListItem disabled={disabled} onDownload={handleDownload} tip={tip}> {children} </ListItem> ); }, () => ({ clickstreamElementType: "DownloadItem", }), ); export type DownloadListProps = PropsWithClickstream< PropsWithChildren<{ expandable?: boolean; withDownloadAll?: boolean; }> >; const BaseDownloadList = ({ children, expandable: initialExpandable = true, withDownloadAll = true, }: DownloadListProps) => { const { isDesktop } = useTheme(); const items = Children.toArray(children); const { expandable, expandableBoxHeight, expandableBoxRef, expanded, handleToggle } = useDownloadList({ expandable: initialExpandable, itemsCount: items.length, }); return ( <Box display="flex" flexDirection="column" gap="space20"> <ExpandableBox expanded={expanded} maskHeight={50} minHeight={expandableBoxHeight} ref={expandableBoxRef} > {items.map((item, index) => { return ( <Box alignItems="center" borderBottom={items.length - 1 > index ? "1px solid" : undefined} borderColor="ColorSeparator" display="flex" justifyContent={isDesktop ? "initial" : "space-between"} key={index} paddingTopBottom={items.length > 1 ? "space16" : undefined} > {item} </Box> ); })} </ExpandableBox> {withDownloadAll && ( <DownloadListBottomSection expandable={expandable} expanded={expanded} onDownloadAll={() => {}} onToggle={handleToggle} /> )} </Box> ); }; const DownloadList = withClickstream<DownloadListProps>(BaseDownloadList, () => ({ clickstreamElementType: "DownloadList", })) as unknown as ComponentClass<PropsWithClickstream<DownloadListProps>> & { DownloadItem: typeof DownloadItem; }; DownloadList.DownloadItem = DownloadItem; export { DownloadList }; // basic usage, user have to implement download on its own const Test = () => { return ( <DownloadList clickstreamId={csid.test}> <DownloadList.DownloadItem clickstreamId={csid.test} onDownload={() => null}> test </DownloadList.DownloadItem> <DownloadList.DownloadItem clickstreamId={csid.test2} onDownload={() => null}> test2 </DownloadList.DownloadItem> </DownloadList> ); }; // with milleflow context, download logic already implemented, no onDownload prop and 2 additnioal props in the DownloadItem, id and filename const Test = () => { return ( <DownloadList<milleflow> clickstreamId={csid.test} agreementId={"asdff323"}> <DownloadList.DownloadItem clickstreamId={csid.test} id="test" filename="test.pdf"> test </DownloadList.DownloadItem> <DownloadList.DownloadItem clickstreamId={csid.test2} id="test2" filename="test2.pdf"> test2 </DownloadList.DownloadItem> </DownloadList> ); }; // with agreementcenter context, download logic already implemented, no onDownload prop and 2 additnioal props in the DownloadItem, id and filename const Test = () => { return ( <DownloadList<agreementcenter> clickstreamId={csid.test}> <DownloadList.DownloadItem clickstreamId={csid.test} id="test" filename="test.pdf"> test </DownloadList.DownloadItem> <DownloadList.DownloadItem clickstreamId={csid.test2} id="test2" filename="test2.pdf"> test2 </DownloadList.DownloadItem> </DownloadList> ); }; /* reasumując, w przypadku zwykłego użycia komponentu, user musi zaimplementować logikę downloadu sam, DownloadList przyjmuje tylko prop clickstreamId, a DownloadItem przyjmuje prop onDownload, który user musi zaimplementować sam w przypadku użycia komponentu z milleflow context, user nie może implementować logiki downloadu, więc prop onDownload powinien być niedostępny, DownloadList przyjmuje prop clickstreamId oraz agreementId, a DownloadItem przyjmuje prop id i filename w przypadku użycia komponentu z agreementcenter context, user nie może implementować logiki downloadu, więc prop onDownload powinien być niedostępny, DownloadList przyjmuje tylko prop clickstreamId, a DownloadItem przyjmuje prop id i filename */
Editor is loading...
Leave a Comment