@livelike/react-native/lib/module/components/LLGifPicker/LLGifPicker.js

LiveLike React Native package

import React, { useCallback, useEffect } from 'react';
import { Image, StyleSheet, TouchableOpacity } from 'react-native';
import { LLBasePicker } from '../LLBasePicker';
import { useGifPicker, useStyles } from '../../hooks';
import { LLGifPickerHeader } from './LLGifPickerHeader';
/**
 * @description Provides stock UI for the GIF picker component.
 * @param {Function} onPanelOpen - A callback function to be called when the panel opens. It is used for tracking analytics events when the component becomes visible.
 * @param {Function} onPanelClose - A callback function to be called when the panel closes. It is used for tracking analytics events when the component is unmounted as it becomes invisible.
 * @returns {JSX.Element} - Stock UI for the GIF picker.
 */
export function LLGifPicker(_ref) {
  let {
    visible,
    onPanelOpen,
    onPanelClose,
    closeGifPicker,
    onSelectGif,
    styles: stylesProp,
    PickerComponentStyles,
    GifPickerHeaderComponentStyles,
    GifPickerHeaderComponent = LLGifPickerHeader
  } = _ref;
  const gifPickerStyles = useStyles({
    componentStylesFn: getGifPickerStyles,
    stylesProp
  });
  const {
    isLoading,
    gifImages,
    onGifSearchInputChange
  } = useGifPicker();
  useEffect(() => {
    onGifSearchInputChange('', {
      debounce: false
    });
  }, []);
  useEffect(() => {
    onPanelOpen === null || onPanelOpen === void 0 || onPanelOpen();
    return () => {
      onPanelClose === null || onPanelClose === void 0 || onPanelClose();
    };
  }, []);
  const renderGifPickerHeaderComponent = useCallback(() => {
    return /*#__PURE__*/React.createElement(GifPickerHeaderComponent, {
      onSearchInputChange: onGifSearchInputChange,
      closeGifPicker: closeGifPicker,
      styles: GifPickerHeaderComponentStyles
    });
  }, [onGifSearchInputChange, closeGifPicker]);
  const renderGifPickerItemComponent = useCallback(_ref2 => {
    var _item$images;
    let {
      item
    } = _ref2;
    return /*#__PURE__*/React.createElement(React.Fragment, null, ((_item$images = item.images) === null || _item$images === void 0 || (_item$images = _item$images.preview_gif) === null || _item$images === void 0 ? void 0 : _item$images.url) && /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: gifPickerStyles.gifImageContainer
      // Ignore
      ,
      onPress: () => onSelectGif(item)
    }, /*#__PURE__*/React.createElement(Image, {
      resizeMode: "contain",
      style: gifPickerStyles.gifImage,
      source: {
        uri: item.images.preview_gif.url
      }
    })));
  }, [gifPickerStyles, onSelectGif]);
  return /*#__PURE__*/React.createElement(LLBasePicker, {
    packItems: gifImages,
    visible: visible,
    loading: isLoading,
    PickerHeaderComponent: renderGifPickerHeaderComponent,
    PickerItemComponent: renderGifPickerItemComponent,
    styles: PickerComponentStyles
  });
}
const getGifPickerStyles = _ref3 => {
  let {
    theme
  } = _ref3;
  return StyleSheet.create({
    gifImage: {
      width: 80,
      height: 80
    },
    gifImageContainer: {
      margin: 5
    }
  });
};
//# sourceMappingURL=LLGifPicker.js.map