diff --git a/src/components/Table/components/ToolbarAction/index.tsx b/src/components/Table/components/ToolbarAction/index.tsx new file mode 100644 index 00000000..5342e82f --- /dev/null +++ b/src/components/Table/components/ToolbarAction/index.tsx @@ -0,0 +1,44 @@ +import React, { CSSProperties, FC, useCallback, useMemo } from "react"; + +import { Icons } from "../../../../types/Icon"; +import { ITableToolbarAction, TableActionPosition } from "../../../../types/Table"; +import { getComposedDataCy } from "../../../../utils"; +import Button from "../../../Button"; +import IconButton from "../../../IconButton"; + +const TableToolbarAction: FC = ({ + callback, + data, + dataCy: externalDataCy, + disabled, + icon: externalIcon, + index, + label, + position, + subpart, +}) => { + const dataCy = useMemo(() => getComposedDataCy(externalDataCy, subpart, label), [externalDataCy, subpart, label]); + + const onClick = useCallback(() => callback(data), [callback, data]); + + const secondary = useMemo(() => position === TableActionPosition.icon, [position]); + + const style = useMemo((): CSSProperties => ({ marginLeft: index > 0 ? "8px" : "none" }), [index]); + + if (secondary) { + return ( + + ); + } + + const icon = typeof externalIcon === "string" ? { name: externalIcon } : { component: externalIcon }; + return