@cozeloop/components 0.0.1

package/dist/lib/columns-select/index.js

@@ -0,0 +1,241 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var columns_select_exports = {};
+__export(columns_select_exports, {
+  ColumnSelector: () => ColumnSelector
+});
+module.exports = __toCommonJS(columns_select_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var sort = __toESM(require("react-sortable-hoc"));
+var import_react = require("react");
+var import_icons = require("@coze-arch/coze-design/icons");
+var import_coze_design = require("@coze-arch/coze-design");
+const { sortableContainer, sortableElement, sortableHandle } = sort;
+const { arrayMove } = sort;
+const ColumnSelector = ({
+  columns,
+  defaultColumns = columns,
+  onChange,
+  buttonText,
+  resetButtonText = "重置为默认",
+  className,
+  sortable = true,
+  itemRender,
+  footerRender
+}) => {
+  const [list, setList] = (0, import_react.useState)(() => [...columns]);
+  const selectedKeys = (0, import_react.useMemo)(
+    () => list.filter((item) => item.checked).map((item) => item.key),
+    [list]
+  );
+  const disabledKeys = (0, import_react.useMemo)(
+    () => list.filter((item) => item.disabled).map((item) => item.key),
+    [list]
+  );
+  const DragHandle = sortableHandle(() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_icons.IconCozHandle,
+    {
+      className: "cursor-grab",
+      "aria-label": "拖动排序",
+      role: "button"
+    }
+  ));
+  const RenderItem = (value, slot) => {
+    var _a, _b, _c;
+    const render = itemRender ? itemRender(value) : null;
+    if (render) {
+      return render;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: "group flex items-center justify-between py-1 px-2 text-[var(--coz-fg-primary)] z-[99999] select-none hover:bg-[var(--coz-mg-secondary)] rounded-[6px] cursor-pointer bg-white",
+        style: {
+          zIndex: 99999
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: "flex items-center gap-x-2 max-w-full w-full",
+            onClick: () => {
+              var _a2, _b2;
+              if (disabledKeys.includes((_a2 = value.key) != null ? _a2 : "") || value.disabled) {
+                return;
+              }
+              const newKeys = selectedKeys.includes((_b2 = value.key) != null ? _b2 : "") ? selectedKeys.filter((key) => key !== value.key) : [...selectedKeys, value.key];
+              const newColumns = list.map((item) => {
+                if (newKeys.includes(item.key)) {
+                  return __spreadProps(__spreadValues({}, item), {
+                    checked: true
+                  });
+                }
+                return __spreadProps(__spreadValues({}, item), {
+                  checked: false
+                });
+              });
+              setList(newColumns);
+              onChange == null ? void 0 : onChange(newColumns);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_coze_design.Checkbox,
+                {
+                  disabled: disabledKeys.includes((_a = value.key) != null ? _a : "") || value.disabled,
+                  checked: selectedKeys.includes((_b = value.key) != null ? _b : ""),
+                  "aria-label": `选择${value.value}`
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_coze_design.Typography.Text,
+                {
+                  ellipsis: {
+                    showTooltip: {
+                      opts: {
+                        content: value.value,
+                        theme: "dark"
+                      }
+                    }
+                  },
+                  className: "text-[13px] text-[var(--coz-fg-primary)] flex-1 overflow-hidden w-full",
+                  style: {
+                    color: disabledKeys.includes((_c = value.key) != null ? _c : "") || value.disabled ? "var(--coz-fg-dim)" : ""
+                  },
+                  children: value.value
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity flex items-center coz-fg-secondary", children: slot })
+            ]
+          }
+        )
+      }
+    );
+  };
+  const SortableItem = sortableElement(
+    ({ value }) => RenderItem(value, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragHandle, {}))
+  );
+  const SortableContainer = sortableContainer(
+    ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "max-w-[200px] w-fit rounded-[6px] py-2 px-1 max-h-[372px] overflow-y-auto flex gap-y-1 flex-col", children })
+  );
+  const handleSortEnd = ({
+    oldIndex,
+    newIndex
+  }) => {
+    const newList = arrayMove(list, oldIndex, newIndex);
+    setList(newList);
+    onChange == null ? void 0 : onChange(newList);
+  };
+  const handleReset = () => {
+    setList(defaultColumns);
+    onChange == null ? void 0 : onChange(defaultColumns);
+  };
+  (0, import_react.useEffect)(() => {
+    setList(columns);
+  }, [columns]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_coze_design.Dropdown,
+    {
+      position: "bottomRight",
+      render: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          onClick: (event) => {
+            event.stopPropagation();
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortableContainer, { onSortEnd: handleSortEnd, useDragHandle: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: list.map(
+              (value, index) => (value == null ? void 0 : value.disabled) || !sortable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: RenderItem(value) }, `item-${value.key}`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                SortableItem,
+                {
+                  index,
+                  value
+                },
+                `item-${value.key}`
+              )
+            ) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Divider, {}),
+            footerRender ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center", children: [
+              footerRender(list),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_coze_design.Button,
+                {
+                  color: "secondary",
+                  type: "secondary",
+                  className: "text-center flex-1",
+                  onClick: handleReset,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-brand font-medium text-[13px]", children: resetButtonText })
+                }
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_coze_design.Button,
+              {
+                color: "secondary",
+                type: "secondary",
+                className: "w-full text-center",
+                onClick: handleReset,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-brand font-medium text-[13px]", children: resetButtonText })
+              }
+            )
+          ]
+        }
+      ),
+      trigger: "click",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Tooltip, { content: "列管理", theme: "dark", position: "top", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_coze_design.Button,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.IconCozTableSetting, {}),
+          type: "primary",
+          color: "primary",
+          className: "flex items-center justify-center",
+          "aria-label": buttonText
+        }
+      ) }) })
+    }
+  ) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColumnSelector
+});

