mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
style(Skeleton): remove default children of Skeleton.Node (#50278)
* style(Skeleton): remove default children of Skeleton.Node * style(Skeleton): remove default children of Skeleton.Node * Update components/skeleton/style/index.ts Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: afc163 <afc163@gmail.com> --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: lijianan <574980606@qq.com>
This commit is contained in:
afc163
GitHub
parent
3f4eb4b9d1
commit
0aaab501d5
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import DotChartOutlined from '@ant-design/icons/DotChartOutlined';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { ConfigContext } from '../config-provider';
|
||||
@ -36,12 +35,10 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = (props) => {
|
||||
cssVarCls,
|
||||
);
|
||||
|
||||
const content = children ?? <DotChartOutlined />;
|
||||
|
||||
return wrapCSSVar(
|
||||
<div className={cls}>
|
||||
<div className={classNames(`${prefixCls}-image`, className)} style={style}>
|
||||
{content}
|
||||
{children}
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
|
||||
@ -145,7 +145,9 @@ exports[`renders components/skeleton/demo/componentToken.tsx extend context corr
|
||||
exports[`renders components/skeleton/demo/componentToken.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/skeleton/demo/element.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
@ -182,27 +184,21 @@ Array [
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
<br />,
|
||||
</div>
|
||||
<div
|
||||
class="ant-skeleton ant-skeleton-element"
|
||||
>
|
||||
<span
|
||||
class="ant-skeleton-button"
|
||||
/>
|
||||
</div>,
|
||||
<br />,
|
||||
<br />,
|
||||
</div>
|
||||
<div
|
||||
class="ant-skeleton ant-skeleton-element"
|
||||
>
|
||||
<span
|
||||
class="ant-skeleton-input"
|
||||
/>
|
||||
</div>,
|
||||
<br />,
|
||||
<br />,
|
||||
</div>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
@ -231,6 +227,18 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton ant-skeleton-element"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton-image"
|
||||
style="width: 160px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
@ -263,11 +271,11 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>,
|
||||
/>
|
||||
<form
|
||||
class="ant-form ant-form-inline"
|
||||
style="margin: 16px 0px;"
|
||||
@ -673,8 +681,8 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>,
|
||||
]
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/skeleton/demo/element.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
@ -135,7 +135,9 @@ exports[`renders components/skeleton/demo/componentToken.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
@ -172,27 +174,21 @@ Array [
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
<br />,
|
||||
</div>
|
||||
<div
|
||||
class="ant-skeleton ant-skeleton-element"
|
||||
>
|
||||
<span
|
||||
class="ant-skeleton-button"
|
||||
/>
|
||||
</div>,
|
||||
<br />,
|
||||
<br />,
|
||||
</div>
|
||||
<div
|
||||
class="ant-skeleton ant-skeleton-element"
|
||||
>
|
||||
<span
|
||||
class="ant-skeleton-input"
|
||||
/>
|
||||
</div>,
|
||||
<br />,
|
||||
<br />,
|
||||
</div>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
@ -221,6 +217,18 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton ant-skeleton-element"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton-image"
|
||||
style="width:160px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
@ -253,11 +261,11 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>,
|
||||
/>
|
||||
<form
|
||||
class="ant-form ant-form-inline"
|
||||
style="margin:16px 0"
|
||||
@ -663,8 +671,8 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>,
|
||||
]
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/skeleton/demo/list.tsx correctly 1`] = `
|
||||
|
||||
@ -326,27 +326,7 @@ exports[`Skeleton custom node element should render normal 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton-image"
|
||||
>
|
||||
<span
|
||||
aria-label="dot-chart"
|
||||
class="anticon anticon-dot-chart"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="dot-chart"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM288 604a64 64 0 10128 0 64 64 0 10-128 0zm118-224a48 48 0 1096 0 48 48 0 10-96 0zm158 228a96 96 0 10192 0 96 96 0 10-192 0zm148-314a56 56 0 10112 0 56 56 0 10-112 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { DotChartOutlined } from '@ant-design/icons';
|
||||
import type { RadioChangeEvent } from 'antd';
|
||||
import { Divider, Form, Radio, Skeleton, Space, Switch } from 'antd';
|
||||
import { Flex, Divider, Form, Radio, Skeleton, Space, Switch } from 'antd';
|
||||
|
||||
type SizeType = 'default' | 'small' | 'large';
|
||||
type ButtonShapeType = 'circle' | 'square' | 'round' | 'default';
|
||||
@ -35,22 +35,17 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex gap="middle" vertical>
|
||||
<Space>
|
||||
<Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
|
||||
<Skeleton.Avatar active={active} size={size} shape={avatarShape} />
|
||||
<Skeleton.Input active={active} size={size} />
|
||||
</Space>
|
||||
<br />
|
||||
<br />
|
||||
<Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
|
||||
<br />
|
||||
<br />
|
||||
<Skeleton.Input active={active} size={size} block={block} />
|
||||
<br />
|
||||
<br />
|
||||
<Space>
|
||||
<Skeleton.Image active={active} />
|
||||
<Skeleton.Node active={active} style={{ width: 160 }} />
|
||||
<Skeleton.Node active={active}>
|
||||
<DotChartOutlined style={{ fontSize: 40, color: '#bfbfbf' }} />
|
||||
</Skeleton.Node>
|
||||
@ -87,7 +82,7 @@ const App: React.FC = () => {
|
||||
</Form.Item>
|
||||
</Space>
|
||||
</Form>
|
||||
</>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -146,11 +146,11 @@ const genSkeletonElementImageSize = (size: number | string): CSSObject => ({
|
||||
const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
|
||||
const { skeletonImageCls, imageSizeBase, gradientFromColor, borderRadiusSM, calc } = token;
|
||||
return {
|
||||
[`${skeletonImageCls}`]: {
|
||||
display: 'flex',
|
||||
[skeletonImageCls]: {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
verticalAlign: 'top',
|
||||
verticalAlign: 'middle',
|
||||
background: gradientFromColor,
|
||||
borderRadius: borderRadiusSM,
|
||||
...genSkeletonElementImageSize(calc(imageSizeBase).mul(2).equal()),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user