完善逻辑和样式，包括兼容ie8

ant-design · Jun 24, 2015 · 06c12f9 · 06c12f9
1 parent 13ece3c
commit 06c12f9
Show file tree

Hide file tree

Showing 7 changed files with 355 additions and 105 deletions.
diff --git a/components/step/rc-steps/examples/simple.js b/components/step/rc-steps/examples/simple.js
@@ -11,10 +11,32 @@ var container = document.getElementById('__react-content');
 //  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.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}
 </Steps>, container);
diff --git a/components/step/rc-steps/lib/Step.js b/components/step/rc-steps/lib/Step.js
@@ -11,31 +11,35 @@ var Step = React.createClass({
     };
   },
   render: function render() {
+    console.log('step 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 },
+      'div',
+      { className: 'rc-steps-item rc-steps-status-' + this.state.status },
       React.createElement(
-        'span',
-        { className: 'rc-steps-icon ' + cls + ' ' + this.state.status },
-        React.createElement(
-          'span',
-          { className: 'num' },
-          props.stepIndex
-        ),
-        React.createElement('i', { icon: props.icon })
+        'div',
+        { className: 'rc-steps-head' },
+        React.createElement('i', { className: 'anticon anticon-check' })
       ),
       React.createElement(
-        'span',
-        { className: 'rc-steps-title' },
-        props.title
+        'div',
+        { className: 'rc-steps-main' },
+        React.createElement(
+          'div',
+          { className: 'rc-steps-title' },
+          props.title
+        ),
+        React.createElement(
+          'div',
+          { className: 'rc-steps-description' },
+          props.description
+        )
       ),
-      props.description && React.createElement(
-        'span',
-        { className: 'rc-steps-description' },
-        props.description
-      )
+      !props.stepLast ? React.createElement(
+        'div',
+        { className: 'rc-steps-tail', style: { width: props.tailWidth } },
+        React.createElement('i', null)
+      ) : ''
     );
   }
 });

diff --git a/components/step/rc-steps/lib/Steps.js b/components/step/rc-steps/lib/Steps.js
@@ -5,40 +5,71 @@ 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;
-    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)
-      )
+      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)
     );
   }
 });

diff --git a/components/step/rc-steps/src/Step.jsx b/components/step/rc-steps/src/Step.jsx
@@ -7,19 +7,23 @@ var Step = React.createClass({
     };
   },
   render() {
+    console.log('step 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>);
+    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>);
   }
 });
 

diff --git a/components/step/rc-steps/src/Steps.jsx b/components/step/rc-steps/src/Steps.jsx
@@ -4,35 +4,70 @@ 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;
-    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 (
-      <div className='rc-steps row-flex' >
-        <div className='rc-steps-start'>
-          {React.Children.map(props.children.slice(0, len), _make)}
-        </div>
-        <div className='rc-steps-end'>
-          {_make(props.children[len], len)}
-        </div>
+      <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>
     );
   }