react-ui-basics 0.0.159 → 0.0.162

package/ImageGallery.js

@@ -1,10 +1,9 @@
-import CommonFields from "./CommonFields";
+import ReactConstants from "./ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields";
 import { createClass as _createClass, classCallCheck as _classCallCheck, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, inherits as _inherits, createSuper as _createSuper, assertThisInitialized as _assertThisInitialized, slicedToArray as _slicedToArray, extends as _extends, toConsumableArray as _toConsumableArray } from './_virtual/_rollupPluginBabelHelpers.js';
 import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
 import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
 import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
-import {className as __className} from "./ReactConstants";
-import {children as __children} from "./ReactConstants";
 import React from 'react';
 import ReactCreateElement from './ReactCreateElement.js';
 import Animated from './Animated.js';
@@ -26,8 +25,8 @@ var previewWidth = previewRatio * previewHeight;
 var previewPadding = 8;
 var previewsHeight = previewHeight + 15;
 var calculatePosition = function calculatePosition(it, ratio, width, height, previewsHeight, embedded, container) {
-  var windowWidth = embedded ? container[CommonFields[10]] : min(DOCUMENT.body[CommonFields[10]], WINDOW.innerWidth);
-  var windowHeight = embedded ? container[CommonFields[9]] : min(DOCUMENT.body[CommonFields[9]], WINDOW.innerHeight);
+  var windowWidth = embedded ? __clientWidth(container) : min(DOCUMENT.body.clientWidth, WINDOW.innerWidth);
+  var windowHeight = embedded ? __clientHeight(container) : min(DOCUMENT.body.clientHeight, WINDOW.innerHeight);
   var offset = it.offset;
   if (offset == null) offset = embedded ? 0 : windowHeight * 0.03;
   var offsetTop = it.offsetTop;
@@ -117,7 +116,7 @@ var Actions = _createClass(function Actions() {
 Actions.replaceImages = function (images) {
   return function (dispatch, getState) {
     var state = getState();
-    var length = images[CommonFields[5]];
+    var length = __length(images);
     var nextState = _objectSpread2({}, state);
     nextState.images = images.map(function (item) {
       var image = state.images.find(function (it) {
@@ -127,14 +126,14 @@ Actions.replaceImages = function (images) {
       var it = _objectSpread2({}, item);
       var el = it.el;
       if (el) {
-        var rect = el[CommonFields[13]]();
-        var fromWidth = el[CommonFields[10]];
-        var fromHeight = el[CommonFields[9]];
-        it.fromLeftPx = toPx(rect[CommonFields[3]]);
-        it.fromTopPx = toPx(rect[CommonFields[2]]);
+        var rect = el.getBoundingClientRect();
+        var fromWidth = __clientWidth(el);
+        var fromHeight = __clientHeight(el);
+        it.fromLeftPx = toPx(__left(rect));
+        it.fromTopPx = toPx(__top(rect));
         it.fromWidthPx = toPx(fromWidth);
         var ratio = fromWidth / fromHeight;
-        calculatePosition(it, ratio, el.naturalWidth || el[CommonFields[0]], el.naturalHeight || el[CommonFields[1]], withPreviews ? previewsHeight : 0, embedded, container);
+        calculatePosition(it, ratio, el.naturalWidth || __width(el), el.naturalHeight || __height(el), withPreviews ? previewsHeight : 0, embedded, container);
       } else {
         it.toLeft = 100;
         it.toTop = 100;
@@ -142,7 +141,7 @@ Actions.replaceImages = function (images) {
       if (!it.toWidth || !it.toHeight || !el) Actions.loadPreview(it)(dispatch);
       return it;
     });
-    nextState.previews[CommonFields[0]] = min(length, 5) * previewWidth + min(length - 1, 4) * previewPadding;
+    nextState.previews.width = min(length, 5) * previewWidth + min(length - 1, 4) * previewPadding;
     nextState.previews.totalWidth = toPx(length * previewWidth + (length - 1) * previewPadding);
     nextState.previews.images = nextState.images.map(function (item) {
       var preview = state.previews.images.find(function (it) {
@@ -151,8 +150,8 @@ Actions.replaceImages = function (images) {
       if (preview) return preview;
       var el = item.el;
       if (!el) return {};
-      var width = el[CommonFields[10]];
-      var height = el[CommonFields[9]];
+      var width = __clientWidth(el);
+      var height = __clientHeight(el);
       return calculatePreview(width, height, el.src);
     });
     dispatch({
@@ -164,7 +163,7 @@ Actions.replaceImages = function (images) {
 Actions.show = function (gallery) {
   return function (dispatch) {
     var images = gallery.images;
-    var length = images[CommonFields[5]];
+    var length = __length(images);
     var withPreviews = length > 1 && (gallery.withPreviews === UNDEFINED || !!gallery.withPreviews);
     var container = gallery.container;
     var embedded = gallery.embedded;
@@ -178,14 +177,14 @@ Actions.show = function (gallery) {
         var it = _objectSpread2({}, item);
         var el = it.el;
         if (el) {
-          var rect = el[CommonFields[13]]();
-          var fromWidth = el[CommonFields[10]];
-          var fromHeight = el[CommonFields[9]];
-          it.fromLeftPx = toPx(rect[CommonFields[3]]);
-          it.fromTopPx = toPx(rect[CommonFields[2]]);
+          var rect = el.getBoundingClientRect();
+          var fromWidth = __clientWidth(el);
+          var fromHeight = __clientHeight(el);
+          it.fromLeftPx = toPx(__left(rect));
+          it.fromTopPx = toPx(__top(rect));
           it.fromWidthPx = toPx(fromWidth);
           var ratio = fromWidth / fromHeight;
-          calculatePosition(it, ratio, el.naturalWidth || el[CommonFields[0]], el.naturalHeight || el[CommonFields[1]], withPreviews ? previewsHeight : 0, embedded, container);
+          calculatePosition(it, ratio, el.naturalWidth || __width(el), el.naturalHeight || __height(el), withPreviews ? previewsHeight : 0, embedded, container);
         } else {
           it.toLeft = 100;
           it.toTop = 100;
@@ -201,8 +200,8 @@ Actions.show = function (gallery) {
         images: images.map(function (it) {
           var el = it.el;
           if (!el) return {};
-          var width = el[CommonFields[10]];
-          var height = el[CommonFields[9]];
+          var width = __clientWidth(el);
+          var height = __clientHeight(el);
           return calculatePreview(width, height, el.src);
         })
       }
@@ -219,7 +218,7 @@ Actions.show = function (gallery) {
         }
       }
     });
-    data.previews.scroll = calculatePreviewsScroll(index, length, data.previews[CommonFields[0]]);
+    data.previews.scroll = calculatePreviewsScroll(index, length, data.previews.width);
     dispatch({
       type: ACTION_IMAGE_GALLERY_SHOW,
       data: data
@@ -274,7 +273,7 @@ Actions.loadPreview = function (item) {
   };
 };
 var reducers = (_reducers = {}, _defineProperty(_reducers, ACTION_IMAGE_GALLERY_SHOW, function (state, action) {
-  return _objectSpread2(_objectSpread2({}, action.data), {}, {
+  return _objectSpread2(_objectSpread2({}, __data(action)), {}, {
     open: true
   });
 }), _defineProperty(_reducers, ACTION_IMAGE_GALLERY_CLOSE, function (state, action) {
@@ -286,11 +285,11 @@ var reducers = (_reducers = {}, _defineProperty(_reducers, ACTION_IMAGE_GALLERY_
   var result = _objectSpread2(_objectSpread2({}, state), {}, {
     images: images
   });
-  for (var i = 0; i < images[CommonFields[5]]; i++) {
-    if (!images[i][CommonFields[0]] && !images[i].fromWidthPx) continue;
+  for (var i = 0; i < __length(images); i++) {
+    if (!__width(images[i]) && !images[i].fromWidthPx) continue;
     var it = _objectSpread2({}, images[i]);
-    var width = it[CommonFields[0]] || Number.parseInt(it.fromWidthPx);
-    var height = it[CommonFields[1]] || Number.parseInt(it.fromHeightPx);
+    var width = __width(it) || Number.parseInt(it.fromWidthPx);
+    var height = __height(it) || Number.parseInt(it.fromHeightPx);
     calculatePosition(it, width / height, width, height, result.previews.show ? previewsHeight : 0, state.embedded, state.container);
     images[i] = it;
   }
@@ -305,8 +304,8 @@ var reducers = (_reducers = {}, _defineProperty(_reducers, ACTION_IMAGE_GALLERY_
   var index = images.findIndex(function (it) {
     return it.id === item.id;
   });
-  var width = image[CommonFields[0]];
-  var height = image[CommonFields[1]];
+  var width = __width(image);
+  var height = __height(image);
   var it = _objectSpread2(_objectSpread2({}, images[index]), {}, {
     loaded: true,
     width: width,
@@ -326,11 +325,11 @@ var reducers = (_reducers = {}, _defineProperty(_reducers, ACTION_IMAGE_GALLERY_
     return it.id === item.id;
   });
   var it = _objectSpread2({}, images[index]);
-  if (!it.toWidth || !it.toHeight) calculatePosition(it, image[CommonFields[0]] / image[CommonFields[1]], image[CommonFields[0]], image[CommonFields[1]], result.previews.show ? previewsHeight : 0, state.embedded, state.container);
+  if (!it.toWidth || !it.toHeight) calculatePosition(it, __width(image) / __height(image), __width(image), __height(image), result.previews.show ? previewsHeight : 0, state.embedded, state.container);
   images[index] = it;
   var previewImages = _toConsumableArray(state.previews.images);
   result.previews.images = previewImages;
-  var preview = calculatePreview(image[CommonFields[0]], image[CommonFields[1]], image.src);
+  var preview = calculatePreview(__width(image), __height(image), image.src);
   previewImages[index] = preview;
   return result;
 }), _reducers);
@@ -354,7 +353,7 @@ var big = function big(it, index, i, shift, length, previous) {
   if (index !== i) {
     var width = WINDOW.innerWidth;
     var additionalOffset = it.toLeft < 0 ? -it.toLeft : 0;
-    if (i < index) styles[CommonFields[3]] = toPx(it.toLeft - width - additionalOffset + (i + 1 === index ? shift : 0));else styles[CommonFields[3]] = toPx(it.toLeft + width + additionalOffset + (i - 1 === index ? shift : 0));
+    if (i < index) styles.left = toPx(it.toLeft - width - additionalOffset + (i + 1 === index ? shift : 0));else styles.left = toPx(it.toLeft + width + additionalOffset + (i - 1 === index ? shift : 0));
   }
   return styles;
 };
@@ -375,7 +374,7 @@ var ImageGallery = function (_React$Component) {
         zoomed = _stateGSs2[3],
         previewScroll = _stateGSs2[4];
     var props = propsGetter(that);
-    that[componentDidUpdate] = function (prevProps, prevState, snapshot) {
+    that[ReactConstants[2]] = function (prevProps, prevState, snapshot) {
       if (props().open !== prevProps.open && !props().open) {
         setTimeout(function () {
           shift(0);
@@ -388,7 +387,7 @@ var ImageGallery = function (_React$Component) {
       var indexValue = index() !== UNDEFINED ? index() : props().index;
       var image = images[indexValue];
       if (!image) {
-        var i = images[CommonFields[5]] - 1;
+        var i = __length(images) - 1;
         if (i === -1) {
           if (prevProps.images !== images) {
             onClose();
@@ -403,16 +402,16 @@ var ImageGallery = function (_React$Component) {
     var resizeListener = debounce(function () {
       props().open && props().recalculate();
     }, 100);
-    that[componentDidMount] = function () {
+    that[ReactConstants[0]] = function () {
       addEventListener(WINDOW, 'resize', resizeListener);
     };
-    that[componentWillUnmount] = function () {
+    that[ReactConstants[1]] = function () {
       removeEventListener(WINDOW, 'resize', resizeListener);
     };
     var onClose = function onClose() {
       resetZoom();
       moveListenerAdded = false;
-      _this.props.close();
+      __props(_this).close();
     };
     var onKeyDown = function onKeyDown(e) {
       var keyCode = e.keyCode;
@@ -452,22 +451,22 @@ var ImageGallery = function (_React$Component) {
     var resetZoom = function resetZoom() {
       if (!zoomed()) return;
       zoomed(false);
-      zoomedImage[CommonFields[4]][CommonFields[0]] = defaultWidth;
-      zoomedImage[CommonFields[4]][CommonFields[3]] = defaultLeft;
-      zoomedImage[CommonFields[4]][CommonFields[2]] = defaultTop;
-      zoomedImage[CommonFields[4]].transition = null;
+      __style(zoomedImage).width = defaultWidth;
+      __style(zoomedImage).left = defaultLeft;
+      __style(zoomedImage).top = defaultTop;
+      __style(zoomedImage).transition = null;
       touchpadStarted = null;
     };
     var initZoom = function initZoom() {
       zoomed(true);
-      defaultWidth = zoomedImage[CommonFields[4]][CommonFields[0]];
-      defaultLeft = zoomedImage[CommonFields[4]][CommonFields[3]];
-      defaultTop = zoomedImage[CommonFields[4]][CommonFields[2]];
+      defaultWidth = __style(zoomedImage).width;
+      defaultLeft = __style(zoomedImage).left;
+      defaultTop = __style(zoomedImage).top;
     };
     var initTouchpadDragging = function initTouchpadDragging() {
-      oldLeft = Number.parseFloat(zoomedImage[CommonFields[4]][CommonFields[3]]);
-      oldTop = Number.parseFloat(zoomedImage[CommonFields[4]][CommonFields[2]]);
-      zoomedImage[CommonFields[4]].transition = 'none';
+      oldLeft = Number.parseFloat(__style(zoomedImage).left);
+      oldTop = Number.parseFloat(__style(zoomedImage).top);
+      __style(zoomedImage).transition = 'none';
       touchpadStarted = true;
     };
     var onWheel = function onWheel(e) {
@@ -479,43 +478,43 @@ var ImageGallery = function (_React$Component) {
       if (e.ctrlKey) {
         var diff = e.deltaY * 0.005;
         var newZoom = Math.min(Math.max(zoomValue + diff, 0.5), 10);
-        var zoomX = e[CommonFields[6]];
+        var zoomX = __pageX(e);
         oldLeft = zoomX - (zoomX - oldLeft) * newZoom / zoomValue;
-        var zoomY = e[CommonFields[7]];
+        var zoomY = __pageY(e);
         oldTop = zoomY - (zoomY - oldTop) * newZoom / zoomValue;
         zoomValue = newZoom;
-        zoomedImage[CommonFields[4]][CommonFields[0]] = zoomValue * 100 + '%';
+        __style(zoomedImage).width = zoomValue * 100 + '%';
       } else {
         oldLeft += e.deltaX * 0.5;
         oldTop += e.deltaY * 0.5;
       }
-      zoomedImage[CommonFields[4]][CommonFields[3]] = oldLeft + 'px';
-      zoomedImage[CommonFields[4]][CommonFields[2]] = oldTop + 'px';
+      __style(zoomedImage).left = oldLeft + 'px';
+      __style(zoomedImage).top = oldTop + 'px';
     };
     var moveListenerAdded;
     var onTouchStart = function onTouchStart(e) {
       e.swipeProcessed = false;
       if (e.button === 2) return;
       var touches = e.touches || [{
-        pageX: e[CommonFields[6]],
-        pageY: e[CommonFields[7]]
+        pageX: __pageX(e),
+        pageY: __pageY(e)
       }];
-      zoomedImage = e.target;
+      zoomedImage = __target(e);
       zoomedImage = zoomedImage.tagName.toLowerCase() === 'img' ? zoomedImage.parentElement : zoomedImage;
-      oldLeft = Number.parseFloat(zoomedImage[CommonFields[4]][CommonFields[3]]);
-      oldTop = Number.parseFloat(zoomedImage[CommonFields[4]][CommonFields[2]]);
+      oldLeft = Number.parseFloat(__style(zoomedImage).left);
+      oldTop = Number.parseFloat(__style(zoomedImage).top);
       if (zoomed()) {
-        zoomedImage[CommonFields[4]].transition = 'none';
+        __style(zoomedImage).transition = 'none';
       }
       if (!moveListenerAdded) {
         addEventListener(_this.gallery, 'touchmove', onTouchMove, false);
         moveListenerAdded = true;
       }
-      if (touches[CommonFields[5]] === 2) {
+      if (__length(touches) === 2) {
         if (zoomed()) zoomValueStarted = zoomValue;else if (!props().embedded) {
           initZoom();
-          zoomedImage[CommonFields[4]].transition = 'none';
-          zoomValueStarted = zoomValue = Number.parseFloat(zoomedImage[CommonFields[4]][CommonFields[0]]) / WINDOW.innerWidth;
+          __style(zoomedImage).transition = 'none';
+          zoomValueStarted = zoomValue = Number.parseFloat(__style(zoomedImage).width) / WINDOW.innerWidth;
         }
       }
       touchesStart = touches;
@@ -526,25 +525,25 @@ var ImageGallery = function (_React$Component) {
     var distance = function distance(touches) {
       var a = touches[0];
       var b = touches[1];
-      return Math.sqrt(power2(a[CommonFields[6]] - b[CommonFields[6]]) + power2(a[CommonFields[7]] - b[CommonFields[7]]));
+      return Math.sqrt(power2(__pageX(a) - __pageX(b)) + power2(__pageY(a) - __pageY(b)));
     };
     var center = function center(touches) {
       var a = touches[0];
       var b = touches[1];
       return {
-        x: (a[CommonFields[6]] + b[CommonFields[6]]) / 2,
-        y: (a[CommonFields[7]] + b[CommonFields[7]]) / 2
+        x: (__pageX(a) + __pageX(b)) / 2,
+        y: (__pageY(a) + __pageY(b)) / 2
       };
     };
     var onTouchMove = function onTouchMove(e) {
       if (!touchesStart) return;
       var touches = e.touches || [{
-        pageX: e[CommonFields[6]],
-        pageY: e[CommonFields[7]]
+        pageX: __pageX(e),
+        pageY: __pageY(e)
       }];
       if (zoomed()) {
         preventDefault(e);
-        if (touches[CommonFields[5]] === 2) {
+        if (__length(touches) === 2) {
           var diff = distance(touches) / distance(touchesStart);
           zoomValue = Math.min(Math.max(zoomValueStarted * diff, 0.5), 10);
           var zoomedAt = center(touchesStart);
@@ -552,24 +551,24 @@ var ImageGallery = function (_React$Component) {
           var newLeft = zoomX - (zoomX - oldLeft) * zoomValue / zoomValueStarted;
           var zoomY = zoomedAt.y;
           var newTop = zoomY - (zoomY - oldTop) * zoomValue / zoomValueStarted;
-          zoomedImage[CommonFields[4]][CommonFields[3]] = newLeft + 'px';
-          zoomedImage[CommonFields[4]][CommonFields[2]] = newTop + 'px';
-          zoomedImage[CommonFields[4]][CommonFields[0]] = zoomValue * 100 + '%';
+          __style(zoomedImage).left = newLeft + 'px';
+          __style(zoomedImage).top = newTop + 'px';
+          __style(zoomedImage).width = zoomValue * 100 + '%';
           return;
         } else {
           var _touch = touches[0];
           var _touchStart = touchesStart[0];
-          var _newLeft = oldLeft + _touch[CommonFields[6]] - _touchStart[CommonFields[6]];
-          var _newTop = oldTop + _touch[CommonFields[7]] - _touchStart[CommonFields[7]];
-          zoomedImage[CommonFields[4]][CommonFields[3]] = _newLeft + 'px';
-          zoomedImage[CommonFields[4]][CommonFields[2]] = _newTop + 'px';
+          var _newLeft = oldLeft + __pageX(_touch) - __pageX(_touchStart);
+          var _newTop = oldTop + __pageY(_touch) - __pageY(_touchStart);
+          __style(zoomedImage).left = _newLeft + 'px';
+          __style(zoomedImage).top = _newTop + 'px';
           return;
         }
       }
-      if (touches[CommonFields[5]] > 1 || zoomed()) return;
+      if (__length(touches) > 1 || zoomed()) return;
       var touch = touches[0];
       var touchStart = touchesStart[0];
-      shift(touch[CommonFields[6]] - touchStart[CommonFields[6]]);
+      shift(__pageX(touch) - __pageX(touchStart));
     };
     var onTouchEnd = function onTouchEnd(e) {
       if (!touchesStart) return;
@@ -581,13 +580,13 @@ var ImageGallery = function (_React$Component) {
         return;
       }
       var touches = e.changedTouches || [{
-        pageX: e[CommonFields[6]],
-        pageY: e[CommonFields[7]]
+        pageX: __pageX(e),
+        pageY: __pageY(e)
       }];
       var touchEnd = touches[0];
       var touchStart = touchesStart[0];
-      var distX = touchEnd[CommonFields[6]] - touchStart[CommonFields[6]];
-      var distY = touchEnd[CommonFields[7]] - touchStart[CommonFields[7]];
+      var distX = __pageX(touchEnd) - __pageX(touchStart);
+      var distY = __pageY(touchEnd) - __pageY(touchStart);
       touchesStart = UNDEFINED;
       shift(0);
       var minDistance = 20;
@@ -604,14 +603,14 @@ var ImageGallery = function (_React$Component) {
           previews = _props.previews;
       index(i);
       previous(prev);
-      previewScroll(calculatePreviewsScroll(i, previews.images[CommonFields[5]], previews[CommonFields[0]]));
+      previewScroll(calculatePreviewsScroll(i, previews.images.length, __width(previews)));
     };
     var left = function left(e) {
       if (zoomed()) return;
       preventDefault(e);
       stopPropagation(e);
       var indexValue = index() !== UNDEFINED ? index() : props().index;
-      if (indexValue > 0) scrollTo(indexValue - 1, indexValue);else if (props().loop) scrollTo(props().images[CommonFields[5]] - 1, indexValue);
+      if (indexValue > 0) scrollTo(indexValue - 1, indexValue);else if (props().loop) scrollTo(props().images.length - 1, indexValue);
     };
     var right = function right(e) {
       if (zoomed()) return;
@@ -620,23 +619,23 @@ var ImageGallery = function (_React$Component) {
       var _props2 = props(),
           images = _props2.images;
       var indexValue = index() !== UNDEFINED ? index() : props().index;
-      if (indexValue < images[CommonFields[5]] - 1) scrollTo(indexValue + 1, indexValue);else if (props().loop) scrollTo(0, indexValue);
+      if (indexValue < __length(images) - 1) scrollTo(indexValue + 1, indexValue);else if (props().loop) scrollTo(0, indexValue);
     };
     that.scrollTo = scrollTo;
-    that[CommonFields[3]] = left;
+    that.left = left;
     that.right = right;
     var animatedRoundButton = function animatedRoundButton(show, className, onClick, icon) {
       return ReactCreateElement(Animated, {
         value: show
       }, ReactCreateElement(Button, {
-        [__className]: className,
-        onClick: onClick,
+        [ReactConstants[5]]: className,
+        [ReactConstants[6]]: onClick,
         round: true
       }, ReactCreateElement(MaterialIcon, {
         icon: icon
       })));
     };
-    that[render] = function () {
+    that[ReactConstants[3]] = function () {
       var _props3 = props(),
           open = _props3.open;
       var _props4 = props(),
@@ -647,17 +646,17 @@ var ImageGallery = function (_React$Component) {
           indicator = _props4.indicator,
           embedded = _props4.embedded,
           loop = _props4.loop,
-          _onClick = _props4.onClick,
-          children = _props4[__children];
+          _onClick = _props4[ReactConstants[6]],
+          children = _props4[ReactConstants[4]];
       var indexValue = index() !== UNDEFINED ? index() : props().index;
-      var length = images[CommonFields[5]];
+      var length = __length(images);
       var isZoomed = zoomed();
       var shiftValue = shift() || 0;
       previous();
       return ReactCreateElement(Animated, {
         value: open
       }, ReactCreateElement("div", {
-        [__className]: classNames('ImageGallery', embedded && 'embedded', isZoomed && 'zoomed'),
+        [ReactConstants[5]]: classNames('ImageGallery', embedded && 'embedded', isZoomed && 'zoomed'),
         tabIndex: 0,
         ref: function ref(it) {
           return (that.gallery = it) && !embedded && it.focus();
@@ -687,33 +686,33 @@ var ImageGallery = function (_React$Component) {
         }, ReactCreateElement("div", {
           draggable: false,
           onDoubleClick: function onDoubleClick(e) {
-            var img = e.target;
-            if (img.naturalWidth === img[CommonFields[10]] && img.naturalHeight === img[CommonFields[9]]) return;
+            var img = __target(e);
+            if (img.naturalWidth === __clientWidth(img) && img.naturalHeight === __clientHeight(img)) return;
             if (!isZoomed) {
               zoomedImage = img.tagName.toLowerCase() === 'img' ? img.parentElement : img;
               initZoom();
               zoomValue = 2;
               var newWidth = WINDOW.innerWidth * 2;
-              var oldWidth = Number.parseFloat(zoomedImage[CommonFields[4]][CommonFields[0]]);
-              var _oldLeft = Number.parseFloat(zoomedImage[CommonFields[4]][CommonFields[3]]);
-              var zoomX = e[CommonFields[6]];
+              var oldWidth = Number.parseFloat(__style(zoomedImage).width);
+              var _oldLeft = Number.parseFloat(__style(zoomedImage).left);
+              var zoomX = __pageX(e);
               var diff = newWidth / oldWidth;
               var newLeft = zoomX - (zoomX - _oldLeft) * diff;
-              var _oldTop = Number.parseFloat(zoomedImage[CommonFields[4]][CommonFields[2]]);
-              var zoomY = e[CommonFields[7]];
+              var _oldTop = Number.parseFloat(__style(zoomedImage).top);
+              var zoomY = __pageY(e);
               var newTop = zoomY - (zoomY - _oldTop) * diff;
-              zoomedImage[CommonFields[4]][CommonFields[0]] = '200%';
-              zoomedImage[CommonFields[4]][CommonFields[3]] = newLeft + 'px';
-              zoomedImage[CommonFields[4]][CommonFields[2]] = newTop + 'px';
+              __style(zoomedImage).width = '200%';
+              __style(zoomedImage).left = newLeft + 'px';
+              __style(zoomedImage).top = newTop + 'px';
             } else {
               resetZoom();
             }
           },
-          onClick: function onClick(e) {
+          [ReactConstants[6]]: function onClick(e) {
             !e.swipeProcessed && orNoop(_onClick)(e, it, i);
           },
           key: i,
-          [__className]: classNames('image', touchesStart && 'dragging', isZoomedCurrent && 'zoomed', i === indexValue && 'current')
+          [ReactConstants[5]]: classNames('image', touchesStart && 'dragging', isZoomedCurrent && 'zoomed', i === indexValue && 'current')
         }, ReactCreateElement("img", {
           draggable: false,
           src: loaded ? it.url : it.previewUrl,
@@ -721,29 +720,29 @@ var ImageGallery = function (_React$Component) {
         }), ReactCreateElement(Animated, {
           value: !loaded && Math.abs(indexValue - i) <= 1
         }, ReactCreateElement("div", {
-          [__className]: 'spinner'
+          [ReactConstants[5]]: 'spinner'
         }, ReactCreateElement(SpinningProgress, null))), !embedded && animatedRoundButton(open && !isZoomedCurrent, 'close', onClose, 'close'), ReactCreateElement(Animated, {
           value: loaded && !isZoomedCurrent
         }, ReactCreateElement("div", {
-          [__className]: "counter"
+          [ReactConstants[5]]: "counter"
         }, indexValue + 1, " / ", length)), !isZoomedCurrent && loaded && it.overlay));
       }), animatedRoundButton(open && length > 1 && (indexValue > 0 || loop) && !isZoomed, 'arrow left', left, 'chevron_left'), animatedRoundButton(open && length > 1 && (indexValue !== length - 1 || loop) && !isZoomed, 'arrow right', right, 'chevron_right'), ReactCreateElement(Animated, {
         value: open && length > 1 && !isZoomed
       }, ReactCreateElement("div", {
-        [__className]: "counter"
+        [ReactConstants[5]]: "counter"
       }, indexValue + 1, " / ", length)), indicator && ReactCreateElement(Animated, {
         value: open && length > 1 && !isZoomed
       }, indicator(indexValue, length)), ReactCreateElement(Animated, {
         value: open && previews.show && !isZoomed
       }, ReactCreateElement("div", {
-        [__className]: "previews",
+        [ReactConstants[5]]: "previews",
         style: {
-          width: previews[CommonFields[0]]
+          width: __width(previews)
         }
       }, ReactCreateElement("div", {
-        [__className]: "viewport"
+        [ReactConstants[5]]: "viewport"
       }, ReactCreateElement("div", {
-        [__className]: "container",
+        [ReactConstants[5]]: "container",
         style: {
           width: previews.totalWidth,
           left: toPx(previewScroll() || previews.scroll)
@@ -751,17 +750,17 @@ var ImageGallery = function (_React$Component) {
       }, (previews.images || []).map(function (it, i) {
         return ReactCreateElement("div", {
           key: i,
-          [__className]: classNames('preview', indexValue === i && 'selected'),
-          onClick: function onClick() {
+          [ReactConstants[5]]: classNames('preview', indexValue === i && 'selected'),
+          [ReactConstants[6]]: function onClick() {
             return scrollTo(i, indexValue);
           }
         }, ReactCreateElement("img", {
           src: it.url,
           style: it
         }), ReactCreateElement("div", {
-          [__className]: "border"
+          [ReactConstants[5]]: "border"
         }, ReactCreateElement("div", {
-          [__className]: "line"
+          [ReactConstants[5]]: "line"
         })));
       }))), animatedRoundButton(indexValue > 0 || loop, 'arrow left', left, 'keyboard_arrow_left'), animatedRoundButton(indexValue !== length - 1 || loop, 'arrow right', right, 'keyboard_arrow_right'))), children));
     };
@@ -785,12 +784,12 @@ var ImageGalleryContainer = function (_React$Component2) {
     var that = _assertThisInitialized(_this2);
     that.state = IMAGE_GALLERY_REDUCER(null, {});
     var getState = function getState() {
-      return that.state;
+      return __state(that);
     };
     var dispatch = function dispatch(action) {
       return setTimeout(function () {
-        var state = IMAGE_GALLERY_REDUCER(that.state, action);
-        if (state !== that.state) that.setState(state);
+        var state = IMAGE_GALLERY_REDUCER(__state(that), action);
+        if (state !== __state(that)) that.setState(state);
       }, 0);
     };
     var props = propsGetter(that);
@@ -820,23 +819,23 @@ var ImageGalleryContainer = function (_React$Component2) {
     that.replaceImages = function (images) {
       Actions.replaceImages(images)(dispatch, getState);
     };
-    that[render] = function () {
+    that[ReactConstants[3]] = function () {
       return ReactCreateElement(ImageGallery, _extends({
         ref: galleryRef
-      }, that.props, that.state, {
+      }, __props(that), __state(that), {
         show: show,
         load: load,
         close: close,
         recalculate: recalculate
-      }), that.props[__children]);
+      }), __props(that)[ReactConstants[4]]);
     };
-    that[componentDidMount] = function () {
+    that[ReactConstants[0]] = function () {
       props()[embedded] && show(props()[embedded]);
       that.scrollTo = galleryRef().scrollTo;
-      that[CommonFields[3]] = galleryRef()[CommonFields[3]];
+      that.left = __left(galleryRef());
       that.right = galleryRef().right;
     };
-    that[componentDidUpdate] = function (prevProps, prevState) {
+    that[ReactConstants[2]] = function (prevProps, prevState) {
       isDifferent(prevProps[embedded], props()[embedded]) && props()[embedded] && show(props()[embedded]);
     };
     return _this2;