@sendbird/uikit-react-native-foundation 2.5.0 → 3.0.0-rc.0

package/src/ui/GroupChannelMessage/MessageOpenGraph.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
+import PressBox from '../../components/PressBox';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+const MessageOpenGraph = ({
+  onPressURL,
+  onLongPress,
+  ogMetaData,
+  variant,
+}: {
+  ogMetaData: Required<SendbirdUserMessage>['ogMetaData'];
+  variant: 'outgoing' | 'incoming';
+  onPressURL?: (url: string) => void;
+  onLongPress?: () => void;
+}) => {
+  const { palette, select, colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage[variant];
+
+  return (
+    <PressBox
+      activeOpacity={0.85}
+      onPress={() => typeof ogMetaData?.url === 'string' && onPressURL?.(ogMetaData.url)}
+      onLongPress={onLongPress}
+    >
+      {({ pressed }) => (
+        <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background}>
+          {Boolean(ogMetaData.defaultImage) && (
+            <ImageWithPlaceholder style={styles.ogImage} source={{ uri: ogMetaData.defaultImage.url }} />
+          )}
+
+          <Box
+            style={styles.ogContainer}
+            backgroundColor={select({ dark: palette.background400, light: palette.background100 })}
+          >
+            <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>
+              {ogMetaData.title}
+            </Text>
+            {Boolean(ogMetaData.description) && (
+              <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>
+                {ogMetaData.description}
+              </Text>
+            )}
+            <Text numberOfLines={1} caption2 color={colors.onBackground02}>
+              {ogMetaData.url}
+            </Text>
+          </Box>
+        </Box>
+      )}
+    </PressBox>
+  );
+};
+
+const styles = createStyleSheet({
+  ogContainer: {
+    overflow: 'hidden',
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12,
+  },
+  ogImage: {
+    maxWidth: 240,
+    width: 240,
+    height: 136,
+  },
+  ogUrl: {
+    marginBottom: 4,
+  },
+  ogTitle: {
+    marginBottom: 4,
+  },
+  ogDesc: {
+    lineHeight: 14,
+    marginBottom: 8,
+  },
+});
+
+export default MessageOpenGraph;

package/src/ui/GroupChannelMessage/index.ts

@@ -0,0 +1,48 @@
+import type React from 'react';
+
+import type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';
+
+import AdminMessage from './Message.admin';
+import FileMessage from './Message.file';
+import ImageFileMessage from './Message.file.image';
+import VideoFileMessage from './Message.file.video';
+import UnknownMessage from './Message.unknown';
+import UserMessage from './Message.user';
+import OpenGraphUser from './Message.user.og';
+
+export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {
+  channel: SendbirdGroupChannel;
+  message: T;
+  variant?: 'outgoing' | 'incoming';
+  strings?: {
+    senderName?: string;
+    sentDate?: string;
+    edited?: string;
+    fileName?: string;
+    unknownTitle?: string;
+    unknownDescription?: string;
+  };
+
+  children?: React.ReactNode;
+  sendingStatus?: React.ReactNode;
+
+  groupedWithPrev: boolean;
+  groupedWithNext: boolean;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  onPressAvatar?: () => void;
+  onPressURL?: (url: string) => void;
+  onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;
+} & AdditionalProps;
+
+const GroupChannelMessage = {
+  User: UserMessage,
+  OpenGraphUser: OpenGraphUser,
+  File: FileMessage,
+  ImageFile: ImageFileMessage,
+  VideoFile: VideoFileMessage,
+  Admin: AdminMessage,
+  Unknown: UnknownMessage,
+};
+
+export default GroupChannelMessage;

package/src/ui/OpenChannelMessage/Message.user.og.tsx

@@ -36,7 +36,7 @@ const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage
                         <Text
                           {...parentProps}
                           key={`${keyPrefix}-${index}`}
-                          onPress={onPressURL}
+                          onPress={() => onPressURL?.(match)}
                           onLongPress={onLongPress}
                           color={colors.primary}
                           style={parentProps?.style}
