@sendbird/uikit-react-native-foundation 1.0.2 → 1.1.1

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.
Files changed (24) hide show
  1. package/lib/commonjs/styles/HeaderStyleContext.js +10 -2
  2. package/lib/commonjs/styles/HeaderStyleContext.js.map +1 -1
  3. package/lib/commonjs/styles/createScaleFactor.js +2 -1
  4. package/lib/commonjs/styles/createScaleFactor.js.map +1 -1
  5. package/lib/commonjs/ui/GroupChannelPreview/index.js +27 -19
  6. package/lib/commonjs/ui/GroupChannelPreview/index.js.map +1 -1
  7. package/lib/commonjs/ui/Header/index.js +3 -8
  8. package/lib/commonjs/ui/Header/index.js.map +1 -1
  9. package/lib/module/styles/HeaderStyleContext.js +10 -3
  10. package/lib/module/styles/HeaderStyleContext.js.map +1 -1
  11. package/lib/module/styles/createScaleFactor.js +2 -1
  12. package/lib/module/styles/createScaleFactor.js.map +1 -1
  13. package/lib/module/ui/GroupChannelPreview/index.js +27 -17
  14. package/lib/module/ui/GroupChannelPreview/index.js.map +1 -1
  15. package/lib/module/ui/Header/index.js +4 -8
  16. package/lib/module/ui/Header/index.js.map +1 -1
  17. package/lib/typescript/src/styles/HeaderStyleContext.d.ts +1 -0
  18. package/lib/typescript/src/styles/getDefaultHeaderHeight.d.ts +1 -1
  19. package/lib/typescript/src/ui/GroupChannelPreview/index.d.ts +3 -2
  20. package/package.json +3 -3
  21. package/src/styles/HeaderStyleContext.tsx +6 -1
  22. package/src/styles/createScaleFactor.ts +2 -1
  23. package/src/ui/GroupChannelPreview/index.tsx +39 -24
  24. package/src/ui/Header/index.tsx +3 -5
package/lib/commonjs/styles/HeaderStyleContext.js CHANGED
@@ -11,13 +11,16 @@ var _reactNative = require("react-native");
11
11
 
12
12
  var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
13
13
 
14
+ var _getDefaultHeaderHeight = _interopRequireDefault(require("./getDefaultHeaderHeight"));
15
+
14
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
17
 
16
18
  const HeaderStyleContext = /*#__PURE__*/_react.default.createContext({
17
19
  HeaderComponent: () => null,
18
20
  defaultTitleAlign: 'left',
19
21
  statusBarTranslucent: true,
20
- topInset: _reactNative.StatusBar.currentHeight ?? 0
22
+ topInset: _reactNative.StatusBar.currentHeight ?? 0,
23
+ defaultHeight: (0, _getDefaultHeaderHeight.default)(false)
21
24
  });
22
25
 
23
26
  exports.HeaderStyleContext = HeaderStyleContext;
