@pisell/materials 1.8.11 → 1.8.13

package/lib/components/filter/components/FilterButton/index.js

@@ -35,9 +35,17 @@ module.exports = __toCommonJS(FilterButton_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_FilterLines = __toESM(require("@pisell/icon/es/FilterLines"));
+var import_utils = require("@pisell/utils");
 var import_Dropdown = __toESM(require("../Dropdown"));
 var import_locales = require("../../../../locales");
 var import_platform = require("../../../../utils/platform");
+function getFilterButtonLabel(buttonText) {
+  if (buttonText != null && buttonText !== "") return buttonText;
+  const key = "pisell2.recordBoard.toolbar.filter";
+  const fromUtils = import_utils.locales.getText(key);
+  if (fromUtils && fromUtils !== key) return fromUtils;
+  return (0, import_locales.getText)(key) || (0, import_locales.getText)("table-action-filter-button");
+}
 var Filter = ({
   value,
   hiddenQuickFilter,
@@ -46,7 +54,10 @@ var Filter = ({
   quickFilterMaxLength,
   formFiltersPrefix,
   renderItem,
-  placement
+  placement,
+  size = "large",
+  buttonClassName,
+  buttonText
 }) => {
   const ref = (0, import_react.useRef)(null);
   const [open, setOpen] = (0, import_react.useState)(false);
@@ -100,9 +111,9 @@ var Filter = ({
         }
         setOpen(visible);
       },
-      placement
+      placement: placement ?? "bottom"
     },
-    /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_FilterLines.default, null), size: "large" }, isMobileBool ? null : (0, import_locales.getText)("table-action-filter-button"))
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { className: buttonClassName, icon: /* @__PURE__ */ import_react.default.createElement(import_FilterLines.default, null), size }, isMobileBool ? null : getFilterButtonLabel(buttonText))
   ));
 };
 var FilterButton_default = Filter;

package/lib/components/filter/components/FilterButton/types.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { FilterItemProps } from '../../types';
+export declare type FilterValueType = {
+    quickFilter: FilterItemProps[];
+    otherFilter: FilterItemProps[];
+    /** 筛选项表单值，字段名 -> 值，与 Form 的 values 一致 */
+    values?: Record<string, any>;
+};
+export declare type FilterListProps = {
+    value?: FilterValueType;
+    hiddenQuickFilter?: boolean;
+    hiddenOtherFilter?: boolean;
+    onChange?: (value: FilterValueType) => void;
+    quickFilterMaxLength: number;
+    formFiltersPrefix: string;
+    renderItem?: (item: any, otherProps?: any) => React.ReactNode;
+    placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    /** 筛选按钮尺寸，与 antd Button size 一致 */
+    size?: 'small' | 'middle' | 'large';
+    /** 筛选触发按钮的 className，用于定制样式（如与设计系统对齐） */
+    buttonClassName?: string;
+    /** 筛选按钮文案，不传则使用 materials 内置多语言 */
+    buttonText?: string;
+};

package/lib/components/filter/components/FilterItem/AsyncOptionsSelectWrapper.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 筛选项中 singleSelect/multipleSelect 的异步 options 包装器。
+ * 当列配置传入 getOptions（同步或异步）时，先解析再渲染 PisellSingleSelect/PisellMultipleSelect。
+ */
+import React from 'react';
+export declare type GetOptionsFn = (() => {
+    label: string;
+    value: any;
+}[]) | (() => Promise<{
+    label: string;
+    value: any;
+}[]>);
+export interface AsyncOptionsSelectWrapperProps {
+    getOptions: GetOptionsFn;
+    fieldType: 'singleSelect' | 'multipleSelect';
+    value?: any;
+    onChange?: (value: any, option?: any) => void;
+    [key: string]: any;
+}
+declare const AsyncOptionsSelectWrapper: React.FC<AsyncOptionsSelectWrapperProps>;
+export default AsyncOptionsSelectWrapper;

package/lib/components/filter/components/FilterItem/AsyncOptionsSelectWrapper.js

