@cozeloop/components 0.0.1

package/dist/es/collapsible-card/index.module.js

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "card": "card_42a41", "card-header": "card-header_42a41", "card-title": "card-title_42a41", "chevron-icon": "chevron-icon_42a41", "chevron-icon-close": "chevron-icon-close_42a41", "card-content": "card-content_42a41", "active": "active_42a41" };
+export {
+  index_module_default as default
+};

package/dist/es/collapsible-card/index_module.css

@@ -0,0 +1,48 @@
+/* stylelint-disable declaration-no-important */
+.card_42a41 {
+  background: transparent !important;
+  border-radius: 0 !important;
+}
+.card_42a41 .semi-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  height: 100%;
+  padding: 0;
+}
+.card_42a41 .card-header_42a41 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 24px;
+  min-height: 24px;
+  padding: 10px 20px 0;
+}
+.card_42a41 .card-title_42a41 {
+  position: relative;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  font-weight: 600;
+}
+.card_42a41 .card-title_42a41 .chevron-icon_42a41 {
+  cursor: pointer;
+  transition: transform 0.3s;
+}
+.card_42a41 .card-title_42a41 .chevron-icon_42a41.chevron-icon-close_42a41 {
+  transform: rotate(180deg);
+}
+.card_42a41 .card-title_42a41 .chevron-icon_42a41:hover {
+  color: var(--semi-color-primary);
+}
+.card_42a41 .card-content_42a41 {
+  height: 0;
+  opacity: 0;
+  transition: height 0.2s, opacity 0.2s;
+}
+.card_42a41 .card-content_42a41.active_42a41 {
+  overflow: hidden;
+  height: 100%;
+  opacity: 1;
+}

package/dist/es/column-manage-storage/index.js

@@ -0,0 +1,73 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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));
+import { isEmpty } from "lodash-es";
+import { safeJsonParse } from "@cozeloop/toolkit";
+const DATASET_COLUMN_STORAGE_KEY = "dataset-column";
+const getColumnManageStorage = (storageKey) => {
+  const storage = localStorage.getItem(storageKey);
+  return safeJsonParse(storage || "{}") || {};
+};
+const setColumnsManageStorage = (storageKey, columns) => {
+  if (!storageKey) {
+    return;
+  }
+  const data = {};
+  columns.forEach((column, index) => {
+    var _a;
+    data[column.key] = {
+      index,
+      checked: (_a = column.checked) != null ? _a : true
+    };
+  });
+  localStorage.setItem(storageKey, JSON.stringify(data));
+};
+const dealColumnsWithStorage = (storageKey, columns) => {
+  const sort = getColumnManageStorage(storageKey);
+  if (!sort || isEmpty(sort)) {
+    return columns;
+  }
+  const newColumns = [...columns || []].sort((a, b) => {
+    var _a, _b, _c, _d;
+    const indexA = (_b = (_a = sort[a.key]) == null ? void 0 : _a.index) != null ? _b : Infinity;
+    const indexB = (_d = (_c = sort[b.key]) == null ? void 0 : _c.index) != null ? _d : Infinity;
+    if (indexA !== Infinity && indexB !== Infinity) {
+      return indexA - indexB;
+    }
+    if (indexA !== Infinity) {
+      return -1;
+    }
+    if (indexB !== Infinity) {
+      return 1;
+    }
+    return 0;
+  });
+  return newColumns.map((column) => {
+    var _a, _b;
+    return __spreadProps(__spreadValues({}, column), {
+      checked: (_b = (_a = sort[column.key]) == null ? void 0 : _a.checked) != null ? _b : true
+    });
+  });
+};
+export {
+  DATASET_COLUMN_STORAGE_KEY,
+  dealColumnsWithStorage,
+  getColumnManageStorage,
+  setColumnsManageStorage
+};

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

@@ -0,0 +1,219 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as sort from "react-sortable-hoc";
+import { Fragment as Fragment2, useEffect, useMemo, useState } from "react";
+import {
+  IconCozHandle,
+  IconCozTableSetting
+} from "@coze-arch/coze-design/icons";
+import {
+  Button,
+  Checkbox,
+  Dropdown,
+  Typography,
+  Divider,
+  Tooltip
+} from "@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] = useState(() => [...columns]);
+  const selectedKeys = useMemo(
+    () => list.filter((item) => item.checked).map((item) => item.key),
+    [list]
+  );
+  const disabledKeys = useMemo(
+    () => list.filter((item) => item.disabled).map((item) => item.key),
+    [list]
+  );
+  const DragHandle = sortableHandle(() => /* @__PURE__ */ jsx(
+    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__ */ 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__ */ 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__ */ jsx(
+                Checkbox,
+                {
+                  disabled: disabledKeys.includes((_a = value.key) != null ? _a : "") || value.disabled,
+                  checked: selectedKeys.includes((_b = value.key) != null ? _b : ""),
+                  "aria-label": `选择${value.value}`
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                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__ */ 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__ */ jsx(DragHandle, {}))
+  );
+  const SortableContainer = sortableContainer(
+    ({ children }) => /* @__PURE__ */ 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);
+  };
+  useEffect(() => {
+    setList(columns);
+  }, [columns]);
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      position: "bottomRight",
+      render: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: (event) => {
+            event.stopPropagation();
+          },
+          children: [
+            /* @__PURE__ */ jsx(SortableContainer, { onSortEnd: handleSortEnd, useDragHandle: true, children: /* @__PURE__ */ jsx(Fragment, { children: list.map(
+              (value, index) => (value == null ? void 0 : value.disabled) || !sortable ? /* @__PURE__ */ jsx(Fragment2, { children: RenderItem(value) }, `item-${value.key}`) : /* @__PURE__ */ jsx(
+                SortableItem,
+                {
+                  index,
+                  value
+                },
+                `item-${value.key}`
+              )
+            ) }) }),
+            /* @__PURE__ */ jsx(Divider, {}),
+            footerRender ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+              footerRender(list),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  color: "secondary",
+                  type: "secondary",
+                  className: "text-center flex-1",
+                  onClick: handleReset,
+                  children: /* @__PURE__ */ jsx("span", { className: "text-brand font-medium text-[13px]", children: resetButtonText })
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(
+              Button,
+              {
+                color: "secondary",
+                type: "secondary",
+                className: "w-full text-center",
+                onClick: handleReset,
+                children: /* @__PURE__ */ jsx("span", { className: "text-brand font-medium text-[13px]", children: resetButtonText })
+              }
+            )
+          ]
+        }
+      ),
+      trigger: "click",
+      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { content: "列管理", theme: "dark", position: "top", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(IconCozTableSetting, {}),
+          type: "primary",
+          color: "primary",
+          className: "flex items-center justify-center",
+          "aria-label": buttonText
+        }
+      ) }) })
+    }
+  ) });
+};
+export {
+  ColumnSelector
+};

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

