@livelike/react-native
Version:
LiveLike React Native package
100 lines (99 loc) • 4.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LLGifPicker = LLGifPicker;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _LLBasePicker = require("../LLBasePicker");
var _hooks = require("../../hooks");
var _LLGifPickerHeader = require("./LLGifPickerHeader");
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; }
/**
* @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.
*/
function LLGifPicker(_ref) {
let {
visible,
onPanelOpen,
onPanelClose,
closeGifPicker,
onSelectGif,
styles: stylesProp,
PickerComponentStyles,
GifPickerHeaderComponentStyles,
GifPickerHeaderComponent = _LLGifPickerHeader.LLGifPickerHeader
} = _ref;
const gifPickerStyles = (0, _hooks.useStyles)({
componentStylesFn: getGifPickerStyles,
stylesProp
});
const {
isLoading,
gifImages,
onGifSearchInputChange
} = (0, _hooks.useGifPicker)();
(0, _react.useEffect)(() => {
onGifSearchInputChange('', {
debounce: false
});
}, []);
(0, _react.useEffect)(() => {
onPanelOpen === null || onPanelOpen === void 0 || onPanelOpen();
return () => {
onPanelClose === null || onPanelClose === void 0 || onPanelClose();
};
}, []);
const renderGifPickerHeaderComponent = (0, _react.useCallback)(() => {
return /*#__PURE__*/_react.default.createElement(GifPickerHeaderComponent, {
onSearchInputChange: onGifSearchInputChange,
closeGifPicker: closeGifPicker,
styles: GifPickerHeaderComponentStyles
});
}, [onGifSearchInputChange, closeGifPicker]);
const renderGifPickerItemComponent = (0, _react.useCallback)(_ref2 => {
var _item$images;
let {
item
} = _ref2;
return /*#__PURE__*/_react.default.createElement(_react.default.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.default.createElement(_reactNative.TouchableOpacity, {
style: gifPickerStyles.gifImageContainer
// Ignore
,
onPress: () => onSelectGif(item)
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
resizeMode: "contain",
style: gifPickerStyles.gifImage,
source: {
uri: item.images.preview_gif.url
}
})));
}, [gifPickerStyles, onSelectGif]);
return /*#__PURE__*/_react.default.createElement(_LLBasePicker.LLBasePicker, {
packItems: gifImages,
visible: visible,
loading: isLoading,
PickerHeaderComponent: renderGifPickerHeaderComponent,
PickerItemComponent: renderGifPickerItemComponent,
styles: PickerComponentStyles
});
}
const getGifPickerStyles = _ref3 => {
let {
theme
} = _ref3;
return _reactNative.StyleSheet.create({
gifImage: {
width: 80,
height: 80
},
gifImageContainer: {
margin: 5
}
});
};
//# sourceMappingURL=LLGifPicker.js.map