impaktapps-ui-builder 1.0.0 → 1.0.1

package/widgetLibrary/MuiltiSelect.tsx/MultiSelect.tsx

@@ -1,261 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  FC,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { handleValidateCheck } from "@/widgetLibrary/PublicSector/InvalidMessage/utils";
-import Autocomplete from "@mui/material/Autocomplete";
-import { TextField } from "@mui/material";
-import { formatSelectOptions } from "../SelectWidget/formSelectOptions";
-import { isArray, isEmpty } from "lodash";
-import { InvalidMessage } from "../PublicSector/InvalidMessage";
-
-export const WrappedMultiSelect: FC<any> = (props) => {
-  const {
-    // showClear,
-    value,
-    options,
-    placeholder,
-    label,
-    disabled,
-    loading,
-    readOnly,
-    defaultValue,
-    helperText,
-    variant,
-    required,
-    handleUpdateMultiExecutionResult,
-    handleOnChange,
-    getValidateMessage,
-    displayName,
-  } = props;
-  const [valueWithLabel, setValueWithLabel] = useState(defaultValue);
-  const onChangeMultiSelectValue = useCallback(
-    (paramValue: unknown) => {
-      new Promise((resolve) => {
-        const message = getValidateMessage(paramValue);
-        handleUpdateMultiExecutionResult([
-          {
-            displayName,
-            value: {
-              value: paramValue || [],
-              validateMessage: message,
-            },
-          },
-        ]);
-        resolve(true);
-      }).then(() => {
-        handleOnChange?.();
-       
-      });
-    },
-    [
-      displayName,
-      getValidateMessage,
-      handleOnChange,
-      handleUpdateMultiExecutionResult,
-    ]
-  );
-  const valueWithLAbelSetter = useCallback(
-    (value: any[]) => {
-      if (!isEmpty(value) && isArray(value)) {    
-        const actualValues = options.filter((e) => {
-          return value.includes(e.value) || value.includes(e.label);
-        });
-        setValueWithLabel(actualValues);
-      } else {
-        setValueWithLabel([]);
-      }
-    },
-    [options]
-  );
-  const getDefaultValueWithLabel = useCallback(
-    (value: any) => {
-      const updatedValue = options.filter((e) => {
-        return value?.includes(e.value) || value?.includes(e.label);
-      });
-      return updatedValue;
-    },
-    [options]
-  );
-  useEffect(() => {
-    if (Array.isArray(defaultValue)) {
-      setValueWithLabel(getDefaultValueWithLabel(defaultValue));
-    }
-  }, [defaultValue, getDefaultValueWithLabel, options]);
-  return (
-    <div
-      style={{
-        paddingTop: variant === "outlined" ? "5px" : "none",
-        width: "100%",
-      }}
-    >
-      <Autocomplete
-        fullWidth
-        options={options}
-        isOptionEqualToValue={()=>true}
-        value={valueWithLabel}
-        disabled={disabled}
-        sx={{ fontSize: "6px", width: "100%" }}
-        defaultValue={valueWithLabel}
-        loading={loading}
-        multiple={true}
-        readOnly={readOnly}
-        size="small"
-        onChange={(_e, val) => {
-          const multiOptions = val?.map((e) => {
-            return e.value || [];
-          });
-          valueWithLAbelSetter(multiOptions);
-          onChangeMultiSelectValue(multiOptions);
-        }}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            size="small"
-            placeholder={placeholder}
-            label={label}
-            variant={variant || "filled"}
-            helperText={helperText}
-            required={required}
-          />
-        )}
-      />
-    </div>
-  );
-};
-
-WrappedMultiSelect.displayName = "WrappedMultiSelect";
-
-export const MultiSelectWidget: FC<any> = (props) => {
-  const {
-    value,
-    optionConfigureMode,
-    mappedOption,
-    manualOptions,
-    handleUpdateDsl,
-    updateComponentRuntimeProps,
-    deleteComponentRuntimeProps,
-    required,
-    customRule,
-    hideValidationMessage,
-    dynamicHeight,
-    updateComponentHeight,
-    validateMessage,
-    triggerEventHandler,
-  } = props;
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const finalOptions = useMemo(() => {
-    return formatSelectOptions(
-      optionConfigureMode,
-      manualOptions,
-      mappedOption
-    );
-  }, [optionConfigureMode, manualOptions, mappedOption]);
-  const getValidateMessage = useCallback(
-    (value: unknown) => {
-      if (!hideValidationMessage) {
-        const message = handleValidateCheck({
-          value,
-          required,
-          customRule,
-        });
-        const showMessage = message && message.length > 0;
-        return showMessage ? message : "";
-      }
-      return "";
-    },
-    [customRule, hideValidationMessage, required]
-  );
-  const handleValidate = useCallback(
-    (value: unknown) => {
-      const message = getValidateMessage(value);
-      handleUpdateDsl({
-        validateMessage: message,
-      });
-      return message;
-    },
-    [getValidateMessage, handleUpdateDsl]
-  );
-  useEffect(() => {
-    updateComponentRuntimeProps({
-      setSelectedValue: (value: any) => {
-        handleUpdateDsl({ value });
-      },
-      clearValue: () => {
-        handleUpdateDsl({ value: undefined });
-      },
-      validate: () => {
-        return handleValidate(value);
-      },
-      clearValidation: () => {},
-    });
-    return () => {
-      deleteComponentRuntimeProps();
-    };
-  }, [
-    updateComponentRuntimeProps,
-    handleUpdateDsl,
-    deleteComponentRuntimeProps,
-    handleValidate,
-    value,
-  ]);
-  const handleOnChange = useCallback(() => {
-    triggerEventHandler("change");
-  }, [triggerEventHandler]);
-
-  const handleOnFocus = useCallback(() => {
-    triggerEventHandler("focus");
-  }, [triggerEventHandler]);
-
-  const handleOnBlur = useCallback(() => {
-    triggerEventHandler("blur");
-  }, [triggerEventHandler]);
-  const enableAutoHeight =
-    dynamicHeight !== "fixed" && dynamicHeight != undefined;
-  useLayoutEffect(() => {
-    const containerDOM = containerRef.current;
-    const observerRef = new ResizeObserver((entries) => {
-      if (!updateComponentHeight) return;
-      const height = entries[0].contentRect.height;
-      updateComponentHeight?.(height);
-    });
-    if (observerRef && containerDOM && enableAutoHeight) {
-      observerRef.unobserve(containerDOM);
-      observerRef.observe(containerDOM);
-    }
-
-    return () => {
-      if (containerDOM && enableAutoHeight) {
-        observerRef.unobserve(containerDOM);
-      }
-    };
-  }, [enableAutoHeight, updateComponentHeight]);
-  return (
-    <
-    >
-      <WrappedMultiSelect
-        {...props}
-        options={finalOptions}
-        validateMessage={validateMessage}
-        getValidateMessage={getValidateMessage}
-        handleOnChange={handleOnChange}
-        handleOnBlur={handleOnBlur}
-        handleOnFocus={handleOnFocus}
-      />
-      {!hideValidationMessage && (
-        <div>
-          <InvalidMessage validateMessage={validateMessage} />
-        </div>
-      )}
-    </>
-  );
-};
-
-MultiSelectWidget.displayName = "MultiSelectWidget";
-export default MultiSelectWidget;

