procode-lowcode-core 1.0.13 → 1.0.15

package/dist/types/UIElement/UIElementDefinations/BaseScreenElement.d.ts

@@ -17,10 +17,17 @@ type ValidationProps = {
     screenDataField: string;
     executeMode: ExecuteMode;
 };
+export type EffectiveStyle = {
+    selector: string;
+    target: string;
+    important?: boolean;
+};
 export type Style = {
     id?: string;
     className?: string;
     inline?: React.CSSProperties;
+    important?: boolean;
+    effectiveStyles?: EffectiveStyle[];
 };
 export interface BaseScreenElement {
     id: number | string;

package/dist/types/Utils/resolveBoundValue.d.ts

@@ -0,0 +1,10 @@
+import { ValueReplacePolicy } from "../Action/Types";
+import { ViewModel } from "../DataModel/ViewModel";
+export type BoundOperand<T> = {
+    value: T | string;
+    valueReplacePolicy: ValueReplacePolicy;
+};
+export type BoundValue<T> = T | BoundOperand<T> | undefined | null;
+export declare const resolveBoundValue: <T>(bound: BoundValue<T>, viewModel: ViewModel) => T | null | undefined;
+export declare const BOUND_PROP_NAMES: readonly ["min", "max", "minDate", "maxDate", "minLength", "maxLength", "minResizeHeight", "maxResizeHeight", "minResizeWidth", "maxResizeWidth", "step", "placeHolder", "disabled"];
+export type BoundPropName = (typeof BOUND_PROP_NAMES)[number];

package/dist/types/index.d.ts

@@ -8,5 +8,8 @@ export type { IStorage } from './StorageManager/IStorage';
 export type { default as IValidationFactory } from './Validation/IValidationFactory';
 export type { ISchemaReaderProvider } from './UIElement/ISchemaReaderProvider';
 export { resolveAppPath } from './Utils/resolveAppPath';
+export { resolveBoundValue, BOUND_PROP_NAMES } from './Utils/resolveBoundValue';
+export type { BoundValue, BoundOperand, BoundPropName } from './Utils/resolveBoundValue';
+export { ValueReplacePolicy } from './Action/Types';
 export declare const coreStyles = "./Assets/styles/index.scss";
 export declare const getCoreStylesPath: () => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "procode-lowcode-core",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "ProCode Core Library - React framework for low-code applications",
   "type": "module",
   "main": "dist/index.js",

package/src/Renderer/CellRenderer/index.tsx

@@ -32,6 +32,7 @@ const CellRenderer = ({
     <div
       id={widgetStyle?.id || ""}
       className={widgetStyle?.className || ""}
+      data-prc-col-important={widgetStyle?.important ? widgetStyle?.className || undefined : undefined}
       style={styles}
     >
       {children.map((element) => (

package/src/Renderer/ContainerRenderer/Container.tsx

@@ -16,6 +16,7 @@ export default function Container({
     <div
       id={widgetStyle?.id ?? ""}
       className={`${widgetStyle?.className ?? ""}`}
+      data-prc-col-important={widgetStyle?.important ? widgetStyle?.className || undefined : undefined}
       style={{ ...(widgetStyle?.inline ?? {}) }}
     >
       {children.map((element) => (

package/src/Renderer/DrawerRenderer/Drawer.tsx

@@ -19,6 +19,7 @@ const Drawer = ({
     <div
       id={widgetStyle?.id ?? ""}
       className={`prc-drawer ${widgetStyle?.className ?? ""}`}
+      data-prc-col-important={widgetStyle?.important ? widgetStyle?.className || undefined : undefined}
       style={{ ...(widgetStyle?.inline ?? {}) }}
     >
       {children?.map((element: ScreenElement) => (

package/src/Renderer/DrawerRenderer/index.tsx

@@ -7,6 +7,7 @@ const DrawerRenderer = (props: DrawerElement) => {
       id={props.overlay.widgetStyle?.id ?? ""}
       style={{ ...(props.overlay.widgetStyle?.inline ?? {}) }}
       className={`prc-drawer-shield ${props.overlay.widgetStyle?.className ?? ""}`}
+      data-prc-col-important={props.overlay.widgetStyle?.important ? props.overlay.widgetStyle?.className || undefined : undefined}
     >
       <Drawer {...props} />
     </div>

package/src/Renderer/FormRenderer/index.tsx

@@ -23,6 +23,7 @@ const FormRenderer = ({
         e.preventDefault();
       }}
       className={widgetStyle?.className || ""}
+      data-prc-col-important={widgetStyle?.important ? widgetStyle?.className || undefined : undefined}
       id={widgetStyle?.id || ""}
       style={{ ...(widgetStyle?.inline || {}) }}
     >

package/src/Renderer/LayoutRenderer/ColumnLayoutRenderer/index.tsx

@@ -18,6 +18,7 @@ const LayoutRenderer = ({
     <div
       id={widgetStyle?.id || ""}
       className={`${widgetStyle?.className || ""}`}
+      data-prc-col-important={widgetStyle?.important ? widgetStyle?.className || undefined : undefined}
       style={{
         ...(widgetStyle?.inline || {}),
         display: "grid",

package/src/Renderer/LayoutRenderer/GenericLayoutRenderer/index.tsx

@@ -18,6 +18,7 @@ const GenericLayoutRenderer = ({
     <div
       id={widgetStyle?.id || ""}
       className={`${widgetStyle?.className || ""}`}
+      data-prc-col-important={widgetStyle?.important ? widgetStyle?.className || undefined : undefined}
       style={{
         ...(widgetStyle?.inline || {}),
         display: "grid",

package/src/Renderer/WidgetRenderer/Widget.tsx

@@ -39,10 +39,23 @@ const Widget: React.FC<WidgetInjectorProps> = ({
     .getCustomWidgetProvider()
     ?.getWidgets();
 
-  const WidgetComponent =
-    customWidgets?.get?.(widgetProps.widgetType) ??
-    templateWidgets?.get?.(widgetProps.widgetType) ??
-    standardWidgets?.get?.(widgetProps.widgetType);
+  let WidgetComponent: React.FC<any> | undefined;
+
+  const targetFactory = widgetProps.targetWidgetFactory;
+  if (targetFactory === "CUSTOM") {
+    WidgetComponent = customWidgets?.get?.(widgetProps.widgetType);
+  } else if (targetFactory === "TEMPLATE") {
+    WidgetComponent = templateWidgets?.get?.(widgetProps.widgetType);
+  } else if (targetFactory === "DEFAULT") {
+    WidgetComponent = standardWidgets?.get?.(widgetProps.widgetType);
+  }
+
+  if (!WidgetComponent) {
+    WidgetComponent =
+      customWidgets?.get?.(widgetProps.widgetType) ??
+      templateWidgets?.get?.(widgetProps.widgetType) ??
+      standardWidgets?.get?.(widgetProps.widgetType);
+  }
 
   if (!WidgetComponent) {
     return (

package/src/Renderer/WidgetRenderer/useWidgetProps.ts

@@ -2,6 +2,10 @@ import { useState, useEffect } from "react";
 import { NavigateFunction } from "react-router-dom";
 import ActionInvoker from "../../Action/ActionInvoker";
 import { getValueFromNestedObject } from "../../Utils/getValueFromNestedObject";
+import {
+  BOUND_PROP_NAMES,
+  resolveBoundValue,
+} from "../../Utils/resolveBoundValue";
 import { ViewModel } from "../../DataModel/ViewModel";
 import { EventService } from "../../Services/EventService";
 import ValidationInvoker from "../../Validation/ValidationInvoker";
@@ -41,6 +45,7 @@ export const useWidgetProps = (
     const events = getEvents();
     setWidgetProps({
       ...schemaElementProps,
+      ...getResolvedBoundProps(),
       id: schemaElementProps?.id,
       value: getScreenDataFieldValue(),
       listData: getSupportiveDataFieldValue(),
@@ -48,12 +53,21 @@ export const useWidgetProps = (
       validations: getValidationProperty(),
       eventService: eventService,
       viewModel: viewModel,
-      "sssss":"ss",
       ...events,
       dynamicEvents: events,
     });
   };
 
+  const getResolvedBoundProps = () => {
+    const resolved: Record<string, unknown> = {};
+    BOUND_PROP_NAMES.forEach((name) => {
+      if (name in schemaElementProps) {
+        resolved[name] = resolveBoundValue(schemaElementProps[name], viewModel);
+      }
+    });
+    return resolved;
+  };
+
   const getEvents = () => {
     if (!schemaElementProps?.events) return {};
     let onActions: Record<string, any> = {};

package/src/Services/CentralService.ts

@@ -43,19 +43,7 @@ export class CentralService {
   ) => {
     const statusRelatedConfig = (responseConfig ?? {})[response?.status];
     let errorMessage = "";
-
-    if (statusRelatedConfig?.alertType === AlertType.FIELDVALIDATION) {
-      errorMessage = response?.data?.message;
-      if (statusRelatedConfig?.enableMessage) {
-        errorMessage =
-          statusRelatedConfig?.message ||
-          errorMessage ||
-          ErrorMessageProvider.get(
-            response.config.method as RequestType,
-            response?.status,
-          );
-      }
-    } else if (statusRelatedConfig?.enableMessage) {
+    if (statusRelatedConfig?.enableMessage) {
       errorMessage =
         statusRelatedConfig?.message ||
         response?.data?.message ||
@@ -64,6 +52,7 @@ export class CentralService {
           response?.status,
         );
     }
+
     return errorMessage;
   };
 

package/src/UIElement/UIElementDefinations/BaseScreenElement.ts

@@ -17,10 +17,18 @@ type ValidationProps = {
   executeMode: ExecuteMode;
 };
 
+export type EffectiveStyle = {
+  selector: string;
+  target: string;
+  important?: boolean;
+};
+
 export type Style = {
   id?: string;
   className?: string;
   inline?: React.CSSProperties;
+  important?: boolean;
+  effectiveStyles?: EffectiveStyle[];
 };
 
 export interface BaseScreenElement {

package/src/Utils/resolveBoundValue.ts

@@ -0,0 +1,49 @@
+import { ValueReplacePolicy } from "../Action/Types";
+import { ViewModel } from "../DataModel/ViewModel";
+import { getValueFromNestedObject } from "./getValueFromNestedObject";
+
+export type BoundOperand<T> = {
+  value: T | string;
+  valueReplacePolicy: ValueReplacePolicy;
+};
+
+export type BoundValue<T> = T | BoundOperand<T> | undefined | null;
+
+const isBoundOperand = <T>(input: unknown): input is BoundOperand<T> =>
+  typeof input === "object" &&
+  input !== null &&
+  "valueReplacePolicy" in (input as Record<string, unknown>);
+
+export const resolveBoundValue = <T>(
+  bound: BoundValue<T>,
+  viewModel: ViewModel
+): T | undefined | null => {
+  if (!isBoundOperand<T>(bound)) return bound as T | undefined | null;
+
+  switch (bound.valueReplacePolicy) {
+    case ValueReplacePolicy.SELF:
+      return bound.value as T;
+    case ValueReplacePolicy.STATE:
+      return getValueFromNestedObject(bound.value as string, viewModel);
+    default:
+      return bound.value as T;
+  }
+};
+
+export const BOUND_PROP_NAMES = [
+  "min",
+  "max",
+  "minDate",
+  "maxDate",
+  "minLength",
+  "maxLength",
+  "minResizeHeight",
+  "maxResizeHeight",
+  "minResizeWidth",
+  "maxResizeWidth",
+  "step",
+  "placeHolder",
+  "disabled",
+] as const;
+
+export type BoundPropName = (typeof BOUND_PROP_NAMES)[number];

package/src/index.ts

@@ -28,6 +28,9 @@ export type { ISchemaReaderProvider } from './UIElement/ISchemaReaderProvider';
 
 // Utils
 export { resolveAppPath } from './Utils/resolveAppPath';
+export { resolveBoundValue, BOUND_PROP_NAMES } from './Utils/resolveBoundValue';
+export type { BoundValue, BoundOperand, BoundPropName } from './Utils/resolveBoundValue';
+export { ValueReplacePolicy } from './Action/Types';
 
 // Core Styles Path (for SCSS imports)
 export const coreStyles = './Assets/styles/index.scss';