Untitled
unknown
plain_text
2 years ago
5.5 kB
9
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