@kingteza/crud-component 1.0.29 → 1.0.31

package/common/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./layout/VerticalSpace.cjs"),o=require("./text/index.cjs"),r=require("./show-more/index.cjs"),n=require("./button/CloneButtonTable.cjs"),i=require("./button/DeleteButtonTable.cjs"),u=require("./button/HideButtonTable.cjs"),c=require("./button/UnHideButton.cjs"),s=require("./button/UpdateButtonTable.cjs"),a=require("./button/ViewButtonTable.cjs"),l=require("./description/DescList.cjs"),q=require("./loading/LoadingIndicator.cjs"),d=require("./select/CustomSelectOption.cjs"),p=require("./table/table.cjs"),B=require("./tag/StatusTag.cjs"),T=require("./text-field/PhoneNumberField.cjs"),m=require("./tooltip/TooltipComponent.cjs"),b=require("./wizard/WizardResult.cjs"),C=require("./wizard/WizardViewForm.cjs"),x=require("./DatePicker/DatePicker.cjs"),S=require("./DatePicker/TimePicker.cjs"),e=require("./button/Button.cjs"),R=require("./button/ExportButton.cjs"),h=require("./button/ImportButton.cjs"),w=require("./button/NewButton.cjs"),P=require("./button/PrintButton.cjs"),F=require("./button/RefreshButton.cjs"),I=require("./check-box/CheckBox.cjs"),V=require("./picker/ImagePicker.cjs"),g=require("./radio/RadioGroupComponent.cjs"),k=require("./report/SelectFieldInReport.cjs"),f=require("./select/SelectComponent.cjs"),W=require("./tab/TabViewWithRoute.cjs"),D=require("./text/title/index.cjs"),N=require("./text-field/TextField.cjs"),z=require("./text-field/TextArea.cjs"),H=require("./text-field/NumberField.cjs");exports.VerticalSpace=t;exports.Text=o.Text;exports.ShowMore=r.ShowMore;exports.CloneButtonTable=n;exports.DeleteButtonTable=i;exports.HideButtonTable=u;exports.UnHideButton=c;exports.UpdateButtonTable=s;exports.ViewButtonTable=a;exports.DescList=l;exports.LoadingIndicator=q;exports.CustomSelectOption=d;exports.TableComponent=p;exports.StatusTag=B;exports.PhoneField=T;exports.TooltipComponent=m;exports.WizardResult=b;exports.WizardViewForm=C;exports.DatePickerComponent=x;exports.TimePickerComponent=S;exports.Button=e;exports.ButtonComponent=e;exports.ExportButton=R.ExportButton;exports.ImportButton=h.ImportButton;exports.NewButton=w.NewButton;exports.PrintButton=P.PrintButton;exports.RefreshButton=F.RefreshButton;exports.CheckBoxComponent=I;exports.ImagePicker=V.default;exports.RadioGroupComponent=g;exports.SelectFieldInReport=k.SelectFieldInReport;exports.SelectComponent=f;exports.TabViewWithRoute=W.TabViewWithRoute;exports.Title=D.Title;exports.TextField=N.default;exports.TextAreaComponent=z.default;exports.NumberTextField=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./layout/VerticalSpace.cjs"),o=require("./text/index.cjs"),r=require("./show-more/index.cjs"),n=require("./button/CloneButtonTable.cjs"),i=require("./button/DeleteButtonTable.cjs"),u=require("./button/HideButtonTable.cjs"),c=require("./button/UnHideButton.cjs"),s=require("./button/UpdateButtonTable.cjs"),a=require("./button/ViewButtonTable.cjs"),l=require("./description/DescList.cjs"),q=require("./loading/LoadingIndicator.cjs"),d=require("./select/CustomSelectOption.cjs"),p=require("./table/table.cjs"),B=require("./tag/StatusTag.cjs"),T=require("./text-field/PhoneNumberField.cjs"),m=require("./tooltip/TooltipComponent.cjs"),b=require("./wizard/WizardResult.cjs"),C=require("./wizard/WizardViewForm.cjs"),x=require("./date-picker/DatePicker.cjs"),S=require("./date-picker/TimePicker.cjs"),e=require("./button/Button.cjs"),R=require("./button/ExportButton.cjs"),h=require("./button/ImportButton.cjs"),w=require("./button/NewButton.cjs"),P=require("./button/PrintButton.cjs"),F=require("./button/RefreshButton.cjs"),I=require("./check-box/CheckBox.cjs"),V=require("./picker/ImagePicker.cjs"),g=require("./radio/RadioGroupComponent.cjs"),k=require("./report/SelectFieldInReport.cjs"),f=require("./select/SelectComponent.cjs"),W=require("./tab/TabViewWithRoute.cjs"),D=require("./text/title/index.cjs"),N=require("./text-field/TextField.cjs"),z=require("./text-field/TextArea.cjs"),H=require("./text-field/NumberField.cjs");exports.VerticalSpace=t;exports.Text=o.Text;exports.ShowMore=r.ShowMore;exports.CloneButtonTable=n;exports.DeleteButtonTable=i;exports.HideButtonTable=u;exports.UnHideButton=c;exports.UpdateButtonTable=s;exports.ViewButtonTable=a;exports.DescList=l;exports.LoadingIndicator=q;exports.CustomSelectOption=d;exports.TableComponent=p;exports.StatusTag=B;exports.PhoneField=T;exports.TooltipComponent=m;exports.WizardResult=b;exports.WizardViewForm=C;exports.DatePickerComponent=x;exports.TimePickerComponent=S;exports.Button=e;exports.ButtonComponent=e;exports.ExportButton=R.ExportButton;exports.ImportButton=h.ImportButton;exports.NewButton=w.NewButton;exports.PrintButton=P.PrintButton;exports.RefreshButton=F.RefreshButton;exports.CheckBoxComponent=I;exports.ImagePicker=V.default;exports.RadioGroupComponent=g;exports.SelectFieldInReport=k.SelectFieldInReport;exports.SelectComponent=f;exports.TabViewWithRoute=W.TabViewWithRoute;exports.Title=D.Title;exports.TextField=N.default;exports.TextAreaComponent=z.default;exports.NumberTextField=H;

