Merge pull request #2115 from iamfaran/feat/toast-notify

[Feat]: Toast / Notification Component

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -1612,6 +1612,61 @@ export const ModalStyle = [
   BACKGROUND_IMAGE_ORIGIN,
 ] as const;
 
+
+export const NotificationStyle = [
+  getBackground("primarySurface"),
+  {
+    name: "color",
+    label: trans("color"),
+    depName: "background",
+    depType: DEP_TYPE.CONTRAST_TEXT,
+    transformer: contrastText,
+  },
+  {
+    name: "closeIconColor",
+    label: trans("toastComp.closeIconColor"),
+    depName: "background",
+    depType: DEP_TYPE.CONTRAST_TEXT,
+    transformer: contrastText,
+  },
+  {
+    name: "infoIconColor",
+    label: trans("toastComp.infoIconColor"),
+    color: "#1890ff",
+  },
+  {
+    name: "successIconColor",
+    label: trans("toastComp.successIconColor"),
+    color: "#52c41a",
+  },
+  {
+    name: "warningIconColor",
+    label: trans("toastComp.warningIconColor"),
+    color: "#faad14",
+  },
+  {
+    name: "errorIconColor",
+    label: trans("toastComp.errorIconColor"),
+    color: "#ff4d4f",
+  },
+  {
+    name: "progressColor",
+    label: trans("toastComp.progressColor"),
+    color: "#1890ff",
+  },
+  {
+    name: "progressBackground",
+    label: trans("toastComp.progressBackground"),
+    color: "#e8e8e8",
+  },
+  getStaticBorder("transparent"),
+  RADIUS,
+  BORDER_WIDTH,
+  BORDER_STYLE,
+  MARGIN,
+  PADDING,
+] as const;
+
 export const CascaderStyle = [
   ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
   TEXT,
@@ -2502,6 +2557,7 @@ export type ChildrenMultiSelectStyleType = StyleConfigType<
 export type TabContainerStyleType = StyleConfigType<typeof TabContainerStyle>;
 export type TabBodyStyleType = StyleConfigType<typeof TabBodyStyle>;
 export type ModalStyleType = StyleConfigType<typeof ModalStyle>;
+export type NotificationStyleType = StyleConfigType<typeof NotificationStyle>;
 export type CascaderStyleType = StyleConfigType<typeof CascaderStyle>;
 export type CheckboxStyleType = StyleConfigType<typeof CheckboxStyle>;
 export type RadioStyleType = StyleConfigType<typeof RadioStyle>;

client/packages/lowcoder/src/comps/hooks/hookCompTypes.tsx

@@ -60,7 +60,10 @@ const HookCompConfig: Record<
   },
   utils: { category: "hide" },
   message: { category: "hide" },
-  toast: { category: "hide" },
+  toast: { 
+    category: "ui",
+    singleton: false,
+  },
 };
 
 // Get hook component category

client/packages/lowcoder/src/comps/hooks/toastComp.ts

@@ -0,0 +1,72 @@
+import React from "react";
+import { Section, sectionNames } from "lowcoder-design";
+import { trans } from "i18n";
+
+/**
+ * Property view for toast component configuration
+ */
+export const ToastPropertyView = React.memo((props: { comp: any }) => {
+  const { comp } = props;
+  
+  return (
+    <>
+      <Section name={sectionNames.basic}>
+        {comp.children.title.propertyView({ 
+          label: trans("toastComp.title"),
+          placeholder: trans("toastComp.titlePlaceholder"),
+        })}
+        {comp.children.description.propertyView({ 
+          label: trans("toastComp.description"),
+          placeholder: trans("toastComp.descriptionPlaceholder"),
+        })}
+        {comp.children.type.propertyView({ 
+          label: trans("toastComp.type"),
+        })}
+      </Section>
+      
+      <Section name={trans("toastComp.behavior")}>
+        {comp.children.duration.propertyView({ 
+          label: trans("toastComp.duration"),
+          tooltip: trans("toastComp.durationTooltip"),
+          placeholder: "4.5",
+        })}
+        {comp.children.placement.propertyView({ 
+          label: trans("toastComp.placement"),
+        })}
+        {comp.children.dismissible.propertyView({ 
+          label: trans("toastComp.dismissible"),
+        })}
+        {comp.children.showProgress.propertyView({ 
+          label: trans("toastComp.showProgress"),
+          tooltip: trans("toastComp.showProgressTooltip"),
+        })}
+        {comp.children.pauseOnHover.propertyView({ 
+          label: trans("toastComp.pauseOnHover"),
+        })}
+      </Section>
+      
+      <Section name={sectionNames.layout}>
+        {comp.children.width.propertyView({
+          label: trans("toastComp.width"),
+          tooltip: trans("toastComp.widthTooltip"),
+          placeholder: "384px or 100vw",
+        })}
+        {comp.children.progressHeight.propertyView({
+          label: trans("toastComp.progressHeight"),
+          tooltip: trans("toastComp.progressHeightTooltip"),
+          placeholder: "4px",
+        })}
+      </Section>
+      
+      <Section name={sectionNames.interaction}>
+        {comp.children.onEvent.getPropertyView()}
+      </Section>
+
+      <Section name={sectionNames.style}>
+        {comp.children.style.getPropertyView()}
+      </Section>
+    </>
+  );
+});
+
+ToastPropertyView.displayName = "ToastPropertyView";

client/packages/lowcoder/src/comps/hooks/toastComp/ToastPropertyView.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useId } from "react";
+import { NotificationStyleType } from "comps/controls/styleControlConstants";
+import { ToastGlobalStyle } from "./toastStyles";
+
+/**
+ * Toast runtime view - injects global CSS styles for the notification.
+ */
+export const ToastRuntimeView = React.memo((props: { comp: any }) => {
+  const { comp } = props;
+  const style = comp.children.style.getView() as NotificationStyleType;
+  const width = comp.children.width.getView() as string;
+  const progressHeight = comp.children.progressHeight.getView() as string;
+  const instanceId = useId().replace(/:/g, '-');
+  
+  // Store instance ID so the show() method can use it for the notification className
+  useEffect(() => {
+    comp.children.instanceId.dispatchChangeValueAction(instanceId);
+  }, [comp, instanceId]);
+
+  return (
+    <ToastGlobalStyle
+      $instanceId={instanceId}
+      $background={style.background}
+      $textColor={style.color}
+      $closeIconColor={style.closeIconColor}
+      $infoIconColor={style.infoIconColor}
+      $successIconColor={style.successIconColor}
+      $warningIconColor={style.warningIconColor}
+      $errorIconColor={style.errorIconColor}
+      $progressColor={style.progressColor}
+      $progressBackground={style.progressBackground}
+      $progressHeight={progressHeight || undefined}
+      $border={style.border}
+      $borderWidth={style.borderWidth}
+      $borderStyle={style.borderStyle}
+      $radius={style.radius}
+      $margin={style.margin}
+      $padding={style.padding || '20px'}
+      $width={width || undefined}
+    />
+  );
+});
+
+ToastRuntimeView.displayName = "ToastRuntimeView";

client/packages/lowcoder/src/comps/hooks/toastComp/ToastRuntimeView.tsx

@@ -0,0 +1,2 @@
+export { ToastComp } from "./toastComp";
+export type { ToastType } from "./toastConstants";