@@ -0,0 +1,178 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __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());
+  });
+};
+import { useMemo, useState } from "react";
+import { getTargetElement } from "ahooks/lib/utils/domTarget";
+import {
+  useEventListener,
+  useMemoizedFn,
+  useRequest,
+  useUpdateEffect
+} from "ahooks";
+import { getClientHeight, getScrollHeight, getScrollTop } from "../utils/rect";
+const useInfiniteScroll = (service, options = {}) => {
+  const {
+    target,
+    isNoMore,
+    threshold = 100,
+    reloadDeps = [],
+    manual,
+    onBefore,
+    onSuccess,
+    onError,
+    onFinally
+  } = options;
+  const [finalData, setFinalData] = useState();
+  const [loadingMore, setLoadingMore] = useState(false);
+  const noMore = useMemo(() => {
+    if (!isNoMore) {
+      return false;
+    }
+    return isNoMore(finalData);
+  }, [finalData]);
+  const { loading, error, run, runAsync, cancel } = 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 = useMemoizedFn(() => {
+    if (noMore) {
+      return;
+    }
+    setLoadingMore(true);
+    run(finalData);
+  });
+  const loadMoreAsync = 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 = getTargetElement(target);
+    if (!el) {
+      return;
+    }
+    el = el === document ? document.documentElement : el;
+    const scrollHeight = getScrollHeight(el);
+    const clientHeight = getClientHeight(el);
+    if (scrollHeight <= clientHeight) {
+      loadMore();
+    }
+  };
+  const scrollMethod = () => {
+    let el = getTargetElement(target);
+    if (!el) {
+      return;
+    }
+    el = el === document ? document.documentElement : el;
+    const scrollTop = getScrollTop(el);
+    const scrollHeight = getScrollHeight(el);
+    const clientHeight = getClientHeight(el);
+    if (scrollHeight - scrollTop <= clientHeight + threshold) {
+      loadMore();
+    }
+  };
+  useEventListener(
+    "scroll",
+    () => {
+      if (loading || loadingMore) {
+        return;
+      }
+      scrollMethod();
+    },
+    { target }
+  );
+  useUpdateEffect(() => {
+    setFinalData(void 0);
+    run();
+  }, [...reloadDeps]);
+  return {
+    data: finalData,
+    loading: !loadingMore && loading,
+    error,
+    loadingMore,
+    noMore,
+    loadMore,
+    loadMoreAsync,
+    reload: useMemoizedFn(reload),
+    reloadAsync: useMemoizedFn(reloadAsync),
+    mutate: setFinalData,
+    cancel
+  };
+};
+export {
+  useInfiniteScroll
+};

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

@@ -0,0 +1,41 @@
+import { useState, useRef, useCallback } from "react";
+import { useLatest, useMemoizedFn } from "ahooks";
+const useMouseDownOffset = (callback) => {
+  const [isActive, setIsActive] = useState(false);
+  const targetRef = useRef(null);
+  const [startPosition, setStartPosition] = useState(null);
+  const callbackRef = useLatest(callback);
+  const ref = useCallback((node) => {
+    if (targetRef.current) {
+      targetRef.current.removeEventListener("mousedown", handleMouseDown);
+    }
+    targetRef.current = node;
+    if (targetRef.current) {
+      targetRef.current.addEventListener("mousedown", handleMouseDown);
+    }
+  }, []);
+  const handleMouseDown = useMemoizedFn((event) => {
+    setIsActive(true);
+    setStartPosition({ offsetX: event.clientX, offsetY: event.clientY });
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  });
+  const handleMouseMove = useMemoizedFn((event) => {
+    if (startPosition) {
+      callbackRef.current({
+        offsetX: event.clientX - startPosition.offsetX,
+        offsetY: event.clientY - startPosition.offsetY
+      });
+    }
+  });
+  const handleMouseUp = useMemoizedFn(() => {
+    setIsActive(false);
+    setStartPosition(null);
+    window.removeEventListener("mousemove", handleMouseMove);
+    window.removeEventListener("mouseup", handleMouseUp);
+  });
+  return { isActive, ref };
+};
+export {
+  useMouseDownOffset
+};

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

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __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;
+};
+import { jsx } from "react/jsx-runtime";
+import cls from "classnames";
+function IconButtonContainer(_a) {
+  var _b = _a, {
+    icon,
+    className,
+    style,
+    onClick
+  } = _b, rest = __objRest(_b, [
+    "icon",
+    "className",
+    "style",
+    "onClick"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({}, rest), {
+      onClick,
+      style,
+      className: cls(
+        "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
+    })
+  );
+}
+export {
+  IconButtonContainer as default
+};