package/common/index.d.ts

@@ -1,4 +1,4 @@
-export { DatePickerComponent, TimePickerComponent } from './DatePicker';
+export { DatePickerComponent, TimePickerComponent } from './date-picker';
 export { ButtonComponent, ButtonComponent as Button, CloneButtonTable, DeleteButtonTable, ExportButton, HideButtonTable, ImportButton, NewButton, PrintButton, RefreshButton, UnHideButton, UpdateButtonTable, ViewButtonTable, } from './button';
 export { CheckBoxComponent } from './check-box';
 export { DescList } from './description';

package/common/index.js

@@ -16,8 +16,8 @@ import { default as D } from "./text-field/PhoneNumberField.js";
 import { default as z } from "./tooltip/TooltipComponent.js";
 import { default as L } from "./wizard/WizardResult.js";
 import { default as U } from "./wizard/WizardViewForm.js";
-import { default as E } from "./DatePicker/DatePicker.js";
-import { default as M } from "./DatePicker/TimePicker.js";
+import { default as E } from "./date-picker/DatePicker.js";
+import { default as M } from "./date-picker/TimePicker.js";
 import { default as j, default as q } from "./button/Button.js";
 import { ExportButton as y } from "./button/ExportButton.js";
 import { ImportButton as K } from "./button/ImportButton.js";

package/crud/CrudComponent.cjs

