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

package/es/form/layouts/LightFilter/index.js

@@ -1,12 +1,7 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["size", "collapse", "collapseLabel", "initialValues", "onValuesChange", "form", "placement", "formRef", "variant", "ignoreRules", "footerRender"];
 import { FilterOutlined } from '@ant-design/icons';
 import { omit } from '@rc-component/util';
 import { ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useIntl } from "../../../provider";
 import { FieldLabel, FilterDropdown } from "../../../utils";
@@ -19,63 +14,66 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @param props
  */
-var LightFilterContainer = function LightFilterContainer(props) {
-  var items = props.items,
-    prefixCls = props.prefixCls,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'middle' : _props$size,
-    collapse = props.collapse,
-    collapseLabel = props.collapseLabel,
-    onValuesChange = props.onValuesChange,
-    variant = props.variant,
-    values = props.values,
-    footerRender = props.footerRender,
-    placement = props.placement;
-  var intl = useIntl();
-  var lightFilterClassName = "".concat(prefixCls, "-light-filter");
-  var _useStyle = useStyle(lightFilterClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var _useState3 = useState(function () {
-      return _objectSpread({}, values);
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    moreValues = _useState4[0],
-    setMoreValues = _useState4[1];
-  useEffect(function () {
-    setMoreValues(_objectSpread({}, values));
+const LightFilterContainer = props => {
+  const {
+    items,
+    prefixCls,
+    size = 'middle',
+    collapse,
+    collapseLabel,
+    onValuesChange,
+    variant,
+    values,
+    footerRender,
+    placement,
+    popoverProps
+  } = props;
+  const intl = useIntl();
+  const lightFilterClassName = `${prefixCls}-light-filter`;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(lightFilterClassName);
+  const [open, setOpen] = useState(false);
+  const [moreValues, setMoreValues] = useState(() => {
+    return {
+      ...values
+    };
+  });
+  useEffect(() => {
+    setMoreValues({
+      ...values
+    });
   }, [values]);
-  var _useMemo = useMemo(function () {
-      var collapseItemsArr = [];
-      var outsideItemsArr = [];
-      items.forEach(function (item) {
-        var _ref = item.props || {},
-          secondary = _ref.secondary;
-        if (secondary || collapse) {
-          collapseItemsArr.push(item);
-        } else {
-          outsideItemsArr.push(item);
-        }
-      });
-      return {
-        collapseItems: collapseItemsArr,
-        outsideItems: outsideItemsArr
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.items]),
-    collapseItems = _useMemo.collapseItems,
-    outsideItems = _useMemo.outsideItems;
-  var renderCollapseLabelRender = function renderCollapseLabelRender() {
+  const {
+    collapseItems,
+    outsideItems
+  } = useMemo(() => {
+    const collapseItemsArr = [];
+    const outsideItemsArr = [];
+    items.forEach(item => {
+      const {
+        secondary
+      } = item.props || {};
+      if (secondary || collapse) {
+        collapseItemsArr.push(item);
+      } else {
+        outsideItemsArr.push(item);
+      }
+    });
+    return {
+      collapseItems: collapseItemsArr,
+      outsideItems: outsideItemsArr
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.items]);
+  const renderCollapseLabelRender = () => {
     if (collapseLabel) {
       return collapseLabel;
     }
     if (collapse) {
       return /*#__PURE__*/_jsx(FilterOutlined, {
-        className: "".concat(lightFilterClassName, "-collapse-icon ").concat(hashId).trim()
+        className: `${lightFilterClassName}-collapse-icon ${hashId}`.trim()
       });
     }
     return /*#__PURE__*/_jsx(FieldLabel, {
@@ -84,80 +82,98 @@ var LightFilterContainer = function LightFilterContainer(props) {
     });
   };
   return wrapSSR( /*#__PURE__*/_jsx("div", {
-    className: classNames(lightFilterClassName, hashId, "".concat(lightFilterClassName, "-").concat(size), _defineProperty({}, "".concat(lightFilterClassName, "-effective"), Object.keys(values).some(function (key) {
-      return Array.isArray(values[key]) ? values[key].length > 0 : values[key];
-    }))),
+    className: clsx(lightFilterClassName, hashId, `${lightFilterClassName}-${size}`, {
+      [`${lightFilterClassName}-effective`]: Object.keys(values).some(key => Array.isArray(values[key]) ? values[key].length > 0 : values[key])
+    }),
     children: /*#__PURE__*/_jsxs("div", {
-      className: "".concat(lightFilterClassName, "-container ").concat(hashId).trim(),
-      children: [outsideItems.map(function (child, index) {
-        if (!(child !== null && child !== void 0 && child.props)) {
+      className: `${lightFilterClassName}-container ${hashId}`.trim(),
+      children: [outsideItems.map((child, index) => {
+        if (!child?.props) {
           return child;
         }
-        var key = child.key;
-        var _ref2 = (child === null || child === void 0 ? void 0 : child.props) || {},
-          fieldProps = _ref2.fieldProps;
-        var newPlacement = fieldProps !== null && fieldProps !== void 0 && fieldProps.placement ? fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.placement : placement;
+        const {
+          key
+        } = child;
+        const {
+          fieldProps
+        } = child?.props || {};
+        const newPlacement = fieldProps?.placement ? fieldProps?.placement : placement;
         return /*#__PURE__*/_jsx("div", {
-          className: "".concat(lightFilterClassName, "-item ").concat(hashId).trim(),
+          className: `${lightFilterClassName}-item ${hashId}`.trim(),
           children: /*#__PURE__*/React.cloneElement(child, {
-            fieldProps: _objectSpread(_objectSpread({}, child.props.fieldProps), {}, {
+            fieldProps: {
+              ...child.props.fieldProps,
               placement: newPlacement
-            }),
+            },
             // proFieldProps 会直接作为 ProField 的 props 传递过去
-            proFieldProps: _objectSpread(_objectSpread({}, child.props.proFieldProps), {}, {
+            proFieldProps: {
+              ...child.props.proFieldProps,
               light: true,
               label: child.props.label,
-              variant: variant
-            }),
-            variant: variant
+              variant
+            },
+            variant
           })
         }, key || index);
       }), collapseItems.length ? /*#__PURE__*/_jsx("div", {
-        className: "".concat(lightFilterClassName, "-item ").concat(hashId).trim(),
+        className: `${lightFilterClassName}-item ${hashId}`.trim(),
         children: /*#__PURE__*/_jsx(FilterDropdown, {
           padding: 24,
           open: open,
-          onOpenChange: function onOpenChange(changeOpen) {
+          onOpenChange: changeOpen => {
             setOpen(changeOpen);
           },
           placement: placement,
+          popoverProps: popoverProps,
           label: renderCollapseLabelRender(),
           footerRender: footerRender,
           footer: {
-            onConfirm: function onConfirm() {
-              onValuesChange(_objectSpread({}, moreValues));
+            onConfirm: () => {
+              onValuesChange({
+                ...moreValues
+              });
               setOpen(false);
             },
-            onClear: function onClear() {
-              var clearValues = {};
-              collapseItems.forEach(function (child) {
-                var name = child.props.name;
+            onClear: () => {
+              const clearValues = {};
+              collapseItems.forEach(child => {
+                const {
+                  name
+                } = child.props;
                 clearValues[name] = undefined;
               });
               onValuesChange(clearValues);
             }
           },
-          children: collapseItems.map(function (child) {
-            var key = child.key;
-            var _child$props = child.props,
-              name = _child$props.name,
-              fieldProps = _child$props.fieldProps;
-            var newFieldProps = _objectSpread(_objectSpread({}, fieldProps), {}, {
-              onChange: function onChange(e) {
-                setMoreValues(_objectSpread(_objectSpread({}, moreValues), {}, _defineProperty({}, name, e !== null && e !== void 0 && e.target ? e.target.value : e)));
+          children: collapseItems.map(child => {
+            const {
+              key
+            } = child;
+            const {
+              name,
+              fieldProps
+            } = child.props;
+            const newFieldProps = {
+              ...fieldProps,
+              onChange: e => {
+                setMoreValues({
+                  ...moreValues,
+                  [name]: e?.target ? e.target.value : e
+                });
                 return false;
               }
-            });
+            };
             if (moreValues.hasOwnProperty(name)) {
               newFieldProps[child.props.valuePropName || 'value'] = moreValues[name];
             }
-            var newPlacement = fieldProps !== null && fieldProps !== void 0 && fieldProps.placement ? fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.placement : placement;
+            const newPlacement = fieldProps?.placement ? fieldProps?.placement : placement;
             return /*#__PURE__*/_jsx("div", {
-              className: "".concat(lightFilterClassName, "-line ").concat(hashId).trim(),
+              className: `${lightFilterClassName}-line ${hashId}`.trim(),
               children: /*#__PURE__*/React.cloneElement(child, {
-                fieldProps: _objectSpread(_objectSpread({}, newFieldProps), {}, {
+                fieldProps: {
+                  ...newFieldProps,
                   placement: newPlacement
-                })
+                }
               })
             }, key);
           })
@@ -167,43 +183,43 @@ var LightFilterContainer = function LightFilterContainer(props) {
   }));
 };
 function LightFilter(props) {
-  var size = props.size,
-    collapse = props.collapse,
-    collapseLabel = props.collapseLabel,
-    initialValues = props.initialValues,
-    _onValuesChange = props.onValuesChange,
-    userForm = props.form,
-    placement = props.placement,
-    userFormRef = props.formRef,
-    variant = props.variant,
-    ignoreRules = props.ignoreRules,
-    footerRender = props.footerRender,
-    reset = _objectWithoutProperties(props, _excluded);
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-form');
-  var _useState5 = useState(function () {
-      return _objectSpread({}, initialValues);
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    values = _useState6[0],
-    setValues = _useState6[1];
-  var formRef = useRef();
-  useImperativeHandle(userFormRef, function () {
-    return formRef.current;
-  }, [formRef.current]);
-  return /*#__PURE__*/_jsx(BaseForm, _objectSpread(_objectSpread({
+  const {
+    size,
+    collapse,
+    collapseLabel,
+    initialValues,
+    onValuesChange,
+    form: userForm,
+    placement,
+    formRef: userFormRef,
+    variant,
+    ignoreRules,
+    footerRender,
+    popoverProps,
+    ...reset
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-form');
+  const [values, setValues] = useState(() => {
+    return {
+      ...initialValues
+    };
+  });
+  const formRef = useRef();
+  useImperativeHandle(userFormRef, () => formRef.current, [formRef.current]);
+  return /*#__PURE__*/_jsx(BaseForm, {
     size: size,
     initialValues: initialValues,
     form: userForm,
-    contentRender: function contentRender(items) {
+    contentRender: items => {
       return /*#__PURE__*/_jsx(LightFilterContainer, {
         prefixCls: prefixCls,
-        items: items === null || items === void 0 ? void 0 : items.flatMap(function (item) {
-          var _item$type;
-          if (!item || !(item !== null && item !== void 0 && item.type)) return item;
+        items: items?.flatMap(item => {
+          if (!item || !item?.type) return item;
           /** 如果是 ProFormGroup，直接拼接dom */
-          if ((item === null || item === void 0 || (_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.displayName) === 'ProForm-Group') return item.props.children;
+          if (item?.type?.displayName === 'ProForm-Group') return item.props.children;
           return item;
         }),
         size: size,
@@ -211,16 +227,19 @@ function LightFilter(props) {
         collapse: collapse,
         collapseLabel: collapseLabel,
         placement: placement,
+        popoverProps: popoverProps,
         values: values || {},
         footerRender: footerRender,
-        onValuesChange: function onValuesChange(newValues) {
-          var _formRef$current, _formRef$current2;
-          var newAllValues = _objectSpread(_objectSpread({}, values), newValues);
+        onValuesChange: newValues => {
+          const newAllValues = {
+            ...values,
+            ...newValues
+          };
           setValues(newAllValues);
-          (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setFieldsValue(newAllValues);
-          (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 || _formRef$current2.submit();
-          if (_onValuesChange) {
-            _onValuesChange(newValues, newAllValues);
+          formRef.current?.setFieldsValue(newAllValues);
+          formRef.current?.submit();
+          if (onValuesChange) {
+            onValuesChange(newValues, newAllValues);
           }
         }
       });
@@ -234,14 +253,13 @@ function LightFilter(props) {
       style: {
         width: undefined
       }
-    }
-  }, omit(reset, ['labelWidth'])), {}, {
-    onValuesChange: function onValuesChange(_, allValues) {
-      var _formRef$current3;
+    },
+    ...omit(reset, ['labelWidth']),
+    onValuesChange: (_, allValues) => {
       setValues(allValues);
-      _onValuesChange === null || _onValuesChange === void 0 || _onValuesChange(_, allValues);
-      (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 || _formRef$current3.submit();
+      onValuesChange?.(_, allValues);
+      formRef.current?.submit();
     }
-  }));
+  });
 }
 export { LightFilter };

package/es/form/layouts/LightFilter/style.js

@@ -1,54 +1,58 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genLightFilterStyle = function genLightFilterStyle(token) {
-  return _defineProperty({}, token.componentCls, {
-    lineHeight: '30px',
-    // @see https://yuque.antfin-inc.com/tech-ui/topics/523
-    '&::before': {
-      display: 'block',
-      height: 0,
-      visibility: 'hidden',
-      content: "'.'"
-    },
-    '&-small': {
-      lineHeight: token.lineHeight
-    },
-    '&-container': {
-      display: 'flex',
-      flexWrap: 'wrap',
-      gap: token.marginXS
-    },
-    '&-item': _defineProperty({
-      whiteSpace: 'nowrap'
-    }, "".concat(token.antCls, "-form-item"), {
-      marginBlock: 0
-    }),
-    '&-line': {
-      minWidth: '198px'
-    },
-    '&-line:not(:first-child)': {
-      marginBlockStart: '16px',
-      marginBlockEnd: 8
-    },
-    '&-collapse-icon': {
-      width: token.controlHeight,
-      height: token.controlHeight,
-      borderRadius: '50%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    '&-effective': _defineProperty({}, "".concat(token.componentCls, "-collapse-icon"), {
-      backgroundColor: token.colorBgTextHover
-    })
-  });
+const genLightFilterStyle = token => {
+  return {
+    [token.componentCls]: {
+      lineHeight: '30px',
+      // @see https://yuque.antfin-inc.com/tech-ui/topics/523
+      '&::before': {
+        display: 'block',
+        height: 0,
+        visibility: 'hidden',
+        content: "'.'"
+      },
+      '&-small': {
+        lineHeight: token.lineHeight
+      },
+      '&-container': {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: token.marginXS
+      },
+      '&-item': {
+        whiteSpace: 'nowrap',
+        [`${token.antCls}-form-item`]: {
+          marginBlock: 0
+        }
+      },
+      '&-line': {
+        minWidth: '198px'
+      },
+      '&-line:not(:first-child)': {
+        marginBlockStart: '16px',
+        marginBlockEnd: 8
+      },
+      '&-collapse-icon': {
+        width: token.controlHeight,
+        height: token.controlHeight,
+        borderRadius: '50%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      '&-effective': {
+        [`${token.componentCls}-collapse-icon`]: {
+          backgroundColor: token.colorBgTextHover
+        }
+      }
+    }
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('LightFilter', function (token) {
-    var proCardToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('LightFilter', token => {
+    const proCardToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genLightFilterStyle(proCardToken)];
   });
 }

package/es/form/layouts/LoginForm/index.js

@@ -1,8 +1,5 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["logo", "message", "contentStyle", "title", "subTitle", "actions", "children", "containerStyle", "otherStyle"];
 import { ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useMemo } from 'react';
 import { useIntl } from "../../../provider";
 import { ProForm } from "../ProForm";
@@ -10,50 +7,49 @@ import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function LoginForm(props) {
-  var _proFormProps$submitt;
-  var logo = props.logo,
-    message = props.message,
-    contentStyle = props.contentStyle,
-    title = props.title,
-    subTitle = props.subTitle,
-    actions = props.actions,
-    children = props.children,
-    containerStyle = props.containerStyle,
-    otherStyle = props.otherStyle,
-    proFormProps = _objectWithoutProperties(props, _excluded);
-  var intl = useIntl();
-  var submitter = proFormProps.submitter === false ? false : _objectSpread(_objectSpread({
+  const {
+    logo,
+    message,
+    contentStyle,
+    title,
+    subTitle,
+    actions,
+    children,
+    containerStyle,
+    otherStyle,
+    ...proFormProps
+  } = props;
+  const intl = useIntl();
+  const submitter = proFormProps.submitter === false ? false : {
     searchConfig: {
       submitText: intl.getMessage('loginForm.submitText', '登录')
-    }
-  }, proFormProps.submitter), {}, {
-    submitButtonProps: _objectSpread({
+    },
+    ...proFormProps.submitter,
+    submitButtonProps: {
       size: 'large',
       style: {
         width: '100%'
-      }
-    }, (_proFormProps$submitt = proFormProps.submitter) === null || _proFormProps$submitt === void 0 ? void 0 : _proFormProps$submitt.submitButtonProps),
-    render: function render(_, dom) {
-      var _proFormProps$submitt2;
-      var loginButton = dom.pop();
-      if (typeof (proFormProps === null || proFormProps === void 0 || (_proFormProps$submitt2 = proFormProps.submitter) === null || _proFormProps$submitt2 === void 0 ? void 0 : _proFormProps$submitt2.render) === 'function') {
-        var _proFormProps$submitt3, _proFormProps$submitt4;
-        return proFormProps === null || proFormProps === void 0 || (_proFormProps$submitt3 = proFormProps.submitter) === null || _proFormProps$submitt3 === void 0 || (_proFormProps$submitt4 = _proFormProps$submitt3.render) === null || _proFormProps$submitt4 === void 0 ? void 0 : _proFormProps$submitt4.call(_proFormProps$submitt3, _, dom);
+      },
+      ...proFormProps.submitter?.submitButtonProps
+    },
+    render: (_, dom) => {
+      const loginButton = dom.pop();
+      if (typeof proFormProps?.submitter?.render === 'function') {
+        return proFormProps?.submitter?.render?.(_, dom);
       }
       return loginButton;
     }
-  });
-  var context = useContext(ConfigProvider.ConfigContext);
-  var baseClassName = context.getPrefixCls('pro-form-login');
-  var _useStyle = useStyle(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var getCls = function getCls(className) {
-    return "".concat(baseClassName, "-").concat(className, " ").concat(hashId);
   };
+  const context = useContext(ConfigProvider.ConfigContext);
+  const baseClassName = context.getPrefixCls('pro-form-login');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(baseClassName);
+  const getCls = className => `${baseClassName}-${className} ${hashId}`;
 
   /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
-  var logoDom = useMemo(function () {
+  const logoDom = useMemo(() => {
     if (!logo) return null;
     if (typeof logo === 'string') {
       return /*#__PURE__*/_jsx("img", {
@@ -63,12 +59,12 @@ function LoginForm(props) {
     return logo;
   }, [logo]);
   return wrapSSR( /*#__PURE__*/_jsxs("div", {
-    className: classNames(getCls('container'), hashId),
+    className: clsx(getCls('container'), hashId),
     style: containerStyle,
     children: [/*#__PURE__*/_jsxs("div", {
-      className: "".concat(getCls('top'), " ").concat(hashId).trim(),
+      className: `${getCls('top')} ${hashId}`.trim(),
       children: [title || logoDom ? /*#__PURE__*/_jsxs("div", {
-        className: "".concat(getCls('header')),
+        className: `${getCls('header')}`,
         children: [logoDom ? /*#__PURE__*/_jsx("span", {
           className: getCls('logo'),
           children: logoDom
@@ -82,15 +78,16 @@ function LoginForm(props) {
       }) : null]
     }), /*#__PURE__*/_jsxs("div", {
       className: getCls('main'),
-      style: _objectSpread({
-        width: 328
-      }, contentStyle),
-      children: [/*#__PURE__*/_jsxs(ProForm, _objectSpread(_objectSpread({
-        isKeyPressSubmit: true
-      }, proFormProps), {}, {
+      style: {
+        width: 328,
+        ...contentStyle
+      },
+      children: [/*#__PURE__*/_jsxs(ProForm, {
+        isKeyPressSubmit: true,
+        ...proFormProps,
         submitter: submitter,
         children: [message, children]
-      })), actions ? /*#__PURE__*/_jsx("div", {
+      }), actions ? /*#__PURE__*/_jsx("div", {
         className: getCls('main-other'),
         style: otherStyle,
         children: actions