mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

Add spin dot className to custom indicator

Browse Source
This commit is contained in:
Wei Zhu 2018-02-14 12:30:31 +08:00
parent 7d5db31e67
commit a438b9b33f
9 changed files with 57 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/list/__tests__/__snapshots__/demo.test.js.snap
View File

@ -364,7 +364,7 @@ exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1
class="ant-spin"
>
<span
class="ant-spin-dot"
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
@ -389,7 +389,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
class="ant-spin ant-spin-spinning"
>
<span
class="ant-spin-dot"
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />

14
components/spin/__tests__/__snapshots__/demo.test.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
class="ant-spin ant-spin-spinning"
>
<span
class="ant-spin-dot"
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
@ -20,7 +20,7 @@ exports[`renders ./components/spin/demo/custom-indicator.md correctly 1`] = `
class="ant-spin ant-spin-spinning"
>
<i
class="anticon anticon-spin anticon-loading"
class="anticon anticon-spin anticon-loading ant-spin-dot"
style="font-size:24px"
/>
</div>
@ -75,7 +75,7 @@ exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
class="ant-spin ant-spin-spinning"
>
<span
class="ant-spin-dot"
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
@ -133,7 +133,7 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
class="ant-spin ant-spin-sm ant-spin-spinning"
>
<span
class="ant-spin-dot"
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
@ -145,7 +145,7 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
class="ant-spin ant-spin-spinning"
>
<span
class="ant-spin-dot"
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
@ -157,7 +157,7 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
class="ant-spin ant-spin-lg ant-spin-spinning"
>
<span
class="ant-spin-dot"
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
@ -177,7 +177,7 @@ exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
class="ant-spin ant-spin-spinning ant-spin-show-text"
>
<span
class="ant-spin-dot"
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />

11
components/spin/__tests__/__snapshots__/index.test.js.snap Normal file
View File

@ -0,0 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Spin should render custom indicator when it's set 1`] = `
<div
class="ant-spin ant-spin-spinning"
>
<div
class="custom-indicator ant-spin-dot"
/>
</div>
`;

6
components/spin/__tests__/index.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow, render } from 'enzyme';
import Spin from '..';
describe('Spin', () => {
@ -15,9 +15,9 @@ describe('Spin', () => {
it('should render custom indicator when it\'s set', () => {
const customIndicator = <div className="custom-indicator" />;
const wrapper = shallow(
const wrapper = render(
<Spin indicator={customIndicator} />
);
expect(wrapper.contains(customIndicator)).toEqual(true);
expect(wrapper).toMatchSnapshot();
});
});

2
components/spin/index.en-US.md
View File

@ -15,7 +15,7 @@ When part of the page is waiting for asynchronous data or during a rendering pro
| Property | Description | Type | Default Value |
| -------- | ----------- | ---- | ------------- |
| delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
| indicator | React node of the spinning indicator | ReactNode | - |
| indicator | React node of the spinning indicator | ReactElement | - |
| size | size of Spin, options: `small`, `default` and `large` | string | `default` |
| spinning | whether Spin is spinning | boolean | true |
| tip | customize description content when Spin has children | string | - |

37
components/spin/index.tsx
View File

@ -5,6 +5,8 @@ import Animate from 'rc-animate';
import isCssAnimationSupported from '../_util/isCssAnimationSupported';
import omit from 'omit.js';
export type SpinIndicator = React.ReactElement<any>;
export interface SpinProps {
prefixCls?: string;
className?: string;
@ -14,7 +16,7 @@ export interface SpinProps {
tip?: string;
delay?: number;
wrapperClassName?: string;
indicator?: React.ReactNode;
indicator?: SpinIndicator;
}
export interface SpinState {
@ -96,8 +98,27 @@ export default class Spin extends React.Component<SpinProps, SpinState> {
}
}
}
renderIndicator() {
const { prefixCls, indicator } = this.props;
const dotClassName = `${prefixCls}-dot`;
if (React.isValidElement(indicator)) {
return React.cloneElement((indicator as SpinIndicator), {
className: classNames((indicator as SpinIndicator).props.className, dotClassName),
});
}
return (
<span className={classNames(dotClassName, `${prefixCls}-dot-spin`)}>
<i />
<i />
<i />
<i />
</span>
);
}
render() {
const { className, size, prefixCls, tip, wrapperClassName, indicator, ...restProps } = this.props;
const { className, size, prefixCls, tip, wrapperClassName, ...restProps } = this.props;
const { spinning, notCssAnimationSupported } = this.state;
const spinClassName = classNames(prefixCls, {
@ -111,20 +132,12 @@ export default class Spin extends React.Component<SpinProps, SpinState> {
const divProps = omit(restProps, [
'spinning',
'delay',
'indicator',
]);
const spinIndicator = indicator ? indicator : (
<span className={`${prefixCls}-dot`}>
<i />
<i />
<i />
<i />
</span>
);
const spinElement = (
<div {...divProps} className={spinClassName} >
{spinIndicator}
{this.renderIndicator()}
{tip ? <div className={`${prefixCls}-text`}>{tip}</div> : null}
</div>
);

2
components/spin/index.zh-CN.md
View File

@ -16,7 +16,7 @@ subtitle: 加载中
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |
| indicator | 加载指示符 | ReactNode | - |
| indicator | 加载指示符 | ReactElement | - |
| size | 组件大小，可选值为 `small` `default` `large` | string | 'default' |
| spinning | 是否旋转 | boolean | true |
| tip | 当作为包裹元素时，可以自定义描述文案 | string | - |

8
components/spin/style/index.less
View File

@ -115,8 +115,7 @@
position: relative;
display: inline-block;
.square(@spin-dot-size);
transform: rotate(45deg);
animation: antRotate 1.2s infinite linear;
i {
width: 9px;
height: 9px;
@ -148,6 +147,11 @@
animation-delay: 1.2s;
}
}
&-spin {
transform: rotate(45deg);
animation: antRotate 1.2s infinite linear;
}
}
// Sizes

2
components/table/__tests__/__snapshots__/empty.test.js.snap
View File

@ -465,7 +465,7 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
class="ant-spin ant-spin-spinning ant-table-without-pagination ant-table-spin-holder"
>
<span
class="ant-spin-dot"
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />