datastake-daf 0.6.556 → 0.6.558

package/dist/components/index.js

@@ -40497,6 +40497,187 @@ const Navigation = _ref => {
   }) : null;
 };
 
+function AuthForm(_ref) {
+  var _steps$currentStep;
+  let {
+    steps,
+    fields,
+    onSubmit,
+    initialValues = {},
+    submitText = "Submit",
+    form,
+    errors,
+    t = key => key,
+    executeRecaptcha = () => {}
+  } = _ref;
+  const [formInstance] = antd.Form.useForm(form);
+  const [currentStep, setCurrentStep] = React.useState(0);
+  const [allFormValues, setAllFormValues] = React.useState(initialValues);
+  const [formErrors, setFormErrors] = React.useState(null);
+  const isMultiStep = !!steps;
+  const currentFields = isMultiStep ? steps === null || steps === void 0 || (_steps$currentStep = steps[currentStep]) === null || _steps$currentStep === void 0 ? void 0 : _steps$currentStep.fields : fields || [];
+  React.useEffect(() => {
+    if (isMultiStep && Object.keys(allFormValues).length > 0) {
+      formInstance.setFieldsValue(allFormValues);
+    }
+  }, [currentStep, allFormValues, formInstance, isMultiStep]);
+  const handleReCaptchaVerify = React.useCallback(async () => {
+    if (!executeRecaptcha) {
+      console.log('Execute recaptcha not yet available');
+      return;
+    }
+    const token = await executeRecaptcha('submit');
+    return token;
+  }, [executeRecaptcha]);
+  const next = async () => {
+    try {
+      await formInstance.validateFields(currentFields.map(f => f.name));
+      // Save current step values before moving to next step
+      const currentValues = formInstance.getFieldsValue();
+      setAllFormValues(prev => _objectSpread2(_objectSpread2({}, prev), currentValues));
+      setCurrentStep(prev => prev + 1);
+    } catch (err) {
+      console.error("Please fix the validation errors before continuing.");
+    }
+  };
+  const prev = () => setCurrentStep(prev => prev - 1);
+  const handleSubmit = async values => {
+    const token = await handleReCaptchaVerify();
+    if (!token) {
+      console.error('reCAPTCHA verification failed');
+      return;
+    }
+    setFormErrors(null);
+    if (!isMultiStep) return onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(values);
+    if (currentStep < (steps === null || steps === void 0 ? void 0 : steps.length) - 1) return next();
+    const finalValues = _objectSpread2(_objectSpread2({}, allFormValues), values);
+    onSubmit === null || onSubmit === void 0 || onSubmit(finalValues);
+  };
+  const checkRequiredFieldsFilled = (changedValues, allValues) => {
+    const requiredFields = currentFields.filter(f => f.required).map(f => f.name);
+    return requiredFields.every(fieldName => {
+      const value = allValues[fieldName];
+      return value !== undefined && value !== null && value !== '';
+    });
+  };
+  React.useEffect(() => {
+    setFormErrors(errors);
+  }, [errors]);
+  const renderErrors = (err, t) => {
+    document.querySelectorAll('.ant-form-item').forEach(input => input.classList.add('ant-form-item-has-error'));
+    return Object.keys(err).map(key => {
+      return err[key].map(error => /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "ant-form-item-explain errors-cont",
+        style: {
+          color: '#ff4d4f'
+        },
+        children: t(error)
+      }, error));
+    });
+  };
+  const renderField = field => {
+    var _field$options;
+    const rules = [...(field.required ? [{
+      required: true,
+      message: "".concat(field.label, " is required")
+    }] : []), ...(field.rules || [])];
+    let inputNode = null;
+    switch (field.type) {
+      case "input":
+      case "email":
+      case "number":
+        inputNode = /*#__PURE__*/jsxRuntime.jsx(antd.Input, _objectSpread2({
+          type: field.type,
+          placeholder: field.placeholder
+        }, field.props));
+        break;
+      case "password":
+        inputNode = /*#__PURE__*/jsxRuntime.jsx(antd.Input.Password, _objectSpread2({
+          placeholder: field.placeholder
+        }, field.props));
+        break;
+      case "textarea":
+        inputNode = /*#__PURE__*/jsxRuntime.jsx(antd.Input.TextArea, _objectSpread2({
+          placeholder: field.placeholder
+        }, field.props));
+        break;
+      case "select":
+        inputNode = /*#__PURE__*/jsxRuntime.jsx(antd.Select, _objectSpread2(_objectSpread2({
+          placeholder: field.placeholder
+        }, field.props), {}, {
+          children: (_field$options = field.options) === null || _field$options === void 0 ? void 0 : _field$options.map(opt => /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
+            value: opt.value,
+            children: opt.label
+          }, opt.value))
+        }));
+        break;
+      case "custom":
+        inputNode = field.component;
+        break;
+      default:
+        inputNode = /*#__PURE__*/jsxRuntime.jsx(antd.Input, _objectSpread2({
+          placeholder: field.placeholder
+        }, field.props));
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
+      name: field.name,
+      label: field.label,
+      rules: rules,
+      children: inputNode
+    }, field.name);
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(antd.Form, {
+      form: formInstance,
+      layout: "vertical",
+      initialValues: initialValues,
+      onFinish: handleSubmit,
+      children: [currentFields.map(renderField), formErrors ? renderErrors(formErrors, t) : null, isMultiStep && currentStep > 0 ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-column gap-2 mt-4",
+        style: {
+          width: '100%'
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
+          noStyle: true,
+          shouldUpdate: true,
+          children: form => {
+            const isLastStep = currentStep === (steps === null || steps === void 0 ? void 0 : steps.length) - 1;
+            const allFieldsFilled = checkRequiredFieldsFilled({}, form.getFieldsValue());
+            return /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "buttons",
+              children: /*#__PURE__*/jsxRuntime.jsx(BorderedButton, {
+                type: "primary",
+                htmlType: "submit",
+                disabled: isLastStep && !allFieldsFilled,
+                block: true,
+                className: "normal-br",
+                children: isLastStep ? submitText : t("Next")
+              })
+            });
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "buttons",
+          children: /*#__PURE__*/jsxRuntime.jsx(BorderedButton, {
+            onClick: prev,
+            block: true,
+            className: "normal-br",
+            children: t("Back")
+          })
+        })]
+      }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "buttons",
+        children: /*#__PURE__*/jsxRuntime.jsx(BorderedButton, {
+          type: "primary",
+          htmlType: "submit",
+          block: true,
+          className: "normal-br",
+          children: isMultiStep ? t("Next") : submitText
+        })
+      })]
+    })
+  });
+}
+
 var _templateObject$6;
 const Style$s = dt.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  width: 99px;\n  height: 10px;\n  border-radius: 8px;\n  background: var(--base-gray-40);\n  overflow: hidden;\n\n  .bar {\n    height: 100%;\n    background: var(--color-primary-70);\n  }\n"])));
 function ProgressBar(_ref) {
@@ -59402,6 +59583,7 @@ exports.AjaxSelect = AjaxSelectMain;
 exports.Animated = Animated;
 exports.Applications = Applications;
 exports.AreaChart = AreaChart;
+exports.AuthForm = AuthForm;
 exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
 exports.BarChart = BarChart;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.556",
+	"version": "0.6.558",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/AuthForm/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { Form, Input, Select } from "antd";
-import BorderedButton from "../Button/BorderedButton";
+import BorderedButton from "../Button/BorderedButton/index.jsx";
 
 function AuthForm ({
   steps,

package/src/index.js

@@ -87,6 +87,7 @@ export { Sections as EditFormSections } from "./@daf/core/components/EditForm/se
 export { default as ViewFormNavigation } from "./@daf/core/components/ViewForm/navigation.jsx";
 export { default as PhoneInput } from "./@daf/core/components/Inputs/PhoneInput/index.js";
 export { AjaxSelectMain as AjaxSelect } from "./@daf/core/components/EditForm/components/ajaxSelect.js";
+export { default as AuthForm } from "./@daf/core/components/AuthForm/index.jsx";
 
 // Progress Bar
 export { default as ProgressBar } from "./@daf/core/components/ProgressBar/index.jsx";