first commit

common/resources/client/datatable/data-table-add-item-button.tsx

@@ -0,0 +1,67 @@
+import {AddIcon} from '../icons/material/Add';
+import {Button} from '../ui/buttons/button';
+import React, {ReactElement, ReactNode} from 'react';
+import {useIsMobileMediaQuery} from '../utils/hooks/is-mobile-media-query';
+import {IconButton} from '../ui/buttons/icon-button';
+import {To} from 'react-router-dom';
+import {ButtonBaseProps} from '../ui/buttons/button-base';
+
+export interface DataTableAddItemButtonProps {
+  children: ReactNode;
+  to?: To;
+  href?: string;
+  download?: boolean | string;
+  elementType?: ButtonBaseProps['elementType'];
+  onClick?: ButtonBaseProps['onClick'];
+  icon?: ReactElement;
+  disabled?: boolean;
+}
+export const DataTableAddItemButton = React.forwardRef<
+  HTMLButtonElement,
+  DataTableAddItemButtonProps
+>(
+  (
+    {children, to, elementType, onClick, href, download, icon, disabled},
+    ref,
+  ) => {
+    const isMobile = useIsMobileMediaQuery();
+
+    if (isMobile) {
+      return (
+        <IconButton
+          ref={ref}
+          variant="flat"
+          color="primary"
+          className="flex-shrink-0"
+          size="sm"
+          to={to}
+          href={href}
+          download={download}
+          elementType={elementType}
+          onClick={onClick}
+          disabled={disabled}
+        >
+          {icon || <AddIcon />}
+        </IconButton>
+      );
+    }
+
+    return (
+      <Button
+        ref={ref}
+        startIcon={icon || <AddIcon />}
+        variant="flat"
+        color="primary"
+        size="sm"
+        to={to}
+        href={href}
+        download={download}
+        elementType={elementType}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {children}
+      </Button>
+    );
+  },
+);