@@ -0,0 +1,69 @@
+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/filter/components/FilterItem/AsyncOptionsSelectWrapper.tsx
+var AsyncOptionsSelectWrapper_exports = {};
+__export(AsyncOptionsSelectWrapper_exports, {
+  default: () => AsyncOptionsSelectWrapper_default
+});
+module.exports = __toCommonJS(AsyncOptionsSelectWrapper_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_pisellSingleSelect = require("../../../pisellSingleSelect");
+var import_pisellMultipleSelect = require("../../../pisellMultipleSelect");
+function normalizeOptions(list) {
+  if (!Array.isArray(list)) return [];
+  return list.map(
+    (item) => item && typeof item === "object" && "label" in item && "value" in item ? { label: String(item.label), value: item.value } : { label: String(item), value: item }
+  );
+}
+var AsyncOptionsSelectWrapper = (props) => {
+  const { getOptions, fieldType, value, onChange, ...rest } = props;
+  const [options, setOptions] = (0, import_react.useState)([]);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
+    setLoading(true);
+    const result = getOptions();
+    const resolved = Promise.resolve(result);
+    resolved.then((list) => {
+      setOptions(normalizeOptions(list));
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, [getOptions]);
+  const commonProps = { ...rest, options, mode: "edit" };
+  if (loading) {
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { spinning: true, size: "small" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { display: "inline-block", minWidth: 120, minHeight: 32 } }));
+  }
+  if (fieldType === "multipleSelect") {
+    return /* @__PURE__ */ import_react.default.createElement(import_pisellMultipleSelect.PisellMultipleSelect, { ...commonProps, value, onChange });
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_pisellSingleSelect.PisellSingleSelect, { ...commonProps, value, onChange });
+};
+AsyncOptionsSelectWrapper.displayName = "AsyncOptionsSelectWrapper";
+var AsyncOptionsSelectWrapper_default = AsyncOptionsSelectWrapper;

package/lib/components/filter/components/FilterItem/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { FilterItemProps } from "../../types";
-import "./index.less";
+import React from 'react';
+import { FilterItemProps } from '../../types';
+import './index.less';
 declare const FilterItem: React.FC<FilterItemProps>;
 export default FilterItem;

package/lib/components/filter/components/FilterItem/index.js

