@pisell/materials 1.0.471 → 1.0.473

package/lib/components/dataSourceComponents/dataSourceTable/filter/index.js

@@ -0,0 +1,176 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __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);
+
+// src/components/dataSourceComponents/dataSourceTable/filter/index.tsx
+var filter_exports = {};
+__export(filter_exports, {
+  default: () => filter_default
+});
+module.exports = __toCommonJS(filter_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_ahooks = require("ahooks");
+var import_icons = require("@ant-design/icons");
+var import_Input = __toESM(require("../../fields/Input"));
+var import_useDataSource = __toESM(require("../../hooks/useDataSource"));
+var import_FilterButton = __toESM(require("../../../filter/components/FilterButton"));
+var import_utils = require("./utils");
+var defaultArr = [];
+var Filter = (props) => {
+  const {
+    componentId,
+    items = defaultArr,
+    mode = "simple",
+    quickFilterMaxLength = 3,
+    sortButtonShow = false,
+    handleValuesChange,
+    search,
+    filterBy
+  } = props;
+  const [form] = import_antd.Form.useForm();
+  const { dataSource } = (0, import_useDataSource.default)();
+  const [list, setList] = (0, import_react.useState)(() => {
+    const storedOrder = (0, import_utils.getStoredFilterOrder)(componentId);
+    return storedOrder || {
+      quickFilter: [],
+      otherFilter: []
+    };
+  });
+  const filterList = (0, import_react.useMemo)(() => {
+    return items.filter((item) => !(item == null ? void 0 : item.isHidden));
+  }, [items]);
+  const filterDom = (0, import_react.useMemo)(() => {
+    return (0, import_utils.genFilterItems)(list.quickFilter, dataSource);
+  }, [list.quickFilter]);
+  (0, import_react.useEffect)(() => {
+    const storedOrder = (0, import_utils.getStoredFilterOrder)(componentId);
+    if (!storedOrder) {
+      const newList = {
+        quickFilter: filterList.slice(0, quickFilterMaxLength),
+        otherFilter: filterList.slice(quickFilterMaxLength)
+      };
+      setList(newList);
+      (0, import_utils.saveFilterOrder)(componentId, newList);
+      return;
+    }
+    const orderedItems = {
+      quickFilter: [],
+      otherFilter: []
+    };
+    const itemMap = new Map(filterList.map((item) => [item.name, item]));
+    storedOrder.quickFilter.forEach((stored) => {
+      const item = itemMap.get(stored.name);
+      if (item) {
+        orderedItems.quickFilter.push(item);
+        itemMap.delete(stored.name);
+      }
+    });
+    storedOrder.otherFilter.forEach((stored) => {
+      const item = itemMap.get(stored.name);
+      if (item) {
+        orderedItems.otherFilter.push(item);
+        itemMap.delete(stored.name);
+      }
+    });
+    const remainingItems = Array.from(itemMap.values());
+    remainingItems.forEach((item) => {
+      if (orderedItems.quickFilter.length < quickFilterMaxLength) {
+        orderedItems.quickFilter.push(item);
+      } else {
+        orderedItems.otherFilter.push(item);
+      }
+    });
+    if (quickFilterMaxLength && orderedItems.quickFilter.length > quickFilterMaxLength) {
+      const overflow = orderedItems.quickFilter.splice(quickFilterMaxLength);
+      orderedItems.otherFilter.unshift(...overflow);
+    }
+    setList(orderedItems);
+    (0, import_utils.saveFilterOrder)(componentId, orderedItems);
+  }, [filterList, quickFilterMaxLength, componentId]);
+  const onChange = (newVal) => {
+    setList(newVal);
+    (0, import_utils.saveFilterOrder)(componentId, newVal);
+  };
+  const renderItem = (0, import_ahooks.useMemoizedFn)((item, otherProps) => {
+    const getField = (0, import_utils.genGetField)(dataSource);
+    const field = getField(item.name);
+    const cptDom = (0, import_utils.field2Cpt)(field, item, {
+      labelCol: { span: 24 },
+      style: (style) => {
+        return {
+          ...style || {},
+          width: "100%"
+        };
+      },
+      ...otherProps
+    });
+    return cptDom;
+  });
+  const onValuesChange = (0, import_ahooks.useDebounceFn)(
+    (changedFields, allFields) => {
+      handleValuesChange(changedFields, allFields);
+    },
+    { wait: 300 }
+  ).run;
+  const searchDom = (0, import_react.useMemo)(() => {
+    return (search == null ? void 0 : search.show) ? /* @__PURE__ */ import_react.default.createElement(
+      import_Input.default,
+      {
+        name: search.key || "_keywords",
+        placeholder: search.placeholder,
+        renderMode: "edit",
+        prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, null),
+        style: { width: 200 }
+      }
+    ) : null;
+  }, [search]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Form,
+    {
+      labelCol: { span: 0 },
+      form,
+      size: "large",
+      layout: "inline",
+      className: "filter-form-wrapper",
+      onValuesChange
+    },
+    searchDom,
+    filterDom,
+    /* @__PURE__ */ import_react.default.createElement(
+      import_FilterButton.default,
+      {
+        value: list,
+        quickFilterMaxLength,
+        formFiltersPrefix: "",
+        onChange,
+        renderItem
+      }
+    )
+  );
+};
+var filter_default = Filter;

