@unicom-cloud/ui 0.8.44 → 0.8.46

package/form/Form.js

@@ -0,0 +1,156 @@
+import { jsx as p } from "react/jsx-runtime";
+import k from "@unicom-cloud/scroll-into-view-if-needed";
+import v from "lodash/isPlainObject";
+import D from "lodash/merge";
+import { forwardRef as A, useContext as $, useRef as O, useEffect as _, useImperativeHandle as H } from "react";
+/* empty css                  */
+import U from "../config-provider/ConfigProvider.js";
+import W from "../hooks/useCreate.js";
+import X from "../hooks/useMergeProps.js";
+import B from "@unicom-cloud/utils/class-name";
+import G from "../utils/omit.js";
+import { FormProviderContext as J, FormContext as K } from "./context.js";
+import L from "./useForm.js";
+import { ID_SUFFIX as Q } from "./util.js";
+import { ConfigContext as Y } from "../config-provider/context.js";
+function f(a, u) {
+  const s = u.replace(/[[.]/g, "_").replace(/\]/g, "");
+  return a ? `${a}-${s}` : `${s}`;
+}
+const Z = {
+  layout: "horizontal",
+  labelCol: { span: 5, offset: 0 },
+  labelAlign: "right",
+  wrapperCol: { span: 19, offset: 0 },
+  requiredSymbol: !0,
+  wrapper: "form",
+  validateTrigger: "onChange"
+}, ee = (a, u) => {
+  var h, S;
+  const s = $(Y), r = $(J), d = O(null), [i] = L(
+    a.form
+  ), e = X(
+    a,
+    Z,
+    (h = s.componentConfig) == null ? void 0 : h.Form
+  ), {
+    layout: g,
+    labelCol: V,
+    wrapperCol: y,
+    wrapper: w,
+    id: F,
+    requiredSymbol: I,
+    labelAlign: R,
+    disabled: T,
+    colon: z,
+    className: E,
+    validateTrigger: M,
+    prefixCls: x,
+    validateMessages: N,
+    ...P
+  } = e, m = x || s.getPrefixCls("form"), q = s.rtl, C = "size" in e ? e.size : s.size, b = i.getInnerMethods(!0);
+  W(() => {
+    b.innerSetInitialValues(e.initialValues);
+  }), _(() => {
+    let o;
+    return r.register && (o = r.register(e.id, i)), o;
+  }, [e.id, i]), H(u, () => i), i.scrollToField = (o, l) => {
+    const t = d.current, n = e.id;
+    if (!t)
+      return;
+    let c = t.querySelector(
+      `#${f(n, o)}`
+    );
+    c || (c = t.querySelector(
+      `#${f(n, o)}${Q}`
+    )), c && k(c, {
+      behavior: "smooth",
+      block: "nearest",
+      scrollMode: "if-needed",
+      ...l
+    });
+  }, b.innerSetCallbacks({
+    onValuesChange: (o, l) => {
+      var t, n;
+      (t = e.onValuesChange) == null || t.call(e, o, l), (n = r.onFormValuesChange) == null || n.call(r, e.id, o);
+    },
+    onChange: e.onChange,
+    onValidateFail: (o) => {
+      if (e.scrollToFirstError) {
+        const l = v(e.scrollToFirstError) ? e.scrollToFirstError : {};
+        i.scrollToField(
+          Object.keys(o)[0],
+          l
+        );
+      }
+    },
+    onSubmitFailed: e.onSubmitFailed,
+    onSubmit: (o) => {
+      var t, n;
+      const l = (t = e.onSubmit) == null ? void 0 : t.call(e, o);
+      return (n = r.onFormSubmit) == null || n.call(r, e.id, o), l;
+    },
+    onReset: (o) => {
+      var t, n;
+      const l = (t = e.onReset) == null ? void 0 : t.call(e, o);
+      return (n = r == null ? void 0 : r.onFormReset) == null || n.call(r, e.id, o), l;
+    }
+  });
+  const j = {
+    requiredSymbol: I,
+    labelAlign: R,
+    disabled: T,
+    colon: z,
+    labelCol: V,
+    wrapperCol: y,
+    layout: g,
+    store: i,
+    prefixCls: m,
+    validateTrigger: M,
+    validateMessages: D(
+      {},
+      (S = s.locale.Form) == null ? void 0 : S.validateMessages,
+      N
+    ),
+    getFormElementId: (o) => f(F, o)
+  };
+  return /* @__PURE__ */ p(U, { ...s, size: C, children: /* @__PURE__ */ p(K.Provider, { value: j, children: /* @__PURE__ */ p(
+    w,
+    {
+      ref: d,
+      ...G(P, [
+        "form",
+        "size",
+        "initialValues",
+        "onValuesChange",
+        "onChange",
+        "wrapperProps",
+        "scrollToFirstError",
+        "onSubmit",
+        "onSubmitFailed",
+        "onReset"
+      ]),
+      ...e.wrapperProps,
+      className: B(
+        m,
+        `${m}-${g}`,
+        `${m}-size-${C}`,
+        { [`${m}-rtl`]: q },
+        E
+      ),
+      style: e.style,
+      onSubmit: (o) => {
+        o.preventDefault(), o.stopPropagation(), i.submit();
+      },
+      onReset: (o) => {
+        o.preventDefault(), o.stopPropagation(), i.resetFields();
+      },
+      id: F,
+      children: e.children
+    }
+  ) }) });
+}, oe = A(ee);
+oe.displayName = "Form";
+export {
+  oe as default
+};

