Untitled

 avatar
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