@sendbird/uikit-react-native-foundation 3.7.6 → 3.8.1

package/lib/module/ui/OpenChannelMessage/Message.user.og.js

@@ -1,4 +1,4 @@
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
 import { urlRegexRough } from '@sendbird/uikit-utils';
 import Box from '../../components/Box';
@@ -23,41 +23,49 @@ const OpenGraphUserMessage = props => {
   return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(PressBox, {
     onPress: onPress,
     onLongPress: onLongPress
-  }, _ref => {
+  }, ({
+    pressed
+  }) => {
     var _props$strings;
-    let {
-      pressed
-    } = _ref;
     return /*#__PURE__*/React.createElement(MessageContainer, _extends({
       pressed: pressed
-    }, rest), /*#__PURE__*/React.createElement(Text, {
+    }, rest), /*#__PURE__*/React.createElement(Box, {
+      alignItems: 'flex-start'
+    }, /*#__PURE__*/React.createElement(Text, {
       body3: true,
-      color: color.enabled.textMsg
+      color: color.enabled.textMsg,
+      suppressHighlighting: true,
+      supportRTLAlign: true,
+      originalText: props.message.message
     }, /*#__PURE__*/React.createElement(RegexText, {
       body3: true,
+      suppressHighlighting: true,
+      supportRTLAlign: true,
+      originalText: props.message.message,
       color: color.enabled.textMsg,
       patterns: [{
         regex: urlRegexRough,
-        replacer(_ref2) {
-          let {
-            match,
-            parentProps,
-            keyPrefix,
-            index
-          } = _ref2;
+        replacer({
+          match,
+          parentProps,
+          keyPrefix,
+          index
+        }) {
           return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
             key: `${keyPrefix}-${index}`,
             onPress: () => onPressURL === null || onPressURL === void 0 ? void 0 : onPressURL(match),
             onLongPress: onLongPress,
             color: colors.primary,
-            style: parentProps === null || parentProps === void 0 ? void 0 : parentProps.style
+            style: parentProps === null || parentProps === void 0 ? void 0 : parentProps.style,
+            supportRTLAlign: true,
+            originalText: match
           }), match);
         }
       }]
     }, props.message.message), Boolean(props.message.updatedAt) && /*#__PURE__*/React.createElement(Text, {
       body3: true,
       color: color.enabled.textMsgPostfix
-    }, ((_props$strings = props.strings) === null || _props$strings === void 0 ? void 0 : _props$strings.edited) ?? ' (edited)')));
+    }, ((_props$strings = props.strings) === null || _props$strings === void 0 ? void 0 : _props$strings.edited) ?? ' (edited)'))));
   }), props.message.ogMetaData && /*#__PURE__*/React.createElement(MessageContainer, _extends({}, rest, {
     grouped: true
   }), /*#__PURE__*/React.createElement(PressBox, {
@@ -67,36 +75,34 @@ const OpenGraphUserMessage = props => {
       return ((_props$message$ogMeta = props.message.ogMetaData) === null || _props$message$ogMeta === void 0 ? void 0 : _props$message$ogMeta.url) && (onPressURL === null || onPressURL === void 0 ? void 0 : onPressURL(props.message.ogMetaData.url));
     },
     onLongPress: onLongPress
-  }, _ref3 => {
-    let {
-      pressed
-    } = _ref3;
-    return props.message.ogMetaData && /*#__PURE__*/React.createElement(Box, {
-      padding: 8,
-      borderRadius: 8,
-      style: styles.ogContainer,
-      backgroundColor: pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground
-    }, /*#__PURE__*/React.createElement(Text, {
-      numberOfLines: 1,
-      caption2: true,
-      color: colors.onBackground02,
-      style: styles.ogUrl
-    }, props.message.ogMetaData.url), /*#__PURE__*/React.createElement(Text, {
-      numberOfLines: 2,
-      body2: true,
-      color: colors.primary,
-      style: styles.ogTitle
-    }, props.message.ogMetaData.title), Boolean(props.message.ogMetaData.description) && /*#__PURE__*/React.createElement(Text, {
-      numberOfLines: 2,
-      caption2: true,
-      color: colors.onBackground01
-    }, props.message.ogMetaData.description), !!props.message.ogMetaData.defaultImage && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
-      style: styles.ogImage,
-      source: {
-        uri: props.message.ogMetaData.defaultImage.url
-      }
-    }));
-  })));
+  }, ({
+    pressed
+  }) => props.message.ogMetaData && /*#__PURE__*/React.createElement(Box, {
+    padding: 8,
+    borderRadius: 8,
+    style: styles.ogContainer,
+    backgroundColor: pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground,
+    alignItems: 'flex-start'
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    caption2: true,
+    color: colors.onBackground02,
+    style: styles.ogUrl
+  }, props.message.ogMetaData.url), /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 2,
+    body2: true,
+    color: colors.primary,
+    style: styles.ogTitle
+  }, props.message.ogMetaData.title), Boolean(props.message.ogMetaData.description) && /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 2,
+    caption2: true,
+    color: colors.onBackground01
+  }, props.message.ogMetaData.description), !!props.message.ogMetaData.defaultImage && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
+    style: styles.ogImage,
+    source: {
+      uri: props.message.ogMetaData.defaultImage.url
+    }
+  })))));
 };
 const styles = createStyleSheet({
   ogContainer: {

package/lib/module/ui/OpenChannelMessage/Message.user.og.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","urlRegexRough","Box","ImageWithPlaceholder","PressBox","RegexText","Text","createStyleSheet","useUIKitTheme","MessageContainer","OpenGraphUserMessage","props","colors","onPress","onLongPress","onPressURL","rest","color","ui","openChannelMessage","default","createElement","_ref","_props$strings","pressed","_extends","body3","enabled","textMsg","patterns","regex","replacer","_ref2","match","parentProps","keyPrefix","index","key","primary","style","message","Boolean","updatedAt","textMsgPostfix","strings","edited","ogMetaData","grouped","styles","ogContainer","_props$message$ogMeta","url","_ref3","padding","borderRadius","backgroundColor","bubbleBackground","numberOfLines","caption2","onBackground02","ogUrl","body2","ogTitle","title","description","onBackground01","defaultImage","ogImage","source","uri","maxWidth","marginBottom","width","height","marginTop"],"sources":["Message.user.og.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\nimport { urlRegexRough } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport RegexText from '../../components/RegexText';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {};\nconst OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const { onPress, onLongPress, onPressURL, ...rest } = props;\n  const color = colors.ui.openChannelMessage.default;\n\n  return (\n    <Box>\n      <PressBox onPress={onPress} onLongPress={onLongPress}>\n        {({ pressed }) => (\n          <MessageContainer pressed={pressed} {...rest}>\n            <Text body3 color={color.enabled.textMsg}>\n              <RegexText\n                body3\n                color={color.enabled.textMsg}\n                patterns={[\n                  {\n                    regex: urlRegexRough,\n                    replacer({ match, parentProps, keyPrefix, index }) {\n                      return (\n                        <Text\n                          {...parentProps}\n                          key={`${keyPrefix}-${index}`}\n                          onPress={() => onPressURL?.(match)}\n                          onLongPress={onLongPress}\n                          color={colors.primary}\n                          style={parentProps?.style}\n                        >\n                          {match}\n                        </Text>\n                      );\n                    },\n                  },\n                ]}\n              >\n                {props.message.message}\n              </RegexText>\n              {Boolean(props.message.updatedAt) && (\n                <Text body3 color={color.enabled.textMsgPostfix}>\n                  {props.strings?.edited ?? ' (edited)'}\n                </Text>\n              )}\n            </Text>\n          </MessageContainer>\n        )}\n      </PressBox>\n      {props.message.ogMetaData && (\n        <MessageContainer {...rest} grouped>\n          <PressBox\n            style={styles.ogContainer}\n            onPress={() => props.message.ogMetaData?.url && onPressURL?.(props.message.ogMetaData.url)}\n            onLongPress={onLongPress}\n          >\n            {({ pressed }) =>\n              props.message.ogMetaData && (\n                <Box\n                  padding={8}\n                  borderRadius={8}\n                  style={styles.ogContainer}\n                  backgroundColor={pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground}\n                >\n                  <Text numberOfLines={1} caption2 color={colors.onBackground02} style={styles.ogUrl}>\n                    {props.message.ogMetaData.url}\n                  </Text>\n\n                  <Text numberOfLines={2} body2 color={colors.primary} style={styles.ogTitle}>\n                    {props.message.ogMetaData.title}\n                  </Text>\n\n                  {Boolean(props.message.ogMetaData.description) && (\n                    <Text numberOfLines={2} caption2 color={colors.onBackground01}>\n                      {props.message.ogMetaData.description}\n                    </Text>\n                  )}\n\n                  {!!props.message.ogMetaData.defaultImage && (\n                    <ImageWithPlaceholder\n                      style={styles.ogImage}\n                      source={{ uri: props.message.ogMetaData.defaultImage.url }}\n                    />\n                  )}\n                </Box>\n              )\n            }\n          </PressBox>\n        </MessageContainer>\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  ogContainer: {\n    maxWidth: 296,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 8,\n  },\n  ogImage: {\n    width: '100%',\n    height: 156,\n    marginTop: 12,\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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"}
+{"version":3,"names":["React","urlRegexRough","Box","ImageWithPlaceholder","PressBox","RegexText","Text","createStyleSheet","useUIKitTheme","MessageContainer","OpenGraphUserMessage","props","colors","onPress","onLongPress","onPressURL","rest","color","ui","openChannelMessage","default","createElement","pressed","_props$strings","_extends","alignItems","body3","enabled","textMsg","suppressHighlighting","supportRTLAlign","originalText","message","patterns","regex","replacer","match","parentProps","keyPrefix","index","key","primary","style","Boolean","updatedAt","textMsgPostfix","strings","edited","ogMetaData","grouped","styles","ogContainer","_props$message$ogMeta","url","padding","borderRadius","backgroundColor","bubbleBackground","numberOfLines","caption2","onBackground02","ogUrl","body2","ogTitle","title","description","onBackground01","defaultImage","ogImage","source","uri","maxWidth","marginBottom","width","height","marginTop"],"sources":["Message.user.og.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\nimport { urlRegexRough } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport RegexText from '../../components/RegexText';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {};\nconst OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const { onPress, onLongPress, onPressURL, ...rest } = props;\n  const color = colors.ui.openChannelMessage.default;\n\n  return (\n    <Box>\n      <PressBox onPress={onPress} onLongPress={onLongPress}>\n        {({ pressed }) => (\n          <MessageContainer pressed={pressed} {...rest}>\n            <Box alignItems={'flex-start'}>\n              <Text\n                body3\n                color={color.enabled.textMsg}\n                suppressHighlighting\n                supportRTLAlign\n                originalText={props.message.message}\n              >\n                <RegexText\n                  body3\n                  suppressHighlighting\n                  supportRTLAlign\n                  originalText={props.message.message}\n                  color={color.enabled.textMsg}\n                  patterns={[\n                    {\n                      regex: urlRegexRough,\n                      replacer({ match, parentProps, keyPrefix, index }) {\n                        return (\n                          <Text\n                            {...parentProps}\n                            key={`${keyPrefix}-${index}`}\n                            onPress={() => onPressURL?.(match)}\n                            onLongPress={onLongPress}\n                            color={colors.primary}\n                            style={parentProps?.style}\n                            supportRTLAlign\n                            originalText={match}\n                          >\n                            {match}\n                          </Text>\n                        );\n                      },\n                    },\n                  ]}\n                >\n                  {props.message.message}\n                </RegexText>\n                {Boolean(props.message.updatedAt) && (\n                  <Text body3 color={color.enabled.textMsgPostfix}>\n                    {props.strings?.edited ?? ' (edited)'}\n                  </Text>\n                )}\n              </Text>\n            </Box>\n          </MessageContainer>\n        )}\n      </PressBox>\n      {props.message.ogMetaData && (\n        <MessageContainer {...rest} grouped>\n          <PressBox\n            style={styles.ogContainer}\n            onPress={() => props.message.ogMetaData?.url && onPressURL?.(props.message.ogMetaData.url)}\n            onLongPress={onLongPress}\n          >\n            {({ pressed }) =>\n              props.message.ogMetaData && (\n                <Box\n                  padding={8}\n                  borderRadius={8}\n                  style={styles.ogContainer}\n                  backgroundColor={pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground}\n                  alignItems={'flex-start'}\n                >\n                  <Text numberOfLines={1} caption2 color={colors.onBackground02} style={styles.ogUrl}>\n                    {props.message.ogMetaData.url}\n                  </Text>\n\n                  <Text numberOfLines={2} body2 color={colors.primary} style={styles.ogTitle}>\n                    {props.message.ogMetaData.title}\n                  </Text>\n\n                  {Boolean(props.message.ogMetaData.description) && (\n                    <Text numberOfLines={2} caption2 color={colors.onBackground01}>\n                      {props.message.ogMetaData.description}\n                    </Text>\n                  )}\n\n                  {!!props.message.ogMetaData.defaultImage && (\n                    <ImageWithPlaceholder\n                      style={styles.ogImage}\n                      source={{ uri: props.message.ogMetaData.defaultImage.url }}\n                    />\n                  )}\n                </Box>\n              )\n            }\n          </PressBox>\n        </MessageContainer>\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  ogContainer: {\n    maxWidth: 296,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 8,\n  },\n  ogImage: {\n    width: '100%',\n    height: 156,\n    marginTop: 12,\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/OpenChannelMessage/MessageContainer.js

@@ -9,15 +9,14 @@ import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Avatar from '../Avatar';
 import LoadingSpinner from '../LoadingSpinner';
-const MessageContainer = _ref => {
+const MessageContainer = ({
+  children,
+  channel,
+  grouped,
+  pressed,
+  ...props
+}) => {
   var _props$strings, _props$strings2;
-  let {
-    children,
-    channel,
-    grouped,
-    pressed,
-    ...props
-  } = _ref;
   const {
     colors
   } = useUIKitTheme();
@@ -49,11 +48,11 @@ const MessageContainer = _ref => {
   return /*#__PURE__*/React.createElement(Box, {
     flexDirection: 'row',
     paddingVertical: grouped ? 5 : 6,
-    paddingLeft: 12,
-    paddingRight: 12,
+    paddingStart: 12,
+    paddingEnd: 12,
     backgroundColor: pressed ? color.pressed.background : color.enabled.background
   }, /*#__PURE__*/React.createElement(Box, {
-    marginRight: 12
+    marginEnd: 12
   }, !grouped && 'sender' in props.message ? /*#__PURE__*/React.createElement(PressBox, {
     onPress: props.onPressAvatar
   }, /*#__PURE__*/React.createElement(Avatar, {
@@ -71,7 +70,7 @@ const MessageContainer = _ref => {
     alignItems: 'center',
     marginBottom: 2
   }, /*#__PURE__*/React.createElement(Box, {
-    marginRight: 4,
+    marginEnd: 4,
     flexShrink: 1
   }, /*#__PURE__*/React.createElement(Text, {
     caption1: true,
@@ -85,10 +84,9 @@ const MessageContainer = _ref => {
     style: styles.message
   }, children), renderSendingStatus()));
 };
-const SendingStatusContainer = _ref2 => {
-  let {
-    children
-  } = _ref2;
+const SendingStatusContainer = ({
+  children
+}) => {
   return /*#__PURE__*/React.createElement(Box, {
     flexDirection: 'row'
   }, /*#__PURE__*/React.createElement(Box, {

package/lib/module/ui/OpenChannelMessage/MessageContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","SendingStatus","getMessageTimeFormat","Box","Icon","PressBox","Text","createStyleSheet","useUIKitTheme","Avatar","LoadingSpinner","MessageContainer","_ref","_props$strings","_props$strings2","children","channel","grouped","pressed","props","colors","color","ui","openChannelMessage","default","renderSendingStatus","message","sendingStatus","PENDING","createElement","SendingStatusContainer","primary","size","FAILED","icon","error","flexDirection","paddingVertical","paddingLeft","paddingRight","backgroundColor","background","enabled","marginRight","onPress","onPressAvatar","styles","avatar","width","uri","sender","profileUrl","style","flexShrink","flex","alignItems","marginBottom","caption1","ellipsizeMode","numberOfLines","isOperator","userId","textOperator","textSenderName","strings","senderName","nickname","caption4","textTime","sentDate","Date","createdAt","_ref2","marginTop"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendingStatus } from '@sendbird/chat/message';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { getMessageTimeFormat } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\nimport LoadingSpinner from '../LoadingSpinner';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {\n  pressed?: boolean;\n};\n\nconst MessageContainer = ({\n  children,\n  channel,\n  grouped,\n  pressed,\n  ...props\n}: OpenChannelMessageProps<SendbirdMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.openChannelMessage.default;\n\n  const renderSendingStatus = () => {\n    if (!('sendingStatus' in props.message)) return null;\n\n    switch (props.message.sendingStatus) {\n      case SendingStatus.PENDING: {\n        return (\n          <SendingStatusContainer>\n            <LoadingSpinner color={colors.primary} size={16} />\n          </SendingStatusContainer>\n        );\n      }\n      case SendingStatus.FAILED: {\n        return (\n          <SendingStatusContainer>\n            <Icon icon={'error'} color={colors.error} size={16} />\n          </SendingStatusContainer>\n        );\n      }\n      default: {\n        return null;\n      }\n    }\n  };\n\n  return (\n    <Box\n      flexDirection={'row'}\n      paddingVertical={grouped ? 5 : 6}\n      paddingLeft={12}\n      paddingRight={12}\n      backgroundColor={pressed ? color.pressed.background : color.enabled.background}\n    >\n      <Box marginRight={12}>\n        {!grouped && 'sender' in props.message ? (\n          <PressBox onPress={props.onPressAvatar}>\n            <Avatar size={styles.avatar.width} uri={props.message.sender.profileUrl} />\n          </PressBox>\n        ) : (\n          <Box style={styles.avatar} />\n        )}\n      </Box>\n      <Box flexShrink={1} flex={1} flexDirection={'column'} alignItems={'flex-start'}>\n        {!grouped && 'sender' in props.message && (\n          <Box flexDirection={'row'} alignItems={'center'} marginBottom={2}>\n            <Box marginRight={4} flexShrink={1}>\n              <Text\n                caption1\n                ellipsizeMode={'middle'}\n                numberOfLines={1}\n                color={\n                  channel.isOperator(props.message.sender.userId)\n                    ? color.enabled.textOperator\n                    : color.enabled.textSenderName\n                }\n              >\n                {props.strings?.senderName ?? props.message.sender.nickname}\n              </Text>\n            </Box>\n            <Box>\n              <Text caption4 color={color.enabled.textTime}>\n                {props.strings?.sentDate ?? getMessageTimeFormat(new Date(props.message.createdAt))}\n              </Text>\n            </Box>\n          </Box>\n        )}\n        <Box style={styles.message}>{children}</Box>\n\n        {renderSendingStatus()}\n      </Box>\n    </Box>\n  );\n};\n\nconst SendingStatusContainer = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <Box flexDirection={'row'}>\n      <Box marginTop={2}>{children}</Box>\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  avatar: {\n    width: 28,\n  },\n  message: {\n    width: '100%',\n  },\n});\n\nexport default MessageContainer;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,aAAa,QAAQ,wBAAwB;AAEtD,SAASC,oBAAoB,QAAQ,uBAAuB;AAE5D,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,cAAc,MAAM,mBAAmB;AAO9C,MAAMC,gBAAgB,GAAGC,IAAA,IAM8B;EAAA,IAAAC,cAAA,EAAAC,eAAA;EAAA,IAN7B;IACxBC,QAAQ;IACRC,OAAO;IACPC,OAAO;IACPC,OAAO;IACP,GAAGC;EAC4C,CAAC,GAAAP,IAAA;EAChD,MAAM;IAAEQ;EAAO,CAAC,GAAGZ,aAAa,EAAE;EAClC,MAAMa,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,kBAAkB,CAACC,OAAO;EAElD,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;IAChC,IAAI,EAAE,eAAe,IAAIN,KAAK,CAACO,OAAO,CAAC,EAAE,OAAO,IAAI;IAEpD,QAAQP,KAAK,CAACO,OAAO,CAACC,aAAa;MACjC,KAAK1B,aAAa,CAAC2B,OAAO;QAAE;UAC1B,oBACE5B,KAAA,CAAA6B,aAAA,CAACC,sBAAsB,qBACrB9B,KAAA,CAAA6B,aAAA,CAACnB,cAAc;YAACW,KAAK,EAAED,MAAM,CAACW,OAAQ;YAACC,IAAI,EAAE;UAAG,EAAG,CAC5B;QAE7B;MACA,KAAK/B,aAAa,CAACgC,MAAM;QAAE;UACzB,oBACEjC,KAAA,CAAA6B,aAAA,CAACC,sBAAsB,qBACrB9B,KAAA,CAAA6B,aAAA,CAACzB,IAAI;YAAC8B,IAAI,EAAE,OAAQ;YAACb,KAAK,EAAED,MAAM,CAACe,KAAM;YAACH,IAAI,EAAE;UAAG,EAAG,CAC/B;QAE7B;MACA;QAAS;UACP,OAAO,IAAI;QACb;IAAC;EAEL,CAAC;EAED,oBACEhC,KAAA,CAAA6B,aAAA,CAAC1B,GAAG;IACFiC,aAAa,EAAE,KAAM;IACrBC,eAAe,EAAEpB,OAAO,GAAG,CAAC,GAAG,CAAE;IACjCqB,WAAW,EAAE,EAAG;IAChBC,YAAY,EAAE,EAAG;IACjBC,eAAe,EAAEtB,OAAO,GAAGG,KAAK,CAACH,OAAO,CAACuB,UAAU,GAAGpB,KAAK,CAACqB,OAAO,CAACD;EAAW,gBAE/EzC,KAAA,CAAA6B,aAAA,CAAC1B,GAAG;IAACwC,WAAW,EAAE;EAAG,GAClB,CAAC1B,OAAO,IAAI,QAAQ,IAAIE,KAAK,CAACO,OAAO,gBACpC1B,KAAA,CAAA6B,aAAA,CAACxB,QAAQ;IAACuC,OAAO,EAAEzB,KAAK,CAAC0B;EAAc,gBACrC7C,KAAA,CAAA6B,aAAA,CAACpB,MAAM;IAACuB,IAAI,EAAEc,MAAM,CAACC,MAAM,CAACC,KAAM;IAACC,GAAG,EAAE9B,KAAK,CAACO,OAAO,CAACwB,MAAM,CAACC;EAAW,EAAG,CAClE,gBAEXnD,KAAA,CAAA6B,aAAA,CAAC1B,GAAG;IAACiD,KAAK,EAAEN,MAAM,CAACC;EAAO,EAC3B,CACG,eACN/C,KAAA,CAAA6B,aAAA,CAAC1B,GAAG;IAACkD,UAAU,EAAE,CAAE;IAACC,IAAI,EAAE,CAAE;IAAClB,aAAa,EAAE,QAAS;IAACmB,UAAU,EAAE;EAAa,GAC5E,CAACtC,OAAO,IAAI,QAAQ,IAAIE,KAAK,CAACO,OAAO,iBACpC1B,KAAA,CAAA6B,aAAA,CAAC1B,GAAG;IAACiC,aAAa,EAAE,KAAM;IAACmB,UAAU,EAAE,QAAS;IAACC,YAAY,EAAE;EAAE,gBAC/DxD,KAAA,CAAA6B,aAAA,CAAC1B,GAAG;IAACwC,WAAW,EAAE,CAAE;IAACU,UAAU,EAAE;EAAE,gBACjCrD,KAAA,CAAA6B,aAAA,CAACvB,IAAI;IACHmD,QAAQ;IACRC,aAAa,EAAE,QAAS;IACxBC,aAAa,EAAE,CAAE;IACjBtC,KAAK,EACHL,OAAO,CAAC4C,UAAU,CAACzC,KAAK,CAACO,OAAO,CAACwB,MAAM,CAACW,MAAM,CAAC,GAC3CxC,KAAK,CAACqB,OAAO,CAACoB,YAAY,GAC1BzC,KAAK,CAACqB,OAAO,CAACqB;EACnB,GAEA,EAAAlD,cAAA,GAAAM,KAAK,CAAC6C,OAAO,cAAAnD,cAAA,uBAAbA,cAAA,CAAeoD,UAAU,KAAI9C,KAAK,CAACO,OAAO,CAACwB,MAAM,CAACgB,QAAQ,CACtD,CACH,eACNlE,KAAA,CAAA6B,aAAA,CAAC1B,GAAG,qBACFH,KAAA,CAAA6B,aAAA,CAACvB,IAAI;IAAC6D,QAAQ;IAAC9C,KAAK,EAAEA,KAAK,CAACqB,OAAO,CAAC0B;EAAS,GAC1C,EAAAtD,eAAA,GAAAK,KAAK,CAAC6C,OAAO,cAAAlD,eAAA,uBAAbA,eAAA,CAAeuD,QAAQ,KAAInE,oBAAoB,CAAC,IAAIoE,IAAI,CAACnD,KAAK,CAACO,OAAO,CAAC6C,SAAS,CAAC,CAAC,CAC9E,CACH,CAET,eACDvE,KAAA,CAAA6B,aAAA,CAAC1B,GAAG;IAACiD,KAAK,EAAEN,MAAM,CAACpB;EAAQ,GAAEX,QAAQ,CAAO,EAE3CU,mBAAmB,EAAE,CAClB,CACF;AAEV,CAAC;AAED,MAAMK,sBAAsB,GAAG0C,KAAA,IAAiD;EAAA,IAAhD;IAAEzD;EAAwC,CAAC,GAAAyD,KAAA;EACzE,oBACExE,KAAA,CAAA6B,aAAA,CAAC1B,GAAG;IAACiC,aAAa,EAAE;EAAM,gBACxBpC,KAAA,CAAA6B,aAAA,CAAC1B,GAAG;IAACsE,SAAS,EAAE;EAAE,GAAE1D,QAAQ,CAAO,CAC/B;AAEV,CAAC;AAED,MAAM+B,MAAM,GAAGvC,gBAAgB,CAAC;EAC9BwC,MAAM,EAAE;IACNC,KAAK,EAAE;EACT,CAAC;EACDtB,OAAO,EAAE;IACPsB,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,eAAerC,gBAAgB"}
+{"version":3,"names":["React","SendingStatus","getMessageTimeFormat","Box","Icon","PressBox","Text","createStyleSheet","useUIKitTheme","Avatar","LoadingSpinner","MessageContainer","children","channel","grouped","pressed","props","_props$strings","_props$strings2","colors","color","ui","openChannelMessage","default","renderSendingStatus","message","sendingStatus","PENDING","createElement","SendingStatusContainer","primary","size","FAILED","icon","error","flexDirection","paddingVertical","paddingStart","paddingEnd","backgroundColor","background","enabled","marginEnd","onPress","onPressAvatar","styles","avatar","width","uri","sender","profileUrl","style","flexShrink","flex","alignItems","marginBottom","caption1","ellipsizeMode","numberOfLines","isOperator","userId","textOperator","textSenderName","strings","senderName","nickname","caption4","textTime","sentDate","Date","createdAt","marginTop"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendingStatus } from '@sendbird/chat/message';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { getMessageTimeFormat } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\nimport LoadingSpinner from '../LoadingSpinner';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {\n  pressed?: boolean;\n};\n\nconst MessageContainer = ({\n  children,\n  channel,\n  grouped,\n  pressed,\n  ...props\n}: OpenChannelMessageProps<SendbirdMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.openChannelMessage.default;\n\n  const renderSendingStatus = () => {\n    if (!('sendingStatus' in props.message)) return null;\n\n    switch (props.message.sendingStatus) {\n      case SendingStatus.PENDING: {\n        return (\n          <SendingStatusContainer>\n            <LoadingSpinner color={colors.primary} size={16} />\n          </SendingStatusContainer>\n        );\n      }\n      case SendingStatus.FAILED: {\n        return (\n          <SendingStatusContainer>\n            <Icon icon={'error'} color={colors.error} size={16} />\n          </SendingStatusContainer>\n        );\n      }\n      default: {\n        return null;\n      }\n    }\n  };\n\n  return (\n    <Box\n      flexDirection={'row'}\n      paddingVertical={grouped ? 5 : 6}\n      paddingStart={12}\n      paddingEnd={12}\n      backgroundColor={pressed ? color.pressed.background : color.enabled.background}\n    >\n      <Box marginEnd={12}>\n        {!grouped && 'sender' in props.message ? (\n          <PressBox onPress={props.onPressAvatar}>\n            <Avatar size={styles.avatar.width} uri={props.message.sender.profileUrl} />\n          </PressBox>\n        ) : (\n          <Box style={styles.avatar} />\n        )}\n      </Box>\n      <Box flexShrink={1} flex={1} flexDirection={'column'} alignItems={'flex-start'}>\n        {!grouped && 'sender' in props.message && (\n          <Box flexDirection={'row'} alignItems={'center'} marginBottom={2}>\n            <Box marginEnd={4} flexShrink={1}>\n              <Text\n                caption1\n                ellipsizeMode={'middle'}\n                numberOfLines={1}\n                color={\n                  channel.isOperator(props.message.sender.userId)\n                    ? color.enabled.textOperator\n                    : color.enabled.textSenderName\n                }\n              >\n                {props.strings?.senderName ?? props.message.sender.nickname}\n              </Text>\n            </Box>\n            <Box>\n              <Text caption4 color={color.enabled.textTime}>\n                {props.strings?.sentDate ?? getMessageTimeFormat(new Date(props.message.createdAt))}\n              </Text>\n            </Box>\n          </Box>\n        )}\n        <Box style={styles.message}>{children}</Box>\n\n        {renderSendingStatus()}\n      </Box>\n    </Box>\n  );\n};\n\nconst SendingStatusContainer = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <Box flexDirection={'row'}>\n      <Box marginTop={2}>{children}</Box>\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  avatar: {\n    width: 28,\n  },\n  message: {\n    width: '100%',\n  },\n});\n\nexport default MessageContainer;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/OpenChannelMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["AdminMessage","FileMessage","ImageFileMessage","VideoFileMessage","UnknownMessage","UserMessage","OpenGraphUserMessage","OpenChannelMessage","User","OpenGraphUser","File","ImageFile","VideoFile","Admin","Unknown"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdMessage, SendbirdOpenChannel } from '@sendbird/uikit-utils';\n\nimport AdminMessage from './Message.admin';\nimport FileMessage from './Message.file';\nimport ImageFileMessage from './Message.file.image';\nimport VideoFileMessage from './Message.file.video';\nimport UnknownMessage from './Message.unknown';\nimport UserMessage from './Message.user';\nimport OpenGraphUserMessage from './Message.user.og';\n\nexport type OpenChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n  channel: SendbirdOpenChannel;\n  message: T;\n  strings?: {\n    senderName?: string;\n    sentDate?: string;\n    edited?: string;\n    fileName?: string;\n    unknownTitle?: string;\n    unknownDescription?: string;\n  };\n  children?: React.ReactNode;\n  grouped?: boolean;\n  onPress?: () => void;\n  onLongPress?: () => void;\n  onPressAvatar?: () => void;\n  onPressURL?: (url: string) => void;\n} & AdditionalProps;\n\nconst OpenChannelMessage = {\n  User: UserMessage,\n  OpenGraphUser: OpenGraphUserMessage,\n  File: FileMessage,\n  ImageFile: ImageFileMessage,\n  VideoFile: VideoFileMessage,\n  Admin: AdminMessage,\n  Unknown: UnknownMessage,\n};\n\nexport default OpenChannelMessage;\n"],"mappings":"AAIA,OAAOA,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,oBAAoB,MAAM,mBAAmB;AAqBpD,MAAMC,kBAAkB,GAAG;EACzBC,IAAI,EAAEH,WAAW;EACjBI,aAAa,EAAEH,oBAAoB;EACnCI,IAAI,EAAET,WAAW;EACjBU,SAAS,EAAET,gBAAgB;EAC3BU,SAAS,EAAET,gBAAgB;EAC3BU,KAAK,EAAEb,YAAY;EACnBc,OAAO,EAAEV;AACX,CAAC;AAED,eAAeG,kBAAkB"}
+{"version":3,"names":["AdminMessage","FileMessage","ImageFileMessage","VideoFileMessage","UnknownMessage","UserMessage","OpenGraphUserMessage","OpenChannelMessage","User","OpenGraphUser","File","ImageFile","VideoFile","Admin","Unknown"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdMessage, SendbirdOpenChannel } from '@sendbird/uikit-utils';\n\nimport AdminMessage from './Message.admin';\nimport FileMessage from './Message.file';\nimport ImageFileMessage from './Message.file.image';\nimport VideoFileMessage from './Message.file.video';\nimport UnknownMessage from './Message.unknown';\nimport UserMessage from './Message.user';\nimport OpenGraphUserMessage from './Message.user.og';\n\nexport type OpenChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n  channel: SendbirdOpenChannel;\n  message: T;\n  strings?: {\n    senderName?: string;\n    sentDate?: string;\n    edited?: string;\n    fileName?: string;\n    unknownTitle?: string;\n    unknownDescription?: string;\n  };\n  children?: React.ReactNode;\n  grouped?: boolean;\n  onPress?: () => void;\n  onLongPress?: () => void;\n  onPressAvatar?: () => void;\n  onPressURL?: (url: string) => void;\n} & AdditionalProps;\n\nconst OpenChannelMessage = {\n  User: UserMessage,\n  OpenGraphUser: OpenGraphUserMessage,\n  File: FileMessage,\n  ImageFile: ImageFileMessage,\n  VideoFile: VideoFileMessage,\n  Admin: AdminMessage,\n  Unknown: UnknownMessage,\n};\n\nexport default OpenChannelMessage;\n"],"mappings":"AAIA,OAAOA,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,oBAAoB,MAAM,mBAAmB;AAqBpD,MAAMC,kBAAkB,GAAG;EACzBC,IAAI,EAAEH,WAAW;EACjBI,aAAa,EAAEH,oBAAoB;EACnCI,IAAI,EAAET,WAAW;EACjBU,SAAS,EAAET,gBAAgB;EAC3BU,SAAS,EAAET,gBAAgB;EAC3BU,KAAK,EAAEb,YAAY;EACnBc,OAAO,EAAEV;AACX,CAAC;AAED,eAAeG,kBAAkB","ignoreList":[]}

package/lib/module/ui/OpenChannelPreview/index.js

@@ -6,14 +6,13 @@ import Image from '../../components/Image';
 import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-const OpenChannelPreview = _ref => {
-  let {
-    customCover,
-    coverUrl,
-    participantsCount = 0,
-    title,
-    frozen
-  } = _ref;
+const OpenChannelPreview = ({
+  customCover,
+  coverUrl,
+  participantsCount = 0,
+  title,
+  frozen
+}) => {
   const {
     colors
   } = useUIKitTheme();
@@ -30,7 +29,7 @@ const OpenChannelPreview = _ref => {
     height: styles.channelCover.height,
     borderRadius: styles.channelCover.width,
     overflow: 'hidden',
-    marginRight: 16
+    marginEnd: 16
   }, conditionChaining([Boolean(customCover)], [customCover, /*#__PURE__*/React.createElement(Image, {
     resizeMode: 'cover',
     style: [styles.channelCover, {
@@ -57,7 +56,7 @@ const OpenChannelPreview = _ref => {
     size: 16,
     icon: 'freeze',
     color: color.frozenIcon,
-    containerStyle: styles.marginLeft
+    containerStyle: styles.marginStart
   })), /*#__PURE__*/React.createElement(Box, {
     flexDirection: 'row',
     flexShrink: 1,
@@ -70,7 +69,7 @@ const OpenChannelPreview = _ref => {
     size: 16,
     icon: 'members',
     color: color.participantsIcon,
-    containerStyle: styles.marginRight
+    containerStyle: styles.marginEnd
   }), /*#__PURE__*/React.createElement(Text, {
     caption2: true,
     color: color.textParticipants
@@ -78,16 +77,13 @@ const OpenChannelPreview = _ref => {
     color: color.separator
   })));
 };
-const Separator = _ref2 => {
-  let {
-    color
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(Box, {
-    style: [styles.separator, {
-      backgroundColor: color
-    }]
-  });
-};
+const Separator = ({
+  color
+}) => /*#__PURE__*/React.createElement(Box, {
+  style: [styles.separator, {
+    backgroundColor: color
+  }]
+});
 const styles = createStyleSheet({
   channelCover: {
     width: 32,
@@ -96,16 +92,16 @@ const styles = createStyleSheet({
   channelInfoTitle: {
     flexShrink: 1
   },
-  marginRight: {
-    marginRight: 4
+  marginEnd: {
+    marginEnd: 4
   },
-  marginLeft: {
-    marginLeft: 4
+  marginStart: {
+    marginStart: 4
   },
   separator: {
     position: 'absolute',
-    left: 0,
-    right: -16,
+    start: 0,
+    end: -16,
     bottom: 0,
     height: 1
   }

package/lib/module/ui/OpenChannelPreview/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","conditionChaining","truncatedCount","Box","Icon","Image","Text","createStyleSheet","useUIKitTheme","OpenChannelPreview","_ref","customCover","coverUrl","participantsCount","title","frozen","colors","color","ui","openChannelPreview","default","none","createElement","backgroundColor","background","width","height","flexDirection","alignItems","paddingHorizontal","styles","channelCover","borderRadius","overflow","marginRight","Boolean","resizeMode","style","coverBackground","source","uri","flex","justifyContent","flexShrink","marginBottom","subtitle1","channelInfoTitle","numberOfLines","textTitle","size","icon","frozenIcon","containerStyle","marginLeft","participantsIcon","caption2","textParticipants","Separator","separator","_ref2","position","left","right","bottom"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { conditionChaining, truncatedCount } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport Image from '../../components/Image';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = {\n  customCover?: React.ReactNode;\n  coverUrl: string;\n  title: string;\n  participantsCount?: number;\n  frozen?: boolean;\n};\nconst OpenChannelPreview = ({ customCover, coverUrl, participantsCount = 0, title, frozen }: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.openChannelPreview.default.none;\n\n  return (\n    <Box\n      backgroundColor={color.background}\n      width={'100%'}\n      height={62}\n      flexDirection={'row'}\n      alignItems={'center'}\n      paddingHorizontal={16}\n    >\n      <Box\n        width={styles.channelCover.width}\n        height={styles.channelCover.height}\n        borderRadius={styles.channelCover.width}\n        overflow={'hidden'}\n        marginRight={16}\n      >\n        {conditionChaining(\n          [Boolean(customCover)],\n          [\n            customCover,\n            <Image\n              resizeMode={'cover'}\n              style={[styles.channelCover, { backgroundColor: color.coverBackground }]}\n              source={{ uri: coverUrl }}\n            />,\n          ],\n        )}\n      </Box>\n      <Box flex={1} height={'100%'} justifyContent={'center'}>\n        <Box flexDirection={'row'} flexShrink={1} marginBottom={4} alignItems={'center'}>\n          <Text subtitle1 style={styles.channelInfoTitle} numberOfLines={1} color={color.textTitle}>\n            {title}\n          </Text>\n          {frozen && <Icon size={16} icon={'freeze'} color={color.frozenIcon} containerStyle={styles.marginLeft} />}\n        </Box>\n        <Box flexDirection={'row'} flexShrink={1} alignItems={'center'} justifyContent={'flex-start'}>\n          <Box flexDirection={'row'} alignItems={'center'}>\n            <Icon size={16} icon={'members'} color={color.participantsIcon} containerStyle={styles.marginRight} />\n            <Text caption2 color={color.textParticipants}>\n              {truncatedCount(participantsCount, 999)}\n            </Text>\n          </Box>\n        </Box>\n        <Separator color={color.separator} />\n      </Box>\n    </Box>\n  );\n};\n\nconst Separator = ({ color }: { color: string }) => <Box style={[styles.separator, { backgroundColor: color }]} />;\n\nconst styles = createStyleSheet({\n  channelCover: {\n    width: 32,\n    height: 32,\n  },\n  channelInfoTitle: {\n    flexShrink: 1,\n  },\n  marginRight: {\n    marginRight: 4,\n  },\n  marginLeft: {\n    marginLeft: 4,\n  },\n  separator: {\n    position: 'absolute',\n    left: 0,\n    right: -16,\n    bottom: 0,\n    height: 1,\n  },\n});\n\nexport default OpenChannelPreview;\n"],"mappings":"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"}
+{"version":3,"names":["React","conditionChaining","truncatedCount","Box","Icon","Image","Text","createStyleSheet","useUIKitTheme","OpenChannelPreview","customCover","coverUrl","participantsCount","title","frozen","colors","color","ui","openChannelPreview","default","none","createElement","backgroundColor","background","width","height","flexDirection","alignItems","paddingHorizontal","styles","channelCover","borderRadius","overflow","marginEnd","Boolean","resizeMode","style","coverBackground","source","uri","flex","justifyContent","flexShrink","marginBottom","subtitle1","channelInfoTitle","numberOfLines","textTitle","size","icon","frozenIcon","containerStyle","marginStart","participantsIcon","caption2","textParticipants","Separator","separator","position","start","end","bottom"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { conditionChaining, truncatedCount } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport Image from '../../components/Image';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = {\n  customCover?: React.ReactNode;\n  coverUrl: string;\n  title: string;\n  participantsCount?: number;\n  frozen?: boolean;\n};\nconst OpenChannelPreview = ({ customCover, coverUrl, participantsCount = 0, title, frozen }: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.openChannelPreview.default.none;\n\n  return (\n    <Box\n      backgroundColor={color.background}\n      width={'100%'}\n      height={62}\n      flexDirection={'row'}\n      alignItems={'center'}\n      paddingHorizontal={16}\n    >\n      <Box\n        width={styles.channelCover.width}\n        height={styles.channelCover.height}\n        borderRadius={styles.channelCover.width}\n        overflow={'hidden'}\n        marginEnd={16}\n      >\n        {conditionChaining(\n          [Boolean(customCover)],\n          [\n            customCover,\n            <Image\n              resizeMode={'cover'}\n              style={[styles.channelCover, { backgroundColor: color.coverBackground }]}\n              source={{ uri: coverUrl }}\n            />,\n          ],\n        )}\n      </Box>\n      <Box flex={1} height={'100%'} justifyContent={'center'}>\n        <Box flexDirection={'row'} flexShrink={1} marginBottom={4} alignItems={'center'}>\n          <Text subtitle1 style={styles.channelInfoTitle} numberOfLines={1} color={color.textTitle}>\n            {title}\n          </Text>\n          {frozen && <Icon size={16} icon={'freeze'} color={color.frozenIcon} containerStyle={styles.marginStart} />}\n        </Box>\n        <Box flexDirection={'row'} flexShrink={1} alignItems={'center'} justifyContent={'flex-start'}>\n          <Box flexDirection={'row'} alignItems={'center'}>\n            <Icon size={16} icon={'members'} color={color.participantsIcon} containerStyle={styles.marginEnd} />\n            <Text caption2 color={color.textParticipants}>\n              {truncatedCount(participantsCount, 999)}\n            </Text>\n          </Box>\n        </Box>\n        <Separator color={color.separator} />\n      </Box>\n    </Box>\n  );\n};\n\nconst Separator = ({ color }: { color: string }) => <Box style={[styles.separator, { backgroundColor: color }]} />;\n\nconst styles = createStyleSheet({\n  channelCover: {\n    width: 32,\n    height: 32,\n  },\n  channelInfoTitle: {\n    flexShrink: 1,\n  },\n  marginEnd: {\n    marginEnd: 4,\n  },\n  marginStart: {\n    marginStart: 4,\n  },\n  separator: {\n    position: 'absolute',\n    start: 0,\n    end: -16,\n    bottom: 0,\n    height: 1,\n  },\n});\n\nexport default OpenChannelPreview;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/OutlinedButton/index.js

@@ -3,12 +3,11 @@ import { Pressable } from 'react-native';
 import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-const OutlinedButton = _ref => {
-  let {
-    children,
-    onPress,
-    containerStyle
-  } = _ref;
+const OutlinedButton = ({
+  children,
+  onPress,
+  containerStyle
+}) => {
   const {
     colors
   } = useUIKitTheme();

package/lib/module/ui/OutlinedButton/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","Text","createStyleSheet","useUIKitTheme","OutlinedButton","_ref","children","onPress","containerStyle","colors","createElement","style","styles","outlinedButton","borderColor","onBackground01","button","color","numberOfLines","outlinedButtonText","borderRadius","padding","borderWidth","alignItems","justifyContent","textAlign","width"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, StyleProp, ViewStyle } from 'react-native';\n\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype OutlinedButtonProps = {\n  children: string;\n  containerStyle?: StyleProp<ViewStyle>;\n  onPress?: () => void;\n};\n\nconst OutlinedButton = ({ children, onPress, containerStyle }: OutlinedButtonProps) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <Pressable\n      onPress={onPress}\n      style={[styles.outlinedButton, { borderColor: colors.onBackground01 }, containerStyle]}\n    >\n      <Text button color={colors.onBackground01} numberOfLines={1} style={styles.outlinedButtonText}>\n        {children}\n      </Text>\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  outlinedButton: {\n    borderRadius: 4,\n    padding: 16,\n    borderWidth: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  outlinedButtonText: {\n    textAlign: 'center',\n    width: '100%',\n  },\n});\n\nexport default OutlinedButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAA8B,cAAc;AAE9D,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAQrD,MAAMC,cAAc,GAAGC,IAAA,IAAgE;EAAA,IAA/D;IAAEC,QAAQ;IAAEC,OAAO;IAAEC;EAAoC,CAAC,GAAAH,IAAA;EAChF,MAAM;IAAEI;EAAO,CAAC,GAAGN,aAAa,EAAE;EAClC,oBACEJ,KAAA,CAAAW,aAAA,CAACV,SAAS;IACRO,OAAO,EAAEA,OAAQ;IACjBI,KAAK,EAAE,CAACC,MAAM,CAACC,cAAc,EAAE;MAAEC,WAAW,EAAEL,MAAM,CAACM;IAAe,CAAC,EAAEP,cAAc;EAAE,gBAEvFT,KAAA,CAAAW,aAAA,CAACT,IAAI;IAACe,MAAM;IAACC,KAAK,EAAER,MAAM,CAACM,cAAe;IAACG,aAAa,EAAE,CAAE;IAACP,KAAK,EAAEC,MAAM,CAACO;EAAmB,GAC3Fb,QAAQ,CACJ,CACG;AAEhB,CAAC;AAED,MAAMM,MAAM,GAAGV,gBAAgB,CAAC;EAC9BW,cAAc,EAAE;IACdO,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,EAAE;IACXC,WAAW,EAAE,CAAC;IACdC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDL,kBAAkB,EAAE;IAClBM,SAAS,EAAE,QAAQ;IACnBC,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,eAAetB,cAAc"}
+{"version":3,"names":["React","Pressable","Text","createStyleSheet","useUIKitTheme","OutlinedButton","children","onPress","containerStyle","colors","createElement","style","styles","outlinedButton","borderColor","onBackground01","button","color","numberOfLines","outlinedButtonText","borderRadius","padding","borderWidth","alignItems","justifyContent","textAlign","width"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, StyleProp, ViewStyle } from 'react-native';\n\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype OutlinedButtonProps = {\n  children: string;\n  containerStyle?: StyleProp<ViewStyle>;\n  onPress?: () => void;\n};\n\nconst OutlinedButton = ({ children, onPress, containerStyle }: OutlinedButtonProps) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <Pressable\n      onPress={onPress}\n      style={[styles.outlinedButton, { borderColor: colors.onBackground01 }, containerStyle]}\n    >\n      <Text button color={colors.onBackground01} numberOfLines={1} style={styles.outlinedButtonText}>\n        {children}\n      </Text>\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  outlinedButton: {\n    borderRadius: 4,\n    padding: 16,\n    borderWidth: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  outlinedButtonText: {\n    textAlign: 'center',\n    width: '100%',\n  },\n});\n\nexport default OutlinedButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAA8B,cAAc;AAE9D,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAQrD,MAAMC,cAAc,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,OAAO;EAAEC;AAAoC,CAAC,KAAK;EACrF,MAAM;IAAEC;EAAO,CAAC,GAAGL,aAAa,CAAC,CAAC;EAClC,oBACEJ,KAAA,CAAAU,aAAA,CAACT,SAAS;IACRM,OAAO,EAAEA,OAAQ;IACjBI,KAAK,EAAE,CAACC,MAAM,CAACC,cAAc,EAAE;MAAEC,WAAW,EAAEL,MAAM,CAACM;IAAe,CAAC,EAAEP,cAAc;EAAE,gBAEvFR,KAAA,CAAAU,aAAA,CAACR,IAAI;IAACc,MAAM;IAACC,KAAK,EAAER,MAAM,CAACM,cAAe;IAACG,aAAa,EAAE,CAAE;IAACP,KAAK,EAAEC,MAAM,CAACO;EAAmB,GAC3Fb,QACG,CACG,CAAC;AAEhB,CAAC;AAED,MAAMM,MAAM,GAAGT,gBAAgB,CAAC;EAC9BU,cAAc,EAAE;IACdO,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,EAAE;IACXC,WAAW,EAAE,CAAC;IACdC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDL,kBAAkB,EAAE;IAClBM,SAAS,EAAE,QAAQ;IACnBC,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,eAAerB,cAAc","ignoreList":[]}

package/lib/module/ui/Placeholder/index.js

@@ -7,14 +7,13 @@ import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Button from '../Button';
 import LoadingSpinner from '../LoadingSpinner';
-const Placeholder = _ref => {
-  let {
-    icon,
-    loading = false,
-    message = '',
-    errorRetryLabel,
-    onPressRetry
-  } = _ref;
+const Placeholder = ({
+  icon,
+  loading = false,
+  message = '',
+  errorRetryLabel,
+  onPressRetry
+}) => {
   const {
     colors
   } = useUIKitTheme();

package/lib/module/ui/Placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","conditionChaining","Icon","Text","createStyleSheet","useUIKitTheme","Button","LoadingSpinner","Placeholder","_ref","icon","loading","message","errorRetryLabel","onPressRetry","colors","createElement","style","styles","containerLoading","containerError","container","size","color","ui","placeholder","default","none","highlight","content","Boolean","body3","variant","onPress","contentColor","width","height","alignItems","justifyContent"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport LoadingSpinner from '../LoadingSpinner';\n\ntype Props = {\n  loading?: boolean;\n\n  icon: keyof typeof Icon.Assets;\n  message?: string;\n  errorRetryLabel?: string;\n  onPressRetry?: () => void;\n};\n\nconst Placeholder = ({ icon, loading = false, message = '', errorRetryLabel, onPressRetry }: Props) => {\n  const { colors } = useUIKitTheme();\n\n  // loading ? styles.containerLoading : errorRetryLabel ? styles.containerError : styles.container\n  return (\n    <View\n      style={conditionChaining(\n        [loading, errorRetryLabel],\n        [styles.containerLoading, styles.containerError, styles.container],\n      )}\n    >\n      {conditionChaining(\n        [loading],\n        [\n          <LoadingSpinner size={64} color={colors.ui.placeholder.default.none.highlight} />,\n          <Icon icon={icon} size={64} color={colors.ui.placeholder.default.none.content} />,\n        ],\n      )}\n      {Boolean(message) && !loading && (\n        <Text body3 color={colors.ui.placeholder.default.none.content}>\n          {message}\n        </Text>\n      )}\n      {Boolean(errorRetryLabel) && !loading && (\n        <Button\n          variant={'text'}\n          onPress={onPressRetry}\n          contentColor={colors.ui.placeholder.default.none.highlight}\n          icon={'refresh'}\n        >\n          {errorRetryLabel}\n        </Button>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 200,\n    height: 100,\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  containerError: {\n    width: 200,\n    height: 148,\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  containerLoading: {\n    width: 200,\n    height: 100,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport default Placeholder;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,iBAAiB,QAAQ,uBAAuB;AAEzD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,cAAc,MAAM,mBAAmB;AAW9C,MAAMC,WAAW,GAAGC,IAAA,IAAmF;EAAA,IAAlF;IAAEC,IAAI;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO,GAAG,EAAE;IAAEC,eAAe;IAAEC;EAAoB,CAAC,GAAAL,IAAA;EAChG,MAAM;IAAEM;EAAO,CAAC,GAAGV,aAAa,EAAE;;EAElC;EACA,oBACEN,KAAA,CAAAiB,aAAA,CAAChB,IAAI;IACHiB,KAAK,EAAEhB,iBAAiB,CACtB,CAACU,OAAO,EAAEE,eAAe,CAAC,EAC1B,CAACK,MAAM,CAACC,gBAAgB,EAAED,MAAM,CAACE,cAAc,EAAEF,MAAM,CAACG,SAAS,CAAC;EAClE,GAEDpB,iBAAiB,CAChB,CAACU,OAAO,CAAC,EACT,cACEZ,KAAA,CAAAiB,aAAA,CAACT,cAAc;IAACe,IAAI,EAAE,EAAG;IAACC,KAAK,EAAER,MAAM,CAACS,EAAE,CAACC,WAAW,CAACC,OAAO,CAACC,IAAI,CAACC;EAAU,EAAG,eACjF7B,KAAA,CAAAiB,aAAA,CAACd,IAAI;IAACQ,IAAI,EAAEA,IAAK;IAACY,IAAI,EAAE,EAAG;IAACC,KAAK,EAAER,MAAM,CAACS,EAAE,CAACC,WAAW,CAACC,OAAO,CAACC,IAAI,CAACE;EAAQ,EAAG,CAClF,CACF,EACAC,OAAO,CAAClB,OAAO,CAAC,IAAI,CAACD,OAAO,iBAC3BZ,KAAA,CAAAiB,aAAA,CAACb,IAAI;IAAC4B,KAAK;IAACR,KAAK,EAAER,MAAM,CAACS,EAAE,CAACC,WAAW,CAACC,OAAO,CAACC,IAAI,CAACE;EAAQ,GAC3DjB,OAAO,CAEX,EACAkB,OAAO,CAACjB,eAAe,CAAC,IAAI,CAACF,OAAO,iBACnCZ,KAAA,CAAAiB,aAAA,CAACV,MAAM;IACL0B,OAAO,EAAE,MAAO;IAChBC,OAAO,EAAEnB,YAAa;IACtBoB,YAAY,EAAEnB,MAAM,CAACS,EAAE,CAACC,WAAW,CAACC,OAAO,CAACC,IAAI,CAACC,SAAU;IAC3DlB,IAAI,EAAE;EAAU,GAEfG,eAAe,CAEnB,CACI;AAEX,CAAC;AAED,MAAMK,MAAM,GAAGd,gBAAgB,CAAC;EAC9BiB,SAAS,EAAE;IACTc,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDlB,cAAc,EAAE;IACde,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDnB,gBAAgB,EAAE;IAChBgB,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,eAAe9B,WAAW"}
+{"version":3,"names":["React","View","conditionChaining","Icon","Text","createStyleSheet","useUIKitTheme","Button","LoadingSpinner","Placeholder","icon","loading","message","errorRetryLabel","onPressRetry","colors","createElement","style","styles","containerLoading","containerError","container","size","color","ui","placeholder","default","none","highlight","content","Boolean","body3","variant","onPress","contentColor","width","height","alignItems","justifyContent"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport LoadingSpinner from '../LoadingSpinner';\n\ntype Props = {\n  loading?: boolean;\n\n  icon: keyof typeof Icon.Assets;\n  message?: string;\n  errorRetryLabel?: string;\n  onPressRetry?: () => void;\n};\n\nconst Placeholder = ({ icon, loading = false, message = '', errorRetryLabel, onPressRetry }: Props) => {\n  const { colors } = useUIKitTheme();\n\n  // loading ? styles.containerLoading : errorRetryLabel ? styles.containerError : styles.container\n  return (\n    <View\n      style={conditionChaining(\n        [loading, errorRetryLabel],\n        [styles.containerLoading, styles.containerError, styles.container],\n      )}\n    >\n      {conditionChaining(\n        [loading],\n        [\n          <LoadingSpinner size={64} color={colors.ui.placeholder.default.none.highlight} />,\n          <Icon icon={icon} size={64} color={colors.ui.placeholder.default.none.content} />,\n        ],\n      )}\n      {Boolean(message) && !loading && (\n        <Text body3 color={colors.ui.placeholder.default.none.content}>\n          {message}\n        </Text>\n      )}\n      {Boolean(errorRetryLabel) && !loading && (\n        <Button\n          variant={'text'}\n          onPress={onPressRetry}\n          contentColor={colors.ui.placeholder.default.none.highlight}\n          icon={'refresh'}\n        >\n          {errorRetryLabel}\n        </Button>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 200,\n    height: 100,\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  containerError: {\n    width: 200,\n    height: 148,\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  containerLoading: {\n    width: 200,\n    height: 100,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport default Placeholder;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,iBAAiB,QAAQ,uBAAuB;AAEzD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,cAAc,MAAM,mBAAmB;AAW9C,MAAMC,WAAW,GAAGA,CAAC;EAAEC,IAAI;EAAEC,OAAO,GAAG,KAAK;EAAEC,OAAO,GAAG,EAAE;EAAEC,eAAe;EAAEC;AAAoB,CAAC,KAAK;EACrG,MAAM;IAAEC;EAAO,CAAC,GAAGT,aAAa,CAAC,CAAC;;EAElC;EACA,oBACEN,KAAA,CAAAgB,aAAA,CAACf,IAAI;IACHgB,KAAK,EAAEf,iBAAiB,CACtB,CAACS,OAAO,EAAEE,eAAe,CAAC,EAC1B,CAACK,MAAM,CAACC,gBAAgB,EAAED,MAAM,CAACE,cAAc,EAAEF,MAAM,CAACG,SAAS,CACnE;EAAE,GAEDnB,iBAAiB,CAChB,CAACS,OAAO,CAAC,EACT,cACEX,KAAA,CAAAgB,aAAA,CAACR,cAAc;IAACc,IAAI,EAAE,EAAG;IAACC,KAAK,EAAER,MAAM,CAACS,EAAE,CAACC,WAAW,CAACC,OAAO,CAACC,IAAI,CAACC;EAAU,CAAE,CAAC,eACjF5B,KAAA,CAAAgB,aAAA,CAACb,IAAI;IAACO,IAAI,EAAEA,IAAK;IAACY,IAAI,EAAE,EAAG;IAACC,KAAK,EAAER,MAAM,CAACS,EAAE,CAACC,WAAW,CAACC,OAAO,CAACC,IAAI,CAACE;EAAQ,CAAE,CAAC,CAErF,CAAC,EACAC,OAAO,CAAClB,OAAO,CAAC,IAAI,CAACD,OAAO,iBAC3BX,KAAA,CAAAgB,aAAA,CAACZ,IAAI;IAAC2B,KAAK;IAACR,KAAK,EAAER,MAAM,CAACS,EAAE,CAACC,WAAW,CAACC,OAAO,CAACC,IAAI,CAACE;EAAQ,GAC3DjB,OACG,CACP,EACAkB,OAAO,CAACjB,eAAe,CAAC,IAAI,CAACF,OAAO,iBACnCX,KAAA,CAAAgB,aAAA,CAACT,MAAM;IACLyB,OAAO,EAAE,MAAO;IAChBC,OAAO,EAAEnB,YAAa;IACtBoB,YAAY,EAAEnB,MAAM,CAACS,EAAE,CAACC,WAAW,CAACC,OAAO,CAACC,IAAI,CAACC,SAAU;IAC3DlB,IAAI,EAAE;EAAU,GAEfG,eACK,CAEN,CAAC;AAEX,CAAC;AAED,MAAMK,MAAM,GAAGb,gBAAgB,CAAC;EAC9BgB,SAAS,EAAE;IACTc,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDlB,cAAc,EAAE;IACde,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDnB,gBAAgB,EAAE;IAChBgB,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,eAAe7B,WAAW","ignoreList":[]}

package/lib/module/ui/ProfileCard/index.js

@@ -5,15 +5,14 @@ import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Avatar from '../Avatar';
-const ProfileCard = _ref => {
-  let {
-    uri,
-    username,
-    bodyLabel,
-    body,
-    button,
-    containerStyle
-  } = _ref;
+const ProfileCard = ({
+  uri,
+  username,
+  bodyLabel,
+  body,
+  button,
+  containerStyle
+}) => {
   const {
     colors
   } = useUIKitTheme();
@@ -62,6 +61,7 @@ const styles = createStyleSheet({
     marginBottom: 8
   },
   profileInfoContainer: {
+    alignItems: 'flex-start',
     padding: 16
   },
   profileInfoBodyLabel: {

package/lib/module/ui/ProfileCard/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Divider","Text","createStyleSheet","useUIKitTheme","Avatar","ProfileCard","_ref","uri","username","bodyLabel","body","button","containerStyle","colors","color","ui","profileCard","default","none","createElement","style","styles","container","backgroundColor","background","profileContainer","size","profileAvatar","h1","textUsername","numberOfLines","messageButtonArea","space","profileInfoContainer","body2","textBodyLabel","profileInfoBodyLabel","body3","textBody","paddingTop","width","alignItems","paddingHorizontal","marginBottom","padding","marginHorizontal"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport Divider from '../../components/Divider';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\n\ntype Props = {\n  uri: string;\n  username: string;\n\n  button?: ReactNode;\n\n  bodyLabel: string;\n  body: string;\n\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst ProfileCard = ({ uri, username, bodyLabel, body, button, containerStyle }: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.profileCard.default.none;\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }, containerStyle]}>\n      <View style={styles.profileContainer}>\n        <Avatar uri={uri} size={80} containerStyle={styles.profileAvatar} />\n        <Text h1 color={color.textUsername} numberOfLines={1}>\n          {username}\n        </Text>\n      </View>\n      {button && <View style={styles.messageButtonArea}>{button}</View>}\n      <Divider space={16} />\n      <View style={styles.profileInfoContainer}>\n        <Text body2 color={color.textBodyLabel} style={styles.profileInfoBodyLabel}>\n          {bodyLabel}\n        </Text>\n        <Text body3 numberOfLines={1} color={color.textBody}>\n          {body}\n        </Text>\n      </View>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 32,\n    width: '100%',\n  },\n  profileContainer: {\n    alignItems: 'center',\n    paddingHorizontal: 16,\n    marginBottom: 24,\n  },\n  profileAvatar: {\n    marginBottom: 8,\n  },\n  profileInfoContainer: {\n    padding: 16,\n  },\n  profileInfoBodyLabel: {\n    marginBottom: 4,\n  },\n  messageButtonArea: {\n    marginHorizontal: 24,\n    marginBottom: 24,\n  },\n});\n\nexport default ProfileCard;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AACxC,SAAoBC,IAAI,QAAmB,cAAc;AAEzD,OAAOC,OAAO,MAAM,0BAA0B;AAC9C,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,MAAM,MAAM,WAAW;AAc9B,MAAMC,WAAW,GAAGC,IAAA,IAAuE;EAAA,IAAtE;IAAEC,GAAG;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,IAAI;IAAEC,MAAM;IAAEC;EAAsB,CAAC,GAAAN,IAAA;EACpF,MAAM;IAAEO;EAAO,CAAC,GAAGV,aAAa,EAAE;EAClC,MAAMW,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,WAAW,CAACC,OAAO,CAACC,IAAI;EAEhD,oBACEpB,KAAA,CAAAqB,aAAA,CAACpB,IAAI;IAACqB,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAET,KAAK,CAACU;IAAW,CAAC,EAAEZ,cAAc;EAAE,gBACrFd,KAAA,CAAAqB,aAAA,CAACpB,IAAI;IAACqB,KAAK,EAAEC,MAAM,CAACI;EAAiB,gBACnC3B,KAAA,CAAAqB,aAAA,CAACf,MAAM;IAACG,GAAG,EAAEA,GAAI;IAACmB,IAAI,EAAE,EAAG;IAACd,cAAc,EAAES,MAAM,CAACM;EAAc,EAAG,eACpE7B,KAAA,CAAAqB,aAAA,CAAClB,IAAI;IAAC2B,EAAE;IAACd,KAAK,EAAEA,KAAK,CAACe,YAAa;IAACC,aAAa,EAAE;EAAE,GAClDtB,QAAQ,CACJ,CACF,EACNG,MAAM,iBAAIb,KAAA,CAAAqB,aAAA,CAACpB,IAAI;IAACqB,KAAK,EAAEC,MAAM,CAACU;EAAkB,GAAEpB,MAAM,CAAQ,eACjEb,KAAA,CAAAqB,aAAA,CAACnB,OAAO;IAACgC,KAAK,EAAE;EAAG,EAAG,eACtBlC,KAAA,CAAAqB,aAAA,CAACpB,IAAI;IAACqB,KAAK,EAAEC,MAAM,CAACY;EAAqB,gBACvCnC,KAAA,CAAAqB,aAAA,CAAClB,IAAI;IAACiC,KAAK;IAACpB,KAAK,EAAEA,KAAK,CAACqB,aAAc;IAACf,KAAK,EAAEC,MAAM,CAACe;EAAqB,GACxE3B,SAAS,CACL,eACPX,KAAA,CAAAqB,aAAA,CAAClB,IAAI;IAACoC,KAAK;IAACP,aAAa,EAAE,CAAE;IAAChB,KAAK,EAAEA,KAAK,CAACwB;EAAS,GACjD5B,IAAI,CACA,CACF,CACF;AAEX,CAAC;AAED,MAAMW,MAAM,GAAGnB,gBAAgB,CAAC;EAC9BoB,SAAS,EAAE;IACTiB,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE;EACT,CAAC;EACDf,gBAAgB,EAAE;IAChBgB,UAAU,EAAE,QAAQ;IACpBC,iBAAiB,EAAE,EAAE;IACrBC,YAAY,EAAE;EAChB,CAAC;EACDhB,aAAa,EAAE;IACbgB,YAAY,EAAE;EAChB,CAAC;EACDV,oBAAoB,EAAE;IACpBW,OAAO,EAAE;EACX,CAAC;EACDR,oBAAoB,EAAE;IACpBO,YAAY,EAAE;EAChB,CAAC;EACDZ,iBAAiB,EAAE;IACjBc,gBAAgB,EAAE,EAAE;IACpBF,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAetC,WAAW"}
+{"version":3,"names":["React","View","Divider","Text","createStyleSheet","useUIKitTheme","Avatar","ProfileCard","uri","username","bodyLabel","body","button","containerStyle","colors","color","ui","profileCard","default","none","createElement","style","styles","container","backgroundColor","background","profileContainer","size","profileAvatar","h1","textUsername","numberOfLines","messageButtonArea","space","profileInfoContainer","body2","textBodyLabel","profileInfoBodyLabel","body3","textBody","paddingTop","width","alignItems","paddingHorizontal","marginBottom","padding","marginHorizontal"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport Divider from '../../components/Divider';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\n\ntype Props = {\n  uri: string;\n  username: string;\n\n  button?: ReactNode;\n\n  bodyLabel: string;\n  body: string;\n\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst ProfileCard = ({ uri, username, bodyLabel, body, button, containerStyle }: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.profileCard.default.none;\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }, containerStyle]}>\n      <View style={styles.profileContainer}>\n        <Avatar uri={uri} size={80} containerStyle={styles.profileAvatar} />\n        <Text h1 color={color.textUsername} numberOfLines={1}>\n          {username}\n        </Text>\n      </View>\n      {button && <View style={styles.messageButtonArea}>{button}</View>}\n      <Divider space={16} />\n      <View style={styles.profileInfoContainer}>\n        <Text body2 color={color.textBodyLabel} style={styles.profileInfoBodyLabel}>\n          {bodyLabel}\n        </Text>\n        <Text body3 numberOfLines={1} color={color.textBody}>\n          {body}\n        </Text>\n      </View>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 32,\n    width: '100%',\n  },\n  profileContainer: {\n    alignItems: 'center',\n    paddingHorizontal: 16,\n    marginBottom: 24,\n  },\n  profileAvatar: {\n    marginBottom: 8,\n  },\n  profileInfoContainer: {\n    alignItems: 'flex-start',\n    padding: 16,\n  },\n  profileInfoBodyLabel: {\n    marginBottom: 4,\n  },\n  messageButtonArea: {\n    marginHorizontal: 24,\n    marginBottom: 24,\n  },\n});\n\nexport default ProfileCard;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AACxC,SAAoBC,IAAI,QAAmB,cAAc;AAEzD,OAAOC,OAAO,MAAM,0BAA0B;AAC9C,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,MAAM,MAAM,WAAW;AAc9B,MAAMC,WAAW,GAAGA,CAAC;EAAEC,GAAG;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,IAAI;EAAEC,MAAM;EAAEC;AAAsB,CAAC,KAAK;EACzF,MAAM;IAAEC;EAAO,CAAC,GAAGT,aAAa,CAAC,CAAC;EAClC,MAAMU,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,WAAW,CAACC,OAAO,CAACC,IAAI;EAEhD,oBACEnB,KAAA,CAAAoB,aAAA,CAACnB,IAAI;IAACoB,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAET,KAAK,CAACU;IAAW,CAAC,EAAEZ,cAAc;EAAE,gBACrFb,KAAA,CAAAoB,aAAA,CAACnB,IAAI;IAACoB,KAAK,EAAEC,MAAM,CAACI;EAAiB,gBACnC1B,KAAA,CAAAoB,aAAA,CAACd,MAAM;IAACE,GAAG,EAAEA,GAAI;IAACmB,IAAI,EAAE,EAAG;IAACd,cAAc,EAAES,MAAM,CAACM;EAAc,CAAE,CAAC,eACpE5B,KAAA,CAAAoB,aAAA,CAACjB,IAAI;IAAC0B,EAAE;IAACd,KAAK,EAAEA,KAAK,CAACe,YAAa;IAACC,aAAa,EAAE;EAAE,GAClDtB,QACG,CACF,CAAC,EACNG,MAAM,iBAAIZ,KAAA,CAAAoB,aAAA,CAACnB,IAAI;IAACoB,KAAK,EAAEC,MAAM,CAACU;EAAkB,GAAEpB,MAAa,CAAC,eACjEZ,KAAA,CAAAoB,aAAA,CAAClB,OAAO;IAAC+B,KAAK,EAAE;EAAG,CAAE,CAAC,eACtBjC,KAAA,CAAAoB,aAAA,CAACnB,IAAI;IAACoB,KAAK,EAAEC,MAAM,CAACY;EAAqB,gBACvClC,KAAA,CAAAoB,aAAA,CAACjB,IAAI;IAACgC,KAAK;IAACpB,KAAK,EAAEA,KAAK,CAACqB,aAAc;IAACf,KAAK,EAAEC,MAAM,CAACe;EAAqB,GACxE3B,SACG,CAAC,eACPV,KAAA,CAAAoB,aAAA,CAACjB,IAAI;IAACmC,KAAK;IAACP,aAAa,EAAE,CAAE;IAAChB,KAAK,EAAEA,KAAK,CAACwB;EAAS,GACjD5B,IACG,CACF,CACF,CAAC;AAEX,CAAC;AAED,MAAMW,MAAM,GAAGlB,gBAAgB,CAAC;EAC9BmB,SAAS,EAAE;IACTiB,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE;EACT,CAAC;EACDf,gBAAgB,EAAE;IAChBgB,UAAU,EAAE,QAAQ;IACpBC,iBAAiB,EAAE,EAAE;IACrBC,YAAY,EAAE;EAChB,CAAC;EACDhB,aAAa,EAAE;IACbgB,YAAY,EAAE;EAChB,CAAC;EACDV,oBAAoB,EAAE;IACpBQ,UAAU,EAAE,YAAY;IACxBG,OAAO,EAAE;EACX,CAAC;EACDR,oBAAoB,EAAE;IACpBO,YAAY,EAAE;EAChB,CAAC;EACDZ,iBAAiB,EAAE;IACjBc,gBAAgB,EAAE,EAAE;IACpBF,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAerC,WAAW","ignoreList":[]}