@sendbird/uikit-react-native-foundation 3.1.2 → 3.3.0

package/lib/module/ui/GroupChannelMessage/Message.file.voice.js

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import { millsToMSS } from '@sendbird/uikit-utils';
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import PressBox from '../../components/PressBox';
+import ProgressBar from '../../components/ProgressBar';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import LoadingSpinner from '../LoadingSpinner';
+import MessageContainer from './MessageContainer';
+const VoiceFileMessage = props => {
+  const {
+    onLongPress,
+    variant = 'incoming',
+    onToggleVoiceMessage,
+    message,
+    durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
+    onUnmount
+  } = props;
+  const {
+    colors
+  } = useUIKitTheme();
+  const [state, setState] = useState(() => {
+    var _meta$value;
+    const meta = message.metaArrays.find(it => it.key === durationMetaArrayKey);
+    const value = meta === null || meta === void 0 ? void 0 : (_meta$value = meta.value) === null || _meta$value === void 0 ? void 0 : _meta$value[0];
+    const initialDuration = value ? parseInt(value, 10) : 0;
+    return {
+      status: 'paused',
+      currentTime: 0,
+      duration: initialDuration
+    };
+  });
+  useEffect(() => {
+    return () => {
+      onUnmount();
+    };
+  }, []);
+  const uiColors = colors.ui.groupChannelMessage[variant];
+  const remainingTime = state.duration - state.currentTime;
+  return /*#__PURE__*/React.createElement(MessageContainer, props, /*#__PURE__*/React.createElement(Box, {
+    style: styles.container,
+    backgroundColor: uiColors.enabled.background
+  }, /*#__PURE__*/React.createElement(PressBox, {
+    onPress: () => onToggleVoiceMessage === null || onToggleVoiceMessage === void 0 ? void 0 : onToggleVoiceMessage(state, setState),
+    onLongPress: onLongPress
+  }, /*#__PURE__*/React.createElement(ProgressBar, {
+    current: state.currentTime,
+    total: state.duration,
+    style: {
+      minWidth: 136,
+      height: 44
+    },
+    trackColor: uiColors.enabled.voiceProgressTrack,
+    overlay: /*#__PURE__*/React.createElement(Box, {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 12
+    }, state.status === 'preparing' ? /*#__PURE__*/React.createElement(LoadingSpinner, {
+      size: 24,
+      color: uiColors.enabled.voiceSpinner
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      size: 16,
+      containerStyle: {
+        backgroundColor: uiColors.enabled.voiceActionIconBackground,
+        padding: 6,
+        borderRadius: 16
+      },
+      icon: state.status === 'paused' ? 'play' : 'pause'
+    }), /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      style: {
+        lineHeight: undefined,
+        marginLeft: 6,
+        opacity: 0.88
+      },
+      color: uiColors.enabled.textVoicePlaytime
+    }, millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)))
+  })), props.children));
+};
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  image: {
+    maxWidth: 240,
+    width: 240,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden'
+  }
+});
+export default VoiceFileMessage;
+//# sourceMappingURL=Message.file.voice.js.map

