catchup-library-web 2.6.11 → 2.6.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.6.11",
+  "version": "2.6.13",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/buttons/StartButton.tsx

@@ -0,0 +1,67 @@
+import { useState } from "react";
+import BaseLoading from "../loading/BaseLoading";
+import { IButtonProps } from "../../properties/ButtonProperties";
+
+const StartButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  icon,
+}: IButtonProps) => {
+  const [loading, setLoading] = useState(false);
+
+  const internalOnClick = async (e: any) => {
+    e.stopPropagation();
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    await onClick();
+    setLoading(false);
+  };
+
+  let currentHeightClassName;
+  let currentLoadingSize;
+  if (size === "small") {
+    currentHeightClassName = "h-10";
+    currentLoadingSize = 16;
+  } else if (size === "medium") {
+    currentHeightClassName = "h-12";
+    currentLoadingSize = 18;
+  } else if (size === "large") {
+    currentHeightClassName = "h-14";
+    currentLoadingSize = 20;
+  } else if (size === "unlimited") {
+    currentHeightClassName = "h-10";
+    currentLoadingSize = 16;
+  }
+
+  return (
+    <button
+      className={`px-8 py-2 bg-gradient-to-r from-catchup-green to-catchup-hover-green text-catchup-white font-bold text-lg rounded-catchup-full shadow-card ${
+        loading
+          ? ""
+          : disabled
+            ? "opacity-50"
+            : "hover:from-catchup-hover-green hover:to-catchup-green hover:shadow-full-card hover:scale-105"
+      } transition-all duration-300 transform ${currentHeightClassName || ""}`}
+      onClick={internalOnClick}
+    >
+      {loading ? (
+        <BaseLoading
+          height={currentLoadingSize}
+          width={currentLoadingSize}
+          primaryColor="#ffffff"
+          secondaryColor="#ffffff"
+        />
+      ) : (
+        <div className="flex flex-row justify-center items-center gap-x-2">
+          {icon ? <span>{icon}</span> : null}
+          <p>{title}</p>
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default StartButton;

package/src/index.ts

@@ -8,6 +8,7 @@ export { default as CreateButton } from "./components/buttons/CreateButton";
 export { default as DeleteButton } from "./components/buttons/DeleteButton";
 export { default as CancelButton } from "./components/buttons/CancelButton";
 export { default as ApproveButton } from "./components/buttons/ApproveButton";
+export { default as StartButton } from "./components/buttons/StartButton";
 
 export { default as FullCard } from "./components/cards/FullCard";
 export { default as BaseCard } from "./components/cards/BaseCard";

package/src/properties/ButtonProperties.ts

@@ -6,4 +6,5 @@ export interface IButtonProps {
   iconPosition?: string;
   textOnly?: boolean;
   iconOnly?: boolean;
+  icon?: string;
 }