@unicom-cloud/ui 0.8.44 → 0.8.46

package/cascader/Cascader.js

@@ -0,0 +1,300 @@
+import { jsx as d } from "react/jsx-runtime";
+import ce from "@unicom-cloud/icons/IconUiCheck";
+import de from "@unicom-cloud/icons/IconUiLeft";
+import pe from "@unicom-cloud/icons/IconUiLoading";
+import me from "@unicom-cloud/icons/IconUiRight";
+import { isEmptyValue as fe, isEmptyArray as he } from "@unicom-cloud/utils/is";
+import ge from "lodash/isArray";
+import w from "lodash/isFunction";
+import I from "lodash/isPlainObject";
+import Ce from "lodash/isString";
+import { forwardRef as Ve, useContext as ve, useRef as S, useState as ye, useEffect as W, useImperativeHandle as Se, useCallback as $ } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import be from "../hooks/useForceUpdate.js";
+import ke from "../hooks/useId.js";
+import we from "../hooks/useMergeProps.js";
+import j from "../hooks/useMergeValue.js";
+import Oe from "../hooks/useUpdateEffect.js";
+import Ee from "../SelectView.js";
+import Ne from "../Trigger.js";
+import Pe from "@unicom-cloud/utils/class-name";
+import { Esc as xe, Enter as Ie, Tab as Me } from "../utils/keyCode.js";
+import Le from "./hook/useRefCurrent.js";
+import Te from "./panel/List.js";
+import Re from "./panel/Search.js";
+import { getConfig as De, getStore as Fe, formatValue as b, SHOW_CHILD as Ae, transformValuesToSet as Ue, valueInSet as Be, removeValueFromSet as _e, PANEL_MODE as z } from "./util.js";
+import { ConfigContext as He } from "../config-provider/context.js";
+const We = {
+  label: "label",
+  value: "value",
+  isLeaf: "isLeaf",
+  children: "children",
+  disabled: "disabled"
+}, $e = {
+  options: [],
+  bordered: !0,
+  fieldNames: We,
+  trigger: "click",
+  expandTrigger: "click",
+  checkedStrategy: Ae,
+  defaultActiveFirstOption: !0
+}, je = { bottom: 4 };
+function ze(K, J) {
+  const { getPrefixCls: q, renderEmpty: G, componentConfig: O, rtl: v } = ve(He), e = we(
+    K,
+    $e,
+    O == null ? void 0 : O.Cascader
+  ), {
+    disabled: M,
+    renderFormat: E,
+    getPopupContainer: Q,
+    children: L,
+    triggerProps: X,
+    expandTrigger: Y,
+    icons: f
+  } = e, T = {
+    loading: (f == null ? void 0 : f.loading) || /* @__PURE__ */ d(pe, {}),
+    checked: (f == null ? void 0 : f.checked) || /* @__PURE__ */ d(ce, {}),
+    next: (f == null ? void 0 : f.next) || (v ? /* @__PURE__ */ d(de, {}) : /* @__PURE__ */ d(me, {}))
+  }, g = q("cascader"), a = e.mode === "multiple", y = S(null), Z = be(), l = Le(() => Fe(
+    e,
+    b(
+      "value" in e ? e.value : e.defaultValue,
+      a
+    )
+  ), [JSON.stringify(De(e)), e.options]), [R, D] = ye(() => "value" in e ? b(e.value, a, l) : "defaultValue" in e ? b(e.defaultValue, a, l) : []), h = "value" in e ? b(e.value, a, l) : R, [u, ee] = j(!1, {
+    value: e.popupVisible,
+    defaultValue: e.defaultPopupVisible
+  }), [c, te, re] = j("", {
+    value: "inputValue" in e ? e.inputValue || "" : void 0
+  }), k = S(c), F = S(null), C = S(null), N = S((l == null ? void 0 : l.getCheckedNodes()) || []), A = ke(`${g}-popup-`), P = (t, r) => {
+    var n;
+    t !== k.current && (te(t), k.current = t, F.current = r, (n = e.onInputValueChange) == null || n.call(e, t, r));
+  };
+  function ne(t) {
+    return fe(t) || he(t);
+  }
+  W(() => {
+    var r;
+    const { current: t } = F;
+    re === c && (t === "manual" || t === "optionListHide") && ((r = e.onSearch) == null || r.call(e, c, t)), c !== k.current && (k.current = c);
+  }, [c]), W(() => {
+    const t = () => {
+      clearTimeout(y.current), y.current = null;
+    };
+    return !u && c && (y.current && t(), y.current = setTimeout(() => {
+      P("", "optionListHide"), y.current = null;
+    }, 200)), () => {
+      t();
+    };
+  }, [u]), Oe(() => {
+    if ("value" in e && e.value !== R) {
+      const t = b(e.value, a);
+      l.setNodeCheckedByValue(t), D(t);
+    }
+  }, [e.value, a]), Se(J, () => C.current, []);
+  const oe = (t) => {
+    N.current = Array.from(
+      new Set([].concat(t, N.current))
+    );
+  }, U = (t) => {
+    const r = [], n = Ue(t), i = (o) => {
+      o.some((s) => {
+        if (Be(n, s.pathValue) && (r.push(s.getPathNodes().map((m) => m._data)), _e(n, s.pathValue)), !n.size)
+          return !0;
+      });
+    };
+    return i(l.getCheckedNodes()), n.size && i(N.current), r;
+  }, p = $(
+    (t) => {
+      var r;
+      t !== u && ((r = e.onVisibleChange) == null || r.call(e, t), "popupVisible" in e || ee(t));
+    },
+    [e.onVisibleChange, u]
+  ), ie = $(
+    (t) => {
+      var o;
+      const r = U([t])[0] || [];
+      let n, i = ge(t) ? t.map((s) => String(s)) : [];
+      return r.length && (i = r.map((s) => s.label)), w(E) ? n = E(i) : i.every((s) => Ce(s)) ? n = i.join(" / ") : n = i.reduce((s, m, x) => s.concat(x === 0 ? [m] : [" / ", m]), []), {
+        text: n || "",
+        disabled: (o = r[r.length - 1]) == null ? void 0 : o.disabled
+      };
+    },
+    [l, E]
+  ), V = (t, r) => {
+    var H;
+    r === "panel" && I(e.showSearch) && !e.showSearch.retainInputValueWhileSelect && a && P("", "optionChecked");
+    const { onChange: n, changeOnSelect: i, expandTrigger: o } = e;
+    if (h === t)
+      return;
+    a || l.setNodeCheckedByValue(t), oe(l.getCheckedNodes());
+    const m = U(t), x = a ? t : t[0], ue = a ? m : m[0];
+    a || (c || m[0] && ((H = m[0][m[0].length - 1]) != null && H.isLeaf) || i && o === "hover") && p(!1), "value" in e ? (l.setNodeCheckedByValue(h), Z()) : D(t), n == null || n(x, ue, {
+      dropdownVisible: u
+    });
+  }, ae = (t, r, n) => {
+    if (n.stopPropagation(), t.disabled)
+      return;
+    const i = h.filter((o, s) => s !== r);
+    l.setNodeCheckedByValue(i), V(i);
+  }, B = (t) => {
+    const r = t || C.current && C.current.getWidth();
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        className: `${g}-list-empty`,
+        style: { width: r },
+        children: e.notFoundContent || G("Cascader")
+      }
+    );
+  }, le = () => {
+    const t = I(e.showSearch) ? e.showSearch.panelMode : void 0, r = t === z.select ? !0 : t === z.cascader ? !1 : !w(e.onSearch) && !!c, n = C.current && C.current.getWidth(), i = w(e.dropdownRender) ? e.dropdownRender : (o) => o;
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        id: A,
+        className: Pe(`${g}-popup`, e.dropdownMenuClassName, {
+          [`${g}-popup-trigger-hover`]: e.expandTrigger === "hover"
+        }),
+        children: i(
+          /* @__PURE__ */ d(
+            "div",
+            {
+              className: `${g}-popup-inner`,
+              onMouseDown: (o) => o.preventDefault(),
+              children: r ? /* @__PURE__ */ d(
+                Re,
+                {
+                  style: { minWidth: n },
+                  store: l,
+                  inputValue: c,
+                  renderEmpty: () => B(n),
+                  multiple: a,
+                  onChange: (o) => {
+                    V(o, "panel");
+                  },
+                  prefixCls: g,
+                  rtl: v,
+                  onEsc: () => {
+                    p(!1);
+                  },
+                  renderOption: I(e.showSearch) && e.showSearch.renderOption || void 0,
+                  getTriggerElement: () => {
+                    var o;
+                    return (o = C.current) == null ? void 0 : o.dom;
+                  },
+                  value: h,
+                  virtualListProps: e.virtualListProps,
+                  defaultActiveFirstOption: e.defaultActiveFirstOption,
+                  icons: T
+                }
+              ) : /* @__PURE__ */ d(
+                Te,
+                {
+                  dropdownMenuColumnStyle: e.dropdownMenuColumnStyle,
+                  virtualListProps: e.virtualListProps,
+                  expandTrigger: Y,
+                  store: l,
+                  dropdownColumnRender: e.dropdownColumnRender,
+                  renderOption: e.renderOption,
+                  changeOnSelect: e.changeOnSelect,
+                  showEmptyChildren: e.showEmptyChildren || !!e.loadMore,
+                  multiple: a,
+                  onChange: (o) => {
+                    V(o, "panel");
+                  },
+                  loadMore: e.loadMore,
+                  prefixCls: g,
+                  rtl: v,
+                  getTriggerElement: () => {
+                    var o;
+                    return (o = C.current) == null ? void 0 : o.dom;
+                  },
+                  renderEmpty: B,
+                  popupVisible: u,
+                  value: h,
+                  renderFooter: e.renderFooter,
+                  icons: T,
+                  onEsc: () => {
+                    p(!1);
+                  },
+                  onDoubleClickOption: () => {
+                    e.changeOnSelect && !a && p(!1);
+                  }
+                }
+              )
+            }
+          )
+        )
+      }
+    );
+  }, se = (t) => {
+    V(t);
+  }, _ = (t) => /* @__PURE__ */ d(
+    Ne,
+    {
+      popup: le,
+      trigger: e.trigger,
+      disabled: M,
+      getPopupContainer: Q,
+      position: v ? "br" : "bl",
+      classNames: "slideDynamicOrigin",
+      popupAlign: je,
+      unmountOnExit: "unmountOnExit" in e ? e.unmountOnExit : !w(e.loadMore),
+      popupVisible: u,
+      ...X,
+      onVisibleChange: p,
+      children: t
+    }
+  );
+  return L ? _(L) : /* @__PURE__ */ d(
+    Ee,
+    {
+      ...e,
+      ref: C,
+      ariaControls: A,
+      popupVisible: u,
+      value: a ? h : h && h[0],
+      inputValue: c,
+      rtl: v,
+      isEmptyValue: ne(h),
+      prefixCls: g,
+      isMultiple: a,
+      renderText: ie,
+      onRemoveCheckedItem: ae,
+      onSort: se,
+      renderView: _,
+      onClear: (t) => {
+        var r;
+        if (t.stopPropagation(), !a)
+          V([]);
+        else {
+          const i = l.getCheckedNodes().filter((o) => o.disabled).map((o) => o.pathValue);
+          l.setNodeCheckedByValue(i), V(i);
+        }
+        (r = e.onClear) == null || r.call(e, !!u);
+      },
+      onKeyDown: (t) => {
+        var n;
+        if (M)
+          return;
+        t.stopPropagation();
+        const r = t.key;
+        r === xe.key && u && (p(!1), t.preventDefault()), r === Ie.key && !u && (p(!0), t.preventDefault()), r === Me.key && u && p(!1), (n = e.onKeyDown) == null || n.call(e, t);
+      },
+      onChangeInputValue: (t) => {
+        P(t, "manual"), u || p(!0);
+      }
+    }
+  );
+}
+const Ke = Ve(
+  ze
+);
+Ke.displayName = "Cascader";
+export {
+  We as DefaultFieldNames,
+  Ke as default
+};

