@ahmadmubarak98/namozaj 1.1.18 → 1.3.0

package/dist/main.d.ts

@@ -13,6 +13,7 @@ export declare type BaseFieldConfig = {
         style?: React.CSSProperties;
         placeholder?: string;
         tooltip?: TooltipConfig;
+        translated?: boolean;
         helperText?: HelperTextConfig;
         validations?: ValidationRule[];
         grid?: GridColumnConfig;
@@ -89,6 +90,7 @@ export declare type DynamicFormField = TextFieldConfig | NumberFieldConfig | Sli
 
 export declare interface DynamicFormProps {
     fields: DynamicFormField[];
+    localization?: NamozajLocalizationOptions;
     emptyFormMessage?: string;
     defaultValues?: Record<string, FieldValueType>;
     defaultSubmitButtonProps?: DefaultSubmitButtonProps;
@@ -228,6 +230,13 @@ export declare type ModalSize = "small" | "medium" | "large" | "full";
 
 export declare const Namozaj: default_2.ForwardRefExoticComponent<DynamicFormProps & default_2.RefAttributes<any>>;
 
+export declare interface NamozajLocalizationOptions {
+    locales: string[];
+    translatedLabelSuffix?: (label: string, locale: string) => string;
+    translatedFieldNameSuffix?: (locale: string) => string;
+    translatedFieldGrid?: (field: DynamicFormField, locale: string) => GridColumnConfig;
+}
+
 export declare type NumberFieldConfig = BaseFieldConfig & {
     type: "number";
     meta: BaseFieldConfig["meta"] & {

package/dist/namozaj.js

@@ -4,7 +4,7 @@ var Zn = (e, t, a) => tm(e, typeof t != "symbol" ? t + "" : t, a);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useState, useEffect, useMemo, createContext, useContext, createElement, useCallback, isValidElement, cloneElement, Children, useRef, forwardRef, useImperativeHandle, useReducer, Fragment as Fragment$1, Component as Component$1, memo, useLayoutEffect } from "react";
-import { Stack, Box, TextField as TextField$2, IconButton as IconButton$1, InputLabel as InputLabel$1, Autocomplete, InputAdornment as InputAdornment$1, Select as Select$1, MenuItem as MenuItem$1, Tooltip as Tooltip$1, FormControlLabel, Checkbox, FormGroup, FormControl as FormControl$1, RadioGroup, Radio, Switch, Typography as Typography$1, Avatar, Button as Button$1, Slider, Portal as Portal$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, FormHelperText as FormHelperText$1, Grid, useTheme as useTheme$3 } from "@mui/material";
+import { Stack, Box, TextField as TextField$2, IconButton as IconButton$1, InputLabel as InputLabel$1, Autocomplete, InputAdornment as InputAdornment$1, Select as Select$1, MenuItem as MenuItem$1, Tooltip as Tooltip$1, FormControlLabel, Checkbox, FormGroup, FormControl as FormControl$1, RadioGroup, Radio, Switch, Typography as Typography$1, Avatar, Button as Button$1, Slider, Portal as Portal$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, FormHelperText as FormHelperText$1, Grid } from "@mui/material";
 import emStyled from "@emotion/styled";
 import { Global, ThemeContext, keyframes, css } from "@emotion/react";
 const defaultContextValue = {
@@ -18,7 +18,7 @@ const defaultContextValue = {
   }, p = () => {
     t.fields.forEach((f) => {
       var m, y, v;
-      console.log("field", f.name), "optionsFetchFnc" in f.meta && ((m = f.meta) != null && m.optionsFetchFnc) && (!(c != null && c[f.name]) || ((y = c == null ? void 0 : c[f.name]) == null ? void 0 : y.length) === 0) && ((v = f.meta) == null || v.optionsFetchFnc().then((b) => {
+      "optionsFetchFnc" in f.meta && ((m = f.meta) != null && m.optionsFetchFnc) && (!(c != null && c[f.name]) || ((y = c == null ? void 0 : c[f.name]) == null ? void 0 : y.length) === 0) && ((v = f.meta) == null || v.optionsFetchFnc().then((b) => {
         u(f.name, b);
       }));
     });
@@ -4574,6 +4574,32 @@ const getDefaultValue = (e) => {
     default:
       return a;
   }
+}, getTranslatedFieldName = (e, t, a) => {
+  if (a)
+    return `${e.name}${a(t)}`;
+  {
+    const l = t.charAt(0).toUpperCase() + t.slice(1);
+    return `${e.name}${l}`;
+  }
+}, getTranslatedFieldLabel = (e, t, a) => {
+  if (a)
+    return a(e.meta.label, t);
+  {
+    const l = t.charAt(0).toUpperCase() + t.slice(1);
+    return `${e.meta.label} (${l})`;
+  }
+}, getTranslatedFieldGrid = (e, t, a) => {
+  var l;
+  return a ? a(e, t) : e.type === "text" && ((l = e.meta) != null && l.multiline) ? {
+    xs: 12,
+    sm: 12,
+    md: 12,
+    lg: 12,
+    xl: 12
+  } : {
+    xs: 12,
+    md: 6
+  };
 };
 function chainPropTypes(e, t) {
   return process.env.NODE_ENV === "production" ? () => null : function(...l) {
@@ -82434,35 +82460,45 @@ function o(e, t, a) {
 ModuleRegistry.registerModules([AllCommunityModule]);
 const Form = React__default.forwardRef(
   (e, t) => {
-    var h, f;
+    var h, f, m;
     const a = useMemo(
       () => createYupSchema(e.fields),
-      [e, createYupSchema]
+      [e, e.fields, (h = e.localization) == null ? void 0 : h.locales, createYupSchema]
     ), l = useForm({
       resolver: o(a),
       defaultValues: e.defaultValues ? e.defaultValues : getDefaultValues(e.fields),
       mode: e.validationMode || "onChange"
-    }), c = (m) => {
-      var y;
-      console.log(m), (y = e.onSubmit) == null || y.call(e, m);
+    });
+    useEffect(() => {
+      const y = Object.keys(l.getValues()), v = e.fields.map((w) => w.name), b = y.filter(
+        (w) => !v.includes(w)
+      );
+      if (b.length > 0) {
+        const w = { ...l.getValues() };
+        b.forEach((S) => {
+          delete w[S];
+        }), l.reset(w);
+      }
+    }, [e.fields]);
+    const c = (y) => {
+      var v;
+      (v = e.onSubmit) == null || v.call(e, y);
     }, d = async () => (await l.trigger()).valueOf();
     useEffect(() => {
-      const m = l.watch(
-        (y, { name: v, type: b }) => {
-          var w;
-          if (b === "change" && v) {
-            const S = y[v];
-            (w = e.onChange) == null || w.call(e, {
+      const y = l.watch(
+        (v, { name: b, type: w }) => {
+          var S;
+          if (w === "change" && b) {
+            const x = v[b];
+            (S = e.onChange) == null || S.call(e, {
               ...l.getValues(),
-              [v]: S
+              [b]: x
             });
           }
         }
       );
-      return () => m.unsubscribe();
-    }, [l.watch]), useEffect(() => {
-      console.log("Form State:", l.watch());
-    }, [l.watch()]), useImperativeHandle(
+      return () => y.unsubscribe();
+    }, [l.watch]), useImperativeHandle(
       t,
       () => ({
         submit: l.handleSubmit(c),
@@ -82472,38 +82508,64 @@ const Form = React__default.forwardRef(
     );
     const u = e.isNested ? "div" : "form", p = e.isNested ? {} : { onSubmit: l.handleSubmit(c) };
     return useEffect(() => {
-      e.error && Object.keys(e.error).forEach((y) => {
-        var v;
-        l.setError(y, {
+      e.error && Object.keys(e.error).forEach((v) => {
+        var b;
+        l.setError(v, {
           type: "manual",
-          message: (v = e.error[y]) == null ? void 0 : v.message
+          message: (b = e.error[v]) == null ? void 0 : b.message
         });
       });
     }, [e.error]), useEffect(() => {
     }, [l.formState.errors]), /* @__PURE__ */ jsx(FormProvider, { ...l, children: /* @__PURE__ */ jsxs(u, { ...p, children: [
-      /* @__PURE__ */ jsx(Grid, { container: !0, spacing: 2, children: (e.fields || []).map((m, y) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { container: !0, spacing: 2, children: (e.fields || []).map((y, v) => /* @__PURE__ */ jsx(
         FieldRenderer,
         {
-          ...m,
+          ...y,
           control: l.control
         },
-        y
+        y.name || v
       )) }),
-      !((h = e.defaultSubmitButtonProps) != null && h.hidden) && /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(Button$1, { variant: "contained", color: "primary", type: "submit", children: ((f = e.defaultSubmitButtonProps) == null ? void 0 : f.label) || "Submit" }) })
+      !((f = e.defaultSubmitButtonProps) != null && f.hidden) && /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(Button$1, { variant: "contained", color: "primary", type: "submit", children: ((m = e.defaultSubmitButtonProps) == null ? void 0 : m.label) || "Submit" }) })
     ] }) });
   }
 ), Namozaj = forwardRef(
   (e, t) => {
-    var l;
-    const a = useTheme$3();
-    return !a || (l = a.palette) != null && l.primary, console.log("theme primary color", a.palette.primary.main), /* @__PURE__ */ jsx(
+    const a = useMemo(() => {
+      const l = [];
+      return e.fields.forEach((c) => {
+        var p, h;
+        const d = c.meta || {};
+        if (!(d.translated || !1)) {
+          l.push(c);
+          return;
+        }
+        (h = (p = e.localization) == null ? void 0 : p.locales) == null || h.forEach((f) => {
+          var v, b, w;
+          const m = { ...c }, y = { ...d };
+          m.name = getTranslatedFieldName(
+            c,
+            f,
+            (v = e.localization) == null ? void 0 : v.translatedFieldNameSuffix
+          ), y.label = getTranslatedFieldLabel(
+            c,
+            f,
+            (b = e.localization) == null ? void 0 : b.translatedLabelSuffix
+          ), y.grid = getTranslatedFieldGrid(
+            c,
+            f,
+            (w = e.localization) == null ? void 0 : w.translatedFieldGrid
+          ), m.meta = y, l.push(m);
+        });
+      }), l;
+    }, [e.fields]);
+    return /* @__PURE__ */ jsx(
       DynamicFormLocalProvider,
       {
         value: {
           enableRtl: e.enableRtl,
-          fields: e.fields
+          fields: a
         },
-        children: /* @__PURE__ */ jsx(Form, { ref: t, ...e })
+        children: /* @__PURE__ */ jsx(Form, { ref: t, ...e, fields: a })
       }
     );
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ahmadmubarak98/namozaj",
   "private": false,
-  "version": "1.1.18",
+  "version": "1.3.0",
   "type": "module",
   "main": "dist/namozaj.js",
   "types": "dist/main.d.ts",