weex-nuke/lib/node_modules/nuke-touchable/src/ripples.jsx

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

/** @jsx createElement */
import { createElement, Component, PropTypes, PureComponent } from 'rax';

const rippleStyle = {
  position: 'absolute',
  borderRadius: '50%',
  opacity: 0,
  width: 35,
  height: 35,
  transform: 'translate(-50%, -50%)',
  pointerEvents: 'none',
};

const wrapStyle = {
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  overflow: 'hidden',
};

class Ripples extends PureComponent {
  constructor(props, context) {
    super(props);
    this.state = {
      rippleStyle: {},
    };
  }

  handleClick = (ev) => {
    if (ev.stopPropagation) {
      ev.stopPropagation();
    }

    const { onClick, color, during } = this.props;
    const {
      pageX,
      pageY,
      currentTarget: { offsetLeft, offsetTop, offsetWidth, offsetHeight },
    } = ev;

    const left = pageX - offsetLeft;
    const top = pageY - offsetTop;

    this.setState({
      rippleStyle: {
        top,
        left,
        opacity: 1,
        backgroundColor: color,
      },
    });

    setTimeout(() => {
      const size = Math.max(offsetWidth, offsetHeight);

      this.setState({
        rippleStyle: {
          top,
          left,
          backgroundColor: color,
          transition: `all ${during}ms`,
          transform: `${rippleStyle.transform} scale(${size / 9})`,
          opacity: 0,
        },
      });
    }, 50);

    if (typeof onClick === 'function') {
      onClick(ev);
    }
  };

  render() {
    const { children, style, during, color, ...props } = this.props;
    const { state, handleClick } = this;

    const s = {
      ...wrapStyle,
      ...style,
    };

    return (
      <div {...props} style={s} onClick={handleClick}>
        {children}
        <s
          style={{
            ...rippleStyle,
            ...state.rippleStyle,
          }}
        />
      </div>
    );
  }
}
Ripples.propTypes = {
  during: PropTypes.number,
  color: PropTypes.string,
};

Ripples.defaultProps = {
  during: 600,
  color: 'rgba(0, 0, 0, .3)',
};
export default Ripples;