@sendbird/uikit-react-native-foundation 1.0.2 → 1.1.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.
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 +15 -11
  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 +15 -9
  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 +16 -7
  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,10 +83,11 @@ 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, {
@@ -146,7 +148,7 @@ const styles = (0, _createStyleSheet.default)({
146
148
  flexDirection: 'row',
147
149
  marginBottom: 4
148
150
  },
149
- channelInfo: {
151
+ channelInfoContainer: {
150
152
  flex: 1,
151
153
  marginRight: 4,
152
154
  alignItems: 'center',
@@ -163,9 +165,13 @@ const styles = (0, _createStyleSheet.default)({
163
165
  channelInfoFrozen: {
164
166
  marginRight: 4
165
167
  },
166
- titleCaption: {
167
- marginLeft: 4,
168
- paddingTop: 2
168
+ titleCaptionContainer: {
169
+ alignItems: 'flex-start',
170
+ flexDirection: 'row',
171
+ marginLeft: 4
172
+ },
173
+ titleCaptionText: {
174
+ marginTop: 2
169
175
  },
170
176
  rightBottomSection: {
171
177
  flex: 1,
@@ -203,8 +209,6 @@ const styles = (0, _createStyleSheet.default)({
203
209
  width: '84.5%'
204
210
  }
205
211
  });
206
-
207
- var _default = /*#__PURE__*/_react.default.memo(GroupChannelPreview);
208
-
212
+ var _default = GroupChannelPreview;
209
213
  exports.default = _default;
210
214
  //# 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","alignItems","bodyIconBackground","bodyText","textBody","separator","Separator","createStyleSheet","width","flexDirection","paddingHorizontal","paddingVertical","marginRight","height","borderRadius","flex","marginBottom","flexShrink","paddingTop","marginLeft","marginTop","justifyContent","unreadBadge","minWidth","minHeight","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, 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 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 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 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":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAGA;;AACA;;AACA;;AACA;;;;;;AAcA,MAAMA,WAAW,GAAG;EAAEC,IAAI,EAAE,YAAR;EAAsBC,MAAM,EAAE,QAA9B;EAAwCC,KAAK,EAAE;AAA/C,CAApB;;AACA,MAAMC,MAIL,GAAG,QASE;EAAA,IATD;IACHC,QADG;IAEHC,UAFG;IAGHC,KAAK,GAAG,IAHL;IAIHN,IAAI,GAAG,IAJJ;IAKHE,KAAK,GAAG,IALL;IAMHK,WANG;IAOHC,YAPG;IAQHC,gBAAgB,GAAG;EARhB,CASC;EACJ,MAAM;IAAEC,QAAF;IAAYC,iBAAZ;IAA+BC;EAA/B,IAAiD,IAAAC,uBAAA,GAAvD;EACA,MAAM;IAAEC;EAAF,IAAa,IAAAC,sBAAA,GAAnB;EACA,MAAM;IAAEf,IAAI,EAAEgB,WAAR;IAAqBd,KAAK,EAAEe;EAA5B,IAA6C,IAAAC,6CAAA,GAAnD;EAEA,MAAMC,gBAAgB,GAAGd,UAAU,IAAIM,iBAAvC;;EAEA,IAAI,CAACL,KAAD,IAAU,CAACN,IAAX,IAAmB,CAACE,KAAxB,EAA+B;IAC7B,oBACE,6BAAC,iBAAD;MAAM,KAAK,EAAE;QAAEkB,UAAU,EAAEV,QAAd;QAAwBW,eAAe,EAAEP,MAAM,CAACQ,EAAP,CAAUC,MAAV,CAAiBC,GAAjB,CAAqBC,IAArB,CAA0BC;MAAnE;IAAb,GAA+FtB,QAA/F,CADF;EAGD;;EAED,oBACE,6BAAC,iBAAD;IACE,KAAK,EAAE,CACLuB,MAAM,CAACC,SADF,EAEL;MACEZ,WAAW,EAAEA,WAAW,GAAGW,MAAM,CAACC,SAAP,CAAiBC,iBAD9C;MAEEZ,YAAY,EAAEA,YAAY,GAAGU,MAAM,CAACC,SAAP,CAAiBC,iBAFhD;MAGET,UAAU,EAAEV,QAHd;MAIEW,eAAe,EAAEP,MAAM,CAACQ,EAAP,CAAUC,MAAV,CAAiBC,GAAjB,CAAqBC,IAArB,CAA0BC,UAJ7C;MAKEI,iBAAiB,EAAEhB,MAAM,CAACQ,EAAP,CAAUC,MAAV,CAAiBC,GAAjB,CAAqBC,IAArB,CAA0BM;IAL/C,CAFK;EADT,gBAYE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACJ,MAAM,CAACJ,MAAR,EAAgB;MAAES,MAAM,EAAEpB;IAAV,CAAhB;EAAb,gBACE,6BAAC,QAAD;IAAU,UAAU,EAAEO,gBAAtB;IAAwC,IAAI,EAAEnB,IAA9C;IAAoD,WAAW,EAAEO;EAAjE,EADF,eAEE,6BAAC,iBAAD;IACE,KAAK,EAAE,CACLoB,MAAM,CAACrB,KADF,EAELG,gBAAgB,IAAI;MAAEwB,gBAAgB,EAAE;IAApB,CAFf,EAGL;MAAEC,cAAc,EAAEnC,WAAW,CAACoB,gBAAD;IAA7B,CAHK;EADT,GAOG,OAAOb,KAAP,KAAiB,QAAjB,gBAA4B,6BAAC,WAAD,QAAcA,KAAd,CAA5B,GAAiEA,KAPpE,CAFF,eAWE,6BAAC,SAAD;IAAW,UAAU,EAAEa,gBAAvB;IAAyC,KAAK,EAAEjB,KAAhD;IAAuD,YAAY,EAAEM;EAArE,EAXF,CAZF,EAyBGJ,QAzBH,CADF;AA6BD,CAvDD;;AAyDA,MAAM+B,QAAQ,GAAG,SAAoD;EAAA,IAAnD;IAAE9B,UAAF;IAAcE,WAAd;IAA2BP;EAA3B,CAAmD;;EACnE,IAAIK,UAAU,KAAK,QAAnB,EAA6B;IAC3B,oBAAO,6BAAC,iBAAD;MAAM,KAAK,EAAEsB,MAAM,CAAC3B;IAApB,GAA2BA,IAAI,iBAAI,6BAAC,YAAD;MAAc,OAAO,EAAEO;IAAvB,GAAqCP,IAArC,CAAnC,CAAP;EACD;;EACD,IAAI,CAACA,IAAL,EAAW,OAAO,IAAP;EACX,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE2B,MAAM,CAAC3B;EAApB,gBACE,6BAAC,YAAD;IAAc,OAAO,EAAEO;EAAvB,GAAqCP,IAArC,CADF,CADF;AAKD,CAVD;;AAYA,MAAMoC,SAAS,GAAG,SAAsD;EAAA,IAArD;IAAE/B,UAAF;IAAcG,YAAd;IAA4BN;EAA5B,CAAqD;;EACtE,IAAIG,UAAU,KAAK,QAAnB,EAA6B;IAC3B,oBAAO,6BAAC,iBAAD;MAAM,KAAK,EAAEsB,MAAM,CAACzB;IAApB,GAA4BA,KAAK,iBAAI,6BAAC,YAAD;MAAc,OAAO,EAAEM;IAAvB,GAAsCN,KAAtC,CAArC,CAAP;EACD;;EACD,IAAI,CAACA,KAAL,EAAY,OAAO,IAAP;EACZ,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEyB,MAAM,CAACzB;EAApB,gBACE,6BAAC,YAAD;IAAc,OAAO,EAAEM;EAAvB,GAAsCN,KAAtC,CADF,CADF;AAKD,CAVD;;AAYA,MAAMmC,WAAW,GAAG,SAA8C;EAAA,IAA7C;IAAEjC,QAAF;IAAYkC,KAAZ;IAAmB,GAAGC;EAAtB,CAA6C;EAChE,oBACE,6BAAC,aAAD,eAAUA,KAAV;IAAiB,EAAE,MAAnB;IAAoB,aAAa,EAAE,CAAnC;IAAsC,KAAK,EAAED;EAA7C,IACGlC,QADH,CADF;AAKD,CAND;;AAOA,MAAMoC,cAAc,GAAG,SAA8C;EAAA,IAA7C;IAAEpC,QAAF;IAAYkC,KAAZ;IAAmB,GAAGC;EAAtB,CAA6C;EACnE,MAAM;IAAEzB;EAAF,IAAa,IAAAC,sBAAA,GAAnB;EACA,oBACE,6BAAC,aAAD;IAAM,KAAK,EAAED,MAAM,CAAC2B;EAApB,GAAwCF,KAAxC;IAA+C,QAAQ,MAAvD;IAAwD,aAAa,EAAE,CAAvE;IAA0E,KAAK,EAAED;EAAjF,IACGlC,QADH,CADF;AAKD,CAPD;;AAQA,MAAMsC,YAAY,GAAG,SAAkG;EAAA,IAAjG;IAAEtC,QAAF;IAAYuC,QAAZ;IAAsBC,OAAtB;IAA+BC,KAA/B;IAAsC,GAAGN;EAAzC,CAAiG;EACrH,oBACE,6BAAC,6BAAD;IACE,KAAK,EAAEZ,MAAM,CAACmB;EADhB,GAEMP,KAFN;IAGE,QAAQ,EAAE,CAACK,OAAD,IAAYD,QAHxB;IAIE,OAAO,EAAGI,CAAD,IAAOH,OAAP,aAAOA,OAAP,uBAAOA,OAAO,CAAGG,CAAH,CAJzB;IAKE,aAAa,EAAE;EALjB,IAOG,IAAAC,6BAAA,EACC,CAAC,OAAO5C,QAAP,KAAoB,QAApB,IAAgC,OAAOA,QAAP,KAAoB,QAArD,CADD,EAEC,cACE,6BAAC,aAAD;IAAM,MAAM,MAAZ;IAAa,aAAa,EAAE,CAA5B;IAA+B,KAAK,EAAEyC;EAAtC,GACGzC,QADH,CADF,EAIEA,QAJF,CAFD,CAPH,CADF;AAmBD,CApBD;;AAsBA,MAAMuB,MAAM,GAAG,IAAAsB,yBAAA,EAAiB;EAC9BrB,SAAS,EAAE;IACTC,iBAAiB,EAAE,EADV;IAETqB,iBAAiB,EAAE;EAFV,CADmB;EAK9B3B,MAAM,EAAE;IACN4B,aAAa,EAAE;EADT,CALsB;EAQ9B7C,KAAK,EAAE;IACL8C,IAAI,EAAE,CADD;IAELD,aAAa,EAAE,KAFV;IAGLE,UAAU,EAAE,QAHP;IAILpB,gBAAgB,EAAE;EAJb,CARuB;EAc9BjC,IAAI,EAAE;IACJgC,MAAM,EAAE,MADJ;IAEJsB,QAAQ,EAAE,EAFN;IAGJD,UAAU,EAAE,QAHR;IAIJnB,cAAc,EAAE,QAJZ;IAKJqB,WAAW,EAAE;EALT,CAdwB;EAqB9BrD,KAAK,EAAE;IACL8B,MAAM,EAAE,MADH;IAELsB,QAAQ,EAAE,EAFL;IAGLD,UAAU,EAAE,QAHP;IAILnB,cAAc,EAAE,QAJX;IAKLsB,UAAU,EAAE;EALP,CArBuB;EA4B9BV,MAAM,EAAE;IACNW,OAAO,EAAE;EADH;AA5BsB,CAAjB,CAAf;AAiCAtD,MAAM,CAACuD,MAAP,GAAgBhB,YAAhB;AACAvC,MAAM,CAACwD,KAAP,GAAetB,WAAf;AACAlC,MAAM,CAACyD,QAAP,GAAkBpB,cAAlB;eACerC,M"}
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,10 +66,11 @@ 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, {
@@ -129,7 +131,7 @@ const styles = createStyleSheet({
129
131
  flexDirection: 'row',
130
132
  marginBottom: 4
131
133
  },
132
- channelInfo: {
134
+ channelInfoContainer: {
133
135
  flex: 1,
134
136
  marginRight: 4,
135
137
  alignItems: 'center',
@@ -146,9 +148,13 @@ const styles = createStyleSheet({
146
148
  channelInfoFrozen: {
147
149
  marginRight: 4
148
150
  },
149
- titleCaption: {
150
- marginLeft: 4,
151
- paddingTop: 2
151
+ titleCaptionContainer: {
152
+ alignItems: 'flex-start',
153
+ flexDirection: 'row',
154
+ marginLeft: 4
155
+ },
156
+ titleCaptionText: {
157
+ marginTop: 2
152
158
  },
153
159
  rightBottomSection: {
154
160
  flex: 1,
@@ -186,5 +192,5 @@ const styles = createStyleSheet({
186
192
  width: '84.5%'
187
193
  }
188
194
  });
189
- export default /*#__PURE__*/React.memo(GroupChannelPreview);
195
+ export default GroupChannelPreview;
190
196
  //# 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","alignItems","bodyIconBackground","bodyText","textBody","separator","Separator","width","flexDirection","paddingHorizontal","paddingVertical","marginRight","height","borderRadius","flex","marginBottom","flexShrink","paddingTop","marginLeft","marginTop","justifyContent","unreadBadge","minWidth","minHeight","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, 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 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 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 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.0",
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.0"
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": "787ef6d52fec5d01e9b831d7a6f17e33614e2d09"
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,8 +78,9 @@ 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>
@@ -132,7 +137,7 @@ const styles = createStyleSheet({
132
137
  flexDirection: 'row',
133
138
  marginBottom: 4,
134
139
  },
135
- channelInfo: {
140
+ channelInfoContainer: {
136
141
  flex: 1,
137
142
  marginRight: 4,
138
143
  alignItems: 'center',
@@ -149,9 +154,13 @@ const styles = createStyleSheet({
149
154
  channelInfoFrozen: {
150
155
  marginRight: 4,
151
156
  },
152
- titleCaption: {
157
+ titleCaptionContainer: {
158
+ alignItems: 'flex-start',
159
+ flexDirection: 'row',
153
160
  marginLeft: 4,
154
- paddingTop: 2,
161
+ },
162
+ titleCaptionText: {
163
+ marginTop: 2,
155
164
  },
156
165
  rightBottomSection: {
157
166
  flex: 1,
@@ -190,4 +199,4 @@ const styles = createStyleSheet({
190
199
  },
191
200
  });
192
201
 
193
- export default React.memo(GroupChannelPreview);
202
+ 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={[