@@ -0,0 +1 @@
+"use strict";const n=require("react/jsx-runtime"),y=require("antd"),ae=require("dayjs"),o=require("react"),le=require("react-i18next"),ie=require("../locale/hooks/translation-constants.cjs"),ce=require("./CrudForm.cjs"),re=require("./CrudFormWizard.cjs"),ue=require("./import/CrudImportButton.cjs"),de=require("./view/CrudViewer.cjs"),fe=require("../common/button/NewButton.cjs"),pe=require("../common/button/PrintButton.cjs"),{useForm:me}=y.Form;function ye({idField:C="id",onCreate:g,onDelete:M,onHide:_,onUpdate:f,fields:l,data:w,grid:D,isHiding:R,isCreating:h,isDeleting:U,isUpdating:q,paginateProps:W,onPrint:N,printing:L,viewable:H,loadingData:G,formBuilder:J,extraAction:K,minusHeight:Q,cloneable:X,fullWidthModal:Y=!0,wizard:i,extraView:Z,importable:P,onClickNew:V,...$}){const{t:v}=le.useTranslation(ie.TRANSLATION_NAMESPACE),[j,x]=o.useState(!1),[p,k]=o.useState(),[z,B]=o.useState(),[c]=me(),A=o.useCallback(async s=>{const u=i?s:await c.validateFields(),r=l.filter(e=>e.type==="color"),a={};r.forEach(e=>{var d;const t=c.getFieldValue(e.name);a[e.name]=typeof t=="string"?t:(d=t==null?void 0:t.toHexString())==null?void 0:d.toUpperCase()}),Object.assign(u,a),p&&f?(await f({...u,[C]:p[C]}),k(void 0)):!p&&g&&await g(u),B(void 0),c.resetFields(),x(!1)},[l,c,C,g,f,p,i]),[ee,I]=o.useState(!1),[te,S]=o.useState(!1);o.useEffect(()=>{j?(I(!1),S(!1)):F(void 0)},[j]);const O=o.useCallback(async s=>{I(s),S(!0)},[]),T=o.useCallback(async()=>{S(!0)},[]),[ne,E]=o.useState(!1),b=o.useCallback(async(s,u=!0,r=!1)=>{try{E(!0),x(!0),u&&F("update");const a={};for(const e of l){const t=s[e.name];if(r&&e.type==="image"){const d=t;try{const oe=await e.provider.clone(d);a[e.name]=oe;continue}catch{continue}}e.type==="date"?t&&(a[e.name]=ae(t)):e.type==="select"?e.multiple&&Array.isArray(t)?a[e.name]=t.map(d=>d[e.innerFieldId??"id"]):t&&typeof t=="object"?a[e.name]=t[e.innerFieldId??"id"]:(t&&typeof t=="string"||typeof t=="number")&&(a[e.name]=t):a[e.name]=t}c.setFieldsValue(a),B(a),u&&k(s)}finally{E(!1)}},[l,c]),[m,F]=o.useState(),se=o.useCallback(async s=>{F("clone"),b(s,!1,!0)},[b]);return n.jsxs(n.Fragment,{children:[n.jsxs(y.Space,{direction:"vertical",className:"w-100",children:[n.jsxs("div",{className:"w-100 d-flex",children:[n.jsx("div",{style:{flex:1},children:n.jsx(fe.NewButton,{onClick:()=>{V?V():(x(s=>!s),F("new"))},className:"flex-1"})}),n.jsxs(y.Space,{children:[!!N&&n.jsx(pe.PrintButton,{className:"float-right",loading:L,onClick:N}),!!P&&n.jsx(ue,{fields:l,importProps:P})]})]}),n.jsx(de,{...$,minusHeight:Q,data:w,fields:l,extraAction:K,idField:C,isDeleting:U,loadingData:G,onClickUpdate:f?b:void 0,onHide:_,isHiding:R,onDelete:M,onUpdate:f,onClickClone:X?se:void 0,paginateProps:W,viewable:H,extraView:Z})]}),n.jsx(y.Modal,{width:Y?"100%":void 0,title:v(m??"new"),open:j,confirmLoading:h||q,okText:v("str."+(m==="update"?"update":"save")),cancelText:v("str.cancel"),cancelButtonProps:{disabled:te,hidden:!!i},okButtonProps:{disabled:ee,hidden:!!i},onCancel:async()=>{try{if(m==="clone"){const s=i?p:c.getFieldsValue(),u=l.filter(r=>r.type==="image");for(const r of u)s[r.name]&&r.provider.delete(s[r.name])}}finally{}i||c.resetFields(),B(void 0),k(void 0),x(!1)},onOk:()=>A(),destroyOnClose:!0,children:n.jsxs(y.Spin,{spinning:ne,children:[!i&&n.jsx(ce.CrudForm,{purpose:m,fields:l,form:c,formBuilder:J,grid:D,onDeleteFile:T,onUploadFile:O}),i&&n.jsx(re,{submitting:h||q,className:"mt-2",onSave:A,updatingValue:z,fields:l,onDeleteFile:T,onUploadFile:O,purpose:m,wizard:i})]})})]})}module.exports=ye;

