reactors/dist/API/Animated/View/dom.js

View components and APIs that work web, mobile and desktop!

'use strict';

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

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends3 = require('babel-runtime/helpers/extends');

var _extends4 = _interopRequireDefault(_extends3);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _first = require('lodash/first');

var _first2 = _interopRequireDefault(_first);

var _keys = require('lodash/keys');

var _keys2 = _interopRequireDefault(_keys);

var _uniq = require('lodash/uniq');

var _uniq2 = _interopRequireDefault(_uniq);

var _Core = require('../../Core');

var _Core2 = _interopRequireDefault(_Core);

var _StyleSheet = require('../../StyleSheet');

var _StyleSheet2 = _interopRequireDefault(_StyleSheet);

var _View = require('../../../Component/View');

var _View2 = _interopRequireDefault(_View);

var _dom = require('../Value/dom');

var _dom2 = _interopRequireDefault(_dom);

var _dom3 = require('../timing/dom');

var _dom4 = _interopRequireDefault(_dom3);

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

var parse = function parse(styles, setState, getState) {
  var style = _StyleSheet2.default.merge(styles);
  var parsed = {};
  var transitions = [];

  var _loop = function _loop(key) {
    if (style[key] instanceof _dom2.default) {
      style[key].change = function (_ref) {
        var value = _ref.value;

        var nextState = (0, _extends4.default)({}, getState(), (0, _defineProperty3.default)({}, key, value));
        return setState(nextState);
      };
      parsed[key] = style[key]._value;
      transitions.push('key');
    } else if (key === 'transform' && Array.isArray(style.transform)) {
      parsed.transform = [];
      var index = 0;
      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        var _loop2 = function _loop2() {
          var transformer = _step.value;

          var transformerName = (0, _first2.default)((0, _keys2.default)(transformer));
          var transformerValue = transformer[transformerName];
          if (transformerValue instanceof _dom2.default) {
            styles.transform[index][transformerName].change = function (_ref2) {
              var value = _ref2.value;
              return setState((0, _extends4.default)({}, getState(), {
                transform: getState().transform.map(function (item) {
                  var itemKey = (0, _first2.default)((0, _keys2.default)(item));
                  if (itemKey === transformerName) {
                    return (0, _defineProperty3.default)({}, itemKey, value);
                  }
                  return item;
                })
              }));
            };
            parsed.transform.push((0, _defineProperty3.default)({}, transformerName, transformerValue._value));
            transitions.push('transform');
          } else {
            parsed.transform.push((0, _defineProperty3.default)({}, transformerName, transformerValue));
          }
          index++;
        };

        for (var _iterator = style.transform[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          _loop2();
        }
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator.return) {
            _iterator.return();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;
          }
        }
      }
    } else {
      parsed[key] = style[key];
    }
  };

  for (var key in style) {
    _loop(key);
  }
  if ((0, _keys2.default)(transitions).length) {
    parsed.transition = (0, _uniq2.default)(transitions).map(function (transition) {
      return transition + ' 1s';
    }).join(', ');
  }
  return _StyleSheet2.default.merge(parsed);
};

var ReactorsAnimatedViewDOM = function (_PureComponent) {
  (0, _inherits3.default)(ReactorsAnimatedViewDOM, _PureComponent);

  function ReactorsAnimatedViewDOM() {
    var _ref4;

    var _temp, _this, _ret3;

    (0, _classCallCheck3.default)(this, ReactorsAnimatedViewDOM);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret3 = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref4 = ReactorsAnimatedViewDOM.__proto__ || Object.getPrototypeOf(ReactorsAnimatedViewDOM)).call.apply(_ref4, [this].concat(args))), _this), _this.state = { stateStyle: {} }, _this.componentWillMount = function () {
      var stateStyle = parse(_this.props.style, function (state, cb) {
        return _this.setState({ stateStyle: state }, cb);
      }, function () {
        return _this.state.stateStyle;
      });
      _this.setState({ stateStyle: stateStyle });
    }, _this.render = function () {
      var props = _Core2.default.props(_this.props);
      props.style = _this.state.stateStyle;
      return _react2.default.createElement(_View2.default, props);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret3);
  }

  return ReactorsAnimatedViewDOM;
}(_react.PureComponent);

ReactorsAnimatedViewDOM.Value = _dom2.default;
ReactorsAnimatedViewDOM.timing = _dom4.default;
exports.default = ReactorsAnimatedViewDOM;