@ant-design/pro-components 3.1.0-0 → 3.1.1-0

package/es/utils/components/FieldLabel/index.js

@@ -1,56 +1,53 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { CloseCircleFilled, DownOutlined } from '@ant-design/icons';
 import { ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useImperativeHandle, useRef } from 'react';
 import { useIntl } from "../../../provider";
 import { useStyle } from "./style";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-var FieldLabelFunction = function FieldLabelFunction(props, ref) {
-  var _ConfigProvider$useCo, _ref2, _props$size;
-  var label = props.label,
-    onClear = props.onClear,
-    value = props.value,
-    disabled = props.disabled,
-    onLabelClick = props.onLabelClick,
-    ellipsis = props.ellipsis,
-    placeholder = props.placeholder,
-    className = props.className,
-    formatter = props.formatter,
-    variant = props.variant,
-    style = props.style,
-    downIcon = props.downIcon,
-    _props$allowClear = props.allowClear,
-    allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
-    _props$valueMaxLength = props.valueMaxLength,
-    valueMaxLength = _props$valueMaxLength === void 0 ? 41 : _props$valueMaxLength;
-  var _ref = (ConfigProvider === null || ConfigProvider === void 0 || (_ConfigProvider$useCo = ConfigProvider.useConfig) === null || _ConfigProvider$useCo === void 0 ? void 0 : _ConfigProvider$useCo.call(ConfigProvider)) || {
-      componentSize: 'middle'
-    },
-    componentSize = _ref.componentSize;
-  var size = componentSize;
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-core-field-label');
-  var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var intl = useIntl();
-  var clearRef = useRef(null);
-  var labelRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      labelRef: labelRef,
-      clearRef: clearRef
-    };
-  });
-  var wrapElements = function wrapElements(array) {
-    if (array.every(function (item) {
-      return typeof item === 'string';
-    })) return array.join(',');
-    return array.map(function (item, index) {
-      var comma = index === array.length - 1 ? '' : ',';
+const FieldLabelFunction = (props, ref) => {
+  const {
+    label,
+    onClear,
+    value,
+    disabled,
+    onLabelClick,
+    ellipsis,
+    placeholder,
+    className,
+    formatter,
+    variant,
+    style,
+    downIcon,
+    allowClear = true,
+    valueMaxLength = 41
+  } = props;
+  const {
+    componentSize
+  } = ConfigProvider?.useConfig?.() || {
+    componentSize: 'middle'
+  };
+  const size = componentSize;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-core-field-label');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(prefixCls);
+  const intl = useIntl();
+  const clearRef = useRef(null);
+  const labelRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    labelRef,
+    clearRef
+  }));
+  const wrapElements = array => {
+    if (array.every(item => typeof item === 'string')) return array.join(',');
+    return array.map((item, index) => {
+      const comma = index === array.length - 1 ? '' : ',';
       if (typeof item === 'string') {
         return /*#__PURE__*/_jsxs("span", {
           children: [item, comma]
@@ -64,23 +61,22 @@ var FieldLabelFunction = function FieldLabelFunction(props, ref) {
       }, index);
     });
   };
-  var formatterText = function formatterText(aValue) {
+  const formatterText = aValue => {
     if (formatter) {
       return formatter(aValue);
     }
     return Array.isArray(aValue) ? wrapElements(aValue) : aValue;
   };
-  var getTextByValue = function getTextByValue(aLabel, aValue) {
+  const getTextByValue = (aLabel, aValue) => {
     if (aValue !== undefined && aValue !== null && aValue !== '' && (!Array.isArray(aValue) || aValue.length)) {
-      var _str$toString, _str$toString$slice;
-      var prefix = aLabel ? /*#__PURE__*/_jsxs("span", {
-        onClick: function onClick() {
-          onLabelClick === null || onLabelClick === void 0 || onLabelClick();
+      const prefix = aLabel ? /*#__PURE__*/_jsxs("span", {
+        onClick: () => {
+          onLabelClick?.();
         },
-        className: "".concat(prefixCls, "-text"),
+        className: `${prefixCls}-text`,
         children: [aLabel, ': ']
       }) : '';
-      var str = formatterText(aValue);
+      const str = formatterText(aValue);
       if (!ellipsis) {
         return /*#__PURE__*/_jsxs("span", {
           style: {
@@ -90,15 +86,15 @@ var FieldLabelFunction = function FieldLabelFunction(props, ref) {
           children: [prefix, formatterText(aValue)]
         });
       }
-      var getText = function getText() {
-        var isArrayValue = Array.isArray(aValue) && aValue.length > 1;
-        var unitText = intl.getMessage('form.lightFilter.itemUnit', '项');
+      const getText = () => {
+        const isArrayValue = Array.isArray(aValue) && aValue.length > 1;
+        const unitText = intl.getMessage('form.lightFilter.itemUnit', '项');
         if (typeof str === 'string' && str.length > valueMaxLength && isArrayValue) {
-          return "...".concat(aValue.length).concat(unitText);
+          return `...${aValue.length}${unitText}`;
         }
         return '';
       };
-      var tail = getText();
+      const tail = getText();
       return /*#__PURE__*/_jsxs("span", {
         title: typeof str === 'string' ? str : undefined,
         style: {
@@ -110,32 +106,36 @@ var FieldLabelFunction = function FieldLabelFunction(props, ref) {
             paddingInlineStart: 4,
             display: 'flex'
           },
-          children: typeof str === 'string' ? str === null || str === void 0 || (_str$toString = str.toString()) === null || _str$toString === void 0 || (_str$toString$slice = _str$toString.slice) === null || _str$toString$slice === void 0 ? void 0 : _str$toString$slice.call(_str$toString, 0, valueMaxLength) : str
+          children: typeof str === 'string' ? str?.toString()?.slice?.(0, valueMaxLength) : str
         }), tail]
       });
     }
     return aLabel || placeholder;
   };
   return wrapSSR( /*#__PURE__*/_jsxs("span", {
-    className: classNames(prefixCls, hashId, "".concat(prefixCls, "-").concat((_ref2 = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : size) !== null && _ref2 !== void 0 ? _ref2 : 'middle'), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-active"), (Array.isArray(value) ? value.length > 0 : !!value) || value === 0), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-bordered"), variant !== 'borderless'), "".concat(prefixCls, "-allow-clear"), allowClear), className),
+    className: clsx(prefixCls, hashId, `${prefixCls}-${props.size ?? size ?? 'middle'}`, {
+      [`${prefixCls}-active`]: (Array.isArray(value) ? value.length > 0 : !!value) || value === 0,
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-bordered`]: variant !== 'borderless',
+      [`${prefixCls}-allow-clear`]: allowClear
+    }, className),
     style: style,
     ref: labelRef,
-    onClick: function onClick() {
-      var _props$onClick;
-      props === null || props === void 0 || (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props);
+    onClick: () => {
+      props?.onClick?.();
     },
     children: [getTextByValue(label, value), (value || value === 0) && allowClear && /*#__PURE__*/_jsx(CloseCircleFilled, {
       role: "button",
       title: intl.getMessage('form.lightFilter.clear', '清除'),
-      className: classNames("".concat(prefixCls, "-icon"), hashId, "".concat(prefixCls, "-close")),
-      onClick: function onClick(e) {
-        if (!disabled) onClear === null || onClear === void 0 || onClear();
+      className: clsx(`${prefixCls}-icon`, hashId, `${prefixCls}-close`),
+      onClick: e => {
+        if (!disabled) onClear?.();
         e.stopPropagation();
       },
       ref: clearRef
-    }), downIcon !== false ? downIcon !== null && downIcon !== void 0 ? downIcon : /*#__PURE__*/_jsx(DownOutlined, {
-      className: classNames("".concat(prefixCls, "-icon"), hashId, "".concat(prefixCls, "-arrow"))
+    }), downIcon !== false ? downIcon ?? /*#__PURE__*/_jsx(DownOutlined, {
+      className: clsx(`${prefixCls}-icon`, hashId, `${prefixCls}-arrow`)
     }) : null]
   }));
 };
-export var FieldLabel = /*#__PURE__*/React.forwardRef(FieldLabelFunction);
+export const FieldLabel = /*#__PURE__*/React.forwardRef(FieldLabelFunction);

package/es/utils/components/FieldLabel/style.js

@@ -1,89 +1,112 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genProStyle = function genProStyle(token) {
-  return _defineProperty({}, token.componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    display: 'inline-flex',
-    gap: token.marginXXS,
-    alignItems: 'center',
-    height: '30px',
-    paddingBlock: 0,
-    paddingInline: 8,
-    fontSize: token.fontSize,
-    lineHeight: '30px',
-    borderRadius: '2px',
-    cursor: 'pointer',
-    '&:hover': {
-      backgroundColor: token.colorBgTextHover
-    },
-    '&-active': _defineProperty({
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
+      display: 'inline-flex',
+      gap: token.marginXXS,
+      alignItems: 'center',
+      height: '30px',
       paddingBlock: 0,
       paddingInline: 8,
-      backgroundColor: token.colorBgTextHover
-    }, "&".concat(token.componentCls, "-allow-clear:hover:not(").concat(token.componentCls, "-disabled)"), _defineProperty(_defineProperty({}, "".concat(token.componentCls, "-arrow"), {
-      display: 'none'
-    }), "".concat(token.componentCls, "-close"), {
-      display: 'inline-flex'
-    }))
-  }, "".concat(token.antCls, "-select"), _defineProperty({}, "".concat(token.antCls, "-select-clear"), {
-    borderRadius: '50%'
-  })), "".concat(token.antCls, "-picker"), _defineProperty({}, "".concat(token.antCls, "-picker-clear"), {
-    borderRadius: '50%'
-  })), '&-icon', _defineProperty(_defineProperty({
-    color: token.colorIcon,
-    transition: 'color 0.3s',
-    fontSize: 12,
-    verticalAlign: 'middle'
-  }, "&".concat(token.componentCls, "-close"), {
-    display: 'none',
-    fontSize: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: token.colorTextPlaceholder,
-    borderRadius: '50%'
-  }), '&:hover', {
-    color: token.colorIconHover
-  })), '&-disabled', _defineProperty({
-    color: token.colorTextPlaceholder,
-    cursor: 'not-allowed'
-  }, "".concat(token.componentCls, "-icon"), {
-    color: token.colorTextPlaceholder
-  })), '&-small', _defineProperty(_defineProperty(_defineProperty({
-    height: '24px',
-    paddingBlock: 0,
-    paddingInline: 4,
-    fontSize: token.fontSizeSM,
-    lineHeight: '24px'
-  }, "&".concat(token.componentCls, "-active"), {
-    paddingBlock: 0,
-    paddingInline: 8
-  }), "".concat(token.componentCls, "-icon"), {
-    paddingBlock: 0,
-    paddingInline: 0
-  }), "".concat(token.componentCls, "-close"), {
-    marginBlockStart: '-2px',
-    paddingBlock: 4,
-    paddingInline: 4,
-    fontSize: '6px'
-  })), '&-bordered', {
-    height: '32px',
-    paddingBlock: 0,
-    paddingInline: 8,
-    border: "".concat(token.lineWidth, "px solid ").concat(token.colorBorder),
-    borderRadius: '@border-radius-base'
-  }), '&-bordered&-small', {
-    height: '24px',
-    paddingBlock: 0,
-    paddingInline: 8
-  }), '&-bordered&-active', {
-    backgroundColor: token.colorBgContainer
-  }));
+      fontSize: token.fontSize,
+      lineHeight: '30px',
+      borderRadius: '2px',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: token.colorBgTextHover
+      },
+      '&-active': {
+        paddingBlock: 0,
+        paddingInline: 8,
+        backgroundColor: token.colorBgTextHover,
+        [`&${token.componentCls}-allow-clear:hover:not(${token.componentCls}-disabled)`]: {
+          [`${token.componentCls}-arrow`]: {
+            display: 'none'
+          },
+          [`${token.componentCls}-close`]: {
+            display: 'inline-flex'
+          }
+        }
+      },
+      [`${token.antCls}-select`]: {
+        [`${token.antCls}-select-clear`]: {
+          borderRadius: '50%'
+        }
+      },
+      [`${token.antCls}-picker`]: {
+        [`${token.antCls}-picker-clear`]: {
+          borderRadius: '50%'
+        }
+      },
+      '&-icon': {
+        color: token.colorIcon,
+        transition: 'color 0.3s',
+        fontSize: 12,
+        verticalAlign: 'middle',
+        [`&${token.componentCls}-close`]: {
+          display: 'none',
+          fontSize: 12,
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: token.colorTextPlaceholder,
+          borderRadius: '50%'
+        },
+        '&:hover': {
+          color: token.colorIconHover
+        }
+      },
+      '&-disabled': {
+        color: token.colorTextPlaceholder,
+        cursor: 'not-allowed',
+        [`${token.componentCls}-icon`]: {
+          color: token.colorTextPlaceholder
+        }
+      },
+      '&-small': {
+        height: '24px',
+        paddingBlock: 0,
+        paddingInline: 4,
+        fontSize: token.fontSizeSM,
+        lineHeight: '24px',
+        [`&${token.componentCls}-active`]: {
+          paddingBlock: 0,
+          paddingInline: 8
+        },
+        [`${token.componentCls}-icon`]: {
+          paddingBlock: 0,
+          paddingInline: 0
+        },
+        [`${token.componentCls}-close`]: {
+          marginBlockStart: '-2px',
+          paddingBlock: 4,
+          paddingInline: 4,
+          fontSize: '6px'
+        }
+      },
+      '&-bordered': {
+        height: '32px',
+        paddingBlock: 0,
+        paddingInline: 8,
+        border: `${token.lineWidth}px solid ${token.colorBorder}`,
+        borderRadius: '@border-radius-base'
+      },
+      '&-bordered&-small': {
+        height: '24px',
+        paddingBlock: 0,
+        paddingInline: 8
+      },
+      '&-bordered&-active': {
+        backgroundColor: token.colorBgContainer
+      }
+    }
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('FieldLabel', function (token) {
-    var proToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('FieldLabel', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }

package/es/utils/components/FilterDropdown/index.d.ts

@@ -1,3 +1,4 @@
+import type { PopoverProps } from 'antd';
 import type { TooltipPlacement } from 'antd/lib/tooltip';
 import React from 'react';
 import type { DropdownFooterProps } from '../DropdownFooter';
@@ -11,6 +12,16 @@ export type DropdownProps = {
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
     placement?: TooltipPlacement;
+    /**
+     * @name 透传给 Popover 的属性
+     *
+     * @description
+     * 用于给弹层（portal 到 body 的容器）设置自定义类名/样式等，例如通过 classNames.root 控制样式范围。
+     *
+     * @example
+     * popoverProps={{ classNames: { root: 'my-lightfilter-popover' } } }
+     */
+    popoverProps?: Omit<PopoverProps, 'children' | 'content' | 'trigger' | 'open' | 'onOpenChange' | 'placement'>;
     children?: React.ReactNode;
 };
 declare const FilterDropdown: React.FC<DropdownProps>;

package/es/utils/components/FilterDropdown/index.js

@@ -1,56 +1,67 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { ConfigProvider, Popover } from 'antd';
-import classNames from 'classnames';
-import React, { useContext, useRef } from 'react';
+import { clsx } from 'clsx';
+import React, { useContext, useMemo, useRef } from 'react';
 import { DropdownFooter } from "../DropdownFooter";
 import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var FilterDropdown = function FilterDropdown(props) {
-  var children = props.children,
-    label = props.label,
-    footer = props.footer,
-    open = props.open,
-    onOpenChange = props.onOpenChange,
-    disabled = props.disabled,
-    footerRender = props.footerRender,
-    placement = props.placement;
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-core-field-dropdown');
-  var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var htmlRef = useRef(null);
+const FilterDropdown = props => {
+  const {
+    children,
+    label,
+    footer,
+    open,
+    onOpenChange,
+    disabled,
+    footerRender,
+    placement,
+    popoverProps
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-core-field-dropdown');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(prefixCls);
+  const htmlRef = useRef(null);
+  const styles = useMemo(() => ({
+    container: {
+      padding: 0,
+      ...(popoverProps?.styles?.container || {})
+    },
+    ...(popoverProps?.styles || {})
+  }), [popoverProps?.styles]);
   return wrapSSR( /*#__PURE__*/_jsx(Popover, {
+    ...popoverProps,
     placement: placement,
     trigger: ['click'],
     open: open || false,
     onOpenChange: onOpenChange,
-    styles: {
-      container: {
-        padding: 0
-      }
-    },
+    styles: styles,
     content: /*#__PURE__*/_jsxs("div", {
       ref: htmlRef,
-      className: classNames("".concat(prefixCls, "-overlay"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-overlay-").concat(placement), placement), "hashId", hashId)),
+      className: clsx(`${prefixCls}-overlay`, {
+        [`${prefixCls}-overlay-${placement}`]: placement,
+        hashId
+      }),
       children: [/*#__PURE__*/_jsx(ConfigProvider, {
-        getPopupContainer: function getPopupContainer() {
+        getPopupContainer: () => {
           return htmlRef.current || document.body;
         },
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefixCls, "-content ").concat(hashId).trim(),
+          className: `${prefixCls}-content ${hashId}`.trim(),
           children: children
         })
-      }), footer && /*#__PURE__*/_jsx(DropdownFooter, _objectSpread({
+      }), footer && /*#__PURE__*/_jsx(DropdownFooter, {
         disabled: disabled,
-        footerRender: footerRender
-      }, footer))]
+        footerRender: footerRender,
+        ...footer
+      })]
     }),
     children: /*#__PURE__*/_jsx("span", {
-      className: "".concat(prefixCls, "-label ").concat(hashId).trim(),
+      className: `${prefixCls}-label ${hashId}`.trim(),
       children: label
     })
   }));

package/es/utils/components/FilterDropdown/style.js

@@ -1,22 +1,25 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genProStyle = function genProStyle(token) {
-  return _defineProperty(_defineProperty(_defineProperty({}, "".concat(token.componentCls, "-label"), {
-    cursor: 'pointer'
-  }), "".concat(token.componentCls, "-overlay"), {
-    minWidth: '200px',
-    marginBlockStart: '4px'
-  }), "".concat(token.componentCls, "-content"), {
-    paddingBlock: 16,
-    paddingInline: 16
-  });
+const genProStyle = token => {
+  return {
+    [`${token.componentCls}-label`]: {
+      cursor: 'pointer'
+    },
+    [`${token.componentCls}-overlay`]: {
+      minWidth: '200px',
+      marginBlockStart: '4px'
+    },
+    [`${token.componentCls}-content`]: {
+      paddingBlock: 16,
+      paddingInline: 16
+    }
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('FilterDropdown', function (token) {
-    var proToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('FilterDropdown', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }