feat(card): new loading loading (#8336)

* feat(card): new loading loading * feat(card): new loading loading * feat(card): new loading loading
ant-design · Apr 20, 2024 · d64f656 · d64f656
1 parent e517832
commit d64f656
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 899 deletions.
diff --git a/packages/card/src/components/Card/style.ts b/packages/card/src/components/Card/style.ts
@@ -31,19 +31,6 @@ const genProCardStyle: GenerateStyle<ProCardToken> = (token) => {
       transition: 'all 0.3',
       ...resetComponent?.(token),
 
-      '&::after': {
-        position: 'absolute',
-        insetBlockStart: 2,
-        insetInlineEnd: 2,
-        width: 0,
-        height: 0,
-        border: `6px solid ${token.colorPrimary}`,
-        borderBlockEnd: '6px solid transparent',
-        borderInlineStart: '6px solid transparent',
-        borderStartEndRadius: 2,
-        content: '""',
-      },
-
       '&-box-shadow': {
         boxShadow:
           '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017',

diff --git a/packages/card/src/components/CheckCard/Group.tsx b/packages/card/src/components/CheckCard/Group.tsx
@@ -1,5 +1,5 @@
 import { useMountMergeState } from '@ant-design/pro-utils';
-import { Col, ConfigProvider, Row } from 'antd';
+import { ConfigProvider, Skeleton } from 'antd';
 
 import { RightOutlined } from '@ant-design/icons';
 import { proTheme } from '@ant-design/pro-provider';
@@ -14,6 +14,7 @@ import React, {
   useState,
 } from 'react';
 import CheckCard from './index';
+import { useStyle } from './style';
 
 export type CheckCardValueType = string | number | boolean;
 
@@ -123,57 +124,11 @@ export interface AbstractCheckCardGroupProps {
 
 export const CardLoading: React.FC<{
   prefixCls: string;
-}> = ({ prefixCls }) => {
-  const loadingBlockClass = `${prefixCls}-loading-block`;
+  hashId: string;
+}> = ({ prefixCls, hashId }) => {
   return (
-    <div className={`${prefixCls}-loading-content`}>
-      <Row
-        gutter={{
-          xs: 8,
-          sm: 8,
-          md: 8,
-          lg: 12,
-        }}
-      >
-        <Col span={22}>
-          <div className={loadingBlockClass} />
-        </Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={8}>
-          <div className={loadingBlockClass} />
-        </Col>
-        <Col span={14}>
-          <div className={loadingBlockClass} />
-        </Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={6}>
-          <div className={loadingBlockClass} />
-        </Col>
-        <Col span={16}>
-          <div className={loadingBlockClass} />
-        </Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={13}>
-          <div className={loadingBlockClass} />
-        </Col>
-        <Col span={9}>
-          <div className={loadingBlockClass} />
-        </Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={4}>
-          <div className={loadingBlockClass} />
-        </Col>
-        <Col span={3}>
-          <div className={loadingBlockClass} />
-        </Col>
-        <Col span={14}>
-          <div className={loadingBlockClass} />
-        </Col>
-      </Row>
+    <div className={classNames(`${prefixCls}-loading-content`, hashId)}>
+      <Skeleton loading active paragraph={{ rows: 4 }} title={false} />
     </div>
   );
 };
@@ -333,7 +288,6 @@ const CheckCardGroup: React.FC<CheckCardGroupProps> = (props) => {
     onChange,
     ...restProps
   } = props;
-  const { hashId } = proTheme.useToken();
 
   const antdContext = useContext(ConfigProvider.ConfigContext);
 
@@ -354,6 +308,8 @@ const CheckCardGroup: React.FC<CheckCardGroupProps> = (props) => {
     customizePrefixCls,
   );
 
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+
   const groupPrefixCls = `${prefixCls}-group`;
 
   const domProps = omit(restProps, [
@@ -444,7 +400,11 @@ const CheckCardGroup: React.FC<CheckCardGroupProps> = (props) => {
         return list.map((option) => {
           if (option.children && option.children.length > 0) {
             return (
-              <SubCheckCardGroup title={option.title} prefix={groupPrefixCls}>
+              <SubCheckCardGroup
+                title={option.title}
+                prefix={groupPrefixCls}
+                key={option.value?.toString() || option.title?.toString()}
+              >
                 {renderOptions(option.children)}
               </SubCheckCardGroup>
             );
@@ -486,7 +446,7 @@ const CheckCardGroup: React.FC<CheckCardGroupProps> = (props) => {
 
   const classString = classNames(groupPrefixCls, className, hashId);
 
-  return (
+  return wrapSSR(
     <CheckCardGroupConnext.Provider
       value={{
         toggleOption,
@@ -504,7 +464,7 @@ const CheckCardGroup: React.FC<CheckCardGroupProps> = (props) => {
       <div className={classString} style={style} {...domProps}>
         {children}
       </div>
-    </CheckCardGroupConnext.Provider>
+    </CheckCardGroupConnext.Provider>,
   );
 };
 

diff --git a/packages/card/src/components/CheckCard/index.tsx b/packages/card/src/components/CheckCard/index.tsx
@@ -271,15 +271,15 @@ const CheckCard: React.FC<CheckCardProps> & {
 
   const metaDom = useMemo(() => {
     if (cardLoading) {
-      return <CardLoading prefixCls={prefixCls || ''} />;
+      return <CardLoading prefixCls={prefixCls || ''} hashId={hashId} />;
     }
 
     if (cover) {
       return renderCover(prefixCls || '', cover);
     }
 
     const avatarDom = avatar ? (
-      <div className={`${prefixCls}-avatar ${hashId}`.trim()}>
+      <div className={classNames(`${prefixCls}-avatar`, hashId)}>
         {typeof avatar === 'string' ? (
           <Avatar size={48} shape="square" src={avatar} />
         ) : (
@@ -289,23 +289,27 @@ const CheckCard: React.FC<CheckCardProps> & {
     ) : null;
 
     const headerDom = (title ?? extra) != null && (
-      <div className={`${prefixCls}-header ${hashId}`.trim()}>
-        <div className={`${prefixCls}-header-left ${hashId}`.trim()}>
-          <div className={`${prefixCls}-title ${hashId}`.trim()}>{title}</div>
+      <div className={classNames(`${prefixCls}-header`, hashId)}>
+        <div className={classNames(`${prefixCls}-header-left`, hashId)}>
+          <div className={classNames(`${prefixCls}-title`, hashId)}>
+            {title}
+          </div>
           {props.subTitle ? (
-            <div className={`${prefixCls}-subTitle ${hashId}`.trim()}>
+            <div className={classNames(`${prefixCls}-subTitle`, hashId)}>
               {props.subTitle}
             </div>
           ) : null}
         </div>
         {extra && (
-          <div className={`${prefixCls}-extra ${hashId}`.trim()}>{extra}</div>
+          <div className={classNames(`${prefixCls}-extra`, hashId)}>
+            {extra}
+          </div>
         )}
       </div>
     );
 
     const descriptionDom = description ? (
-      <div className={`${prefixCls}-description ${hashId}`.trim()}>
+      <div className={classNames(`${prefixCls}-description`, hashId)}>
         {description}
       </div>
     ) : null;
@@ -318,7 +322,7 @@ const CheckCard: React.FC<CheckCardProps> & {
       <div className={metaClass}>
         {avatarDom}
         {headerDom || descriptionDom ? (
-          <div className={`${prefixCls}-detail ${hashId}`.trim()}>
+          <div className={classNames(`${prefixCls}-detail`, hashId)}>
             {headerDom}
             {descriptionDom}
           </div>
@@ -351,7 +355,7 @@ const CheckCard: React.FC<CheckCardProps> & {
       {metaDom}
       {props.children ? (
         <div
-          className={classNames(`${prefixCls}-body`)}
+          className={classNames(`${prefixCls}-body`, hashId)}
           style={props.bodyStyle}
         >
           {props.children}

diff --git a/packages/card/src/components/CheckCard/style.ts b/packages/card/src/components/CheckCard/style.ts
@@ -100,23 +100,6 @@ const genProStyle: GenerateStyle<ProListToken> = (token) => {
       [`${token.componentCls}-loading`]: {
         overflow: 'hidden',
         userSelect: 'none',
-        '&-content': {
-          paddingInline: token.padding,
-          paddingBlock: token.paddingSM,
-          p: {
-            marginBlock: 0,
-            marginInline: 0,
-          },
-          [`${token.componentCls}-loading-block`]: {
-            height: '14px',
-            marginBlock: '4px',
-            background: `linear-gradient(90deg, rgba(54, 61, 64, 0.2), rgba(54, 61, 64, 0.4), rgba(54, 61, 64, 0.2))`,
-            animationName: cardLoading as unknown as string,
-            animationDuration: '1.4s',
-            animationTimingFunction: 'ease',
-            animationIterationCount: 'infinite',
-          },
-        },
       },
       '&:focus': proCheckCardActive(token),
       '&-checked': {