weex-nuke/lib/node_modules/nuke-progress/src/index.js

基于 Rax 、Weex 的高性能组件体系 ~~

/** @jsx createElement */

'use strict';

import { createElement, Component, findDOMNode, PropTypes } from 'rax';
import View from 'nuke-view';
import { isWeex, isWeb } from 'nuke-env';
import { connectStyle } from 'nuke-theme-provider';
import stylesProvider from './styles';

class Progress extends Component {
  constructor(props) {
    super(props);
    this.state = {
      innerWidth: 0,
    };
  }
  componentDidMount() {
    this.setInnerWidth(this.props);
  }
  componentWillReceiveProps(nextProps) {
    if ('rate' in nextProps) {
      this.setInnerWidth(nextProps);
    }
  }

  getRect() {
    return new Promise((resolve, reject) => {
      const domEl = findDOMNode(this.progress);
      if (domEl && isWeex) {
        try {
          setTimeout(() => {
            const dom = require('@weex-module/dom');
            dom.getComponentRect(domEl.ref, (e) => {
              if (e && e.size && e.size.width) {
                resolve(e.size.width.toFixed());
              } else {
                reject(0);
              }
            });
          }, 100);
        } catch (e) {
          reject(0);
        }
      } else {
        reject(0);
      }
    });
  }
  setInnerWidth(props) {
    const { style, rate } = props;
    let width;
    if (isWeb) {
      this.setState({
        innerWidth: `${(rate * 100).toString()}%`,
      });
    } else if (style.width) {
      this.setState({
        innerWidth: rate * style.width,
      });
    } else {
      this.getRect().then((width) => {
        if (width) {
          this.setState({
            innerWidth: rate * width,
          });
        } else {
          // try again
          this.getRect().then((width) => {
            if (width) {
              this.setState({
                innerWidth: rate * width,
              });
            }
          });
        }
      });
    }
  }
  render() {
    const { style, barStyle, rate } = this.props;
    const { innerWidth } = this.state;
    const styles = this.props.themeStyle;
    const innerStyle = Object.assign(
      {},
      styles['progress-inner'],
      {
        width: innerWidth,
      },
      barStyle
    );
    return (
      <View
        x="progress-wrap"
        ref={(n) => {
          this.progress = n;
        }}
        style={[styles['progress-wrap'], style]}
      >
        <View style={innerStyle} />
      </View>
    );
  }
}
Progress.propTypes = {
  rate: PropTypes.number,
  style: PropTypes.any,
  barStyle: PropTypes.any,
};

Progress.defaultProps = {
  rate: 1,
  style: {},
  barStyle: {},
};
Progress.displayName = 'Progress';
const StyledProgress = connectStyle(stylesProvider, { withRef: true })(Progress);

export default StyledProgress;