dragon-mobile-ui/lib/_Picker/Picker.js

UI for react.js

'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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Option = require('./Option');

var _Option2 = _interopRequireDefault(_Option);

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 Picker = function (_Component) {
  _inherits(Picker, _Component);

  function Picker(props) {
    _classCallCheck(this, Picker);

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

    _this.state = {
      translateY: 0,
      pointStart: 0,
      pointEnd: 0,
      value: props.value || props.defaultValue
    };
    return _this;
  }

  _createClass(Picker, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.onValueChange(this.state.value, 0);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        this.setState({
          value: nextProps.value
        });
        this.onValueChange(nextProps.value, 300);
      }
    }

    // 选中指定值

  }, {
    key: 'onValueChange',
    value: function onValueChange(value, speed) {
      var _props = this.props,
          dataSource = _props.dataSource,
          valueMember = _props.valueMember;

      var index = 0;
      for (var i = 0; i < dataSource.length; i++) {
        if (dataSource[i][valueMember] === value) {
          index = i;
          break;
        }
      }
      this.onMoveTo(index, speed);
    }

    // 移动到指定编号

  }, {
    key: 'onMoveTo',
    value: function onMoveTo(index, speed) {
      var itemHeight = this.getItemHeight();
      if (itemHeight === 0) {
        return;
      }

      var offset = -index * itemHeight;

      this.doTransition(offset, speed);
      this.setState({
        translateY: offset
      });
    }

    // 执行过渡动画

  }, {
    key: 'doTransition',
    value: function doTransition(offset, duration) {
      var style = this.refs.picker.style;
      style.webkitTransitionDuration = duration + "ms";
      style.mozTransitionDuration = duration + "ms";
      style.oTransitionDuration = duration + "ms";
      style.transitionDuration = duration + "ms";
      style.webkitTransform = "translate3d(0, " + offset + "px, 0)";
      style.mozTransform = "translate3d(0, " + offset + "px, 0)";
      style.oTransform = "translate3d(0, " + offset + "px, 0)";
      style.transform = "translate3d(0, " + offset + "px, 0)";
    }
  }, {
    key: 'onTouchStart',
    value: function onTouchStart(event) {
      var pointY = this.getPoint(event).y;
      this.setState({
        pointStart: pointY
      });
    }
  }, {
    key: 'onTouchMove',
    value: function onTouchMove(event) {
      event.preventDefault();
      document.body.addEventListener('touchmove', function (event) {}, { passive: true });

      var pointY = this.getPoint(event).y;
      var offset = this.state.translateY + (pointY - this.state.pointStart);

      this.doTransition(offset, 0);
      this.setState({
        pointEnd: pointY
      });
    }
  }, {
    key: 'onTouchEnd',
    value: function onTouchEnd(event) {
      var offset = this.state.pointEnd !== 0 ? this.state.translateY + (this.state.pointEnd - this.state.pointStart) : 0;
      var items = this.refs.picker.children;
      var itemHeight = items[0] && items[0].offsetHeight;
      var maxIndex = Math.abs(items.length - 1);
      var index = Math.round(offset / itemHeight);

      if (index > 0) {
        index = 0;
      } else {
        index = Math.abs(offset) >= maxIndex * itemHeight ? maxIndex : Math.abs(index);
      }

      this.onMoveTo(index, 300);

      var _props2 = this.props,
          dataSource = _props2.dataSource,
          valueMember = _props2.valueMember,
          onChange = _props2.onChange;

      var value = dataSource[index][valueMember];

      console.log('value: ', value);
      this.setState({
        value: value
      });
      onChange && onChange(value);
    }
  }, {
    key: 'getItemHeight',
    value: function getItemHeight() {
      var items = this.refs.picker.children;

      if (!items || items.length === 0) {
        return 0;
      }
      return items[0].offsetHeight;
    }

    // 获取触摸点的当前坐标

  }, {
    key: 'getPoint',
    value: function getPoint(event) {
      var touch = event.touches[0];
      return {
        x: touch.pageX,
        y: touch.pageY
      };
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var props = this.props;

      var _props3 = this.props,
          height = _props3.height,
          isDisabled = _props3.isDisabled,
          valueMember = _props3.valueMember,
          displayMember = _props3.displayMember,
          dataSource = _props3.dataSource,
          others = _objectWithoutProperties(_props3, ['height', 'isDisabled', 'valueMember', 'displayMember', 'dataSource']);

      var options = dataSource.map(function (item, index) {
        return _react2.default.createElement(
          _Option2.default,
          { key: index, value: item[valueMember] },
          item[displayMember]
        );
      });

      var cls = (0, _classnames2.default)({
        'ui-picker': true,
        'disabled': 'disabled' in props || isDisabled
      });

      return _react2.default.createElement(
        'div',
        _extends({ className: cls,
          style: { height: height },
          onTouchStart: function onTouchStart(event) {
            return _this2.onTouchStart(event);
          },
          onTouchMove: function onTouchMove(event) {
            return _this2.onTouchMove(event);
          },
          onTouchEnd: function onTouchEnd(event) {
            return _this2.onTouchEnd(event);
          }
        }, others),
        _react2.default.createElement(
          'ul',
          { ref: 'picker' },
          options
        )
      );
    }
  }]);

  return Picker;
}(_react.Component);

Picker.propTypes = {
  onChange: _propTypes2.default.func,
  dataSource: _propTypes2.default.array,
  valueMember: _propTypes2.default.string,
  displayMember: _propTypes2.default.string
};

Picker.defaultProps = {
  onChange: function onChange() {},
  dataSource: [],
  valueMember: 'value',
  displayMember: 'label'
};

exports.default = Picker;