rc-steps component

components/step/demo/basic.md

@@ -0,0 +1,5 @@
+# Steps 基本用法
+
+````jsx
+
+````

components/step/index.jsx

@@ -0,0 +1,4 @@
+'use strict';
+
+var React = require('react');
+var Steps = require('rc-steps');

components/step/index.md

@@ -1,6 +1,20 @@
 # Step
 
 - category: Components
-- chinese: 步骤
+- chinese: 步骤条
+- order: 8
 
 ---
+
+脚踏实地一步步走
+
+## 何时使用
+
+
+
+## API
+
+| 参数      | 说明                                     | 类型       | 默认值 |
+|-----------|------------------------------------------|------------|--------|
+|  | | string     | top    |
+|      | | string/jsx | 无     |

components/step/rc-steps/.gitignore

@@ -0,0 +1 @@
+node_modules

components/step/rc-steps/HISTORY.md

@@ -0,0 +1,4 @@
+# History
+----
+
+## 

components/step/rc-steps/README.md

@@ -0,0 +1,134 @@
+# 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.

components/step/rc-steps/examples/simple.html

@@ -0,0 +1 @@
+placeholder

components/step/rc-steps/examples/simple.js

@@ -0,0 +1,20 @@
+'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]);
+//}
+
+React.render(
+  <Steps>
+  <Steps.Step status="finish" title="己完成"></Steps.Step>
+  <Steps.Step status="process" title="正在进行"></Steps.Step>
+  <Steps.Step status="waiting" title="待完成"></Steps.Step>
+  <Steps.Step status="waiting" title="待完成"></Steps.Step>
+</Steps>, container);

components/step/rc-steps/index.js

@@ -0,0 +1 @@
+module.exports = require('./src/');

components/step/rc-steps/lib/Step.js

@@ -0,0 +1,43 @@
+'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() {
+    var props = this.props;
+    var cls = 'border'; // fill / none
+    return React.createElement(
+      'li',
+      { className: (props.stepColClass ? props.stepColClass : '') + 'rc-steps-item', style: props.stepColStyles },
+      React.createElement(
+        'span',
+        { className: 'rc-steps-icon ' + cls + ' ' + this.state.status },
+        React.createElement(
+          'span',
+          { className: 'num' },
+          props.stepIndex
+        ),
+        React.createElement('i', { icon: props.icon })
+      ),
+      React.createElement(
+        'span',
+        { className: 'rc-steps-title' },
+        props.title
+      ),
+      props.description && React.createElement(
+        'span',
+        { className: 'rc-steps-description' },
+        props.description
+      )
+    );
+  }
+});
+
+module.exports = Step;

components/step/rc-steps/lib/Steps.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var React = require('react');
+
+var Steps = React.createClass({
+  displayName: 'Steps',
+
+  render: function render() {
+    var props = this.props;
+    var children = props.children;
+    var len = children.length - 1;
+    var isCol = [1, 2, 3, 4, 6, 8, 12].indexOf(len) >= 0;
+
+    function _make(ele, idx) {
+      var np = {};
+      if (!ele.props.stepNumber) {
+        np.stepNumber = '' + (idx + 1);
+      }
+      if (isCol && idx !== len) {
+        np.stepColClass = 'col-' + (24 / len).toFixed(0) + ' ';
+      } else if (idx !== len) {
+        np.stepColStyles = {
+          width: (100 / len).toFixed(4) + '%'
+        };
+      }
+      return React.cloneElement(ele, np);
+    }
+
+    return React.createElement(
+      'div',
+      { className: 'rc-steps row-flex' },
+      React.createElement(
+        'div',
+        { className: 'rc-steps-start' },
+        React.Children.map(props.children.slice(0, len), _make)
+      ),
+      React.createElement(
+        'div',
+        { className: 'rc-steps-end' },
+        _make(props.children[len], len)
+      )
+    );
+  }
+});
+
+module.exports = Steps;

components/step/rc-steps/lib/index.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var Steps = require('./Steps');
+Steps.Step = require('./Step');
+
+module.exports = Steps;

components/step/rc-steps/package.json

@@ -0,0 +1,55 @@
+{
+  "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"
+  }
+}

components/step/rc-steps/src/Step.jsx

@@ -0,0 +1,26 @@
+var React = require('react');
+
+var Step = React.createClass({
+  getInitialState() {
+    return {
+      status: this.props.status ? this.props.status : 'waiting'
+    };
+  },
+  render() {
+    var props = this.props;
+    var cls = 'border'; // fill / none
+    return (<li className={(props.stepColClass ? props.stepColClass : '') + 'rc-steps-item'} style={props.stepColStyles}>
+      <span className={'rc-steps-icon ' + cls + ' ' + this.state.status}>
+        <span className='num'>{props.stepIndex}</span>
+        <i icon={props.icon}></i>
+      </span>
+      <span className='rc-steps-title'>{props.title}</span>
+      {
+        props.description &&
+          <span className='rc-steps-description'>{props.description}</span>
+      }
+    </li>);
+  }
+});
+
+module.exports = Step;