@livelike/react-native
Version:
LiveLike React Native package
151 lines (150 loc) • 5.98 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LLStickerPicker = LLStickerPicker;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _LLBasePicker = require("../LLBasePicker");
var _hooks = require("../../hooks");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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.
*/
function LLStickerPicker(_ref) {
var _stickerPacks$;
let {
visible,
onPanelOpen,
onPanelClose,
closeStickerPicker,
onSelectSticker,
styles: stylesProp,
PickerComponentStyles
} = _ref;
const {
stickerPacks
} = (0, _hooks.useStickerPacks)();
const {
selectedStickerPackId,
setSelectedStickerPackId
} = (0, _hooks.useStickerPicker)();
const _selectedStickerPackId = selectedStickerPackId || (stickerPacks === null || stickerPacks === void 0 || (_stickerPacks$ = stickerPacks[0]) === null || _stickerPacks$ === void 0 ? void 0 : _stickerPacks$.id);
const {
theme,
themeAssets
} = (0, _hooks.useTheme)();
const stickerPickerStyles = (0, _hooks.useStyles)({
componentStylesFn: getStickerPickerStyles,
stylesProp
});
(0, _react.useEffect)(() => {
onPanelOpen === null || onPanelOpen === void 0 || onPanelOpen();
return () => {
onPanelClose === null || onPanelClose === void 0 || onPanelClose();
};
}, []);
const stickers = (0, _react.useMemo)(() => {
if (!stickerPacks.length) {
return EMPTY_STICKERS;
}
const stickerPack = stickerPacks.find(pack => pack.id === _selectedStickerPackId);
return stickerPack.stickers || [];
}, [_selectedStickerPackId]);
const renderStickerHeaderComponent = (0, _react.useCallback)(() => {
if (stickerPacks && stickerPacks.length <= 1) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: stickerPickerStyles.stickerHeaderContainer
}, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
horizontal: true,
keyboardShouldPersistTaps: 'always'
}, stickerPacks.map(pack => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
key: pack.id,
onPress: () => setSelectedStickerPackId(pack.id)
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [{
backgroundColor: theme.secondaryBackground
}, _selectedStickerPackId === pack.id && {
backgroundColor: theme.primaryButtonBackground
}, stickerPickerStyles.stickerPacksContainer]
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
style: stickerPickerStyles.stickerPackIcon,
source: {
uri: pack.file
}
}))))), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: closeStickerPicker,
accessibilityLabel: "Close Sticker picker"
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
style: stickerPickerStyles.pickerCloseIcon,
source: themeAssets.close
})));
}, [themeAssets, theme, closeStickerPicker, stickerPickerStyles, selectedStickerPackId, stickerPacks]);
const renderPickerItem = (0, _react.useCallback)(_ref2 => {
let {
item
} = _ref2;
return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
style: stickerPickerStyles.stickerImageContainer,
onPress: () => onSelectSticker(item.shortcode)
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
resizeMode: "contain",
style: stickerPickerStyles.stickerImage,
source: {
uri: item.file
}
}));
}, [stickerPickerStyles, onSelectSticker]);
return /*#__PURE__*/_react.default.createElement(_LLBasePicker.LLBasePicker, {
packItems: stickers,
visible: visible,
PickerItemComponent: renderPickerItem,
PickerHeaderComponent: renderStickerHeaderComponent,
styles: PickerComponentStyles
});
}
const getStickerPickerStyles = _ref3 => {
let {
theme
} = _ref3;
return _reactNative.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