@@ -32,12 +35,17 @@ const HeaderStyleProvider = _ref => {
32
35
  const {
33
36
  top
34
37
  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
38
+ const {
39
+ width,
40
+ height
41
+ } = (0, _reactNative.useWindowDimensions)();
35
42
  return /*#__PURE__*/_react.default.createElement(HeaderStyleContext.Provider, {
36
43
  value: {
37
44
  HeaderComponent,
38
45
  defaultTitleAlign,
39
46
  statusBarTranslucent,
40
- topInset: statusBarTranslucent ? top : 0
47
+ topInset: statusBarTranslucent ? top : 0,
48
+ defaultHeight: (0, _getDefaultHeaderHeight.default)(width > height)
41
49
  }
42
50
  }, children);
43
51
  };
package/lib/commonjs/styles/HeaderStyleContext.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["HeaderStyleContext","React","createContext","HeaderComponent","defaultTitleAlign","statusBarTranslucent","topInset","StatusBar","currentHeight","HeaderStyleProvider","children","top","useSafeAreaInsets"],"sources":["HeaderStyleContext.tsx"],"sourcesContent":["import React from 'react';\nimport { StatusBar } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport type { BaseHeaderProps, HeaderElement } from '../types';\n\nexport type HeaderStyleContextType = {\n HeaderComponent: (\n props: BaseHeaderProps<\n {\n title?: HeaderElement;\n left?: HeaderElement;\n right?: HeaderElement;\n onPressLeft?: () => void;\n onPressRight?: () => void;\n },\n { clearTitleMargin?: boolean }\n >,\n ) => React.ReactElement | null;\n defaultTitleAlign: 'left' | 'center';\n statusBarTranslucent: boolean;\n topInset: number;\n};\nexport const HeaderStyleContext = React.createContext<HeaderStyleContextType>({\n HeaderComponent: () => null,\n defaultTitleAlign: 'left',\n statusBarTranslucent: true,\n topInset: StatusBar.currentHeight ?? 0,\n});\n\ntype Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;\nexport const HeaderStyleProvider = ({\n children,\n HeaderComponent = () => null,\n defaultTitleAlign,\n statusBarTranslucent,\n}: React.PropsWithChildren<Props>) => {\n const { top } = useSafeAreaInsets();\n\n return (\n <HeaderStyleContext.Provider\n value={{\n HeaderComponent,\n defaultTitleAlign,\n statusBarTranslucent,\n topInset: statusBarTranslucent ? top : 0,\n }}\n >\n {children}\n </HeaderStyleContext.Provider>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAqBO,MAAMA,kBAAkB,gBAAGC,cAAA,CAAMC,aAAN,CAA4C;EAC5EC,eAAe,EAAE,MAAM,IADqD;EAE5EC,iBAAiB,EAAE,MAFyD;EAG5EC,oBAAoB,EAAE,IAHsD;EAI5EC,QAAQ,EAAEC,sBAAA,CAAUC,aAAV,IAA2B;AAJuC,CAA5C,CAA3B;;;;AAQA,MAAMC,mBAAmB,GAAG,QAKG;EAAA,IALF;IAClCC,QADkC;IAElCP,eAAe,GAAG,MAAM,IAFU;IAGlCC,iBAHkC;IAIlCC;EAJkC,CAKE;EACpC,MAAM;IAAEM;EAAF,IAAU,IAAAC,6CAAA,GAAhB;EAEA,oBACE,6BAAC,kBAAD,CAAoB,QAApB;IACE,KAAK,EAAE;MACLT,eADK;MAELC,iBAFK;MAGLC,oBAHK;MAILC,QAAQ,EAAED,oBAAoB,GAAGM,GAAH,GAAS;IAJlC;EADT,GAQGD,QARH,CADF;AAYD,CApBM"}
1
+ {"version":3,"names":["HeaderStyleContext","React","createContext","HeaderComponent","defaultTitleAlign","statusBarTranslucent","topInset","StatusBar","currentHeight","defaultHeight","getDefaultHeaderHeight","HeaderStyleProvider","children","top","useSafeAreaInsets","width","height","useWindowDimensions"],"sources":["HeaderStyleContext.tsx"],"sourcesContent":["import React from 'react';\nimport { StatusBar, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport type { BaseHeaderProps, HeaderElement } from '../types';\nimport getDefaultHeaderHeight from './getDefaultHeaderHeight';\n\nexport type HeaderStyleContextType = {\n HeaderComponent: (\n props: BaseHeaderProps<\n {\n title?: HeaderElement;\n left?: HeaderElement;\n right?: HeaderElement;\n onPressLeft?: () => void;\n onPressRight?: () => void;\n },\n { clearTitleMargin?: boolean }\n >,\n ) => React.ReactElement | null;\n defaultTitleAlign: 'left' | 'center';\n statusBarTranslucent: boolean;\n topInset: number;\n defaultHeight: number;\n};\nexport const HeaderStyleContext = React.createContext<HeaderStyleContextType>({\n HeaderComponent: () => null,\n defaultTitleAlign: 'left',\n statusBarTranslucent: true,\n topInset: StatusBar.currentHeight ?? 0,\n defaultHeight: getDefaultHeaderHeight(false),\n});\n\ntype Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;\nexport const HeaderStyleProvider = ({\n children,\n HeaderComponent = () => null,\n defaultTitleAlign,\n statusBarTranslucent,\n}: React.PropsWithChildren<Props>) => {\n const { top } = useSafeAreaInsets();\n const { width, height } = useWindowDimensions();\n\n return (\n <HeaderStyleContext.Provider\n value={{\n HeaderComponent,\n defaultTitleAlign,\n statusBarTranslucent,\n topInset: statusBarTranslucent ? top : 0,\n defaultHeight: getDefaultHeaderHeight(width > height),\n }}\n >\n {children}\n </HeaderStyleContext.Provider>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAGA;;;;AAoBO,MAAMA,kBAAkB,gBAAGC,cAAA,CAAMC,aAAN,CAA4C;EAC5EC,eAAe,EAAE,MAAM,IADqD;EAE5EC,iBAAiB,EAAE,MAFyD;EAG5EC,oBAAoB,EAAE,IAHsD;EAI5EC,QAAQ,EAAEC,sBAAA,CAAUC,aAAV,IAA2B,CAJuC;EAK5EC,aAAa,EAAE,IAAAC,+BAAA,EAAuB,KAAvB;AAL6D,CAA5C,CAA3B;;;;AASA,MAAMC,mBAAmB,GAAG,QAKG;EAAA,IALF;IAClCC,QADkC;IAElCT,eAAe,GAAG,MAAM,IAFU;IAGlCC,iBAHkC;IAIlCC;EAJkC,CAKE;EACpC,MAAM;IAAEQ;EAAF,IAAU,IAAAC,6CAAA,GAAhB;EACA,MAAM;IAAEC,KAAF;IAASC;EAAT,IAAoB,IAAAC,gCAAA,GAA1B;EAEA,oBACE,6BAAC,kBAAD,CAAoB,QAApB;IACE,KAAK,EAAE;MACLd,eADK;MAELC,iBAFK;MAGLC,oBAHK;MAILC,QAAQ,EAAED,oBAAoB,GAAGQ,GAAH,GAAS,CAJlC;MAKLJ,aAAa,EAAE,IAAAC,+BAAA,EAAuBK,KAAK,GAAGC,MAA/B;IALV;EADT,GASGJ,QATH,CADF;AAaD,CAtBM"}
package/lib/commonjs/styles/createScaleFactor.js CHANGED
@@ -17,7 +17,8 @@ const DESIGNED_DEVICE_WIDTH = 360;
17
17
  const createScaleFactor = function () {
18
18
  let deviceWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DESIGNED_DEVICE_WIDTH;
19
19
  const ratio = Math.min(width, height) / deviceWidth;
20
- return dp => _reactNative.PixelRatio.roundToNearestPixel(dp * ratio);
20
+ const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);
21
+ return dp => _reactNative.PixelRatio.roundToNearestPixel(dp * rangedRatio);
21
22
  };
22
23
 
23
24
  createScaleFactor.updateScaleFactor = scaleFactor => {
package/lib/commonjs/styles/createScaleFactor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["width","height","Dimensions","get","DESIGNED_DEVICE_WIDTH","createScaleFactor","deviceWidth","ratio","Math","min","dp","PixelRatio","roundToNearestPixel","updateScaleFactor","scaleFactor","DEFAULT_SCALE_FACTOR"],"sources":["createScaleFactor.ts"],"sourcesContent":["import { Dimensions, PixelRatio } from 'react-native';\n\nconst { width, height } = Dimensions.get('window');\n\nconst DESIGNED_DEVICE_WIDTH = 360;\n\nconst createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {\n const ratio = Math.min(width, height) / deviceWidth;\n return (dp: number) => PixelRatio.roundToNearestPixel(dp * ratio);\n};\n\ncreateScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {\n DEFAULT_SCALE_FACTOR = scaleFactor;\n};\n\nexport let DEFAULT_SCALE_FACTOR = createScaleFactor();\nexport default createScaleFactor;\n"],"mappings":";;;;;;;AAAA;;AAEA,MAAM;EAAEA,KAAF;EAASC;AAAT,IAAoBC,uBAAA,CAAWC,GAAX,CAAe,QAAf,CAA1B;;AAEA,MAAMC,qBAAqB,GAAG,GAA9B;;AAEA,MAAMC,iBAAiB,GAAG,YAAyC;EAAA,IAAxCC,WAAwC,uEAA1BF,qBAA0B;EACjE,MAAMG,KAAK,GAAGC,IAAI,CAACC,GAAL,CAAST,KAAT,EAAgBC,MAAhB,IAA0BK,WAAxC;EACA,OAAQI,EAAD,IAAgBC,uBAAA,CAAWC,mBAAX,CAA+BF,EAAE,GAAGH,KAApC,CAAvB;AACD,CAHD;;AAKAF,iBAAiB,CAACQ,iBAAlB,GAAuCC,WAAD,IAAyC;EAC7E,+BAAAC,oBAAoB,GAAGD,WAAvB;AACD,CAFD;;AAIO,IAAIC,oBAAoB,GAAGV,iBAAiB,EAA5C;;eACQA,iB"}
1
+ {"version":3,"names":["width","height","Dimensions","get","DESIGNED_DEVICE_WIDTH","createScaleFactor","deviceWidth","ratio","Math","min","rangedRatio","max","dp","PixelRatio","roundToNearestPixel","updateScaleFactor","scaleFactor","DEFAULT_SCALE_FACTOR"],"sources":["createScaleFactor.ts"],"sourcesContent":["import { Dimensions, PixelRatio } from 'react-native';\n\nconst { width, height } = Dimensions.get('window');\n\nconst DESIGNED_DEVICE_WIDTH = 360;\n\nconst createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {\n const ratio = Math.min(width, height) / deviceWidth;\n const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);\n return (dp: number) => PixelRatio.roundToNearestPixel(dp * rangedRatio);\n};\n\ncreateScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {\n DEFAULT_SCALE_FACTOR = scaleFactor;\n};\n\nexport let DEFAULT_SCALE_FACTOR = createScaleFactor();\nexport default createScaleFactor;\n"],"mappings":";;;;;;;AAAA;;AAEA,MAAM;EAAEA,KAAF;EAASC;AAAT,IAAoBC,uBAAA,CAAWC,GAAX,CAAe,QAAf,CAA1B;;AAEA,MAAMC,qBAAqB,GAAG,GAA9B;;AAEA,MAAMC,iBAAiB,GAAG,YAAyC;EAAA,IAAxCC,WAAwC,uEAA1BF,qBAA0B;EACjE,MAAMG,KAAK,GAAGC,IAAI,CAACC,GAAL,CAAST,KAAT,EAAgBC,MAAhB,IAA0BK,WAAxC;EACA,MAAMI,WAAW,GAAGF,IAAI,CAACC,GAAL,CAASD,IAAI,CAACG,GAAL,CAAS,IAAT,EAAeJ,KAAf,CAAT,EAAgC,IAAhC,CAApB;EACA,OAAQK,EAAD,IAAgBC,uBAAA,CAAWC,mBAAX,CAA+BF,EAAE,GAAGF,WAApC,CAAvB;AACD,CAJD;;AAMAL,iBAAiB,CAACU,iBAAlB,GAAuCC,WAAD,IAAyC;EAC7E,+BAAAC,oBAAoB,GAAGD,WAAvB;AACD,CAFD;;AAIO,IAAIC,oBAAoB,GAAGZ,iBAAiB,EAA5C;;eACQA,iB"}
package/lib/commonjs/ui/GroupChannelPreview/index.js CHANGED
@@ -36,6 +36,7 @@ const GroupChannelPreview = _ref => {
36
36
  bodyIcon,
37
37
  title,
38
38
  titleCaption,
39
+ titleCaptionLeft,
39
40
  frozen,
40
41
  notificationOff
41
42
  } = _ref;
@@ -62,7 +63,7 @@ const GroupChannelPreview = _ref => {
62
63
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
63
64
  style: styles.rightTopSection
64
65
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
65
- style: styles.channelInfo
66
+ style: styles.channelInfoContainer
66
67
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
67
68
  numberOfLines: 1,
68
69
  subtitle1: true,
@@ -82,16 +83,17 @@ const GroupChannelPreview = _ref => {
82
83
  icon: 'notifications-off-filled',
83
84
  color: colors.onBackground03
84
85
  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
85
- style: styles.titleCaption
86
- }, /*#__PURE__*/_react.default.createElement(_Text.default, {
86
+ style: styles.titleCaptionContainer
87
+ }, titleCaptionLeft, /*#__PURE__*/_react.default.createElement(_Text.default, {
87
88
  caption2: true,
88
- color: color.default.none.textTitleCaption
89
+ color: color.default.none.textTitleCaption,
90
+ style: styles.titleCaptionText
89
91
  }, titleCaption))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
90
92
  style: styles.rightBottomSection
91
93
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
92
- style: [styles.body, bodyIcon && {
93
- alignItems: 'center'
94
- }]
94
+ style: styles.body
95
+ }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
96
+ style: styles.bodyWrapper
95
97
  }, bodyIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
96
98
  size: 18,
97
99
  icon: bodyIcon,