package/widgetLibrary/MuiltiSelect.tsx/eventHandlerConfig.ts

@@ -1,26 +0,0 @@
-import i18n from "@/i18n/config"
-import { EventHandlerConfig } from "@/widgetLibrary/interface"
-
-export const MULTISELECT_EVENT_HANDLER_CONFIG: EventHandlerConfig = {
-  events: [
-    {
-      label: i18n.t(
-        "editor.inspect.setter_content.widget_action_type_name.change",
-      ),
-      value: "change",
-    },
-    {
-      label: i18n.t(
-        "editor.inspect.setter_content.widget_action_type_name.focus",
-      ),
-      value: "focus",
-    },
-    {
-      label: i18n.t(
-        "editor.inspect.setter_content.widget_action_type_name.blur",
-      ),
-      value: "blur",
-    },
-  ],
-  methods: ["setSelectedValue", "clearValue", "validate", "clearValidation"],
-}

package/widgetLibrary/MuiltiSelect.tsx/index.ts

@@ -1,3 +0,0 @@
-export {MultiSelectWidget} from './MultiSelect';
-export {MULTISELECT_PANEL_CONFIG} from './panelConfig';
-export {MULTISELECT_WIDGET_CONFIG} from './widgetConfig';

package/widgetLibrary/MuiltiSelect.tsx/interface.ts

