react-ui-basics 0.0.175 → 0.0.176

package/src/ImageGallery.js

@@ -0,0 +1,935 @@
+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 React from 'react';
+import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
+import './ImageGallery.css';
+import ReactCreateElement from './ReactCreateElement';
+import './ImageGallery.css'
+import Animated from "./Animated";
+import Button from "./Button";
+import SpinningProgress from "./SpinningProgress";
+import {
+    UNDEFINED,
+    preventDefault,
+    stopPropagation,
+    classNames,
+    DOCUMENT,
+    WINDOW,
+    addEventListener,
+    removeEventListener,
+    setTimeout,
+    orNoop,
+    createRef,
+    debounce,
+    isDifferent
+} from "./Tools";
+import MaterialIcon from "./MaterialIcon";
+import {componentDidUpdate, componentWillUnmount, componentDidMount, render, propsGetter, stateGSs} from "./ReactConstants";
+
+const min = Math.min;
+const abs = Math.abs;
+
+const toPx = (value) => value + 'px';
+
+const previewRatio = 4 / 3;
+const previewHeight = 80;
+const previewWidth = previewRatio * previewHeight;
+const previewPadding = 8;
+const previewsHeight = previewHeight + 15;
+
+const calculatePosition = (it, ratio, width, height, previewsHeight, embedded, container) => {
+    const windowWidth = embedded ? __clientWidth(container) : min(DOCUMENT.body.clientWidth, WINDOW.innerWidth);
+    const windowHeight = embedded ? __clientHeight(container) : min(DOCUMENT.body.clientHeight, WINDOW.innerHeight);
+
+    let offset = it.offset;
+    if (offset == null)
+        offset = (embedded ? 0 : windowHeight * 0.03);
+
+    let offsetTop = it.offsetTop
+    offsetTop = offsetTop == null ? offset : offsetTop
+    let offsetBottom = it.offsetBottom
+    offsetBottom = offsetBottom == null ? offset : offsetBottom
+    let offsetLeft = it.offsetLeft
+    offsetLeft = offsetLeft == null ? offset : offsetLeft
+    let offsetRight = it.offsetRight
+    offsetRight = offsetRight == null ? offset : offsetRight
+
+    if (Number.isNaN(ratio))
+        ratio = 0;
+    if (embedded) {
+        if (ratio > 1) {
+            it.toHeight = windowHeight - previewsHeight - -offsetTop - offsetBottom;
+            it.toWidth = it.toHeight * ratio;
+        } else {
+            it.toWidth = windowWidth - offsetLeft - offsetRight;
+            it.toHeight = it.toWidth / ratio;
+        }
+    } else if (ratio > 1) {
+        it.toWidth = windowWidth - offsetLeft - offsetRight;
+        it.toHeight = it.toWidth / ratio;
+        if (it.toHeight > windowHeight - previewsHeight - offsetTop - offsetBottom) {
+            it.toHeight = windowHeight - previewsHeight - offsetTop - offsetBottom;
+            it.toWidth = it.toHeight * ratio;
+        }
+    } else {
+        it.toHeight = windowHeight - previewsHeight - offsetTop - offsetBottom;
+        it.toWidth = it.toHeight * ratio;
+        if (it.toWidth > windowWidth - offsetLeft - offsetRight) {
+            it.toWidth = windowWidth - offsetLeft - offsetRight;
+            it.toHeight = it.toWidth / ratio;
+        }
+    }
+
+    // if (width && it.toWidth > width) {
+    //     it.toWidth = width;
+    //     it.toHeight = height;
+    // }
+
+    it.toTop = offsetTop + (windowHeight - previewsHeight - offsetTop - offsetBottom - it.toHeight) / 2;
+    it.toLeft = (windowWidth - it.toWidth) / 2;
+
+    it.toWidthPx = toPx(it.toWidth);
+    // it.toHeightPx = toPx(it.toHeight);
+    it.toTopPx = toPx(it.toTop);
+    it.toLeftPx = toPx(it.toLeft);
+};
+
+const calculatePreviewsScroll = (index, length, width) => {
+    if (length <= 5)
+        return 0;
+
+    if (index < 3)
+        return 0;
+
+    if (index > length - 3)
+        return -(length - 5) * (previewWidth + previewPadding);
+
+    return -(index * (previewWidth + previewPadding) + (previewWidth) / 2 - width / 2);
+};
+
+function calculatePreview(width, height, url) {
+    let top = 0;
+    let left = 0;
+
+    let ratio = width / height;
+
+    if (width !== previewWidth || height !== previewHeight) {
+        if (ratio < previewRatio) {
+            width = previewWidth;
+            height = width / ratio;
+            top = -(height - previewHeight) / 2;
+        } else {
+            height = previewHeight;
+            width = height * ratio;
+            left = -(width - previewWidth) / 2;
+        }
+    }
+
+    return {
+        url,
+        position: 'absolute',
+        width: toPx(width),
+        height: toPx(height),
+        top: toPx(top),
+        left: toPx(left),
+    };
+}
+
+const loadImage = (src, cb) => {
+    const image = new Image();
+    image.onload = () => {
+        cb(image)
+    };
+    image.src = src;
+}
+
+const ACTION_PREFIX = 'IMAGE_GALLERY_';
+const ACTION_IMAGE_GALLERY_SHOW = ACTION_PREFIX + 'SHOW';
+const ACTION_IMAGE_GALLERY_CLOSE = ACTION_PREFIX + 'CLOSE';
+const ACTION_IMAGE_GALLERY_RECALCULATE = ACTION_PREFIX + 'RECALCULATE';
+const ACTION_IMAGE_GALLERY_FULL_IMAGE_LOADED = ACTION_PREFIX + 'FULL_IMAGE_LOADED';
+const ACTION_IMAGE_GALLERY_PREVIEW_LOADED = ACTION_PREFIX + 'PREVIEW_LOADED';
+
+export class Actions {
+    static replaceImages = images => (dispatch, getState) => {
+        const state = getState();
+        const length = __length(images);
+        const nextState = {...state}
+        nextState.images = images.map(item => {
+            const image = state.images.find(it => it.url === item.url)
+            if (image)
+                return image
+
+            const it = {...item}
+            const el = it.el;
+            if (el) {
+                const rect = el.getBoundingClientRect();
+                const fromWidth = __clientWidth(el);
+                const fromHeight = __clientHeight(el);
+
+                it.fromLeftPx = toPx(__left(rect));
+                it.fromTopPx = toPx(__top(rect));
+                it.fromWidthPx = toPx(fromWidth);
+
+                let ratio = fromWidth / fromHeight;
+                calculatePosition(it, ratio, el.naturalWidth || __width(el), el.naturalHeight || __height(el), withPreviews ? previewsHeight : 0, embedded, container);
+            } else {
+                it.toLeft = 100;
+                it.toTop = 100;
+            }
+            if (!it.toWidth || !it.toHeight || !el)
+                Actions.loadPreview(it)(dispatch);
+            return it;
+        })
+        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(item => {
+            const preview = state.previews.images.find(it => it.url === item.previewUrl)
+            if (preview)
+                return preview
+
+            const el = item.el;
+            if (!el)
+                return {};
+
+            let width = __clientWidth(el);
+            let height = __clientHeight(el);
+            return calculatePreview(width, height, el.src);
+        });
+
+        dispatch({type: ACTION_IMAGE_GALLERY_SHOW, data: nextState});
+    };
+
+    static show = (gallery) => (dispatch) => {
+        const images = gallery.images;
+        const length = __length(images);
+        const withPreviews = length > 1 && (gallery.withPreviews === UNDEFINED || !!gallery.withPreviews);
+        const container = gallery.container;
+        const embedded = gallery.embedded;
+        const index = gallery.index;
+        const data = {
+            index,
+            container,
+            embedded,
+            withPreviews,
+            images: images.map(item => {
+                const it = {...item}
+                const el = it.el;
+                if (el) {
+                    const rect = el.getBoundingClientRect();
+                    const fromWidth = __clientWidth(el);
+                    const fromHeight = __clientHeight(el);
+
+                    it.fromLeftPx = toPx(__left(rect));
+                    it.fromTopPx = toPx(__top(rect));
+                    it.fromWidthPx = toPx(fromWidth);
+
+                    let ratio = fromWidth / fromHeight;
+                    calculatePosition(it, ratio, el.naturalWidth || __width(el), el.naturalHeight || __height(el), withPreviews ? previewsHeight : 0, embedded, container);
+                } else {
+                    it.toLeft = 100;
+                    it.toTop = 100;
+                }
+                if (!it.toWidth || !it.toHeight || !el)
+                    Actions.loadPreview(it)(dispatch);
+                return it;
+            }),
+            previews: {
+                show: withPreviews,
+                width: min(length, 5) * previewWidth + min(length - 1, 4) * previewPadding,
+                totalWidth: toPx(length * previewWidth + (length - 1) * previewPadding),
+                scroll: UNDEFINED,
+                images: images.map(it => {
+                    const el = it.el;
+                    if (!el)
+                        return {};
+
+                    let width = __clientWidth(el);
+                    let height = __clientHeight(el);
+                    return calculatePreview(width, height, el.src);
+                })
+            },
+        };
+
+        data.images.forEach(it => {
+            if (!it.fromLeftPx) {
+                const imageWithFromData = data.images.find(it => !!it.fromLeftPx);
+                if (imageWithFromData) {
+                    it.fromLeftPx = imageWithFromData.fromLeftPx;
+                    it.fromTopPx = imageWithFromData.fromTopPx;
+                    it.fromWidthPx = imageWithFromData.fromWidthPx;
+                }
+            }
+        });
+        data.previews.scroll = calculatePreviewsScroll(index, length, data.previews.width);
+
+        dispatch({type: ACTION_IMAGE_GALLERY_SHOW, data});
+        Actions.load(data.images[index])(dispatch)
+    };
+    static close = () => (dispatch) => {
+        dispatch({type: ACTION_IMAGE_GALLERY_CLOSE});
+    };
+    static recalculate = () => (dispatch) => {
+        dispatch({type: ACTION_IMAGE_GALLERY_RECALCULATE});
+    };
+    static loaded = (item, image) => (dispatch) => {
+        dispatch({type: ACTION_IMAGE_GALLERY_FULL_IMAGE_LOADED, item, image});
+    };
+    static loadedPreview = (item, image) => (dispatch) => {
+        dispatch({type: ACTION_IMAGE_GALLERY_PREVIEW_LOADED, item, image});
+    };
+    static load = (item) => (dispatch) => {
+        loadImage(item.url, (image) => {
+            Actions.loaded(item, image)(dispatch);
+        })
+    };
+
+    static loadPreview = (item) => (dispatch) => {
+        loadImage(item.previewUrl, (image) => {
+            Actions.loadedPreview(item, image)(dispatch);
+        })
+    };
+}
+
+const reducers = {
+    [ACTION_IMAGE_GALLERY_SHOW]: (state, action) => ({...__data(action), open: true}),
+    [ACTION_IMAGE_GALLERY_CLOSE]: (state, action) => ({...state, open: false}),
+    [ACTION_IMAGE_GALLERY_RECALCULATE]: (state, action) => {
+        const images = [...state.images];
+        const result = {...state, images};
+        for (let i = 0; i < __length(images); i++) {
+            if (!__width(images[i]) && !images[i].fromWidthPx)
+                continue
+
+            const it = {...images[i]};
+            const width = __width(it) || Number.parseInt(it.fromWidthPx);
+            const 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;
+        }
+
+        return result;
+    },
+    [ACTION_IMAGE_GALLERY_FULL_IMAGE_LOADED]: (state, action) => {
+        const item = action.item;
+        const image = action.image;
+        const images = [...state.images];
+        const result = {...state, images};
+        const index = images.findIndex(it => it.id === item.id);
+
+        const width = __width(image)
+        const height = __height(image)
+        const it = {...images[index], loaded: true, width, height};
+        // debugger
+        // if (it.toWidth > __width(image))
+        calculatePosition(it, width / height, width, height, result.previews.show ? previewsHeight : 0, state.embedded, state.container);
+        images[index] = it;
+        return result;
+    },
+    [ACTION_IMAGE_GALLERY_PREVIEW_LOADED]: (state, action) => {
+        const item = action.item;
+        const image = action.image;
+        const images = [...state.images];
+        const result = {...state, images};
+        const index = images.findIndex(it => it.id === item.id);
+        const it = {...images[index]};
+
+        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;
+
+        const previewImages = [...state.previews.images];
+        result.previews.images = previewImages;
+        const preview = calculatePreview(__width(image), __height(image), image.src);
+        previewImages[index] = preview;
+
+        return result;
+    },
+};
+
+const small = (it, index, i, length) => {
+    if (index !== i)
+        return big(it, index, i, 0, length);
+
+    return {
+        position: 'absolute',
+        top: it.fromTopPx,
+        left: it.fromLeftPx,
+        width: it.fromWidthPx,
+        // height: it.fromHeightPx,
+        opacity: 0,
+    };
+};
+
+const big = (it, index, i, shift, length, previous) => {
+    const styles = {
+        position: 'absolute',
+        top: it.toTopPx,
+        left: toPx(it.toLeft + shift),
+        width: it.toWidthPx,
+        // height: it.toHeightPx,
+    };
+
+
+    // if (previous !== UNDEFINED && abs(index - previous) > 1) {
+    //     styles.transitionDelay = 100 * abs(previous - i) + 'ms';
+    // }
+
+    if (index !== i) {
+        const width = WINDOW.innerWidth;
+        const additionalOffset = it.toLeft < 0 ? -it.toLeft : 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;
+};
+
+class ImageGallery extends React.Component {
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+
+        const [
+            shift,
+            index,
+            previous,
+            zoomed,
+            previewScroll,
+        ] = stateGSs(that, 5);
+
+
+        const props = propsGetter(that);
+
+        that[ReactConstants[2]] = (prevProps, prevState, snapshot) => {
+            if (props().open !== prevProps.open && !props().open) {
+                setTimeout(() => {
+                    shift(0)
+                    index(UNDEFINED)
+                    previous(UNDEFINED)
+                }, 250 + 100); // 250ms transition + 100ms to be sure it ended
+            }
+
+            const images = props().images;
+            if (!images)
+                return
+
+            const indexValue = index() !== UNDEFINED ? index() : props().index;
+            const image = images[indexValue];
+            if (!image) {
+                const i = __length(images) - 1
+                if (i === -1) {
+                    if (prevProps.images !== images) {
+                        onClose()
+                    }
+                } else {
+                    scrollTo(i, UNDEFINED)
+                }
+            } else if (!image.loaded) {
+                props().load(image)
+            }
+        }
+
+        const resizeListener = debounce(() => {
+            props().open && props().recalculate()
+        }, 100)
+        that[ReactConstants[0]] = () => {
+            addEventListener(WINDOW, 'resize', resizeListener)
+        }
+        that[ReactConstants[1]] = () => {
+            removeEventListener(WINDOW, 'resize', resizeListener)
+        }
+        const onClose = () => {
+            resetZoom()
+            moveListenerAdded = false;
+            __props(this).close();
+        }
+
+        const onKeyDown = e => {
+            const keyCode = e.keyCode;
+            if (keyCode === 37/*left*/) {
+                left();
+                preventDefault(e);
+            }
+            if (keyCode === 39/*right*/) {
+                right();
+                preventDefault(e);
+            }
+            if (keyCode === 27/*escape*/ && !props().embedded) {
+                onClose();
+                preventDefault(e);
+            }
+        };
+
+        let touchesStart;
+        let zoomValue = 1;
+        let zoomValueStarted;
+        let zoomedImage;
+        let oldLeft;
+        let oldTop;
+
+        let defaultWidth;
+        let defaultLeft;
+        let defaultTop;
+        let touchpadStarted = null;
+
+        const onKeyUp = e => {
+            const keyCode = e.keyCode;
+            if (touchpadStarted && keyCode === 17/*ctrl*/ && zoomed() && zoomValue < 1) {
+                resetZoom()
+            }
+        };
+
+        const resetZoom = () => {
+            if (!zoomed()) return
+            zoomed(false)
+            __style(zoomedImage).width = defaultWidth;
+            __style(zoomedImage).left = defaultLeft;
+            __style(zoomedImage).top = defaultTop;
+            __style(zoomedImage).transition = null
+            touchpadStarted = null
+        }
+        const initZoom = () => {
+            zoomed(true)
+            defaultWidth = __style(zoomedImage).width;
+            defaultLeft = __style(zoomedImage).left;
+            defaultTop = __style(zoomedImage).top;
+        }
+
+        const initTouchpadDragging = () => {
+            oldLeft = Number.parseFloat(__style(zoomedImage).left);
+            oldTop = Number.parseFloat(__style(zoomedImage).top);
+            __style(zoomedImage).transition = 'none'
+            touchpadStarted = true;
+        }
+
+        const onWheel = (e) => {
+            if (!zoomed()) return;
+
+            preventDefault(e)
+            if (!touchpadStarted) {
+                initTouchpadDragging()
+            }
+
+            if (e.ctrlKey) {
+                let diff = e.deltaY * 0.005;
+
+                let newZoom = Math.min(Math.max(zoomValue + diff, 0.5), 10)
+                let zoomX = __pageX(e);
+                oldLeft = zoomX - (zoomX - oldLeft) * newZoom / zoomValue;
+
+                let zoomY = __pageY(e);
+                oldTop = zoomY - (zoomY - oldTop) * newZoom / zoomValue;
+                zoomValue = newZoom
+
+                __style(zoomedImage).width = (zoomValue * 100) + '%';
+            } else {
+                oldLeft += e.deltaX * 0.5;
+                oldTop += e.deltaY * 0.5;
+            }
+            __style(zoomedImage).left = oldLeft + 'px'
+            __style(zoomedImage).top = oldTop + 'px'
+        }
+
+        let moveListenerAdded
+
+        const onTouchStart = e => {
+            e.swipeProcessed = false;
+            if (e.button === 2) return;
+            const touches = e.touches || [{pageX: __pageX(e), pageY: __pageY(e)}];
+            // console.log('onTouchStart', e.touches, __target(e));
+
+            zoomedImage = __target(e);
+            zoomedImage = zoomedImage.tagName.toLowerCase() === 'img' ? zoomedImage.parentElement : zoomedImage;
+            oldLeft = Number.parseFloat(__style(zoomedImage).left);
+            oldTop = Number.parseFloat(__style(zoomedImage).top);
+            if (zoomed()) {
+                __style(zoomedImage).transition = 'none'
+            }
+            if (!moveListenerAdded) {
+                //need to add it like this to be able to call preventDefault
+                addEventListener(this.gallery, 'touchmove', onTouchMove, false)
+                moveListenerAdded = true;
+            }
+
+            if (__length(touches) === 2) {
+                if (zoomed())
+                    zoomValueStarted = zoomValue;
+                else if (!props().embedded) {
+                    initZoom()
+                    __style(zoomedImage).transition = 'none'
+                    zoomValueStarted = zoomValue = Number.parseFloat(__style(zoomedImage).width) / WINDOW.innerWidth;
+                }
+            }
+            touchesStart = (touches)
+        };
+
+        const power2 = x => x * x;
+
+        const distance = touches => {
+            const a = touches[0]
+            const b = touches[1]
+            return Math.sqrt(power2(__pageX(a) - __pageX(b)) + power2(__pageY(a) - __pageY(b)))
+        }
+        const center = touches => {
+            const a = touches[0]
+            const b = touches[1]
+            return {x: (__pageX(a) + __pageX(b)) / 2, y: (__pageY(a) + __pageY(b)) / 2}
+        }
+
+        const onTouchMove = e => {
+            if (!touchesStart)
+                return;
+
+            const touches = e.touches || [{pageX: __pageX(e), pageY: __pageY(e)}];
+            // console.log('onTouchMove', touches, e)
+
+            if (zoomed()) {
+                preventDefault(e)
+                if (__length(touches) === 2) {
+                    const diff = distance(touches) / distance(touchesStart);
+
+                    zoomValue = Math.min(Math.max(zoomValueStarted * diff, 0.5), 10)
+
+                    let zoomedAt = center(touchesStart)
+                    let zoomX = zoomedAt.x;
+                    let newLeft = zoomX - (zoomX - oldLeft) * zoomValue / zoomValueStarted;
+
+                    let zoomY = zoomedAt.y;
+                    let newTop = zoomY - (zoomY - oldTop) * zoomValue / zoomValueStarted;
+
+                    __style(zoomedImage).left = newLeft + 'px'
+                    __style(zoomedImage).top = newTop + 'px'
+                    __style(zoomedImage).width = (zoomValue * 100) + '%';
+
+                    return;
+                } else {
+                    let touch = touches[0];
+                    let touchStart = touchesStart[0];
+                    let newLeft = oldLeft + __pageX(touch) - __pageX(touchStart)
+                    let newTop = oldTop + __pageY(touch) - __pageY(touchStart)
+                    __style(zoomedImage).left = newLeft + 'px'
+                    __style(zoomedImage).top = newTop + 'px'
+                    return;
+                }
+            }
+
+            if (__length(touches) > 1 || zoomed())
+                return;
+
+            let touch = touches[0];
+            let touchStart = touchesStart[0];
+            shift(__pageX(touch) - __pageX(touchStart))
+        };
+
+        const onTouchEnd = e => {
+            if (!touchesStart)
+                return;
+
+            if (zoomed()) {
+                touchesStart = (UNDEFINED)
+                if (zoomValue < 1) {
+                    resetZoom()
+                }
+                return;
+            }
+
+            const touches = e.changedTouches || [{pageX: __pageX(e), pageY: __pageY(e)}];
+            // console.log('onTouchEnd', touches, e)
+
+            let touchEnd = touches[0];
+            let touchStart = touchesStart[0];
+            let distX = __pageX(touchEnd) - __pageX(touchStart);
+            let distY = __pageY(touchEnd) - __pageY(touchStart);
+
+            touchesStart = (UNDEFINED)
+            shift(0)
+            const minDistance = 20;
+
+            if (abs(distX / distY) > 2 && abs(distX) > minDistance) {
+                distX < 0 ? right() : left();
+                e.swipeProcessed = true
+            } else if (abs(distY / distX) > 2 && abs(distY) > minDistance) {
+                !props().embedded && onClose();
+                e.swipeProcessed = true
+            }
+        };
+
+        const scrollTo = (i, prev) => {
+            const {previews} = props();
+            index(i)
+            previous(prev)
+            previewScroll(calculatePreviewsScroll(i, previews.images.length, __width(previews)))
+        };
+
+        const left = (e) => {
+            if (zoomed())
+                return;
+            preventDefault(e);
+            stopPropagation(e);
+            const indexValue = index() !== UNDEFINED ? index() : props().index;
+            if (indexValue > 0)
+                scrollTo(indexValue - 1, indexValue)
+            else if (props().loop)
+                scrollTo(props().images.length - 1, indexValue)
+        };
+
+        const right = (e) => {
+            if (zoomed())
+                return;
+            preventDefault(e);
+            stopPropagation(e);
+            const {images} = props();
+            const indexValue = index() !== UNDEFINED ? index() : props().index;
+            if (indexValue < __length(images) - 1)
+                scrollTo(indexValue + 1, indexValue)
+            else if (props().loop)
+                scrollTo(0, indexValue)
+        };
+
+        that.scrollTo = scrollTo;
+        that.left = left;
+        that.right = right;
+
+        const animatedRoundButton = (show, className, onClick, icon) => (
+            <Animated value={show}>
+                <Button className={className} onClick={onClick} round={true}>
+                    <MaterialIcon icon={icon}/>
+                </Button>
+            </Animated>);
+
+        that[ReactConstants[3]] = () => {
+            const {open} = props();
+            const {images = [], previews = {}, indicator, embedded, loop, onClick, children} = props();
+
+            const indexValue = index() !== UNDEFINED ? index() : props().index;
+            const length = __length(images);
+            const isZoomed = zoomed();
+            const shiftValue = shift() || 0;
+            const previousValue = previous();
+            return (
+                <Animated value={open}>
+                    <div className={classNames('ImageGallery', embedded && 'embedded', isZoomed && 'zoomed')}
+                         tabIndex={0}
+                         ref={it => (that.gallery = it) && !embedded && it.focus()}
+                         onKeyDown={onKeyDown}
+                         onKeyUp={onKeyUp}
+                        // onClick={e => __target(e) === that.gallery && !e.swipeProcessed && !embedded && onClose()}
+                         onTouchStart={onTouchStart}
+                         onTouchEnd={onTouchEnd}
+                         onMouseDown={onTouchStart}
+                         onMouseUp={onTouchEnd}
+                         onMouseMove={onTouchMove}
+                         onMouseLeave={onTouchEnd}
+                         onWheel={onWheel}
+                    >
+                        {images.map((it, i) => {
+                            const isZoomedCurrent = isZoomed && i === indexValue;
+                            const loaded = it.loaded;
+                            return <Animated key={it.id} value={open} styles={{
+                                default: small(it, indexValue, i, length),
+                                mounting: big(it, indexValue, i, shiftValue, length, previousValue),
+                                mountend: big(it, indexValue, i, shiftValue, length, previousValue),
+                                unmounting: small(it, indexValue, i, length),
+                            }}>
+                                <div
+                                    draggable={false}
+                                    onDoubleClick={e => {
+                                        const 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;
+                                            let newWidth = WINDOW.innerWidth * 2;
+                                            let oldWidth = Number.parseFloat(__style(zoomedImage).width);
+                                            let oldLeft = Number.parseFloat(__style(zoomedImage).left);
+                                            let zoomX = __pageX(e);
+                                            let diff = newWidth / oldWidth;
+                                            let newLeft = zoomX - (zoomX - oldLeft) * diff;
+
+                                            let oldTop = Number.parseFloat(__style(zoomedImage).top);
+                                            let zoomY = __pageY(e);
+                                            let newTop = zoomY - (zoomY - oldTop) * diff;
+
+                                            __style(zoomedImage).width = '200%'
+                                            __style(zoomedImage).left = newLeft + 'px'
+                                            __style(zoomedImage).top = newTop + 'px'
+                                        } else {
+                                            resetZoom()
+                                        }
+                                    }}
+                                    onClick={(e) => {
+                                        !e.swipeProcessed && orNoop(onClick)(e, it, i)
+                                    }}
+                                    key={i} className={classNames('image', touchesStart && 'dragging', isZoomedCurrent && 'zoomed', i === indexValue && 'current')}
+                                >
+                                    <img draggable={false} src={loaded ? it.url : it.previewUrl} onDragStart={preventDefault}/>
+
+                                    <Animated value={!loaded && Math.abs(indexValue - i) <= 1}>
+                                        <div className={'spinner'}><SpinningProgress/></div>
+                                    </Animated>
+
+                                    {!embedded && animatedRoundButton(open && !isZoomedCurrent,
+                                        'close',
+                                        onClose,
+                                        'close'
+                                    )}
+
+
+                                    <Animated value={loaded && !isZoomedCurrent}>
+                                        <div className="counter">
+                                            {indexValue + 1} / {length}
+                                        </div>
+                                    </Animated>
+
+                                    {!isZoomedCurrent && loaded && it.overlay}
+                                </div>
+                            </Animated>;
+                        })}
+
+                        {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'
+                        )}
+
+                        <Animated value={open && length > 1 && !isZoomed}>
+                            <div className="counter">
+                                {indexValue + 1} / {length}
+                            </div>
+                        </Animated>
+
+                        {indicator && <Animated value={open && length > 1 && !isZoomed}>
+                            {indicator(indexValue, length)}
+                        </Animated>}
+
+                        <Animated value={open && previews.show && !isZoomed}>
+                            <div className="previews" style={{width: __width(previews)}}>
+                                <div className="viewport">
+                                    <div className="container" style={{width: previews.totalWidth, left: toPx(previewScroll() || previews.scroll)}}>
+                                        {(previews.images || []).map((it, i) =>
+                                            <div key={i}
+                                                 className={classNames('preview', indexValue === i && 'selected')}
+                                                 onClick={() => scrollTo(i, indexValue)}
+                                            >
+                                                <img src={it.url} style={it}/>
+
+                                                <div className="border">
+                                                    <div className="line"/>
+                                                </div>
+                                            </div>)}
+                                    </div>
+                                </div>
+
+                                {animatedRoundButton(indexValue > 0 || loop,
+                                    'arrow left',
+                                    left,
+                                    'keyboard_arrow_left'
+                                )}
+                                {animatedRoundButton(indexValue !== length - 1 || loop,
+                                    'arrow right',
+                                    right,
+                                    'keyboard_arrow_right'
+                                )}
+                            </div>
+                        </Animated>
+
+                        {children}
+                    </div>
+                </Animated>
+            )
+        }
+
+    }
+}
+
+export const IMAGE_GALLERY_REDUCER_NAME = 'gallery';
+export const IMAGE_GALLERY_REDUCER = (state, action) => {
+    state = state || {};
+    const reducer = reducers[action.type];
+    return reducer ? reducer(state, action) : state;
+};
+
+export const mapStateToProps = (state, ownProps) => state[IMAGE_GALLERY_REDUCER_NAME];
+
+export default ImageGallery;
+
+export class ImageGalleryContainer extends React.Component {
+    constructor(properties) {
+        super(properties);
+        const that = this;
+
+        that.state = IMAGE_GALLERY_REDUCER(null, {})
+        const getState = () => __state(that);
+
+        const dispatch = (action) => setTimeout(() => {
+            that.setState(state => {
+                // console.log('before action', action, state)
+                state = IMAGE_GALLERY_REDUCER(state, action);
+                // console.log('after action', action, state)
+                return state;
+            })
+        }, 0)
+
+        const props = propsGetter(that)
+
+        const embedded = 'embedded'
+        const galleryRef = createRef()
+
+        const show = that.show = (gallery) => {
+            if (!!props()[embedded]) {
+                if (props().containerRef()) {
+                    Actions.show({
+                        ...gallery,
+                        [embedded]: !!props()[embedded],
+                        container: props().containerRef(),
+                    })(dispatch)
+                } else {
+                    setTimeout(show, 1, gallery)
+                }
+            } else {
+                Actions.show(gallery)(dispatch)
+            }
+        };
+        const close = that.close = () => {
+            Actions.close()(dispatch)
+        };
+        const load = that.load = (item) => {
+            Actions.load(item)(dispatch)
+        };
+        const recalculate = that.recalculate = () => {
+            Actions.recalculate()(dispatch)
+        };
+        that.replaceImages = (images) => {
+            Actions.replaceImages(images)(dispatch, getState)
+        };
+
+        that[ReactConstants[3]] = () => <ImageGallery ref={galleryRef} {...__props(that)} {...__state(that)} show={show} load={load} close={close} recalculate={recalculate}>
+            {__props(that)[ReactConstants[4]]}
+        </ImageGallery>
+
+        that[ReactConstants[0]] = () => {
+            props()[embedded] && show(props()[embedded])
+            that.scrollTo = galleryRef().scrollTo;
+            that.left = __left(galleryRef());
+            that.right = galleryRef().right;
+        }
+        that[ReactConstants[2]] = (prevProps, prevState) => {
+            isDifferent(prevProps[embedded], props()[embedded]) && props()[embedded] && show(props()[embedded])
+        }
+    }
+}