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

LiveLike React Native package

import React, { useCallback, useEffect, useMemo } from 'react';
import { Image, StyleSheet, TouchableOpacity, View, ScrollView } from 'react-native';
import { LLBasePicker } from '../LLBasePicker';
import { useStickerPacks, useStickerPicker, useStyles, useTheme } from '../../hooks';
const EMPTY_STICKERS = [];
/**
 * @description Provides stock UI for the Sticker 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 Sticker picker.
 */
export function LLStickerPicker(_ref) {
  var _stickerPacks$;
  let {
    visible,
    onPanelOpen,
    onPanelClose,
    closeStickerPicker,
    onSelectSticker,
    styles: stylesProp,
    PickerComponentStyles
  } = _ref;
  const {
    stickerPacks
  } = useStickerPacks();
  const {
    selectedStickerPackId,
    setSelectedStickerPackId
  } = useStickerPicker();
  const _selectedStickerPackId = selectedStickerPackId || (stickerPacks === null || stickerPacks === void 0 || (_stickerPacks$ = stickerPacks[0]) === null || _stickerPacks$ === void 0 ? void 0 : _stickerPacks$.id);
  const {
    theme,
    themeAssets
  } = useTheme();
  const stickerPickerStyles = useStyles({
    componentStylesFn: getStickerPickerStyles,
    stylesProp
  });
  useEffect(() => {
    onPanelOpen === null || onPanelOpen === void 0 || onPanelOpen();
    return () => {
      onPanelClose === null || onPanelClose === void 0 || onPanelClose();
    };
  }, []);
  const stickers = useMemo(() => {
    if (!stickerPacks.length) {
      return EMPTY_STICKERS;
    }
    const stickerPack = stickerPacks.find(pack => pack.id === _selectedStickerPackId);
    return stickerPack.stickers || [];
  }, [_selectedStickerPackId]);
  const renderStickerHeaderComponent = useCallback(() => {
    if (stickerPacks && stickerPacks.length <= 1) {
      return null;
    }
    return /*#__PURE__*/React.createElement(View, {
      style: stickerPickerStyles.stickerHeaderContainer
    }, /*#__PURE__*/React.createElement(ScrollView, {
      horizontal: true,
      keyboardShouldPersistTaps: 'always'
    }, stickerPacks.map(pack => /*#__PURE__*/React.createElement(TouchableOpacity, {
      key: pack.id,
      onPress: () => setSelectedStickerPackId(pack.id)
    }, /*#__PURE__*/React.createElement(View, {
      style: [{
        backgroundColor: theme.secondaryBackground
      }, _selectedStickerPackId === pack.id && {
        backgroundColor: theme.primaryButtonBackground
      }, stickerPickerStyles.stickerPacksContainer]
    }, /*#__PURE__*/React.createElement(Image, {
      style: stickerPickerStyles.stickerPackIcon,
      source: {
        uri: pack.file
      }
    }))))), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: closeStickerPicker,
      accessibilityLabel: "Close Sticker picker"
    }, /*#__PURE__*/React.createElement(Image, {
      style: stickerPickerStyles.pickerCloseIcon,
      source: themeAssets.close
    })));
  }, [themeAssets, theme, closeStickerPicker, stickerPickerStyles, selectedStickerPackId, stickerPacks]);
  const renderPickerItem = useCallback(_ref2 => {
    let {
      item
    } = _ref2;
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: stickerPickerStyles.stickerImageContainer,
      onPress: () => onSelectSticker(item.shortcode)
    }, /*#__PURE__*/React.createElement(Image, {
      resizeMode: "contain",
      style: stickerPickerStyles.stickerImage,
      source: {
        uri: item.file
      }
    }));
  }, [stickerPickerStyles, onSelectSticker]);
  return /*#__PURE__*/React.createElement(LLBasePicker, {
    packItems: stickers,
    visible: visible,
    PickerItemComponent: renderPickerItem,
    PickerHeaderComponent: renderStickerHeaderComponent,
    styles: PickerComponentStyles
  });
}
const getStickerPickerStyles = _ref3 => {
  let {
    theme
  } = _ref3;
  return StyleSheet.create({
    stickerPacksContainer: {
      paddingVertical: 5,
      paddingHorizontal: 15,
      marginTop: 10,
      marginBottom: 15,
      marginHorizontal: 5,
      borderRadius: 20
    },
    stickerPackIcon: {
      height: 25,
      width: 25
    },
    stickerImage: {
      width: 80,
      height: 80
    },
    stickerImageContainer: {
      margin: 5
    },
    stickerHeaderContainer: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      paddingHorizontal: 10
    },
    pickerCloseIcon: {
      width: 30,
      height: 30,
      marginLeft: 10
    }
  });
};
//# sourceMappingURL=LLStickerPicker.js.map