mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
commit
a0b5b3f346
17
components/_util/getScroll.tsx
Normal file
17
components/_util/getScroll.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
export default function getScroll(target, top) {
|
||||||
|
if (typeof window === 'undefined') {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
const prop = top ? 'pageYOffset' : 'pageXOffset';
|
||||||
|
const method = top ? 'scrollTop' : 'scrollLeft';
|
||||||
|
const isWindow = target === window;
|
||||||
|
|
||||||
|
let ret = isWindow ? target[prop] : target[method];
|
||||||
|
// ie6,7,8 standard mode
|
||||||
|
if (isWindow && typeof ret !== 'number') {
|
||||||
|
ret = window.document.documentElement[method];
|
||||||
|
}
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
@ -4,20 +4,7 @@ import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
|||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import shallowequal from 'shallowequal';
|
import shallowequal from 'shallowequal';
|
||||||
import omit from 'omit.js';
|
import omit from 'omit.js';
|
||||||
|
import getScroll from '../_util/getScroll';
|
||||||
function getScroll(target, top) {
|
|
||||||
const prop = top ? 'pageYOffset' : 'pageXOffset';
|
|
||||||
const method = top ? 'scrollTop' : 'scrollLeft';
|
|
||||||
const isWindow = target === window;
|
|
||||||
|
|
||||||
let ret = isWindow ? target[prop] : target[method];
|
|
||||||
// ie6,7,8 standard mode
|
|
||||||
if (isWindow && typeof ret !== 'number') {
|
|
||||||
ret = window.document.documentElement[method];
|
|
||||||
}
|
|
||||||
|
|
||||||
return ret;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetRect(target): any {
|
function getTargetRect(target): any {
|
||||||
return target !== window ?
|
return target !== window ?
|
||||||
|
@ -4,6 +4,7 @@ import Icon from '../icon';
|
|||||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import omit from 'omit.js';
|
import omit from 'omit.js';
|
||||||
|
import getScroll from '../_util/getScroll';
|
||||||
|
|
||||||
const reqAnimFrame = (() => {
|
const reqAnimFrame = (() => {
|
||||||
if (window.requestAnimationFrame) {
|
if (window.requestAnimationFrame) {
|
||||||
@ -29,24 +30,6 @@ const easeInOutCubic = (t, b, c, d) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
function getScroll(target, top) {
|
|
||||||
if (typeof window === 'undefined') {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
const prop = top ? 'pageYOffset' : 'pageXOffset';
|
|
||||||
const method = top ? 'scrollTop' : 'scrollLeft';
|
|
||||||
const isWindow = target === window;
|
|
||||||
|
|
||||||
let ret = isWindow ? target[prop] : target[method];
|
|
||||||
// ie6,7,8 standard mode
|
|
||||||
if (isWindow && typeof ret !== 'number') {
|
|
||||||
ret = window.document.documentElement[method];
|
|
||||||
}
|
|
||||||
|
|
||||||
return ret;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BackTopProps {
|
export interface BackTopProps {
|
||||||
visibilityHeight?: number;
|
visibilityHeight?: number;
|
||||||
onClick?: (event) => void;
|
onClick?: (event) => void;
|
||||||
|
@ -62,7 +62,7 @@ export default class Carousel extends React.Component<CarouselProps, any> {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
<SlickCarousel {...props} />
|
<SlickCarousel ref="slick" {...props} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -19,10 +19,9 @@ const Step = Steps.Step;
|
|||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Steps current={1} status="error">
|
<Steps current={1} status="error">
|
||||||
<Step title="已完成" description="这里是多信息的描述" />
|
<Step title="finished" description="This is description" />
|
||||||
<Step title="进行中" description="这里是多信息的描述" />
|
<Step title="In Process" description="This is description" />
|
||||||
<Step title="待运行" description="这里是多信息的描述" />
|
<Step title="Waiting" description="This is description" />
|
||||||
<Step title="待运行" description="这里是多信息的描述" />
|
|
||||||
</Steps>
|
</Steps>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -14,14 +14,14 @@ title:
|
|||||||
You can use your own custom icons by setting the property `icon` for `Steps.Step`.
|
You can use your own custom icons by setting the property `icon` for `Steps.Step`.
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Steps } from 'antd';
|
import { Steps, Icon } from 'antd';
|
||||||
const Step = Steps.Step;
|
const Step = Steps.Step;
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Steps>
|
<Steps>
|
||||||
<Step status="finish" title="步骤1" icon="cloud" />
|
<Step status="finish" title="Step 1" icon="cloud" />
|
||||||
<Step status="process" title="步骤2" icon="apple" />
|
<Step status="process" title="Step 2" icon="apple" />
|
||||||
<Step status="wait" title="步骤3" icon="github" />
|
<Step status="wait" title="Step 3" icon={<Icon type="github" />} />
|
||||||
</Steps>
|
</Steps>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -19,10 +19,9 @@ const Step = Steps.Step;
|
|||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Steps current={1}>
|
<Steps current={1}>
|
||||||
<Step title="已完成" description="这里是多信息的描述" />
|
<Step title="Finished" description="This is description." />
|
||||||
<Step title="进行中" description="这里是多信息的描述" />
|
<Step title="In Progress" description="This is description." />
|
||||||
<Step title="待运行" description="这里是多信息的描述" />
|
<Step title="Waiting" description="This is description." />
|
||||||
<Step title="待运行" description="这里是多信息的描述" />
|
|
||||||
</Steps>
|
</Steps>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -19,10 +19,9 @@ const Step = Steps.Step;
|
|||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Steps size="small" current={1}>
|
<Steps size="small" current={1}>
|
||||||
<Step title="已完成" />
|
<Step title="Finished" />
|
||||||
<Step title="进行中" />
|
<Step title="In Progress" />
|
||||||
<Step title="待运行" />
|
<Step title="Waiting" />
|
||||||
<Step title="待运行" />
|
|
||||||
</Steps>
|
</Steps>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -18,7 +18,7 @@ import { Steps, Button } from 'antd';
|
|||||||
const Step = Steps.Step;
|
const Step = Steps.Step;
|
||||||
const array = [...Array(Math.floor(Math.random() * 3) + 3)];
|
const array = [...Array(Math.floor(Math.random() * 3) + 3)];
|
||||||
const steps = array.map((item, i) => ({
|
const steps = array.map((item, i) => ({
|
||||||
title: `步骤${i + 1}`,
|
title: `Step ${i + 1}`,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const App = React.createClass({
|
const App = React.createClass({
|
||||||
@ -38,12 +38,12 @@ const App = React.createClass({
|
|||||||
const { current } = this.state;
|
const { current } = this.state;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div style={{ marginBottom: 24 }}>当前正在执行第 {current + 1} 步</div>
|
<div style={{ marginBottom: 24 }}>Curent Step {current + 1}</div>
|
||||||
<Steps current={current}>
|
<Steps current={current}>
|
||||||
{steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
|
{steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
|
||||||
</Steps>
|
</Steps>
|
||||||
<div style={{ marginTop: 24 }}>
|
<div style={{ marginTop: 24 }}>
|
||||||
<Button onClick={this.next}>下一步</Button>
|
<Button onClick={this.next}>Next Step</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -19,10 +19,9 @@ const Step = Steps.Step;
|
|||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Steps direction="vertical" size="small" current={1}>
|
<Steps direction="vertical" size="small" current={1}>
|
||||||
<Step title="已完成" description="这里是多信息的描述" />
|
<Step title="Finished" description="This is description." />
|
||||||
<Step title="进行中" description="这里是多信息的描述" />
|
<Step title="In Progress" description="This is description." />
|
||||||
<Step title="待运行" description="这里是多信息的描述" />
|
<Step title="Waiting" description="This is description." />
|
||||||
<Step title="待运行" description="这里是多信息的描述" />
|
|
||||||
</Steps>
|
</Steps>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -19,10 +19,9 @@ const Step = Steps.Step;
|
|||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Steps direction="vertical" current={1}>
|
<Steps direction="vertical" current={1}>
|
||||||
<Step title="已完成" description="这里是多信息的描述" />
|
<Step title="Finished" description="This is description." />
|
||||||
<Step title="进行中" description="这里是多信息的描述" />
|
<Step title="In Progress" description="This is description." />
|
||||||
<Step title="待运行" description="这里是多信息的描述" />
|
<Step title="Waiting" description="This is description." />
|
||||||
<Step title="待运行" description="这里是多信息的描述" />
|
|
||||||
</Steps>
|
</Steps>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -39,6 +39,6 @@ A single step in the step bar.
|
|||||||
Property | Description | Type | Default
|
Property | Description | Type | Default
|
||||||
-----|-----|-----|------
|
-----|-----|-----|------
|
||||||
status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | String | wait
|
status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | String | wait
|
||||||
title | title of the step | React.Element | -
|
title | title of the step | React.ReactNode | -
|
||||||
description | detail of the step, optional property | React.Element | -
|
description | detail of the step, optional property | React.ReactNode | -
|
||||||
icon | icon of the step, optional property | React.Element | -
|
icon | icon of the step, optional property | string or React.ReactNode | -
|
||||||
|
@ -40,6 +40,6 @@ title: Steps
|
|||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|----------|-----------------------------------------|------------|-------|
|
|----------|-----------------------------------------|------------|-------|
|
||||||
| status | 指定状态。当不配置该属性时,会使用 Steps 的 `current` 来自动指定状态。可选:`wait` `process` `finish` `error` | String | wait |
|
| status | 指定状态。当不配置该属性时,会使用 Steps 的 `current` 来自动指定状态。可选:`wait` `process` `finish` `error` | String | wait |
|
||||||
| title | 标题 | React.Element | - |
|
| title | 标题 | React.ReactNode | - |
|
||||||
| description | 步骤的详情描述,可选 | React.Element | - |
|
| description | 步骤的详情描述,可选 | React.ReactNode | - |
|
||||||
| icon | 步骤图标的类型,可选 | string | - |
|
| icon | 步骤图标的类型,可选 | string or React.ReactNode | - |
|
||||||
|
@ -39,6 +39,7 @@
|
|||||||
"css-animation": "^1.2.5",
|
"css-animation": "^1.2.5",
|
||||||
"gregorian-calendar": "~4.1.0",
|
"gregorian-calendar": "~4.1.0",
|
||||||
"gregorian-calendar-format": "~4.1.0",
|
"gregorian-calendar-format": "~4.1.0",
|
||||||
|
"moment": "^2.15.1",
|
||||||
"object-assign": "~4.1.0",
|
"object-assign": "~4.1.0",
|
||||||
"omit.js": "^0.1.0",
|
"omit.js": "^0.1.0",
|
||||||
"rc-animate": "~2.3.0",
|
"rc-animate": "~2.3.0",
|
||||||
@ -60,7 +61,7 @@
|
|||||||
"rc-rate": "~1.1.2",
|
"rc-rate": "~1.1.2",
|
||||||
"rc-select": "~6.5.1",
|
"rc-select": "~6.5.1",
|
||||||
"rc-slider": "~5.1.0",
|
"rc-slider": "~5.1.0",
|
||||||
"rc-steps": "~2.1.5",
|
"rc-steps": "~2.2.0",
|
||||||
"rc-switch": "~1.4.2",
|
"rc-switch": "~1.4.2",
|
||||||
"rc-table": "~5.0.0",
|
"rc-table": "~5.0.0",
|
||||||
"rc-tabs": "~7.0.5",
|
"rc-tabs": "~7.0.5",
|
||||||
|
Loading…
Reference in New Issue
Block a user