@@ -34,14 +34,143 @@ __export(FilterItem_exports, {
 module.exports = __toCommonJS(FilterItem_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_dayjs = __toESM(require("dayjs"));
 var import_fields = require("../../../table/Table/fields");
+var import_pisellSingleLineText = require("../../../pisellSingleLineText");
+var import_pisellLongText = require("../../../pisellLongText");
+var import_pisellEmail = require("../../../pisellEmail");
+var import_pisellPhone = require("../../../pisellPhone");
+var import_pisellUrl = require("../../../pisellUrl");
+var import_pisellNumber = require("../../../pisellNumber");
+var import_pisellCurrency = require("../../../pisellCurrency");
+var import_pisellPercent = require("../../../pisellPercent");
+var import_pisellRating = require("../../../pisellRating");
+var import_pisellSingleSelect = require("../../../pisellSingleSelect");
+var import_pisellMultipleSelect = require("../../../pisellMultipleSelect");
+var import_locales = require("../../../../locales");
+var import_AsyncOptionsSelectWrapper = __toESM(require("./AsyncOptionsSelectWrapper"));
 var import_index = require("./index.less");
+var { RangePicker } = import_antd.DatePicker;
+var PISELL_FIELD_TYPE_MAP = {
+  singleLineText: import_pisellSingleLineText.PisellSingleLineText,
+  longText: import_pisellLongText.PisellLongText,
+  email: import_pisellEmail.PisellEmail,
+  phone: import_pisellPhone.PisellPhone,
+  url: import_pisellUrl.PisellUrl,
+  number: import_pisellNumber.PisellNumber,
+  currency: import_pisellCurrency.PisellCurrency,
+  percent: import_pisellPercent.PisellPercent,
+  rating: import_pisellRating.PisellRating,
+  singleSelect: import_pisellSingleSelect.PisellSingleSelect,
+  multipleSelect: import_pisellMultipleSelect.PisellMultipleSelect
+};
+var FILTER_TYPE_TO_FIELD = {
+  single: "select",
+  input: "text",
+  datePicker: "date",
+  rangePicker: "rangePicker",
+  search: "search"
+};
+function toRangePickerValue(val) {
+  if (val == null) return null;
+  if (Array.isArray(val) && val.length >= 2) {
+    const start = val[0] ? import_dayjs.default.isDayjs(val[0]) ? val[0] : (0, import_dayjs.default)(val[0]) : null;
+    const end = val[1] ? import_dayjs.default.isDayjs(val[1]) ? val[1] : (0, import_dayjs.default)(val[1]) : null;
+    if (start && end) return [start, end];
+  }
+  return null;
+}
+var AntdRangePickerWithValue = import_react.default.forwardRef(function AntdRangePickerWithValue2({ value, onChange, ...rest }, ref) {
+  const normalized = toRangePickerValue(value);
+  return /* @__PURE__ */ import_react.default.createElement(
+    RangePicker,
+    {
+      ...rest,
+      ref,
+      placeholder: [
+        (0, import_locales.getText)("table-action-range-picker-placeholder-start"),
+        (0, import_locales.getText)("table-action-range-picker-placeholder-end")
+      ],
+      value: normalized,
+      onChange: (dates) => onChange == null ? void 0 : onChange(dates ?? void 0)
+    }
+  );
+});
 var FilterItem = (props) => {
-  const { label, type, name, other, isHidden } = props;
+  const { label, type, name, other, isHidden, props: itemProps } = props;
+  const fieldTypeFromColumn = other == null ? void 0 : other.fieldType;
+  const PisellCom = fieldTypeFromColumn ? PISELL_FIELD_TYPE_MAP[fieldTypeFromColumn] : void 0;
+  if (type === "custom") {
+    const CustomComponent = other == null ? void 0 : other.component;
+    if (!CustomComponent) return null;
+    const componentProps2 = { ...itemProps || {}, ...other || {} };
+    delete componentProps2.component;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        label,
+        name,
+        hidden: isHidden,
+        ...(other == null ? void 0 : other.formItemProps) || {}
+      },
+      /* @__PURE__ */ import_react.default.createElement(CustomComponent, { ...componentProps2 })
+    );
+  }
+  if (type === "rangePickerNew") {
+    const componentProps2 = {
+      ...itemProps || {},
+      ...other || {},
+      prefixCls: "pisell-lowcode"
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        label,
+        name,
+        ...(other == null ? void 0 : other.formItemProps) || {},
+        hidden: isHidden,
+        className: "pisell-lowcode-range-picker-wrap"
+      },
+      /* @__PURE__ */ import_react.default.createElement(AntdRangePickerWithValue, { ...componentProps2 })
+    );
+  }
   const Com = (0, import_react.useMemo)(() => {
     var _a;
-    return (_a = import_fields.fieldMaps[type]) == null ? void 0 : _a.edit;
-  }, [type]);
+    if (PisellCom) return PisellCom;
+    const fieldType = FILTER_TYPE_TO_FIELD[type] ?? type;
+    return (_a = import_fields.fieldMaps[fieldType]) == null ? void 0 : _a.edit;
+  }, [type, PisellCom]);
+  if (!Com) {
+    return null;
+  }
+  const isPisell = Boolean(PisellCom);
+  const componentProps = {
+    ...itemProps || {},
+    ...other || {},
+    ...isPisell ? { mode: "edit" } : {}
+  };
+  const getOptions = componentProps.getOptions ?? (other == null ? void 0 : other.getOptions);
+  const useAsyncOptions = isPisell && typeof getOptions === "function" && (fieldTypeFromColumn === "singleSelect" || fieldTypeFromColumn === "multipleSelect");
+  if (useAsyncOptions && fieldTypeFromColumn) {
+    const { getOptions: _go, ...restProps } = componentProps;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        label,
+        name,
+        ...(other == null ? void 0 : other.formItemProps) || {},
+        hidden: isHidden
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_AsyncOptionsSelectWrapper.default,
+        {
+          getOptions,
+          fieldType: fieldTypeFromColumn,
+          ...restProps
+        }
+      )
+    );
+  }
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Form.Item,
     {
@@ -50,7 +179,7 @@ var FilterItem = (props) => {
       ...(other == null ? void 0 : other.formItemProps) || {},
       hidden: isHidden
     },
-    /* @__PURE__ */ import_react.default.createElement(Com, { ...other })
+    /* @__PURE__ */ import_react.default.createElement(Com, { ...componentProps })
   );
 };
 var FilterItem_default = FilterItem;

package/lib/components/filter/components/FilterItem/index.less

@@ -0,0 +1,90 @@
+/**
+ * FilterItem 样式
+ * RangePicker 按 Figma Pisell 2.0 Component Library (node-id=13586-90520)
+ * 使用 pisell-lowcode- 前缀（RangePicker 传入 prefixCls="pisell-lowcode"）
+ * - Border: Gray/300 #D0D5DD, 1px
+ * - Background: Base/White #FFFFFF
+ * - Text/Icon: Gray/500 #667085
+ * - Typography: Text md/Regular - Inter 16px, weight 400, line-height 24px
+ * - Shadow: Shadow/xs 0 1px 2px rgba(16, 24, 40, 0.05)
+ * - Border radius: 8px
+ */
+
+.pisell-lowcode-range-picker-wrap {
+  //width: 257px;
+  width: 100%;
+
+  .pisell-lowcode-range {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0;
+    color: #667085;
+    border-radius: 8px;
+    border: 1px solid #d0d5dd;
+    background: #ffffff;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+    width: 100%;
+    height: 48px;
+    min-height: 48px;
+    padding: 6px 11px;
+
+    .pisell-lowcode-picker-input {
+      height: 36px;
+
+      > input {
+        font-family: inherit;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        color: #667085;
+
+        &::placeholder {
+          color: #667085;
+          opacity: 0.6;
+        }
+      }
+    }
+
+    .pisell-lowcode-picker-separator {
+      color: #667085;
+    }
+
+    .pisell-lowcode-picker-suffix,
+    .pisell-lowcode-picker-clear {
+      color: #667085;
+    }
+
+    &:hover {
+      border-color: #d0d5dd;
+    }
+
+    &.pisell-lowcode-picker-focused {
+      border-color: #d0d5dd;
+      box-shadow: 0 0 0 2px rgba(16, 24, 40, 0.05);
+    }
+
+    &.pisell-lowcode-picker-large {
+      height: 48px;
+      min-height: 48px;
+      padding: 6px 11px;
+
+      .pisell-lowcode-picker-input {
+        height: 36px;
+      }
+    }
+
+    &.pisell-lowcode-picker-small {
+      min-height: 32px;
+      padding: 2px 7px;
+
+      .pisell-lowcode-picker-input {
+        height: 24px;
+      }
+
+      .pisell-lowcode-picker-input > input {
+        font-size: 14px;
+      }
+    }
+  }
+}

package/lib/components/filter/components/items/index.d.ts

@@ -6,8 +6,8 @@ export declare const fieldMaps: {
             field_type: string;
             default_value: string;
         };
-        Preview: (props: any) => import("react").JSX.Element;
-        Editor: () => import("react").JSX.Element;
+        Preview: (props: any) => JSX.Element;
+        Editor: () => JSX.Element;
     };
 };
 export declare const fieldList: {
@@ -23,8 +23,8 @@ export declare const getFieldByType: (type: string) => {
         field_type: string;
         default_value: string;
     };
-    Preview: (props: any) => import("react").JSX.Element;
-    Editor: () => import("react").JSX.Element;
+    Preview: (props: any) => JSX.Element;
+    Editor: () => JSX.Element;
 };
 declare const _default: {
     text: {
@@ -34,8 +34,8 @@ declare const _default: {
             field_type: string;
             default_value: string;
         };
-        Preview: (props: any) => import("react").JSX.Element;
-        Editor: () => import("react").JSX.Element;
+        Preview: (props: any) => JSX.Element;
+        Editor: () => JSX.Element;
     };
 };
 export default _default;

package/lib/components/filter/components/items/text/Editor/index.d.ts

@@ -1,2 +1,2 @@
-declare const Text: () => import("react").JSX.Element;
+declare const Text: () => JSX.Element;
 export default Text;

package/lib/components/filter/components/items/text/Preview/index.d.ts

@@ -1,2 +1,2 @@
-declare const Text: (props: any) => import("react").JSX.Element;
+declare const Text: (props: any) => JSX.Element;
 export default Text;

package/lib/components/filter/components/items/text/index.d.ts