@@ -104,7 +106,7 @@ const GroupChannelPreview = _ref => {
104
106
  numberOfLines: 1,
105
107
  style: styles.bodyText,
106
108
  color: color.default.none.textBody
107
- }, body)), /*#__PURE__*/_react.default.createElement(_reactNative.View, null, badgeCount > 0 && /*#__PURE__*/_react.default.createElement(_Badge.default, {
109
+ }, body))), /*#__PURE__*/_react.default.createElement(_reactNative.View, null, badgeCount > 0 && /*#__PURE__*/_react.default.createElement(_Badge.default, {
108
110
  count: badgeCount,
109
111
  maxCount: maxBadgeCount
110
112
  })))), /*#__PURE__*/_react.default.createElement(Separator, {
@@ -125,10 +127,11 @@ const Separator = _ref2 => {
125
127
 
126
128
  const styles = (0, _createStyleSheet.default)({
127
129
  container: {
130
+ height: 76,
128
131
  width: '100%',
129
132
  flexDirection: 'row',
130
133
  paddingHorizontal: 16,
131
- paddingVertical: 10,
134
+ paddingTop: 10,
132
135
  alignItems: 'center'
133
136
  },
134
137
  coverContainer: {
@@ -146,7 +149,7 @@ const styles = (0, _createStyleSheet.default)({
146
149
  flexDirection: 'row',
147
150
  marginBottom: 4
148
151
  },
149
- channelInfo: {
152
+ channelInfoContainer: {
150
153
  flex: 1,
151
154
  marginRight: 4,
152
155
  alignItems: 'center',
@@ -163,9 +166,13 @@ const styles = (0, _createStyleSheet.default)({
163
166
  channelInfoFrozen: {
164
167
  marginRight: 4
165
168
  },
166
- titleCaption: {
167
- marginLeft: 4,
168
- paddingTop: 2
169
+ titleCaptionContainer: {
170
+ alignItems: 'flex-start',
171
+ flexDirection: 'row',
172
+ marginLeft: 4
173
+ },
174
+ titleCaptionText: {
175
+ marginTop: 2
169
176
  },
170
177
  rightBottomSection: {
171
178
  flex: 1,
@@ -175,9 +182,12 @@ const styles = (0, _createStyleSheet.default)({
175
182
  body: {
176
183
  marginRight: 4,
177
184
  flex: 1,
178
- justifyContent: 'center',
179
- alignItems: 'flex-start',
180
- flexDirection: 'row'
185
+ flexDirection: 'row',
186
+ alignItems: 'flex-start'
187
+ },
188
+ bodyWrapper: {
189
+ flexDirection: 'row',
190
+ alignItems: 'center'
181
191
  },
182
192
  bodyText: {
183
193
  flex: 1
@@ -203,8 +213,6 @@ const styles = (0, _createStyleSheet.default)({
203
213
  width: '84.5%'
204
214
  }
205
215
  });
206
-
207
- var _default = /*#__PURE__*/_react.default.memo(GroupChannelPreview);
208
-
216
+ var _default = GroupChannelPreview;
209
217
  exports.default = _default;
210
218
  //# sourceMappingURL=index.js.map
package/lib/commonjs/ui/GroupChannelPreview/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["GroupChannelPreview","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","frozen","notificationOff","colors","useUIKitTheme","color","ui","groupChannelPreview","styles","container","backgroundColor","default","none","background","coverContainer","conditionChaining","Boolean","channelCover","coverBackground","uri","rightSection","rightTopSection","channelInfo","channelInfoTitle","textTitle","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","textTitleCaption","rightBottomSection","alignItems","bodyIconBackground","bodyText","textBody","separator","Separator","createStyleSheet","width","flexDirection","paddingHorizontal","paddingVertical","marginRight","height","borderRadius","flex","marginBottom","flexShrink","paddingTop","marginLeft","justifyContent","unreadBadge","minWidth","minHeight","position","right","bottom","React","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Badge from '../Badge';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype Props = {\n customCover?: React.ReactElement;\n coverUrl: string;\n\n title: string;\n titleCaption: string;\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};\n\nconst GroupChannelPreview = ({\n customCover,\n coverUrl,\n memberCount,\n badgeCount,\n maxBadgeCount,\n body,\n bodyIcon,\n title,\n titleCaption,\n frozen,\n notificationOff,\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.channelInfo}>\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.titleCaption}>\n <Text caption2 color={color.default.none.textTitleCaption}>\n {titleCaption}\n </Text>\n </View>\n </View>\n\n <View style={styles.rightBottomSection}>\n <View style={[styles.body, bodyIcon && { alignItems: 'center' }]}>\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 body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>\n {body}\n </Text>\n </View>\n <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>\n </View>\n </View>\n <Separator color={color.default.none.separator} />\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 width: '100%',\n flexDirection: 'row',\n paddingHorizontal: 16,\n paddingVertical: 10,\n alignItems: 'center',\n },\n coverContainer: {\n marginRight: 16,\n },\n channelCover: {\n width: 56,\n height: 56,\n borderRadius: 28,\n },\n rightSection: {\n flex: 1,\n },\n rightTopSection: {\n flexDirection: 'row',\n marginBottom: 4,\n },\n channelInfo: {\n flex: 1,\n marginRight: 4,\n alignItems: 'center',\n flexDirection: 'row',\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 titleCaption: {\n marginLeft: 4,\n paddingTop: 2,\n },\n rightBottomSection: {\n flex: 1,\n height: '100%',\n flexDirection: 'row',\n },\n body: {\n marginRight: 4,\n flex: 1,\n justifyContent: 'center',\n alignItems: 'flex-start',\n flexDirection: 'row',\n },\n bodyText: {\n flex: 1,\n },\n bodyIcon: {\n borderRadius: 8,\n width: 26,\n height: 26,\n marginRight: 4,\n },\n unreadBadge: {\n minWidth: 20,\n minHeight: 20,\n borderRadius: 99,\n alignItems: 'center',\n justifyContent: 'center',\n },\n separator: {\n position: 'absolute',\n right: 0,\n bottom: 0,\n height: 1,\n width: '84.5%',\n },\n});\n\nexport default React.memo(GroupChannelPreview);\n"],"mappings":"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"}
1
+ {"version":3,"names":["GroupChannelPreview","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","titleCaptionLeft","frozen","notificationOff","colors","useUIKitTheme","color","ui","groupChannelPreview","styles","container","backgroundColor","default","none","background","coverContainer","conditionChaining","Boolean","channelCover","coverBackground","uri","rightSection","rightTopSection","channelInfoContainer","channelInfoTitle","textTitle","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","titleCaptionContainer","textTitleCaption","titleCaptionText","rightBottomSection","bodyWrapper","bodyIconBackground","bodyText","textBody","separator","Separator","createStyleSheet","height","width","flexDirection","paddingHorizontal","paddingTop","alignItems","marginRight","borderRadius","flex","marginBottom","flexShrink","marginLeft","marginTop","unreadBadge","minWidth","minHeight","justifyContent","position","right","bottom"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Badge from '../Badge';\nimport Icon from '../Icon';\nimport Text from '../Text';\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};\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}: 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 <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 body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>\n {body}\n </Text>\n </View>\n </View>\n <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>\n </View>\n </View>\n <Separator color={color.default.none.separator} />\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 paddingHorizontal: 16,\n paddingTop: 10,\n alignItems: 'center',\n },\n coverContainer: {\n marginRight: 16,\n },\n channelCover: {\n width: 56,\n height: 56,\n borderRadius: 28,\n },\n rightSection: {\n flex: 1,\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 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 unreadBadge: {\n minWidth: 20,\n minHeight: 20,\n borderRadius: 99,\n alignItems: 'center',\n justifyContent: 'center',\n },\n separator: {\n position: 'absolute',\n right: 0,\n bottom: 0,\n height: 1,\n width: '84.5%',\n },\n});\n\nexport default GroupChannelPreview;\n"],"mappings":"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"}
package/lib/commonjs/ui/Header/index.js CHANGED
@@ -15,8 +15,6 @@ var _uikitUtils = require("@sendbird/uikit-utils");
15
15
 
16
16
  var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
17
17
 
18
- var _getDefaultHeaderHeight = _interopRequireDefault(require("../../styles/getDefaultHeaderHeight"));
19
-
20
18
  var _useHeaderStyle = _interopRequireDefault(require("../../styles/useHeaderStyle"));
21
19
 
22
20
  var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
@@ -46,12 +44,9 @@ const Header = _ref => {
46
44
  } = _ref;
47
45
  const {
48
46
  topInset,
49
- defaultTitleAlign
47
+ defaultTitleAlign,
48
+ defaultHeight
50
49
  } = (0, _useHeaderStyle.default)();
51
- const {
52
- width,
53
- height
54
- } = (0, _reactNative.useWindowDimensions)();
55
50
  const {
56
51
  colors
57
52
  } = (0, _useUIKitTheme.default)();
@@ -80,7 +75,7 @@ const Header = _ref => {
80
75
  }]
81
76
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
82
77
  style: [styles.header, {
83
- height: (0, _getDefaultHeaderHeight.default)(width > height)
78
+ height: defaultHeight
84
79
  }]
85
80
  }, /*#__PURE__*/_react.default.createElement(LeftSide, {
86
81
  titleAlign: actualTitleAlign,
package/lib/commonjs/ui/Header/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["AlignMapper","left","center","right","Header","children","titleAlign","title","onPressLeft","onPressRight","clearTitleMargin","topInset","defaultTitleAlign","useHeaderStyle","width","height","useWindowDimensions","colors","useUIKitTheme","paddingLeft","paddingRight","useSafeAreaInsets","actualTitleAlign","paddingTop","backgroundColor","ui","header","nav","none","background","styles","container","paddingHorizontal","borderBottomColor","borderBottom","getDefaultHeaderHeight","marginHorizontal","justifyContent","LeftSide","RightSide","HeaderTitle","style","props","HeaderSubtitle","onBackground03","HeaderButton","disabled","onPress","color","button","e","conditionChaining","createStyleSheet","borderBottomWidth","flexDirection","flex","alignItems","minWidth","marginRight","marginLeft","padding","Button","Title","Subtitle"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity, TouchableOpacityProps, View, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport type { BaseHeaderProps } from '../../index';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Text, { TextProps } from '../Text';\n\ntype HeaderElement = string | React.ReactElement | null;\ntype HeaderProps = BaseHeaderProps<\n {\n title?: HeaderElement;\n left?: HeaderElement;\n right?: HeaderElement;\n onPressLeft?: () => void;\n onPressRight?: () => void;\n },\n { clearTitleMargin?: boolean }\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}) => {\n const { topInset, defaultTitleAlign } = useHeaderStyle();\n const { width, height } = useWindowDimensions();\n const { colors } = useUIKitTheme();\n const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();\n\n const actualTitleAlign = titleAlign ?? defaultTitleAlign;\n\n if (!title && !left && !right) {\n return (\n <View style={{ paddingTop: topInset, backgroundColor: colors.ui.header.nav.none.background }}>{children}</View>\n );\n }\n\n return (\n <View\n style={[\n styles.container,\n {\n paddingLeft: paddingLeft + styles.container.paddingHorizontal,\n paddingRight: paddingRight + styles.container.paddingHorizontal,\n paddingTop: topInset,\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: getDefaultHeaderHeight(width > height) }]}>\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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"}
1
+ {"version":3,"names":["AlignMapper","left","center","right","Header","children","titleAlign","title","onPressLeft","onPressRight","clearTitleMargin","topInset","defaultTitleAlign","defaultHeight","useHeaderStyle","colors","useUIKitTheme","paddingLeft","paddingRight","useSafeAreaInsets","actualTitleAlign","paddingTop","backgroundColor","ui","header","nav","none","background","styles","container","paddingHorizontal","borderBottomColor","borderBottom","height","marginHorizontal","justifyContent","LeftSide","RightSide","HeaderTitle","style","props","HeaderSubtitle","onBackground03","HeaderButton","disabled","onPress","color","button","e","conditionChaining","createStyleSheet","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 type { BaseHeaderProps } from '../../index';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Text, { TextProps } from '../Text';\n\ntype HeaderElement = string | React.ReactElement | null;\ntype HeaderProps = BaseHeaderProps<\n {\n title?: HeaderElement;\n left?: HeaderElement;\n right?: HeaderElement;\n onPressLeft?: () => void;\n onPressRight?: () => void;\n },\n { clearTitleMargin?: boolean }\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}) => {\n const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();\n const { colors } = useUIKitTheme();\n const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();\n\n const actualTitleAlign = titleAlign ?? defaultTitleAlign;\n\n if (!title && !left && !right) {\n return (\n <View style={{ paddingTop: topInset, backgroundColor: colors.ui.header.nav.none.background }}>{children}</View>\n );\n }\n\n return (\n <View\n style={[\n styles.container,\n {\n paddingLeft: paddingLeft + styles.container.paddingHorizontal,\n paddingRight: paddingRight + styles.container.paddingHorizontal,\n paddingTop: topInset,\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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"}
package/lib/module/styles/HeaderStyleContext.js CHANGED
@@ -1,11 +1,13 @@
1
1
  import React from 'react';
2
- import { StatusBar } from 'react-native';
2
+ import { StatusBar, useWindowDimensions } from 'react-native';
3
3
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
4
+ import getDefaultHeaderHeight from './getDefaultHeaderHeight';
4
5
  export const HeaderStyleContext = /*#__PURE__*/React.createContext({
5
6
  HeaderComponent: () => null,
6
7
  defaultTitleAlign: 'left',
7
8
  statusBarTranslucent: true,
8
- topInset: StatusBar.currentHeight ?? 0
9
+ topInset: StatusBar.currentHeight ?? 0,
10
+ defaultHeight: getDefaultHeaderHeight(false)
9
11
  });
10
12
  export const HeaderStyleProvider = _ref => {
11
13
  let {
@@ -17,12 +19,17 @@ export const HeaderStyleProvider = _ref => {
17
19
  const {
18
20
  top
19
21
  } = useSafeAreaInsets();
22
+ const {
23
+ width,
24
+ height
25
+ } = useWindowDimensions();
20
26
  return /*#__PURE__*/React.createElement(HeaderStyleContext.Provider, {
21
27
  value: {
22
28
  HeaderComponent,
23
29
  defaultTitleAlign,
24
30
  statusBarTranslucent,
25
- topInset: statusBarTranslucent ? top : 0
31
+ topInset: statusBarTranslucent ? top : 0,
32
+ defaultHeight: getDefaultHeaderHeight(width > height)
26
33
  }
27
34
  }, children);
28
35
  };
package/lib/module/styles/HeaderStyleContext.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","StatusBar","useSafeAreaInsets","HeaderStyleContext","createContext","HeaderComponent","defaultTitleAlign","statusBarTranslucent","topInset","currentHeight","HeaderStyleProvider","children","top"],"sources":["HeaderStyleContext.tsx"],"sourcesContent":["import React from 'react';\nimport { StatusBar } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport type { BaseHeaderProps, HeaderElement } from '../types';\n\nexport type HeaderStyleContextType = {\n HeaderComponent: (\n props: BaseHeaderProps<\n {\n title?: HeaderElement;\n left?: HeaderElement;\n right?: HeaderElement;\n onPressLeft?: () => void;\n onPressRight?: () => void;\n },\n { clearTitleMargin?: boolean }\n >,\n ) => React.ReactElement | null;\n defaultTitleAlign: 'left' | 'center';\n statusBarTranslucent: boolean;\n topInset: number;\n};\nexport const HeaderStyleContext = React.createContext<HeaderStyleContextType>({\n HeaderComponent: () => null,\n defaultTitleAlign: 'left',\n statusBarTranslucent: true,\n topInset: StatusBar.currentHeight ?? 0,\n});\n\ntype Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;\nexport const HeaderStyleProvider = ({\n children,\n HeaderComponent = () => null,\n defaultTitleAlign,\n statusBarTranslucent,\n}: React.PropsWithChildren<Props>) => {\n const { top } = useSafeAreaInsets();\n\n return (\n <HeaderStyleContext.Provider\n value={{\n HeaderComponent,\n defaultTitleAlign,\n statusBarTranslucent,\n topInset: statusBarTranslucent ? top : 0,\n }}\n >\n {children}\n </HeaderStyleContext.Provider>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAqBA,OAAO,MAAMC,kBAAkB,gBAAGH,KAAK,CAACI,aAAN,CAA4C;EAC5EC,eAAe,EAAE,MAAM,IADqD;EAE5EC,iBAAiB,EAAE,MAFyD;EAG5EC,oBAAoB,EAAE,IAHsD;EAI5EC,QAAQ,EAAEP,SAAS,CAACQ,aAAV,IAA2B;AAJuC,CAA5C,CAA3B;AAQP,OAAO,MAAMC,mBAAmB,GAAG,QAKG;EAAA,IALF;IAClCC,QADkC;IAElCN,eAAe,GAAG,MAAM,IAFU;IAGlCC,iBAHkC;IAIlCC;EAJkC,CAKE;EACpC,MAAM;IAAEK;EAAF,IAAUV,iBAAiB,EAAjC;EAEA,oBACE,oBAAC,kBAAD,CAAoB,QAApB;IACE,KAAK,EAAE;MACLG,eADK;MAELC,iBAFK;MAGLC,oBAHK;MAILC,QAAQ,EAAED,oBAAoB,GAAGK,GAAH,GAAS;IAJlC;EADT,GAQGD,QARH,CADF;AAYD,CApBM"}
1
+ {"version":3,"names":["React","StatusBar","useWindowDimensions","useSafeAreaInsets","getDefaultHeaderHeight","HeaderStyleContext","createContext","HeaderComponent","defaultTitleAlign","statusBarTranslucent","topInset","currentHeight","defaultHeight","HeaderStyleProvider","children","top","width","height"],"sources":["HeaderStyleContext.tsx"],"sourcesContent":["import React from 'react';\nimport { StatusBar, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport type { BaseHeaderProps, HeaderElement } from '../types';\nimport getDefaultHeaderHeight from './getDefaultHeaderHeight';\n\nexport type HeaderStyleContextType = {\n HeaderComponent: (\n props: BaseHeaderProps<\n {\n title?: HeaderElement;\n left?: HeaderElement;\n right?: HeaderElement;\n onPressLeft?: () => void;\n onPressRight?: () => void;\n },\n { clearTitleMargin?: boolean }\n >,\n ) => React.ReactElement | null;\n defaultTitleAlign: 'left' | 'center';\n statusBarTranslucent: boolean;\n topInset: number;\n defaultHeight: number;\n};\nexport const HeaderStyleContext = React.createContext<HeaderStyleContextType>({\n HeaderComponent: () => null,\n defaultTitleAlign: 'left',\n statusBarTranslucent: true,\n topInset: StatusBar.currentHeight ?? 0,\n defaultHeight: getDefaultHeaderHeight(false),\n});\n\ntype Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;\nexport const HeaderStyleProvider = ({\n children,\n HeaderComponent = () => null,\n defaultTitleAlign,\n statusBarTranslucent,\n}: React.PropsWithChildren<Props>) => {\n const { top } = useSafeAreaInsets();\n const { width, height } = useWindowDimensions();\n\n return (\n <HeaderStyleContext.Provider\n value={{\n HeaderComponent,\n defaultTitleAlign,\n statusBarTranslucent,\n topInset: statusBarTranslucent ? top : 0,\n defaultHeight: getDefaultHeaderHeight(width > height),\n }}\n >\n {children}\n </HeaderStyleContext.Provider>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,EAAoBC,mBAApB,QAA+C,cAA/C;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAGA,OAAOC,sBAAP,MAAmC,0BAAnC;AAoBA,OAAO,MAAMC,kBAAkB,gBAAGL,KAAK,CAACM,aAAN,CAA4C;EAC5EC,eAAe,EAAE,MAAM,IADqD;EAE5EC,iBAAiB,EAAE,MAFyD;EAG5EC,oBAAoB,EAAE,IAHsD;EAI5EC,QAAQ,EAAET,SAAS,CAACU,aAAV,IAA2B,CAJuC;EAK5EC,aAAa,EAAER,sBAAsB,CAAC,KAAD;AALuC,CAA5C,CAA3B;AASP,OAAO,MAAMS,mBAAmB,GAAG,QAKG;EAAA,IALF;IAClCC,QADkC;IAElCP,eAAe,GAAG,MAAM,IAFU;IAGlCC,iBAHkC;IAIlCC;EAJkC,CAKE;EACpC,MAAM;IAAEM;EAAF,IAAUZ,iBAAiB,EAAjC;EACA,MAAM;IAAEa,KAAF;IAASC;EAAT,IAAoBf,mBAAmB,EAA7C;EAEA,oBACE,oBAAC,kBAAD,CAAoB,QAApB;IACE,KAAK,EAAE;MACLK,eADK;MAELC,iBAFK;MAGLC,oBAHK;MAILC,QAAQ,EAAED,oBAAoB,GAAGM,GAAH,GAAS,CAJlC;MAKLH,aAAa,EAAER,sBAAsB,CAACY,KAAK,GAAGC,MAAT;IALhC;EADT,GASGH,QATH,CADF;AAaD,CAtBM"}
package/lib/module/styles/createScaleFactor.js CHANGED
@@ -8,7 +8,8 @@ const DESIGNED_DEVICE_WIDTH = 360;
8
8
  const createScaleFactor = function () {
9
9
  let deviceWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DESIGNED_DEVICE_WIDTH;
10
10
  const ratio = Math.min(width, height) / deviceWidth;
11
- return dp => PixelRatio.roundToNearestPixel(dp * ratio);
11
+ const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);
12
+ return dp => PixelRatio.roundToNearestPixel(dp * rangedRatio);
12
13
  };
13
14
 
14
15
  createScaleFactor.updateScaleFactor = scaleFactor => {
package/lib/module/styles/createScaleFactor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["Dimensions","PixelRatio","width","height","get","DESIGNED_DEVICE_WIDTH","createScaleFactor","deviceWidth","ratio","Math","min","dp","roundToNearestPixel","updateScaleFactor","scaleFactor","DEFAULT_SCALE_FACTOR"],"sources":["createScaleFactor.ts"],"sourcesContent":["import { Dimensions, PixelRatio } from 'react-native';\n\nconst { width, height } = Dimensions.get('window');\n\nconst DESIGNED_DEVICE_WIDTH = 360;\n\nconst createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {\n const ratio = Math.min(width, height) / deviceWidth;\n return (dp: number) => PixelRatio.roundToNearestPixel(dp * ratio);\n};\n\ncreateScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {\n DEFAULT_SCALE_FACTOR = scaleFactor;\n};\n\nexport let DEFAULT_SCALE_FACTOR = createScaleFactor();\nexport default createScaleFactor;\n"],"mappings":"AAAA,SAASA,UAAT,EAAqBC,UAArB,QAAuC,cAAvC;AAEA,MAAM;EAAEC,KAAF;EAASC;AAAT,IAAoBH,UAAU,CAACI,GAAX,CAAe,QAAf,CAA1B;AAEA,MAAMC,qBAAqB,GAAG,GAA9B;;AAEA,MAAMC,iBAAiB,GAAG,YAAyC;EAAA,IAAxCC,WAAwC,uEAA1BF,qBAA0B;EACjE,MAAMG,KAAK,GAAGC,IAAI,CAACC,GAAL,CAASR,KAAT,EAAgBC,MAAhB,IAA0BI,WAAxC;EACA,OAAQI,EAAD,IAAgBV,UAAU,CAACW,mBAAX,CAA+BD,EAAE,GAAGH,KAApC,CAAvB;AACD,CAHD;;AAKAF,iBAAiB,CAACO,iBAAlB,GAAuCC,WAAD,IAAyC;EAC7EC,oBAAoB,GAAGD,WAAvB;AACD,CAFD;;AAIA,OAAO,IAAIC,oBAAoB,GAAGT,iBAAiB,EAA5C;AACP,eAAeA,iBAAf"}
1
+ {"version":3,"names":["Dimensions","PixelRatio","width","height","get","DESIGNED_DEVICE_WIDTH","createScaleFactor","deviceWidth","ratio","Math","min","rangedRatio","max","dp","roundToNearestPixel","updateScaleFactor","scaleFactor","DEFAULT_SCALE_FACTOR"],"sources":["createScaleFactor.ts"],"sourcesContent":["import { Dimensions, PixelRatio } from 'react-native';\n\nconst { width, height } = Dimensions.get('window');\n\nconst DESIGNED_DEVICE_WIDTH = 360;\n\nconst createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {\n const ratio = Math.min(width, height) / deviceWidth;\n const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);\n return (dp: number) => PixelRatio.roundToNearestPixel(dp * rangedRatio);\n};\n\ncreateScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {\n DEFAULT_SCALE_FACTOR = scaleFactor;\n};\n\nexport let DEFAULT_SCALE_FACTOR = createScaleFactor();\nexport default createScaleFactor;\n"],"mappings":"AAAA,SAASA,UAAT,EAAqBC,UAArB,QAAuC,cAAvC;AAEA,MAAM;EAAEC,KAAF;EAASC;AAAT,IAAoBH,UAAU,CAACI,GAAX,CAAe,QAAf,CAA1B;AAEA,MAAMC,qBAAqB,GAAG,GAA9B;;AAEA,MAAMC,iBAAiB,GAAG,YAAyC;EAAA,IAAxCC,WAAwC,uEAA1BF,qBAA0B;EACjE,MAAMG,KAAK,GAAGC,IAAI,CAACC,GAAL,CAASR,KAAT,EAAgBC,MAAhB,IAA0BI,WAAxC;EACA,MAAMI,WAAW,GAAGF,IAAI,CAACC,GAAL,CAASD,IAAI,CAACG,GAAL,CAAS,IAAT,EAAeJ,KAAf,CAAT,EAAgC,IAAhC,CAApB;EACA,OAAQK,EAAD,IAAgBZ,UAAU,CAACa,mBAAX,CAA+BD,EAAE,GAAGF,WAApC,CAAvB;AACD,CAJD;;AAMAL,iBAAiB,CAACS,iBAAlB,GAAuCC,WAAD,IAAyC;EAC7EC,oBAAoB,GAAGD,WAAvB;AACD,CAFD;;AAIA,OAAO,IAAIC,oBAAoB,GAAGX,iBAAiB,EAA5C;AACP,eAAeA,iBAAf"}
package/lib/module/ui/GroupChannelPreview/index.js CHANGED
@@ -19,6 +19,7 @@ const GroupChannelPreview = _ref => {
19
19
  bodyIcon,
20
20
  title,
21
21
  titleCaption,
22
+ titleCaptionLeft,
22
23
  frozen,
23
24
  notificationOff
24
25
  } = _ref;
@@ -45,7 +46,7 @@ const GroupChannelPreview = _ref => {
45
46
  }, /*#__PURE__*/React.createElement(View, {
46
47
  style: styles.rightTopSection
47
48
  }, /*#__PURE__*/React.createElement(View, {
48
- style: styles.channelInfo
49
+ style: styles.channelInfoContainer
49
50
  }, /*#__PURE__*/React.createElement(Text, {
50
51
  numberOfLines: 1,
51
52
  subtitle1: true,
@@ -65,16 +66,17 @@ const GroupChannelPreview = _ref => {
65
66
  icon: 'notifications-off-filled',
66
67
  color: colors.onBackground03
67
68
  })), /*#__PURE__*/React.createElement(View, {
68
- style: styles.titleCaption
69
- }, /*#__PURE__*/React.createElement(Text, {
69
+ style: styles.titleCaptionContainer
70
+ }, titleCaptionLeft, /*#__PURE__*/React.createElement(Text, {
70
71
  caption2: true,
71
- color: color.default.none.textTitleCaption
72
+ color: color.default.none.textTitleCaption,
73
+ style: styles.titleCaptionText
72
74
  }, titleCaption))), /*#__PURE__*/React.createElement(View, {
73
75
  style: styles.rightBottomSection
74
76
  }, /*#__PURE__*/React.createElement(View, {
75
- style: [styles.body, bodyIcon && {
76
- alignItems: 'center'
77
- }]
77
+ style: styles.body
78
+ }, /*#__PURE__*/React.createElement(View, {
79
+ style: styles.bodyWrapper
78
80
  }, bodyIcon && /*#__PURE__*/React.createElement(Icon, {
79
81
  size: 18,
80
82
  icon: bodyIcon,
@@ -87,7 +89,7 @@ const GroupChannelPreview = _ref => {
87
89
  numberOfLines: 1,
88
90
  style: styles.bodyText,
89
91
  color: color.default.none.textBody
90
- }, body)), /*#__PURE__*/React.createElement(View, null, badgeCount > 0 && /*#__PURE__*/React.createElement(Badge, {
92
+ }, body))), /*#__PURE__*/React.createElement(View, null, badgeCount > 0 && /*#__PURE__*/React.createElement(Badge, {
91
93
  count: badgeCount,
92
94
  maxCount: maxBadgeCount
93
95
  })))), /*#__PURE__*/React.createElement(Separator, {
@@ -108,10 +110,11 @@ const Separator = _ref2 => {
108
110
 
109
111
  const styles = createStyleSheet({
110
112
  container: {
113
+ height: 76,
111
114
  width: '100%',
112
115
  flexDirection: 'row',
113
116
  paddingHorizontal: 16,
114
- paddingVertical: 10,
117
+ paddingTop: 10,
115
118
  alignItems: 'center'
116
119
  },
117
120
  coverContainer: {
@@ -129,7 +132,7 @@ const styles = createStyleSheet({
129
132
  flexDirection: 'row',
130
133
  marginBottom: 4
131
134
  },
132
- channelInfo: {
135
+ channelInfoContainer: {
133
136
  flex: 1,
134
137
  marginRight: 4,
135
138
  alignItems: 'center',
@@ -146,9 +149,13 @@ const styles = createStyleSheet({
146
149
  channelInfoFrozen: {
147
150
  marginRight: 4
148
151
  },
149
- titleCaption: {
150
- marginLeft: 4,
151
- paddingTop: 2
152
+ titleCaptionContainer: {
153
+ alignItems: 'flex-start',
154
+ flexDirection: 'row',
155
+ marginLeft: 4
156
+ },
157
+ titleCaptionText: {
158
+ marginTop: 2
152
159
  },
153
160
  rightBottomSection: {
154
161
  flex: 1,
@@ -158,9 +165,12 @@ const styles = createStyleSheet({
158
165
  body: {
159
166
  marginRight: 4,
160
167
  flex: 1,
161
- justifyContent: 'center',
162
- alignItems: 'flex-start',
163
- flexDirection: 'row'
168
+ flexDirection: 'row',
169
+ alignItems: 'flex-start'
170
+ },
171
+ bodyWrapper: {
172
+ flexDirection: 'row',
173
+ alignItems: 'center'
164
174
  },
165
175
  bodyText: {
166
176
  flex: 1
@@ -186,5 +196,5 @@ const styles = createStyleSheet({
186
196
  width: '84.5%'
187
197
  }
188
198
  });
189
- export default /*#__PURE__*/React.memo(GroupChannelPreview);
199
+ export default GroupChannelPreview;
190
200
  //# sourceMappingURL=index.js.map
package/lib/module/ui/GroupChannelPreview/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","View","conditionChaining","Image","createStyleSheet","useUIKitTheme","Badge","Icon","Text","GroupChannelPreview","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","frozen","notificationOff","colors","color","ui","groupChannelPreview","styles","container","backgroundColor","default","none","background","coverContainer","Boolean","channelCover","coverBackground","uri","rightSection","rightTopSection","channelInfo","channelInfoTitle","textTitle","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","textTitleCaption","rightBottomSection","alignItems","bodyIconBackground","bodyText","textBody","separator","Separator","width","flexDirection","paddingHorizontal","paddingVertical","marginRight","height","borderRadius","flex","marginBottom","flexShrink","paddingTop","marginLeft","justifyContent","unreadBadge","minWidth","minHeight","position","right","bottom","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Badge from '../Badge';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype Props = {\n customCover?: React.ReactElement;\n coverUrl: string;\n\n title: string;\n titleCaption: string;\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};\n\nconst GroupChannelPreview = ({\n customCover,\n coverUrl,\n memberCount,\n badgeCount,\n maxBadgeCount,\n body,\n bodyIcon,\n title,\n titleCaption,\n frozen,\n notificationOff,\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.channelInfo}>\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.titleCaption}>\n <Text caption2 color={color.default.none.textTitleCaption}>\n {titleCaption}\n </Text>\n </View>\n </View>\n\n <View style={styles.rightBottomSection}>\n <View style={[styles.body, bodyIcon && { alignItems: 'center' }]}>\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 body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>\n {body}\n </Text>\n </View>\n <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>\n </View>\n </View>\n <Separator color={color.default.none.separator} />\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 width: '100%',\n flexDirection: 'row',\n paddingHorizontal: 16,\n paddingVertical: 10,\n alignItems: 'center',\n },\n coverContainer: {\n marginRight: 16,\n },\n channelCover: {\n width: 56,\n height: 56,\n borderRadius: 28,\n },\n rightSection: {\n flex: 1,\n },\n rightTopSection: {\n flexDirection: 'row',\n marginBottom: 4,\n },\n channelInfo: {\n flex: 1,\n marginRight: 4,\n alignItems: 'center',\n flexDirection: 'row',\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 titleCaption: {\n marginLeft: 4,\n paddingTop: 2,\n },\n rightBottomSection: {\n flex: 1,\n height: '100%',\n flexDirection: 'row',\n },\n body: {\n marginRight: 4,\n flex: 1,\n justifyContent: 'center',\n alignItems: 'flex-start',\n flexDirection: 'row',\n },\n bodyText: {\n flex: 1,\n },\n bodyIcon: {\n borderRadius: 8,\n width: 26,\n height: 26,\n marginRight: 4,\n },\n unreadBadge: {\n minWidth: 20,\n minHeight: 20,\n borderRadius: 99,\n alignItems: 'center',\n justifyContent: 'center',\n },\n separator: {\n position: 'absolute',\n right: 0,\n bottom: 0,\n height: 1,\n width: '84.5%',\n },\n});\n\nexport default React.memo(GroupChannelPreview);\n"],"mappings":"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"}
1
+ {"version":3,"names":["React","View","conditionChaining","Image","createStyleSheet","useUIKitTheme","Badge","Icon","Text","GroupChannelPreview","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","titleCaptionLeft","frozen","notificationOff","colors","color","ui","groupChannelPreview","styles","container","backgroundColor","default","none","background","coverContainer","Boolean","channelCover","coverBackground","uri","rightSection","rightTopSection","channelInfoContainer","channelInfoTitle","textTitle","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","titleCaptionContainer","textTitleCaption","titleCaptionText","rightBottomSection","bodyWrapper","bodyIconBackground","bodyText","textBody","separator","Separator","height","width","flexDirection","paddingHorizontal","paddingTop","alignItems","marginRight","borderRadius","flex","marginBottom","flexShrink","marginLeft","marginTop","unreadBadge","minWidth","minHeight","justifyContent","position","right","bottom"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Badge from '../Badge';\nimport Icon from '../Icon';\nimport Text from '../Text';\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};\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}: 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 <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 body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>\n {body}\n </Text>\n </View>\n </View>\n <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>\n </View>\n </View>\n <Separator color={color.default.none.separator} />\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 paddingHorizontal: 16,\n paddingTop: 10,\n alignItems: 'center',\n },\n coverContainer: {\n marginRight: 16,\n },\n channelCover: {\n width: 56,\n height: 56,\n borderRadius: 28,\n },\n rightSection: {\n flex: 1,\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 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 unreadBadge: {\n minWidth: 20,\n minHeight: 20,\n borderRadius: 99,\n alignItems: 'center',\n justifyContent: 'center',\n },\n separator: {\n position: 'absolute',\n right: 0,\n bottom: 0,\n height: 1,\n width: '84.5%',\n },\n});\n\nexport default GroupChannelPreview;\n"],"mappings":"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"}
package/lib/module/ui/Header/index.js CHANGED
@@ -1,11 +1,10 @@
1
1
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
- import { TouchableOpacity, View, useWindowDimensions } from 'react-native';
4
+ import { TouchableOpacity, View } from 'react-native';
5
5
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
6
6
  import { conditionChaining } from '@sendbird/uikit-utils';
7
7
  import createStyleSheet from '../../styles/createStyleSheet';
8
- import getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';
9
8
  import useHeaderStyle from '../../styles/useHeaderStyle';
10
9
  import useUIKitTheme from '../../theme/useUIKitTheme';
11
10
  import Text from '../Text';
@@ -28,12 +27,9 @@ const Header = _ref => {
28
27
  } = _ref;
29
28
  const {
30
29
  topInset,
31
- defaultTitleAlign
30
+ defaultTitleAlign,
31
+ defaultHeight
32
32
  } = useHeaderStyle();
33
- const {
34
- width,
35
- height
36
- } = useWindowDimensions();
37
33
  const {
38
34
  colors
39
35
  } = useUIKitTheme();
@@ -62,7 +58,7 @@ const Header = _ref => {
62
58
  }]
63
59
  }, /*#__PURE__*/React.createElement(View, {
64
60
  style: [styles.header, {
65
- height: getDefaultHeaderHeight(width > height)
61
+ height: defaultHeight
66
62
  }]
67
63
  }, /*#__PURE__*/React.createElement(LeftSide, {
68
64
  titleAlign: actualTitleAlign,
package/lib/module/ui/Header/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","TouchableOpacity","View","useWindowDimensions","useSafeAreaInsets","conditionChaining","createStyleSheet","getDefaultHeaderHeight","useHeaderStyle","useUIKitTheme","Text","AlignMapper","left","center","right","Header","children","titleAlign","title","onPressLeft","onPressRight","clearTitleMargin","topInset","defaultTitleAlign","width","height","colors","paddingLeft","paddingRight","actualTitleAlign","paddingTop","backgroundColor","ui","header","nav","none","background","styles","container","paddingHorizontal","borderBottomColor","borderBottom","marginHorizontal","justifyContent","LeftSide","RightSide","HeaderTitle","style","props","HeaderSubtitle","onBackground03","HeaderButton","disabled","onPress","color","button","e","borderBottomWidth","flexDirection","flex","alignItems","minWidth","marginRight","marginLeft","padding","Button","Title","Subtitle"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity, TouchableOpacityProps, View, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport type { BaseHeaderProps } from '../../index';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Text, { TextProps } from '../Text';\n\ntype HeaderElement = string | React.ReactElement | null;\ntype HeaderProps = BaseHeaderProps<\n {\n title?: HeaderElement;\n left?: HeaderElement;\n right?: HeaderElement;\n onPressLeft?: () => void;\n onPressRight?: () => void;\n },\n { clearTitleMargin?: boolean }\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}) => {\n const { topInset, defaultTitleAlign } = useHeaderStyle();\n const { width, height } = useWindowDimensions();\n const { colors } = useUIKitTheme();\n const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();\n\n const actualTitleAlign = titleAlign ?? defaultTitleAlign;\n\n if (!title && !left && !right) {\n return (\n <View style={{ paddingTop: topInset, backgroundColor: colors.ui.header.nav.none.background }}>{children}</View>\n );\n }\n\n return (\n <View\n style={[\n styles.container,\n {\n paddingLeft: paddingLeft + styles.container.paddingHorizontal,\n paddingRight: paddingRight + styles.container.paddingHorizontal,\n paddingTop: topInset,\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: getDefaultHeaderHeight(width > height) }]}>\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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"}
1
+ {"version":3,"names":["React","TouchableOpacity","View","useSafeAreaInsets","conditionChaining","createStyleSheet","useHeaderStyle","useUIKitTheme","Text","AlignMapper","left","center","right","Header","children","titleAlign","title","onPressLeft","onPressRight","clearTitleMargin","topInset","defaultTitleAlign","defaultHeight","colors","paddingLeft","paddingRight","actualTitleAlign","paddingTop","backgroundColor","ui","header","nav","none","background","styles","container","paddingHorizontal","borderBottomColor","borderBottom","height","marginHorizontal","justifyContent","LeftSide","RightSide","HeaderTitle","style","props","HeaderSubtitle","onBackground03","HeaderButton","disabled","onPress","color","button","e","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 type { BaseHeaderProps } from '../../index';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Text, { TextProps } from '../Text';\n\ntype HeaderElement = string | React.ReactElement | null;\ntype HeaderProps = BaseHeaderProps<\n {\n title?: HeaderElement;\n left?: HeaderElement;\n right?: HeaderElement;\n onPressLeft?: () => void;\n onPressRight?: () => void;\n },\n { clearTitleMargin?: boolean }\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}) => {\n const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();\n const { colors } = useUIKitTheme();\n const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();\n\n const actualTitleAlign = titleAlign ?? defaultTitleAlign;\n\n if (!title && !left && !right) {\n return (\n <View style={{ paddingTop: topInset, backgroundColor: colors.ui.header.nav.none.background }}>{children}</View>\n );\n }\n\n return (\n <View\n style={[\n styles.container,\n {\n paddingLeft: paddingLeft + styles.container.paddingHorizontal,\n paddingRight: paddingRight + styles.container.paddingHorizontal,\n paddingTop: topInset,\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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"}
package/lib/typescript/src/styles/HeaderStyleContext.d.ts CHANGED
@@ -13,6 +13,7 @@ export declare type HeaderStyleContextType = {
13
13
  defaultTitleAlign: 'left' | 'center';
14
14
  statusBarTranslucent: boolean;
15
15
  topInset: number;
16
+ defaultHeight: number;
16
17
  };
17
18
  export declare const HeaderStyleContext: React.Context<HeaderStyleContextType>;
18
19
  declare type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;
package/lib/typescript/src/styles/getDefaultHeaderHeight.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const getDefaultHeaderHeight: (isLandscape: boolean) => 56 | 48;
1
+ declare const getDefaultHeaderHeight: (isLandscape: boolean) => 48 | 56;
2
2
  export default getDefaultHeaderHeight;
package/lib/typescript/src/ui/GroupChannelPreview/index.d.ts CHANGED
@@ -5,6 +5,7 @@ declare type Props = {
5
5
  coverUrl: string;
6
6
  title: string;
7
7
  titleCaption: string;
8
+ titleCaptionLeft?: React.ReactElement;
8
9
  bodyIcon?: keyof typeof Icon.Assets;
9
10
  body: string;
10
11
  memberCount?: number;
@@ -13,5 +14,5 @@ declare type Props = {
13
14
  frozen?: boolean;
14
15
  notificationOff?: boolean;
15
16
  };
16
- declare const _default: React.MemoExoticComponent<({ customCover, coverUrl, memberCount, badgeCount, maxBadgeCount, body, bodyIcon, title, titleCaption, frozen, notificationOff, }: Props) => JSX.Element>;
17
- export default _default;
17
+ declare const GroupChannelPreview: ({ customCover, coverUrl, memberCount, badgeCount, maxBadgeCount, body, bodyIcon, title, titleCaption, titleCaptionLeft, frozen, notificationOff, }: Props) => JSX.Element;
18
+ export default GroupChannelPreview;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sendbird/uikit-react-native-foundation",
3
- "version": "1.0.2",
3
+ "version": "1.1.1",
4
4
  "description": "react-native-uikit",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
@@ -38,7 +38,7 @@
38
38
  "access": "public"
39
39
  },
40
40
  "dependencies": {
41
- "@sendbird/uikit-utils": "1.0.2"
41
+ "@sendbird/uikit-utils": "1.1.1"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@types/react": "*",
@@ -80,5 +80,5 @@
80
80
  "readmeFile": "./README.md",
81
81
  "displayName": "@sendbird/uikit-react-native-foundation"
82
82
  },
83
- "gitHead": "257ece5f957e03ff5c08b79780b33d9d19adc5de"
83
+ "gitHead": "7b0384ecf1025f70e8a19f0490231273893f3f56"
84
84
  }
package/src/styles/HeaderStyleContext.tsx CHANGED
@@ -1,8 +1,9 @@
1
1
  import React from 'react';
2
- import { StatusBar } from 'react-native';
2
+ import { StatusBar, useWindowDimensions } from 'react-native';
3
3
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
4
4
 
5
5
  import type { BaseHeaderProps, HeaderElement } from '../types';
6
+ import getDefaultHeaderHeight from './getDefaultHeaderHeight';
6
7
 
7
8
  export type HeaderStyleContextType = {
8
9
  HeaderComponent: (
@@ -20,12 +21,14 @@ export type HeaderStyleContextType = {
20
21
  defaultTitleAlign: 'left' | 'center';
21
22
  statusBarTranslucent: boolean;
22
23
  topInset: number;
24
+ defaultHeight: number;
23
25
  };
24
26
  export const HeaderStyleContext = React.createContext<HeaderStyleContextType>({
25
27
  HeaderComponent: () => null,
26
28
  defaultTitleAlign: 'left',
27
29
  statusBarTranslucent: true,
28
30
  topInset: StatusBar.currentHeight ?? 0,
31
+ defaultHeight: getDefaultHeaderHeight(false),
29
32
  });
30
33
 
31
34
  type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;
@@ -36,6 +39,7 @@ export const HeaderStyleProvider = ({
36
39
  statusBarTranslucent,
37
40
  }: React.PropsWithChildren<Props>) => {
38
41
  const { top } = useSafeAreaInsets();
42
+ const { width, height } = useWindowDimensions();
39
43
 
40
44
  return (
41
45
  <HeaderStyleContext.Provider
@@ -44,6 +48,7 @@ export const HeaderStyleProvider = ({
44
48
  defaultTitleAlign,
45
49
  statusBarTranslucent,
46
50
  topInset: statusBarTranslucent ? top : 0,
51
+ defaultHeight: getDefaultHeaderHeight(width > height),
47
52
  }}
48
53
  >
49
54
  {children}
package/src/styles/createScaleFactor.ts CHANGED
@@ -6,7 +6,8 @@ const DESIGNED_DEVICE_WIDTH = 360;
6
6
 
7
7
  const createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {
8
8
  const ratio = Math.min(width, height) / deviceWidth;
9
- return (dp: number) => PixelRatio.roundToNearestPixel(dp * ratio);
9
+ const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);
10
+ return (dp: number) => PixelRatio.roundToNearestPixel(dp * rangedRatio);
10
11
  };
11
12
 
12
13
  createScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {
package/src/ui/GroupChannelPreview/index.tsx CHANGED
@@ -15,7 +15,10 @@ type Props = {
15
15
  coverUrl: string;
16
16
 
17
17
  title: string;
18
+
18
19
  titleCaption: string;
20
+ titleCaptionLeft?: React.ReactElement;
21
+
19
22
  bodyIcon?: keyof typeof Icon.Assets;
20
23
  body: string;
21
24
 
@@ -37,6 +40,7 @@ const GroupChannelPreview = ({
37
40
  bodyIcon,
38
41
  title,
39
42
  titleCaption,
43
+ titleCaptionLeft,
40
44
  frozen,
41
45
  notificationOff,
42
46
  }: Props) => {
@@ -60,7 +64,7 @@ const GroupChannelPreview = ({
60
64
  </View>
61
65
  <View style={styles.rightSection}>
62
66
  <View style={styles.rightTopSection}>
63
- <View style={styles.channelInfo}>
67
+ <View style={styles.channelInfoContainer}>
64
68
  <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>
65
69
  {title}
66
70
  </Text>
@@ -74,29 +78,32 @@ const GroupChannelPreview = ({
74
78
  )}
75
79
  {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}
76
80
  </View>
77
- <View style={styles.titleCaption}>
78
- <Text caption2 color={color.default.none.textTitleCaption}>
81
+ <View style={styles.titleCaptionContainer}>
82
+ {titleCaptionLeft}
83
+ <Text caption2 color={color.default.none.textTitleCaption} style={styles.titleCaptionText}>
79
84
  {titleCaption}
80
85
  </Text>
81
86
  </View>
82
87
  </View>
83
88
 
84
89
  <View style={styles.rightBottomSection}>
85
- <View style={[styles.body, bodyIcon && { alignItems: 'center' }]}>
86
- {bodyIcon && (
87
- <Icon
88
- size={18}
89
- icon={bodyIcon}
90
- color={color.default.none.bodyIcon}
91
- containerStyle={[
92
- styles.bodyIcon,
93
- { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },
94
- ]}
95
- />
96
- )}
97
- <Text body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>
98
- {body}
99
- </Text>
90
+ <View style={styles.body}>
91
+ <View style={styles.bodyWrapper}>
92
+ {bodyIcon && (
93
+ <Icon
94
+ size={18}
95
+ icon={bodyIcon}
96
+ color={color.default.none.bodyIcon}
97
+ containerStyle={[
98
+ styles.bodyIcon,
99
+ { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },
100
+ ]}
101
+ />
102
+ )}
103
+ <Text body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>
104
+ {body}
105
+ </Text>
106
+ </View>
100
107
  </View>
101
108
  <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>
102
109
  </View>
@@ -111,10 +118,11 @@ const Separator = ({ color }: SeparatorProps) => <View style={[styles.separator,
111
118
 
112
119
  const styles = createStyleSheet({
113
120
  container: {
121
+ height: 76,
114
122
  width: '100%',
115
123
  flexDirection: 'row',
116
124
  paddingHorizontal: 16,
117
- paddingVertical: 10,
125
+ paddingTop: 10,
118
126
  alignItems: 'center',
119
127
  },
120
128
  coverContainer: {
@@ -132,7 +140,7 @@ const styles = createStyleSheet({
132
140
  flexDirection: 'row',
133
141
  marginBottom: 4,
134
142
  },
135
- channelInfo: {
143
+ channelInfoContainer: {
136
144
  flex: 1,
137
145
  marginRight: 4,
138
146
  alignItems: 'center',
@@ -149,9 +157,13 @@ const styles = createStyleSheet({
149
157
  channelInfoFrozen: {
150
158
  marginRight: 4,
151
159
  },
152
- titleCaption: {
160
+ titleCaptionContainer: {
161
+ alignItems: 'flex-start',
162
+ flexDirection: 'row',
153
163
  marginLeft: 4,
154
- paddingTop: 2,
164
+ },
165
+ titleCaptionText: {
166
+ marginTop: 2,
155
167
  },
156
168
  rightBottomSection: {
157
169
  flex: 1,
@@ -161,9 +173,12 @@ const styles = createStyleSheet({
161
173
  body: {
162
174
  marginRight: 4,
163
175
  flex: 1,
164
- justifyContent: 'center',
176
+ flexDirection: 'row',
165
177
  alignItems: 'flex-start',
178
+ },
179
+ bodyWrapper: {
166
180
  flexDirection: 'row',
181
+ alignItems: 'center',
167
182
  },
168
183
  bodyText: {
169
184
  flex: 1,
@@ -190,4 +205,4 @@ const styles = createStyleSheet({
190
205
  },
191
206
  });
192
207
 
193
- export default React.memo(GroupChannelPreview);
208
+ export default GroupChannelPreview;
package/src/ui/Header/index.tsx CHANGED
@@ -1,12 +1,11 @@
1
1
  import React from 'react';
2
- import { TouchableOpacity, TouchableOpacityProps, View, useWindowDimensions } from 'react-native';
2
+ import { TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
3
3
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
4
4
 
5
5
  import { conditionChaining } from '@sendbird/uikit-utils';
6
6
 
7
7
  import type { BaseHeaderProps } from '../../index';
8
8
  import createStyleSheet from '../../styles/createStyleSheet';
9
- import getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';
10
9
  import useHeaderStyle from '../../styles/useHeaderStyle';
11
10
  import useUIKitTheme from '../../theme/useUIKitTheme';
12
11
  import Text, { TextProps } from '../Text';
@@ -38,8 +37,7 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
38
37
  onPressRight,
39
38
  clearTitleMargin = false,
40
39
  }) => {
41
- const { topInset, defaultTitleAlign } = useHeaderStyle();
42
- const { width, height } = useWindowDimensions();
40
+ const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();
43
41
  const { colors } = useUIKitTheme();
44
42
  const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();
45
43
 
@@ -64,7 +62,7 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
64
62
  },
65
63
  ]}
66
64
  >
67
- <View style={[styles.header, { height: getDefaultHeaderHeight(width > height) }]}>
65
+ <View style={[styles.header, { height: defaultHeight }]}>
68
66
  <LeftSide titleAlign={actualTitleAlign} left={left} onPressLeft={onPressLeft} />
69
67
  <View
70
68
  style={[