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

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

/** @jsx createElement */

/**
 * Copyright (c) 2015-present, Alibaba Group Holding Limited.
 * All rights reserved.
 *
 * @providesModule Slider
 */
import { Component, createElement } from 'rax';
import { isWeex, isWeb, appInfo } from 'nuke-env';

let Slide;
if (isWeb) {
  Slide = require('./slider');
}

export default class Slider extends Component {

  constructor(props) {
    super(props);
    this.state = {
      index: props.index || 0
    }
  }

  componentDidMount() {
    const { index } = this.state;
    // android端需在tree模式下重新setState才能初始化非第一帧。
    if (this.props.append == 'tree' && index != 0 && appInfo.android) {
      this.setState({
        index: index
      })
    }
  }



  onChange = (e) => {
    this.props.onChange && this.props.onChange(e);
  }
  onScroll = (e) => {
    this.props.onScroll && this.props.onScroll(e);
  }

  handleNativeProps() {
    // 兼容API标准
    let nativeProps = {
      onChange: this.onChange,
      onScroll: this.onScroll,
      offsetXAccuracy: this.props.accuracy || '10',
      autoPlay: this.props.autoPlay || this.props.autoplay,
      showIndicators: this.props.showsPagination,
      paginationStyle: Object.assign({
        position: 'absolute',
        width: this.props.width,
        height: '40rem',
        bottom: '20rem',
        left: 0,
        itemColor: 'rgba(255, 255, 255, 0.5)',
        itemSelectedColor: 'rgb(255, 80, 0)',
        itemSize: '8rem'
      }, this.props.paginationStyle),
      interval: this.props.autoPlayInterval || this.props.autoplayTimeout,
      ...{
        style: {
          width: this.props.width,
          height: this.props.height,
          overflow: 'hidden',
          ...this.props.style
        }
      },
      append: this.props.append || 'node'
    };

    nativeProps.index = this.state.index;
    return nativeProps;
  }

  render() {
    // 兼容API标准
    const props = {
      ...this.props,
      onChange: this.onChange,
      autoplayInterval: this.props.autoPlayInterval || this.props.autoplayTimeout,
      autoPlay: this.props.autoPlay || this.props.autoplay
    };

    if (isWeex) {
      const children = this.props.children;
      const nativeProps = this.handleNativeProps();

      return (
        <slider {...nativeProps}>
          {nativeProps.showIndicators ? <indicator style={nativeProps.paginationStyle} /> : null}
          {children}
        </slider>
      );
    } else {
      return <Slide ref="Slider" {...props} />;
    }
  }

  slideTo(index) {
    if (isWeex) {
      this.setState({
        index: index
      });
    } else {
      this.props.onChange({
        'index': index
      });
      this.refs.Slider.slideTo(index);
    }
  }
}