package/form/FormItem.js

@@ -0,0 +1,241 @@
+import { jsx as a, jsxs as q, Fragment as ue } from "react/jsx-runtime";
+import H, { forwardRef as fe, useContext as x, useState as L, useRef as be, useEffect as ge, useMemo as W, createElement as G, cloneElement as K } from "react";
+import he from "lodash/isArray";
+import Ce from "lodash/isFunction";
+import y from "lodash/isPlainObject";
+import w from "lodash/isUndefined";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import X from "../Grid.js";
+import ye from "../utils/CSSTransition.js";
+import v from "@unicom-cloud/utils/class-name";
+import ve from "../utils/omit.js";
+import I from "./Control.js";
+import we from "./FormLabel.js";
+import { FormItemContext as B, FormListContext as Fe, FormContext as J } from "./context.js";
+import { VALIDATE_STATUS as T } from "./interface.js";
+import { formatValidateMsg as $e } from "./util.js";
+import { ConfigContext as xe } from "../config-provider/context.js";
+const Ie = X.Row, Q = X.Col, Ne = ({
+  prefixCls: e,
+  help: h,
+  errors: N,
+  warnings: S
+}) => {
+  const c = N.map((m, f) => {
+    if (m)
+      return /* @__PURE__ */ a("div", { role: "alert", children: m.message }, f);
+  }), s = [];
+  S.map((m, f) => {
+    s.push(
+      /* @__PURE__ */ a("div", { role: "alert", className: `${e}-message-help-warning`, children: m }, f)
+    );
+  });
+  const u = !w(h) || !!s.length, C = u || !!c.length;
+  return C && /* @__PURE__ */ a(
+    ye,
+    {
+      in: C,
+      appear: !0,
+      classNames: "formblink",
+      timeout: 300,
+      unmountOnExit: !0,
+      children: /* @__PURE__ */ a(
+        "div",
+        {
+          className: v(`${e}-message`, {
+            [`${e}-message-help`]: u
+          }),
+          children: w(h) ? /* @__PURE__ */ q(ue, { children: [
+            c.length > 0 && c,
+            s.length > 0 && s
+          ] }) : h
+        }
+      )
+    }
+  );
+}, Se = (e, h) => {
+  var O, U, _;
+  const { getPrefixCls: N, prefixCls: S } = x(xe), c = x(B), s = x(Fe), [u, C] = L(null), [m, f] = L(null), t = x(J), n = t.prefixCls || N("form"), A = e.layout || t.layout, Z = e.labelAlign || t.labelAlign, k = be(!1), ee = (i, r = {}) => {
+    if (k.current)
+      return;
+    const { errors: d, warnings: b } = r || {};
+    C((g) => {
+      const l = { ...g || {} };
+      return d ? l[i] = d : delete l[i], l;
+    }), f((g) => {
+      const l = { ...g || {} };
+      return b && b.length ? l[i] = b : delete l[i], l;
+    });
+  }, te = y(e.noStyle) && e.noStyle.showErrorTip && c.updateFormItem ? c.updateFormItem : ee;
+  ge(() => (k.current = !1, () => {
+    k.current = !0, C(null), f(null);
+  }), []);
+  const re = {
+    ...t,
+    validateMessages: t.validateMessages && $e(t.validateMessages, {
+      label: e.label
+    }),
+    prefixCls: n,
+    updateFormItem: te,
+    disabled: "disabled" in e ? e.disabled : t.disabled
+  }, { label: D, extra: j, className: le, style: ne, validateStatus: F, hidden: ie, ...oe } = e, ae = v(`${n}-label-item`, {
+    [`${n}-label-item-left`]: Z === "left"
+  }), M = u ? Object.values(u) : [], p = m ? Object.values(m).reduce((i, r) => i.concat(r), []) : [], $ = W(() => {
+    if (F)
+      return F;
+    if (M.length)
+      return T.error;
+    if (p.length)
+      return T.warning;
+  }, [u, m, F]), R = W(() => !w(e.help) || p.length > 0, [e.help, m]), se = v(
+    `${n}-item`,
+    {
+      [`${n}-item-error`]: R || !F && $ === T.error,
+      [`${n}-item-status-${$}`]: $,
+      [`${n}-item-has-help`]: R,
+      [`${n}-item-hidden`]: ie,
+      [`${n}-item-has-feedback`]: $ && e.hasFeedback
+    },
+    `${n}-layout-${A}`,
+    le
+  ), V = () => {
+    var b, g;
+    const { field: i, children: r } = e, d = "disabled" in e ? e.disabled : t.disabled;
+    if (Ce(r)) {
+      let { key: l, ...o } = e ?? {};
+      return /* @__PURE__ */ G(
+        I,
+        {
+          disabled: d,
+          ...o,
+          key: i || l,
+          _key: i || l
+        },
+        (...P) => r(
+          ...P
+        )
+      );
+    }
+    if (he(r)) {
+      const l = H.Children.map(r, (o, P) => {
+        const z = y(o) && o.key || P, de = y(o) && "disabled" in o.props, ce = !w(d) && !de ? { key: z, disabled: d } : { key: z };
+        return y(o) ? K(o, ce) : o;
+      });
+      return /* @__PURE__ */ a(I, { ...e, field: void 0, children: l });
+    }
+    if (H.Children.count(r) == 1) {
+      if (i) {
+        const l = ((b = s == null ? void 0 : s.getItemKey) == null ? void 0 : b.call(s, i)) || i;
+        return /* @__PURE__ */ G(I, { disabled: d, ...e, key: l, _key: l }, r);
+      }
+      if (y(r)) {
+        if ((g = r.type) != null && g.isFormControl)
+          return r;
+        const o = !("disabled" in r.props) && !w(d) ? { disabled: d } : null;
+        return /* @__PURE__ */ a(I, { ...e, field: void 0, children: o ? K(r, o) : r });
+      }
+    }
+    return r;
+  }, me = B, E = {
+    ...t
+  };
+  return e.noStyle || (E.wrapperCol = void 0, E.labelCol = void 0), /* @__PURE__ */ a(J.Provider, { value: E, children: /* @__PURE__ */ a(me.Provider, { value: re, children: e.noStyle ? V() : /* @__PURE__ */ q(
+    Ie,
+    {
+      ref: h,
+      ...ve(oe, [
+        "tooltip",
+        "children",
+        "prefixCls",
+        "store",
+        "initialValue",
+        "field",
+        "labelCol",
+        "wrapperCol",
+        "colon",
+        "disabled",
+        "rules",
+        "trigger",
+        "triggerPropName",
+        "validateTrigger",
+        "noStyle",
+        "required",
+        "hasFeedback",
+        "help",
+        "normalize",
+        "formatter",
+        "getValueFromEvent",
+        "shouldUpdate",
+        "field",
+        "isInner",
+        "labelAlign",
+        "layout",
+        "requiredSymbol",
+        "isFormList"
+      ]),
+      className: se,
+      div: A !== "horizontal",
+      style: ne,
+      children: [
+        D ? /* @__PURE__ */ a(
+          Q,
+          {
+            ...e.labelCol || t.labelCol,
+            className: v(
+              ae,
+              (O = e.labelCol) == null ? void 0 : O.className,
+              (U = t.labelCol) == null ? void 0 : U.className,
+              {
+                [`${n}-label-item-flex`]: !e.labelCol && !t.labelCol
+              }
+            ),
+            children: /* @__PURE__ */ a(
+              we,
+              {
+                tooltip: e.tooltip,
+                htmlFor: e.field && ((_ = t == null ? void 0 : t.getFormElementId) == null ? void 0 : _.call(t, e.field)),
+                label: D,
+                prefix: S,
+                requiredSymbol: "requiredSymbol" in e ? e.requiredSymbol : t.requiredSymbol,
+                required: e.required,
+                rules: e.rules,
+                showColon: "colon" in e ? e.colon : t.colon
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ q(
+          Q,
+          {
+            className: v(`${n}-item-wrapper`, {
+              [`${n}-item-wrapper-flex`]: !e.wrapperCol && !t.wrapperCol
+            }),
+            ...e.wrapperCol || t.wrapperCol,
+            children: [
+              V(),
+              /* @__PURE__ */ a(
+                Ne,
+                {
+                  prefixCls: n,
+                  help: e.help,
+                  errors: M,
+                  warnings: p
+                }
+              ),
+              j && /* @__PURE__ */ a("div", { className: `${n}-extra`, children: j })
+            ]
+          }
+        )
+      ]
+    }
+  ) }) });
+}, Y = fe(Se);
+Y.defaultProps = {
+  trigger: "onChange",
+  triggerPropName: "value"
+};
+Y.displayName = "FormItem";
+export {
+  Y as default
+};

package/form/FormLabel.js

@@ -0,0 +1,54 @@
+import { jsxs as u, Fragment as j, jsx as r } from "react/jsx-runtime";
+import P from "@unicom-cloud/icons/IconUiQuestionCircleFill";
+import R from "lodash/isArray";
+import I from "lodash/isPlainObject";
+import U, { isValidElement as N } from "react";
+import g from "../Tooltip.js";
+import x from "@unicom-cloud/utils/class-name";
+import y from "./IconSymbol.js";
+import { ID_SUFFIX as C } from "./util.js";
+const X = ({
+  htmlFor: i,
+  showColon: m,
+  label: c,
+  requiredSymbol: n,
+  required: F,
+  rules: l,
+  prefix: a,
+  tooltip: o
+}) => {
+  const $ = R(l) && l.some((e) => e && e.required), p = I(n) ? n.position : "end", f = (F || $) && !!n && /* @__PURE__ */ r("strong", { className: `${a}-form-item-symbol`, children: /* @__PURE__ */ r(y, {}) }), b = () => {
+    if (!o)
+      return null;
+    const e = `${a}-form-item-tooltip`;
+    let s = {}, d = /* @__PURE__ */ r(P, { className: e });
+    if (!I(o) || N(o))
+      s = {
+        content: o
+      };
+    else {
+      const { icon: t, ...h } = o;
+      s = h, t && (d = N(t) ? U.cloneElement(t, {
+        className: x(
+          e,
+          t.props.className
+        )
+      }) : t);
+    }
+    return /* @__PURE__ */ r(g, { ...s, children: d });
+  };
+  return c ? /* @__PURE__ */ u("label", { htmlFor: i && `${i}${C}`, children: [
+    p !== "end" && f,
+    " ",
+    c,
+    b(),
+    p === "end" && /* @__PURE__ */ u(j, { children: [
+      " ",
+      f
+    ] }),
+    m ? m === !0 ? ":" : m : ""
+  ] }) : null;
+};
+export {
+  X as default
+};

package/form/FormList.js

@@ -0,0 +1,96 @@
+import { jsx as F } from "react/jsx-runtime";
+import g from "lodash/get";
+import $ from "lodash/isFunction";
+import M from "lodash/isUndefined";
+import { useRef as S } from "react";
+import j from "../utils/warning.js";
+import G from "./FormItem.js";
+import { FormListContext as b } from "./context.js";
+import { isFieldMatch as I, isSyntheticEvent as O } from "./util.js";
+const y = (i, n) => !M(i) && i >= 0 && i < n.length, R = (i) => {
+  const { field: n, children: v, initialValue: L } = i, p = S({
+    id: 0,
+    keys: []
+  }), k = "initialValue" in i ? { initialValue: L } : {}, s = p.current.keys;
+  return /* @__PURE__ */ F(
+    b.Provider,
+    {
+      value: {
+        getItemKey: (f) => {
+          const o = f == null ? void 0 : f.replace(/\[|\]/g, ".").split("."), c = o.indexOf(n), u = o[c + 1];
+          return `${n}_${s.indexOf(u)}_${o.slice(c + 2).join("_")}`;
+        }
+      },
+      children: /* @__PURE__ */ F(
+        G,
+        {
+          field: n,
+          ...k,
+          isFormList: !0,
+          rules: i.rules,
+          wrapperCol: { span: 24 },
+          noStyle: "noStyle" in i ? i.noStyle : !i.rules,
+          shouldUpdate: (f, o, c) => {
+            var u, h;
+            return !!(c && !c.isInner && I(c.field, [n]) && ((u = g(f, n)) == null ? void 0 : u.length) !== ((h = g(o, n)) == null ? void 0 : h.length));
+          },
+          children: (f, o, { value: c, onChange: u }) => {
+            const h = c || [], V = function(e, t) {
+              var d;
+              if (O(e)) {
+                j(
+                  !0,
+                  "Form.List: The event object cannot be used as a parameter of the add method"
+                );
+                return;
+              }
+              const r = ((d = o.getInnerMethods(!0)) == null ? void 0 : d.innerGetFieldValue(n)) || [], m = p.current.id;
+              p.current.id += 1;
+              const a = r || [];
+              let l = a;
+              t !== void 0 && t >= 0 && t <= a.length ? (s.splice(t, 0, m), l = [
+                ...a.slice(0, t),
+                e,
+                ...a.slice(t)
+              ]) : (s.push(m), l = [...a, e]), u(l, {
+                isFormList: !0,
+                ignore: e === void 0
+              });
+            }, _ = function(e) {
+              var m;
+              const r = (((m = o.getInnerMethods(!0)) == null ? void 0 : m.innerGetFieldValue(n)) || []).filter((a, l) => l !== e);
+              s.splice(e, 1), u([...r], { isFormList: !0 });
+            }, w = function(e, t) {
+              var d;
+              const r = ((d = o.getInnerMethods(!0)) == null ? void 0 : d.innerGetFieldValue(n)) || [];
+              if (e === t || !y(e, r) || !y(t, r))
+                return;
+              const m = s[e];
+              s.splice(e, 1), s.splice(t, 0, m);
+              const a = r[e], l = [...r];
+              l.splice(e, 1), l.splice(t, 0, a), u(l, { isFormList: !0 });
+            };
+            return $(v) && v(
+              h.map((e, t) => {
+                let r = s[t];
+                return r === void 0 && (r = p.current.id, s.push(r), p.current.id += 1), {
+                  field: `${n}[${t}]`,
+                  key: r
+                };
+              }),
+              {
+                add: V,
+                remove: _,
+                move: w
+              }
+            );
+          }
+        }
+      )
+    }
+  );
+};
+R.displayName = "FormList";
+export {
+  R as default
+};

package/form/FormProvider.js

@@ -0,0 +1,48 @@
+import { jsx as F } from "react/jsx-runtime";
+import { forwardRef as a, useRef as d, useCallback as m } from "react";
+import { FormProviderContext as l } from "./context.js";
+const v = (e, R) => {
+  const n = d({}), u = m((r, t) => (r && (n.current[r] = t), () => {
+    delete n.current[r];
+  }), []), i = m(
+    (r, t) => {
+      var o;
+      (o = e.onFormSubmit) == null || o.call(e, r, t, {
+        forms: n.current
+      });
+    },
+    [e.onFormSubmit]
+  ), c = m(
+    (r, t) => {
+      var o;
+      (o = e.onFormReset) == null || o.call(e, r, t, {
+        forms: n.current
+      });
+    },
+    [e.onFormReset]
+  ), f = m(
+    (r, t) => {
+      var o;
+      (o = e.onFormValuesChange) == null || o.call(e, r, t, {
+        forms: n.current
+      });
+    },
+    [e.onFormValuesChange]
+  );
+  return /* @__PURE__ */ F(
+    l.Provider,
+    {
+      value: {
+        onFormValuesChange: f,
+        onFormSubmit: i,
+        onFormReset: c,
+        register: u
+      },
+      children: e.children
+    }
+  );
+}, C = a(v);
+C.displayName = "FormProvider";
+export {
+  C as default
+};

package/form/IconSymbol.js

@@ -0,0 +1,20 @@
+import { jsx as l } from "react/jsx-runtime";
+function o(e) {
+  return /* @__PURE__ */ l(
+    "svg",
+    {
+      width: "1em",
+      height: "1em",
+      "aria-hidden": !0,
+      focusable: !1,
+      fill: "currentColor",
+      stroke: "none",
+      viewBox: "0 0 48 48",
+      ...e,
+      children: /* @__PURE__ */ l("path", { d: "M30.841,46.115l5.864,-2.824l-6.841,-14.205l15.371,3.508l1.449,-6.345l-15.372,-3.509l12.327,-9.83l-4.058,-5.088l-12.327,9.83l0,-15.767l-6.508,0l-0,15.767l-12.327,-9.83l-4.058,5.088l12.327,9.83l-15.372,3.509l1.449,6.345l15.371,-3.508l-6.841,14.205l5.864,2.824l6.841,-14.206l6.841,14.206Z" })
+    }
+  );
+}
+export {
+  o as default
+};

package/form/context.js

@@ -0,0 +1,43 @@
+import { createContext as t } from "react";
+import { NOOP as e } from "../utils/constant.js";
+const o = t({
+  layout: "horizontal",
+  labelCol: { span: 5, offset: 0 },
+  labelAlign: "right",
+  wrapperCol: { span: 19, offset: 0 },
+  requiredSymbol: !0,
+  getFormElementId: () => "pqb-",
+  store: {
+    clearFields: e,
+    getFieldsValue: e,
+    getFieldValue: e,
+    getFieldError: e,
+    getFieldsError: e,
+    getTouchedFields: e,
+    getFields: e,
+    getInitialValues: e,
+    setInitialValues: e,
+    setInitialValue: e,
+    setFieldValue: e,
+    setFieldsValue: e,
+    setFields: e,
+    resetFields: e,
+    submit: e,
+    validate: e,
+    getFieldsState: e,
+    scrollToField: e,
+    getInnerMethods: () => ({
+      registerField: e,
+      innerGetStore: e,
+      registerStateWatcher: e,
+      registerWatcher: e,
+      innerGetStoreStatus: e
+    })
+  }
+}), i = t({}), s = t({}), a = t({});
+export {
+  o as FormContext,
+  i as FormItemContext,
+  a as FormListContext,
+  s as FormProviderContext
+};

package/form/hook/useContext.js

@@ -0,0 +1,32 @@
+import { useContext as d, useRef as f, useCallback as p, useEffect as S } from "react";
+import { FormContext as a } from "../context.js";
+import c from "../../hooks/useForceUpdate.js";
+import g from "../../utils/warning.js";
+import { SubmitStatus as l } from "../interface.js";
+const R = () => {
+  const i = d(a), t = i.store, u = f(!1), m = c(), b = p(() => {
+    var o, e, n;
+    const { submitStatus: r } = ((n = (e = (o = t == null ? void 0 : t.getInnerMethods) == null ? void 0 : o.call(t, !0)) == null ? void 0 : e.innerGetStoreStatus) == null ? void 0 : n.call(e)) ?? {}, s = r === l.submitting;
+    s !== u.current && (u.current = s, m());
+  }, []);
+  return S(() => {
+    var e;
+    if (!t) {
+      g(!0, "formInstance is not available");
+      return;
+    }
+    const { registerFormWatcher: r } = ((e = t == null ? void 0 : t.getInnerMethods) == null ? void 0 : e.call(t, !0)) ?? {}, s = () => b();
+    s();
+    const o = (r == null ? void 0 : r(s)) ?? {};
+    return () => {
+      o == null || o();
+    };
+  }, []), {
+    form: t,
+    disabled: i.disabled,
+    isSubmitting: u.current
+  };
+};
+export {
+  R as default
+};