@kingteza/crud-component 1.0.62 → 1.0.63

package/crud/CrudComponent.d.ts

@@ -2,7 +2,7 @@ import { ColorPickerProps } from 'antd';
 import { Rule } from 'antd/es/form';
 import { FormInstance } from 'antd/lib';
 import { Dayjs } from 'dayjs';
-import { default as React, ReactElement } from 'react';
+import { default as React, ReactElement, ReactNode } from 'react';
 import { CrudSearchComponentProps } from './CrudSearchComponent';
 import { FileCrudField } from './FileCrudField';
 import { ImageCrudField } from './ImageCrudField';
@@ -60,7 +60,7 @@ export type CrudFieldGrid = {
     xl?: number;
     xxl?: number;
 };
-export interface SelectCrudField<T, ItemType extends SelectFieldItem = SelectFieldItem> extends Omit<InitialCrudField<T>, "name"> {
+export interface SelectCrudField<T, ItemType extends SelectFieldItem = SelectFieldItem> extends Omit<InitialCrudField<T>, "name">, AddonFieldProps {
     name: InitialCrudField<T>["name"] | {
         name: keyof T | (string | number)[];
         upsertFieldName: keyof T | (string | number)[];
@@ -118,12 +118,16 @@ export interface EnumCrudField<T> extends InitialCrudField<T> {
     onChange?: (value: T[keyof T], form: FormInstance<T>) => void;
     onSearch?: (keyword: string, form: FormInstance<T>) => void;
 }
+export type AddonFieldProps = {
+    addonAfter?: ReactNode;
+    addonBefore?: ReactNode;
+};
 export interface ObjectCrudField<T> extends InitialCrudField<T> {
     type: "object";
     render: (value: any, obj: T, index: number) => any;
     translation?: object;
 }
-export interface TextBasedFieldProps<T> extends InitialCrudField<T> {
+export interface TextBasedFieldProps<T> extends InitialCrudField<T>, AddonFieldProps {
     placeholder?: string;
     type: "text" | "time" | "email" | "password";
     onChange?: (value: string, form: FormInstance<T>) => void;
@@ -136,10 +140,12 @@ export interface CheckboxBasedFieldProps<T> extends InitialCrudField<T> {
     type: "checkbox";
     onChange?: (value: boolean, form: FormInstance<T>) => void;
 }
-export interface NumberBasedFieldProps<T> extends InitialCrudField<T> {
+export interface NumberBasedFieldProps<T> extends InitialCrudField<T>, AddonFieldProps {
     type: "number";
     placeholder?: string;
     allowMinus?: boolean;
+    min?: number;
+    max?: number;
     /**
      * If it is number field making this true will convert the value to comma separated number field
      */
@@ -188,6 +194,7 @@ export type FormBuilderFunc0<T> = (name: keyof T, options?: GetFormFieldOptions)
 export type FormBuilderFunc<T> = (i: FormBuilderFunc0<T>, otherUtils: {
     isAnyFieldHidden: (...name: Array<keyof T>) => boolean;
     isAllFieldsHidden: (...name: Array<keyof T>) => boolean;
+    purpose?: CrudPurpose;
 }) => ReactElement;
 export type CrudFieldProps<T> = SelectCrudField<T> | TextBasedFieldProps<T> | TextAreaBasedFieldProps<T> | ImageCrudField<T> | EnumCrudField<T> | DateBasedFieldProps<T> | TimeBasedFieldProps<T> | ObjectCrudField<T> | NumberBasedFieldProps<T> | CheckboxBasedFieldProps<T> | ColorPickerFieldProps<T> | FileCrudField<T>;
 export type CrudPaginateProps = false | {

package/crud/CrudField.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),p=require("antd"),T=require("react"),$=require("react-highlight-words"),z=require("../locale/index.cjs.js"),J=require("./FileCrudField.cjs.js"),K=require("./ImageCrudField.cjs.js"),Q=require("../common/check-box/CheckBox.cjs.js"),X=require("../common/date-picker/DatePicker.cjs.js"),Y=require("../common/date-picker/TimePicker.cjs.js"),E=require("../common/select/SelectComponent.cjs.js"),Z=require("../common/text-field/NumberField.cjs.js"),V=require("../common/text-field/TextField.cjs.js"),ee=require("../common/tooltip/TooltipComponent.cjs.js"),te=require("./CrudTextAreaComponent.cjs.js"),B=require("../util/CrudUtil.cjs.js");function re(j){const{label:s,name:c,type:g,required:i,hidden:S,rules:u=[],updatable:m=!0,readonly:w=!1,fieldClassName:f,customFormFieldRender:O,fieldTooltip:b,...t}=j,h=p.Form.useFormInstance();T.useEffect(()=>{if(g==="select"){const{items:n=[],onSearch:o,searchOnType:l}=t;!(n!=null&&n.length)&&!l&&(o==null||o(void 0,h,t==null?void 0:t.updatingValue))}},[h,t,g,t==null?void 0:t.updatingValue]);const{t:q}=z.useTranslationLibNoNS();if(w||S)return e.jsx(e.Fragment,{});if(O)return O(h,j);switch(g){case"text":case"email":case"password":{const{onChange:n,placeholder:o}=t;return e.jsx(V.default,{placeholder:o,disabled:!m,rules:u,required:i,onChange:n?l=>n(l,h):void 0,type:g,name:c,tooltip:b,label:s,className:f,autoComplete:"new-password"})}case"number":{const{onChange:n,placeholder:o,allowMinus:l}=t;return e.jsx(Z,{placeholder:o,disabled:!m,moneyField:!!t.formatted,type:g,onChange:n?x=>n(x,h):void 0,rules:u,autoComplete:"false",required:i,tooltip:b,className:f,min:l?null:void 0,name:c,label:s})}case"date":{const{range:n,disableToday:o,disabledFutureDays:l,disabledPastDays:x,onChange:v,placeholder:C,format:F}=t;return e.jsx(X,{placeholder:C,required:i,disabled:!m,type:g,format:F,tooltip:b,range:n,name:c,label:s,onChange:v?y=>v(y,h):void 0,className:f,disableToday:o,disabledFutureDays:l,disabledPastDays:x})}case"time":{const{range:n=!1,disableCurrent:o,disabledFuture:l,disabledPast:x,onChange:v,use12Hours:C,format:F,placeholder:y}=t;return e.jsx(Y,{placeholder:y,required:i,format:F,disabled:!m,type:g,tooltip:b,range:n,use12Hours:C,name:c,label:s,onChange:v?a=>v(a,h):void 0,className:f,disableCurrent:o,disabledFuture:l,disabledPast:x})}case"textarea":return e.jsx(te,{...j});case"image":return e.jsx(K.default,{...t,required:i,name:c,label:s,rules:u,fieldClassName:f,onRemoved:t.onRemoved,onUploading:t.onUploading,provider:t.provider});case"file":return e.jsx(J.default,{...t,required:i,name:c,label:s,rules:u,fieldClassName:f,onRemoved:t.onRemoved,onUploading:t.onUploading,provider:t.provider});case"select":return e.jsx(H,{...t,required:i,name:c,label:s,rules:u,fieldClassName:f,form:h,updatable:m,readonly:w,fieldTooltip:b});case"enum":{const{enum:n,radio:o=!1,translation:l,onChange:x,onSearch:v,multiple:C,tagRender:F}=t,y=Array.isArray(n)?n:Object.keys(n);return o?e.jsx(p.Form.Item,{...t,name:c,required:i,tooltip:b,rules:u,label:s,className:["w-100",f].join(" "),children:e.jsx(p.Radio.Group,{...t,onChange:x?a=>{var R;return x((R=a==null?void 0:a.target)==null?void 0:R.value,h)}:void 0,children:y.map(a=>e.jsx(p.Radio,{disabled:!m,value:a,children:l?q(l[a]):a},a))})}):e.jsx(E,{...t,tagRender:typeof F=="function"?F:F?a=>{const{value:R,label:N}=a,k=F[R];return k?e.jsx(p.Tag,{color:k.color,children:N}):e.jsx(p.Tag,{children:N})}:void 0,onChange:x?a=>x(a,h):void 0,className:["w-100",f].join(" "),name:c,items:y,required:i,tooltip:b,rules:u,label:s,disabled:!m,onSearch:v?a=>v(a,h):void 0,allowClear:!0,mode:C?"multiple":void 0,itemBuilder:a=>e.jsx(p.Select.Option,{value:a,children:l?q(l[a]):a},a)})}case"checkbox":{const{onChange:n}=t;return e.jsx(Q,{className:f,rules:u,onChange:n?o=>n(o,h):void 0,label:s,tooltip:b,disabled:!m,name:c})}case"color":return e.jsx(D,{...t,type:"color",required:i,name:c,label:s,rules:u,fieldClassName:f,updatable:m,readonly:w,fieldTooltip:b});default:return e.jsx(e.Fragment,{children:`${g} Not Implemented`})}}function H(j){const{items:s=[],loading:c,searchOnType:g,onSearch:i,multiple:S,onChange:u,highlightSearch:m,required:w,fieldClassName:f,rules:O,fieldTooltip:b,updatable:t,label:h,name:q,tagRender:n,updatingValue:o,onSet:l,placeholder:x,allowClear:v=!0}=j,C=j.form,[F,y]=T.useState(""),a=T.useMemo(()=>B.getRealName(q),[q]),R=T.useMemo(()=>B.getRealName(q,"upsertFieldName"),[q]),N=p.Form.useWatch(a,C),[k,P]=T.useState(!0);T.useEffect(()=>{l&&k&&N&&(l==null||l(N,s,C),P(!1))},[k,C,s,a,l,N]),T.useEffect(()=>{N&&P(!0)},[N]);const _=T.useCallback(async r=>{y(r),g&&(i==null||i(r,C,o))},[C,i,g,o]);return e.jsx(E,{...j,maxTagCount:"responsive",maxTagPlaceholder:r=>e.jsxs(ee,{title:e.jsx(e.Fragment,{children:r.map(d=>e.jsxs(e.Fragment,{children:[d.label," ",e.jsx("br",{})]}))}),children:["+",r==null?void 0:r.length]}),placeholder:x,onSelect:r=>{l==null||l(r==null?void 0:r.key,s,C)},onChange:u?r=>{y(""),u(r,C)}:void 0,mode:S?"multiple":void 0,className:["w-100",f].join(" "),name:R,items:s,required:w,tooltip:b,tagRender:n,rules:O,disabled:!t,label:h,allowClear:v,onSearch:_,loading:c,filterOption:m?(r,d)=>{var I,L,M;try{const U=r.toLowerCase().split(/\s+/),W=((typeof(d==null?void 0:d.children)=="string"?d==null?void 0:d.children:(L=(I=d==null?void 0:d.children)==null?void 0:I.props)==null?void 0:L.textToHighlight)??"").toLowerCase(),G=(((M=d==null?void 0:d.value)==null?void 0:M.toString())??"").toLowerCase();return U.every(A=>W.indexOf(A)>=0||G.indexOf(A)>=0)}catch{return!0}}:void 0,itemBuilder:m?r=>{const d=r.value?String(r.value):void 0;return e.jsx(p.Select.Option,{value:r.key,title:d,disabled:r.disabled,children:e.jsx($,{highlightClassName:"highlight-text",searchWords:(F??"").split(" "),autoEscape:!0,textToHighlight:d??""})},r.key)}:r=>e.jsx(p.Select.Option,{value:r.key,title:r.value,disabled:r.disabled,children:r.value},r.key)})}function D(j){const{required:s,fieldClassName:c,rules:g,fieldTooltip:i,updatable:S,label:u,name:m}=j;return e.jsx(p.Form.Item,{label:u,name:m,required:s,rules:g,tooltip:i,children:e.jsx(p.ColorPicker,{disabledAlpha:!0,format:"hex",defaultFormat:"hex",showText:!0,trigger:"click",className:c,disabled:!S,...j.innerProps})})}exports.ColorCrudFieldComponent=D;exports.SelectCrudFieldComponent=H;exports.default=re;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),j=require("antd"),T=require("react"),$=require("react-highlight-words"),z=require("../locale/index.cjs.js"),J=require("./FileCrudField.cjs.js"),K=require("./ImageCrudField.cjs.js"),Q=require("../common/check-box/CheckBox.cjs.js"),X=require("../common/date-picker/DatePicker.cjs.js"),Y=require("../common/date-picker/TimePicker.cjs.js"),E=require("../common/select/SelectComponent.cjs.js"),Z=require("../common/text-field/NumberField.cjs.js"),V=require("../common/text-field/TextField.cjs.js"),ee=require("../common/tooltip/TooltipComponent.cjs.js"),te=require("./CrudTextAreaComponent.cjs.js"),U=require("../util/CrudUtil.cjs.js");function re(y){const{label:s,name:c,type:C,required:i,hidden:S,rules:m=[],updatable:h=!0,readonly:w=!1,fieldClassName:p,customFormFieldRender:O,fieldTooltip:v,...t}=y,g=j.Form.useFormInstance();T.useEffect(()=>{if(C==="select"){const{items:n=[],onSearch:o,searchOnType:l}=t;!(n!=null&&n.length)&&!l&&(o==null||o(void 0,g,t==null?void 0:t.updatingValue))}},[g,t,C,t==null?void 0:t.updatingValue]);const{t:q}=z.useTranslationLibNoNS();if(w||S)return e.jsx(e.Fragment,{});if(O)return O(g,y);switch(C){case"text":case"email":case"password":{const{onChange:n,placeholder:o,addonAfter:l,addonBefore:f}=t;return e.jsx(V.default,{placeholder:o,disabled:!h,rules:m,required:i,onChange:n?x=>n(x,g):void 0,type:C,name:c,tooltip:v,label:s,className:p,autoComplete:"new-password",addonAfter:l,addonBefore:f})}case"number":{const{onChange:n,placeholder:o,allowMinus:l,min:f,max:x,addonAfter:u,addonBefore:b}=t;return e.jsx(Z,{placeholder:o,disabled:!h,moneyField:!!t.formatted,type:C,onChange:n?F=>n(F,g):void 0,rules:m,autoComplete:"false",required:i,tooltip:v,className:p,min:l?null:f,max:x,addonAfter:u,addonBefore:b,name:c,label:s})}case"date":{const{range:n,disableToday:o,disabledFutureDays:l,disabledPastDays:f,onChange:x,placeholder:u,format:b}=t;return e.jsx(X,{placeholder:u,required:i,disabled:!h,type:C,format:b,tooltip:v,range:n,name:c,label:s,onChange:x?F=>x(F,g):void 0,className:p,disableToday:o,disabledFutureDays:l,disabledPastDays:f})}case"time":{const{range:n=!1,disableCurrent:o,disabledFuture:l,disabledPast:f,onChange:x,use12Hours:u,format:b,placeholder:F}=t;return e.jsx(Y,{placeholder:F,required:i,format:b,disabled:!h,type:C,tooltip:v,range:n,use12Hours:u,name:c,label:s,onChange:x?a=>x(a,g):void 0,className:p,disableCurrent:o,disabledFuture:l,disabledPast:f})}case"textarea":return e.jsx(te,{...y});case"image":return e.jsx(K.default,{...t,required:i,name:c,label:s,rules:m,fieldClassName:p,onRemoved:t.onRemoved,onUploading:t.onUploading,provider:t.provider});case"file":return e.jsx(J.default,{...t,required:i,name:c,label:s,rules:m,fieldClassName:p,onRemoved:t.onRemoved,onUploading:t.onUploading,provider:t.provider});case"select":return e.jsx(H,{...t,required:i,name:c,label:s,rules:m,fieldClassName:p,form:g,updatable:h,readonly:w,fieldTooltip:v});case"enum":{const{enum:n,radio:o=!1,translation:l,onChange:f,onSearch:x,multiple:u,tagRender:b}=t,F=Array.isArray(n)?n:Object.keys(n);return o?e.jsx(j.Form.Item,{...t,name:c,required:i,tooltip:v,rules:m,label:s,className:["w-100",p].join(" "),children:e.jsx(j.Radio.Group,{...t,onChange:f?a=>{var R;return f((R=a==null?void 0:a.target)==null?void 0:R.value,g)}:void 0,children:F.map(a=>e.jsx(j.Radio,{disabled:!h,value:a,children:l?q(l[a]):a},a))})}):e.jsx(E,{...t,tagRender:typeof b=="function"?b:b?a=>{const{value:R,label:N}=a,k=b[R];return k?e.jsx(j.Tag,{color:k.color,children:N}):e.jsx(j.Tag,{children:N})}:void 0,onChange:f?a=>f(a,g):void 0,className:["w-100",p].join(" "),name:c,items:F,required:i,tooltip:v,rules:m,label:s,disabled:!h,onSearch:x?a=>x(a,g):void 0,allowClear:!0,mode:u?"multiple":void 0,itemBuilder:a=>e.jsx(j.Select.Option,{value:a,children:l?q(l[a]):a},a)})}case"checkbox":{const{onChange:n}=t;return e.jsx(Q,{className:p,rules:m,onChange:n?o=>n(o,g):void 0,label:s,tooltip:v,disabled:!h,name:c})}case"color":return e.jsx(D,{...t,type:"color",required:i,name:c,label:s,rules:m,fieldClassName:p,updatable:h,readonly:w,fieldTooltip:v});default:return e.jsx(e.Fragment,{children:`${C} Not Implemented`})}}function H(y){const{items:s=[],loading:c,searchOnType:C,onSearch:i,multiple:S,onChange:m,highlightSearch:h,required:w,fieldClassName:p,rules:O,fieldTooltip:v,updatable:t,label:g,name:q,tagRender:n,updatingValue:o,onSet:l,placeholder:f,allowClear:x=!0}=y,u=y.form,[b,F]=T.useState(""),a=T.useMemo(()=>U.getRealName(q),[q]),R=T.useMemo(()=>U.getRealName(q,"upsertFieldName"),[q]),N=j.Form.useWatch(a,u),[k,P]=T.useState(!0);T.useEffect(()=>{l&&k&&N&&(l==null||l(N,s,u),P(!1))},[k,u,s,a,l,N]),T.useEffect(()=>{N&&P(!0)},[N]);const _=T.useCallback(async r=>{F(r),C&&(i==null||i(r,u,o))},[u,i,C,o]);return e.jsx(E,{...y,maxTagCount:"responsive",maxTagPlaceholder:r=>e.jsxs(ee,{title:e.jsx(e.Fragment,{children:r.map(d=>e.jsxs(e.Fragment,{children:[d.label," ",e.jsx("br",{})]}))}),children:["+",r==null?void 0:r.length]}),placeholder:f,onSelect:r=>{l==null||l(r==null?void 0:r.key,s,u)},onChange:m?r=>{F(""),m(r,u)}:void 0,mode:S?"multiple":void 0,className:["w-100",p].join(" "),name:R,items:s,required:w,tooltip:v,tagRender:n,rules:O,disabled:!t,label:g,allowClear:x,onSearch:_,loading:c,filterOption:h?(r,d)=>{var A,B,I;try{const L=r.toLowerCase().split(/\s+/),W=((typeof(d==null?void 0:d.children)=="string"?d==null?void 0:d.children:(B=(A=d==null?void 0:d.children)==null?void 0:A.props)==null?void 0:B.textToHighlight)??"").toLowerCase(),G=(((I=d==null?void 0:d.value)==null?void 0:I.toString())??"").toLowerCase();return L.every(M=>W.indexOf(M)>=0||G.indexOf(M)>=0)}catch{return!0}}:void 0,itemBuilder:h?r=>{const d=r.value?String(r.value):void 0;return e.jsx(j.Select.Option,{value:r.key,title:d,disabled:r.disabled,children:e.jsx($,{highlightClassName:"highlight-text",searchWords:(b??"").split(" "),autoEscape:!0,textToHighlight:d??""})},r.key)}:r=>e.jsx(j.Select.Option,{value:r.key,title:r.value,disabled:r.disabled,children:r.value},r.key)})}function D(y){const{required:s,fieldClassName:c,rules:C,fieldTooltip:i,updatable:S,label:m,name:h}=y;return e.jsx(j.Form.Item,{label:m,name:h,required:s,rules:C,tooltip:i,children:e.jsx(j.ColorPicker,{disabledAlpha:!0,format:"hex",defaultFormat:"hex",showText:!0,trigger:"click",className:c,disabled:!S,...y.innerProps})})}exports.ColorCrudFieldComponent=D;exports.SelectCrudFieldComponent=H;exports.default=re;

package/crud/CrudField.es.js

@@ -1,6 +1,6 @@
 import { jsx as t, Fragment as S, jsxs as E } from "react/jsx-runtime";
-import { Form as j, Radio as M, Select as I, Tag as W, ColorPicker as X } from "antd";
-import { useEffect as L, useState as G, useMemo as _, useCallback as Y } from "react";
+import { Form as j, Radio as M, Select as A, Tag as W, ColorPicker as X } from "antd";
+import { useEffect as B, useState as G, useMemo as _, useCallback as Y } from "react";
 import Z from "react-highlight-words";
 import { useTranslationLibNoNS as V } from "../locale/index.es.js";
 import ee from "./FileCrudField.es.js";
@@ -14,74 +14,79 @@ import ne from "../common/text-field/TextField.es.js";
 import ie from "../common/tooltip/TooltipComponent.es.js";
 import de from "./CrudTextAreaComponent.es.js";
 import $ from "../util/CrudUtil.es.js";
-function Re(v) {
+function Re(N) {
   const {
     label: n,
-    name: c,
-    type: p,
+    name: m,
+    type: C,
     required: d,
     hidden: k,
-    rules: m = [],
-    updatable: u = !0,
+    rules: u = [],
+    updatable: h = !0,
     readonly: R = !1,
-    fieldClassName: f,
+    fieldClassName: b,
     customFormFieldRender: P,
-    fieldTooltip: b,
+    fieldTooltip: y,
     ...e
-  } = v, h = j.useFormInstance();
-  L(() => {
-    if (p === "select") {
+  } = N, f = j.useFormInstance();
+  B(() => {
+    if (C === "select") {
       const {
         items: l = [],
         onSearch: i,
         searchOnType: o
       } = e;
-      !(l != null && l.length) && !o && (i == null || i(void 0, h, e == null ? void 0 : e.updatingValue));
+      !(l != null && l.length) && !o && (i == null || i(void 0, f, e == null ? void 0 : e.updatingValue));
     }
-  }, [h, e, p, e == null ? void 0 : e.updatingValue]);
+  }, [f, e, C, e == null ? void 0 : e.updatingValue]);
   const { t: T } = V();
   if (R || k) return /* @__PURE__ */ t(S, {});
   if (P)
-    return P(h, v);
-  switch (p) {
+    return P(f, N);
+  switch (C) {
     case "text":
     case "email":
     case "password": {
-      const { onChange: l, placeholder: i } = e;
+      const { onChange: l, placeholder: i, addonAfter: o, addonBefore: p } = e;
       return /* @__PURE__ */ t(
         ne,
         {
           placeholder: i,
-          disabled: !u,
-          rules: m,
+          disabled: !h,
+          rules: u,
           required: d,
-          onChange: l ? (o) => l(o, h) : void 0,
-          type: p,
-          name: c,
-          tooltip: b,
+          onChange: l ? (g) => l(g, f) : void 0,
+          type: C,
+          name: m,
+          tooltip: y,
           label: n,
-          className: f,
-          autoComplete: "new-password"
+          className: b,
+          autoComplete: "new-password",
+          addonAfter: o,
+          addonBefore: p
         }
       );
     }
     case "number": {
-      const { onChange: l, placeholder: i, allowMinus: o } = e;
+      const { onChange: l, placeholder: i, allowMinus: o, min: p, max: g, addonAfter: c, addonBefore: v } = e;
       return /* @__PURE__ */ t(
         le,
         {
           placeholder: i,
-          disabled: !u,
+          disabled: !h,
           moneyField: !!e.formatted,
-          type: p,
-          onChange: l ? (C) => l(C, h) : void 0,
-          rules: m,
+          type: C,
+          onChange: l ? (x) => l(x, f) : void 0,
+          rules: u,
           autoComplete: "false",
           required: d,
-          tooltip: b,
-          className: f,
-          min: o ? null : void 0,
-          name: c,
+          tooltip: y,
+          className: b,
+          min: o ? null : p,
+          max: g,
+          addonAfter: c,
+          addonBefore: v,
+          name: m,
           label: n
         }
       );
@@ -91,28 +96,28 @@ function Re(v) {
         range: l,
         disableToday: i,
         disabledFutureDays: o,
-        disabledPastDays: C,
-        onChange: y,
-        placeholder: g,
-        format: N
+        disabledPastDays: p,
+        onChange: g,
+        placeholder: c,
+        format: v
       } = e;
       return /* @__PURE__ */ t(
         ae,
         {
-          placeholder: g,
+          placeholder: c,
           required: d,
-          disabled: !u,
-          type: p,
-          format: N,
-          tooltip: b,
+          disabled: !h,
+          type: C,
+          format: v,
+          tooltip: y,
           range: l,
-          name: c,
+          name: m,
           label: n,
-          onChange: y ? (x) => y(x, h) : void 0,
-          className: f,
+          onChange: g ? (x) => g(x, f) : void 0,
+          className: b,
           disableToday: i,
           disabledFutureDays: o,
-          disabledPastDays: C
+          disabledPastDays: p
         }
       );
     }
@@ -121,10 +126,10 @@ function Re(v) {
         range: l = !1,
         disableCurrent: i,
         disabledFuture: o,
-        disabledPast: C,
-        onChange: y,
-        use12Hours: g,
-        format: N,
+        disabledPast: p,
+        onChange: g,
+        use12Hours: c,
+        format: v,
         placeholder: x
       } = e;
       return /* @__PURE__ */ t(
@@ -132,34 +137,34 @@ function Re(v) {
         {
           placeholder: x,
           required: d,
-          format: N,
-          disabled: !u,
-          type: p,
-          tooltip: b,
+          format: v,
+          disabled: !h,
+          type: C,
+          tooltip: y,
           range: l,
-          use12Hours: g,
-          name: c,
+          use12Hours: c,
+          name: m,
           label: n,
-          onChange: y ? (a) => y(a, h) : void 0,
-          className: f,
+          onChange: g ? (a) => g(a, f) : void 0,
+          className: b,
           disableCurrent: i,
           disabledFuture: o,
-          disabledPast: C
+          disabledPast: p
         }
       );
     }
     case "textarea":
-      return /* @__PURE__ */ t(de, { ...v });
+      return /* @__PURE__ */ t(de, { ...N });
     case "image":
       return /* @__PURE__ */ t(
         re,
         {
           ...e,
           required: d,
-          name: c,
+          name: m,
           label: n,
-          rules: m,
-          fieldClassName: f,
+          rules: u,
+          fieldClassName: b,
           onRemoved: e.onRemoved,
           onUploading: e.onUploading,
           provider: e.provider
@@ -171,10 +176,10 @@ function Re(v) {
         {
           ...e,
           required: d,
-          name: c,
+          name: m,
           label: n,
-          rules: m,
-          fieldClassName: f,
+          rules: u,
+          fieldClassName: b,
           onRemoved: e.onRemoved,
           onUploading: e.onUploading,
           provider: e.provider
@@ -186,14 +191,14 @@ function Re(v) {
         {
           ...e,
           required: d,
-          name: c,
+          name: m,
           label: n,
-          rules: m,
-          fieldClassName: f,
-          form: h,
-          updatable: u,
+          rules: u,
+          fieldClassName: b,
+          form: f,
+          updatable: h,
           readonly: R,
-          fieldTooltip: b
+          fieldTooltip: y
         }
       );
     case "enum": {
@@ -201,30 +206,30 @@ function Re(v) {
         enum: l,
         radio: i = !1,
         translation: o,
-        onChange: C,
-        onSearch: y,
-        multiple: g,
-        tagRender: N
+        onChange: p,
+        onSearch: g,
+        multiple: c,
+        tagRender: v
       } = e, x = Array.isArray(l) ? l : Object.keys(l);
       return i ? /* @__PURE__ */ t(
         j.Item,
         {
           ...e,
-          name: c,
+          name: m,
           required: d,
-          tooltip: b,
-          rules: m,
+          tooltip: y,
+          rules: u,
           label: n,
-          className: ["w-100", f].join(" "),
+          className: ["w-100", b].join(" "),
           children: /* @__PURE__ */ t(
             M.Group,
             {
               ...e,
-              onChange: C ? (a) => {
+              onChange: p ? (a) => {
                 var w;
-                return C((w = a == null ? void 0 : a.target) == null ? void 0 : w.value, h);
+                return p((w = a == null ? void 0 : a.target) == null ? void 0 : w.value, f);
               } : void 0,
-              children: x.map((a) => /* @__PURE__ */ t(M, { disabled: !u, value: a, children: o ? T(o[a]) : a }, a))
+              children: x.map((a) => /* @__PURE__ */ t(M, { disabled: !h, value: a, children: o ? T(o[a]) : a }, a))
             }
           )
         }
@@ -232,23 +237,23 @@ function Re(v) {
         z,
         {
           ...e,
-          tagRender: typeof N == "function" ? N : N ? (a) => {
-            const { value: w, label: F } = a, O = N[w];
+          tagRender: typeof v == "function" ? v : v ? (a) => {
+            const { value: w, label: F } = a, O = v[w];
             return O ? /* @__PURE__ */ t(W, { color: O.color, children: F }) : /* @__PURE__ */ t(W, { children: F });
           } : void 0,
-          onChange: C ? (a) => C(a, h) : void 0,
-          className: ["w-100", f].join(" "),
-          name: c,
+          onChange: p ? (a) => p(a, f) : void 0,
+          className: ["w-100", b].join(" "),
+          name: m,
           items: x,
           required: d,
-          tooltip: b,
-          rules: m,
+          tooltip: y,
+          rules: u,
           label: n,
-          disabled: !u,
-          onSearch: y ? (a) => y(a, h) : void 0,
+          disabled: !h,
+          onSearch: g ? (a) => g(a, f) : void 0,
           allowClear: !0,
-          mode: g ? "multiple" : void 0,
-          itemBuilder: (a) => /* @__PURE__ */ t(I.Option, { value: a, children: o ? T(o[a]) : a }, a)
+          mode: c ? "multiple" : void 0,
+          itemBuilder: (a) => /* @__PURE__ */ t(A.Option, { value: a, children: o ? T(o[a]) : a }, a)
         }
       );
     }
@@ -257,73 +262,73 @@ function Re(v) {
       return /* @__PURE__ */ t(
         te,
         {
-          className: f,
-          rules: m,
-          onChange: l ? (i) => l(i, h) : void 0,
+          className: b,
+          rules: u,
+          onChange: l ? (i) => l(i, f) : void 0,
           label: n,
-          tooltip: b,
-          disabled: !u,
-          name: c
+          tooltip: y,
+          disabled: !h,
+          name: m
         }
       );
     }
     case "color":
       return /* @__PURE__ */ t(
-        ce,
+        me,
         {
           ...e,
           type: "color",
           required: d,
-          name: c,
+          name: m,
           label: n,
-          rules: m,
-          fieldClassName: f,
-          updatable: u,
+          rules: u,
+          fieldClassName: b,
+          updatable: h,
           readonly: R,
-          fieldTooltip: b
+          fieldTooltip: y
         }
       );
     default:
-      return /* @__PURE__ */ t(S, { children: `${p} Not Implemented` });
+      return /* @__PURE__ */ t(S, { children: `${C} Not Implemented` });
   }
 }
-function se(v) {
+function se(N) {
   const {
     items: n = [],
-    loading: c,
-    searchOnType: p,
+    loading: m,
+    searchOnType: C,
     onSearch: d,
     multiple: k,
-    onChange: m,
-    highlightSearch: u,
+    onChange: u,
+    highlightSearch: h,
     required: R,
-    fieldClassName: f,
+    fieldClassName: b,
     rules: P,
-    fieldTooltip: b,
+    fieldTooltip: y,
     updatable: e,
-    label: h,
+    label: f,
     name: T,
     tagRender: l,
     updatingValue: i,
     onSet: o,
-    placeholder: C,
-    allowClear: y = !0
-  } = v, g = v.form, [N, x] = G(""), a = _(() => $.getRealName(T), [T]), w = _(() => $.getRealName(T, "upsertFieldName"), [T]), F = j.useWatch(a, g), [O, U] = G(!0);
-  L(() => {
-    o && O && F && (o == null || o(F, n, g), U(!1));
-  }, [O, g, n, a, o, F]), L(() => {
-    F && U(!0);
+    placeholder: p,
+    allowClear: g = !0
+  } = N, c = N.form, [v, x] = G(""), a = _(() => $.getRealName(T), [T]), w = _(() => $.getRealName(T, "upsertFieldName"), [T]), F = j.useWatch(a, c), [O, I] = G(!0);
+  B(() => {
+    o && O && F && (o == null || o(F, n, c), I(!1));
+  }, [O, c, n, a, o, F]), B(() => {
+    F && I(!0);
   }, [F]);
   const J = Y(
     async (r) => {
-      x(r), p && (d == null || d(r, g, i));
+      x(r), C && (d == null || d(r, c, i));
     },
-    [g, d, p, i]
+    [c, d, C, i]
   );
   return /* @__PURE__ */ t(
     z,
     {
-      ...v,
+      ...N,
       maxTagCount: "responsive",
       maxTagPlaceholder: (r) => /* @__PURE__ */ E(
         ie,
@@ -339,30 +344,30 @@ function se(v) {
           ]
         }
       ),
-      placeholder: C,
+      placeholder: p,
       onSelect: (r) => {
-        o == null || o(r == null ? void 0 : r.key, n, g);
+        o == null || o(r == null ? void 0 : r.key, n, c);
       },
-      onChange: m ? (r) => {
-        x(""), m(r, g);
+      onChange: u ? (r) => {
+        x(""), u(r, c);
       } : void 0,
       mode: k ? "multiple" : void 0,
-      className: ["w-100", f].join(" "),
+      className: ["w-100", b].join(" "),
       name: w,
       items: n,
       required: R,
-      tooltip: b,
+      tooltip: y,
       tagRender: l,
       rules: P,
       disabled: !e,
-      label: h,
-      allowClear: y,
+      label: f,
+      allowClear: g,
       onSearch: J,
-      loading: c,
-      filterOption: u ? (r, s) => {
-        var A, B, H;
+      loading: m,
+      filterOption: h ? (r, s) => {
+        var L, U, H;
         try {
-          const q = r.toLowerCase().split(/\s+/), K = ((typeof (s == null ? void 0 : s.children) == "string" ? s == null ? void 0 : s.children : (B = (A = s == null ? void 0 : s.children) == null ? void 0 : A.props) == null ? void 0 : B.textToHighlight) ?? "").toLowerCase(), Q = (((H = s == null ? void 0 : s.value) == null ? void 0 : H.toString()) ?? "").toLowerCase();
+          const q = r.toLowerCase().split(/\s+/), K = ((typeof (s == null ? void 0 : s.children) == "string" ? s == null ? void 0 : s.children : (U = (L = s == null ? void 0 : s.children) == null ? void 0 : L.props) == null ? void 0 : U.textToHighlight) ?? "").toLowerCase(), Q = (((H = s == null ? void 0 : s.value) == null ? void 0 : H.toString()) ?? "").toLowerCase();
           return q.every(
             (D) => K.indexOf(D) >= 0 || Q.indexOf(D) >= 0
           );
@@ -370,10 +375,10 @@ function se(v) {
           return !0;
         }
       } : void 0,
-      itemBuilder: u ? (r) => {
+      itemBuilder: h ? (r) => {
         const s = r.value ? String(r.value) : void 0;
         return /* @__PURE__ */ t(
-          I.Option,
+          A.Option,
           {
             value: r.key,
             title: s,
@@ -382,7 +387,7 @@ function se(v) {
               Z,
               {
                 highlightClassName: "highlight-text",
-                searchWords: (N ?? "").split(" "),
+                searchWords: (v ?? "").split(" "),
                 autoEscape: !0,
                 textToHighlight: s ?? ""
               }
@@ -391,7 +396,7 @@ function se(v) {
           r.key
         );
       } : (r) => /* @__PURE__ */ t(
-        I.Option,
+        A.Option,
         {
           value: r.key,
           title: r.value,
@@ -403,23 +408,23 @@ function se(v) {
     }
   );
 }
-function ce(v) {
+function me(N) {
   const {
     required: n,
-    fieldClassName: c,
-    rules: p,
+    fieldClassName: m,
+    rules: C,
     fieldTooltip: d,
     updatable: k,
-    label: m,
-    name: u
-  } = v;
+    label: u,
+    name: h
+  } = N;
   return /* @__PURE__ */ t(
     j.Item,
     {
-      label: m,
-      name: u,
+      label: u,
+      name: h,
       required: n,
-      rules: p,
+      rules: C,
       tooltip: d,
       children: /* @__PURE__ */ t(
         X,
@@ -429,16 +434,16 @@ function ce(v) {
           defaultFormat: "hex",
           showText: !0,
           trigger: "click",
-          className: c,
+          className: m,
           disabled: !k,
-          ...v.innerProps
+          ...N.innerProps
         }
       )
     }
   );
 }
 export {
-  ce as ColorCrudFieldComponent,
+  me as ColorCrudFieldComponent,
   se as SelectCrudFieldComponent,
   Re as default
 };

package/crud/CrudForm.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),c=require("antd"),p=require("./CrudField.cjs.js"),b=require("../util/CrudUtil.cjs.js");function v({form:i,purpose:y="new",...m}){return e.jsx(c.Form,{form:i,layout:"vertical",children:e.jsx(x,{...m,purpose:y})})}function x({fields:i,formBuilder:y,grid:m,onDeleteFile:d,onUploadFile:u,purpose:o}){const j=s.useMemo(()=>i.filter(t=>!t.readonly).map(t=>{const a={onUploading:t.type==="image"||t.type==="file"?r=>{var n;t.onUploading&&((n=t.onUploading)==null||n.call(t,r)),u==null||u(r)}:void 0,onDelete:t.type==="image"||t.type==="file"?r=>{var n;t.onUploading&&((n=t.onDelete)==null||n.call(t,r)),d==null||d(r)}:void 0};return e.jsx(s.Fragment,{children:t.grid&&m?e.jsx(c.Col,{...t.grid,children:s.createElement(p.default,{...t,...a,key:typeof t.name=="string"?t.name:String(t.name),updatable:o!=="update"?!0:t.updatable})}):s.createElement(p.default,{...t,...a,key:typeof t.name=="string"?t.name:String(t.name),updatable:o!=="update"?!0:t.updatable})},t.name)}),[i,m,d,u,o]),C=s.useCallback((t,a={})=>{const r=i.find(n=>b.getRealName(n.name)===t);if(r!=null&&r.hidden)return e.jsx(e.Fragment,{});if(r){const n={onUploading:r.type==="image"||r.type==="file"?g=>{var f;r.onUploading&&((f=r.onUploading)==null||f.call(r,g)),u==null||u(g)}:void 0,onDelete:r.type==="image"||r.type==="file"?g=>{var f;r.onUploading&&((f=r.onDelete)==null||f.call(r,g)),d==null||d(g)}:void 0},l=b.getRealName(r.name),h=s.createElement(p.default,{...r,...a,...n,key:typeof l=="string"?l:String(l),updatable:o!=="update"?!0:r.updatable});return a.render?a.render(h):h}return e.jsx(e.Fragment,{})},[i,o]);return e.jsx(e.Fragment,{children:y?e.jsxs(e.Fragment,{children:[y(C,{isAnyFieldHidden(...t){const a=Array.isArray(t)?t:[t];return i.filter(n=>a.includes(n.name)).some(n=>n.hidden)},isAllFieldsHidden(...t){const a=Array.isArray(t)?t:[t];return i.filter(n=>a.includes(n.name)).every(n=>n.hidden)}}),e.jsxs(c.Form.Item,{hidden:!0,noStyle:!0,children:[e.jsx(c.Input,{name:"id"}),e.jsx(c.Input,{})]})]}):m?e.jsx(c.Row,{gutter:[8,8],children:j}):j})}exports.CrudForm=v;exports.CrudFormFields=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),m=require("antd"),j=require("./CrudField.cjs.js"),b=require("../util/CrudUtil.cjs.js");function v({form:i,purpose:y="new",...g}){return e.jsx(m.Form,{form:i,layout:"vertical",children:e.jsx(x,{...g,purpose:y})})}function x({fields:i,formBuilder:y,grid:g,onDeleteFile:d,onUploadFile:u,purpose:s}){const p=c.useMemo(()=>i.filter(t=>!t.readonly).map(t=>{const a={onUploading:t.type==="image"||t.type==="file"?r=>{var n;t.onUploading&&((n=t.onUploading)==null||n.call(t,r)),u==null||u(r)}:void 0,onDelete:t.type==="image"||t.type==="file"?r=>{var n;t.onUploading&&((n=t.onDelete)==null||n.call(t,r)),d==null||d(r)}:void 0};return e.jsx(c.Fragment,{children:t.grid&&g?e.jsx(m.Col,{...t.grid,children:c.createElement(j.default,{...t,...a,key:typeof t.name=="string"?t.name:String(t.name),updatable:s!=="update"?!0:t.updatable})}):c.createElement(j.default,{...t,...a,key:typeof t.name=="string"?t.name:String(t.name),updatable:s!=="update"?!0:t.updatable})},t.name)}),[i,g,d,u,s]),C=c.useCallback((t,a={})=>{const r=i.find(n=>b.getRealName(n.name)===t);if(r!=null&&r.hidden)return e.jsx(e.Fragment,{});if(r){const n={onUploading:r.type==="image"||r.type==="file"?o=>{var f;r.onUploading&&((f=r.onUploading)==null||f.call(r,o)),u==null||u(o)}:void 0,onDelete:r.type==="image"||r.type==="file"?o=>{var f;r.onUploading&&((f=r.onDelete)==null||f.call(r,o)),d==null||d(o)}:void 0},l=b.getRealName(r.name),h=c.createElement(j.default,{...r,...a,...n,key:typeof l=="string"?l:String(l),updatable:s!=="update"?!0:r.updatable});return a.render?a.render(h):h}return e.jsx(e.Fragment,{})},[i,s]);return e.jsx(e.Fragment,{children:y?e.jsxs(e.Fragment,{children:[y(C,{isAnyFieldHidden(...t){const a=Array.isArray(t)?t:[t];return i.filter(n=>a.includes(n.name)).some(n=>n.hidden)},isAllFieldsHidden(...t){const a=Array.isArray(t)?t:[t];return i.filter(n=>a.includes(n.name)).every(n=>n.hidden)},purpose:s}),e.jsxs(m.Form.Item,{hidden:!0,noStyle:!0,children:[e.jsx(m.Input,{name:"id"}),e.jsx(m.Input,{})]})]}):g?e.jsx(m.Row,{gutter:[8,8],children:p}):p})}exports.CrudForm=v;exports.CrudFormFields=x;

package/crud/CrudForm.es.js

@@ -6,17 +6,17 @@ import C from "../util/CrudUtil.es.js";
 function z({
   form: d,
   purpose: g = "new",
-  ...u
+  ...c
 }) {
-  return /* @__PURE__ */ a(k, { form: d, layout: "vertical", children: /* @__PURE__ */ a(I, { ...u, purpose: g }) });
+  return /* @__PURE__ */ a(k, { form: d, layout: "vertical", children: /* @__PURE__ */ a(I, { ...c, purpose: g }) });
 }
 function I({
   fields: d,
   formBuilder: g,
-  grid: u,
+  grid: c,
   onDeleteFile: m,
   onUploadFile: e,
-  purpose: c
+  purpose: u
 }) {
   const h = N(
     () => d.filter((r) => !r.readonly).map((r) => {
@@ -30,13 +30,13 @@ function I({
           r.onUploading && ((n = r.onDelete) == null || n.call(r, t)), m == null || m(t);
         } : void 0
       };
-      return /* @__PURE__ */ a(S.Fragment, { children: r.grid && u ? /* @__PURE__ */ a(w, { ...r.grid, children: /* @__PURE__ */ p(
+      return /* @__PURE__ */ a(S.Fragment, { children: r.grid && c ? /* @__PURE__ */ a(w, { ...r.grid, children: /* @__PURE__ */ p(
         l,
         {
           ...r,
           ...i,
           key: typeof r.name == "string" ? r.name : String(r.name),
-          updatable: c !== "update" ? !0 : r.updatable
+          updatable: u !== "update" ? !0 : r.updatable
         }
       ) }) : /* @__PURE__ */ p(
         l,
@@ -44,11 +44,11 @@ function I({
           ...r,
           ...i,
           key: typeof r.name == "string" ? r.name : String(r.name),
-          updatable: c !== "update" ? !0 : r.updatable
+          updatable: u !== "update" ? !0 : r.updatable
         }
       ) }, r.name);
     }),
-    [d, u, m, e, c]
+    [d, c, m, e, u]
   ), R = j(
     (r, i = {}) => {
       const t = d.find((n) => C.getRealName(n.name) === r);
@@ -70,14 +70,14 @@ function I({
             ...i,
             ...n,
             key: typeof s == "string" ? s : String(s),
-            updatable: c !== "update" ? !0 : t.updatable
+            updatable: u !== "update" ? !0 : t.updatable
           }
         );
         return i.render ? i.render(b) : b;
       }
       return /* @__PURE__ */ a(y, {});
     },
-    [d, c]
+    [d, u]
   );
   return /* @__PURE__ */ a(y, { children: g ? /* @__PURE__ */ v(y, { children: [
     g(R, {
@@ -88,13 +88,14 @@ function I({
       isAllFieldsHidden(...r) {
         const i = Array.isArray(r) ? r : [r];
         return d.filter((n) => i.includes(n.name)).every((n) => n.hidden);
-      }
+      },
+      purpose: u
     }),
     /* @__PURE__ */ v(k.Item, { hidden: !0, noStyle: !0, children: [
       /* @__PURE__ */ a(A, { name: "id" }),
       /* @__PURE__ */ a(A, {})
     ] })
-  ] }) : u ? /* @__PURE__ */ a(H, { gutter: [8, 8], children: h }) : h });
+  ] }) : c ? /* @__PURE__ */ a(H, { gutter: [8, 8], children: h }) : h });
 }
 export {
   z as CrudForm,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kingteza/crud-component",
   "private": false,
-  "version": "1.0.62",
+  "version": "1.0.63",
   "description": "React CRUD component library with Ant Design",
   "keywords": [
     "react",