package/crud/CrudComponent.d.ts

@@ -0,0 +1,237 @@
+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 IdProps } from 'types/Id';
+import { CrudSearchComponentProps } from './CrudSearchComponent';
+import { FileCrudField } from './FileCrudField';
+import { ImageCrudField } from './ImageCrudField';
+import { CrudImportProps } from './import/CrudImportComponent';
+import { SelectTagRenderProps } from 'common/select/SelectComponent';
+export type SelectFieldItem = {
+    key?: string | number;
+    value: string | number;
+    disabled?: boolean;
+};
+export interface InitialCrudField<T> {
+    label: string;
+    updatingValue?: T;
+    render?: (value: any, obj: T, index: number) => any;
+    required?: boolean;
+    updatable?: boolean;
+    fieldTooltip?: string;
+    hideInTable?: boolean;
+    hideInDescList?: boolean;
+    readonly?: boolean;
+    fieldClassName?: string;
+    halign?: "right" | "left";
+    /**
+     * Indicates the fields is visible or not
+     */
+    hidden?: boolean;
+    width?: number | string;
+    name: keyof T | (string | number)[];
+    rules?: Rule[];
+    grid?: CrudFieldGrid;
+    report?: {
+        searchable?: boolean;
+        sortable?: boolean;
+        defaultSort?: boolean | "ASC" | "DESC";
+        lock?: boolean;
+        alreadySelected?: boolean;
+        customRender?: (form: FormInstance<any>) => ReactElement;
+    };
+    customFormFieldRender?: (form: FormInstance<T>, props: InitialCrudField<T>) => React.ReactElement;
+    importProps?: {
+        extraFields?: string[];
+        hidden?: boolean;
+    };
+    hideLabel?: boolean;
+}
+export type CrudFieldGrid = {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    xxl?: number;
+};
+export interface SelectCrudField<T, ItemType extends SelectFieldItem = SelectFieldItem> extends InitialCrudField<T> {
+    type: "select";
+    placeholder?: string;
+    /**
+     * @default true
+     */
+    allowClear?: boolean;
+    /**
+     * Used when the type is 'select'
+     */
+    innerFieldId?: string;
+    innerFieldLabel?: string;
+    /**
+     * Used when the type is 'select'
+     */
+    items: ItemType[];
+    tagRender?: SelectTagRenderProps;
+    /**
+     * Whether the search should be highlighted
+     */
+    highlightSearch?: boolean;
+    /**
+     * Used when the type is 'select'
+     */
+    loading?: boolean;
+    /**
+     * Used when the type is 'select'
+     */
+    onSearch?: (keyword: any, form: FormInstance<T>, record: T | undefined) => void;
+    /**
+     * Used when the type is 'select'. Wether the result should refresh if the search value is changed.
+     */
+    searchOnType?: boolean;
+    multiple?: boolean;
+    report?: InitialCrudField<T>["report"] & {
+        multiple?: boolean;
+    };
+    onChange?: (value: any, form: FormInstance<T>) => void;
+    onSet?: (value: any | any[], items: SelectFieldItem[], form: FormInstance<T>) => void;
+}
+export interface EnumCrudField<T> extends InitialCrudField<T> {
+    type: "enum";
+    placeholder?: string;
+    enum: object | object[];
+    radio?: boolean;
+    translation?: object;
+    multiple?: boolean;
+    tagRender?: SelectTagRenderProps;
+    onChange?: (value: any, form: FormInstance<T>) => void;
+    onSearch?: (keyword: any, form: FormInstance<T>) => void;
+}
+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> {
+    placeholder?: string;
+    type: "text" | "time" | "email" | "password";
+    onChange?: (value: string, form: FormInstance<T>) => void;
+}
+export interface TextAreaBasedFieldProps<T> extends InitialCrudField<T> {
+    placeholder?: string;
+    type: "textarea";
+    rows?: number;
+    cols?: number;
+    /**
+     * number of lines to show. If false will not show truncated
+     * @default 2
+     */
+    truncated?: boolean | number;
+    onChange?: (value: string, form: FormInstance<T>) => void;
+}
+export interface ColorPickerFieldProps<T> extends Omit<InitialCrudField<T>, "placeholder"> {
+    type: "color";
+    innerProps?: ColorPickerProps;
+}
+export interface CheckboxBasedFieldProps<T> extends InitialCrudField<T> {
+    type: "checkbox";
+    onChange?: (value: boolean, form: FormInstance<T>) => void;
+}
+export interface NumberBasedFieldProps<T> extends InitialCrudField<T> {
+    type: "number";
+    placeholder?: string;
+    allowMinus?: boolean;
+    /**
+     * If it is number field making this true will convert the value to comma separated number field
+     */
+    formatted?: boolean;
+    int?: boolean;
+    onChange?: (value: number, form: FormInstance<T>) => void;
+}
+export interface DateBasedFieldProps<T> extends InitialCrudField<T> {
+    type: "date";
+    format?: string;
+    placeholder?: string;
+    /**
+     * If it is number field making this true will convert the value to comma separated number field
+     */
+    formatTime?: boolean;
+    range?: boolean;
+    disableToday?: boolean;
+    disabledFutureDays?: boolean;
+    disabledPastDays?: boolean;
+    report?: InitialCrudField<T>["report"] & {
+        range?: boolean;
+        required?: boolean;
+    };
+    onChange?: (value: Dayjs | undefined, form: FormInstance<T>) => void;
+}
+export interface TimeBasedFieldProps<T> extends InitialCrudField<T> {
+    type: "time";
+    placeholder?: string;
+    use12Hours?: boolean;
+    range?: boolean;
+    format?: "h:mm:ss" | "h:mm:ss A" | "h:mm" | "h:mm A" | "mm" | "h" | "h A";
+    disableCurrent?: boolean;
+    disabledFuture?: boolean;
+    disabledPast?: boolean;
+    report?: InitialCrudField<T>["report"] & {
+        range?: boolean;
+    };
+    onChange?: (value: Dayjs | undefined, form: FormInstance<T>) => void;
+}
+export type CrudPurpose = "new" | "clone" | "update";
+export type GetFormFieldOptions = {
+    onChange?: (value: any) => void;
+    render?: (component: React.JSX.Element) => React.ReactElement;
+};
+export type FormBuilderFunc0<T> = (name: keyof T, options?: GetFormFieldOptions) => ReactElement;
+export type FormBuilderFunc<T> = (i: FormBuilderFunc0<T>, otherUtils: {
+    isAnyFieldHidden: (...name: Array<keyof T>) => boolean;
+    isAllFieldsHidden: (...name: Array<keyof T>) => boolean;
+}) => 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 | {
+    page?: number;
+    setPage?: (page: number, pageSize?: number) => void;
+    pageSize?: number;
+    count?: number;
+};
+export type CrudWizardProp<T> = {
+    title: string;
+    fields: Array<keyof T>;
+    icon?: ReactElement;
+    formBuilder?: FormBuilderFunc<T>;
+    grid?: boolean;
+};
+export type CrudComponentProps<T, FormType = T> = {
+    fields: CrudFieldProps<T>[];
+    data: T[] | undefined;
+    idField?: string;
+    grid?: boolean;
+    onPrint?: () => void;
+    printing?: boolean;
+    onCreate?: (t: FormType) => Promise<any>;
+    onHide?: (id: any) => Promise<any>;
+    onDelete?: (id: any) => Promise<any>;
+    onUpdate?: (t: FormType & IdProps) => Promise<any>;
+    loadingData?: boolean;
+    isCreating?: boolean;
+    isHiding?: boolean;
+    isDeleting?: boolean;
+    isUpdating?: boolean;
+    viewable?: boolean | keyof T;
+    extraAction?: (t: T) => ReactElement;
+    paginateProps?: CrudPaginateProps;
+    formBuilder?: FormBuilderFunc<T>;
+    minusHeight?: string;
+    cloneable?: boolean;
+    fullWidthModal?: boolean;
+    wizard?: CrudWizardProp<T>[];
+    extraView?: (t: T) => React.ReactElement;
+    importable?: CrudImportProps<T>;
+    onClickNew?: () => void;
+} & CrudSearchComponentProps<T, FormType>;
+declare function CrudComponent<T, FormType = T>({ idField, onCreate, onDelete, onHide, onUpdate, fields, data, grid, isHiding, isCreating, isDeleting, isUpdating, paginateProps, onPrint, printing, viewable, loadingData, formBuilder, extraAction, minusHeight, cloneable, fullWidthModal, wizard, extraView, importable, onClickNew, ...props }: CrudComponentProps<T, FormType>): import("react/jsx-runtime").JSX.Element;
+export default CrudComponent;

