@wavemaker-ai/react-runtime 1.0.0-rc.647499 → 1.0.0-rc.647565

package/components/data/form/dynamic-fields/constant.js

@@ -1,53 +1,43 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.COMPONENT_MAP = void 0;
-var _text = _interopRequireDefault(require("../../../input/text"));
-var _textarea = _interopRequireDefault(require("../../../input/textarea"));
-var _number = _interopRequireDefault(require("../../../input/number"));
-var _currency = _interopRequireDefault(require("../../../input/currency"));
-var _select = _interopRequireDefault(require("../../../input/select"));
-var _slider = _interopRequireDefault(require("../../../input/slider"));
-var _rating = _interopRequireDefault(require("../../../input/rating"));
-var _checkbox = _interopRequireDefault(require("../../../input/default/checkbox"));
-var _checkboxset = _interopRequireDefault(require("../../../input/default/checkboxset"));
-var _radioset = _interopRequireDefault(require("../../../input/default/radioset"));
-var _switch = _interopRequireDefault(require("../../../input/default/switch"));
-var _date = _interopRequireDefault(require("../../../input/epoch/date"));
-var _datetime = _interopRequireDefault(require("../../../input/epoch/datetime"));
-var _time = _interopRequireDefault(require("../../../input/epoch/time"));
-var _chips = _interopRequireDefault(require("../../../input/chips"));
-var _colorPicker = _interopRequireDefault(require("../../../input/color-picker"));
-var _fileupload = _interopRequireDefault(require("../../../input/fileupload"));
-var _upload = _interopRequireDefault(require("../../../input/upload"));
-var _calendar = _interopRequireDefault(require("../../../input/calendar"));
-// Default input components
-
-// Date/Time components
-
-// Other input components
-
-var COMPONENT_MAP = exports.COMPONENT_MAP = {
-  text: _text["default"],
-  textarea: _textarea["default"],
-  number: _number["default"],
-  currency: _currency["default"],
-  select: _select["default"],
-  slider: _slider["default"],
-  rating: _rating["default"],
-  checkbox: _checkbox["default"],
-  checkboxset: _checkboxset["default"],
-  radioset: _radioset["default"],
-  "switch": _switch["default"],
-  date: _date["default"],
-  datetime: _datetime["default"],
-  time: _time["default"],
-  chips: _chips["default"],
-  colorpicker: _colorPicker["default"],
-  fileupload: _fileupload["default"],
-  upload: _upload["default"],
-  calendar: _calendar["default"]
-};
+import WmText from "../../../input/text";
+import WmTextarea from "../../../input/textarea";
+import WmNumber from "../../../input/number";
+import WmCurrency from "../../../input/currency";
+import WmSelect from "../../../input/select";
+import WmSlider from "../../../input/slider";
+import WmRating from "../../../input/rating";
+import WmCheckbox from "../../../input/default/checkbox";
+import WmCheckboxset from "../../../input/default/checkboxset";
+import WmRadioset from "../../../input/default/radioset";
+import WmSwitch from "../../../input/default/switch";
+import WmDate from "../../../input/epoch/date";
+import WmDatetime from "../../../input/epoch/datetime";
+import WmTime from "../../../input/epoch/time";
+import WmChips from "../../../input/chips";
+import WmColorPicker from "../../../input/color-picker";
+import WmFileupload from "../../../input/fileupload";
+import WmUpload from "../../../input/upload";
+import WmCalendar from "../../../input/calendar";
+const COMPONENT_MAP = {
+  text: WmText,
+  textarea: WmTextarea,
+  number: WmNumber,
+  currency: WmCurrency,
+  select: WmSelect,
+  slider: WmSlider,
+  rating: WmRating,
+  checkbox: WmCheckbox,
+  checkboxset: WmCheckboxset,
+  radioset: WmRadioset,
+  switch: WmSwitch,
+  date: WmDate,
+  datetime: WmDatetime,
+  time: WmTime,
+  chips: WmChips,
+  colorpicker: WmColorPicker,
+  fileupload: WmFileupload,
+  upload: WmUpload,
+  calendar: WmCalendar
+};
+export {
+  COMPONENT_MAP
+};

package/components/data/form/dynamic-fields/index.js