package/lib/module/ui/GroupChannelMessage/Message.file.voice.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","millsToMSS","Box","Icon","PressBox","ProgressBar","Text","createStyleSheet","useUIKitTheme","LoadingSpinner","MessageContainer","VoiceFileMessage","props","onLongPress","variant","onToggleVoiceMessage","message","durationMetaArrayKey","onUnmount","colors","state","setState","_meta$value","meta","metaArrays","find","it","key","value","initialDuration","parseInt","status","currentTime","duration","uiColors","ui","groupChannelMessage","remainingTime","createElement","style","styles","container","backgroundColor","enabled","background","onPress","current","total","minWidth","height","trackColor","voiceProgressTrack","overlay","flex","flexDirection","alignItems","justifyContent","paddingHorizontal","size","color","voiceSpinner","containerStyle","voiceActionIconBackground","padding","borderRadius","icon","body3","lineHeight","undefined","marginLeft","opacity","textVoicePlaytime","children","overflow","image","maxWidth","width"],"sources":["Message.file.voice.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { millsToMSS } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport ProgressBar from '../../components/ProgressBar';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport LoadingSpinner from '../LoadingSpinner';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\nexport type VoiceFileMessageState = {\n  status: 'preparing' | 'playing' | 'paused';\n  currentTime: number;\n  duration: number;\n};\n\ntype Props = GroupChannelMessageProps<\n  SendbirdFileMessage,\n  {\n    durationMetaArrayKey?: string;\n    onUnmount: () => void;\n  }\n>;\nconst VoiceFileMessage = (props: Props) => {\n  const {\n    onLongPress,\n    variant = 'incoming',\n    onToggleVoiceMessage,\n    message,\n    durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',\n    onUnmount,\n  } = props;\n\n  const { colors } = useUIKitTheme();\n\n  const [state, setState] = useState<VoiceFileMessageState>(() => {\n    const meta = message.metaArrays.find((it) => it.key === durationMetaArrayKey);\n    const value = meta?.value?.[0];\n    const initialDuration = value ? parseInt(value, 10) : 0;\n    return {\n      status: 'paused',\n      currentTime: 0,\n      duration: initialDuration,\n    };\n  });\n\n  useEffect(() => {\n    return () => {\n      onUnmount();\n    };\n  }, []);\n\n  const uiColors = colors.ui.groupChannelMessage[variant];\n  const remainingTime = state.duration - state.currentTime;\n\n  return (\n    <MessageContainer {...props}>\n      <Box style={styles.container} backgroundColor={uiColors.enabled.background}>\n        <PressBox onPress={() => onToggleVoiceMessage?.(state, setState)} onLongPress={onLongPress}>\n          <ProgressBar\n            current={state.currentTime}\n            total={state.duration}\n            style={{ minWidth: 136, height: 44 }}\n            trackColor={uiColors.enabled.voiceProgressTrack}\n            overlay={\n              <Box\n                flex={1}\n                flexDirection={'row'}\n                alignItems={'center'}\n                justifyContent={'space-between'}\n                paddingHorizontal={12}\n              >\n                {state.status === 'preparing' ? (\n                  <LoadingSpinner size={24} color={uiColors.enabled.voiceSpinner} />\n                ) : (\n                  <Icon\n                    size={16}\n                    containerStyle={{\n                      backgroundColor: uiColors.enabled.voiceActionIconBackground,\n                      padding: 6,\n                      borderRadius: 16,\n                    }}\n                    icon={state.status === 'paused' ? 'play' : 'pause'}\n                  />\n                )}\n                <Text\n                  body3\n                  style={{ lineHeight: undefined, marginLeft: 6, opacity: 0.88 }}\n                  color={uiColors.enabled.textVoicePlaytime}\n                >\n                  {millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)}\n                </Text>\n              </Box>\n            }\n          />\n        </PressBox>\n        {props.children}\n      </Box>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  image: {\n    maxWidth: 240,\n    width: 240,\n    height: 160,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n});\n\nexport default VoiceFileMessage;\n"],"mappings":"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"}

package/lib/module/ui/GroupChannelMessage/Message.unknown.js

@@ -12,7 +12,7 @@ const UnknownMessage = props => {
   const {
     colors
   } = useUIKitTheme();
-  const color = colors.ui.groupChannelMessage['incoming'];
+  const color = colors.ui.groupChannelMessage[variant];
   const titleColor = variant === 'incoming' ? colors.onBackground01 : colors.onBackgroundReverse01;
   const descColor = variant === 'incoming' ? colors.onBackground02 : colors.onBackgroundReverse02;
   return /*#__PURE__*/React.createElement(MessageContainer, props, /*#__PURE__*/React.createElement(PressBox, {

package/lib/module/ui/GroupChannelMessage/Message.unknown.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Box","PressBox","Text","createStyleSheet","useUIKitTheme","MessageContainer","UnknownMessage","props","variant","colors","color","ui","groupChannelMessage","titleColor","onBackground01","onBackgroundReverse01","descColor","onBackground02","onBackgroundReverse02","createElement","onPress","onLongPress","_ref","_props$strings","_props$strings2","pressed","style","styles","bubble","backgroundColor","background","enabled","body3","strings","unknownTitle","unknownDescription","paddingVertical","paddingHorizontal","borderRadius"],"sources":["Message.unknown.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\nconst UnknownMessage = (props: GroupChannelMessageProps<SendbirdMessage>) => {\n  const { variant = 'incoming' } = props;\n\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage['incoming'];\n  const titleColor = variant === 'incoming' ? colors.onBackground01 : colors.onBackgroundReverse01;\n  const descColor = variant === 'incoming' ? colors.onBackground02 : colors.onBackgroundReverse02;\n\n  return (\n    <MessageContainer {...props}>\n      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>\n        {({ pressed }) => (\n          <Box style={styles.bubble} backgroundColor={pressed ? color.pressed.background : color.enabled.background}>\n            <Text body3 color={titleColor}>\n              {props.strings?.unknownTitle ?? '(Unknown message type)'}\n            </Text>\n            <Text body3 color={descColor}>\n              {props.strings?.unknownDescription ?? 'Cannot read this message.'}\n            </Text>\n          </Box>\n        )}\n      </PressBox>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubble: {\n    paddingVertical: 6,\n    paddingHorizontal: 12,\n    borderRadius: 16,\n  },\n});\n\nexport default UnknownMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,gBAAgB,MAAM,oBAAoB;AAGjD,MAAMC,cAAc,GAAIC,KAAgD,IAAK;EAC3E,MAAM;IAAEC,OAAO,GAAG;EAAW,CAAC,GAAGD,KAAK;EAEtC,MAAM;IAAEE;EAAO,CAAC,GAAGL,aAAa,EAAE;EAClC,MAAMM,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,mBAAmB,CAAC,UAAU,CAAC;EACvD,MAAMC,UAAU,GAAGL,OAAO,KAAK,UAAU,GAAGC,MAAM,CAACK,cAAc,GAAGL,MAAM,CAACM,qBAAqB;EAChG,MAAMC,SAAS,GAAGR,OAAO,KAAK,UAAU,GAAGC,MAAM,CAACQ,cAAc,GAAGR,MAAM,CAACS,qBAAqB;EAE/F,oBACEnB,KAAA,CAAAoB,aAAA,CAACd,gBAAgB,EAAKE,KAAK,eACzBR,KAAA,CAAAoB,aAAA,CAAClB,QAAQ;IAACmB,OAAO,EAAEb,KAAK,CAACa,OAAQ;IAACC,WAAW,EAAEd,KAAK,CAACc;EAAY,GAC9DC,IAAA;IAAA,IAAAC,cAAA,EAAAC,eAAA;IAAA,IAAC;MAAEC;IAAQ,CAAC,GAAAH,IAAA;IAAA,oBACXvB,KAAA,CAAAoB,aAAA,CAACnB,GAAG;MAAC0B,KAAK,EAAEC,MAAM,CAACC,MAAO;MAACC,eAAe,EAAEJ,OAAO,GAAGf,KAAK,CAACe,OAAO,CAACK,UAAU,GAAGpB,KAAK,CAACqB,OAAO,CAACD;IAAW,gBACxG/B,KAAA,CAAAoB,aAAA,CAACjB,IAAI;MAAC8B,KAAK;MAACtB,KAAK,EAAEG;IAAW,GAC3B,EAAAU,cAAA,GAAAhB,KAAK,CAAC0B,OAAO,cAAAV,cAAA,uBAAbA,cAAA,CAAeW,YAAY,KAAI,wBAAwB,CACnD,eACPnC,KAAA,CAAAoB,aAAA,CAACjB,IAAI;MAAC8B,KAAK;MAACtB,KAAK,EAAEM;IAAU,GAC1B,EAAAQ,eAAA,GAAAjB,KAAK,CAAC0B,OAAO,cAAAT,eAAA,uBAAbA,eAAA,CAAeW,kBAAkB,KAAI,2BAA2B,CAC5D,CACH;EAAA,CACP,CACQ,CACM;AAEvB,CAAC;AAED,MAAMR,MAAM,GAAGxB,gBAAgB,CAAC;EAC9ByB,MAAM,EAAE;IACNQ,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,EAAE;IACrBC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAehC,cAAc"}
+{"version":3,"names":["React","Box","PressBox","Text","createStyleSheet","useUIKitTheme","MessageContainer","UnknownMessage","props","variant","colors","color","ui","groupChannelMessage","titleColor","onBackground01","onBackgroundReverse01","descColor","onBackground02","onBackgroundReverse02","createElement","onPress","onLongPress","_ref","_props$strings","_props$strings2","pressed","style","styles","bubble","backgroundColor","background","enabled","body3","strings","unknownTitle","unknownDescription","paddingVertical","paddingHorizontal","borderRadius"],"sources":["Message.unknown.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\nconst UnknownMessage = (props: GroupChannelMessageProps<SendbirdMessage>) => {\n  const { variant = 'incoming' } = props;\n\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage[variant];\n  const titleColor = variant === 'incoming' ? colors.onBackground01 : colors.onBackgroundReverse01;\n  const descColor = variant === 'incoming' ? colors.onBackground02 : colors.onBackgroundReverse02;\n\n  return (\n    <MessageContainer {...props}>\n      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>\n        {({ pressed }) => (\n          <Box style={styles.bubble} backgroundColor={pressed ? color.pressed.background : color.enabled.background}>\n            <Text body3 color={titleColor}>\n              {props.strings?.unknownTitle ?? '(Unknown message type)'}\n            </Text>\n            <Text body3 color={descColor}>\n              {props.strings?.unknownDescription ?? 'Cannot read this message.'}\n            </Text>\n          </Box>\n        )}\n      </PressBox>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubble: {\n    paddingVertical: 6,\n    paddingHorizontal: 12,\n    borderRadius: 16,\n  },\n});\n\nexport default UnknownMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,gBAAgB,MAAM,oBAAoB;AAGjD,MAAMC,cAAc,GAAIC,KAAgD,IAAK;EAC3E,MAAM;IAAEC,OAAO,GAAG;EAAW,CAAC,GAAGD,KAAK;EAEtC,MAAM;IAAEE;EAAO,CAAC,GAAGL,aAAa,EAAE;EAClC,MAAMM,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,mBAAmB,CAACJ,OAAO,CAAC;EACpD,MAAMK,UAAU,GAAGL,OAAO,KAAK,UAAU,GAAGC,MAAM,CAACK,cAAc,GAAGL,MAAM,CAACM,qBAAqB;EAChG,MAAMC,SAAS,GAAGR,OAAO,KAAK,UAAU,GAAGC,MAAM,CAACQ,cAAc,GAAGR,MAAM,CAACS,qBAAqB;EAE/F,oBACEnB,KAAA,CAAAoB,aAAA,CAACd,gBAAgB,EAAKE,KAAK,eACzBR,KAAA,CAAAoB,aAAA,CAAClB,QAAQ;IAACmB,OAAO,EAAEb,KAAK,CAACa,OAAQ;IAACC,WAAW,EAAEd,KAAK,CAACc;EAAY,GAC9DC,IAAA;IAAA,IAAAC,cAAA,EAAAC,eAAA;IAAA,IAAC;MAAEC;IAAQ,CAAC,GAAAH,IAAA;IAAA,oBACXvB,KAAA,CAAAoB,aAAA,CAACnB,GAAG;MAAC0B,KAAK,EAAEC,MAAM,CAACC,MAAO;MAACC,eAAe,EAAEJ,OAAO,GAAGf,KAAK,CAACe,OAAO,CAACK,UAAU,GAAGpB,KAAK,CAACqB,OAAO,CAACD;IAAW,gBACxG/B,KAAA,CAAAoB,aAAA,CAACjB,IAAI;MAAC8B,KAAK;MAACtB,KAAK,EAAEG;IAAW,GAC3B,EAAAU,cAAA,GAAAhB,KAAK,CAAC0B,OAAO,cAAAV,cAAA,uBAAbA,cAAA,CAAeW,YAAY,KAAI,wBAAwB,CACnD,eACPnC,KAAA,CAAAoB,aAAA,CAACjB,IAAI;MAAC8B,KAAK;MAACtB,KAAK,EAAEM;IAAU,GAC1B,EAAAQ,eAAA,GAAAjB,KAAK,CAAC0B,OAAO,cAAAT,eAAA,uBAAbA,eAAA,CAAeW,kBAAkB,KAAI,2BAA2B,CAC5D,CACH;EAAA,CACP,CACQ,CACM;AAEvB,CAAC;AAED,MAAMR,MAAM,GAAGxB,gBAAgB,CAAC;EAC9ByB,MAAM,EAAE;IACNQ,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,EAAE;IACrBC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAehC,cAAc"}

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

@@ -2,6 +2,7 @@ import AdminMessage from './Message.admin';
 import FileMessage from './Message.file';
 import ImageFileMessage from './Message.file.image';
 import VideoFileMessage from './Message.file.video';
+import VoiceFileMessage from './Message.file.voice';
 import UnknownMessage from './Message.unknown';
 import UserMessage from './Message.user';
 import OpenGraphUser from './Message.user.og';
@@ -11,6 +12,7 @@ const GroupChannelMessage = {
   File: FileMessage,
   ImageFile: ImageFileMessage,
   VideoFile: VideoFileMessage,
+  VoiceFile: VoiceFileMessage,
   Admin: AdminMessage,
   Unknown: UnknownMessage
 };

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

@@ -1 +1 @@
-{"version":3,"names":["AdminMessage","FileMessage","ImageFileMessage","VideoFileMessage","UnknownMessage","UserMessage","OpenGraphUser","GroupChannelMessage","User","File","ImageFile","VideoFile","Admin","Unknown"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } 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 OpenGraphUser from './Message.user.og';\n\nexport type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n  channel: SendbirdGroupChannel;\n  message: T;\n  variant?: 'outgoing' | 'incoming';\n  strings?: {\n    senderName?: string;\n    sentDate?: string;\n    edited?: string;\n    fileName?: string;\n    unknownTitle?: string;\n    unknownDescription?: string;\n  };\n\n  children?: React.ReactNode;\n  sendingStatus?: React.ReactNode;\n  parentMessage?: React.ReactNode;\n\n  groupedWithPrev: boolean;\n  groupedWithNext: boolean;\n  onPress?: () => void;\n  onLongPress?: () => void;\n  onPressAvatar?: () => void;\n  onPressURL?: (url: string) => void;\n  onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;\n} & AdditionalProps;\n\nconst GroupChannelMessage = {\n  User: UserMessage,\n  OpenGraphUser: OpenGraphUser,\n  File: FileMessage,\n  ImageFile: ImageFileMessage,\n  VideoFile: VideoFileMessage,\n  Admin: AdminMessage,\n  Unknown: UnknownMessage,\n};\n\nexport default GroupChannelMessage;\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,aAAa,MAAM,mBAAmB;AA4B7C,MAAMC,mBAAmB,GAAG;EAC1BC,IAAI,EAAEH,WAAW;EACjBC,aAAa,EAAEA,aAAa;EAC5BG,IAAI,EAAER,WAAW;EACjBS,SAAS,EAAER,gBAAgB;EAC3BS,SAAS,EAAER,gBAAgB;EAC3BS,KAAK,EAAEZ,YAAY;EACnBa,OAAO,EAAET;AACX,CAAC;AAED,eAAeG,mBAAmB"}
+{"version":3,"names":["AdminMessage","FileMessage","ImageFileMessage","VideoFileMessage","VoiceFileMessage","UnknownMessage","UserMessage","OpenGraphUser","GroupChannelMessage","User","File","ImageFile","VideoFile","VoiceFile","Admin","Unknown"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } 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 VoiceFileMessage from './Message.file.voice';\nimport type { VoiceFileMessageState } from './Message.file.voice';\nimport UnknownMessage from './Message.unknown';\nimport UserMessage from './Message.user';\nimport OpenGraphUser from './Message.user.og';\n\nexport type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n  channel: SendbirdGroupChannel;\n  message: T;\n  variant?: 'outgoing' | 'incoming';\n  strings?: {\n    senderName?: string;\n    sentDate?: string;\n    edited?: string;\n    fileName?: string;\n    unknownTitle?: string;\n    unknownDescription?: string;\n  };\n\n  children?: React.ReactNode;\n  sendingStatus?: React.ReactNode;\n  parentMessage?: React.ReactNode;\n\n  groupedWithPrev: boolean;\n  groupedWithNext: boolean;\n  onPress?: () => void;\n  onLongPress?: () => void;\n  onPressAvatar?: () => void;\n  onPressURL?: (url: string) => void;\n  onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;\n  onToggleVoiceMessage?: (\n    state: VoiceFileMessageState,\n    setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>,\n  ) => Promise<void>;\n} & AdditionalProps;\n\nconst GroupChannelMessage = {\n  User: UserMessage,\n  OpenGraphUser: OpenGraphUser,\n  File: FileMessage,\n  ImageFile: ImageFileMessage,\n  VideoFile: VideoFileMessage,\n  VoiceFile: VoiceFileMessage,\n  Admin: AdminMessage,\n  Unknown: UnknownMessage,\n};\n\nexport default GroupChannelMessage;\n"],"mappings":"AAIA,OAAOA,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AAEnD,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,aAAa,MAAM,mBAAmB;AAgC7C,MAAMC,mBAAmB,GAAG;EAC1BC,IAAI,EAAEH,WAAW;EACjBC,aAAa,EAAEA,aAAa;EAC5BG,IAAI,EAAET,WAAW;EACjBU,SAAS,EAAET,gBAAgB;EAC3BU,SAAS,EAAET,gBAAgB;EAC3BU,SAAS,EAAET,gBAAgB;EAC3BU,KAAK,EAAEd,YAAY;EACnBe,OAAO,EAAEV;AACX,CAAC;AAED,eAAeG,mBAAmB"}

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","conditionChaining","Icon","Image","Text","createStyleSheet","useUIKitTheme","Badge","GroupChannelPreview","_ref","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","titleCaptionLeft","frozen","notificationOff","broadcast","mentioned","mentionTrigger","colors","color","ui","groupChannelPreview","createElement","style","styles","container","backgroundColor","default","none","background","coverContainer","Boolean","resizeMode","channelCover","coverBackground","source","uri","rightSection","rightTopSection","channelInfoContainer","size","icon","secondary","containerStyle","channelInfoBroadcast","numberOfLines","subtitle1","channelInfoTitle","textTitle","caption1","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","titleCaptionContainer","caption2","textTitleCaption","titleCaptionText","rightBottomSection","bodyWrapper","bodyIconBackground","body3","ellipsizeMode","bodyText","textBody","unreadContainer","h2","badge","unreadMention","count","maxCount","Separator","separator","_ref2","height","width","flexDirection","alignItems","justifyContent","marginLeft","marginRight","borderRadius","flex","paddingTop","paddingRight","marginBottom","flexShrink","marginTop","position","left","right","bottom"],"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 Image from '../../components/Image';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Badge from '../Badge';\n\ntype Props = {\n  customCover?: React.ReactElement;\n  coverUrl: string;\n\n  title: string;\n\n  titleCaption: string;\n  titleCaptionLeft?: React.ReactElement;\n\n  bodyIcon?: keyof typeof Icon.Assets;\n  body: string;\n\n  memberCount?: number;\n  badgeCount: number;\n  maxBadgeCount?: number;\n\n  frozen?: boolean;\n  notificationOff?: boolean;\n  broadcast?: boolean;\n  mentioned?: boolean;\n  mentionTrigger?: string;\n};\n\nconst GroupChannelPreview = ({\n  customCover,\n  coverUrl,\n  memberCount,\n  badgeCount,\n  maxBadgeCount,\n  body,\n  bodyIcon,\n  title,\n  titleCaption,\n  titleCaptionLeft,\n  frozen,\n  notificationOff,\n  broadcast,\n  mentioned,\n  mentionTrigger = '@',\n}: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelPreview;\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.default.none.background }]}>\n      <View style={styles.coverContainer}>\n        {conditionChaining(\n          [Boolean(customCover)],\n          [\n            customCover,\n            <Image\n              resizeMode={'cover'}\n              style={[styles.channelCover, { backgroundColor: color.default.none.coverBackground }]}\n              source={{ uri: coverUrl }}\n            />,\n          ],\n        )}\n      </View>\n      <View style={styles.rightSection}>\n        <View style={styles.rightTopSection}>\n          <View style={styles.channelInfoContainer}>\n            {broadcast && (\n              <Icon\n                size={16}\n                icon={'broadcast'}\n                color={colors.secondary}\n                containerStyle={styles.channelInfoBroadcast}\n              />\n            )}\n            <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>\n              {title}\n            </Text>\n            {Boolean(memberCount) && (\n              <Text caption1 style={styles.channelInfoMemberCount} color={color.default.none.memberCount}>\n                {memberCount}\n              </Text>\n            )}\n            {frozen && (\n              <Icon size={16} icon={'freeze'} color={colors.primary} containerStyle={styles.channelInfoFrozen} />\n            )}\n            {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}\n          </View>\n          <View style={styles.titleCaptionContainer}>\n            {titleCaptionLeft}\n            <Text caption2 color={color.default.none.textTitleCaption} style={styles.titleCaptionText}>\n              {titleCaption}\n            </Text>\n          </View>\n        </View>\n\n        <View style={styles.rightBottomSection}>\n          <View style={styles.body}>\n            <View style={styles.bodyWrapper}>\n              {bodyIcon && (\n                <Icon\n                  size={18}\n                  icon={bodyIcon}\n                  color={color.default.none.bodyIcon}\n                  containerStyle={[\n                    styles.bodyIcon,\n                    { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },\n                  ]}\n                />\n              )}\n              <Text\n                body3\n                numberOfLines={1}\n                ellipsizeMode={bodyIcon ? 'middle' : 'tail'}\n                style={styles.bodyText}\n                color={color.default.none.textBody}\n              >\n                {body}\n              </Text>\n            </View>\n          </View>\n          <View style={styles.unreadContainer}>\n            {mentioned && (\n              <Text h2 color={colors.ui.badge.default.none.background} style={styles.unreadMention}>\n                {mentionTrigger}\n              </Text>\n            )}\n            {badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}\n          </View>\n        </View>\n        <Separator color={color.default.none.separator} />\n      </View>\n    </View>\n  );\n};\n\ntype SeparatorProps = { color: string };\nconst Separator = ({ color }: SeparatorProps) => <View style={[styles.separator, { backgroundColor: color }]} />;\n\nconst styles = createStyleSheet({\n  container: {\n    height: 76,\n    width: '100%',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  coverContainer: {\n    marginLeft: 16,\n    marginRight: 16,\n  },\n  channelCover: {\n    width: 56,\n    height: 56,\n    borderRadius: 28,\n  },\n  rightSection: {\n    flex: 1,\n    paddingTop: 10,\n    paddingRight: 16,\n  },\n  rightTopSection: {\n    flexDirection: 'row',\n    marginBottom: 4,\n  },\n  channelInfoContainer: {\n    flex: 1,\n    marginRight: 4,\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  channelInfoBroadcast: {\n    marginRight: 4,\n  },\n  channelInfoTitle: {\n    flexShrink: 1,\n    marginRight: 4,\n  },\n  channelInfoMemberCount: {\n    paddingTop: 2,\n    marginRight: 4,\n  },\n  channelInfoFrozen: {\n    marginRight: 4,\n  },\n  titleCaptionContainer: {\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n    marginLeft: 4,\n  },\n  titleCaptionText: {\n    marginTop: 2,\n  },\n  rightBottomSection: {\n    flex: 1,\n    height: '100%',\n    flexDirection: 'row',\n  },\n  body: {\n    marginRight: 4,\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  bodyWrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  bodyText: {\n    flex: 1,\n  },\n  bodyIcon: {\n    borderRadius: 8,\n    width: 26,\n    height: 26,\n    marginRight: 4,\n  },\n  unreadContainer: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  unreadMention: {\n    marginRight: 4,\n  },\n  separator: {\n    position: 'absolute',\n    left: 0,\n    right: -16,\n    bottom: 0,\n    height: 1,\n  },\n});\n\nexport default GroupChannelPreview;\n"],"mappings":"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"}
+{"version":3,"names":["React","View","conditionChaining","Icon","Image","Text","createStyleSheet","useUIKitTheme","Badge","GroupChannelPreview","_ref","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","titleCaptionLeft","frozen","notificationOff","broadcast","mentioned","mentionTrigger","colors","color","ui","groupChannelPreview","createElement","style","styles","container","backgroundColor","default","none","background","coverContainer","Boolean","resizeMode","channelCover","coverBackground","source","uri","rightSection","rightTopSection","channelInfoContainer","size","icon","secondary","containerStyle","channelInfoBroadcast","numberOfLines","subtitle1","channelInfoTitle","textTitle","caption1","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","titleCaptionContainer","caption2","textTitleCaption","titleCaptionText","rightBottomSection","bodyWrapper","bodyIconBackground","body3","ellipsizeMode","bodyText","textBody","unreadContainer","h2","badge","unreadMention","count","maxCount","Separator","separator","_ref2","height","width","flexDirection","alignItems","justifyContent","marginLeft","marginRight","borderRadius","flex","paddingTop","paddingRight","marginBottom","flexShrink","marginTop","position","left","right","bottom"],"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 Image from '../../components/Image';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Badge from '../Badge';\n\ntype Props = {\n  customCover?: React.ReactNode;\n  coverUrl: string;\n\n  title: string;\n\n  titleCaption: string;\n  titleCaptionLeft?: React.ReactNode;\n\n  bodyIcon?: keyof typeof Icon.Assets;\n  body: string;\n\n  memberCount?: number;\n  badgeCount: number;\n  maxBadgeCount?: number;\n\n  frozen?: boolean;\n  notificationOff?: boolean;\n  broadcast?: boolean;\n  mentioned?: boolean;\n  mentionTrigger?: string;\n};\n\nconst GroupChannelPreview = ({\n  customCover,\n  coverUrl,\n  memberCount,\n  badgeCount,\n  maxBadgeCount,\n  body,\n  bodyIcon,\n  title,\n  titleCaption,\n  titleCaptionLeft,\n  frozen,\n  notificationOff,\n  broadcast,\n  mentioned,\n  mentionTrigger = '@',\n}: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelPreview;\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.default.none.background }]}>\n      <View style={styles.coverContainer}>\n        {conditionChaining(\n          [Boolean(customCover)],\n          [\n            customCover,\n            <Image\n              resizeMode={'cover'}\n              style={[styles.channelCover, { backgroundColor: color.default.none.coverBackground }]}\n              source={{ uri: coverUrl }}\n            />,\n          ],\n        )}\n      </View>\n      <View style={styles.rightSection}>\n        <View style={styles.rightTopSection}>\n          <View style={styles.channelInfoContainer}>\n            {broadcast && (\n              <Icon\n                size={16}\n                icon={'broadcast'}\n                color={colors.secondary}\n                containerStyle={styles.channelInfoBroadcast}\n              />\n            )}\n            <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>\n              {title}\n            </Text>\n            {Boolean(memberCount) && (\n              <Text caption1 style={styles.channelInfoMemberCount} color={color.default.none.memberCount}>\n                {memberCount}\n              </Text>\n            )}\n            {frozen && (\n              <Icon size={16} icon={'freeze'} color={colors.primary} containerStyle={styles.channelInfoFrozen} />\n            )}\n            {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}\n          </View>\n          <View style={styles.titleCaptionContainer}>\n            {titleCaptionLeft}\n            <Text caption2 color={color.default.none.textTitleCaption} style={styles.titleCaptionText}>\n              {titleCaption}\n            </Text>\n          </View>\n        </View>\n\n        <View style={styles.rightBottomSection}>\n          <View style={styles.body}>\n            <View style={styles.bodyWrapper}>\n              {bodyIcon && (\n                <Icon\n                  size={18}\n                  icon={bodyIcon}\n                  color={color.default.none.bodyIcon}\n                  containerStyle={[\n                    styles.bodyIcon,\n                    { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },\n                  ]}\n                />\n              )}\n              <Text\n                body3\n                numberOfLines={1}\n                ellipsizeMode={bodyIcon ? 'middle' : 'tail'}\n                style={styles.bodyText}\n                color={color.default.none.textBody}\n              >\n                {body}\n              </Text>\n            </View>\n          </View>\n          <View style={styles.unreadContainer}>\n            {mentioned && (\n              <Text h2 color={colors.ui.badge.default.none.background} style={styles.unreadMention}>\n                {mentionTrigger}\n              </Text>\n            )}\n            {badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}\n          </View>\n        </View>\n        <Separator color={color.default.none.separator} />\n      </View>\n    </View>\n  );\n};\n\ntype SeparatorProps = { color: string };\nconst Separator = ({ color }: SeparatorProps) => <View style={[styles.separator, { backgroundColor: color }]} />;\n\nconst styles = createStyleSheet({\n  container: {\n    height: 76,\n    width: '100%',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  coverContainer: {\n    marginLeft: 16,\n    marginRight: 16,\n  },\n  channelCover: {\n    width: 56,\n    height: 56,\n    borderRadius: 28,\n  },\n  rightSection: {\n    flex: 1,\n    paddingTop: 10,\n    paddingRight: 16,\n  },\n  rightTopSection: {\n    flexDirection: 'row',\n    marginBottom: 4,\n  },\n  channelInfoContainer: {\n    flex: 1,\n    marginRight: 4,\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  channelInfoBroadcast: {\n    marginRight: 4,\n  },\n  channelInfoTitle: {\n    flexShrink: 1,\n    marginRight: 4,\n  },\n  channelInfoMemberCount: {\n    paddingTop: 2,\n    marginRight: 4,\n  },\n  channelInfoFrozen: {\n    marginRight: 4,\n  },\n  titleCaptionContainer: {\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n    marginLeft: 4,\n  },\n  titleCaptionText: {\n    marginTop: 2,\n  },\n  rightBottomSection: {\n    flex: 1,\n    height: '100%',\n    flexDirection: 'row',\n  },\n  body: {\n    marginRight: 4,\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  bodyWrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  bodyText: {\n    flex: 1,\n  },\n  bodyIcon: {\n    borderRadius: 8,\n    width: 26,\n    height: 26,\n    marginRight: 4,\n  },\n  unreadContainer: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  unreadMention: {\n    marginRight: 4,\n  },\n  separator: {\n    position: 'absolute',\n    left: 0,\n    right: -16,\n    bottom: 0,\n    height: 1,\n  },\n});\n\nexport default GroupChannelPreview;\n"],"mappings":"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"}

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

@@ -196,8 +196,9 @@ const styles = createStyleSheet({
     padding: 4
   }
 });
-Header.Button = HeaderButton;
-Header.Title = HeaderTitle;
-Header.Subtitle = HeaderSubtitle;
-export default Header;
+export default Object.assign(Header, {
+  Button: HeaderButton,
+  Title: HeaderTitle,
+  Subtitle: HeaderSubtitle
+});
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","TouchableOpacity","View","useSafeAreaInsets","conditionChaining","Text","createStyleSheet","useHeaderStyle","useUIKitTheme","AlignMapper","left","center","right","Header","_ref","children","titleAlign","title","onPressLeft","onPressRight","clearTitleMargin","clearStatusBarTopInset","statusBarTopInsetAs","topInset","defaultTitleAlign","defaultHeight","colors","paddingLeft","paddingRight","actualTitleAlign","actualTopInset","createElement","style","paddingTop","backgroundColor","ui","header","nav","none","background","styles","container","paddingHorizontal","borderBottomColor","borderBottom","height","LeftSide","marginHorizontal","justifyContent","HeaderTitle","RightSide","_ref2","HeaderButton","onPress","_ref3","_ref4","props","_extends","h1","numberOfLines","HeaderSubtitle","_ref5","color","onBackground03","caption2","_ref6","disabled","button","e","activeOpacity","borderBottomWidth","flexDirection","flex","alignItems","minWidth","marginRight","marginLeft","padding","Button","Title","Subtitle"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity, TouchableOpacityProps, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Text, { TextProps } from '../../components/Text';\nimport type { BaseHeaderProps } from '../../index';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype HeaderElement = string | React.ReactElement | null;\nexport type HeaderProps = BaseHeaderProps<\n  {\n    title?: HeaderElement;\n    left?: HeaderElement;\n    right?: HeaderElement;\n    onPressLeft?: () => void;\n    onPressRight?: () => void;\n  },\n  {\n    clearTitleMargin?: boolean;\n    clearStatusBarTopInset?: boolean;\n    statusBarTopInsetAs?: 'padding' | 'margin';\n  }\n>;\n\nconst AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;\nconst Header: ((props: HeaderProps) => JSX.Element) & {\n  Button: typeof HeaderButton;\n  Title: typeof HeaderTitle;\n  Subtitle: typeof HeaderSubtitle;\n} = ({\n  children,\n  titleAlign,\n  title = null,\n  left = null,\n  right = null,\n  onPressLeft,\n  onPressRight,\n  clearTitleMargin = false,\n  clearStatusBarTopInset = false,\n  statusBarTopInsetAs = 'padding',\n}) => {\n  const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();\n\n  const { colors } = useUIKitTheme();\n  const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();\n\n  const actualTitleAlign = titleAlign ?? defaultTitleAlign;\n  const actualTopInset = clearStatusBarTopInset ? 0 : topInset;\n\n  if (!title && !left && !right) {\n    return (\n      <View style={{ paddingTop: actualTopInset, backgroundColor: colors.ui.header.nav.none.background }}>\n        {children}\n      </View>\n    );\n  }\n\n  return (\n    <View\n      style={[\n        styles.container,\n        {\n          [statusBarTopInsetAs === 'padding' ? 'paddingTop' : 'marginTop']: actualTopInset,\n          paddingLeft: paddingLeft + styles.container.paddingHorizontal,\n          paddingRight: paddingRight + styles.container.paddingHorizontal,\n          backgroundColor: colors.ui.header.nav.none.background,\n          borderBottomColor: colors.ui.header.nav.none.borderBottom,\n        },\n      ]}\n    >\n      <View style={[styles.header, { height: defaultHeight }]}>\n        <LeftSide titleAlign={actualTitleAlign} left={left} onPressLeft={onPressLeft} />\n        <View\n          style={[\n            styles.title,\n            clearTitleMargin && { marginHorizontal: 0 },\n            { justifyContent: AlignMapper[actualTitleAlign] },\n          ]}\n        >\n          {typeof title === 'string' ? <HeaderTitle>{title}</HeaderTitle> : title}\n        </View>\n        <RightSide titleAlign={actualTitleAlign} right={right} onPressRight={onPressRight} />\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst LeftSide = ({ titleAlign, onPressLeft, left }: HeaderProps) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.left}>{left && <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>}</View>;\n  }\n  if (!left) return null;\n  return (\n    <View style={styles.left}>\n      <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>\n    </View>\n  );\n};\n\nconst RightSide = ({ titleAlign, onPressRight, right }: HeaderProps) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.right}>{right && <HeaderButton onPress={onPressRight}>{right}</HeaderButton>}</View>;\n  }\n  if (!right) return null;\n  return (\n    <View style={styles.right}>\n      <HeaderButton onPress={onPressRight}>{right}</HeaderButton>\n    </View>\n  );\n};\n\nconst HeaderTitle = ({ children, style, ...props }: TextProps) => {\n  return (\n    <Text {...props} h1 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderSubtitle = ({ children, style, ...props }: TextProps) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <Text color={colors.onBackground03} {...props} caption2 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderButton = ({ children, disabled, onPress, color, ...props }: TouchableOpacityProps & { color?: string }) => {\n  return (\n    <TouchableOpacity\n      style={styles.button}\n      {...props}\n      disabled={!onPress || disabled}\n      onPress={(e) => onPress?.(e)}\n      activeOpacity={0.7}\n    >\n      {conditionChaining(\n        [typeof children === 'string' || typeof children === 'number'],\n        [\n          <Text button numberOfLines={1} color={color}>\n            {children}\n          </Text>,\n          children,\n        ],\n      )}\n    </TouchableOpacity>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    borderBottomWidth: 1,\n  },\n  header: {\n    flexDirection: 'row',\n  },\n  title: {\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'center',\n    marginHorizontal: 12,\n  },\n  left: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginRight: 12,\n  },\n  right: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginLeft: 12,\n  },\n  button: {\n    padding: 4,\n  },\n});\n\nHeader.Button = HeaderButton;\nHeader.Title = HeaderTitle;\nHeader.Subtitle = HeaderSubtitle;\nexport default Header;\n"],"mappings":"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"}
+{"version":3,"names":["React","TouchableOpacity","View","useSafeAreaInsets","conditionChaining","Text","createStyleSheet","useHeaderStyle","useUIKitTheme","AlignMapper","left","center","right","Header","_ref","children","titleAlign","title","onPressLeft","onPressRight","clearTitleMargin","clearStatusBarTopInset","statusBarTopInsetAs","topInset","defaultTitleAlign","defaultHeight","colors","paddingLeft","paddingRight","actualTitleAlign","actualTopInset","createElement","style","paddingTop","backgroundColor","ui","header","nav","none","background","styles","container","paddingHorizontal","borderBottomColor","borderBottom","height","LeftSide","marginHorizontal","justifyContent","HeaderTitle","RightSide","_ref2","HeaderButton","onPress","_ref3","_ref4","props","_extends","h1","numberOfLines","HeaderSubtitle","_ref5","color","onBackground03","caption2","_ref6","disabled","button","e","activeOpacity","borderBottomWidth","flexDirection","flex","alignItems","minWidth","marginRight","marginLeft","padding","Object","assign","Button","Title","Subtitle"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity, TouchableOpacityProps, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Text, { TextProps } from '../../components/Text';\nimport type { BaseHeaderProps, HeaderElement } from '../../index';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nexport type HeaderProps = BaseHeaderProps<\n  {\n    title?: HeaderElement;\n    left?: HeaderElement;\n    right?: HeaderElement;\n    onPressLeft?: () => void;\n    onPressRight?: () => void;\n  },\n  {\n    clearTitleMargin?: boolean;\n    clearStatusBarTopInset?: boolean;\n    statusBarTopInsetAs?: 'padding' | 'margin';\n  }\n>;\n\nconst AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;\nconst Header = ({\n  children,\n  titleAlign,\n  title = null,\n  left = null,\n  right = null,\n  onPressLeft,\n  onPressRight,\n  clearTitleMargin = false,\n  clearStatusBarTopInset = false,\n  statusBarTopInsetAs = 'padding',\n}: HeaderProps) => {\n  const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();\n\n  const { colors } = useUIKitTheme();\n  const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();\n\n  const actualTitleAlign = titleAlign ?? defaultTitleAlign;\n  const actualTopInset = clearStatusBarTopInset ? 0 : topInset;\n\n  if (!title && !left && !right) {\n    return (\n      <View style={{ paddingTop: actualTopInset, backgroundColor: colors.ui.header.nav.none.background }}>\n        {children}\n      </View>\n    );\n  }\n\n  return (\n    <View\n      style={[\n        styles.container,\n        {\n          [statusBarTopInsetAs === 'padding' ? 'paddingTop' : 'marginTop']: actualTopInset,\n          paddingLeft: paddingLeft + styles.container.paddingHorizontal,\n          paddingRight: paddingRight + styles.container.paddingHorizontal,\n          backgroundColor: colors.ui.header.nav.none.background,\n          borderBottomColor: colors.ui.header.nav.none.borderBottom,\n        },\n      ]}\n    >\n      <View style={[styles.header, { height: defaultHeight }]}>\n        <LeftSide titleAlign={actualTitleAlign} left={left} onPressLeft={onPressLeft} />\n        <View\n          style={[\n            styles.title,\n            clearTitleMargin && { marginHorizontal: 0 },\n            { justifyContent: AlignMapper[actualTitleAlign] },\n          ]}\n        >\n          {typeof title === 'string' ? <HeaderTitle>{title}</HeaderTitle> : title}\n        </View>\n        <RightSide titleAlign={actualTitleAlign} right={right} onPressRight={onPressRight} />\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst LeftSide = ({ titleAlign, onPressLeft, left }: HeaderProps) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.left}>{left && <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>}</View>;\n  }\n  if (!left) return null;\n  return (\n    <View style={styles.left}>\n      <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>\n    </View>\n  );\n};\n\nconst RightSide = ({ titleAlign, onPressRight, right }: HeaderProps) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.right}>{right && <HeaderButton onPress={onPressRight}>{right}</HeaderButton>}</View>;\n  }\n  if (!right) return null;\n  return (\n    <View style={styles.right}>\n      <HeaderButton onPress={onPressRight}>{right}</HeaderButton>\n    </View>\n  );\n};\n\nconst HeaderTitle = ({ children, style, ...props }: TextProps) => {\n  return (\n    <Text {...props} h1 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderSubtitle = ({ children, style, ...props }: TextProps) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <Text color={colors.onBackground03} {...props} caption2 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderButton = ({ children, disabled, onPress, color, ...props }: TouchableOpacityProps & { color?: string }) => {\n  return (\n    <TouchableOpacity\n      style={styles.button}\n      {...props}\n      disabled={!onPress || disabled}\n      onPress={(e) => onPress?.(e)}\n      activeOpacity={0.7}\n    >\n      {conditionChaining(\n        [typeof children === 'string' || typeof children === 'number'],\n        [\n          <Text button numberOfLines={1} color={color}>\n            {children}\n          </Text>,\n          children,\n        ],\n      )}\n    </TouchableOpacity>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    borderBottomWidth: 1,\n  },\n  header: {\n    flexDirection: 'row',\n  },\n  title: {\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'center',\n    marginHorizontal: 12,\n  },\n  left: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginRight: 12,\n  },\n  right: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginLeft: 12,\n  },\n  button: {\n    padding: 4,\n  },\n});\n\nexport default Object.assign(Header, {\n  Button: HeaderButton,\n  Title: HeaderTitle,\n  Subtitle: HeaderSubtitle,\n});\n"],"mappings":"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"}

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.ReactElement }) => {\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,IAAoD;EAAA,IAAnD;IAAEzD;EAA2C,CAAC,GAAAyD,KAAA;EAC5E,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","_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":"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"}

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.ReactElement;\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","_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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"}

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 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?: JSX.Element;\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,MAAM,OAAO;AACzB,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","_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"}

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

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import Box from '../../components/Box';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+const TypingIndicatorBubble = _ref => {
+  let {
+    typingUsers,
+    containerStyle,
+    maxAvatar
+  } = _ref;
+  const {
+    select,
+    palette,
+    colors
+  } = useUIKitTheme();
+  if (typingUsers.length === 0) return null;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    style: containerStyle
+  }, /*#__PURE__*/React.createElement(Avatar.Stack, {
+    size: 26,
+    maxAvatar: maxAvatar,
+    styles: {
+      remainsTextColor: colors.onBackground02,
+      remainsBackgroundColor: select({
+        light: palette.background100,
+        dark: palette.background400
+      })
+    },
+    containerStyle: {
+      marginRight: 12
+    }
+  }, typingUsers.map((user, index) => /*#__PURE__*/React.createElement(Avatar, {
+    key: index,
+    uri: user.profileUrl
+  }))), /*#__PURE__*/React.createElement(TypingDots, {
+    dotColor: select({
+      light: palette.background100,
+      dark: palette.background400
+    }),
+    backgroundColor: colors.onBackground02
+  }));
+};
+const TypingDots = _ref2 => {
+  let {
+    dotColor,
+    backgroundColor
+  } = _ref2;
+  const animation = useRef(new Animated.Value(0)).current;
+  const dots = matrix.map(_ref3 => {
+    let [timeline, scale, opacity] = _ref3;
+    return [animation.interpolate({
+      inputRange: timeline,
+      outputRange: scale,
+      extrapolate: 'clamp'
+    }), animation.interpolate({
+      inputRange: timeline,
+      outputRange: opacity,
+      extrapolate: 'clamp'
+    })];
+  });
+  useEffect(() => {
+    const animated = Animated.loop(Animated.timing(animation, {
+      toValue: 1.4,
+      duration: 1400,
+      easing: Easing.linear,
+      useNativeDriver: true
+    }));
+    animated.start();
+    return () => animated.reset();
+  }, []);
+  return /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 16,
+    paddingHorizontal: 12,
+    height: 34,
+    backgroundColor: dotColor
+  }, dots.map((_ref4, index) => {
+    let [scale, opacity] = _ref4;
+    return /*#__PURE__*/React.createElement(Animated.View, {
+      key: index,
+      style: [styles.dot, {
+        marginRight: index === dots.length - 1 ? 0 : 6,
+        opacity: opacity,
+        transform: [{
+          scale: scale
+        }],
+        backgroundColor: backgroundColor
+      }]
+    });
+  }));
+};
+const matrix = [[[0.4, 0.7, 1.0], [1.0, 1.2, 1.0], [0.12, 0.38, 0.12]], [[0.6, 0.9, 1.2], [1.0, 1.2, 1.0], [0.12, 0.38, 0.12]], [[0.8, 1.1, 1.4], [1.0, 1.2, 1.0], [0.12, 0.38, 0.12]]];
+const styles = createStyleSheet({
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  }
+});
+export default TypingIndicatorBubble;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","Animated","Easing","Box","createStyleSheet","useUIKitTheme","Avatar","TypingIndicatorBubble","_ref","typingUsers","containerStyle","maxAvatar","select","palette","colors","length","createElement","flexDirection","justifyContent","alignItems","style","Stack","size","styles","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background400","marginRight","map","user","index","key","uri","profileUrl","TypingDots","dotColor","backgroundColor","_ref2","animation","Value","current","dots","matrix","_ref3","timeline","scale","opacity","interpolate","inputRange","outputRange","extrapolate","animated","loop","timing","toValue","duration","easing","linear","useNativeDriver","start","reset","borderRadius","paddingHorizontal","height","_ref4","View","dot","transform","width"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Animated, Easing, StyleProp, ViewStyle } from 'react-native';\n\nimport type { SendbirdUser } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\n\ntype Props = {\n  typingUsers: SendbirdUser[];\n  containerStyle?: StyleProp<ViewStyle>;\n  maxAvatar?: number;\n};\n\nconst TypingIndicatorBubble = ({ typingUsers, containerStyle, maxAvatar }: Props) => {\n  const { select, palette, colors } = useUIKitTheme();\n\n  if (typingUsers.length === 0) return null;\n\n  return (\n    <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'center'} style={containerStyle}>\n      <Avatar.Stack\n        size={26}\n        maxAvatar={maxAvatar}\n        styles={{\n          remainsTextColor: colors.onBackground02,\n          remainsBackgroundColor: select({ light: palette.background100, dark: palette.background400 }),\n        }}\n        containerStyle={{ marginRight: 12 }}\n      >\n        {typingUsers.map((user, index) => (\n          <Avatar key={index} uri={user.profileUrl} />\n        ))}\n      </Avatar.Stack>\n      <TypingDots\n        dotColor={select({ light: palette.background100, dark: palette.background400 })}\n        backgroundColor={colors.onBackground02}\n      />\n    </Box>\n  );\n};\n\ntype TypingDotsProps = {\n  dotColor: string;\n  backgroundColor: string;\n};\nconst TypingDots = ({ dotColor, backgroundColor }: TypingDotsProps) => {\n  const animation = useRef(new Animated.Value(0)).current;\n  const dots = matrix.map(([timeline, scale, opacity]) => [\n    animation.interpolate({ inputRange: timeline, outputRange: scale, extrapolate: 'clamp' }),\n    animation.interpolate({ inputRange: timeline, outputRange: opacity, extrapolate: 'clamp' }),\n  ]);\n\n  useEffect(() => {\n    const animated = Animated.loop(\n      Animated.timing(animation, { toValue: 1.4, duration: 1400, easing: Easing.linear, useNativeDriver: true }),\n    );\n    animated.start();\n    return () => animated.reset();\n  }, []);\n\n  return (\n    <Box\n      flexDirection={'row'}\n      alignItems={'center'}\n      justifyContent={'center'}\n      borderRadius={16}\n      paddingHorizontal={12}\n      height={34}\n      backgroundColor={dotColor}\n    >\n      {dots.map(([scale, opacity], index) => {\n        return (\n          <Animated.View\n            key={index}\n            style={[\n              styles.dot,\n              {\n                marginRight: index === dots.length - 1 ? 0 : 6,\n                opacity: opacity,\n                transform: [{ scale: scale }],\n                backgroundColor: backgroundColor,\n              },\n            ]}\n          />\n        );\n      })}\n    </Box>\n  );\n};\n\nconst matrix = [\n  [\n    [0.4, 0.7, 1.0],\n    [1.0, 1.2, 1.0],\n    [0.12, 0.38, 0.12],\n  ],\n  [\n    [0.6, 0.9, 1.2],\n    [1.0, 1.2, 1.0],\n    [0.12, 0.38, 0.12],\n  ],\n  [\n    [0.8, 1.1, 1.4],\n    [1.0, 1.2, 1.0],\n    [0.12, 0.38, 0.12],\n  ],\n];\n\nconst styles = createStyleSheet({\n  dot: {\n    width: 8,\n    height: 8,\n    borderRadius: 4,\n  },\n});\n\nexport default TypingIndicatorBubble;\n"],"mappings":"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"}

package/lib/typescript/src/assets/icon/index.d.ts

@@ -4,6 +4,10 @@ declare const IconAssets: {
     add: any;
     archive: any;
     'arrow-left': any;
+    'audio-off-filled': any;
+    'audio-off': any;
+    'audio-on-filled': any;
+    'audio-on': any;
     ban: any;
     broadcast: any;
     camera: any;
@@ -40,12 +44,14 @@ declare const IconAssets: {
     'notifications-off-filled': any;
     notifications: any;
     operator: any;
+    pause: any;
     photo: any;
     play: any;
     plus: any;
     question: any;
     'radio-off': any;
     'radio-on': any;
+    recording: any;
     refresh: any;
     remove: any;
     'reply-filled': any;
@@ -54,6 +60,7 @@ declare const IconAssets: {
     send: any;
     'settings-filled': any;
     spinner: any;
+    stop: any;
     streaming: any;
     supergroup: any;
     theme: any;