@@ -1,72 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { TriggerTrigger } from "@/utils/trigger";
-import React, { ReactNode, SyntheticEvent } from "react";
-
-
-export interface AutocompleteOptionData {
-  id:any;
-  value: string;
-  label: string;
-}
-
-export interface AutocompleteWidgetProps {
-
-  id: string;
-  label: string;
-  name: string;
-  manualOptions: any;
-  styles: React.CSSProperties;
-  updateComponentRuntimeProps:any;
-  triggerEventHandler:any;
-  handleUpdateMultiExecutionResult:any;
-  currentIndex:number;
-  linkWidgetDisplayName:any;
-  displayName?:string;
-  freeSolo?:boolean;
-  updateComponentHeight?:any
-
-  required?:boolean;
-  tooltipText?:string;
-
-  handleUpdateDsl: any,
-  deleteComponentRuntimeProps:any,
-    autoAlignPopupWidth?: boolean
-  inputAsOption?: boolean
-  allowClear?: boolean
-  labelInValue?: boolean
-  trigger?: TriggerTrigger
-  defaultPopupVisible?: boolean
-  disabled?: boolean
-  error?: boolean
-  loading?: boolean
-  popupVisible?: boolean
-  defaultInputValue?: string
-  placeholder?: string
-  size?: any
-  addBefore?: ReactNode
-  addAfter?: ReactNode
-  prefix?: ReactNode | string
-  suffixIcon?: ReactNode
-  defaultValue?: any
-  showSearch?: boolean
-  value?: any
-  filterOption?:
-    | boolean
-    | ((inputValue: string | number, option: any) => boolean)
-  defaultFilterOption?:
-    | boolean
-    | ((inputValue: string | number, option: any) => boolean)
-  onChange?: (value?: any) => void
-  onClear?: () => void
-  readOnly?: boolean
-  onInputValueChange?: (value: string | number) => void
-  onKeyDown?: (e: SyntheticEvent) => void
-  onVisibleChange?: (visible: boolean) => void
-  dropdownProps?: any
-  options?: any[] | string[] | number[]
-  onDeselect?: (value: string | number | any) => void
-  onSelect?: (value: string | number | any) => void
-  multiple?: boolean
-  onBlur?: (e: SyntheticEvent) => void
-  onFocus?: (e: SyntheticEvent) => void
-}

package/widgetLibrary/MuiltiSelect.tsx/panelConfig.tsx

