@kingteza/crud-component 1.0.29 → 1.0.31

package/crud/CrudField.js

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

package/crud/CrudForm.cjs

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

package/crud/CrudForm.d.ts

@@ -0,0 +1,14 @@
+import { FormInstance } from 'antd';
+import { CrudFieldProps, CrudPurpose, FormBuilderFunc } from './CrudComponent';
+export interface CurdFormFieldsProps<T> {
+    onDeleteFile?: (e: any) => void;
+    onUploadFile?: (e: any) => void;
+    grid?: boolean;
+    formBuilder?: FormBuilderFunc<T>;
+    fields: CrudFieldProps<T>[];
+    purpose?: CrudPurpose;
+}
+export declare function CrudForm<T>({ form, purpose, ...props }: CurdFormFieldsProps<T> & {
+    form: FormInstance;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CrudFormFields<T>({ fields, formBuilder, grid, onDeleteFile, onUploadFile, purpose, }: CurdFormFieldsProps<T>): import("react/jsx-runtime").JSX.Element;

package/crud/CrudForm.js

@@ -0,0 +1,91 @@
+import { jsx as d, Fragment as m, jsxs as g } from "react/jsx-runtime";
+import A, { useMemo as C, createElement as f, useCallback as k } from "react";
+import { Form as p, Col as S, Input as h, Row as j } from "antd";
+import s from "./CrudField.js";
+function x({
+  form: e,
+  purpose: c = "new",
+  ...i
+}) {
+  return /* @__PURE__ */ d(m, { children: /* @__PURE__ */ d(p, { form: e, layout: "vertical", children: /* @__PURE__ */ d(v, { ...i, purpose: c }) }) });
+}
+function v({
+  fields: e,
+  formBuilder: c,
+  grid: i,
+  onDeleteFile: o,
+  onUploadFile: l,
+  purpose: u
+}) {
+  const y = C(
+    () => e.filter((r) => !r.readonly).map((r) => {
+      const a = {
+        onUploading: (t) => {
+          var n;
+          r.onUploading && ((n = r.onUploading) == null || n.call(r, t)), l == null || l(t);
+        },
+        onDelete: (t) => {
+          var n;
+          r.onUploading && ((n = r.onDelete) == null || n.call(r, t)), o == null || o(t);
+        }
+      };
+      return /* @__PURE__ */ d(A.Fragment, { children: r.grid && i ? /* @__PURE__ */ d(S, { ...r.grid, children: /* @__PURE__ */ f(
+        s,
+        {
+          ...r,
+          ...a,
+          key: typeof r.name == "string" ? r.name : String(r.name),
+          updatable: u !== "update" ? !0 : r.updatable
+        }
+      ) }) : /* @__PURE__ */ f(
+        s,
+        {
+          ...r,
+          ...a,
+          key: typeof r.name == "string" ? r.name : String(r.name),
+          updatable: u !== "update" ? !0 : r.updatable
+        }
+      ) }, r.name);
+    }),
+    [e, i, o, l, u]
+  ), b = k(
+    (r, a = {}) => {
+      const t = e.find((n) => n.name === r);
+      if (t != null && t.hidden) return /* @__PURE__ */ d(m, {});
+      if (t) {
+        const n = /* @__PURE__ */ f(
+          s,
+          {
+            ...t,
+            ...a,
+            key: typeof t.name == "string" ? t.name : String(t.name),
+            updatable: u !== "update" ? !0 : t.updatable
+          }
+        );
+        return a.render ? a.render(n) : n;
+      }
+      return /* @__PURE__ */ d(m, {});
+    },
+    [e, u]
+  );
+  return /* @__PURE__ */ d(m, { children: c ? /* @__PURE__ */ g(m, { children: [
+    c(b, {
+      isAnyFieldHidden(...r) {
+        const a = Array.isArray(r) ? r : [r];
+        return e.filter((n) => a.includes(n.name)).some((n) => n.hidden);
+      },
+      isAllFieldsHidden(...r) {
+        const a = Array.isArray(r) ? r : [r];
+        return e.filter((n) => a.includes(n.name)).every((n) => n.hidden);
+      }
+    }),
+    /* @__PURE__ */ g(p.Item, { hidden: !0, noStyle: !0, children: [
+      /* @__PURE__ */ d(h, { name: "id" }),
+      /* @__PURE__ */ d(h, {})
+    ] })
+  ] }) : i ? /* @__PURE__ */ d(j, { gutter: [8, 8], children: y }) : y });
+}
+export {
+  x as CrudForm,
+  v as CrudFormFields
+};

package/crud/CrudFormWizard.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),g=require("@ant-design/icons"),u=require("antd"),F=require("react"),k=require("react-i18next"),S=require("../locale/hooks/translation-constants.cjs"),y=require("./CrudForm.cjs"),C=require("../common/button/Button.cjs"),T=require("../common/wizard/WizardViewForm.cjs");function v({fields:l,className:m,onDeleteFile:h,onUploadFile:i,purpose:c,wizard:r=[],updatingValue:f,onSave:x,submitting:j}){const d=F.useMemo(()=>r.map(n=>{let t=!0;const o=l.filter(s=>n.fields.includes(s.name));return o.forEach(s=>t&&(t=s.hidden??!1)),{...n,hidden:t,fieldThatShouldShowing:o}}),[l,r]),a=F.useMemo(()=>d.filter(n=>!n.hidden),[d]);return e.jsx(e.Fragment,{children:e.jsx(T,{onSubmit:(n,t)=>{console.log(t),x(t)},className:m,pages:a.map(({title:n,icon:t,fieldThatShouldShowing:o,hidden:s},b)=>({title:n,icon:t,hidden:s,component:q=>e.jsx(R,{fields:o,onDeleteFile:h,onUploadFile:i,purpose:c,i:b,updatingValue:f,backward:q.backward,forward:q.forward,wizard:a,submitting:j},b)}))})})}function R({fields:l,onDeleteFile:m,onUploadFile:h,purpose:i,wizard:c=[],i:r,forward:f,backward:x,submitting:j,updatingValue:d}){const a=c[r],{t:n}=k.useTranslation(S.TRANSLATION_NAMESPACE),[t]=u.Form.useForm();return F.useEffect(()=>{if(d&&(i==="update"||i==="clone")){const o={};for(const s of l)o[s.name]=d[s.name];t.setFieldsValue(o)}},[l,t,i,d]),e.jsxs(u.Form,{name:String(r),form:t,layout:"vertical",children:[e.jsx(y.CrudFormFields,{fields:l,formBuilder:a.formBuilder,grid:a.grid,onDeleteFile:m,onUploadFile:h,purpose:i}),e.jsx(u.Divider,{}),e.jsxs(u.Row,{gutter:[8,8],children:[r>0&&e.jsx(u.Col,{md:12,children:e.jsx(C,{block:!0,icon:e.jsx(g.LeftOutlined,{}),htmlType:"button",type:"default",size:"large",onClick:()=>x(),children:n("str.back")})}),e.jsx(u.Col,{md:r>0?12:24,children:e.jsx(C,{block:!0,icon:c.length-1===r?e.jsx(g.SaveOutlined,{}):e.jsx(g.RightOutlined,{}),htmlType:"submit",type:"primary",loading:j,size:"large",onClick:()=>{t.validateFields().then(o=>{f(o,c.length-1===r,c.length-1===r)})},children:c.length-1===r?n("str."+(i==="update"?"update":"save")):n("str.next")})})]})]})}module.exports=v;

package/crud/CrudFormWizard.d.ts

@@ -0,0 +1,14 @@
+import { CrudFieldProps, CrudPurpose, CrudWizardProp } from './CrudComponent';
+export interface CrudFormWizardProps<T> {
+    onDeleteFile?: (e: any) => void;
+    onUploadFile?: (e: any) => void;
+    fields: CrudFieldProps<T>[];
+    purpose?: CrudPurpose;
+    wizard?: CrudWizardProp<T>[];
+    className?: string;
+    onSave: (e: T) => void;
+    updatingValue?: T;
+    submitting?: boolean;
+}
+declare function CrudFormWizard<T>({ fields, className, onDeleteFile, onUploadFile, purpose, wizard, updatingValue, onSave, submitting, }: CrudFormWizardProps<T>): import("react/jsx-runtime").JSX.Element;
+export default CrudFormWizard;