@sendbird/uikit-react-native-foundation 3.5.4 → 3.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/assets/icon/icon-thread.png +0 -0
- package/lib/commonjs/assets/icon/icon-thread@2x.png +0 -0
- package/lib/commonjs/assets/icon/icon-thread@3x.png +0 -0
- package/lib/commonjs/assets/icon/index.js +1 -0
- package/lib/commonjs/assets/icon/index.js.map +1 -1
- package/lib/commonjs/components/Image/Image.fastimage.js +3 -3
- package/lib/commonjs/components/Image/Image.fastimage.js.map +1 -1
- package/lib/commonjs/components/ImageWithPlaceholder/index.js.map +1 -1
- package/lib/commonjs/styles/createStyleSheet.js +33 -26
- package/lib/commonjs/styles/createStyleSheet.js.map +1 -1
- package/lib/commonjs/ui/GroupChannelMessage/Message.file.voice.js +17 -2
- package/lib/commonjs/ui/GroupChannelMessage/Message.file.voice.js.map +1 -1
- package/lib/commonjs/ui/GroupChannelMessage/MessageContainer.js +20 -3
- package/lib/commonjs/ui/GroupChannelMessage/MessageContainer.js.map +1 -1
- package/lib/commonjs/ui/GroupChannelMessage/index.js.map +1 -1
- package/lib/module/assets/icon/icon-thread.png +0 -0
- package/lib/module/assets/icon/icon-thread@2x.png +0 -0
- package/lib/module/assets/icon/icon-thread@3x.png +0 -0
- package/lib/module/assets/icon/index.js +1 -0
- package/lib/module/assets/icon/index.js.map +1 -1
- package/lib/module/components/Image/Image.fastimage.js +3 -3
- package/lib/module/components/Image/Image.fastimage.js.map +1 -1
- package/lib/module/components/ImageWithPlaceholder/index.js.map +1 -1
- package/lib/module/styles/createStyleSheet.js +34 -26
- package/lib/module/styles/createStyleSheet.js.map +1 -1
- package/lib/module/ui/GroupChannelMessage/Message.file.voice.js +17 -2
- package/lib/module/ui/GroupChannelMessage/Message.file.voice.js.map +1 -1
- package/lib/module/ui/GroupChannelMessage/MessageContainer.js +20 -3
- package/lib/module/ui/GroupChannelMessage/MessageContainer.js.map +1 -1
- package/lib/module/ui/GroupChannelMessage/index.js.map +1 -1
- package/lib/typescript/src/assets/icon/index.d.ts +1 -0
- package/lib/typescript/src/components/Icon/index.d.ts +1 -0
- package/lib/typescript/src/components/ImageWithPlaceholder/index.d.ts +2 -2
- package/lib/typescript/src/styles/createStyleSheet.d.ts +1 -1
- package/lib/typescript/src/ui/Avatar/index.d.ts +1 -1
- package/lib/typescript/src/ui/GroupChannelMessage/Message.file.voice.d.ts +3 -0
- package/lib/typescript/src/ui/GroupChannelMessage/MessageContainer.d.ts +2 -2
- package/lib/typescript/src/ui/GroupChannelMessage/index.d.ts +12 -0
- package/package.json +7 -7
- package/src/assets/icon/icon-thread.png +0 -0
- package/src/assets/icon/icon-thread@2x.png +0 -0
- package/src/assets/icon/icon-thread@3x.png +0 -0
- package/src/assets/icon/index.ts +1 -0
- package/src/components/Image/Image.fastimage.tsx +3 -3
- package/src/components/ImageWithPlaceholder/index.tsx +2 -2
- package/src/styles/createStyleSheet.ts +42 -27
- package/src/ui/GroupChannelMessage/Message.file.voice.tsx +17 -1
- package/src/ui/GroupChannelMessage/MessageContainer.tsx +37 -27
- package/src/ui/GroupChannelMessage/index.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useRef","useState","Platform","StyleSheet","useForceUpdate","createStyleSheet","useUIKitTheme","Box","Icon","Image","useRetry","hasError","retryCount","arguments","length","undefined","OS","forceUpdate","retryCountRef","retryTimeoutRef","reloadReservation","current","setTimeout","clearTimeout","ImageWithPlaceholder","props","palette","select","colors","imageNotFound","setImageNotFound","key","createElement","style","overflow","width","height","backgroundColor","dark","background400","light","background100","source","absoluteFill","styles","hide","resizeMode","resizeMethod","onError","onLoad","containerStyle","icon","size","color","onBackground02","display"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';\n\nimport { useForceUpdate } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\nimport Icon from '../Icon';\nimport Image from '../Image';\n\nconst useRetry = (hasError: boolean, retryCount = 5) => {\n // NOTE: Glide(fast-image) will retry automatically on Android\n if (Platform.OS === 'android') return '';\n\n const forceUpdate = useForceUpdate();\n const retryCountRef = useRef(1);\n const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n useEffect(() => {\n if (hasError) {\n const reloadReservation = () => {\n if (retryCountRef.current < retryCount) {\n retryTimeoutRef.current = setTimeout(() => {\n retryCountRef.current++;\n reloadReservation();\n forceUpdate();\n }, retryCountRef.current * 5000);\n }\n };\n\n return reloadReservation();\n } else {\n return clearTimeout(retryTimeoutRef.current);\n }\n }, [hasError]);\n\n return retryCountRef.current;\n};\n\ntype Props = {\n source: number | { uri: string };\n width?: number |
|
|
1
|
+
{"version":3,"names":["React","useEffect","useRef","useState","Platform","StyleSheet","useForceUpdate","createStyleSheet","useUIKitTheme","Box","Icon","Image","useRetry","hasError","retryCount","arguments","length","undefined","OS","forceUpdate","retryCountRef","retryTimeoutRef","reloadReservation","current","setTimeout","clearTimeout","ImageWithPlaceholder","props","palette","select","colors","imageNotFound","setImageNotFound","key","createElement","style","overflow","width","height","backgroundColor","dark","background400","light","background100","source","absoluteFill","styles","hide","resizeMode","resizeMethod","onError","onLoad","containerStyle","icon","size","color","onBackground02","display"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';\n\nimport { useForceUpdate } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\nimport Icon from '../Icon';\nimport Image from '../Image';\n\nconst useRetry = (hasError: boolean, retryCount = 5) => {\n // NOTE: Glide(fast-image) will retry automatically on Android\n if (Platform.OS === 'android') return '';\n\n const forceUpdate = useForceUpdate();\n const retryCountRef = useRef(1);\n const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n useEffect(() => {\n if (hasError) {\n const reloadReservation = () => {\n if (retryCountRef.current < retryCount) {\n retryTimeoutRef.current = setTimeout(() => {\n retryCountRef.current++;\n reloadReservation();\n forceUpdate();\n }, retryCountRef.current * 5000);\n }\n };\n\n return reloadReservation();\n } else {\n return clearTimeout(retryTimeoutRef.current);\n }\n }, [hasError]);\n\n return retryCountRef.current;\n};\n\ntype Props = {\n source: number | { uri: string };\n width?: number | `${number}%`;\n height?: number | `${number}%`;\n style?: StyleProp<ViewStyle>;\n};\nconst ImageWithPlaceholder = (props: Props) => {\n const { palette, select, colors } = useUIKitTheme();\n const [imageNotFound, setImageNotFound] = useState(false);\n\n const key = useRetry(imageNotFound);\n return (\n <Box\n style={[{ overflow: 'hidden', width: props.width, height: props.height }, props.style]}\n backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n >\n <Image\n key={key}\n source={props.source}\n style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}\n resizeMode={'cover'}\n resizeMethod={'resize'}\n onError={() => setImageNotFound(true)}\n onLoad={() => setImageNotFound(false)}\n />\n {imageNotFound && (\n <Icon\n containerStyle={StyleSheet.absoluteFill}\n icon={'thumbnail-none'}\n size={48}\n color={colors.onBackground02}\n />\n )}\n </Box>\n );\n};\n\nconst styles = createStyleSheet({\n hide: {\n display: 'none',\n },\n});\n\nexport default ImageWithPlaceholder;\n"],"mappings":"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"}
|
|
@@ -1,34 +1,39 @@
|
|
|
1
1
|
import { StyleSheet } from 'react-native';
|
|
2
2
|
import { DEFAULT_SCALE_FACTOR } from './createScaleFactor';
|
|
3
|
-
const
|
|
3
|
+
const SCALE_FACTOR_WITH_DIMENSION_VALUE = val => {
|
|
4
|
+
return typeof val === 'number' ? DEFAULT_SCALE_FACTOR(val) : val;
|
|
5
|
+
};
|
|
6
|
+
const DEFAULT_SCALE_FACTOR_WITH_NUMERIC_VALUE = val => {
|
|
7
|
+
return typeof val === 'number' ? DEFAULT_SCALE_FACTOR(val) : val;
|
|
8
|
+
};
|
|
4
9
|
const preProcessor = {
|
|
5
10
|
'fontSize': DEFAULT_SCALE_FACTOR,
|
|
6
11
|
'lineHeight': DEFAULT_SCALE_FACTOR,
|
|
7
|
-
'borderRadius':
|
|
8
|
-
'minWidth':
|
|
9
|
-
'maxWidth':
|
|
10
|
-
'minHeight':
|
|
11
|
-
'maxHeight':
|
|
12
|
-
'height':
|
|
13
|
-
'width':
|
|
14
|
-
'padding':
|
|
15
|
-
'paddingVertical':
|
|
16
|
-
'paddingHorizontal':
|
|
17
|
-
'paddingTop':
|
|
18
|
-
'paddingBottom':
|
|
19
|
-
'paddingLeft':
|
|
20
|
-
'paddingRight':
|
|
21
|
-
'margin':
|
|
22
|
-
'marginVertical':
|
|
23
|
-
'marginHorizontal':
|
|
24
|
-
'marginTop':
|
|
25
|
-
'marginBottom':
|
|
26
|
-
'marginLeft':
|
|
27
|
-
'marginRight':
|
|
28
|
-
'left':
|
|
29
|
-
'right':
|
|
30
|
-
'top':
|
|
31
|
-
'bottom':
|
|
12
|
+
'borderRadius': DEFAULT_SCALE_FACTOR_WITH_NUMERIC_VALUE,
|
|
13
|
+
'minWidth': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
14
|
+
'maxWidth': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
15
|
+
'minHeight': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
16
|
+
'maxHeight': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
17
|
+
'height': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
18
|
+
'width': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
19
|
+
'padding': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
20
|
+
'paddingVertical': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
21
|
+
'paddingHorizontal': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
22
|
+
'paddingTop': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
23
|
+
'paddingBottom': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
24
|
+
'paddingLeft': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
25
|
+
'paddingRight': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
26
|
+
'margin': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
27
|
+
'marginVertical': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
28
|
+
'marginHorizontal': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
29
|
+
'marginTop': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
30
|
+
'marginBottom': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
31
|
+
'marginLeft': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
32
|
+
'marginRight': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
33
|
+
'left': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
34
|
+
'right': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
35
|
+
'top': SCALE_FACTOR_WITH_DIMENSION_VALUE,
|
|
36
|
+
'bottom': SCALE_FACTOR_WITH_DIMENSION_VALUE
|
|
32
37
|
};
|
|
33
38
|
const preProcessorKeys = Object.keys(preProcessor);
|
|
34
39
|
const preProcessorLen = preProcessorKeys.length;
|
|
@@ -39,6 +44,7 @@ const preProcessorLen = preProcessorKeys.length;
|
|
|
39
44
|
* @param styles
|
|
40
45
|
* @returns StyleSheet
|
|
41
46
|
* */
|
|
47
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
42
48
|
const createStyleSheet = styles => {
|
|
43
49
|
Object.values(styles).forEach(style => {
|
|
44
50
|
// @ts-ignore
|
|
@@ -52,5 +58,7 @@ const createStyleSheet = styles => {
|
|
|
52
58
|
});
|
|
53
59
|
return StyleSheet.create(styles);
|
|
54
60
|
};
|
|
61
|
+
/* eslint-enable @typescript-eslint/no-explicit-any */
|
|
62
|
+
|
|
55
63
|
export default createStyleSheet;
|
|
56
64
|
//# sourceMappingURL=createStyleSheet.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","DEFAULT_SCALE_FACTOR","
|
|
1
|
+
{"version":3,"names":["StyleSheet","DEFAULT_SCALE_FACTOR","SCALE_FACTOR_WITH_DIMENSION_VALUE","val","DEFAULT_SCALE_FACTOR_WITH_NUMERIC_VALUE","preProcessor","preProcessorKeys","Object","keys","preProcessorLen","length","createStyleSheet","styles","values","forEach","style","styleKeys","styleLen","key","create"],"sources":["createStyleSheet.ts"],"sourcesContent":["import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from 'react-native';\nimport { AnimatableNumericValue, DimensionValue } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';\n\nimport { DEFAULT_SCALE_FACTOR } from './createScaleFactor';\n\ntype Styles = ViewStyle | TextStyle | ImageStyle;\ntype StylePreprocessor<T extends Styles = Styles> = { [key in keyof T]: (val: NonNullable<T[key]>) => typeof val };\n\nconst SCALE_FACTOR_WITH_DIMENSION_VALUE = (\n val: NonNullable<DimensionValue | undefined>,\n): NonNullable<DimensionValue | undefined> => {\n return typeof val === 'number' ? DEFAULT_SCALE_FACTOR(val) : val;\n};\n\nconst DEFAULT_SCALE_FACTOR_WITH_NUMERIC_VALUE = (\n val: NonNullable<AnimatableNumericValue | undefined>,\n): NonNullable<AnimatableNumericValue | undefined> => {\n return typeof val === 'number' ? DEFAULT_SCALE_FACTOR(val) : val;\n};\n\nconst preProcessor: Partial<StylePreprocessor> = {\n 'fontSize': DEFAULT_SCALE_FACTOR,\n 'lineHeight': DEFAULT_SCALE_FACTOR,\n 'borderRadius': DEFAULT_SCALE_FACTOR_WITH_NUMERIC_VALUE,\n 'minWidth': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'maxWidth': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'minHeight': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'maxHeight': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'height': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'width': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'padding': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'paddingVertical': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'paddingHorizontal': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'paddingTop': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'paddingBottom': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'paddingLeft': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'paddingRight': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'margin': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'marginVertical': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'marginHorizontal': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'marginTop': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'marginBottom': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'marginLeft': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'marginRight': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'left': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'right': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'top': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n 'bottom': SCALE_FACTOR_WITH_DIMENSION_VALUE,\n};\n\nconst preProcessorKeys = Object.keys(preProcessor);\nconst preProcessorLen = preProcessorKeys.length;\n\n/**\n * Create StyleSheet with customized pre-processor\n * Return a StyleSheet that pre-processed\n * @param styles\n * @returns StyleSheet\n * */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nconst createStyleSheet = <T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(\n styles: T & StyleSheet.NamedStyles<any>,\n): T => {\n Object.values(styles).forEach((style) => {\n // @ts-ignore\n const styleKeys = Object.keys(style);\n const styleLen = styleKeys.length;\n\n const keys = styleLen < preProcessorLen ? styleKeys : preProcessorKeys;\n keys.forEach((key) => {\n // @ts-ignore\n if (preProcessor[key] && typeof style[key] !== 'undefined') style[key] = preProcessor[key](style[key]);\n });\n });\n\n return StyleSheet.create<T>(styles);\n};\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport default createStyleSheet;\n"],"mappings":"AAAA,SAAqBA,UAAU,QAA8B,cAAc;AAG3E,SAASC,oBAAoB,QAAQ,qBAAqB;AAK1D,MAAMC,iCAAiC,GACrCC,GAA4C,IACA;EAC5C,OAAO,OAAOA,GAAG,KAAK,QAAQ,GAAGF,oBAAoB,CAACE,GAAG,CAAC,GAAGA,GAAG;AAClE,CAAC;AAED,MAAMC,uCAAuC,GAC3CD,GAAoD,IACA;EACpD,OAAO,OAAOA,GAAG,KAAK,QAAQ,GAAGF,oBAAoB,CAACE,GAAG,CAAC,GAAGA,GAAG;AAClE,CAAC;AAED,MAAME,YAAwC,GAAG;EAC/C,UAAU,EAAEJ,oBAAoB;EAChC,YAAY,EAAEA,oBAAoB;EAClC,cAAc,EAAEG,uCAAuC;EACvD,UAAU,EAAEF,iCAAiC;EAC7C,UAAU,EAAEA,iCAAiC;EAC7C,WAAW,EAAEA,iCAAiC;EAC9C,WAAW,EAAEA,iCAAiC;EAC9C,QAAQ,EAAEA,iCAAiC;EAC3C,OAAO,EAAEA,iCAAiC;EAC1C,SAAS,EAAEA,iCAAiC;EAC5C,iBAAiB,EAAEA,iCAAiC;EACpD,mBAAmB,EAAEA,iCAAiC;EACtD,YAAY,EAAEA,iCAAiC;EAC/C,eAAe,EAAEA,iCAAiC;EAClD,aAAa,EAAEA,iCAAiC;EAChD,cAAc,EAAEA,iCAAiC;EACjD,QAAQ,EAAEA,iCAAiC;EAC3C,gBAAgB,EAAEA,iCAAiC;EACnD,kBAAkB,EAAEA,iCAAiC;EACrD,WAAW,EAAEA,iCAAiC;EAC9C,cAAc,EAAEA,iCAAiC;EACjD,YAAY,EAAEA,iCAAiC;EAC/C,aAAa,EAAEA,iCAAiC;EAChD,MAAM,EAAEA,iCAAiC;EACzC,OAAO,EAAEA,iCAAiC;EAC1C,KAAK,EAAEA,iCAAiC;EACxC,QAAQ,EAAEA;AACZ,CAAC;AAED,MAAMI,gBAAgB,GAAGC,MAAM,CAACC,IAAI,CAACH,YAAY,CAAC;AAClD,MAAMI,eAAe,GAAGH,gBAAgB,CAACI,MAAM;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GACpBC,MAAuC,IACjC;EACNL,MAAM,CAACM,MAAM,CAACD,MAAM,CAAC,CAACE,OAAO,CAAEC,KAAK,IAAK;IACvC;IACA,MAAMC,SAAS,GAAGT,MAAM,CAACC,IAAI,CAACO,KAAK,CAAC;IACpC,MAAME,QAAQ,GAAGD,SAAS,CAACN,MAAM;IAEjC,MAAMF,IAAI,GAAGS,QAAQ,GAAGR,eAAe,GAAGO,SAAS,GAAGV,gBAAgB;IACtEE,IAAI,CAACM,OAAO,CAAEI,GAAG,IAAK;MACpB;MACA,IAAIb,YAAY,CAACa,GAAG,CAAC,IAAI,OAAOH,KAAK,CAACG,GAAG,CAAC,KAAK,WAAW,EAAEH,KAAK,CAACG,GAAG,CAAC,GAAGb,YAAY,CAACa,GAAG,CAAC,CAACH,KAAK,CAACG,GAAG,CAAC,CAAC;IACxG,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,OAAOlB,UAAU,CAACmB,MAAM,CAAIP,MAAM,CAAC;AACrC,CAAC;AACD;;AAEA,eAAeD,gBAAgB"}
|
|
@@ -16,7 +16,10 @@ const VoiceFileMessage = props => {
|
|
|
16
16
|
onToggleVoiceMessage,
|
|
17
17
|
message,
|
|
18
18
|
durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
|
|
19
|
-
onUnmount
|
|
19
|
+
onUnmount,
|
|
20
|
+
initialCurrentTime,
|
|
21
|
+
onSubscribeStatus,
|
|
22
|
+
onUnsubscribeStatus
|
|
20
23
|
} = props;
|
|
21
24
|
const {
|
|
22
25
|
colors
|
|
@@ -28,7 +31,7 @@ const VoiceFileMessage = props => {
|
|
|
28
31
|
const initialDuration = value ? parseInt(value, 10) : 0;
|
|
29
32
|
return {
|
|
30
33
|
status: 'paused',
|
|
31
|
-
currentTime: 0,
|
|
34
|
+
currentTime: initialCurrentTime || 0,
|
|
32
35
|
duration: initialDuration
|
|
33
36
|
};
|
|
34
37
|
});
|
|
@@ -37,6 +40,18 @@ const VoiceFileMessage = props => {
|
|
|
37
40
|
onUnmount();
|
|
38
41
|
};
|
|
39
42
|
}, []);
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
const updateCurrentTime = currentTime => {
|
|
45
|
+
setState(prev => ({
|
|
46
|
+
...prev,
|
|
47
|
+
currentTime
|
|
48
|
+
}));
|
|
49
|
+
};
|
|
50
|
+
onSubscribeStatus === null || onSubscribeStatus === void 0 ? void 0 : onSubscribeStatus(props.channel.url, props.message.messageId, updateCurrentTime);
|
|
51
|
+
return () => {
|
|
52
|
+
onUnsubscribeStatus === null || onUnsubscribeStatus === void 0 ? void 0 : onUnsubscribeStatus(props.channel.url, props.message.messageId, updateCurrentTime);
|
|
53
|
+
};
|
|
54
|
+
}, []);
|
|
40
55
|
const uiColors = colors.ui.groupChannelMessage[variant];
|
|
41
56
|
const remainingTime = state.duration - state.currentTime;
|
|
42
57
|
return /*#__PURE__*/React.createElement(MessageContainer, props, /*#__PURE__*/React.createElement(Box, {
|
|
@@ -1 +1 @@
|
|
|
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":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAGlD,SAASC,UAAU,QAAQ,uBAAuB;AAElD,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,WAAW,MAAM,8BAA8B;AACtD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,gBAAgB,MAAM,oBAAoB;
|
|
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","initialCurrentTime","onSubscribeStatus","onUnsubscribeStatus","colors","state","setState","_meta$value","meta","metaArrays","find","it","key","value","initialDuration","parseInt","status","currentTime","duration","updateCurrentTime","prev","channel","url","messageId","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 initialCurrentTime?: number;\n onSubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;\n onUnsubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => 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 initialCurrentTime,\n onSubscribeStatus,\n onUnsubscribeStatus,\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: initialCurrentTime || 0,\n duration: initialDuration,\n };\n });\n\n useEffect(() => {\n return () => {\n onUnmount();\n };\n }, []);\n\n useEffect(() => {\n const updateCurrentTime = (currentTime: number) => {\n setState((prev) => ({ ...prev, currentTime }));\n };\n onSubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);\n return () => {\n onUnsubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);\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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"}
|
|
@@ -17,6 +17,7 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
|
|
|
17
17
|
var _message$sender;
|
|
18
18
|
let {
|
|
19
19
|
children,
|
|
20
|
+
replyInfo,
|
|
20
21
|
groupedWithNext,
|
|
21
22
|
groupedWithPrev,
|
|
22
23
|
message,
|
|
@@ -29,6 +30,10 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
|
|
|
29
30
|
} = useUIKitTheme();
|
|
30
31
|
const color = colors.ui.groupChannelMessage.incoming;
|
|
31
32
|
return /*#__PURE__*/React.createElement(Box, {
|
|
33
|
+
flexDirection: 'column',
|
|
34
|
+
justifyContent: 'flex-start',
|
|
35
|
+
alignItems: 'flex-start'
|
|
36
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
32
37
|
flexDirection: 'row',
|
|
33
38
|
justifyContent: 'flex-start',
|
|
34
39
|
alignItems: 'flex-end'
|
|
@@ -42,7 +47,7 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
|
|
|
42
47
|
uri: (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.profileUrl
|
|
43
48
|
}))), /*#__PURE__*/React.createElement(Box, {
|
|
44
49
|
flexShrink: 1
|
|
45
|
-
}, parentMessage, !groupedWithPrev && !
|
|
50
|
+
}, parentMessage, !groupedWithPrev && !parentMessage && /*#__PURE__*/React.createElement(Box, {
|
|
46
51
|
marginLeft: 12,
|
|
47
52
|
marginBottom: 4
|
|
48
53
|
}, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/React.createElement(Text, {
|
|
@@ -59,11 +64,19 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
|
|
|
59
64
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
60
65
|
caption4: true,
|
|
61
66
|
color: color.enabled.textTime
|
|
62
|
-
}, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? getMessageTimeFormat(new Date(message.createdAt)))))))
|
|
67
|
+
}, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? getMessageTimeFormat(new Date(message.createdAt))))))), /*#__PURE__*/React.createElement(Box, {
|
|
68
|
+
flexDirection: 'row',
|
|
69
|
+
marginTop: 4
|
|
70
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
71
|
+
width: 26,
|
|
72
|
+
marginRight: 12,
|
|
73
|
+
justifyContent: 'flex-start'
|
|
74
|
+
}), replyInfo));
|
|
63
75
|
};
|
|
64
76
|
MessageContainer.Outgoing = function MessageContainerOutgoing(_ref2) {
|
|
65
77
|
let {
|
|
66
78
|
children,
|
|
79
|
+
replyInfo,
|
|
67
80
|
message,
|
|
68
81
|
groupedWithNext,
|
|
69
82
|
strings,
|
|
@@ -91,7 +104,11 @@ MessageContainer.Outgoing = function MessageContainerOutgoing(_ref2) {
|
|
|
91
104
|
color: color.enabled.textTime
|
|
92
105
|
}, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? getMessageTimeFormat(new Date(message.createdAt))))), /*#__PURE__*/React.createElement(Box, {
|
|
93
106
|
style: styles.bubble
|
|
94
|
-
}, children))
|
|
107
|
+
}, children)), /*#__PURE__*/React.createElement(Box, {
|
|
108
|
+
flexDirection: 'row',
|
|
109
|
+
justifyContent: 'flex-end',
|
|
110
|
+
marginTop: 4
|
|
111
|
+
}, replyInfo));
|
|
95
112
|
};
|
|
96
113
|
const styles = createStyleSheet({
|
|
97
114
|
bubble: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Pressable","getMessageTimeFormat","Box","Text","createStyleSheet","useUIKitTheme","Avatar","MessageContainer","props","variant","createElement","Incoming","Outgoing","MessageContainerIncoming","_ref","_message$sender","children","groupedWithNext","groupedWithPrev","message","onPressAvatar","strings","parentMessage","colors","color","ui","groupChannelMessage","incoming","flexDirection","justifyContent","alignItems","width","marginRight","isFileMessage","isUserMessage","onPress","size","uri","sender","profileUrl","flexShrink","marginLeft","marginBottom","caption1","enabled","textSenderName","numberOfLines","senderName","nickname","style","styles","bubble","caption4","textTime","sentDate","Date","createdAt","MessageContainerOutgoing","_ref2","sendingStatus","outgoing","maxWidth","overflow"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\n\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { getMessageTimeFormat } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<SendbirdMessage>;\n\nconst MessageContainer = (props: Props) => {\n if (props.variant === 'incoming') {\n return <MessageContainer.Incoming {...props} />;\n } else {\n return <MessageContainer.Outgoing {...props} />;\n }\n};\n\nMessageContainer.Incoming = function MessageContainerIncoming({\n children,\n groupedWithNext,\n groupedWithPrev,\n message,\n onPressAvatar,\n strings,\n parentMessage,\n}: Props) {\n const { colors } = useUIKitTheme();\n const color = colors.ui.groupChannelMessage.incoming;\n\n return (\n <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>\n
|
|
1
|
+
{"version":3,"names":["React","Pressable","getMessageTimeFormat","Box","Text","createStyleSheet","useUIKitTheme","Avatar","MessageContainer","props","variant","createElement","Incoming","Outgoing","MessageContainerIncoming","_ref","_message$sender","children","replyInfo","groupedWithNext","groupedWithPrev","message","onPressAvatar","strings","parentMessage","colors","color","ui","groupChannelMessage","incoming","flexDirection","justifyContent","alignItems","width","marginRight","isFileMessage","isUserMessage","onPress","size","uri","sender","profileUrl","flexShrink","marginLeft","marginBottom","caption1","enabled","textSenderName","numberOfLines","senderName","nickname","style","styles","bubble","caption4","textTime","sentDate","Date","createdAt","marginTop","MessageContainerOutgoing","_ref2","sendingStatus","outgoing","maxWidth","overflow"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\n\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { getMessageTimeFormat } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<SendbirdMessage>;\n\nconst MessageContainer = (props: Props) => {\n if (props.variant === 'incoming') {\n return <MessageContainer.Incoming {...props} />;\n } else {\n return <MessageContainer.Outgoing {...props} />;\n }\n};\n\nMessageContainer.Incoming = function MessageContainerIncoming({\n children,\n replyInfo,\n groupedWithNext,\n groupedWithPrev,\n message,\n onPressAvatar,\n strings,\n parentMessage,\n}: Props) {\n const { colors } = useUIKitTheme();\n const color = colors.ui.groupChannelMessage.incoming;\n\n return (\n <Box flexDirection={'column'} justifyContent={'flex-start'} alignItems={'flex-start'}>\n <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>\n <Box width={26} marginRight={12}>\n {(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (\n <Pressable onPress={onPressAvatar}>\n <Avatar size={26} uri={message.sender?.profileUrl} />\n </Pressable>\n )}\n </Box>\n <Box flexShrink={1}>\n {parentMessage}\n {!groupedWithPrev && !parentMessage && (\n <Box marginLeft={12} marginBottom={4}>\n {(message.isFileMessage() || message.isUserMessage()) && (\n <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>\n {strings?.senderName ?? message.sender.nickname}\n </Text>\n )}\n </Box>\n )}\n <Box flexDirection={'row'} alignItems={'flex-end'}>\n <Box style={styles.bubble}>{children}</Box>\n {!groupedWithNext && (\n <Box marginLeft={4}>\n <Text caption4 color={color.enabled.textTime}>\n {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n </Text>\n </Box>\n )}\n </Box>\n </Box>\n </Box>\n <Box flexDirection={'row'} marginTop={4}>\n <Box width={26} marginRight={12} justifyContent={'flex-start'} />\n {replyInfo}\n </Box>\n </Box>\n );\n};\n\nMessageContainer.Outgoing = function MessageContainerOutgoing({\n children,\n replyInfo,\n message,\n groupedWithNext,\n strings,\n sendingStatus,\n parentMessage,\n}: Props) {\n const { colors } = useUIKitTheme();\n const color = colors.ui.groupChannelMessage.outgoing;\n\n return (\n <Box>\n {parentMessage}\n <Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>\n <Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>\n {sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}\n {!groupedWithNext && (\n <Box marginRight={4}>\n <Text caption4 color={color.enabled.textTime}>\n {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n </Text>\n </Box>\n )}\n </Box>\n <Box style={styles.bubble}>{children}</Box>\n </Box>\n <Box flexDirection={'row'} justifyContent={'flex-end'} marginTop={4}>\n {replyInfo}\n </Box>\n </Box>\n );\n};\n\nconst styles = createStyleSheet({\n bubble: {\n maxWidth: 240,\n overflow: 'hidden',\n flexShrink: 1,\n },\n});\n\nexport default MessageContainer;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;
|
|
1
|
+
{"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 replyInfo?: 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;AAiC7C,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"}
|
|
@@ -4,8 +4,8 @@ type Props = {
|
|
|
4
4
|
source: number | {
|
|
5
5
|
uri: string;
|
|
6
6
|
};
|
|
7
|
-
width?: number |
|
|
8
|
-
height?: number |
|
|
7
|
+
width?: number | `${number}%`;
|
|
8
|
+
height?: number | `${number}%`;
|
|
9
9
|
style?: StyleProp<ViewStyle>;
|
|
10
10
|
};
|
|
11
11
|
declare const ImageWithPlaceholder: (props: Props) => React.JSX.Element;
|
|
@@ -5,5 +5,5 @@ import { StyleSheet } from 'react-native';
|
|
|
5
5
|
* @param styles
|
|
6
6
|
* @returns StyleSheet
|
|
7
7
|
* */
|
|
8
|
-
declare const createStyleSheet: <T extends StyleSheet.NamedStyles<T>>(styles: T
|
|
8
|
+
declare const createStyleSheet: <T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(styles: T & StyleSheet.NamedStyles<any>) => T;
|
|
9
9
|
export default createStyleSheet;
|
|
@@ -15,7 +15,7 @@ declare const _default: (({ uri, square, muted, size, containerStyle }: Props) =
|
|
|
15
15
|
children?: React.ReactNode;
|
|
16
16
|
}) => React.JSX.Element;
|
|
17
17
|
Icon: ({ size, icon, containerStyle, backgroundColor }: {
|
|
18
|
-
icon: "message" | "recording" | "done" | "search" | "chat-hide" | "chat-show" | "add" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "delete" | "
|
|
18
|
+
icon: "message" | "recording" | "done" | "search" | "document" | "chat-hide" | "chat-show" | "add" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "delete" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "pause" | "photo" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "remove" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "stop" | "streaming" | "supergroup" | "theme" | "thread" | "thumbnail-none" | "unarchive" | "user";
|
|
19
19
|
size?: number | undefined;
|
|
20
20
|
backgroundColor?: string | undefined;
|
|
21
21
|
containerStyle?: StyleProp<ViewStyle>;
|
|
@@ -9,6 +9,9 @@ export type VoiceFileMessageState = {
|
|
|
9
9
|
type Props = GroupChannelMessageProps<SendbirdFileMessage, {
|
|
10
10
|
durationMetaArrayKey?: string;
|
|
11
11
|
onUnmount: () => void;
|
|
12
|
+
initialCurrentTime?: number;
|
|
13
|
+
onSubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
|
|
14
|
+
onUnsubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
|
|
12
15
|
}>;
|
|
13
16
|
declare const VoiceFileMessage: (props: Props) => React.JSX.Element;
|
|
14
17
|
export default VoiceFileMessage;
|
|
@@ -4,7 +4,7 @@ import type { GroupChannelMessageProps } from './index';
|
|
|
4
4
|
type Props = GroupChannelMessageProps<SendbirdMessage>;
|
|
5
5
|
declare const MessageContainer: {
|
|
6
6
|
(props: Props): React.JSX.Element;
|
|
7
|
-
Incoming({ children, groupedWithNext, groupedWithPrev, message, onPressAvatar, strings, parentMessage, }: Props): React.JSX.Element;
|
|
8
|
-
Outgoing({ children, message, groupedWithNext, strings, sendingStatus, parentMessage, }: Props): React.JSX.Element;
|
|
7
|
+
Incoming({ children, replyInfo, groupedWithNext, groupedWithPrev, message, onPressAvatar, strings, parentMessage, }: Props): React.JSX.Element;
|
|
8
|
+
Outgoing({ children, replyInfo, message, groupedWithNext, strings, sendingStatus, parentMessage, }: Props): React.JSX.Element;
|
|
9
9
|
};
|
|
10
10
|
export default MessageContainer;
|
|
@@ -16,6 +16,7 @@ export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps
|
|
|
16
16
|
children?: React.ReactNode;
|
|
17
17
|
sendingStatus?: React.ReactNode;
|
|
18
18
|
parentMessage?: React.ReactNode;
|
|
19
|
+
replyInfo?: React.ReactNode;
|
|
19
20
|
groupedWithPrev: boolean;
|
|
20
21
|
groupedWithNext: boolean;
|
|
21
22
|
onPress?: () => void;
|
|
@@ -41,6 +42,7 @@ declare const GroupChannelMessage: {
|
|
|
41
42
|
children?: React.ReactNode;
|
|
42
43
|
sendingStatus?: React.ReactNode;
|
|
43
44
|
parentMessage?: React.ReactNode;
|
|
45
|
+
replyInfo?: React.ReactNode;
|
|
44
46
|
groupedWithPrev: boolean;
|
|
45
47
|
groupedWithNext: boolean;
|
|
46
48
|
onPress?: (() => void) | undefined;
|
|
@@ -68,6 +70,7 @@ declare const GroupChannelMessage: {
|
|
|
68
70
|
children?: React.ReactNode;
|
|
69
71
|
sendingStatus?: React.ReactNode;
|
|
70
72
|
parentMessage?: React.ReactNode;
|
|
73
|
+
replyInfo?: React.ReactNode;
|
|
71
74
|
groupedWithPrev: boolean;
|
|
72
75
|
groupedWithNext: boolean;
|
|
73
76
|
onPress?: (() => void) | undefined;
|
|
@@ -95,6 +98,7 @@ declare const GroupChannelMessage: {
|
|
|
95
98
|
children?: React.ReactNode;
|
|
96
99
|
sendingStatus?: React.ReactNode;
|
|
97
100
|
parentMessage?: React.ReactNode;
|
|
101
|
+
replyInfo?: React.ReactNode;
|
|
98
102
|
groupedWithPrev: boolean;
|
|
99
103
|
groupedWithNext: boolean;
|
|
100
104
|
onPress?: (() => void) | undefined;
|
|
@@ -119,6 +123,7 @@ declare const GroupChannelMessage: {
|
|
|
119
123
|
children?: React.ReactNode;
|
|
120
124
|
sendingStatus?: React.ReactNode;
|
|
121
125
|
parentMessage?: React.ReactNode;
|
|
126
|
+
replyInfo?: React.ReactNode;
|
|
122
127
|
groupedWithPrev: boolean;
|
|
123
128
|
groupedWithNext: boolean;
|
|
124
129
|
onPress?: (() => void) | undefined;
|
|
@@ -143,6 +148,7 @@ declare const GroupChannelMessage: {
|
|
|
143
148
|
children?: React.ReactNode;
|
|
144
149
|
sendingStatus?: React.ReactNode;
|
|
145
150
|
parentMessage?: React.ReactNode;
|
|
151
|
+
replyInfo?: React.ReactNode;
|
|
146
152
|
groupedWithPrev: boolean;
|
|
147
153
|
groupedWithNext: boolean;
|
|
148
154
|
onPress?: (() => void) | undefined;
|
|
@@ -171,6 +177,7 @@ declare const GroupChannelMessage: {
|
|
|
171
177
|
children?: React.ReactNode;
|
|
172
178
|
sendingStatus?: React.ReactNode;
|
|
173
179
|
parentMessage?: React.ReactNode;
|
|
180
|
+
replyInfo?: React.ReactNode;
|
|
174
181
|
groupedWithPrev: boolean;
|
|
175
182
|
groupedWithNext: boolean;
|
|
176
183
|
onPress?: (() => void) | undefined;
|
|
@@ -182,6 +189,9 @@ declare const GroupChannelMessage: {
|
|
|
182
189
|
} & {
|
|
183
190
|
durationMetaArrayKey?: string | undefined;
|
|
184
191
|
onUnmount: () => void;
|
|
192
|
+
initialCurrentTime?: number | undefined;
|
|
193
|
+
onSubscribeStatus?: ((channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void) | undefined;
|
|
194
|
+
onUnsubscribeStatus?: ((channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void) | undefined;
|
|
185
195
|
}) => React.JSX.Element;
|
|
186
196
|
Admin: (props: {
|
|
187
197
|
channel: SendbirdGroupChannel;
|
|
@@ -198,6 +208,7 @@ declare const GroupChannelMessage: {
|
|
|
198
208
|
children?: React.ReactNode;
|
|
199
209
|
sendingStatus?: React.ReactNode;
|
|
200
210
|
parentMessage?: React.ReactNode;
|
|
211
|
+
replyInfo?: React.ReactNode;
|
|
201
212
|
groupedWithPrev: boolean;
|
|
202
213
|
groupedWithNext: boolean;
|
|
203
214
|
onPress?: (() => void) | undefined;
|
|
@@ -222,6 +233,7 @@ declare const GroupChannelMessage: {
|
|
|
222
233
|
children?: React.ReactNode;
|
|
223
234
|
sendingStatus?: React.ReactNode;
|
|
224
235
|
parentMessage?: React.ReactNode;
|
|
236
|
+
replyInfo?: React.ReactNode;
|
|
225
237
|
groupedWithPrev: boolean;
|
|
226
238
|
groupedWithNext: boolean;
|
|
227
239
|
onPress?: (() => void) | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sendbird/uikit-react-native-foundation",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.7.0",
|
|
4
4
|
"description": "A foundational UI kit for building chat-enabled React Native apps.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"sendbird",
|
|
@@ -48,16 +48,16 @@
|
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@sendbird/uikit-utils": "3.
|
|
51
|
+
"@sendbird/uikit-utils": "3.7.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@types/react": "*",
|
|
55
55
|
"@types/react-native": "*",
|
|
56
|
-
"react": "
|
|
57
|
-
"react-native": "0.
|
|
56
|
+
"react": "18.2.0",
|
|
57
|
+
"react-native": "0.74.3",
|
|
58
58
|
"react-native-builder-bob": "^0.18.0",
|
|
59
|
-
"react-native-fast-image": "^8.
|
|
60
|
-
"react-native-safe-area-context": "^
|
|
59
|
+
"react-native-fast-image": "^8.6.3",
|
|
60
|
+
"react-native-safe-area-context": "^4.10.8",
|
|
61
61
|
"typescript": "5.2.2"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
]
|
|
86
86
|
]
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "51d39985ece857b026d311c621ec3c555cf896a1"
|
|
89
89
|
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/src/assets/icon/index.ts
CHANGED
|
@@ -64,6 +64,7 @@ const IconAssets = {
|
|
|
64
64
|
'streaming': require('./icon-streaming.png'),
|
|
65
65
|
'supergroup': require('./icon-supergroup.png'),
|
|
66
66
|
'theme': require('./icon-theme.png'),
|
|
67
|
+
'thread': require('./icon-thread.png'),
|
|
67
68
|
'thumbnail-none': require('./icon-thumbnail-none.png'),
|
|
68
69
|
'unarchive': require('./icon-unarchive.png'),
|
|
69
70
|
'user': require('./icon-user.png'),
|
|
@@ -27,9 +27,9 @@ function convertSource(source: SendbirdImageProps['source']): Source | number {
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
return {
|
|
30
|
-
uri: source
|
|
31
|
-
headers: source
|
|
32
|
-
cache: convertCache(source
|
|
30
|
+
uri: source?.uri,
|
|
31
|
+
headers: source?.headers,
|
|
32
|
+
cache: convertCache(source?.cache), //'immutable' | 'web' | 'cacheOnly'
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
35
|
function convertDefaultSource(source?: SendbirdImageProps['defaultSource']): number | undefined {
|
|
@@ -40,8 +40,8 @@ const useRetry = (hasError: boolean, retryCount = 5) => {
|
|
|
40
40
|
|
|
41
41
|
type Props = {
|
|
42
42
|
source: number | { uri: string };
|
|
43
|
-
width?: number |
|
|
44
|
-
height?: number |
|
|
43
|
+
width?: number | `${number}%`;
|
|
44
|
+
height?: number | `${number}%`;
|
|
45
45
|
style?: StyleProp<ViewStyle>;
|
|
46
46
|
};
|
|
47
47
|
const ImageWithPlaceholder = (props: Props) => {
|