react-toolbox/components/ripple/Ripple.js

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
import dissoc from 'ramda/src/dissoc';
import { RIPPLE } from '../identifiers.js';
import events from '../utils/events';
import prefixer from '../utils/prefixer';

const defaults = {
  centered: false,
  className: '',
  multiple: true,
  passthrough: true,
  spread: 2,
  theme: {}
};

const rippleFactory = (options = {}) => {
  const {
    centered: defaultCentered,
    className: defaultClassName,
    multiple: defaultMultiple,
    passthrough: defaultPassthrough,
    spread: defaultSpread,
    theme: defaultTheme,
    ...props
  } = {...defaults, ...options};

  return ComposedComponent => {
    class RippledComponent extends Component {
      static propTypes = {
        children: PropTypes.any,
        disabled: PropTypes.bool,
        onRippleEnded: PropTypes.func,
        ripple: PropTypes.bool,
        rippleCentered: PropTypes.bool,
        rippleClassName: PropTypes.string,
        rippleMultiple: PropTypes.bool,
        rippleSpread: PropTypes.number,
        theme: PropTypes.shape({
          ripple: PropTypes.string,
          rippleActive: PropTypes.string,
          rippleRestarting: PropTypes.string,
          rippleWrapper: PropTypes.string
        })
      };

      static defaultProps = {
        disabled: false,
        ripple: true,
        rippleCentered: defaultCentered,
        rippleClassName: defaultClassName,
        rippleMultiple: defaultMultiple,
        rippleSpread: defaultSpread
      };

      state = {
        ripples: {}
      };

      componentDidUpdate (prevProps, prevState) {
        // If a new ripple was just added, add a remove event listener to its animation
        if (Object.keys(prevState.ripples).length < Object.keys(this.state.ripples).length) {
          this.addRippleRemoveEventListener(this.getLastKey());
        }
      }

      componentWillUnmount () {
        // Remove document event listeners for ripple if they still exists
        Object.keys(this.state.ripples).forEach(key => {
          this.state.ripples[key].endRipple();
        });
      }

      /**
       * Add an event listener to the reference with given key so when the animation transition
       * ends we can be sure that it finished and it can be safely removed from the state.
       * This function is called whenever a new ripple is added to the component.
       *
       * @param {String} rippleKey Is the key of the ripple to add the event.
       */
      addRippleRemoveEventListener (rippleKey) {
        const self = this;
        events.addEventListenerOnTransitionEnded(this.refs[rippleKey], function onOpacityEnd (e) {
          if (e.propertyName === 'opacity') {
            if (self.props.onRippleEnded) self.props.onRippleEnded(e);
            events.removeEventListenerOnTransitionEnded(self.refs[rippleKey], onOpacityEnd);
            self.setState({ ripples: dissoc(rippleKey, self.state.ripples) });
          }
        });
      }

      /**
       * Start a ripple animation on an specific point with touch or mouse events. First
       * decides if the animation should trigger. If the ripple is multiple or there is no
       * ripple present, it creates a new key. If it's a simple ripple and already exists,
       * it just restarts the current ripple. The animation happens in two state changes
       * to allow triggering via css.
       *
       * @param {Number} x Coordinate X on the screen where animation should start
       * @param {Number} y Coordinate Y on the screen where animation should start
       * @param {Boolean} isTouch Use events from touch or mouse.
       */
      animateRipple (x, y, isTouch) {
        if (this.rippleShouldTrigger(isTouch)) {
          const { top, left, width } = this.getDescriptor(x, y);
          const noRipplesActive = Object.keys(this.state.ripples).length === 0;
          const key = this.props.rippleMultiple || noRipplesActive ? this.getNextKey() : this.getLastKey();
          const endRipple = this.addRippleDeactivateEventListener(isTouch, key);
          const initialState = { active: false, restarting: true, top, left, width, endRipple };
          const runningState = { active: true, restarting: false };
          const ripples = {...this.state.ripples, [key]: initialState };
          this.setState({ ripples }, () => {
            if (this.refs[key]) this.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
            this.setState({ ripples: {
              ...this.state.ripples,
              [key]: Object.assign({}, this.state.ripples[key], runningState)
            } });
          });
        }
      }

      /**
       * Determine if a ripple should start depending if its a touch event. For mobile both
       * touchStart and mouseDown are launched so in case is touch we should always trigger
       * but if its not we should check if a touch was already triggered to decide.
       *
       * @param {Boolean} isTouch True in case a touch event triggered the ripple false otherwise.
       * @return {Boolean} True in case the ripple should trigger or false if it shouldn't.
       */
      rippleShouldTrigger (isTouch) {
        const shouldStart = isTouch ? true : !this.touchCache;
        this.touchCache = isTouch;
        return shouldStart;
      }

      /**
       * Find out a descriptor object for the ripple element being created depending on
       * the position where the it was triggered and the component's dimensions.
       *
       * @param {Number} x Coordinate x in the viewport where ripple was triggered
       * @param {Number} y Coordinate y in the viewport where ripple was triggered
       * @return {Object} Descriptor element including position and size of the element
       */
      getDescriptor (x, y) {
        const { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
        const { rippleCentered: centered, rippleSpread: spread } = this.props;
        return {
          left: centered ? 0 : x - left - width / 2,
          top: centered ? 0 : y - top - height / 2,
          width: width * spread
        };
      }

      /**
       * Increments and internal counter and returns the next value as a string. It
       * is used to assign key references to new ripple elements.
       *
       * @return {String} Key to be assigned to a ripple.
       */
      getNextKey () {
        this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
        return `ripple${this.currentCount}`;
      }

      /**
       * Return the last generated key for a ripple element. When there is only one ripple
       * and to get the reference when a ripple was just created.
       *
       * @return {String} The last generated ripple key.
       */
      getLastKey () {
        return `ripple${this.currentCount}`;
      }

      /**
       * Add an event listener to the document needed to deactivate a ripple and make it dissappear.
       * Deactivation can happen with a touchend or mouseup depending on the trigger type. The
       * ending function is created from a factory function and returned.
       *
       * @param {Boolean} isTouch True in case the trigger was a touch event false otherwise.
       * @param {String} rippleKey It's a key to identify the ripple that should be deactivated.
       * @return {Function} Callback function that deactivates the ripple and removes the event listener
       */
      addRippleDeactivateEventListener (isTouch, rippleKey) {
        const eventType = isTouch ? 'touchend' : 'mouseup';
        const endRipple = this.createRippleDeactivateCallback(eventType, rippleKey);
        document.addEventListener(eventType, endRipple);
        return endRipple;
      }

      /**
       * Generates a function that can be called to deactivate a given ripple and remove its finishing
       * event listener. If is generated because we need to store it to be called on unmount in case
       * the ripple is still running.
       *
       * @param {String} eventType Is the event type that can be touchend or mouseup
       * @param {String} rippleKey Is the key representing the ripple
       * @return {Function} Callback function that deactivates the ripple and removes the listener
       */
      createRippleDeactivateCallback (eventType, rippleKey) {
        const self = this;
        return function endRipple () {
          document.removeEventListener(eventType, endRipple);
          self.setState({ ripples: {
            ...self.state.ripples,
            [rippleKey]: Object.assign({}, self.state.ripples[rippleKey], { active: false })
          } });
        };
      }

      handleMouseDown = (event) => {
        if (this.props.onMouseDown) this.props.onMouseDown(event);
        if (!this.props.disabled) {
          const { x, y } = events.getMousePosition(event);
          this.animateRipple(x, y, false);
        }
      };

      handleTouchStart = (event) => {
        if (this.props.onTouchStart) this.props.onTouchStart(event);
        if (!this.props.disabled) {
          const { x, y } = events.getTouchPosition(event);
          this.animateRipple(x, y, true);
        }
      };

      renderRipple (key, className, { active, left, restarting, top, width }) {
        const scale = restarting ? 0 : 1;
        const transform = `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`;
        const _className = classnames(this.props.theme.ripple, {
          [this.props.theme.rippleActive]: active,
          [this.props.theme.rippleRestarting]: restarting
        }, className);
        return (
          <span key={key} data-react-toolbox='ripple' className={this.props.theme.rippleWrapper} {...props}>
            <span
              role='ripple'
              ref={key}
              className={_className}
              style={prefixer({ transform }, {width, height: width})}
            />
          </span>
        );
      }

      render () {
        const {
          children,
          disabled,
          ripple,
          onRippleEnded,   // eslint-disable-line
          rippleCentered,  // eslint-disable-line
          rippleClassName, // eslint-disable-line
          rippleMultiple,  // eslint-disable-line
          rippleSpread,    // eslint-disable-line
          theme,
          ...other
        } = this.props;
        const { ripples } = this.state;
        const childRipples = Object.keys(ripples).map(key => this.renderRipple(key, rippleClassName, ripples[key]));
        const childProps = { onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart, ...other };
        const finalProps = defaultPassthrough ? { ...childProps, theme, disabled } : childProps;

        return !ripple
          ? React.createElement(ComposedComponent, finalProps, children)
          : React.createElement(ComposedComponent, finalProps, [children, childRipples]);
      }
    }

    return themr(RIPPLE, defaultTheme)(RippledComponent);
  };
};

export default rippleFactory;