@georstat/react-native-image-gallery/lib/commonjs/ImageGallery.js

React Native Image Gallery with Thumbnails

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _ImagePreview = _interopRequireDefault(require("./ImagePreview"));

var _SwipeContainer = _interopRequireDefault(require("./SwipeContainer"));

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const {
  height: deviceHeight,
  width: deviceWidth
} = _reactNative.Dimensions.get('window');

const defaultProps = {
  hideThumbs: false,
  resizeMode: 'contain',
  thumbColor: '#d9b44a',
  thumbResizeMode: 'cover',
  thumbSize: 48
};

const ImageGallery = props => {
  const {
    close,
    hideThumbs,
    images,
    initialIndex,
    isOpen,
    renderCustomImage,
    renderCustomThumb,
    renderFooterComponent,
    renderHeaderComponent,
    resizeMode,
    thumbColor,
    thumbResizeMode,
    thumbSize,
    disableSwipe
  } = props;
  const [activeIndex, setActiveIndex] = (0, _react.useState)(0);
  const [isDragging, setIsDragging] = (0, _react.useState)(false);
  const topRef = (0, _react.useRef)(null);
  const bottomRef = (0, _react.useRef)(null);

  const keyExtractorThumb = (item, index) => item && item.id ? item.id.toString() : index.toString();

  const keyExtractorImage = (item, index) => item && item.id ? item.id.toString() : index.toString();

  const scrollToIndex = i => {
    setActiveIndex(i);

    if (topRef !== null && topRef !== void 0 && topRef.current) {
      topRef.current.scrollToIndex({
        animated: true,
        index: i
      });
    }

    if (bottomRef !== null && bottomRef !== void 0 && bottomRef.current) {
      if (i * (thumbSize + 10) - thumbSize / 2 > deviceWidth / 2) {
        var _bottomRef$current;

        bottomRef === null || bottomRef === void 0 ? void 0 : (_bottomRef$current = bottomRef.current) === null || _bottomRef$current === void 0 ? void 0 : _bottomRef$current.scrollToIndex({
          animated: true,
          index: i
        });
      } else {
        var _bottomRef$current2;

        bottomRef === null || bottomRef === void 0 ? void 0 : (_bottomRef$current2 = bottomRef.current) === null || _bottomRef$current2 === void 0 ? void 0 : _bottomRef$current2.scrollToIndex({
          animated: true,
          index: 0
        });
      }
    }
  };

  const renderItem = _ref => {
    let {
      item,
      index
    } = _ref;
    return /*#__PURE__*/_react.default.createElement(_ImagePreview.default, {
      index: index,
      isSelected: activeIndex === index,
      item: item,
      resizeMode: resizeMode,
      renderCustomImage: renderCustomImage
    });
  };

  const renderThumb = _ref2 => {
    let {
      item,
      index
    } = _ref2;
    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
      onPress: () => scrollToIndex(index),
      activeOpacity: 0.8
    }, renderCustomThumb ? renderCustomThumb(item, index, activeIndex === index) : /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
      resizeMode: thumbResizeMode,
      style: activeIndex === index ? [styles.thumb, styles.activeThumb, {
        borderColor: thumbColor
      }, {
        width: thumbSize,
        height: thumbSize
      }] : [styles.thumb, {
        width: thumbSize,
        height: thumbSize
      }],
      source: {
        uri: item.thumbUrl ? item.thumbUrl : item.url
      }
    }));
  };

  const onMomentumEnd = e => {
    const {
      x
    } = e.nativeEvent.contentOffset;
    scrollToIndex(Math.round(x / deviceWidth));
  };

  (0, _react.useEffect)(() => {
    if (isOpen && initialIndex) {
      setActiveIndex(initialIndex);
    } else if (!isOpen) {
      setActiveIndex(0);
    }
  }, [isOpen, initialIndex]);
  const getImageLayout = (0, _react.useCallback)((_, index) => {
    return {
      index,
      length: deviceWidth,
      offset: deviceWidth * index
    };
  }, []);
  const getThumbLayout = (0, _react.useCallback)((_, index) => {
    return {
      index,
      length: thumbSize,
      offset: thumbSize * index
    };
  }, [thumbSize]);
  return /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
    animationType: isOpen ? 'slide' : 'fade',
    visible: isOpen
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.container
  }, /*#__PURE__*/_react.default.createElement(_SwipeContainer.default, {
    disableSwipe: disableSwipe,
    setIsDragging: setIsDragging,
    close: close
  }, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
    initialScrollIndex: initialIndex,
    getItemLayout: getImageLayout,
    data: images,
    horizontal: true,
    keyExtractor: keyExtractorImage,
    onMomentumScrollEnd: onMomentumEnd,
    pagingEnabled: true,
    ref: topRef,
    renderItem: renderItem,
    scrollEnabled: !isDragging,
    showsHorizontalScrollIndicator: false
  })), hideThumbs ? null : /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
    initialScrollIndex: initialIndex,
    getItemLayout: getThumbLayout,
    contentContainerStyle: styles.thumbnailListContainer,
    data: props.images,
    horizontal: true,
    keyExtractor: keyExtractorThumb,
    pagingEnabled: true,
    ref: bottomRef,
    renderItem: renderThumb,
    showsHorizontalScrollIndicator: false,
    style: [styles.bottomFlatlist, {
      bottom: thumbSize
    }]
  }), renderHeaderComponent ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.header
  }, renderHeaderComponent(images[activeIndex], activeIndex)) : null, renderFooterComponent ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.footer
  }, renderFooterComponent(images[activeIndex], activeIndex)) : null));
};

const styles = _reactNative.StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: 'black',
    flex: 1,
    height: deviceHeight,
    justifyContent: 'center',
    width: deviceWidth
  },
  header: {
    position: 'absolute',
    top: 0,
    width: '100%'
  },
  footer: {
    bottom: 0,
    position: 'absolute',
    width: '100%'
  },
  activeThumb: {
    borderWidth: 3
  },
  thumb: {
    borderRadius: 12,
    marginRight: 10
  },
  thumbnailListContainer: {
    paddingHorizontal: 10
  },
  bottomFlatlist: {
    position: 'absolute'
  }
});

ImageGallery.defaultProps = defaultProps;
var _default = ImageGallery;
exports.default = _default;
//# sourceMappingURL=ImageGallery.js.map