@@ -61,7 +61,11 @@ const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage
       </PressBox>
       {props.message.ogMetaData && (
         <MessageContainer {...rest} grouped>
-          <PressBox style={styles.ogContainer} onPress={onPressURL} onLongPress={onLongPress}>
+          <PressBox
+            style={styles.ogContainer}
+            onPress={() => props.message.ogMetaData?.url && onPressURL?.(props.message.ogMetaData.url)}
+            onLongPress={onLongPress}
+          >
             {({ pressed }) =>
               props.message.ogMetaData && (
                 <Box

package/src/ui/OpenChannelMessage/Message.user.tsx

@@ -32,7 +32,7 @@ const UserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>)
                       <Text
                         {...parentProps}
                         key={`${keyPrefix}-${index}`}
-                        onPress={onPressURL}
+                        onPress={() => onPressURL?.(match)}
                         onLongPress={onLongPress}
                         color={colors.primary}
                         style={parentProps?.style}

package/src/ui/OpenChannelMessage/index.ts

@@ -26,7 +26,7 @@ export type OpenChannelMessageProps<T extends SendbirdMessage, AdditionalProps =
   onPress?: () => void;
   onLongPress?: () => void;
   onPressAvatar?: () => void;
-  onPressURL?: () => void;
+  onPressURL?: (url: string) => void;
 } & AdditionalProps;
 
 const OpenChannelMessage = {

package/lib/commonjs/components/URLParsedText/index.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _uikitUtils = require("@sendbird/uikit-utils");
-var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
-var _Text = _interopRequireDefault(require("../Text"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const openUrl = (url, httpProtocol) => {
-  const targetUrl = httpProtocol ? url : 'https://' + url;
-  _reactNative.Linking.openURL(targetUrl).catch(err => _uikitUtils.Logger.warn('[URLParsedText]', 'Cannot open url', err));
-};
-const URLParsedText = _ref => {
-  let {
-    children,
-    onPressUrl = openUrl,
-    strict,
-    ...props
-  } = _ref;
-  const parsedChildren = _react.default.Children.map(_react.default.Children.toArray(children), child => {
-    if (typeof child === 'string') {
-      return (0, _uikitUtils.replaceUrlAsComponents)(child, url => {
-        return /*#__PURE__*/_react.default.createElement(_Text.default, _extends({}, props, {
-          suppressHighlighting: true,
-          onPress: () => onPressUrl === null || onPressUrl === void 0 ? void 0 : onPressUrl(url, url.startsWith('http')),
-          style: [props.style, styles.url]
-        }), url);
-      }, strict);
-    }
-    return child;
-  });
-  return /*#__PURE__*/_react.default.createElement(_Text.default, props, parsedChildren);
-};
-const styles = (0, _createStyleSheet.default)({
-  url: {
-    textDecorationLine: 'underline'
-  }
-});
-var _default = URLParsedText;
-exports.default = _default;
-//# sourceMappingURL=index.js.map

package/lib/commonjs/components/URLParsedText/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_uikitUtils","_createStyleSheet","_Text","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","openUrl","url","httpProtocol","targetUrl","Linking","openURL","catch","err","Logger","warn","URLParsedText","_ref","children","onPressUrl","strict","props","parsedChildren","React","Children","map","toArray","child","replaceUrlAsComponents","createElement","suppressHighlighting","onPress","startsWith","style","styles","createStyleSheet","textDecorationLine","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking } from 'react-native';\n\nimport { Logger, replaceUrlAsComponents } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport type { TextProps } from '../Text';\nimport Text from '../Text';\n\ntype OnPressUrl = (url: string, httpProtocol: boolean) => void;\n\nconst openUrl: OnPressUrl = (url, httpProtocol) => {\n  const targetUrl = httpProtocol ? url : 'https://' + url;\n  Linking.openURL(targetUrl).catch((err) => Logger.warn('[URLParsedText]', 'Cannot open url', err));\n};\n\ntype Props = TextProps & {\n  onPressUrl?: OnPressUrl;\n  strict?: boolean;\n};\nconst URLParsedText = ({ children, onPressUrl = openUrl, strict, ...props }: Props) => {\n  const parsedChildren = React.Children.map(React.Children.toArray(children), (child) => {\n    if (typeof child === 'string') {\n      return replaceUrlAsComponents(\n        child,\n        (url) => {\n          return (\n            <Text\n              {...props}\n              suppressHighlighting\n              onPress={() => onPressUrl?.(url, url.startsWith('http'))}\n              style={[props.style, styles.url]}\n            >\n              {url}\n            </Text>\n          );\n        },\n        strict,\n      );\n    }\n\n    return child;\n  });\n\n  return <Text {...props}>{parsedChildren}</Text>;\n};\nconst styles = createStyleSheet({\n  url: { textDecorationLine: 'underline' },\n});\nexport default URLParsedText;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AAEA,IAAAG,iBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AAA2B,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAI3B,MAAMQ,OAAmB,GAAGA,CAACC,GAAG,EAAEC,YAAY,KAAK;EACjD,MAAMC,SAAS,GAAGD,YAAY,GAAGD,GAAG,GAAG,UAAU,GAAGA,GAAG;EACvDG,oBAAO,CAACC,OAAO,CAACF,SAAS,CAAC,CAACG,KAAK,CAAEC,GAAG,IAAKC,kBAAM,CAACC,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,EAAEF,GAAG,CAAC,CAAC;AACnG,CAAC;AAMD,MAAMG,aAAa,GAAGC,IAAA,IAAiE;EAAA,IAAhE;IAAEC,QAAQ;IAAEC,UAAU,GAAGb,OAAO;IAAEc,MAAM;IAAE,GAAGC;EAAa,CAAC,GAAAJ,IAAA;EAChF,MAAMK,cAAc,GAAGC,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACF,cAAK,CAACC,QAAQ,CAACE,OAAO,CAACR,QAAQ,CAAC,EAAGS,KAAK,IAAK;IACrF,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC7B,OAAO,IAAAC,kCAAsB,EAC3BD,KAAK,EACJpB,GAAG,IAAK;QACP,oBACEzB,MAAA,CAAAS,OAAA,CAAAsC,aAAA,CAACzC,KAAA,CAAAG,OAAI,EAAAC,QAAA,KACC6B,KAAK;UACTS,oBAAoB;UACpBC,OAAO,EAAEA,CAAA,KAAMZ,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAGZ,GAAG,EAAEA,GAAG,CAACyB,UAAU,CAAC,MAAM,CAAC,CAAE;UACzDC,KAAK,EAAE,CAACZ,KAAK,CAACY,KAAK,EAAEC,MAAM,CAAC3B,GAAG;QAAE,IAEhCA,GAAG,CACC;MAEX,CAAC,EACDa,MAAM,CACP;IACH;IAEA,OAAOO,KAAK;EACd,CAAC,CAAC;EAEF,oBAAO7C,MAAA,CAAAS,OAAA,CAAAsC,aAAA,CAACzC,KAAA,CAAAG,OAAI,EAAK8B,KAAK,EAAGC,cAAc,CAAQ;AACjD,CAAC;AACD,MAAMY,MAAM,GAAG,IAAAC,yBAAgB,EAAC;EAC9B5B,GAAG,EAAE;IAAE6B,kBAAkB,EAAE;EAAY;AACzC,CAAC,CAAC;AAAC,IAAAC,QAAA,GACYrB,aAAa;AAAAsB,OAAA,CAAA/C,OAAA,GAAA8C,QAAA"}

package/lib/module/components/URLParsedText/index.js

@@ -1,38 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from 'react';
-import { Linking } from 'react-native';
-import { Logger, replaceUrlAsComponents } from '@sendbird/uikit-utils';
-import createStyleSheet from '../../styles/createStyleSheet';
-import Text from '../Text';
-const openUrl = (url, httpProtocol) => {
-  const targetUrl = httpProtocol ? url : 'https://' + url;
-  Linking.openURL(targetUrl).catch(err => Logger.warn('[URLParsedText]', 'Cannot open url', err));
-};
-const URLParsedText = _ref => {
-  let {
-    children,
-    onPressUrl = openUrl,
-    strict,
-    ...props
-  } = _ref;
-  const parsedChildren = React.Children.map(React.Children.toArray(children), child => {
-    if (typeof child === 'string') {
-      return replaceUrlAsComponents(child, url => {
-        return /*#__PURE__*/React.createElement(Text, _extends({}, props, {
-          suppressHighlighting: true,
-          onPress: () => onPressUrl === null || onPressUrl === void 0 ? void 0 : onPressUrl(url, url.startsWith('http')),
-          style: [props.style, styles.url]
-        }), url);
-      }, strict);
-    }
-    return child;
-  });
-  return /*#__PURE__*/React.createElement(Text, props, parsedChildren);
-};
-const styles = createStyleSheet({
-  url: {
-    textDecorationLine: 'underline'
-  }
-});
-export default URLParsedText;
-//# sourceMappingURL=index.js.map

package/lib/module/components/URLParsedText/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Linking","Logger","replaceUrlAsComponents","createStyleSheet","Text","openUrl","url","httpProtocol","targetUrl","openURL","catch","err","warn","URLParsedText","_ref","children","onPressUrl","strict","props","parsedChildren","Children","map","toArray","child","createElement","_extends","suppressHighlighting","onPress","startsWith","style","styles","textDecorationLine"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking } from 'react-native';\n\nimport { Logger, replaceUrlAsComponents } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport type { TextProps } from '../Text';\nimport Text from '../Text';\n\ntype OnPressUrl = (url: string, httpProtocol: boolean) => void;\n\nconst openUrl: OnPressUrl = (url, httpProtocol) => {\n  const targetUrl = httpProtocol ? url : 'https://' + url;\n  Linking.openURL(targetUrl).catch((err) => Logger.warn('[URLParsedText]', 'Cannot open url', err));\n};\n\ntype Props = TextProps & {\n  onPressUrl?: OnPressUrl;\n  strict?: boolean;\n};\nconst URLParsedText = ({ children, onPressUrl = openUrl, strict, ...props }: Props) => {\n  const parsedChildren = React.Children.map(React.Children.toArray(children), (child) => {\n    if (typeof child === 'string') {\n      return replaceUrlAsComponents(\n        child,\n        (url) => {\n          return (\n            <Text\n              {...props}\n              suppressHighlighting\n              onPress={() => onPressUrl?.(url, url.startsWith('http'))}\n              style={[props.style, styles.url]}\n            >\n              {url}\n            </Text>\n          );\n        },\n        strict,\n      );\n    }\n\n    return child;\n  });\n\n  return <Text {...props}>{parsedChildren}</Text>;\n};\nconst styles = createStyleSheet({\n  url: { textDecorationLine: 'underline' },\n});\nexport default URLParsedText;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,QAAQ,cAAc;AAEtC,SAASC,MAAM,EAAEC,sBAAsB,QAAQ,uBAAuB;AAEtE,OAAOC,gBAAgB,MAAM,+BAA+B;AAE5D,OAAOC,IAAI,MAAM,SAAS;AAI1B,MAAMC,OAAmB,GAAGA,CAACC,GAAG,EAAEC,YAAY,KAAK;EACjD,MAAMC,SAAS,GAAGD,YAAY,GAAGD,GAAG,GAAG,UAAU,GAAGA,GAAG;EACvDN,OAAO,CAACS,OAAO,CAACD,SAAS,CAAC,CAACE,KAAK,CAAEC,GAAG,IAAKV,MAAM,CAACW,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,EAAED,GAAG,CAAC,CAAC;AACnG,CAAC;AAMD,MAAME,aAAa,GAAGC,IAAA,IAAiE;EAAA,IAAhE;IAAEC,QAAQ;IAAEC,UAAU,GAAGX,OAAO;IAAEY,MAAM;IAAE,GAAGC;EAAa,CAAC,GAAAJ,IAAA;EAChF,MAAMK,cAAc,GAAGpB,KAAK,CAACqB,QAAQ,CAACC,GAAG,CAACtB,KAAK,CAACqB,QAAQ,CAACE,OAAO,CAACP,QAAQ,CAAC,EAAGQ,KAAK,IAAK;IACrF,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC7B,OAAOrB,sBAAsB,CAC3BqB,KAAK,EACJjB,GAAG,IAAK;QACP,oBACEP,KAAA,CAAAyB,aAAA,CAACpB,IAAI,EAAAqB,QAAA,KACCP,KAAK;UACTQ,oBAAoB;UACpBC,OAAO,EAAEA,CAAA,KAAMX,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAGV,GAAG,EAAEA,GAAG,CAACsB,UAAU,CAAC,MAAM,CAAC,CAAE;UACzDC,KAAK,EAAE,CAACX,KAAK,CAACW,KAAK,EAAEC,MAAM,CAACxB,GAAG;QAAE,IAEhCA,GAAG,CACC;MAEX,CAAC,EACDW,MAAM,CACP;IACH;IAEA,OAAOM,KAAK;EACd,CAAC,CAAC;EAEF,oBAAOxB,KAAA,CAAAyB,aAAA,CAACpB,IAAI,EAAKc,KAAK,EAAGC,cAAc,CAAQ;AACjD,CAAC;AACD,MAAMW,MAAM,GAAG3B,gBAAgB,CAAC;EAC9BG,GAAG,EAAE;IAAEyB,kBAAkB,EAAE;EAAY;AACzC,CAAC,CAAC;AACF,eAAelB,aAAa"}

package/lib/typescript/src/components/URLParsedText/index.d.ts

@@ -1,8 +0,0 @@
-import type { TextProps } from '../Text';
-type OnPressUrl = (url: string, httpProtocol: boolean) => void;
-type Props = TextProps & {
-    onPressUrl?: OnPressUrl;
-    strict?: boolean;
-};
-declare const URLParsedText: ({ children, onPressUrl, strict, ...props }: Props) => JSX.Element;
-export default URLParsedText;

package/src/components/URLParsedText/index.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { Linking } from 'react-native';
-
-import { Logger, replaceUrlAsComponents } from '@sendbird/uikit-utils';
-
-import createStyleSheet from '../../styles/createStyleSheet';
-import type { TextProps } from '../Text';
-import Text from '../Text';
-
-type OnPressUrl = (url: string, httpProtocol: boolean) => void;
-
-const openUrl: OnPressUrl = (url, httpProtocol) => {
-  const targetUrl = httpProtocol ? url : 'https://' + url;
-  Linking.openURL(targetUrl).catch((err) => Logger.warn('[URLParsedText]', 'Cannot open url', err));
-};
-
-type Props = TextProps & {
-  onPressUrl?: OnPressUrl;
-  strict?: boolean;
-};
-const URLParsedText = ({ children, onPressUrl = openUrl, strict, ...props }: Props) => {
-  const parsedChildren = React.Children.map(React.Children.toArray(children), (child) => {
-    if (typeof child === 'string') {
-      return replaceUrlAsComponents(
-        child,
-        (url) => {
-          return (
-            <Text
-              {...props}
-              suppressHighlighting
-              onPress={() => onPressUrl?.(url, url.startsWith('http'))}
-              style={[props.style, styles.url]}
-            >
-              {url}
-            </Text>
-          );
-        },
-        strict,
-      );
-    }
-
-    return child;
-  });
-
-  return <Text {...props}>{parsedChildren}</Text>;
-};
-const styles = createStyleSheet({
-  url: { textDecorationLine: 'underline' },
-});
-export default URLParsedText;