@@ -5,7 +5,7 @@ declare const _default: {
         field_type: string;
         default_value: string;
     };
-    Preview: (props: any) => import("react").JSX.Element;
-    Editor: () => import("react").JSX.Element;
+    Preview: (props: any) => JSX.Element;
+    Editor: () => JSX.Element;
 };
 export default _default;

package/lib/components/filter/index.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { FilterProps } from "./types";
-declare const Filter: (props: FilterProps) => React.JSX.Element | null;
+declare const Filter: (props: FilterProps) => JSX.Element | null;
 export default Filter;

package/lib/components/filter/types.d.ts

@@ -0,0 +1,48 @@
+import { ModeType } from "../table/types";
+/**
+ * 筛选总配置
+ */
+export declare type FilterType = {
+    /** 筛选是否展示 */
+    show: boolean;
+    /** 筛选项排序按钮是否展示 */
+    sortButtonShow: boolean;
+    /** 筛选列表 */
+    list: FilterItemProps[];
+    items?: string[];
+    /** 快速筛选最大长度 */
+    quickFilterMaxLength: number;
+    /** 配置存储模式 */
+    storageMode: "" | "localStorage";
+    /** 筛选列表项dom */
+    dom?: any;
+};
+/**
+ * 筛选列表项配置
+ * - type 为 single/input/rangePicker 等时使用内置或映射组件
+ * - type 为 "custom" 时使用 other.component，组件接收 value/onChange（由 Form 注入）
+ */
+export declare type FilterItemProps = {
+    type: "single" | "input" | "datePicker" | "rangePicker" | "rangePickerNew" | "search" | "custom";
+    name?: string | string[];
+    key: string;
+    props?: object;
+    label?: string;
+    sort?: boolean;
+    localFilter?: boolean;
+    other: Record<string, any>;
+    isCustom?: boolean;
+    columnKey?: string;
+    isHidden?: boolean;
+};
+/**
+ * 筛选组件属性
+ */
+export interface FilterProps {
+    filter: FilterType;
+    isRenderFormContent: boolean;
+    onValuesChange?: () => void;
+    tableId?: string;
+    viewMode?: ModeType;
+    isMobile?: boolean;
+}

package/lib/components/iconSelect/utils.d.ts

@@ -0,0 +1,14 @@
+export declare type IconGroup = 'outlined' | 'filled' | 'two-tone' | 'iconfont';
+export declare function get(obj: any, path: string, defaultValue?: any): any;
+export declare function getAntdIconList(): ({
+    name: any;
+    group: "filled" | "outlined" | "two-tone";
+    icon: any;
+} | null)[];
+interface IconItem {
+    name: string;
+    group: IconGroup;
+    icon: any;
+}
+export declare function getIconList(): IconItem[];
+export {};

package/lib/components/iconfont/index.d.ts

@@ -0,0 +1,8 @@
+import { IconComponentProps } from '@ant-design/icons/es/components/Icon';
+import React from 'react';
+interface IconFontProps extends IconComponentProps {
+    type: string;
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+}
+declare const IconFont: React.FC<IconFontProps>;
+export default IconFont;

package/lib/components/image/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ImageProps as AntdImageProps } from 'antd';
+export interface ImageProps extends Omit<AntdImageProps, 'placeholder'> {
+    /**
+     * 占位图类型
+     */
+    fallbackType?: 'image' | 'avatar' | 'product';
+}
+declare const Image: React.FC<ImageProps>;
+export default Image;

package/lib/components/keyboard/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import './index.less';
+export declare type ItemValue = string | number;
+export interface Item {
+    value: ItemValue;
+    label: React.ReactNode;
+    disabled: boolean;
+    type: 'text' | 'primary';
+    style?: React.CSSProperties;
+    size?: number;
+}
+export interface KeyboardProps {
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: (value?: ItemValue) => void;
+    items?: Item[];
+    rightItems?: Item[];
+    keydown?: boolean;
+}
+declare const _default: React.MemoExoticComponent<(props: KeyboardProps) => JSX.Element>;
+export default _default;

package/lib/components/list/index.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 import "./index.less";
 declare const List: {
-    (props: any): React.JSX.Element;
+    (props: any): JSX.Element;
     Item: import("antd/es/list/Item").ListItemTypeProps;
 };
 export default List;