package/dist/lib/hooks/use-infinite-scroll.js

@@ -0,0 +1,195 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var use_infinite_scroll_exports = {};
+__export(use_infinite_scroll_exports, {
+  useInfiniteScroll: () => useInfiniteScroll
+});
+module.exports = __toCommonJS(use_infinite_scroll_exports);
+var import_react = require("react");
+var import_domTarget = require("ahooks/lib/utils/domTarget");
+var import_ahooks = require("ahooks");
+var import_rect = require("../utils/rect");
+const useInfiniteScroll = (service, options = {}) => {
+  const {
+    target,
+    isNoMore,
+    threshold = 100,
+    reloadDeps = [],
+    manual,
+    onBefore,
+    onSuccess,
+    onError,
+    onFinally
+  } = options;
+  const [finalData, setFinalData] = (0, import_react.useState)();
+  const [loadingMore, setLoadingMore] = (0, import_react.useState)(false);
+  const noMore = (0, import_react.useMemo)(() => {
+    if (!isNoMore) {
+      return false;
+    }
+    return isNoMore(finalData);
+  }, [finalData]);
+  const { loading, error, run, runAsync, cancel } = (0, import_ahooks.useRequest)(
+    (lastData) => __async(void 0, null, function* () {
+      var _a, _b;
+      const currentData = yield service(lastData);
+      if (!lastData) {
+        setFinalData(__spreadProps(__spreadValues({}, currentData), {
+          list: [...(_a = currentData.list) != null ? _a : []]
+        }));
+      } else {
+        setFinalData(__spreadProps(__spreadValues({}, currentData), {
+          list: [...(_b = lastData.list) != null ? _b : [], ...currentData.list]
+        }));
+      }
+      return currentData;
+    }),
+    {
+      manual,
+      onFinally: (_, d, e) => {
+        setLoadingMore(false);
+        onFinally == null ? void 0 : onFinally(d, e);
+      },
+      onBefore: () => onBefore == null ? void 0 : onBefore(),
+      onSuccess: (d) => {
+        onSuccess == null ? void 0 : onSuccess(d);
+        setTimeout(() => {
+          checkFirstScreen();
+        });
+      },
+      onError
+    }
+  );
+  const loadMore = (0, import_ahooks.useMemoizedFn)(() => {
+    if (noMore) {
+      return;
+    }
+    setLoadingMore(true);
+    run(finalData);
+  });
+  const loadMoreAsync = (0, import_ahooks.useMemoizedFn)(() => {
+    if (noMore) {
+      return Promise.reject();
+    }
+    setLoadingMore(true);
+    return runAsync(finalData);
+  });
+  const reload = () => {
+    setLoadingMore(false);
+    setFinalData(void 0);
+    return run();
+  };
+  const reloadAsync = () => {
+    setLoadingMore(false);
+    return runAsync();
+  };
+  const checkFirstScreen = () => {
+    let el = (0, import_domTarget.getTargetElement)(target);
+    if (!el) {
+      return;
+    }
+    el = el === document ? document.documentElement : el;
+    const scrollHeight = (0, import_rect.getScrollHeight)(el);
+    const clientHeight = (0, import_rect.getClientHeight)(el);
+    if (scrollHeight <= clientHeight) {
+      loadMore();
+    }
+  };
+  const scrollMethod = () => {
+    let el = (0, import_domTarget.getTargetElement)(target);
+    if (!el) {
+      return;
+    }
+    el = el === document ? document.documentElement : el;
+    const scrollTop = (0, import_rect.getScrollTop)(el);
+    const scrollHeight = (0, import_rect.getScrollHeight)(el);
+    const clientHeight = (0, import_rect.getClientHeight)(el);
+    if (scrollHeight - scrollTop <= clientHeight + threshold) {
+      loadMore();
+    }
+  };
+  (0, import_ahooks.useEventListener)(
+    "scroll",
+    () => {
+      if (loading || loadingMore) {
+        return;
+      }
+      scrollMethod();
+    },
+    { target }
+  );
+  (0, import_ahooks.useUpdateEffect)(() => {
+    setFinalData(void 0);
+    run();
+  }, [...reloadDeps]);
+  return {
+    data: finalData,
+    loading: !loadingMore && loading,
+    error,
+    loadingMore,
+    noMore,
+    loadMore,
+    loadMoreAsync,
+    reload: (0, import_ahooks.useMemoizedFn)(reload),
+    reloadAsync: (0, import_ahooks.useMemoizedFn)(reloadAsync),
+    mutate: setFinalData,
+    cancel
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useInfiniteScroll
+});