package/cascader/base/node.js

@@ -0,0 +1,142 @@
+var b = Object.defineProperty;
+var k = (d, e, t) => e in d ? b(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t;
+var a = (d, e, t) => k(d, typeof e != "symbol" ? e + "" : e, t);
+import c from "lodash/get";
+import { DefaultFieldNames as g } from "../Cascader.js";
+class _ {
+  constructor(e, t, h) {
+    a(this, "value");
+    a(this, "label");
+    // 是否禁用
+    a(this, "disabled");
+    a(this, "_level");
+    a(this, "_index");
+    a(this, "isLeaf");
+    a(this, "disableCheckbox");
+    // 是否选中
+    a(this, "_checked");
+    /** 是否半选 */
+    a(this, "_halfChecked");
+    /** 当前选项节点的父节点 */
+    a(this, "parent");
+    /** 当前选项节点路径的所有节点的值 */
+    a(this, "pathValue", []);
+    a(this, "pathLabel", []);
+    /** 下一级选项 */
+    a(this, "children");
+    /** 是否在加载中 */
+    a(this, "loading");
+    /** 是否加载完成 */
+    a(this, "loaded");
+    a(this, "config", {});
+    // 保存暴露给外部的属性
+    a(this, "_data");
+    a(this, "_initNode", (e, t = null) => {
+      const { showEmptyChildren: h, lazyload: i } = this.config, l = { ...g, ...this.config.fieldNames }, n = c(e, l.children) || e[l.children];
+      let f = Array.isArray(n) ? h ? !1 : n.length === 0 : !0;
+      i && (l.isLeaf in e ? f = !!c(e, l.isLeaf) || !!e[l.isLeaf] : f = !1);
+      const u = c(e, l.value) || e[l.value], o = c(e, l.label) || e[l.label], r = {
+        ...e,
+        value: u,
+        label: o,
+        isLeaf: f,
+        loading: !1,
+        loaded: !1,
+        disabled: t && t.disabled || c(e, l.disabled) || e[l.disabled],
+        parent: t,
+        pathValue: t ? [...t.pathValue, u] : [u],
+        pathLabel: t ? [...t.pathLabel, o] : [o],
+        _level: t ? t._level + 1 : 0,
+        _checked: !1,
+        _halfChecked: !1
+      };
+      this._data = {
+        ...r,
+        parent: r.parent && r.parent._data
+      }, Object.keys(r).forEach((s) => {
+        this[s] = r[s];
+      }), n && n.length && (this.children = n.map((s, C) => new _({ ...s, _index: C }, this.config, this)), this._data.children = this.children.map((s) => s._data));
+    });
+    /**
+     * 根据this.children 计算是否当前node半选状态
+     * 假设半选是 0.5，全选是1，不选是0。
+     * 那么只有当前节点的所有children加起来等于children.length，才是全选，否则和大于0，就是半选。
+     */
+    a(this, "_isHalfChecked", () => {
+      const e = this.children.reduce((t, h) => {
+        const i = h._halfChecked ? 0.5 : h._checked ? 1 : 0;
+        return t + i;
+      }, 0);
+      return e !== this.children.length && e > 0;
+    });
+    /**
+     *
+     * @param checked 选中状态
+     * @param ignoreDisabled 是否忽略节点禁用设置选中状态，一般在初始化设置选中状态时传参为true
+     */
+    a(this, "_setNodeChildrenChecked", (e, t) => {
+      !t && this.disabled || this.children && this.children.length && (this.children.forEach((h) => {
+        h.disabled ? t && h.setCheckedStateIgnoreDisabled(e) : h.setCheckedState(e);
+      }), this.updateHalfState(e));
+    });
+    a(this, "getSelfChildrenValue", () => {
+      const e = [], t = (h, i) => {
+        if (!i || !i.length) {
+          e.push(h);
+          return;
+        }
+        (i || []).forEach((l) => {
+          t(l.pathValue, l.children);
+        });
+      };
+      return t(this.pathValue, this.children), e;
+    });
+    a(this, "updateHalfState", (e) => {
+      this._halfChecked = this._isHalfChecked(), this._checked = this._halfChecked ? !1 : e;
+    });
+    // 直接设置选中状态
+    a(this, "setCheckedProperty", (e) => {
+      this._checked = e, this._halfChecked = !1;
+    });
+    // 设置当前节点选中状态
+    a(this, "setCheckedState", (e) => {
+      const t = e ? this._checked : !this._checked && !this._halfChecked;
+      if (!(this.disabled || t) && (this.setCheckedProperty(e), !this.config.changeOnSelect)) {
+        this._setNodeChildrenChecked(e);
+        let h = this.parent;
+        for (; h && !h.disabled; )
+          h.updateHalfState(e), h = h.parent;
+      }
+    });
+    // 忽略禁用设置选中状态
+    a(this, "setCheckedStateIgnoreDisabled", (e) => {
+      if (e !== !!this._checked && (this.setCheckedProperty(e), !this.config.changeOnSelect)) {
+        this._setNodeChildrenChecked(e, !0);
+        let t = this.parent;
+        for (; t; )
+          t.updateHalfState(e), t = t.parent;
+      }
+    });
+    /**
+     * 遍历节点的parent，获取当前节点的路径节点。
+     * node: { label: '1-1-1', parent: { label: '1-1', parent: { label: '1' }, ... }, ...}
+     * @return [node.parent.parent, node.parent, node]
+     * @memberof Store
+     */
+    a(this, "getPathNodes", () => {
+      const e = [this];
+      let t = this.parent;
+      for (; t; )
+        e.unshift(t), t = t.parent;
+      return e;
+    });
+    a(this, "getChildren", () => this.children);
+    a(this, "setLoading", (e) => {
+      this.loading = e, (e || e === void 0) && (this.loaded = !1), e === !1 && (this.loaded = !0);
+    });
+    this.config = t || {}, this._initNode(e, h || null);
+  }
+}
+export {
+  _ as default
+};

package/cascader/base/store.js

@@ -0,0 +1,93 @@
+var l = Object.defineProperty;
+var c = (i, e, t) => e in i ? l(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var a = (i, e, t) => c(i, typeof e != "symbol" ? e + "" : e, t);
+import d from "lodash/isArray";
+import u from "lodash/isEqualWith";
+import N from "lodash/isFunction";
+import g from "lodash/isString";
+import { transformValuesToSet as m, valueInSet as n } from "../util.js";
+import p from "./node.js";
+class P {
+  constructor(e, t, s) {
+    a(this, "nodes", []);
+    a(this, "flatNodes", []);
+    a(this, "config", {});
+    // 初始化节点状态，附加状态信息字段： _checked,_halfChecked,parent,disabled
+    a(this, "_calcNodes", (e, t) => e ? e.map((s, r) => new p({ ...s, _index: r }, this.config, t)) : []);
+    // this.flatNodes 保存所有可能的选中项
+    a(this, "_updateFlatNodes", () => {
+      const e = !this.config.changeOnSelect;
+      this.flatNodes = [];
+      const t = (s) => {
+        s && ((!e || s.isLeaf) && this.flatNodes.push(s), d(s.children) && s.children.forEach((r) => {
+          t(r);
+        }));
+      };
+      this.nodes.forEach((s) => {
+        t(s);
+      });
+    });
+    /**
+     * values: 全部的选中值
+     * 根据values更新节点状态。不包含在values的节点都设置为未选中状态
+     * @memberof Store
+     */
+    a(this, "setNodeCheckedByValue", (e) => {
+      const t = m(e);
+      this.flatNodes.forEach((s) => {
+        let r = !1;
+        this.config.showParent ? s.pathValue.some(
+          (o, h, f) => n(t, f.slice(0, h + 1))
+        ) && (r = !0) : n(t, s.pathValue) && (r = !0), s.setCheckedStateIgnoreDisabled(r);
+      });
+    });
+    /**
+     * 为当前节点插入子节点。动态加载时候用到
+     */
+    a(this, "appendOptionChildren", (e, t) => {
+      if (t && e) {
+        const s = this._calcNodes(t, e);
+        e.children = s, this._updateFlatNodes(), this.config.changeOnSelect || e.setCheckedState(!1);
+      }
+    });
+    /**
+     * 通过 value 查找对应的node节点。
+     * value: 是路径节点的value组成的数组
+     */
+    a(this, "findNodeByValue", (e) => {
+      let t = null;
+      return !e || !e.length || this.flatNodes.some((s) => {
+        u(s.pathValue, e) && (t = s);
+      }), t;
+    });
+    /**
+     * 搜索所有label含有关键字的节点
+     */
+    a(this, "searchNodeByLabel", (e) => {
+      if (!e)
+        return this.flatNodes;
+      const { filterOption: t } = this.config, s = N(t) ? t : (r, o) => g(o.label) && o.label.indexOf(r) > -1;
+      return this.flatNodes.filter((r) => r.getPathNodes().some((h) => s(e, h._data)));
+    });
+    /** 获取所有节点 */
+    a(this, "getOptions", () => this.nodes);
+    /** 获取所有选中状态的节点。 aggregation: 是否聚合节点 */
+    a(this, "getCheckedNodes", () => this.config.showParent ? this.getCheckedParentNodes() : this.flatNodes.filter((e) => e._checked));
+    // 按照父节点纬度聚合当前所有选中节点。
+    a(this, "getCheckedParentNodes", () => {
+      const e = /* @__PURE__ */ new Set();
+      return this.flatNodes.forEach((t) => {
+        t._checked && t.getPathNodes().some((r) => {
+          if (r._checked)
+            return e.has(r) || e.add(r), !0;
+        });
+      }), Array.from(e);
+    });
+    this.config = { ...s };
+    const r = Array.isArray(t) ? t : [];
+    this.nodes = this._calcNodes(e, null), this._updateFlatNodes(), this.setNodeCheckedByValue(r);
+  }
+}
+export {
+  P as default
+};

package/cascader/hook/useRefCurrent.js

@@ -0,0 +1,12 @@
+import { useRef as o } from "react";
+import u from "../../hooks/useForceUpdate.js";
+import c from "../../hooks/useUpdateEffect.js";
+function m(e, t) {
+  const r = o(null), f = u();
+  return r.current || (r.current = e()), c(() => {
+    r.current = e(), f();
+  }, [...t]), r.current;
+}
+export {
+  m as default
+};