@@ -1,167 +1,158 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = DynamicForm;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _formContext = require("../form-context");
-var _text = _interopRequireDefault(require("../../../input/text"));
-var _layoutGrid = _interopRequireDefault(require("../../../container/layout-grid"));
-var _gridRow = _interopRequireDefault(require("../../../container/layout-grid/grid-row"));
-var _gridColumn = _interopRequireDefault(require("../../../container/layout-grid/grid-column"));
-var _label = _interopRequireDefault(require("../../../basic/label"));
-var _formField = _interopRequireDefault(require("../form-field"));
-var _utils = require("./utils");
-var _constant = require("./constant");
-var _excluded = ["class"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // Form context
-// Input components
-// Layout components
-// Basic components
-// Form field wrapper
-// Import types
-// Default CSS classes
-var DEFAULT_FIELD_CLASS = "app-dynamic-form-field";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import isArray from "lodash-es/isArray";
+import clsx from "clsx";
+import { useFormContext } from "../form-context";
+import WmText from "../../../input/text";
+import WmLayoutGrid from "../../../container/layout-grid";
+import WmGridRow from "../../../container/layout-grid/grid-row";
+import WmGridColumn from "../../../container/layout-grid/grid-column";
+import WmLabel from "../../../basic/label";
+import WmFormField from "../form-field";
+import { updateMetadata } from "./utils";
+import { COMPONENT_MAP } from "./constant";
+const DEFAULT_FIELD_CLASS = "app-dynamic-form-field";
 function DynamicForm(props) {
-  var metadata = props.metadata,
-    listener = props.listener,
-    _props$layout = props.layout,
-    layout = _props$layout === void 0 ? "1-column" : _props$layout,
-    _props$noOfColumns = props.noOfColumns,
-    noOfColumns = _props$noOfColumns === void 0 ? 1 : _props$noOfColumns,
-    _props$isHorizontal = props.isHorizontal,
-    isHorizontal = _props$isHorizontal === void 0 ? false : _props$isHorizontal,
-    _props$name = props.name,
-    name = _props$name === void 0 ? "dynamicForm" : _props$name,
-    formRef = props.formRef,
-    onBeforeRender = props.onBeforeRender;
-  var formContext = (0, _formContext.useFormContext)();
-  var _ref = formContext || {},
-    captionposition = _ref.captionposition;
-  var metadataRef = (0, _react.useRef)(metadata);
-  (0, _react.useEffect)(function () {
+  const {
+    metadata,
+    listener,
+    layout = "1-column",
+    noOfColumns = 1,
+    isHorizontal = false,
+    name = "dynamicForm",
+    formRef,
+    onBeforeRender
+  } = props;
+  const formContext = useFormContext();
+  const { captionposition } = formContext || {};
+  const metadataRef = useRef(metadata);
+  useEffect(() => {
     if (onBeforeRender) {
-      var data = onBeforeRender(metadata, props);
+      const data = onBeforeRender(metadata, props);
       if (data) {
-        metadataRef.current = (0, _utils.updateMetadata)(data, listener) || metadata;
+        metadataRef.current = updateMetadata(data, listener) || metadata;
       }
     } else metadataRef.current = metadata;
   }, [metadata, onBeforeRender]);
-
-  // Return null if fields is not an array or empty
-  if (!(0, _isArray["default"])(metadataRef.current) || metadataRef.current.length === 0) {
+  if (!isArray(metadataRef.current) || metadataRef.current.length === 0) {
     return null;
   }
-
-  // Calculate column width based on layout
-  var getColumnWidth = function getColumnWidth(fieldColumnWidth) {
+  const getColumnWidth = (fieldColumnWidth) => {
     if (fieldColumnWidth) return fieldColumnWidth;
-
-    // Calculate based on layout
-    var columns = layout === "custom" ? noOfColumns : parseInt(layout.split("-")[0]);
+    const columns = layout === "custom" ? noOfColumns : parseInt(layout.split("-")[0]);
     return Math.floor(12 / columns);
   };
-
-  // Render individual form field
-  var renderFormField = function renderFormField(field) {
-    var ComponentToRender = _constant.COMPONENT_MAP[field.widget] || _text["default"];
-
-    // Prepare field props
-    var fieldProps = _objectSpread(_objectSpread({}, field), {}, {
-      listener: listener,
+  const renderFormField = (field) => {
+    const ComponentToRender = COMPONENT_MAP[field.widget] || WmText;
+    const fieldProps = __spreadValues(__spreadProps(__spreadValues({}, field), {
+      className: field.class,
+      listener,
       captionposition: isHorizontal ? "horizontal" : captionposition
-    }, formContext && {
-      formContext: formContext,
+    }), formContext && {
+      formContext,
       onChangeHandler: formContext.onChangeHandler
     });
-    var className = fieldProps["class"],
-      restProps = (0, _objectWithoutProperties2["default"])(fieldProps, _excluded);
-    return __jsx(ComponentToRender, (0, _extends2["default"])({}, restProps, {
-      className: className || fieldProps.className
-    }));
+    const _a = fieldProps, { class: className } = _a, restProps = __objRest(_a, ["class"]);
+    return /* @__PURE__ */ jsx(ComponentToRender, __spreadProps(__spreadValues({}, restProps), { className: className || fieldProps.className }));
   };
-
-  // Render form field with label using FormField wrapper
-  var renderFormFieldWithWrapper = function renderFormFieldWithWrapper(field) {
-    var columnWidth = getColumnWidth(field.columnwidth);
-    return __jsx(_gridColumn["default"], {
-      key: field.name,
-      name: "".concat(field.name, "Column"),
-      columnwidth: columnWidth,
-      listener: listener
-    }, __jsx(_formField["default"], (0, _extends2["default"])({}, field, {
-      name: field.name,
-      field: "true",
-      listener: listener,
-      className: (0, _clsx["default"])(DEFAULT_FIELD_CLASS, field.className, " app-textbox", formRef === null || formRef === void 0 ? void 0 : formRef.itemsPerRow),
-      formRef: formRef,
-      required: field.required === true || String(field.required) === "true",
-      renderFormFields: function renderFormFields($formField) {
-        return __jsx(_react["default"].Fragment, null, __jsx(_label["default"], {
-          name: "".concat($formField.name, "_formLabel"),
-          caption: $formField.displayname,
-          required: $formField.required,
-          listener: listener,
-          className: (0, _clsx["default"])("app-label control-label formfield-label", (formRef === null || formRef === void 0 ? void 0 : formRef.captionCls) || ""),
-          htmlFor: $formField.name
-        }), renderFormField(_objectSpread(_objectSpread(_objectSpread({}, field), $formField), {}, {
-          datavalue: $formField.datavalue || $formField.defaultvalue,
-          name: $formField.name + "_formWidget",
-          className: (0, _clsx["default"])(field.className, (formRef === null || formRef === void 0 ? void 0 : formRef.widgetCls) || "")
-        })));
-      }
-    })));
+  const renderFormFieldWithWrapper = (field) => {
+    const columnWidth = getColumnWidth(field.columnwidth);
+    return /* @__PURE__ */ jsx(
+      WmGridColumn,
+      {
+        name: `${field.name}Column`,
+        columnwidth: columnWidth,
+        listener,
+        children: /* @__PURE__ */ jsx(
+          WmFormField,
+          __spreadProps(__spreadValues({}, field), {
+            name: field.name,
+            field: "true",
+            listener,
+            className: clsx(
+              DEFAULT_FIELD_CLASS,
+              field.className,
+              field.class,
+              " app-textbox",
+              formRef == null ? void 0 : formRef.itemsPerRow
+            ),
+            formRef,
+            required: field.required === true || String(field.required) === "true",
+            renderFormFields: ($formField) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                WmLabel,
+                {
+                  name: `${$formField.name}_formLabel`,
+                  caption: $formField.displayname,
+                  required: $formField.required,
+                  listener,
+                  className: clsx(
+                    "app-label control-label formfield-label",
+                    (formRef == null ? void 0 : formRef.captionCls) || ""
+                  ),
+                  htmlFor: $formField.name
+                }
+              ),
+              renderFormField(__spreadProps(__spreadValues(__spreadValues({}, field), $formField), {
+                datavalue: $formField.datavalue || $formField.defaultvalue,
+                name: $formField.name + "_formWidget",
+                className: clsx(field.className, field.class, (formRef == null ? void 0 : formRef.widgetCls) || "")
+              }))
+            ] })
+          })
+        )
+      },
+      field.name
+    );
   };
-
-  // Group fields into rows based on column layout
-  var groupFieldsIntoRows = function groupFieldsIntoRows(fields) {
-    var columns = layout === "custom" ? noOfColumns : parseInt(layout.split("-")[0]);
-    var rows = [];
-    for (var i = 0; i < fields.length; i += columns) {
+  const groupFieldsIntoRows = (fields) => {
+    const columns = layout === "custom" ? noOfColumns : parseInt(layout.split("-")[0]);
+    const rows = [];
+    for (let i = 0; i < fields.length; i += columns) {
       rows.push(fields.slice(i, i + columns));
     }
     return rows;
   };
-
-  // Render fields in grid layout
-  var renderFieldsInGrid = function renderFieldsInGrid() {
+  const renderFieldsInGrid = () => {
     if (layout === "1-column") {
-      // Single column layout - each field in its own row
-      return metadataRef.current.map(function (field) {
-        return __jsx(_gridRow["default"], {
-          key: field.name,
-          name: "".concat(field.name, "Row"),
-          listener: listener
-        }, renderFormFieldWithWrapper(field));
-      });
+      return metadataRef.current.map((field) => /* @__PURE__ */ jsx(WmGridRow, { name: `${field.name}Row`, listener, children: renderFormFieldWithWrapper(field) }, field.name));
     }
-
-    // Multi-column layout - group fields into rows
-    var fieldRows = groupFieldsIntoRows(metadataRef.current);
-    return fieldRows.map(function (row, rowIndex) {
-      return __jsx(_gridRow["default"], {
-        key: "row-".concat(rowIndex),
-        name: "dynamicFormRow".concat(rowIndex),
-        listener: listener
-      }, row.map(function (field) {
-        return renderFormFieldWithWrapper(field);
-      }));
-    });
+    const fieldRows = groupFieldsIntoRows(metadataRef.current);
+    return fieldRows.map((row, rowIndex) => /* @__PURE__ */ jsx(WmGridRow, { name: `dynamicFormRow${rowIndex}`, listener, children: row.map((field) => renderFormFieldWithWrapper(field)) }, `row-${rowIndex}`));
   };
-  return __jsx(_layoutGrid["default"], {
-    name: name,
-    listener: listener,
-    className: "dynamic-form-grid"
-  }, renderFieldsInGrid());
-}
+  return /* @__PURE__ */ jsx(WmLayoutGrid, { name, listener, className: "dynamic-form-grid", children: renderFieldsInGrid() });
+}
+export {
+  DynamicForm as default
+};

package/components/data/form/dynamic-fields/props.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});