package/lib/components/dataSourceComponents/dataSourceTable/filter/utils.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FilterItemProps } from '../../../filter/types';
+import { DataSourceType, Field } from '../../provider/dataSource/DataSourceContext';
+export declare const genGetField: (dataSource?: DataSourceType) => (key: string) => Field;
+export declare const field2Cpt: (field: Field, item: any, otherProps?: any) => React.JSX.Element | null;
+export declare const genFilterItems: (list: FilterItemProps[], dataSource?: DataSourceType) => (React.JSX.Element | null)[];
+export declare const getStoredFilterOrder: (componentId: string) => any;
+export declare const saveFilterOrder: (componentId: string, order: any) => void;

package/lib/components/dataSourceComponents/dataSourceTable/filter/utils.js

@@ -0,0 +1,176 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __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);
+
+// src/components/dataSourceComponents/dataSourceTable/filter/utils.tsx
+var utils_exports = {};
+__export(utils_exports, {
+  field2Cpt: () => field2Cpt,
+  genFilterItems: () => genFilterItems,
+  genGetField: () => genGetField,
+  getStoredFilterOrder: () => getStoredFilterOrder,
+  saveFilterOrder: () => saveFilterOrder
+});
+module.exports = __toCommonJS(utils_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_fields = require("../../fields");
+var genGetField = (dataSource) => {
+  const { fields = [] } = dataSource || {};
+  const fieldMap = fields.reduce((acc, field) => {
+    acc[field.name] = field;
+    return acc;
+  }, {});
+  return (key) => {
+    return fieldMap[key];
+  };
+};
+var fieldType2FilterMap = {
+  Checkbox: "Select",
+  ColorPicker: "Input",
+  DatePicker: "DateRangePicker",
+  Input: "Input",
+  Radio: "Select",
+  Select: "Select",
+  Percent: "Percent",
+  InputNumber: "Input",
+  "Input.JSON": "Input",
+  "Input.URL": "Input",
+  "Input.Password": "Input",
+  "Radio.Group": "Select",
+  "Checkbox.Group": "Select"
+};
+var getCptProps = (field, cptType, item) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  let props = ((_a = field == null ? void 0 : field.uiSchema) == null ? void 0 : _a["x-component-props"]) || {};
+  props.style = {
+    ...(props == null ? void 0 : props.style) || {},
+    width: "200px"
+  };
+  props.placeholder = item.label;
+  props.allowClear = true;
+  if (cptType === "Select") {
+    props.mode = "multiple";
+  }
+  if (["Select", "Radio.Group", "Checkbox.Group"].includes(
+    (_b = field == null ? void 0 : field.uiSchema) == null ? void 0 : _b["x-component"]
+  ) && (((_d = (_c = field == null ? void 0 : field.uiSchema) == null ? void 0 : _c.enum) == null ? void 0 : _d.length) || 0) > 0) {
+    if (["Radio.Group", "Checkbox.Group"].includes(
+      (_e = field == null ? void 0 : field.uiSchema) == null ? void 0 : _e["x-component"]
+    )) {
+      props.direction = "horizontal";
+    }
+    props.options = (_f = field == null ? void 0 : field.uiSchema) == null ? void 0 : _f.enum;
+  }
+  if (((_g = field == null ? void 0 : field.uiSchema) == null ? void 0 : _g["x-component"]) === "ColorPicker") {
+    props.defaultValue = (_h = field == null ? void 0 : field.uiSchema) == null ? void 0 : _h.default;
+  }
+  if (cptType === "DateRangePicker") {
+    props.style = {
+      ...(props == null ? void 0 : props.style) || {},
+      width: "240px"
+    };
+  }
+  if (((_i = field == null ? void 0 : field.uiSchema) == null ? void 0 : _i["x-component"]) === "Checkbox" && cptType === "Select") {
+    props.mode = void 0;
+    props.allowClear = true;
+    props.options = [
+      {
+        label: "是",
+        value: true
+      },
+      {
+        label: "否",
+        value: false
+      }
+    ];
+  }
+  return props;
+};
+var field2Cpt = (field, item, otherProps) => {
+  const { isCustom, type: configType } = item;
+  const { uiSchema } = field || {};
+  const { "x-component": xComponent } = uiSchema || {};
+  let cptType = fieldType2FilterMap[xComponent];
+  if (isCustom) {
+    cptType = configType;
+  }
+  const Cpt = import_fields.formFieldMap[cptType];
+  if (!Cpt) {
+    return null;
+  }
+  const props = getCptProps(field, cptType, item);
+  const style = (0, import_utils.isFunction)(otherProps == null ? void 0 : otherProps.style) ? otherProps == null ? void 0 : otherProps.style(props.style) : (otherProps == null ? void 0 : otherProps.style) ? { ...props.style, ...otherProps == null ? void 0 : otherProps.style } : props.style;
+  return /* @__PURE__ */ import_react.default.createElement(
+    Cpt,
+    {
+      ...props,
+      label: item.label,
+      name: item.name || item.value,
+      ...otherProps,
+      style
+    }
+  );
+};
+var genFilterItems = (list, dataSource) => {
+  return list.map((item) => {
+    if (!item) {
+      return null;
+    }
+    const { name } = item;
+    const getField = genGetField(dataSource);
+    const field = getField(name);
+    const cptDom = field2Cpt(field, item);
+    return cptDom;
+  });
+};
+var FILTER_STORAGE_KEY = "filter-setting-";
+var getStorageKey = (componentId) => `${FILTER_STORAGE_KEY}${componentId}`;
+var getStoredFilterOrder = (componentId) => {
+  try {
+    const stored = localStorage.getItem(getStorageKey(componentId));
+    return stored ? JSON.parse(stored) : null;
+  } catch (e) {
+    console.error("Failed to parse stored filter order:", e);
+    return null;
+  }
+};
+var saveFilterOrder = (componentId, order) => {
+  try {
+    localStorage.setItem(getStorageKey(componentId), JSON.stringify(order));
+  } catch (e) {
+    console.error("Failed to save filter order:", e);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  field2Cpt,
+  genFilterItems,
+  genGetField,
+  getStoredFilterOrder,
+  saveFilterOrder
+});

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useDataSourceKey.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const useDataSourceKey: () => {
-    dataSourceKey: string;
-    dataSourceKeyRef: import("react").MutableRefObject<string>;
+    dataSourceKey: string | undefined;
+    dataSourceKeyRef: import("react").MutableRefObject<string | undefined>;
 };
 export default useDataSourceKey;

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useDataSourceKey.js

