nuke-touchable/lib/index.js

可点击容器

/* @jsx createElement */

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _rax = require('rax');

var _nukeEnv = require('nuke-env');

var _nukeView = require('nuke-view');

var _nukeView2 = _interopRequireDefault(_nukeView);

var _ripples = require('./ripples');

var _ripples2 = _interopRequireDefault(_ripples);

var _inherit = require('./inherit');

var _inherit2 = _interopRequireDefault(_inherit);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var isAndroid = _nukeEnv.appInfo.platform.toLowerCase() === 'android';

/**
 * Touchable
 * @description  可点击容器
 */

var Touchable = function (_Component) {
  _inherits(Touchable, _Component);

  function Touchable(props, context) {
    _classCallCheck(this, Touchable);

    var _this = _possibleConstructorReturn(this, (Touchable.__proto__ || Object.getPrototypeOf(Touchable)).call(this, props));

    _this.originalStyle = null;
    _this.activeStyle = null;

    _this.rippleEnabled = isAndroid && (props.rippleEnabled || context.androidConfigs && context.androidConfigs.rippleEnabled);

    _this.touchStart = _this.touchStart.bind(_this);
    _this.touchEnd = _this.touchEnd.bind(_this);
    return _this;
  }

  _createClass(Touchable, [{
    key: 'calculatedStyle',
    value: function calculatedStyle(activeStyle) {
      var obj = {};
      for (var k in activeStyle) {
        obj[k + ':active'] = activeStyle[k];
      }
      return obj;
    }
  }, {
    key: 'findDom',
    value: function findDom() {
      if (!this.dom) {
        this.dom = (0, _rax.findDOMNode)(this.refs.touch);
      }
      return this.dom;
    }
  }, {
    key: 'setStyle',
    value: function setStyle(styleData) {
      // const elementStyle = this.findDom().style;
      (0, _rax.setNativeProps)(this.refs.touch, {
        style: styleData
      });
      // for (const styleName in styleData) {
      //   elementStyle[styleName] = styleData[styleName];
      // }
    }
  }, {
    key: 'touchStart',
    value: function touchStart(e) {
      var _props = this.props,
          activeStyle = _props.activeStyle,
          style = _props.style,
          onTouchStart = _props.onTouchStart;

      if (!this.originalStyle) {
        this.originalStyle = _extends({}, style);
      }
      if (!this.activeStyle) {
        this.activeStyle = _extends({}, activeStyle);
      }
      this.setStyle(Object.assign({}, style, activeStyle));
      onTouchStart && onTouchStart(e);
    }
  }, {
    key: 'touchEnd',
    value: function touchEnd(e) {
      var _props2 = this.props,
          style = _props2.style,
          onTouchEnd = _props2.onTouchEnd;

      this.setStyle(this.originalStyle || style);
      onTouchEnd && onTouchEnd(e);
    }
  }, {
    key: 'getActiveColor',
    value: function getActiveColor(style) {
      return style['backgroundColor:active'] || null;
    }
  }, {
    key: 'calcInheritStyle',
    value: function calcInheritStyle(customStyles) {
      if (!customStyles) return {};
      var insideStyle = {};
      _inherit2.default.map(function (item) {
        if (customStyles[item]) {
          insideStyle[item] = customStyles[item];
        }
      });
      return insideStyle;
    }
  }, {
    key: 'render',
    value: function render() {
      var _props3 = this.props,
          style = _props3.style,
          rippleEnabled = _props3.rippleEnabled,
          activeStyle = _props3.activeStyle,
          onPress = _props3.onPress,
          others = _objectWithoutProperties(_props3, ['style', 'rippleEnabled', 'activeStyle', 'onPress']);

      var nativeProps = _extends({}, others, {
        ref: 'touch',
        style: Object.assign({}, style, this.calculatedStyle(activeStyle)),
        onClick: onPress
      });

      if (_nukeEnv.isWeex) {
        if (this.rippleEnabled) {
          nativeProps.rippleEnabled = true;
        }
        return (0, _rax.createElement)(_nukeView2.default, nativeProps);
      }
      var activeColor = this.getActiveColor(nativeProps.style);

      if (activeColor && !this.rippleEnabled) {
        nativeProps.onTouchStart = this.touchStart;
        nativeProps.onTouchEnd = this.touchEnd;
      }
      // wave happens only in clickable elements
      if (this.rippleEnabled && onPress) {
        var insideStyle = Object.assign({}, { flex: 1 }, this.calcInheritStyle(style));
        if (style && style.alignItems) {
          delete nativeProps.style.alignItems;
        }
        return (0, _rax.createElement)(
          _ripples2.default,
          _extends({}, nativeProps, { color: activeColor }),
          (0, _rax.createElement)(
            _nukeView2.default,
            { style: insideStyle },
            this.props.children
          )
        );
      }
      return (0, _rax.createElement)(
        _nukeView2.default,
        nativeProps,
        this.props.children
      );
    }
  }]);

  return Touchable;
}(_rax.Component);

Touchable.contextTypes = {
  androidConfigs: _rax.PropTypes.any,
  compatibilityConfigs: _rax.PropTypes.any
};
Touchable.defaultProps = {
  rippleEnabled: false,
  onPress: null
};
Touchable.propTypes = {
  /**
   * 点击的回调  click callback
   */
  onPress: _rax.PropTypes.func,
  /**
   * 长按的回调  long press callback
   */
  onLongPress: _rax.PropTypes.func,
  /**
   * 样式 style
   */
  style: _rax.PropTypes.any,
  /**
   * 手指按下时样式 style when touching
   */
  activeStyle: _rax.PropTypes.any,
  /**
   * 是否开启水波纹效果 enable ripple in Android
   */
  rippleEnabled: _rax.PropTypes.boolean
};
var styles = {
  initial: {
    cursor: 'pointer'
  }
};

exports.default = Touchable;
module.exports = exports['default'];