package/crud/CrudComponent.js

@@ -0,0 +1,210 @@
+import { jsxs as y, Fragment as se, jsx as c } from "react/jsx-runtime";
+import { Space as D, Modal as re, Spin as ce, Form as me } from "antd";
+import fe from "dayjs";
+import { useState as m, useCallback as F, useEffect as de } from "react";
+import { useTranslation as ue } from "react-i18next";
+import { TRANSLATION_NAMESPACE as pe } from "../locale/hooks/translation-constants.js";
+import { CrudForm as ye } from "./CrudForm.js";
+import Fe from "./CrudFormWizard.js";
+import ge from "./import/CrudImportButton.js";
+import ve from "./view/CrudViewer.js";
+import { NewButton as Ce } from "../common/button/NewButton.js";
+import { PrintButton as Be } from "../common/button/PrintButton.js";
+const { useForm: he } = me;
+function Ie({
+  idField: g = "id",
+  onCreate: B,
+  onDelete: U,
+  onHide: W,
+  onUpdate: d,
+  fields: l,
+  data: w,
+  grid: L,
+  isHiding: H,
+  isCreating: V,
+  isDeleting: R,
+  isUpdating: P,
+  paginateProps: q,
+  onPrint: A,
+  printing: G,
+  viewable: J,
+  loadingData: K,
+  formBuilder: Q,
+  extraAction: X,
+  minusHeight: Y,
+  cloneable: Z,
+  fullWidthModal: $ = !0,
+  wizard: a,
+  extraView: z,
+  importable: j,
+  onClickNew: O,
+  ...ee
+}) {
+  const { t: h } = ue(pe), [k, v] = m(!1), [u, b] = m(), [te, x] = m(), [i] = he(), T = F(
+    async (o) => {
+      const r = a ? o : await i.validateFields(), s = l.filter((e) => e.type === "color"), n = {};
+      s.forEach((e) => {
+        var f;
+        const t = i.getFieldValue(e.name);
+        n[e.name] = typeof t == "string" ? t : (f = t == null ? void 0 : t.toHexString()) == null ? void 0 : f.toUpperCase();
+      }), Object.assign(r, n), u && d ? (await d({
+        ...r,
+        [g]: u[g]
+      }), b(void 0)) : !u && B && await B(r), x(void 0), i.resetFields(), v(!1);
+    },
+    [l, i, g, B, d, u, a]
+  ), [oe, E] = m(!1), [ne, S] = m(!1);
+  de(() => {
+    k ? (E(!1), S(!1)) : C(void 0);
+  }, [k]);
+  const I = F(async (o) => {
+    E(o), S(!0);
+  }, []), M = F(async () => {
+    S(!0);
+  }, []), [le, _] = m(!1), N = F(
+    async (o, r = !0, s = !1) => {
+      try {
+        _(!0), v(!0), r && C("update");
+        const n = {};
+        for (const e of l) {
+          const t = o[e.name];
+          if (s && e.type === "image") {
+            const f = t;
+            try {
+              const ie = await e.provider.clone(f);
+              n[e.name] = ie;
+              continue;
+            } catch {
+              continue;
+            }
+          }
+          e.type === "date" ? t && (n[e.name] = fe(t)) : e.type === "select" ? e.multiple && Array.isArray(t) ? n[e.name] = t.map(
+            (f) => f[e.innerFieldId ?? "id"]
+          ) : t && typeof t == "object" ? n[e.name] = t[e.innerFieldId ?? "id"] : (t && typeof t == "string" || typeof t == "number") && (n[e.name] = t) : n[e.name] = t;
+        }
+        i.setFieldsValue(n), x(n), r && b(o);
+      } finally {
+        _(!1);
+      }
+    },
+    [l, i]
+  ), [p, C] = m(), ae = F(
+    async (o) => {
+      C("clone"), N(o, !1, !0);
+    },
+    [N]
+  );
+  return /* @__PURE__ */ y(se, { children: [
+    /* @__PURE__ */ y(D, { direction: "vertical", className: "w-100", children: [
+      /* @__PURE__ */ y("div", { className: "w-100 d-flex", children: [
+        /* @__PURE__ */ c("div", { style: { flex: 1 }, children: /* @__PURE__ */ c(
+          Ce,
+          {
+            onClick: () => {
+              O ? O() : (v((o) => !o), C("new"));
+            },
+            className: "flex-1"
+          }
+        ) }),
+        /* @__PURE__ */ y(D, { children: [
+          !!A && /* @__PURE__ */ c(
+            Be,
+            {
+              className: "float-right",
+              loading: G,
+              onClick: A
+            }
+          ),
+          !!j && /* @__PURE__ */ c(ge, { fields: l, importProps: j })
+        ] })
+      ] }),
+      /* @__PURE__ */ c(
+        ve,
+        {
+          ...ee,
+          minusHeight: Y,
+          data: w,
+          fields: l,
+          extraAction: X,
+          idField: g,
+          isDeleting: R,
+          loadingData: K,
+          onClickUpdate: d ? N : void 0,
+          onHide: W,
+          isHiding: H,
+          onDelete: U,
+          onUpdate: d,
+          onClickClone: Z ? ae : void 0,
+          paginateProps: q,
+          viewable: J,
+          extraView: z
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c(
+      re,
+      {
+        width: $ ? "100%" : void 0,
+        title: h(p ?? "new"),
+        open: k,
+        confirmLoading: V || P,
+        okText: h("str." + (p === "update" ? "update" : "save")),
+        cancelText: h("str.cancel"),
+        cancelButtonProps: {
+          disabled: ne,
+          hidden: !!a
+        },
+        okButtonProps: {
+          disabled: oe,
+          hidden: !!a
+        },
+        onCancel: async () => {
+          try {
+            if (p === "clone") {
+              const o = a ? u : i.getFieldsValue(), r = l.filter((s) => s.type === "image");
+              for (const s of r)
+                o[s.name] && s.provider.delete(
+                  o[s.name]
+                );
+            }
+          } finally {
+          }
+          a || i.resetFields(), x(void 0), b(void 0), v(!1);
+        },
+        onOk: () => T(),
+        destroyOnClose: !0,
+        children: /* @__PURE__ */ y(ce, { spinning: le, children: [
+          !a && /* @__PURE__ */ c(
+            ye,
+            {
+              purpose: p,
+              fields: l,
+              form: i,
+              formBuilder: Q,
+              grid: L,
+              onDeleteFile: M,
+              onUploadFile: I
+            }
+          ),
+          a && /* @__PURE__ */ c(
+            Fe,
+            {
+              submitting: V || P,
+              className: "mt-2",
+              onSave: T,
+              updatingValue: te,
+              fields: l,
+              onDeleteFile: M,
+              onUploadFile: I,
+              purpose: p,
+              wizard: a
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  Ie as default
+};

package/crud/CrudField.cjs

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

package/crud/CrudField.d.ts

@@ -0,0 +1,4 @@
+import { ColorPickerFieldProps, CrudFieldProps, SelectCrudField } from './CrudComponent';
+export default function CrudField<T>(props0: CrudFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectCrudFieldComponent<T>(props: SelectCrudField<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ColorCrudFieldComponent<T>(props: ColorPickerFieldProps<T>): import("react/jsx-runtime").JSX.Element;