@@ -38,7 +38,7 @@ var import_useDataSource = __toESM(require("../../hooks/useDataSource"));
 var useDataSourceKey = () => {
   const { dataSource } = (0, import_useDataSource.default)();
   const dataSourceKey = (0, import_react.useMemo)(() => {
-    return (0, import_utils.isString)(dataSource) ? dataSource : dataSource == null ? void 0 : dataSource.key;
+    return (0, import_utils.isString)(dataSource) ? dataSource : (dataSource == null ? void 0 : dataSource.key) || (dataSource == null ? void 0 : dataSource.tableName);
   }, [dataSource]);
   const dataSourceKeyRef = (0, import_react.useRef)(dataSourceKey);
   dataSourceKeyRef.current = dataSourceKey;

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useDesignMode.js

@@ -27,47 +27,34 @@ var useDesignMode = (props, { registerValueVariable, openDrawer, closeDrawer, da
   const {
     __designMode,
     componentId,
-    showDetailButton,
-    showEditButton,
-    showAddButton
+    operation
   } = props;
+  const { items } = operation || {};
+  const prevItemsRef = (0, import_react.useRef)([]);
   (0, import_react.useEffect)(() => {
     var _a;
-    if (__designMode === "design") {
-      if (showDetailButton) {
-        openDrawer("detail");
-        registerValueVariable == null ? void 0 : registerValueVariable(componentId, {
-          currentRecord: ((_a = data == null ? void 0 : data.data) == null ? void 0 : _a[0]) || null
-        });
-      } else {
-        closeDrawer();
+    if (__designMode === "design" && (items == null ? void 0 : items.length) && ((_a = prevItemsRef.current) == null ? void 0 : _a.length)) {
+      const changedItem = items.find((item) => {
+        const prevItem = prevItemsRef.current.find((prev) => prev.key === item.key);
+        if (!prevItem)
+          return false;
+        if (item.actionType !== prevItem.actionType) {
+          return true;
+        }
+        return false;
+      });
+      if (changedItem) {
+        if (["view", "edit", "custom"].includes(changedItem.actionType)) {
+          registerValueVariable == null ? void 0 : registerValueVariable(componentId, {
+            currentRecord: (data == null ? void 0 : data[0]) || null
+          });
+          openDrawer(changedItem);
+        } else {
+          closeDrawer();
+        }
       }
     }
-  }, [showDetailButton, __designMode]);
-  (0, import_react.useEffect)(() => {
-    var _a;
-    if (__designMode === "design") {
-      if (showEditButton) {
-        openDrawer("edit");
-        registerValueVariable == null ? void 0 : registerValueVariable(componentId, {
-          currentRecord: ((_a = data == null ? void 0 : data.data) == null ? void 0 : _a[0]) || null
-        });
-      } else {
-        closeDrawer();
-      }
-    }
-  }, [showEditButton, __designMode]);
-  (0, import_react.useEffect)(() => {
-    if (__designMode === "design") {
-      if (showAddButton) {
-        openDrawer("add");
-        registerValueVariable == null ? void 0 : registerValueVariable(componentId, {
-          currentRecord: null
-        });
-      } else {
-        closeDrawer();
-      }
-    }
-  }, [showAddButton, __designMode]);
+    prevItemsRef.current = items;
+  }, [items, __designMode]);
 };
 var useDesignMode_default = useDesignMode;

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useDrawerState.d.ts

@@ -1,10 +1,26 @@
 /// <reference types="react" />
-declare const useDrawerState: () => {
+import { Drawer } from 'antd';
+import { OperationItem } from '../type';
+declare const useDrawerState: (operationContent?: {
+    [key: string]: import("react").ReactNode;
+} | undefined) => {
     drawerVisible: boolean;
     setDrawerVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    drawerType: "add" | "edit" | "detail";
-    setDrawerType: import("react").Dispatch<import("react").SetStateAction<"add" | "edit" | "detail">>;
-    openDrawer: (type: 'detail' | 'edit' | 'add') => void;
+    openDrawer: (item: OperationItem) => void;
     closeDrawer: () => void;
+    drawerContent: import("react").ReactNode;
+    Container: typeof Drawer | (import("react").FC<import("antd").ModalProps> & import("antd/es/modal/confirm").ModalStaticFunctions & {
+        useModal: typeof import("antd/es/modal/useModal").default;
+        destroyAll: () => void;
+        config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
+        _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/modal/PurePanel").PurePanelProps>;
+    });
+    containerProps: {
+        width?: undefined;
+        title?: undefined;
+    } | {
+        width: number;
+        title: string;
+    };
 };
 export default useDrawerState;

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useDrawerState.js

@@ -22,24 +22,70 @@ __export(useDrawerState_exports, {
   default: () => useDrawerState_default
 });
 module.exports = __toCommonJS(useDrawerState_exports);
+var import_antd = require("antd");
 var import_react = require("react");
-var useDrawerState = () => {
+var sizeMap = {
+  small: 400,
+  middle: 600,
+  large: 800
+};
+var useDrawerState = (operationContent) => {
   const [drawerVisible, setDrawerVisible] = (0, import_react.useState)(false);
-  const [drawerType, setDrawerType] = (0, import_react.useState)("detail");
-  const openDrawer = (type) => {
+  const [item, setItem] = (0, import_react.useState)(null);
+  const timerRef = (0, import_react.useRef)();
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  const openDrawer = (item2) => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
     setDrawerVisible(true);
-    setDrawerType(type);
+    setItem(item2);
   };
   const closeDrawer = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
     setDrawerVisible(false);
+    timerRef.current = setTimeout(() => {
+      setItem(null);
+      timerRef.current = void 0;
+    }, 300);
   };
+  const drawerContent = (0, import_react.useMemo)(() => {
+    if ((item == null ? void 0 : item.key) && operationContent) {
+      return operationContent[item.key];
+    }
+    return null;
+  }, [item, operationContent]);
+  const containerProps = (0, import_react.useMemo)(() => {
+    if (!item) {
+      return {};
+    }
+    return {
+      width: sizeMap[item == null ? void 0 : item.openContentSize],
+      title: item == null ? void 0 : item.openTitle
+    };
+  }, [item]);
+  const Container = (0, import_react.useMemo)(() => {
+    if ((item == null ? void 0 : item.openMode) === "drawer") {
+      return import_antd.Drawer;
+    }
+    return import_antd.Modal;
+  }, [item == null ? void 0 : item.openMode]);
   return {
     drawerVisible,
     setDrawerVisible,
-    drawerType,
-    setDrawerType,
     openDrawer,
-    closeDrawer
+    closeDrawer,
+    drawerContent,
+    Container,
+    containerProps
   };
 };
 var useDrawerState_default = useDrawerState;

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useFormat.d.ts

@@ -1,3 +1,4 @@
+import { Field } from '../../provider/dataSource/DataSourceContext';
 export declare type ListResult = {
     data: any[];
     count: number;
@@ -6,6 +7,7 @@ export declare type ListResult = {
 };
 export declare type UseFormatParams = {
     dataSourceKey: string;
+    fields: Field[];
 };
 export declare type FormatListResultParams = {
     list: any[];
@@ -20,7 +22,21 @@ export declare type FormatListResultParams = {
         pageSize: number;
     };
 };
-declare const useFormat: ({ dataSourceKey }: UseFormatParams) => {
+export declare type FilterValue = {
+    [key: string]: any;
+};
+export declare type FilterOperator = '$includes' | '$dateAfter' | '$dateBefore' | '$eq' | '$in' | '$isTruly' | '$and';
+export declare type SimpleFilterValue = {
+    [key in Exclude<FilterOperator, '$and'>]?: any;
+};
+export declare type AndFilterValue = {
+    $and: FilterCondition[];
+};
+export declare type FilterConditionValue = SimpleFilterValue | AndFilterValue;
+export declare type FilterCondition = {
+    [key: string]: FilterConditionValue;
+} | AndFilterValue;
+declare const useFormat: ({ dataSourceKey, fields }: UseFormatParams) => {
     formatListResult: (res: FormatListResultParams) => ListResult;
     formatListParams: (params: any) => any;
 };