stream-chat-react-native-core
Version:
The official React Native and Expo components for Stream Chat, a service for building chat applications
233 lines • 9.98 kB
JavaScript
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.URLPreview = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _ComponentsContext = require("../../../contexts/componentsContext/ComponentsContext");
var _MessageContext = require("../../../contexts/messageContext/MessageContext");
var _MessagesContext = require("../../../contexts/messagesContext/MessagesContext");
var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
var _theme = require("../../../theme");
var _types = require("../../../types/types");
var _utils = require("../../../utils/utils");
var _ui = require("../../ui");
var _ImageBackground = require("../../UIComponents/ImageBackground");
var _openUrlSafely = require("../utils/openUrlSafely");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/UrlPreview/URLPreview.tsx";
var _excluded = ["description", "title"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var URLPreviewWithContext = props => {
var attachment = props.attachment,
additionalPressableProps = props.additionalPressableProps,
_props$ImageComponent = props.ImageComponent,
ImageComponent = _props$ImageComponent === void 0 ? _reactNative.Image : _props$ImageComponent,
onLongPress = props.onLongPress,
onPress = props.onPress,
onPressIn = props.onPressIn,
preventPress = props.preventPress,
_props$styles = props.styles,
stylesProp = _props$styles === void 0 ? {} : _props$styles;
var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
icons = _useComponentsContext.icons;
var _useTheme = (0, _ThemeContext.useTheme)(),
semantics = _useTheme.theme.semantics;
var image_url = attachment.image_url,
og_scrape_url = attachment.og_scrape_url,
text = attachment.text,
thumb_url = attachment.thumb_url,
title = attachment.title,
type = attachment.type;
var _useTheme2 = (0, _ThemeContext.useTheme)(),
_useTheme2$theme$mess = _useTheme2.theme.messageItemView.card,
container = _useTheme2$theme$mess.container,
cover = _useTheme2$theme$mess.cover,
_useTheme2$theme$mess2 = _useTheme2$theme$mess.footer,
description = _useTheme2$theme$mess2.description,
titleStyle = _useTheme2$theme$mess2.title,
footerStyle = (0, _objectWithoutProperties2.default)(_useTheme2$theme$mess2, _excluded),
linkPreview = _useTheme2$theme$mess.linkPreview,
linkPreviewText = _useTheme2$theme$mess.linkPreviewText;
var styles = useStyles();
var uri = image_url || thumb_url;
var defaultOnPress = () => (0, _openUrlSafely.openUrlSafely)(og_scrape_url || uri);
var isVideoCard = type === _types.FileTypes.Video && og_scrape_url;
return (0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
disabled: preventPress,
onLongPress: event => {
if (onLongPress) {
onLongPress({
additionalInfo: {
url: og_scrape_url
},
emitter: 'urlPreview',
event
});
}
},
onPress: event => {
if (onPress) {
onPress({
additionalInfo: {
url: og_scrape_url
},
defaultHandler: defaultOnPress,
emitter: 'urlPreview',
event
});
}
},
onPressIn: event => {
if (onPressIn) {
onPressIn({
additionalInfo: {
url: og_scrape_url
},
defaultHandler: defaultOnPress,
emitter: 'urlPreview',
event
});
}
},
style: [styles.container, container, stylesProp.container],
testID: "card-attachment",
...additionalPressableProps,
children: [uri && (0, _jsxRuntime.jsx)(_ImageBackground.ImageBackground, {
ImageComponent: ImageComponent,
imageStyle: styles.cardCover,
resizeMode: "cover",
source: {
uri: (0, _utils.makeImageCompatibleUrl)(uri)
},
style: [styles.cardCover, stylesProp.cardCover, cover],
children: isVideoCard ? (0, _jsxRuntime.jsx)(_ui.VideoPlayIndicator, {
size: "lg"
}) : null
}), (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.cardFooter, footerStyle, stylesProp.cardFooter],
children: [title ? (0, _jsxRuntime.jsx)(_reactNative.Text, {
numberOfLines: 1,
style: [styles.title, titleStyle, stylesProp.title],
children: title
}) : null, text ? (0, _jsxRuntime.jsx)(_reactNative.Text, {
numberOfLines: 2,
style: [styles.description, description, stylesProp.description],
children: text
}) : null, (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.linkPreview, linkPreview, stylesProp.linkPreview],
children: [(0, _jsxRuntime.jsx)(icons.Link, {
height: 12,
width: 12,
stroke: semantics.chatTextIncoming
}), (0, _jsxRuntime.jsx)(_reactNative.Text, {
numberOfLines: 1,
style: [styles.linkPreviewText, linkPreviewText, stylesProp.linkPreviewText],
children: og_scrape_url
})]
})]
})]
});
};
var areEqual = (prevProps, nextProps) => {
var prevAttachment = prevProps.attachment,
prevMyMessageTheme = prevProps.myMessageTheme,
isAttachmentEqual = prevProps.isAttachmentEqual;
var nextAttachment = nextProps.attachment,
nextMyMessageTheme = nextProps.myMessageTheme;
var attachmentEqual = prevAttachment.image_url === nextAttachment.image_url && prevAttachment.thumb_url === nextAttachment.thumb_url && prevAttachment.type === nextAttachment.type && prevAttachment.og_scrape_url === nextAttachment.og_scrape_url && prevAttachment.text === nextAttachment.text && prevAttachment.title === nextAttachment.title;
if (!attachmentEqual) {
return false;
}
if (isAttachmentEqual) {
return isAttachmentEqual(prevAttachment, nextAttachment);
}
var messageThemeEqual = JSON.stringify(prevMyMessageTheme) === JSON.stringify(nextMyMessageTheme);
if (!messageThemeEqual) {
return false;
}
return true;
};
var MemoizedURLPreview = _react.default.memo(URLPreviewWithContext, areEqual);
var URLPreview = props => {
var _useComponentsContext2 = (0, _ComponentsContext.useComponentsContext)(),
ImageComponent = _useComponentsContext2.ImageComponent;
var _useMessageContext = (0, _MessageContext.useMessageContext)(),
message = _useMessageContext.message,
onLongPress = _useMessageContext.onLongPress,
onPress = _useMessageContext.onPress,
onPressIn = _useMessageContext.onPressIn,
preventPress = _useMessageContext.preventPress;
var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
additionalPressableProps = _useMessagesContext.additionalPressableProps,
isAttachmentEqual = _useMessagesContext.isAttachmentEqual,
myMessageTheme = _useMessagesContext.myMessageTheme;
return (0, _jsxRuntime.jsx)(MemoizedURLPreview, {
additionalPressableProps,
channelId: message.cid,
ImageComponent,
isAttachmentEqual,
messageId: message.id,
myMessageTheme,
onLongPress,
onPress,
onPressIn,
preventPress,
...props
}, `${message?.id}${message?.updated_at}`);
};
exports.URLPreview = URLPreview;
var useStyles = () => {
var _useTheme3 = (0, _ThemeContext.useTheme)(),
semantics = _useTheme3.theme.semantics;
var _useMessageContext2 = (0, _MessageContext.useMessageContext)(),
isMyMessage = _useMessageContext2.isMyMessage;
return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
container: {
maxWidth: 256,
borderRadius: _theme.primitives.radiusLg,
backgroundColor: isMyMessage ? semantics.chatBgAttachmentOutgoing : semantics.chatBgAttachmentIncoming,
overflow: 'hidden'
},
cardCover: {
minWidth: 256,
minHeight: 144,
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center'
},
cardFooter: {
justifyContent: 'space-between',
gap: _theme.primitives.spacingXxs,
padding: _theme.primitives.spacingSm
},
title: {
color: semantics.chatTextIncoming,
fontSize: _theme.primitives.typographyFontSizeSm,
fontWeight: _theme.primitives.typographyFontWeightSemiBold,
lineHeight: _theme.primitives.typographyLineHeightTight
},
description: {
color: semantics.chatTextIncoming,
fontSize: _theme.primitives.typographyFontSizeXs,
fontWeight: _theme.primitives.typographyFontWeightRegular,
lineHeight: _theme.primitives.typographyLineHeightTight
},
linkPreview: {
flexDirection: 'row',
alignItems: 'center',
gap: _theme.primitives.spacingXxs
},
linkPreviewText: {
color: semantics.chatTextIncoming,
fontSize: _theme.primitives.typographyFontSizeXs,
fontWeight: _theme.primitives.typographyFontWeightRegular,
lineHeight: _theme.primitives.typographyLineHeightTight,
flexShrink: 1
}
}), [isMyMessage, semantics]);
};
URLPreview.displayName = 'URLPreview{messageItemView{card}}';
//# sourceMappingURL=URLPreview.js.map