mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
move rc-steps out
This commit is contained in:
羽航
parent
06c12f9276
commit
071a145e4e
1
components/step/rc-steps/.gitignore
vendored
1
components/step/rc-steps/.gitignore
vendored
@ -1 +0,0 @@
|
||||
node_modules
|
||||
@ -1,4 +0,0 @@
|
||||
# History
|
||||
----
|
||||
|
||||
##
|
||||
@ -1,134 +0,0 @@
|
||||
# rc-tabs
|
||||
---
|
||||
|
||||
react steps component
|
||||
|
||||
|
||||
|
||||
## Screenshot
|
||||
|
||||
<img src='http://gtms03.alicdn.com/tps/i3/TB1TIJ3HXXXXXcYaXXXR6PQLFXX-816-612.png' width='408'>
|
||||
|
||||
## install
|
||||
|
||||
## Feature
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
var Steps = require('rc-steps');
|
||||
|
||||
React.render(
|
||||
(
|
||||
<Tabs defaultActiveKey="2" onChange={callback}>
|
||||
<Steps.Stpe tab='tab 1' key="1">first</TabPane>
|
||||
<TabPane tab='tab 2' key="2">second</TabPane>
|
||||
<TabPane tab='tab 3' key="3">third</TabPane>
|
||||
</Tabs>
|
||||
),
|
||||
document.getElementById('t2'));
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Tabs
|
||||
|
||||
#### props:
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th>default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>activeKey</td>
|
||||
<td>String</td>
|
||||
<th></th>
|
||||
<td>current active tabPanel's key</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>animation</td>
|
||||
<td>String</td>
|
||||
<th></th>
|
||||
<td>tabPane's animation. current only support slide-horizontal in assets/index.css</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>defaultActiveKey</td>
|
||||
<td>String</td>
|
||||
<th>first active tabPanel's key</th>
|
||||
<td>initial active tabPanel's key if activeKey is absent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>Function(key)</td>
|
||||
<th></th>
|
||||
<td>called when tabPanel is changed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onTabClick</td>
|
||||
<td>Function(key)</td>
|
||||
<th></th>
|
||||
<td>called when tab is clicked</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### TabPane
|
||||
|
||||
#### props:
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th>default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>key</td>
|
||||
<td>Object</td>
|
||||
<th></th>
|
||||
<td>corresponding to activeKey</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tab</td>
|
||||
<td>String</td>
|
||||
<th></th>
|
||||
<td>current tab's title corresponding to current tabPane</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
## Development
|
||||
|
||||
```
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
http://localhost:8000/examples
|
||||
|
||||
online example: http://react-component.github.io/tabs/examples/
|
||||
|
||||
## Test Case
|
||||
|
||||
http://localhost:8000/tests/runner.html?coverage
|
||||
|
||||
## Coverage
|
||||
|
||||
http://localhost:8000/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage
|
||||
|
||||
## License
|
||||
|
||||
rc-tabs is released under the MIT license.
|
||||
@ -1 +0,0 @@
|
||||
placeholder
|
||||
@ -1,42 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var Steps = require('rc-steps');
|
||||
|
||||
|
||||
var container = document.getElementById('__react-content');
|
||||
//var eles = [];
|
||||
//for (var i=0;i<10;i++) {
|
||||
// eles.push(document.createElement('div'));
|
||||
// container.appendChild(eles[i]);
|
||||
//}
|
||||
|
||||
var steps = [{
|
||||
status: 'finish',
|
||||
title: '已完成',
|
||||
description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶'
|
||||
}, {
|
||||
status: 'progress',
|
||||
title: '进行中',
|
||||
description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶'
|
||||
}, {
|
||||
status: 'wait',
|
||||
title: '待运行',
|
||||
description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶'
|
||||
}, {
|
||||
status: 'wait',
|
||||
title: '待运行',
|
||||
description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶'
|
||||
}].map(function(s, i) {
|
||||
return (<Steps.Step
|
||||
key={i}
|
||||
status={s.status}
|
||||
title={s.title}
|
||||
description={s.description}></Steps.Step>
|
||||
);
|
||||
});
|
||||
|
||||
React.render(
|
||||
<Steps>
|
||||
{steps}
|
||||
</Steps>, container);
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./src/');
|
||||
@ -1,47 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
|
||||
var Step = React.createClass({
|
||||
displayName: 'Step',
|
||||
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
status: this.props.status ? this.props.status : 'waiting'
|
||||
};
|
||||
},
|
||||
render: function render() {
|
||||
console.log('step render');
|
||||
var props = this.props;
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ className: 'rc-steps-item rc-steps-status-' + this.state.status },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ className: 'rc-steps-head' },
|
||||
React.createElement('i', { className: 'anticon anticon-check' })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ className: 'rc-steps-main' },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ className: 'rc-steps-title' },
|
||||
props.title
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ className: 'rc-steps-description' },
|
||||
props.description
|
||||
)
|
||||
),
|
||||
!props.stepLast ? React.createElement(
|
||||
'div',
|
||||
{ className: 'rc-steps-tail', style: { width: props.tailWidth } },
|
||||
React.createElement('i', null)
|
||||
) : ''
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Step;
|
||||
@ -1,77 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
|
||||
var Steps = React.createClass({
|
||||
displayName: 'Steps',
|
||||
|
||||
_previousStepsWidth: 0,
|
||||
_totalItemsWidth: 0,
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
tailWidth: 0
|
||||
};
|
||||
},
|
||||
componentDidMount: function componentDidMount() {
|
||||
var $dom = React.findDOMNode(this);
|
||||
var tw = 0;
|
||||
var len = $dom.children.length - 1;
|
||||
var i;
|
||||
for (i = 0; i <= len; i++) {
|
||||
tw += $dom.children[i].offsetWidth;
|
||||
}
|
||||
|
||||
this._totalItemsWidth = tw;
|
||||
this._previousStepsWidth = React.findDOMNode(this).offsetWidth;
|
||||
this._update();
|
||||
if (window.attachEvent) {
|
||||
window.attachEvent('onresize', this._resize);
|
||||
} else {
|
||||
window.addEventListener('resize', this._resize);
|
||||
}
|
||||
},
|
||||
componentWillUnmount: function componentWillUnmount() {
|
||||
if (window.attachEvent) {
|
||||
window.detachEvent('onresize', this._resize);
|
||||
} else {
|
||||
window.removeEventListener('resize', this._resize);
|
||||
}
|
||||
},
|
||||
_resize: function _resize() {
|
||||
var w = React.findDOMNode(this).offsetWidth;
|
||||
if (this._previousStepsWidth === w) {
|
||||
return;
|
||||
}
|
||||
this._previousStepsWidth = w;
|
||||
this._update();
|
||||
},
|
||||
_update: function _update() {
|
||||
var len = this.props.children.length - 1;
|
||||
var dw = Math.floor((this._previousStepsWidth - this._totalItemsWidth) / len);
|
||||
if (dw <= 0) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
tailWidth: dw
|
||||
});
|
||||
},
|
||||
render: function render() {
|
||||
var props = this.props;
|
||||
var children = props.children;
|
||||
var len = children.length - 1;
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ className: 'rc-steps row-flex' },
|
||||
React.Children.map(children, function (ele, idx) {
|
||||
var np = {
|
||||
stepNumber: (idx + 1).toString(),
|
||||
stepLast: idx === len,
|
||||
tailWidth: this.state.tailWidth
|
||||
};
|
||||
return React.cloneElement(ele, np);
|
||||
}, this)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Steps;
|
||||
@ -1,6 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var Steps = require('./Steps');
|
||||
Steps.Step = require('./Step');
|
||||
|
||||
module.exports = Steps;
|
||||
@ -1,55 +0,0 @@
|
||||
{
|
||||
"name": "rc-steps",
|
||||
"version": "1.0.0",
|
||||
"description": "steps ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"react-tabs"
|
||||
],
|
||||
"main": "./lib/index",
|
||||
"homepage": "http://github.com/react-component/steps",
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "yuhangge",
|
||||
"email": "abeyuhang@gmail.com"
|
||||
}
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+ssh://git@github.com/react-component/steps.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "http://github.com/react-component/steps/issues"
|
||||
},
|
||||
"licenses": "MIT",
|
||||
"config": {
|
||||
"port": 8002
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rc-tools run build",
|
||||
"precommit": "rc-tools run precommit",
|
||||
"less": "rc-tools run less",
|
||||
"gh-pages": "rc-tools run gh-pages",
|
||||
"history": "rc-tools run history",
|
||||
"start": "node --harmony node_modules/.bin/rc-server",
|
||||
"publish": "rc-tools run tag",
|
||||
"lint": "rc-tools run lint",
|
||||
"saucelabs": "node --harmony node_modules/.bin/rc-tools run saucelabs",
|
||||
"browser-test": "node --harmony node_modules/.bin/rc-tools run browser-test",
|
||||
"browser-test-cover": "node --harmony node_modules/.bin/rc-tools run browser-test-cover"
|
||||
},
|
||||
"devDependencies": {
|
||||
"expect.js": "~0.3.1",
|
||||
"precommit-hook": "^1.0.7",
|
||||
"rc-server": "3.x",
|
||||
"rc-tools": "3.x",
|
||||
"react": "0.13.x"
|
||||
},
|
||||
"precommit": [
|
||||
"precommit"
|
||||
],
|
||||
"dependencies": {
|
||||
"rc-css-transition-group": "^2.0.0"
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
var React = require('react');
|
||||
|
||||
var Step = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
status: this.props.status ? this.props.status : 'waiting'
|
||||
};
|
||||
},
|
||||
render() {
|
||||
console.log('step render');
|
||||
var props = this.props;
|
||||
return (<div className={'rc-steps-item rc-steps-status-' + this.state.status }>
|
||||
|
||||
<div className='rc-steps-head'>
|
||||
<i className='anticon anticon-check'></i>
|
||||
</div>
|
||||
<div className='rc-steps-main'>
|
||||
<div className='rc-steps-title'>{props.title}</div>
|
||||
<div className='rc-steps-description'>
|
||||
{props.description}
|
||||
</div>
|
||||
</div>
|
||||
{!props.stepLast ? <div className='rc-steps-tail' style={{width: props.tailWidth}}>
|
||||
<i></i>
|
||||
</div> : ''}
|
||||
</div>);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Step;
|
||||
@ -1,76 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
|
||||
|
||||
var Steps = React.createClass({
|
||||
_previousStepsWidth: 0,
|
||||
_totalItemsWidth: 0,
|
||||
getInitialState() {
|
||||
return {
|
||||
tailWidth: 0
|
||||
};
|
||||
},
|
||||
componentDidMount() {
|
||||
var $dom = React.findDOMNode(this);
|
||||
var tw = 0;
|
||||
var len = $dom.children.length - 1;
|
||||
var i;
|
||||
for (i = 0; i <= len; i++) {
|
||||
tw += $dom.children[i].offsetWidth;
|
||||
}
|
||||
|
||||
this._totalItemsWidth = tw;
|
||||
this._previousStepsWidth = React.findDOMNode(this).offsetWidth;
|
||||
this._update();
|
||||
if (window.attachEvent) {
|
||||
window.attachEvent('onresize', this._resize);
|
||||
} else {
|
||||
window.addEventListener('resize', this._resize);
|
||||
}
|
||||
},
|
||||
componentWillUnmount() {
|
||||
if (window.attachEvent) {
|
||||
window.detachEvent('onresize', this._resize);
|
||||
} else {
|
||||
window.removeEventListener('resize', this._resize);
|
||||
}
|
||||
},
|
||||
_resize() {
|
||||
var w = React.findDOMNode(this).offsetWidth;
|
||||
if (this._previousStepsWidth === w) {
|
||||
return;
|
||||
}
|
||||
this._previousStepsWidth = w;
|
||||
this._update();
|
||||
},
|
||||
_update() {
|
||||
var len = this.props.children.length - 1;
|
||||
var dw = Math.floor((this._previousStepsWidth - this._totalItemsWidth) / len);
|
||||
if (dw <= 0) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
tailWidth: dw
|
||||
});
|
||||
},
|
||||
render() {
|
||||
var props = this.props;
|
||||
var children = props.children;
|
||||
var len = children.length - 1;
|
||||
return (
|
||||
<div className='rc-steps row-flex'>
|
||||
{React.Children.map(children, function(ele, idx) {
|
||||
var np = {
|
||||
stepNumber: (idx + 1).toString(),
|
||||
stepLast: idx === len,
|
||||
tailWidth: this.state.tailWidth
|
||||
};
|
||||
return React.cloneElement(ele, np);
|
||||
}, this)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Steps;
|
||||
@ -1,6 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var Steps = require('./Steps');
|
||||
Steps.Step = require('./Step');
|
||||
|
||||
module.exports = Steps;
|
||||
@ -1,109 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Test</title>
|
||||
<link rel="stylesheet" href="/ant-design/dist/antd.css"/>
|
||||
<script src="https://a.test.alipay.net/es5-shim/4.0.5/es5-shim.js"></script>
|
||||
<script src="./es5-sham.js"></script>
|
||||
<script type="text/javascript">
|
||||
// Console-polyfill. MIT license.
|
||||
// https://github.com/paulmillr/console-polyfill
|
||||
// Make it safe to do console.log() always.
|
||||
(function(global) {
|
||||
'use strict';
|
||||
global.console = global.console || {};
|
||||
var con = global.console;
|
||||
var prop, method;
|
||||
var empty = {};
|
||||
var dummy = function() {};
|
||||
var properties = 'memory'.split(',');
|
||||
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
|
||||
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
|
||||
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
|
||||
while (prop = properties.pop()) if (!con[prop]) con[prop] = empty;
|
||||
while (method = methods.pop()) if (!con[method]) con[method] = dummy;
|
||||
})(typeof window === 'undefined' ? this : window);
|
||||
// Using `this` for web workers while maintaining compatibility with browser
|
||||
// targeted script loaders such as Browserify or Webpack where the only way to
|
||||
// get to the global object is via `window`.
|
||||
</script>
|
||||
<script src="https://a.alipayobjects.com/react/0.13.2/react.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/ant-design/style/components/steps.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div row>
|
||||
<div col="24" style="padding: 10px;">
|
||||
<div id="__react-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<div row>-->
|
||||
<!--<div col="24" style="padding: 10px;">-->
|
||||
|
||||
<!--<div class="rc-steps">-->
|
||||
<!--<div class="rc-steps-item">-->
|
||||
<!--<div class="rc-steps-head">-->
|
||||
<!--<i class="anticon anticon-check"></i>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="rc-steps-main">-->
|
||||
<!--<div class="rc-steps-title">己完成</div>-->
|
||||
<!--<div class="rc-steps-description">-->
|
||||
<!--这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="rc-steps-tail">-->
|
||||
<!--<i></i>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="rc-steps-item">-->
|
||||
<!--<div class="rc-steps-head">-->
|
||||
<!--<i class="anticon anticon-check"></i>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="rc-steps-main">-->
|
||||
<!--<div class="rc-steps-title">己完成</div>-->
|
||||
<!--<div class="rc-steps-description">-->
|
||||
<!--这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="rc-steps-tail">-->
|
||||
<!--<i></i>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="rc-steps-item">-->
|
||||
<!--<div class="rc-steps-head">-->
|
||||
<!--<i class="anticon anticon-check"></i>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="rc-steps-main">-->
|
||||
<!--<div class="rc-steps-title">己完成</div>-->
|
||||
<!--<div class="rc-steps-description">-->
|
||||
<!--这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="rc-steps-tail">-->
|
||||
<!--<i></i>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="rc-steps-item">-->
|
||||
<!--<div class="rc-steps-head">-->
|
||||
<!--<i class="anticon anticon-check"></i>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="rc-steps-main">-->
|
||||
<!--<div class="rc-steps-title">己完成</div>-->
|
||||
<!--<div class="rc-steps-description">-->
|
||||
<!--这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
|
||||
<script type="text/javascript" src="../rc-steps/build/examples/common.js"></script>
|
||||
<script type="text/javascript" src="../rc-steps/build/examples/simple.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user