package/dist/lib/hooks/use-mouse-down-offset.js

@@ -0,0 +1,65 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_mouse_down_offset_exports = {};
+__export(use_mouse_down_offset_exports, {
+  useMouseDownOffset: () => useMouseDownOffset
+});
+module.exports = __toCommonJS(use_mouse_down_offset_exports);
+var import_react = require("react");
+var import_ahooks = require("ahooks");
+const useMouseDownOffset = (callback) => {
+  const [isActive, setIsActive] = (0, import_react.useState)(false);
+  const targetRef = (0, import_react.useRef)(null);
+  const [startPosition, setStartPosition] = (0, import_react.useState)(null);
+  const callbackRef = (0, import_ahooks.useLatest)(callback);
+  const ref = (0, import_react.useCallback)((node) => {
+    if (targetRef.current) {
+      targetRef.current.removeEventListener("mousedown", handleMouseDown);
+    }
+    targetRef.current = node;
+    if (targetRef.current) {
+      targetRef.current.addEventListener("mousedown", handleMouseDown);
+    }
+  }, []);
+  const handleMouseDown = (0, import_ahooks.useMemoizedFn)((event) => {
+    setIsActive(true);
+    setStartPosition({ offsetX: event.clientX, offsetY: event.clientY });
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  });
+  const handleMouseMove = (0, import_ahooks.useMemoizedFn)((event) => {
+    if (startPosition) {
+      callbackRef.current({
+        offsetX: event.clientX - startPosition.offsetX,
+        offsetY: event.clientY - startPosition.offsetY
+      });
+    }
+  });
+  const handleMouseUp = (0, import_ahooks.useMemoizedFn)(() => {
+    setIsActive(false);
+    setStartPosition(null);
+    window.removeEventListener("mousemove", handleMouseMove);
+    window.removeEventListener("mouseup", handleMouseUp);
+  });
+  return { isActive, ref };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMouseDownOffset
+});

package/dist/lib/id-render/icon-button-container.js

@@ -0,0 +1,89 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var icon_button_container_exports = {};
+__export(icon_button_container_exports, {
+  default: () => IconButtonContainer
+});
+module.exports = __toCommonJS(icon_button_container_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_classnames = __toESM(require("classnames"));
+function IconButtonContainer(_a) {
+  var _b = _a, {
+    icon,
+    className,
+    style,
+    onClick
+  } = _b, rest = __objRest(_b, [
+    "icon",
+    "className",
+    "style",
+    "onClick"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    __spreadProps(__spreadValues({}, rest), {
+      onClick,
+      style,
+      className: (0, import_classnames.default)(
+        "inline-flex items-center justify-center w-5 h-5 rounded-[4px] cursor-pointer text-[var(--coz-fg-secondary)] hover:text-[var(--coz-fg-primary)] hover:bg-[var(--coz-mg-secondary-hovered)]",
+        className
+      ),
+      children: icon
+    })
+  );
+}