@@ -1,289 +0,0 @@
-import i18n from "@/i18n/config"
-import { PanelConfig} from "@/page/App/components/InspectPanel/interface"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
-import { generatorEventHandlerConfig } from "../PublicSector/utils/generatorEventHandlerConfig"
-import { MULTISELECT_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig"
-
-
-const baseWidgetName = "multiselect"
-export const MULTISELECT_PANEL_CONFIG: PanelConfig[] = [
-  {
-    id: `${baseWidgetName}-options`,
-    groupName: i18n.t("editor.inspect.setter_group.options"),
-    children: [
-      {
-        id: `${baseWidgetName}-options-mode`,
-        attrName: "optionConfigureMode",
-        setterType: "RADIO_GROUP_SETTER",
-        options: [
-          {
-            label: i18n.t("widget.public.select_options.manual"),
-            value: "static",
-          },
-          {
-            label: i18n.t("widget.public.select_options.mapped"),
-            value: "dynamic",
-          },
-        ],
-      },
-      {
-        id: `${baseWidgetName}-basic-options`,
-        useCustomLayout: true,
-        attrName: "manualOptions",
-        setterType: "OPTION_LIST_SETTER",
-        bindAttrName: ["optionConfigureMode"],
-        shown: (value) => !value || value === "static",
-        childrenSetter: [
-          {
-            id: `${baseWidgetName}-options-label`,
-            labelName: i18n.t("editor.inspect.setter_label.label"),
-            attrName: "label",
-            setterType: "INPUT_SETTER",
-            expectedType: VALIDATION_TYPES.STRING,
-          },
-          {
-            id: `${baseWidgetName}-options-value`,
-            labelName: i18n.t("editor.inspect.setter_label.value"),
-            attrName: "value",
-            setterType: "INPUT_SETTER",
-          },
-          {
-            id: `${baseWidgetName}-options-disabled`,
-            labelName: i18n.t("editor.inspect.setter_label.disabled"),
-            attrName: "disabled",
-            setterType: "INPUT_SETTER",
-            expectedType: VALIDATION_TYPES.BOOLEAN,
-          },
-        ],
-      },
-      {
-        id: `${baseWidgetName}-option-data-sources`,
-        labelName: i18n.t("editor.inspect.setter_label.data_sources"),
-        attrName: "dataSources",
-        setterType: "INPUT_SETTER",
-        bindAttrName: ["optionConfigureMode"],
-        expectedType: VALIDATION_TYPES.ARRAY,
-        shown: (value) => value === "dynamic",
-        isSetterSingleRow: true,
-      },
-      {
-        id: `${baseWidgetName}-option-mapped`,
-        labelName: i18n.t("editor.inspect.setter_label.mapped_option"),
-        labelDesc: i18n.t("editor.inspect.setter_tooltip.map_data_option"),
-        useCustomLayout: true,
-        attrName: "mappedOption",
-        setterType: "OPTION_MAPPED_SETTER",
-        bindAttrName: ["optionConfigureMode"],
-        shown: (value) => value === "dynamic",
-        childrenSetter: [
-          {
-            id: `${baseWidgetName}-mappedOption-labels`,
-            labelName: i18n.t("editor.inspect.setter_label.label"),
-            attrName: "labels",
-            setterType: "OPTION_MAPPED_INPUT_SETTER",
-            placeholder: "{{item}}",
-            expectedType: VALIDATION_TYPES.ARRAY,
-          },
-          {
-            id: `${baseWidgetName}-mappedOption-values`,
-            labelName: i18n.t("editor.inspect.setter_label.value"),
-            attrName: "values",
-            setterType: "OPTION_MAPPED_INPUT_SETTER",
-            placeholder: "{{item}}",
-            expectedType: VALIDATION_TYPES.ARRAY,
-          },
-          {
-            id: `${baseWidgetName}-mappedOption-disables`,
-            labelName: i18n.t("editor.inspect.setter_label.disabled"),
-            attrName: "disables",
-            setterType: "OPTION_MAPPED_INPUT_SETTER",
-            placeholder: "{{false}}",
-            expectedType: VALIDATION_TYPES.ARRAY,
-          },
-        ],
-      },
-      {
-        id: `${baseWidgetName}-basic-defaultValue`,
-        labelName: i18n.t("editor.inspect.setter_label.default_value"),
-        labelDesc: i18n.t(
-          "editor.inspect.setter_tooltip.component_default_value",
-        ),
-        attrName: "defaultValue",
-        setterType: "INPUT_SETTER",
-      },
-      {
-        id: `${baseWidgetName}-basic-placeholder`,
-        labelName: i18n.t("editor.inspect.setter_label.placeholder"),
-        labelDesc: i18n.t("editor.inspect.setter_tooltip.placeholder"),
-        attrName: "placeholder",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.STRING,
-      },
-      {
-        id: `${baseWidgetName}-basic-HelperText`,
-        labelName: "HelperText",
-        labelDesc: "HelperText",
-        attrName: "helperText",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.STRING,
-      },
-    ],
-  },
-  {
-    id: `${baseWidgetName}-label`,
-    groupName: i18n.t("editor.inspect.setter_group.label"),
-    children: [
-      {
-        id: `${baseWidgetName}-label-label`,
-        labelName: i18n.t("editor.inspect.setter_label.label"),
-        attrName: "label",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.STRING,
-      },
-      {
-        id: `${baseWidgetName}-placeholder-placeholder`,
-        labelName: "Placeholder",
-        attrName: "placeholder",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.STRING,
-      },
-    ],
-  },
-  {
-    id: `${baseWidgetName}-interaction`,
-    groupName: i18n.t("editor.inspect.setter_group.interaction"),
-    children: [
-      {
-        ...generatorEventHandlerConfig(
-          baseWidgetName,
-          MULTISELECT_EVENT_HANDLER_CONFIG.events,
-        ),
-      },
-      {
-        id: `${baseWidgetName}-interaction-disabled`,
-        labelName: i18n.t("editor.inspect.setter_label.disabled"),
-        labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"),
-        attrName: "disabled",
-        setterType: "INPUT_SETTER",
-        placeholder: "{{false}}",
-        expectedType: VALIDATION_TYPES.BOOLEAN,
-      }
-    ],
-  },
-  {
-    id: `${baseWidgetName}-Adornments`,
-    groupName: i18n.t("editor.inspect.setter_group.adornments"),
-    children: [
-      {
-        id: `${baseWidgetName}-adornments-tooltip`,
-        labelName: i18n.t("editor.inspect.setter_label.tooltip"),
-        labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"),
-        attrName: "tooltipText",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.STRING,
-      },
-    ],
-  },
-  {
-    id: `${baseWidgetName}-validation`,
-    groupName: i18n.t("editor.inspect.setter_group.validation"),
-    children: [
-      {
-        id: `${baseWidgetName}-validation-required`,
-        labelName: i18n.t("editor.inspect.setter_label.required_field"),
-        labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"),
-        setterType: "SWITCH_SETTER",
-        expectedType: VALIDATION_TYPES.BOOLEAN,
-        attrName: "required",
-      },
-      {
-        id: `${baseWidgetName}-validation-custom`,
-        labelName: i18n.t("editor.inspect.setter_label.custom_rule"),
-        labelDesc: i18n.t("editor.inspect.setter_tooltip.custom_rule"),
-        setterType: "INPUT_SETTER",
-        attrName: "customRule",
-        expectedType: VALIDATION_TYPES.STRING,
-      },
-      {
-        id: `${baseWidgetName}-validation-hide-message`,
-        labelName: i18n.t(
-          "editor.inspect.setter_label.hide_validation_message",
-        ),
-        labelDesc: i18n.t(
-          "editor.inspect.setter_tooltip.hide_validation_message",
-        ),
-        setterType: "SWITCH_SETTER",
-        expectedType: VALIDATION_TYPES.BOOLEAN,
-        attrName: "hideValidationMessage",
-      },
-      {
-        id: `${baseWidgetName}-validation-form-data-key`,
-        labelName: i18n.t("editor.inspect.setter_label.form_data_key"),
-        labelDesc: i18n.t("editor.inspect.setter_tooltip.form_data_key"),
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.STRING,
-        attrName: "formDataKey",
-      },
-    ],
-  },
-  {
-    id: `${baseWidgetName}-layout`,
-    groupName: i18n.t("editor.inspect.setter_group.layout"),
-    children: [
-      {
-        id: `${baseWidgetName}-layout-hidden`,
-        labelName: i18n.t("editor.inspect.setter_label.hidden"),
-        labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"),
-        setterType: "SWITCH_SETTER",
-        attrName: "hidden",
-        placeholder: "false",
-        expectedType: VALIDATION_TYPES.BOOLEAN,
-      },
-    ],
-  },
-  {
-    id: `${baseWidgetName}-style`,
-    groupName: i18n.t("editor.inspect.setter_group.style"),
-    children: [
-      {
-        id: `${baseWidgetName}-basic-type`,
-        labelName: "Variant",
-        labelDesc: "Variant",
-        attrName: "variant",
-        expectedType: VALIDATION_TYPES.STRING,
-        setterType: "SEARCH_SELECT_SETTER",
-        options: [
-          {
-            label: "Standard",
-            value: "standard",
-          },
-          {
-            label: "Outlined",
-            value: "outlined",
-          },
-          {
-            label: "Filled",
-            value: "filled",
-          },
-        ],
-      },
-      {
-        id: `${baseWidgetName}-style-list`,
-        setterType: "STYLE_CONTAINER_SETTER",
-        labelName: i18n.t("editor.inspect.setter_label.colors"),
-        attrName: "styles",
-        useCustomLayout: true,
-        childrenSetter: [
-          {
-            id: `${baseWidgetName}-style-bg`,
-            labelName:  i18n.t("editor.inspect.setter_label.theme_color"),
-            setterType: "COLOR_PICKER_SETTER",
-            useCustomLayout: true,
-            attrName: "colorScheme",
-            defaultValue: "blue",
-          },
-        ],
-      },
-    ],
-  },
-]