@knovator/pagecreator-admin 0.0.8 → 0.0.9

package/index.js

@@ -3472,6 +3472,45 @@ const PageSearch = () => {
   });
 };
 
+var call$7 = functionCall;
+var hasOwn$1 = hasOwnProperty_1;
+var isPrototypeOf$2 = objectIsPrototypeOf;
+var regExpFlags = regexpFlags$1;
+
+var RegExpPrototype$1 = RegExp.prototype;
+
+var regexpGetFlags = function (R) {
+  var flags = R.flags;
+  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn$1(R, 'flags') && isPrototypeOf$2(RegExpPrototype$1, R)
+    ? call$7(regExpFlags, R) : flags;
+};
+
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var defineBuiltIn$2 = defineBuiltIn$7;
+var anObject$5 = anObject$f;
+var $toString = toString$6;
+var fails$3 = fails$n;
+var getRegExpFlags = regexpGetFlags;
+
+var TO_STRING = 'toString';
+var RegExpPrototype = RegExp.prototype;
+var nativeToString = RegExpPrototype[TO_STRING];
+
+var NOT_GENERIC = fails$3(function () { return nativeToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name != TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  defineBuiltIn$2(RegExp.prototype, TO_STRING, function toString() {
+    var R = anObject$5(this);
+    var pattern = $toString(R.source);
+    var flags = $toString(getRegExpFlags(R));
+    return '/' + pattern + '/' + flags;
+  }, { unsafe: true });
+}
+
 var aCallable$6 = aCallable$8;
 var toObject = toObject$5;
 var IndexedObject = indexedObject;
@@ -3515,11 +3554,11 @@ var arrayReduce = {
   right: createMethod(true)
 };
 
-var fails$3 = fails$n;
+var fails$2 = fails$n;
 
 var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
   var method = [][METHOD_NAME];
-  return !!method && fails$3(function () {
+  return !!method && fails$2(function () {
     // eslint-disable-next-line no-useless-call -- required for testing
     method.call(null, argument || function () { return 1; }, 1);
   });
@@ -3550,45 +3589,6 @@ $$7({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
   }
 });
 
-var call$7 = functionCall;
-var hasOwn$1 = hasOwnProperty_1;
-var isPrototypeOf$2 = objectIsPrototypeOf;
-var regExpFlags = regexpFlags$1;
-
-var RegExpPrototype$1 = RegExp.prototype;
-
-var regexpGetFlags = function (R) {
-  var flags = R.flags;
-  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn$1(R, 'flags') && isPrototypeOf$2(RegExpPrototype$1, R)
-    ? call$7(regExpFlags, R) : flags;
-};
-
-var PROPER_FUNCTION_NAME = functionName.PROPER;
-var defineBuiltIn$2 = defineBuiltIn$7;
-var anObject$5 = anObject$f;
-var $toString = toString$6;
-var fails$2 = fails$n;
-var getRegExpFlags = regexpGetFlags;
-
-var TO_STRING = 'toString';
-var RegExpPrototype = RegExp.prototype;
-var nativeToString = RegExpPrototype[TO_STRING];
-
-var NOT_GENERIC = fails$2(function () { return nativeToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
-// FF44- RegExp#toString has a wrong name
-var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name != TO_STRING;
-
-// `RegExp.prototype.toString` method
-// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
-if (NOT_GENERIC || INCORRECT_NAME) {
-  defineBuiltIn$2(RegExp.prototype, TO_STRING, function toString() {
-    var R = anObject$5(this);
-    var pattern = $toString(R.source);
-    var flags = $toString(getRegExpFlags(R));
-    return '/' + pattern + '/' + flags;
-  }, { unsafe: true });
-}
-
 var $$6 = _export;
 var $parseInt = numberParseInt;
 
@@ -3617,8 +3617,7 @@ const Form = /*#__PURE__*/forwardRef(({
     setValue,
     control,
     setError,
-    watch,
-    getValues
+    watch
   } = useForm(); // setting update data in form
 
   useEffect(() => {
@@ -3643,18 +3642,169 @@ const Form = /*#__PURE__*/forwardRef(({
         setValue(key, updates[key]);
       });
     }
-  }, [setValue, updates]); // setting default values
+  }, [setValue, updates]);
+
+  const inputRenderer = schema => {
+    var _a, _b, _c, _d, _e, _f;
+
+    let input;
+    if (typeof schema.show !== 'undefined' && !schema.show) return null;
+
+    if (schema.type) {
+      switch (schema.type) {
+        case 'ReactSelect':
+          input = jsx(CustomReactSelect, {
+            options: schema.options,
+            disabled: !_enable,
+            label: schema.label,
+            error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
+            onChange: value => {
+              if (value) {
+                setValue(schema.accessor, Array.isArray(value) ? value.map(item => item.value) : value.value);
+                if (schema.onChange) schema.onChange(value);
+              }
+            },
+            selectedOptions: schema.selectedOptions,
+            required: schema.required,
+            isMulti: schema.isMulti,
+            isSearchable: schema.isSearchable,
+            onSearch: schema.onSearch,
+            isLoading: schema.isLoading,
+            placeholder: schema.placeholder,
+            wrapperClassName: schema.wrapperClassName,
+            formatOptionLabel: schema.formatOptionLabel
+          });
+          break;
+
+        case 'checkbox':
+          input = jsx(Input.Checkbox, {
+            error: (_d = (_c = errors[schema.accessor]) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
+            switchClass: schema.switchClass,
+            label: schema.label,
+            rest: register(schema.accessor, schema.validations || {}),
+            className: "block",
+            disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable,
+            wrapperClassName: schema.wrapperClassName
+          });
+          break;
+
+        case 'select':
+          input = jsx(Controller, {
+            control: control,
+            name: schema.accessor,
+            render: ({
+              field
+            }) => {
+              var _a, _b;
+
+              return jsx(Input.Select, {
+                options: schema.options,
+                label: schema.label,
+                error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
+                onChange: e => field.onChange(e.target.value),
+                value: field.value,
+                className: "w-full",
+                disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
+                required: schema.required,
+                wrapperClassName: schema.wrapperClassName
+              });
+            }
+          });
+          break;
+
+        case 'text':
+        case 'number':
+        case 'url':
+        default:
+          input = jsx(Input, {
+            rest: register(schema.accessor, schema.validations || {}),
+            label: schema.label,
+            error: (_f = (_e = errors[schema.accessor]) === null || _e === void 0 ? void 0 : _e.message) === null || _f === void 0 ? void 0 : _f.toString(),
+            type: schema.type,
+            className: "w-full p-2",
+            placeholder: schema.placeholder,
+            disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
+            required: schema.required,
+            onInput: schema.onInput,
+            wrapperClassName: schema.wrapperClassName
+          });
+          break;
+      }
+    } else if (schema.Input) {
+      input = jsxs("div", Object.assign({
+        className: "kms_input-wrapper"
+      }, {
+        children: [jsx("label", Object.assign({
+          className: "kms_input-label"
+        }, {
+          children: schema.label
+        })), jsx(Controller, {
+          control: control,
+          name: schema.accessor,
+          rules: schema.validations,
+          render: ({
+            field
+          }) => {
+            var _a, _b; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+
+            return schema.Input({
+              field,
+              error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
+              disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
+              setError: msg => setError.call(null, schema.accessor, {
+                type: 'custom',
+                message: msg
+              })
+            });
+          }
+        })]
+      }));
+    } else throw new Error(`Please provide Input or type prop to render input Labeled ${schema.label}`);
+
+    return input;
+  };
+
+  const onFormSubmit = e => __awaiter(void 0, void 0, void 0, function* () {
+    e.preventDefault();
+    handleSubmit(data => {
+      const formattedData = schema.reduce((values, schemaItem) => {
+        // Do not add field if editing is disabled for it
+        if (_isUpdating && typeof schemaItem.editable !== 'undefined' && !schemaItem.editable) return values;
+
+        if (schemaItem.type === 'number') {
+          values[schemaItem.accessor] = data[schemaItem.accessor] === '' ? null : parseInt(data[schemaItem.accessor]);
+        } else values[schemaItem.accessor] = data[schemaItem.accessor];
 
-  useEffect(() => {
-    if (isEmpty(data)) {
-      const defaultValues = schema.reduce((values, schemaItem) => {
-        if (typeof schemaItem.defaultValue !== 'undefined') values[schemaItem.accessor] = schemaItem.defaultValue;
         return values;
       }, {});
-      reset(defaultValues);
-    }
-  }, [data, reset, schema]);
+      onSubmit(formattedData);
+    })();
+  });
 
+  return jsx("form", Object.assign({
+    onSubmit: onFormSubmit,
+    ref: ref,
+    className: "khb-form-items"
+  }, {
+    children: schema.map((schema, i) => jsx(React.Fragment, {
+      children: inputRenderer(schema)
+    }, i))
+  }));
+});
+
+const SimpleForm = /*#__PURE__*/forwardRef(({
+  schema,
+  onSubmit,
+  isUpdating: _isUpdating = false,
+  enable: _enable = true,
+  register,
+  errors,
+  handleSubmit,
+  setValue,
+  control,
+  setError
+}, ref) => {
   const inputRenderer = schema => {
     var _a, _b, _c, _d, _e, _f;
 
@@ -3712,8 +3862,9 @@ const Form = /*#__PURE__*/forwardRef(({
                 options: schema.options,
                 label: schema.label,
                 error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
-                onChange: e => field.onChange(e.target.value),
-                value: field.value,
+                // onChange={(e) => field.onChange(e.target.value)}
+                rest: field,
+                // value={field.value}
                 className: "w-full",
                 disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
                 required: schema.required,
@@ -6613,6 +6764,18 @@ const TileItemsAccordian = ({
 const WidgetForm = ({
   formRef
 }) => {
+  const {
+    register,
+    formState: {
+      errors
+    },
+    handleSubmit,
+    reset,
+    setValue,
+    control,
+    watch,
+    setError
+  } = useForm();
   const {
     baseUrl,
     switchClass
@@ -6683,6 +6846,11 @@ const WidgetForm = ({
       setTilesEnabled(true);
     }
   }, [formState]);
+  useEffect(() => {
+    if (!isEmpty(data)) {
+      reset(data);
+    }
+  }, [data, reset]);
 
   const onChangeSearch = str => {
     if (callerRef.current) clearTimeout(callerRef.current);
@@ -6747,8 +6915,14 @@ const WidgetForm = ({
         return temporaryData;
       });
     }
-  }; // Schemas
+  };
 
+  useEffect(() => {
+    const subscription = watch((value, {
+      name
+    }) => onWidgetFormInputChange(value, name));
+    return () => subscription.unsubscribe();
+  }, [watch, onWidgetFormInputChange]); // Schemas
 
   const widgetFormSchema = [{
     label: `${t('widget.name')}`,
@@ -6911,13 +7085,17 @@ const WidgetForm = ({
   return jsxs("div", Object.assign({
     className: "khb_form"
   }, {
-    children: [jsx(Form, {
+    children: [jsx(SimpleForm, {
       schema: widgetFormSchema,
       onSubmit: onFormSubmit,
       ref: formRef,
-      data: data,
       isUpdating: formState === 'UPDATE',
-      watcher: onWidgetFormInputChange
+      register: register,
+      errors: errors,
+      handleSubmit: handleSubmit,
+      setValue: setValue,
+      control: control,
+      setError: setError
     }), !tilesEnabled && jsx(DNDItemsList, {
       items: selectedCollectionItems,
       onDragEnd: onCollectionIndexChange,

package/lib/components/common/Form/SimpleForm.d.ts

@@ -0,0 +1,17 @@
+import React, { MutableRefObject } from 'react';
+import { CombineObjectType, SchemaType } from '../../../types';
+interface SimpleFormProps {
+    schema: SchemaType[];
+    isUpdating?: boolean;
+    onSubmit: (data: CombineObjectType) => void;
+    enable?: boolean;
+    ref: MutableRefObject<HTMLFormElement | null>;
+    register: any;
+    errors: any;
+    handleSubmit: any;
+    setValue: any;
+    control: any;
+    setError: any;
+}
+declare const SimpleForm: React.ForwardRefExoticComponent<Pick<SimpleFormProps, "schema" | "onSubmit" | "isUpdating" | "enable" | "register" | "errors" | "handleSubmit" | "setValue" | "control" | "setError"> & React.RefAttributes<HTMLFormElement | null>>;
+export default SimpleForm;

package/lib/components/common/Form/index.d.ts

@@ -1,2 +1,4 @@
 import Form from "./Form";
+import SimpleForm from "./SimpleForm";
 export default Form;
+export { SimpleForm };

package/lib/types/components.d.ts

@@ -173,7 +173,6 @@ export interface SchemaType extends ReactSelectProps {
         label: string;
     }[];
     isMulti?: boolean;
-    defaultValue?: string | number | boolean;
     placeholder?: string;
     required?: boolean;
     onChange?: (e: any) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knovator/pagecreator-admin",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "dependencies": {
     "classnames": "^2.3.1",
     "react-beautiful-dnd": "^13.1.0",