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

package/es/form/layouts/LoginForm/style.d.ts

@@ -4,6 +4,6 @@ export interface LoginFormToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

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

@@ -1,77 +1,81 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genLoginFormStyle = function genLoginFormStyle(token) {
-  return _defineProperty(_defineProperty({}, token.componentCls, {
-    '&-container': {
-      display: 'flex',
-      flex: '1',
-      flexDirection: 'column',
-      height: '100%',
-      paddingInline: 32,
-      paddingBlock: 24,
-      overflow: 'auto',
-      background: 'inherit'
-    },
-    '&-top': {
-      textAlign: 'center'
-    },
-    '&-header': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: '44px',
-      lineHeight: '44px',
-      a: {
-        textDecoration: 'none'
-      }
-    },
-    '&-title': {
-      position: 'relative',
-      insetBlockStart: '2px',
-      color: '@heading-color',
-      fontWeight: '600',
-      fontSize: '33px'
-    },
-    '&-logo': {
-      width: '44px',
-      height: '44px',
-      marginInlineEnd: '16px',
-      verticalAlign: 'top',
-      img: {
-        width: '100%'
+const genLoginFormStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&-container': {
+        display: 'flex',
+        flex: '1',
+        flexDirection: 'column',
+        height: '100%',
+        paddingInline: 32,
+        paddingBlock: 24,
+        overflow: 'auto',
+        background: 'inherit'
+      },
+      '&-top': {
+        textAlign: 'center'
+      },
+      '&-header': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '44px',
+        lineHeight: '44px',
+        a: {
+          textDecoration: 'none'
+        }
+      },
+      '&-title': {
+        position: 'relative',
+        insetBlockStart: '2px',
+        color: '@heading-color',
+        fontWeight: '600',
+        fontSize: '33px'
+      },
+      '&-logo': {
+        width: '44px',
+        height: '44px',
+        marginInlineEnd: '16px',
+        verticalAlign: 'top',
+        img: {
+          width: '100%'
+        }
+      },
+      '&-desc': {
+        marginBlockStart: '12px',
+        marginBlockEnd: '40px',
+        color: token.colorTextSecondary,
+        fontSize: token.fontSize
+      },
+      '&-main': {
+        minWidth: '328px',
+        maxWidth: '580px',
+        margin: '0 auto',
+        '&-other': {
+          marginBlockStart: '24px',
+          lineHeight: '22px',
+          textAlign: 'start'
+        }
       }
     },
-    '&-desc': {
-      marginBlockStart: '12px',
-      marginBlockEnd: '40px',
-      color: token.colorTextSecondary,
-      fontSize: token.fontSize
-    },
-    '&-main': {
-      minWidth: '328px',
-      maxWidth: '580px',
-      margin: '0 auto',
-      '&-other': {
-        marginBlockStart: '24px',
-        lineHeight: '22px',
-        textAlign: 'start'
+    '@media (min-width: @screen-md-min)': {
+      [`${token.componentCls}-container`]: {
+        paddingInline: 0,
+        paddingBlockStart: 32,
+        paddingBlockEnd: 24,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center 110px',
+        backgroundSize: '100%'
       }
     }
-  }), '@media (min-width: @screen-md-min)', _defineProperty({}, "".concat(token.componentCls, "-container"), {
-    paddingInline: 0,
-    paddingBlockStart: 32,
-    paddingBlockEnd: 24,
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'center 110px',
-    backgroundSize: '100%'
-  }));
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('LoginForm', function (token) {
-    var loginFormToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('LoginForm', token => {
+    const loginFormToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genLoginFormStyle(loginFormToken)];
   });
 }

package/es/form/layouts/LoginFormPage/index.d.ts

@@ -62,4 +62,4 @@ export type LoginFormPageProps<T> = {
     mainStyle?: React.CSSProperties;
     otherStyle?: React.CSSProperties;
 } & Omit<ProFormProps<T>, 'title'>;
-export declare function LoginFormPage<T = Record<string, any>>(props: Partial<LoginFormPageProps<T>>): React.JSX.Element;
+export declare function LoginFormPage<T = Record<string, any>>(props: Partial<LoginFormPageProps<T>>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/es/form/layouts/LoginFormPage/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", "style", "activityConfig", "backgroundImageUrl", "backgroundVideoUrl", "title", "subTitle", "actions", "children", "containerStyle", "otherStyle", "mainStyle"];
 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,53 +7,52 @@ import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function LoginFormPage(props) {
-  var logo = props.logo,
-    message = props.message,
-    style = props.style,
-    activityConfig = props.activityConfig,
-    backgroundImageUrl = props.backgroundImageUrl,
-    backgroundVideoUrl = props.backgroundVideoUrl,
-    title = props.title,
-    subTitle = props.subTitle,
-    actions = props.actions,
-    children = props.children,
-    containerStyle = props.containerStyle,
-    otherStyle = props.otherStyle,
-    mainStyle = props.mainStyle,
-    proFormProps = _objectWithoutProperties(props, _excluded);
-  var intl = useIntl();
-  var genSubmitButtonProps = function genSubmitButtonProps() {
-    var _proFormProps$submitt, _proFormProps$submitt2;
+  const {
+    logo,
+    message,
+    style,
+    activityConfig,
+    backgroundImageUrl,
+    backgroundVideoUrl,
+    title,
+    subTitle,
+    actions,
+    children,
+    containerStyle,
+    otherStyle,
+    mainStyle,
+    ...proFormProps
+  } = props;
+  const intl = useIntl();
+  const genSubmitButtonProps = () => {
     if (proFormProps.submitter === false) return false;
-    if (((_proFormProps$submitt = proFormProps.submitter) === null || _proFormProps$submitt === void 0 ? void 0 : _proFormProps$submitt.submitButtonProps) === false) return false;
-    return _objectSpread({
+    if (proFormProps.submitter?.submitButtonProps === false) return false;
+    return {
       size: 'large',
       style: {
         width: '100%'
-      }
-    }, (_proFormProps$submitt2 = proFormProps.submitter) === null || _proFormProps$submitt2 === void 0 ? void 0 : _proFormProps$submitt2.submitButtonProps);
+      },
+      ...proFormProps.submitter?.submitButtonProps
+    };
   };
-  var submitter = _objectSpread(_objectSpread({
+  const submitter = {
     searchConfig: {
       submitText: intl.getMessage('loginForm.submitText', '登录')
     },
-    render: function render(_, dom) {
-      return dom.pop();
-    }
-  }, proFormProps.submitter), {}, {
+    render: (_, dom) => dom.pop(),
+    ...proFormProps.submitter,
     submitButtonProps: genSubmitButtonProps()
-  });
-  var context = useContext(ConfigProvider.ConfigContext);
-  var baseClassName = context.getPrefixCls('pro-form-login-page');
-  var _useStyle = useStyle(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var getCls = function getCls(className) {
-    return "".concat(baseClassName, "-").concat(className, " ").concat(hashId).trim();
   };
+  const context = useContext(ConfigProvider.ConfigContext);
+  const baseClassName = context.getPrefixCls('pro-form-login-page');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(baseClassName);
+  const getCls = className => `${baseClassName}-${className} ${hashId}`.trim();
 
   /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
-  var logoDom = useMemo(function () {
+  const logoDom = useMemo(() => {
     if (!logo) return null;
     if (typeof logo === 'string') {
       return /*#__PURE__*/_jsx("img", {
@@ -66,11 +62,12 @@ export function LoginFormPage(props) {
     return logo;
   }, [logo]);
   return wrapSSR( /*#__PURE__*/_jsxs("div", {
-    className: classNames(baseClassName, hashId),
-    style: _objectSpread(_objectSpread({}, style), {}, {
+    className: clsx(baseClassName, hashId),
+    style: {
+      ...style,
       position: 'relative',
-      backgroundImage: backgroundImageUrl ? "url(\"".concat(backgroundImageUrl, "\")") : undefined
-    }),
+      backgroundImage: backgroundImageUrl ? `url("${backgroundImageUrl}")` : undefined
+    },
     children: [backgroundVideoUrl ? /*#__PURE__*/_jsx("div", {
       style: {
         position: 'absolute',
@@ -97,7 +94,7 @@ export function LoginFormPage(props) {
         }
       })
     }) : null, /*#__PURE__*/_jsxs("div", {
-      className: classNames(baseClassName, hashId),
+      className: clsx(baseClassName, hashId),
       children: [/*#__PURE__*/_jsx("div", {
         className: getCls('notice'),
         children: activityConfig && /*#__PURE__*/_jsxs("div", {
@@ -137,12 +134,12 @@ export function LoginFormPage(props) {
           }), /*#__PURE__*/_jsxs("div", {
             className: getCls('main'),
             style: mainStyle,
-            children: [/*#__PURE__*/_jsxs(ProForm, _objectSpread(_objectSpread({
-              isKeyPressSubmit: true
-            }, proFormProps), {}, {
+            children: [/*#__PURE__*/_jsxs(ProForm, {
+              isKeyPressSubmit: true,
+              ...proFormProps,
               submitter: submitter,
               children: [message, children]
-            })), actions ? /*#__PURE__*/_jsx("div", {
+            }), actions ? /*#__PURE__*/_jsx("div", {
               className: getCls('other'),
               style: otherStyle,
               children: actions

package/es/form/layouts/LoginFormPage/style.d.ts

@@ -4,6 +4,6 @@ export interface LoginFormToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

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

@@ -1,142 +1,152 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { setAlpha, useStyle as useAntdStyle } from "../../../provider";
-var genLoginFormStyle = function genLoginFormStyle(token) {
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, token.componentCls, {
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    backgroundRepeat: 'no-repeat',
-    '&-notice': {
+const genLoginFormStyle = token => {
+  return {
+    [token.componentCls]: {
       display: 'flex',
-      flex: '1',
-      zIndex: 99,
-      alignItems: 'flex-end',
-      '&-activity': {
-        marginBlock: 24,
-        marginInline: 24,
-        paddingInline: 24,
-        paddingBlock: 24,
-        '&-title': {
-          fontWeight: '500',
-          fontSize: '28px'
-        },
-        '&-subTitle': {
-          marginBlockStart: 8,
-          fontSize: '16px'
-        },
-        '&-action': {
-          marginBlockStart: '24px'
+      width: '100%',
+      height: '100%',
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      '&-notice': {
+        display: 'flex',
+        flex: '1',
+        zIndex: 99,
+        alignItems: 'flex-end',
+        '&-activity': {
+          marginBlock: 24,
+          marginInline: 24,
+          paddingInline: 24,
+          paddingBlock: 24,
+          '&-title': {
+            fontWeight: '500',
+            fontSize: '28px'
+          },
+          '&-subTitle': {
+            marginBlockStart: 8,
+            fontSize: '16px'
+          },
+          '&-action': {
+            marginBlockStart: '24px'
+          }
+        }
+      },
+      '&-left': {
+        display: 'flex',
+        flex: '1',
+        zIndex: 99,
+        flexDirection: 'column',
+        maxWidth: '550px',
+        paddingInline: 0,
+        paddingBlock: 32,
+        overflow: 'auto',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+        height: 'max-content',
+        margin: 'auto'
+      },
+      '&-container': {
+        borderRadius: token.borderRadius,
+        backgroundSize: '100%',
+        backgroundPosition: 'top',
+        backdropFilter: 'blur(10px)',
+        backgroundColor: setAlpha(token.colorBgContainer, 0.8),
+        backgroundImage: 'radial-gradient(circle at 93% 1e+02%, rgba(22,119,255,0.17) 0%, rgba(255,255,255,0.05) 23%, rgba(255,255,255,0.03) 87%, rgba(22,119,255,0.12) 109%)',
+        padding: 32,
+        boxShadow: '0px 0px 24px 0px rgba(0,0,0,0.1)'
+      },
+      '&-top': {
+        textAlign: 'center'
+      },
+      '&-header': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '44px',
+        lineHeight: '44px',
+        a: {
+          textDecoration: 'none'
+        }
+      },
+      '&-title': {
+        position: 'relative',
+        tinsetBlockStartop: '2px',
+        color: token.colorTextHeading,
+        fontWeight: '600',
+        fontSize: '33px'
+      },
+      '&-logo': {
+        width: '44px',
+        height: '44px',
+        marginInlineEnd: '16px',
+        verticalAlign: 'top',
+        img: {
+          width: '100%'
+        }
+      },
+      '&-desc': {
+        marginBlockStart: '12px',
+        marginBlockEnd: '40px',
+        color: token.colorTextSecondary,
+        fontSize: token.fontSize
+      },
+      '&-main': {
+        width: '328px',
+        margin: '0 auto',
+        '&-other': {
+          marginBlockStart: '24px',
+          lineHeight: '22px',
+          textAlign: 'start'
         }
       }
     },
-    '&-left': {
-      display: 'flex',
-      flex: '1',
-      zIndex: 99,
-      flexDirection: 'column',
-      maxWidth: '550px',
-      paddingInline: 0,
-      paddingBlock: 32,
-      overflow: 'auto',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 24,
-      height: 'max-content',
-      margin: 'auto'
-    },
-    '&-container': {
-      borderRadius: token.borderRadius,
-      backgroundSize: '100%',
-      backgroundPosition: 'top',
-      backdropFilter: 'blur(10px)',
-      backgroundColor: setAlpha(token.colorBgContainer, 0.8),
-      backgroundImage: 'radial-gradient(circle at 93% 1e+02%, rgba(22,119,255,0.17) 0%, rgba(255,255,255,0.05) 23%, rgba(255,255,255,0.03) 87%, rgba(22,119,255,0.12) 109%)',
-      padding: 32,
-      boxShadow: '0px 0px 24px 0px rgba(0,0,0,0.1)'
-    },
-    '&-top': {
-      textAlign: 'center'
-    },
-    '&-header': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      minHeight: '44px',
-      lineHeight: '44px',
-      a: {
-        textDecoration: 'none'
-      }
-    },
-    '&-title': {
-      position: 'relative',
-      tinsetBlockStartop: '2px',
-      color: token.colorTextHeading,
-      fontWeight: '600',
-      fontSize: '33px'
-    },
-    '&-logo': {
-      width: '44px',
-      height: '44px',
-      marginInlineEnd: '16px',
-      verticalAlign: 'top',
-      img: {
-        width: '100%'
+    [`@media (max-width: ${token.screenMDMin}px)`]: {
+      [token.componentCls]: {
+        flexDirection: 'column-reverse',
+        background: 'none !important',
+        '&-container': {
+          padding: 24,
+          boxShadow: 'none',
+          backgroundImage: 'none',
+          borderRadius: '0px'
+        },
+        '&-notice': {
+          display: 'flex',
+          flex: 'none',
+          alignItems: 'flex-start',
+          width: '100%',
+          '> div': {
+            width: '100%'
+          }
+        }
       }
     },
-    '&-desc': {
-      marginBlockStart: '12px',
-      marginBlockEnd: '40px',
-      color: token.colorTextSecondary,
-      fontSize: token.fontSize
-    },
-    '&-main': {
-      width: '328px',
-      margin: '0 auto',
-      '&-other': {
-        marginBlockStart: '24px',
-        lineHeight: '22px',
-        textAlign: 'start'
+    [`@media (min-width: ${token.screenMDMin}px)`]: {
+      [token.componentCls]: {
+        '&-left': {
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center 110px',
+          backgroundSize: '100%'
+        }
       }
-    }
-  }), "@media (max-width: ".concat(token.screenMDMin, "px)"), _defineProperty({}, token.componentCls, {
-    flexDirection: 'column-reverse',
-    background: 'none !important',
-    '&-container': {
-      padding: 24,
-      boxShadow: 'none',
-      backgroundImage: 'none',
-      borderRadius: '0px'
     },
-    '&-notice': {
-      display: 'flex',
-      flex: 'none',
-      alignItems: 'flex-start',
-      width: '100%',
-      '> div': {
-        width: '100%'
+    [`@media (max-width: ${token.screenSM}px)`]: {
+      [token.componentCls]: {
+        '&-main': {
+          width: '95%',
+          maxWidth: '328px'
+        }
       }
     }
-  })), "@media (min-width: ".concat(token.screenMDMin, "px)"), _defineProperty({}, token.componentCls, {
-    '&-left': {
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center 110px',
-      backgroundSize: '100%'
-    }
-  })), "@media (max-width: ".concat(token.screenSM, "px)"), _defineProperty({}, token.componentCls, {
-    '&-main': {
-      width: '95%',
-      maxWidth: '328px'
-    }
-  }));
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('LoginFormPage', function (token) {
-    var loginFormToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('LoginFormPage', token => {
+    const loginFormToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genLoginFormStyle(loginFormToken)];
   });
 }