@sendbird/uikit-react-native-foundation 3.2.0 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/TextInput/index.js +10 -3
- package/lib/commonjs/components/TextInput/index.js.map +1 -1
- package/lib/commonjs/index.js +9 -2
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/styles/createStyleSheet.js +4 -0
- package/lib/commonjs/styles/createStyleSheet.js.map +1 -1
- package/lib/commonjs/ui/Avatar/AvatarStack.js +96 -0
- package/lib/commonjs/ui/Avatar/AvatarStack.js.map +1 -0
- package/lib/commonjs/ui/Avatar/index.js +3 -1
- package/lib/commonjs/ui/Avatar/index.js.map +1 -1
- package/lib/commonjs/ui/Prompt/index.js +4 -2
- package/lib/commonjs/ui/Prompt/index.js.map +1 -1
- package/lib/commonjs/ui/TypingIndicatorBubble/index.js +118 -0
- package/lib/commonjs/ui/TypingIndicatorBubble/index.js.map +1 -0
- package/lib/module/components/TextInput/index.js +10 -3
- package/lib/module/components/TextInput/index.js.map +1 -1
- package/lib/module/index.js +3 -2
- package/lib/module/index.js.map +1 -1
- package/lib/module/styles/createStyleSheet.js +4 -0
- package/lib/module/styles/createStyleSheet.js.map +1 -1
- package/lib/module/ui/Avatar/AvatarStack.js +88 -0
- package/lib/module/ui/Avatar/AvatarStack.js.map +1 -0
- package/lib/module/ui/Avatar/index.js +3 -1
- package/lib/module/ui/Avatar/index.js.map +1 -1
- package/lib/module/ui/Prompt/index.js +4 -2
- package/lib/module/ui/Prompt/index.js.map +1 -1
- package/lib/module/ui/TypingIndicatorBubble/index.js +108 -0
- package/lib/module/ui/TypingIndicatorBubble/index.js.map +1 -0
- package/lib/typescript/src/index.d.ts +4 -3
- package/lib/typescript/src/ui/Avatar/AvatarStack.d.ts +16 -0
- package/lib/typescript/src/ui/Avatar/index.d.ts +14 -0
- package/lib/typescript/src/ui/TypingIndicatorBubble/index.d.ts +10 -0
- package/package.json +3 -3
- package/src/components/TextInput/index.tsx +10 -3
- package/src/index.ts +4 -4
- package/src/styles/createStyleSheet.ts +4 -0
- package/src/ui/Avatar/AvatarStack.tsx +103 -0
- package/src/ui/Avatar/index.tsx +2 -0
- package/src/ui/Prompt/index.tsx +1 -1
- package/src/ui/TypingIndicatorBubble/index.tsx +120 -0
|
@@ -28,12 +28,16 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef(function TextInput(_ref
|
|
|
28
28
|
borderBottomWidth: 2,
|
|
29
29
|
borderBottomColor: inputStyle.highlight
|
|
30
30
|
};
|
|
31
|
+
const fontStyle = {
|
|
32
|
+
...typography.body3,
|
|
33
|
+
lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined
|
|
34
|
+
};
|
|
31
35
|
return /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
|
|
32
36
|
ref: ref,
|
|
33
37
|
editable: editable,
|
|
34
38
|
selectionColor: inputStyle.highlight,
|
|
35
39
|
placeholderTextColor: inputStyle.placeholder,
|
|
36
|
-
style: [
|
|
40
|
+
style: [fontStyle, styles.input, {
|
|
37
41
|
color: inputStyle.text,
|
|
38
42
|
backgroundColor: inputStyle.background
|
|
39
43
|
}, underlineStyle, style]
|
|
@@ -41,8 +45,11 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef(function TextInput(_ref
|
|
|
41
45
|
});
|
|
42
46
|
const styles = (0, _createStyleSheet.default)({
|
|
43
47
|
input: {
|
|
44
|
-
|
|
45
|
-
|
|
48
|
+
includeFontPadding: false,
|
|
49
|
+
paddingTop: 8,
|
|
50
|
+
paddingBottom: 8,
|
|
51
|
+
paddingLeft: 16,
|
|
52
|
+
paddingRight: 16
|
|
46
53
|
}
|
|
47
54
|
});
|
|
48
55
|
var _default = TextInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_createStyleSheet","_useUIKitTheme","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","TextInput","React","forwardRef","_ref","ref","children","style","variant","editable","props","typography","colors","useUIKitTheme","variantStyle","inputStyle","active","disabled","underlineStyle","borderBottomWidth","borderBottomColor","highlight","createElement","selectionColor","placeholderTextColor","placeholder","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_createStyleSheet","_useUIKitTheme","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","TextInput","React","forwardRef","_ref","ref","children","style","variant","editable","props","typography","colors","useUIKitTheme","variantStyle","inputStyle","active","disabled","underlineStyle","borderBottomWidth","borderBottomColor","highlight","fontStyle","body3","lineHeight","fontSize","undefined","createElement","selectionColor","placeholderTextColor","placeholder","styles","input","color","text","backgroundColor","background","createStyleSheet","includeFontPadding","paddingTop","paddingBottom","paddingLeft","paddingRight","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TextInput as RNTextInput, TextInputProps } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport type { UIKitTheme } from '../../types';\n\ntype Props = { variant?: keyof UIKitTheme['colors']['ui']['input'] } & TextInputProps;\nconst TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(\n { children, style, variant = 'default', editable = true, ...props },\n ref,\n) {\n const { typography, colors } = useUIKitTheme();\n\n const variantStyle = colors['ui']['input'][variant];\n const inputStyle = editable ? variantStyle.active : variantStyle.disabled;\n const underlineStyle = variant === 'underline' && { borderBottomWidth: 2, borderBottomColor: inputStyle.highlight };\n const fontStyle = {\n ...typography.body3,\n lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined,\n };\n\n return (\n <RNTextInput\n ref={ref}\n editable={editable}\n selectionColor={inputStyle.highlight}\n placeholderTextColor={inputStyle.placeholder}\n style={[\n fontStyle,\n styles.input,\n { color: inputStyle.text, backgroundColor: inputStyle.background },\n underlineStyle,\n style,\n ]}\n {...props}\n >\n {children}\n </RNTextInput>\n );\n});\n\nconst styles = createStyleSheet({\n input: {\n includeFontPadding: false,\n paddingTop: 8,\n paddingBottom: 8,\n paddingLeft: 16,\n paddingRight: 16,\n },\n});\n\nexport default TextInput;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,iBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,cAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAsD,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAItD,MAAMQ,SAAS,gBAAGC,cAAK,CAACC,UAAU,CAAqB,SAASF,SAASA,CAAAG,IAAA,EAEvEC,GAAG,EACH;EAAA,IAFA;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,OAAO,GAAG,SAAS;IAAEC,QAAQ,GAAG,IAAI;IAAE,GAAGC;EAAM,CAAC,GAAAN,IAAA;EAGnE,MAAM;IAAEO,UAAU;IAAEC;EAAO,CAAC,GAAG,IAAAC,sBAAa,GAAE;EAE9C,MAAMC,YAAY,GAAGF,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAACJ,OAAO,CAAC;EACnD,MAAMO,UAAU,GAAGN,QAAQ,GAAGK,YAAY,CAACE,MAAM,GAAGF,YAAY,CAACG,QAAQ;EACzE,MAAMC,cAAc,GAAGV,OAAO,KAAK,WAAW,IAAI;IAAEW,iBAAiB,EAAE,CAAC;IAAEC,iBAAiB,EAAEL,UAAU,CAACM;EAAU,CAAC;EACnH,MAAMC,SAAS,GAAG;IAChB,GAAGX,UAAU,CAACY,KAAK;IACnBC,UAAU,EAAEb,UAAU,CAACY,KAAK,CAACE,QAAQ,GAAGd,UAAU,CAACY,KAAK,CAACE,QAAQ,GAAG,GAAG,GAAGC;EAC5E,CAAC;EAED,oBACEhD,MAAA,CAAAQ,OAAA,CAAAyC,aAAA,CAAC9C,YAAA,CAAAoB,SAAW,EAAAd,QAAA;IACVkB,GAAG,EAAEA,GAAI;IACTI,QAAQ,EAAEA,QAAS;IACnBmB,cAAc,EAAEb,UAAU,CAACM,SAAU;IACrCQ,oBAAoB,EAAEd,UAAU,CAACe,WAAY;IAC7CvB,KAAK,EAAE,CACLe,SAAS,EACTS,MAAM,CAACC,KAAK,EACZ;MAAEC,KAAK,EAAElB,UAAU,CAACmB,IAAI;MAAEC,eAAe,EAAEpB,UAAU,CAACqB;IAAW,CAAC,EAClElB,cAAc,EACdX,KAAK;EACL,GACEG,KAAK,GAERJ,QAAQ,CACG;AAElB,CAAC,CAAC;AAEF,MAAMyB,MAAM,GAAG,IAAAM,yBAAgB,EAAC;EAC9BL,KAAK,EAAE;IACLM,kBAAkB,EAAE,KAAK;IACzBC,UAAU,EAAE,CAAC;IACbC,aAAa,EAAE,CAAC;IAChBC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAAC,IAAAC,QAAA,GAEY1C,SAAS;AAAA2C,OAAA,CAAA1D,OAAA,GAAAyD,QAAA"}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -237,6 +237,12 @@ Object.defineProperty(exports, "ToastProvider", {
|
|
|
237
237
|
return _Toast.ToastProvider;
|
|
238
238
|
}
|
|
239
239
|
});
|
|
240
|
+
Object.defineProperty(exports, "TypingIndicatorBubble", {
|
|
241
|
+
enumerable: true,
|
|
242
|
+
get: function () {
|
|
243
|
+
return _TypingIndicatorBubble.default;
|
|
244
|
+
}
|
|
245
|
+
});
|
|
240
246
|
Object.defineProperty(exports, "UIKitThemeContext", {
|
|
241
247
|
enumerable: true,
|
|
242
248
|
get: function () {
|
|
@@ -355,11 +361,11 @@ var _BottomSheet = _interopRequireDefault(require("./ui/BottomSheet"));
|
|
|
355
361
|
var _Button = _interopRequireDefault(require("./ui/Button"));
|
|
356
362
|
var _ChannelFrozenBanner = _interopRequireDefault(require("./ui/ChannelFrozenBanner"));
|
|
357
363
|
var _Dialog = require("./ui/Dialog");
|
|
364
|
+
var _GroupChannelMessage = _interopRequireDefault(require("./ui/GroupChannelMessage"));
|
|
365
|
+
var _GroupChannelPreview = _interopRequireDefault(require("./ui/GroupChannelPreview"));
|
|
358
366
|
var _Header = _interopRequireDefault(require("./ui/Header"));
|
|
359
367
|
var _LoadingSpinner = _interopRequireDefault(require("./ui/LoadingSpinner"));
|
|
360
368
|
var _MenuBar = _interopRequireDefault(require("./ui/MenuBar"));
|
|
361
|
-
var _GroupChannelMessage = _interopRequireDefault(require("./ui/GroupChannelMessage"));
|
|
362
|
-
var _GroupChannelPreview = _interopRequireDefault(require("./ui/GroupChannelPreview"));
|
|
363
369
|
var _OpenChannelMessage = _interopRequireDefault(require("./ui/OpenChannelMessage"));
|
|
364
370
|
var _OpenChannelPreview = _interopRequireDefault(require("./ui/OpenChannelPreview"));
|
|
365
371
|
var _OutlinedButton = _interopRequireDefault(require("./ui/OutlinedButton"));
|
|
@@ -367,6 +373,7 @@ var _Placeholder = _interopRequireDefault(require("./ui/Placeholder"));
|
|
|
367
373
|
var _ProfileCard = _interopRequireDefault(require("./ui/ProfileCard"));
|
|
368
374
|
var _Prompt = _interopRequireDefault(require("./ui/Prompt"));
|
|
369
375
|
var _Toast = _interopRequireWildcard(require("./ui/Toast"));
|
|
376
|
+
var _TypingIndicatorBubble = _interopRequireDefault(require("./ui/TypingIndicatorBubble"));
|
|
370
377
|
var _createSelectByColorScheme = _interopRequireDefault(require("./styles/createSelectByColorScheme"));
|
|
371
378
|
var _createScaleFactor = _interopRequireDefault(require("./styles/createScaleFactor"));
|
|
372
379
|
var _createStyleSheet = _interopRequireDefault(require("./styles/createStyleSheet"));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_icon","_interopRequireDefault","require","_Box","_Divider","_Icon","_Image","_ImageWithPlaceholder","_Modal","_PressBox","_ProgressBar","_RegexText","_Switch","_Text","_TextInput","_VideoThumbnail","_ActionMenu","_Alert","_Avatar","_Badge","_BottomSheet","_Button","_ChannelFrozenBanner","_Dialog","
|
|
1
|
+
{"version":3,"names":["_icon","_interopRequireDefault","require","_Box","_Divider","_Icon","_Image","_ImageWithPlaceholder","_Modal","_PressBox","_ProgressBar","_RegexText","_Switch","_Text","_TextInput","_VideoThumbnail","_ActionMenu","_Alert","_Avatar","_Badge","_BottomSheet","_Button","_ChannelFrozenBanner","_Dialog","_GroupChannelMessage","_GroupChannelPreview","_Header","_LoadingSpinner","_MenuBar","_OpenChannelMessage","_OpenChannelPreview","_OutlinedButton","_Placeholder","_ProfileCard","_Prompt","_Toast","_interopRequireWildcard","_TypingIndicatorBubble","_createSelectByColorScheme","_createScaleFactor","_createStyleSheet","_createTypography","_getDefaultHeaderHeight","_HeaderStyleContext","_useHeaderStyle","_createTheme","_DarkUIKitTheme","_LightUIKitTheme","_Palette","_UIKitThemeContext","_UIKitThemeProvider","_useUIKitTheme","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set"],"sources":["index.ts"],"sourcesContent":["/** Assets **/\nexport { default as IconAssets } from './assets/icon';\n\n/** Component **/\nexport { default as Box } from './components/Box';\nexport { default as Divider } from './components/Divider';\nexport { default as Icon } from './components/Icon';\nexport { default as Image } from './components/Image';\nexport { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';\nexport { default as Modal } from './components/Modal';\nexport { default as PressBox } from './components/PressBox';\nexport { default as ProgressBar } from './components/ProgressBar';\nexport { default as RegexText } from './components/RegexText';\nexport type { RegexTextPattern } from './components/RegexText';\nexport { default as Switch } from './components/Switch';\nexport { default as Text } from './components/Text';\nexport { default as TextInput } from './components/TextInput';\nexport { VideoThumbnail } from './components/VideoThumbnail';\n\n/** UI **/\nexport { default as ActionMenu } from './ui/ActionMenu';\nexport { default as Alert } from './ui/Alert';\nexport { default as Avatar } from './ui/Avatar';\nexport { default as Badge } from './ui/Badge';\nexport { default as BottomSheet } from './ui/BottomSheet';\nexport { default as Button } from './ui/Button';\nexport { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';\nexport { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';\nexport { default as GroupChannelMessage } from './ui/GroupChannelMessage';\nexport type { GroupChannelMessageProps } from './ui/GroupChannelMessage';\nexport { default as GroupChannelPreview } from './ui/GroupChannelPreview';\nexport { default as Header } from './ui/Header';\nexport { default as LoadingSpinner } from './ui/LoadingSpinner';\nexport { default as MenuBar } from './ui/MenuBar';\nexport type { MenuBarProps } from './ui/MenuBar';\nexport { default as OpenChannelMessage } from './ui/OpenChannelMessage';\nexport type { OpenChannelMessageProps } from './ui/OpenChannelMessage';\nexport { default as OpenChannelPreview } from './ui/OpenChannelPreview';\nexport { default as OutlinedButton } from './ui/OutlinedButton';\nexport { default as Placeholder } from './ui/Placeholder';\nexport { default as ProfileCard } from './ui/ProfileCard';\nexport { default as Prompt } from './ui/Prompt';\nexport { default as Toast, useToast, ToastProvider } from './ui/Toast';\nexport { default as TypingIndicatorBubble } from './ui/TypingIndicatorBubble';\n\n/** Styles **/\nexport { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';\nexport { default as createScaleFactor } from './styles/createScaleFactor';\nexport { default as createStyleSheet } from './styles/createStyleSheet';\nexport { default as createTypography } from './styles/createTypography';\nexport { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';\nexport { HeaderStyleContext, HeaderStyleProvider } from './styles/HeaderStyleContext';\nexport { default as useHeaderStyle } from './styles/useHeaderStyle';\n\n/** Theme **/\nexport { default as createTheme } from './theme/createTheme';\nexport { default as DarkUIKitTheme } from './theme/DarkUIKitTheme';\nexport { default as LightUIKitTheme } from './theme/LightUIKitTheme';\nexport { default as Palette } from './theme/Palette';\nexport { default as UIKitThemeContext } from './theme/UIKitThemeContext';\nexport { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';\nexport { default as useUIKitTheme } from './theme/useUIKitTheme';\n\n/** Types **/\nexport type {\n TypoName,\n UIKitTheme,\n UIKitTypography,\n FontAttributes,\n BaseHeaderProps,\n UIKitColorScheme,\n UIKitColors,\n ComponentColorTree,\n UIKitPalette,\n HeaderElement,\n HeaderPartProps,\n ComponentColors,\n Component,\n GetColorTree,\n} from './types';\nexport type { ActionMenuItem } from './ui/ActionMenu';\nexport type { BottomSheetItem } from './ui/BottomSheet';\nexport type { UIKitTypographyOverrides } from './styles/createTypography';\nexport type { HeaderStyleContextType } from './styles/HeaderStyleContext';\n"],"mappings":"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"}
|
|
@@ -18,11 +18,15 @@ const preProcessor = {
|
|
|
18
18
|
'height': SCALE_FACTOR_WITH_STR,
|
|
19
19
|
'width': SCALE_FACTOR_WITH_STR,
|
|
20
20
|
'padding': SCALE_FACTOR_WITH_STR,
|
|
21
|
+
'paddingVertical': SCALE_FACTOR_WITH_STR,
|
|
22
|
+
'paddingHorizontal': SCALE_FACTOR_WITH_STR,
|
|
21
23
|
'paddingTop': SCALE_FACTOR_WITH_STR,
|
|
22
24
|
'paddingBottom': SCALE_FACTOR_WITH_STR,
|
|
23
25
|
'paddingLeft': SCALE_FACTOR_WITH_STR,
|
|
24
26
|
'paddingRight': SCALE_FACTOR_WITH_STR,
|
|
25
27
|
'margin': SCALE_FACTOR_WITH_STR,
|
|
28
|
+
'marginVertical': SCALE_FACTOR_WITH_STR,
|
|
29
|
+
'marginHorizontal': SCALE_FACTOR_WITH_STR,
|
|
26
30
|
'marginTop': SCALE_FACTOR_WITH_STR,
|
|
27
31
|
'marginBottom': SCALE_FACTOR_WITH_STR,
|
|
28
32
|
'marginLeft': SCALE_FACTOR_WITH_STR,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_createScaleFactor","SCALE_FACTOR_WITH_STR","val","DEFAULT_SCALE_FACTOR","preProcessor","preProcessorKeys","Object","keys","preProcessorLen","length","createStyleSheet","styles","values","forEach","style","styleKeys","styleLen","key","StyleSheet","create","_default","exports","default"],"sources":["createStyleSheet.ts"],"sourcesContent":["import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from 'react-native';\n\nimport { DEFAULT_SCALE_FACTOR } from './createScaleFactor';\n\ntype Styles = ViewStyle | TextStyle | ImageStyle;\ntype StylePreprocessor<T extends Styles = Styles> = { [key in keyof T]: (val: NonNullable<T[key]>) => typeof val };\n\nconst SCALE_FACTOR_WITH_STR = (val: string | number) => (typeof val === 'string' ? val : DEFAULT_SCALE_FACTOR(val));\n\nconst preProcessor: Partial<StylePreprocessor> = {\n 'fontSize': DEFAULT_SCALE_FACTOR,\n 'lineHeight': DEFAULT_SCALE_FACTOR,\n 'borderRadius': DEFAULT_SCALE_FACTOR,\n 'minWidth': SCALE_FACTOR_WITH_STR,\n 'maxWidth': SCALE_FACTOR_WITH_STR,\n 'minHeight': SCALE_FACTOR_WITH_STR,\n 'maxHeight': SCALE_FACTOR_WITH_STR,\n 'height': SCALE_FACTOR_WITH_STR,\n 'width': SCALE_FACTOR_WITH_STR,\n 'padding': SCALE_FACTOR_WITH_STR,\n 'paddingTop': SCALE_FACTOR_WITH_STR,\n 'paddingBottom': SCALE_FACTOR_WITH_STR,\n 'paddingLeft': SCALE_FACTOR_WITH_STR,\n 'paddingRight': SCALE_FACTOR_WITH_STR,\n 'margin': SCALE_FACTOR_WITH_STR,\n 'marginTop': SCALE_FACTOR_WITH_STR,\n 'marginBottom': SCALE_FACTOR_WITH_STR,\n 'marginLeft': SCALE_FACTOR_WITH_STR,\n 'marginRight': SCALE_FACTOR_WITH_STR,\n 'left': SCALE_FACTOR_WITH_STR,\n 'right': SCALE_FACTOR_WITH_STR,\n 'top': SCALE_FACTOR_WITH_STR,\n 'bottom': SCALE_FACTOR_WITH_STR,\n};\n\nconst preProcessorKeys = Object.keys(preProcessor);\nconst preProcessorLen = preProcessorKeys.length;\n\n/**\n * Create StyleSheet with customized pre-processor\n * Return a StyleSheet that pre-processed\n * @param styles\n * @returns StyleSheet\n * */\nconst createStyleSheet = <T extends StyleSheet.NamedStyles<T>>(styles: T | StyleSheet.NamedStyles<T>): T => {\n Object.values(styles).forEach((style) => {\n // @ts-ignore\n const styleKeys = Object.keys(style);\n const styleLen = styleKeys.length;\n\n const keys = styleLen < preProcessorLen ? styleKeys : preProcessorKeys;\n keys.forEach((key) => {\n // @ts-ignore\n if (preProcessor[key] && typeof style[key] !== 'undefined') style[key] = preProcessor[key](style[key]);\n });\n });\n\n return StyleSheet.create<T>(styles);\n};\n\nexport default createStyleSheet;\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,kBAAA,GAAAD,OAAA;AAKA,MAAME,qBAAqB,GAAIC,GAAoB,IAAM,OAAOA,GAAG,KAAK,QAAQ,GAAGA,GAAG,GAAG,IAAAC,uCAAoB,EAACD,GAAG,CAAE;AAEnH,MAAME,YAAwC,GAAG;EAC/C,UAAU,EAAED,uCAAoB;EAChC,YAAY,EAAEA,uCAAoB;EAClC,cAAc,EAAEA,uCAAoB;EACpC,UAAU,EAAEF,qBAAqB;EACjC,UAAU,EAAEA,qBAAqB;EACjC,WAAW,EAAEA,qBAAqB;EAClC,WAAW,EAAEA,qBAAqB;EAClC,QAAQ,EAAEA,qBAAqB;EAC/B,OAAO,EAAEA,qBAAqB;EAC9B,SAAS,EAAEA,qBAAqB;EAChC,YAAY,EAAEA,qBAAqB;EACnC,eAAe,EAAEA,qBAAqB;EACtC,aAAa,EAAEA,qBAAqB;EACpC,cAAc,EAAEA,qBAAqB;EACrC,QAAQ,EAAEA,qBAAqB;EAC/B,WAAW,EAAEA,qBAAqB;EAClC,cAAc,EAAEA,qBAAqB;EACrC,YAAY,EAAEA,qBAAqB;EACnC,aAAa,EAAEA,qBAAqB;EACpC,MAAM,EAAEA,qBAAqB;EAC7B,OAAO,EAAEA,qBAAqB;EAC9B,KAAK,EAAEA,qBAAqB;EAC5B,QAAQ,EAAEA;AACZ,CAAC;AAED,MAAMI,gBAAgB,GAAGC,MAAM,CAACC,IAAI,CAACH,YAAY,CAAC;AAClD,MAAMI,eAAe,GAAGH,gBAAgB,CAACI,MAAM;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAyCC,MAAqC,IAAQ;EAC1GL,MAAM,CAACM,MAAM,CAACD,MAAM,CAAC,CAACE,OAAO,CAAEC,KAAK,IAAK;IACvC;IACA,MAAMC,SAAS,GAAGT,MAAM,CAACC,IAAI,CAACO,KAAK,CAAC;IACpC,MAAME,QAAQ,GAAGD,SAAS,CAACN,MAAM;IAEjC,MAAMF,IAAI,GAAGS,QAAQ,GAAGR,eAAe,GAAGO,SAAS,GAAGV,gBAAgB;IACtEE,IAAI,CAACM,OAAO,CAAEI,GAAG,IAAK;MACpB;MACA,IAAIb,YAAY,CAACa,GAAG,CAAC,IAAI,OAAOH,KAAK,CAACG,GAAG,CAAC,KAAK,WAAW,EAAEH,KAAK,CAACG,GAAG,CAAC,GAAGb,YAAY,CAACa,GAAG,CAAC,CAACH,KAAK,CAACG,GAAG,CAAC,CAAC;IACxG,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,OAAOC,uBAAU,CAACC,MAAM,CAAIR,MAAM,CAAC;AACrC,CAAC;AAAC,IAAAS,QAAA,GAEaV,gBAAgB;AAAAW,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_createScaleFactor","SCALE_FACTOR_WITH_STR","val","DEFAULT_SCALE_FACTOR","preProcessor","preProcessorKeys","Object","keys","preProcessorLen","length","createStyleSheet","styles","values","forEach","style","styleKeys","styleLen","key","StyleSheet","create","_default","exports","default"],"sources":["createStyleSheet.ts"],"sourcesContent":["import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from 'react-native';\n\nimport { DEFAULT_SCALE_FACTOR } from './createScaleFactor';\n\ntype Styles = ViewStyle | TextStyle | ImageStyle;\ntype StylePreprocessor<T extends Styles = Styles> = { [key in keyof T]: (val: NonNullable<T[key]>) => typeof val };\n\nconst SCALE_FACTOR_WITH_STR = (val: string | number) => (typeof val === 'string' ? val : DEFAULT_SCALE_FACTOR(val));\n\nconst preProcessor: Partial<StylePreprocessor> = {\n 'fontSize': DEFAULT_SCALE_FACTOR,\n 'lineHeight': DEFAULT_SCALE_FACTOR,\n 'borderRadius': DEFAULT_SCALE_FACTOR,\n 'minWidth': SCALE_FACTOR_WITH_STR,\n 'maxWidth': SCALE_FACTOR_WITH_STR,\n 'minHeight': SCALE_FACTOR_WITH_STR,\n 'maxHeight': SCALE_FACTOR_WITH_STR,\n 'height': SCALE_FACTOR_WITH_STR,\n 'width': SCALE_FACTOR_WITH_STR,\n 'padding': SCALE_FACTOR_WITH_STR,\n 'paddingVertical': SCALE_FACTOR_WITH_STR,\n 'paddingHorizontal': SCALE_FACTOR_WITH_STR,\n 'paddingTop': SCALE_FACTOR_WITH_STR,\n 'paddingBottom': SCALE_FACTOR_WITH_STR,\n 'paddingLeft': SCALE_FACTOR_WITH_STR,\n 'paddingRight': SCALE_FACTOR_WITH_STR,\n 'margin': SCALE_FACTOR_WITH_STR,\n 'marginVertical': SCALE_FACTOR_WITH_STR,\n 'marginHorizontal': SCALE_FACTOR_WITH_STR,\n 'marginTop': SCALE_FACTOR_WITH_STR,\n 'marginBottom': SCALE_FACTOR_WITH_STR,\n 'marginLeft': SCALE_FACTOR_WITH_STR,\n 'marginRight': SCALE_FACTOR_WITH_STR,\n 'left': SCALE_FACTOR_WITH_STR,\n 'right': SCALE_FACTOR_WITH_STR,\n 'top': SCALE_FACTOR_WITH_STR,\n 'bottom': SCALE_FACTOR_WITH_STR,\n};\n\nconst preProcessorKeys = Object.keys(preProcessor);\nconst preProcessorLen = preProcessorKeys.length;\n\n/**\n * Create StyleSheet with customized pre-processor\n * Return a StyleSheet that pre-processed\n * @param styles\n * @returns StyleSheet\n * */\nconst createStyleSheet = <T extends StyleSheet.NamedStyles<T>>(styles: T | StyleSheet.NamedStyles<T>): T => {\n Object.values(styles).forEach((style) => {\n // @ts-ignore\n const styleKeys = Object.keys(style);\n const styleLen = styleKeys.length;\n\n const keys = styleLen < preProcessorLen ? styleKeys : preProcessorKeys;\n keys.forEach((key) => {\n // @ts-ignore\n if (preProcessor[key] && typeof style[key] !== 'undefined') style[key] = preProcessor[key](style[key]);\n });\n });\n\n return StyleSheet.create<T>(styles);\n};\n\nexport default createStyleSheet;\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,kBAAA,GAAAD,OAAA;AAKA,MAAME,qBAAqB,GAAIC,GAAoB,IAAM,OAAOA,GAAG,KAAK,QAAQ,GAAGA,GAAG,GAAG,IAAAC,uCAAoB,EAACD,GAAG,CAAE;AAEnH,MAAME,YAAwC,GAAG;EAC/C,UAAU,EAAED,uCAAoB;EAChC,YAAY,EAAEA,uCAAoB;EAClC,cAAc,EAAEA,uCAAoB;EACpC,UAAU,EAAEF,qBAAqB;EACjC,UAAU,EAAEA,qBAAqB;EACjC,WAAW,EAAEA,qBAAqB;EAClC,WAAW,EAAEA,qBAAqB;EAClC,QAAQ,EAAEA,qBAAqB;EAC/B,OAAO,EAAEA,qBAAqB;EAC9B,SAAS,EAAEA,qBAAqB;EAChC,iBAAiB,EAAEA,qBAAqB;EACxC,mBAAmB,EAAEA,qBAAqB;EAC1C,YAAY,EAAEA,qBAAqB;EACnC,eAAe,EAAEA,qBAAqB;EACtC,aAAa,EAAEA,qBAAqB;EACpC,cAAc,EAAEA,qBAAqB;EACrC,QAAQ,EAAEA,qBAAqB;EAC/B,gBAAgB,EAAEA,qBAAqB;EACvC,kBAAkB,EAAEA,qBAAqB;EACzC,WAAW,EAAEA,qBAAqB;EAClC,cAAc,EAAEA,qBAAqB;EACrC,YAAY,EAAEA,qBAAqB;EACnC,aAAa,EAAEA,qBAAqB;EACpC,MAAM,EAAEA,qBAAqB;EAC7B,OAAO,EAAEA,qBAAqB;EAC9B,KAAK,EAAEA,qBAAqB;EAC5B,QAAQ,EAAEA;AACZ,CAAC;AAED,MAAMI,gBAAgB,GAAGC,MAAM,CAACC,IAAI,CAACH,YAAY,CAAC;AAClD,MAAMI,eAAe,GAAGH,gBAAgB,CAACI,MAAM;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAyCC,MAAqC,IAAQ;EAC1GL,MAAM,CAACM,MAAM,CAACD,MAAM,CAAC,CAACE,OAAO,CAAEC,KAAK,IAAK;IACvC;IACA,MAAMC,SAAS,GAAGT,MAAM,CAACC,IAAI,CAACO,KAAK,CAAC;IACpC,MAAME,QAAQ,GAAGD,SAAS,CAACN,MAAM;IAEjC,MAAMF,IAAI,GAAGS,QAAQ,GAAGR,eAAe,GAAGO,SAAS,GAAGV,gBAAgB;IACtEE,IAAI,CAACM,OAAO,CAAEI,GAAG,IAAK;MACpB;MACA,IAAIb,YAAY,CAACa,GAAG,CAAC,IAAI,OAAOH,KAAK,CAACG,GAAG,CAAC,KAAK,WAAW,EAAEH,KAAK,CAACG,GAAG,CAAC,GAAGb,YAAY,CAACa,GAAG,CAAC,CAACH,KAAK,CAACG,GAAG,CAAC,CAAC;IACxG,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,OAAOC,uBAAU,CAACC,MAAM,CAAIR,MAAM,CAAC;AACrC,CAAC;AAAC,IAAAS,QAAA,GAEaV,gBAAgB;AAAAW,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _Text = _interopRequireDefault(require("../../components/Text"));
|
|
10
|
+
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
const DEFAULT_MAX = 3;
|
|
13
|
+
const DEFAULT_BORDER_WIDTH = 2;
|
|
14
|
+
const DEFAULT_AVATAR_GAP = -4;
|
|
15
|
+
const DEFAULT_AVATAR_SIZE = 26;
|
|
16
|
+
const DEFAULT_REMAINS_MAX = 99;
|
|
17
|
+
const AvatarStack = _ref => {
|
|
18
|
+
let {
|
|
19
|
+
children,
|
|
20
|
+
containerStyle,
|
|
21
|
+
styles,
|
|
22
|
+
maxAvatar = DEFAULT_MAX,
|
|
23
|
+
size = DEFAULT_AVATAR_SIZE,
|
|
24
|
+
avatarGap = DEFAULT_AVATAR_GAP
|
|
25
|
+
} = _ref;
|
|
26
|
+
const {
|
|
27
|
+
colors,
|
|
28
|
+
palette,
|
|
29
|
+
select
|
|
30
|
+
} = (0, _useUIKitTheme.default)();
|
|
31
|
+
const defaultStyles = {
|
|
32
|
+
borderWidth: DEFAULT_BORDER_WIDTH,
|
|
33
|
+
borderColor: colors.background,
|
|
34
|
+
remainsTextColor: colors.onBackground02,
|
|
35
|
+
remainsBackgroundColor: select({
|
|
36
|
+
light: palette.background100,
|
|
37
|
+
dark: palette.background600
|
|
38
|
+
})
|
|
39
|
+
};
|
|
40
|
+
const avatarStyles = {
|
|
41
|
+
...defaultStyles,
|
|
42
|
+
...styles
|
|
43
|
+
};
|
|
44
|
+
const childrenArray = _react.default.Children.toArray(children).filter(it => /*#__PURE__*/_react.default.isValidElement(it));
|
|
45
|
+
const remains = childrenArray.length - maxAvatar;
|
|
46
|
+
const shouldRenderRemains = remains > 0;
|
|
47
|
+
const actualSize = size + avatarStyles.borderWidth * 2;
|
|
48
|
+
const actualGap = avatarGap - avatarStyles.borderWidth;
|
|
49
|
+
const renderAvatars = () => {
|
|
50
|
+
return childrenArray.slice(0, maxAvatar).map((child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
|
|
51
|
+
size: actualSize,
|
|
52
|
+
containerStyle: {
|
|
53
|
+
left: actualGap * index,
|
|
54
|
+
borderWidth: avatarStyles.borderWidth,
|
|
55
|
+
borderColor: avatarStyles.borderColor
|
|
56
|
+
}
|
|
57
|
+
}));
|
|
58
|
+
};
|
|
59
|
+
const renderRemainsCount = () => {
|
|
60
|
+
if (!shouldRenderRemains) return null;
|
|
61
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
62
|
+
style: [avatarStyles, {
|
|
63
|
+
left: actualGap * maxAvatar,
|
|
64
|
+
width: actualSize,
|
|
65
|
+
height: actualSize,
|
|
66
|
+
borderRadius: actualSize / 2,
|
|
67
|
+
alignItems: 'center',
|
|
68
|
+
justifyContent: 'center',
|
|
69
|
+
backgroundColor: avatarStyles.remainsBackgroundColor
|
|
70
|
+
}]
|
|
71
|
+
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
72
|
+
style: {
|
|
73
|
+
color: avatarStyles.remainsTextColor,
|
|
74
|
+
fontSize: 8
|
|
75
|
+
},
|
|
76
|
+
caption4: true
|
|
77
|
+
}, `+${Math.min(remains, DEFAULT_REMAINS_MAX)}`));
|
|
78
|
+
};
|
|
79
|
+
const calculateWidth = () => {
|
|
80
|
+
const widthEach = actualSize + actualGap;
|
|
81
|
+
const avatarCountOffset = shouldRenderRemains ? 1 : 0;
|
|
82
|
+
const avatarCount = shouldRenderRemains ? maxAvatar : childrenArray.length;
|
|
83
|
+
const count = avatarCount + avatarCountOffset;
|
|
84
|
+
return widthEach * count + avatarStyles.borderWidth;
|
|
85
|
+
};
|
|
86
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
87
|
+
style: [containerStyle, {
|
|
88
|
+
left: -avatarStyles.borderWidth,
|
|
89
|
+
flexDirection: 'row',
|
|
90
|
+
width: calculateWidth()
|
|
91
|
+
}]
|
|
92
|
+
}, renderAvatars(), renderRemainsCount());
|
|
93
|
+
};
|
|
94
|
+
var _default = AvatarStack;
|
|
95
|
+
exports.default = _default;
|
|
96
|
+
//# sourceMappingURL=AvatarStack.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Text","_useUIKitTheme","obj","__esModule","default","DEFAULT_MAX","DEFAULT_BORDER_WIDTH","DEFAULT_AVATAR_GAP","DEFAULT_AVATAR_SIZE","DEFAULT_REMAINS_MAX","AvatarStack","_ref","children","containerStyle","styles","maxAvatar","size","avatarGap","colors","palette","select","useUIKitTheme","defaultStyles","borderWidth","borderColor","background","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background600","avatarStyles","childrenArray","React","Children","toArray","filter","it","isValidElement","remains","length","shouldRenderRemains","actualSize","actualGap","renderAvatars","slice","map","child","index","cloneElement","left","renderRemainsCount","createElement","View","style","width","height","borderRadius","alignItems","justifyContent","backgroundColor","color","fontSize","caption4","Math","min","calculateWidth","widthEach","avatarCountOffset","avatarCount","count","flexDirection","_default","exports"],"sources":["AvatarStack.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport Text from '../../components/Text';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nconst DEFAULT_MAX = 3;\nconst DEFAULT_BORDER_WIDTH = 2;\nconst DEFAULT_AVATAR_GAP = -4;\nconst DEFAULT_AVATAR_SIZE = 26;\nconst DEFAULT_REMAINS_MAX = 99;\n\ntype Props = React.PropsWithChildren<{\n size?: number;\n containerStyle?: StyleProp<ViewStyle>;\n maxAvatar?: number;\n avatarGap?: number;\n styles?: {\n borderWidth?: number;\n borderColor?: string;\n remainsTextColor?: string;\n remainsBackgroundColor?: string;\n };\n}>;\n\nconst AvatarStack = ({\n children,\n containerStyle,\n styles,\n maxAvatar = DEFAULT_MAX,\n size = DEFAULT_AVATAR_SIZE,\n avatarGap = DEFAULT_AVATAR_GAP,\n}: Props) => {\n const { colors, palette, select } = useUIKitTheme();\n const defaultStyles = {\n borderWidth: DEFAULT_BORDER_WIDTH,\n borderColor: colors.background,\n remainsTextColor: colors.onBackground02,\n remainsBackgroundColor: select({ light: palette.background100, dark: palette.background600 }),\n };\n const avatarStyles = { ...defaultStyles, ...styles };\n\n const childrenArray = React.Children.toArray(children).filter((it) => React.isValidElement(it));\n const remains = childrenArray.length - maxAvatar;\n const shouldRenderRemains = remains > 0;\n\n const actualSize = size + avatarStyles.borderWidth * 2;\n const actualGap = avatarGap - avatarStyles.borderWidth;\n\n const renderAvatars = () => {\n return childrenArray.slice(0, maxAvatar).map((child, index) =>\n React.cloneElement(child as ReactElement, {\n size: actualSize,\n containerStyle: {\n left: actualGap * index,\n borderWidth: avatarStyles.borderWidth,\n borderColor: avatarStyles.borderColor,\n },\n }),\n );\n };\n\n const renderRemainsCount = () => {\n if (!shouldRenderRemains) return null;\n return (\n <View\n style={[\n avatarStyles,\n {\n left: actualGap * maxAvatar,\n width: actualSize,\n height: actualSize,\n borderRadius: actualSize / 2,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: avatarStyles.remainsBackgroundColor,\n },\n ]}\n >\n <Text style={{ color: avatarStyles.remainsTextColor, fontSize: 8 }} caption4>\n {`+${Math.min(remains, DEFAULT_REMAINS_MAX)}`}\n </Text>\n </View>\n );\n };\n\n const calculateWidth = () => {\n const widthEach = actualSize + actualGap;\n const avatarCountOffset = shouldRenderRemains ? 1 : 0;\n const avatarCount = shouldRenderRemains ? maxAvatar : childrenArray.length;\n const count = avatarCount + avatarCountOffset;\n return widthEach * count + avatarStyles.borderWidth;\n };\n\n return (\n <View style={[containerStyle, { left: -avatarStyles.borderWidth, flexDirection: 'row', width: calculateWidth() }]}>\n {renderAvatars()}\n {renderRemainsCount()}\n </View>\n );\n};\n\nexport default AvatarStack;\n"],"mappings":"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"}
|
|
@@ -13,6 +13,7 @@ var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyle
|
|
|
13
13
|
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
|
|
14
14
|
var _AvatarGroup = _interopRequireDefault(require("./AvatarGroup"));
|
|
15
15
|
var _AvatarIcon = _interopRequireDefault(require("./AvatarIcon"));
|
|
16
|
+
var _AvatarStack = _interopRequireDefault(require("./AvatarStack"));
|
|
16
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
18
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
19
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -80,7 +81,8 @@ const styles = (0, _createStyleSheet.default)({
|
|
|
80
81
|
});
|
|
81
82
|
var _default = Object.assign(Avatar, {
|
|
82
83
|
Group: _AvatarGroup.default,
|
|
83
|
-
Icon: _AvatarIcon.default
|
|
84
|
+
Icon: _AvatarIcon.default,
|
|
85
|
+
Stack: _AvatarStack.default
|
|
84
86
|
});
|
|
85
87
|
exports.default = _default;
|
|
86
88
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_uikitUtils","_Icon","_interopRequireDefault","_Image","_createStyleSheet","_useUIKitTheme","_AvatarGroup","_AvatarIcon","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Avatar","_ref","uri","square","muted","size","containerStyle","colors","palette","useUIKitTheme","loadFailure","setLoadFailure","useState","createElement","View","style","styles","container","width","height","borderRadius","backgroundColor","background300","conditionChaining","Boolean","onError","source","resizeMode","StyleSheet","absoluteFill","icon","color","onBackgroundReverse01","MutedOverlay","_ref2","primary300","opacity","onBackgroundDark01","createStyleSheet","alignItems","justifyContent","overflow","_default","assign","Group","AvatarGroup","Icon","AvatarIcon","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Icon from '../../components/Icon';\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport AvatarGroup from './AvatarGroup';\nimport AvatarIcon from './AvatarIcon';\n\ntype Props = {\n uri?: string;\n size?: number;\n square?: boolean;\n muted?: boolean;\n containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst Avatar = ({ uri, square, muted = false, size = 56, containerStyle }: Props) => {\n const { colors, palette } = useUIKitTheme();\n const [loadFailure, setLoadFailure] = useState(false);\n\n return (\n <View\n style={[\n styles.container,\n { width: size, height: size, borderRadius: square ? 0 : size / 2, backgroundColor: palette.background300 },\n containerStyle,\n ]}\n >\n {conditionChaining(\n [Boolean(uri) && !loadFailure],\n [\n <Image\n onError={() => setLoadFailure(true)}\n source={{ uri }}\n resizeMode={'cover'}\n style={StyleSheet.absoluteFill}\n />,\n <Icon icon={'user'} size={size / 2} color={colors.onBackgroundReverse01} />,\n ],\n )}\n {muted && <MutedOverlay size={size} />}\n </View>\n );\n};\n\nconst MutedOverlay = ({ size }: { size: number }) => {\n const { palette } = useUIKitTheme();\n return (\n <View style={[styles.container, StyleSheet.absoluteFill]}>\n <View style={[StyleSheet.absoluteFill, { backgroundColor: palette.primary300, opacity: 0.5 }]} />\n <Icon color={palette.onBackgroundDark01} icon={'mute'} size={size * 0.72} />\n </View>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n },\n});\n\nexport default Object.assign(Avatar, {\n Group: AvatarGroup,\n Icon: AvatarIcon,\n});\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AAEA,IAAAG,KAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,iBAAA,GAAAF,sBAAA,CAAAJ,OAAA;AACA,IAAAO,cAAA,GAAAH,sBAAA,CAAAJ,OAAA;AACA,IAAAQ,YAAA,GAAAJ,sBAAA,CAAAJ,OAAA;AACA,IAAAS,WAAA,GAAAL,sBAAA,CAAAJ,OAAA;
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_uikitUtils","_Icon","_interopRequireDefault","_Image","_createStyleSheet","_useUIKitTheme","_AvatarGroup","_AvatarIcon","_AvatarStack","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Avatar","_ref","uri","square","muted","size","containerStyle","colors","palette","useUIKitTheme","loadFailure","setLoadFailure","useState","createElement","View","style","styles","container","width","height","borderRadius","backgroundColor","background300","conditionChaining","Boolean","onError","source","resizeMode","StyleSheet","absoluteFill","icon","color","onBackgroundReverse01","MutedOverlay","_ref2","primary300","opacity","onBackgroundDark01","createStyleSheet","alignItems","justifyContent","overflow","_default","assign","Group","AvatarGroup","Icon","AvatarIcon","Stack","AvatarStack","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Icon from '../../components/Icon';\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport AvatarGroup from './AvatarGroup';\nimport AvatarIcon from './AvatarIcon';\nimport AvatarStack from './AvatarStack';\n\ntype Props = {\n uri?: string;\n size?: number;\n square?: boolean;\n muted?: boolean;\n containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst Avatar = ({ uri, square, muted = false, size = 56, containerStyle }: Props) => {\n const { colors, palette } = useUIKitTheme();\n const [loadFailure, setLoadFailure] = useState(false);\n\n return (\n <View\n style={[\n styles.container,\n { width: size, height: size, borderRadius: square ? 0 : size / 2, backgroundColor: palette.background300 },\n containerStyle,\n ]}\n >\n {conditionChaining(\n [Boolean(uri) && !loadFailure],\n [\n <Image\n onError={() => setLoadFailure(true)}\n source={{ uri }}\n resizeMode={'cover'}\n style={StyleSheet.absoluteFill}\n />,\n <Icon icon={'user'} size={size / 2} color={colors.onBackgroundReverse01} />,\n ],\n )}\n {muted && <MutedOverlay size={size} />}\n </View>\n );\n};\n\nconst MutedOverlay = ({ size }: { size: number }) => {\n const { palette } = useUIKitTheme();\n return (\n <View style={[styles.container, StyleSheet.absoluteFill]}>\n <View style={[StyleSheet.absoluteFill, { backgroundColor: palette.primary300, opacity: 0.5 }]} />\n <Icon color={palette.onBackgroundDark01} icon={'mute'} size={size * 0.72} />\n </View>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n },\n});\n\nexport default Object.assign(Avatar, {\n Group: AvatarGroup,\n Icon: AvatarIcon,\n Stack: AvatarStack,\n});\n"],"mappings":"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"}
|
|
@@ -102,8 +102,10 @@ const Prompt = _ref => {
|
|
|
102
102
|
value: text,
|
|
103
103
|
onChangeText: setText,
|
|
104
104
|
style: {
|
|
105
|
-
|
|
106
|
-
|
|
105
|
+
paddingLeft: 0,
|
|
106
|
+
paddingRight: 0,
|
|
107
|
+
paddingTop: 10,
|
|
108
|
+
paddingBottom: 10
|
|
107
109
|
}
|
|
108
110
|
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
109
111
|
style: styles.buttonContainer
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_uikitUtils","_Modal","_interopRequireDefault","_Text","_TextInput","_createStyleSheet","_useHeaderStyle","_useUIKitTheme","_Button","_DialogBox","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Prompt","_ref","onDismiss","visible","onHide","autoFocus","title","defaultValue","placeholder","onSubmit","NOOP","onCancel","submitLabel","cancelLabel","statusBarTranslucent","useHeaderStyle","colors","useUIKitTheme","inputRef","useRef","width","height","useWindowDimensions","buttons","text","onPress","setText","useState","useEffect","setTimeout","_inputRef$current","_inputRef$current2","Platform","OS","current","blur","focus","createElement","enableKeyboardAvoid","disableBackgroundClose","onClose","backgroundStyle","alignItems","justifyContent","style","styles","container","Boolean","View","titleContainer","h1","color","ui","dialog","none","numberOfLines","flex","inputContainer","ref","variant","value","onChangeText","paddingHorizontal","paddingVertical","buttonContainer","map","_ref2","index","button","contentColor","highlight","Keyboard","dismiss","createStyleSheet","paddingTop","marginBottom","flexDirection","padding","marginLeft","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Keyboard, Platform, TextInput as RNTextInput, View, useWindowDimensions } from 'react-native';\n\nimport { NOOP } from '@sendbird/uikit-utils';\n\nimport Modal from '../../components/Modal';\nimport Text from '../../components/Text';\nimport TextInput from '../../components/TextInput';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport DialogBox from '../Dialog/DialogBox';\n\nexport type PromptItem = {\n title: string;\n placeholder?: string;\n defaultValue?: string;\n onSubmit?: (text: string) => void;\n submitLabel?: string;\n onCancel?: () => void;\n cancelLabel?: string;\n};\n\ntype Props = {\n visible: boolean;\n onHide: () => void;\n onDismiss?: () => void;\n autoFocus?: boolean;\n} & PromptItem;\nconst Prompt = ({\n onDismiss,\n visible,\n onHide,\n autoFocus = true,\n title,\n defaultValue = '',\n placeholder = 'Enter',\n onSubmit = NOOP,\n onCancel = NOOP,\n submitLabel = 'Submit',\n cancelLabel = 'Cancel',\n}: Props) => {\n const { statusBarTranslucent } = useHeaderStyle();\n const { colors } = useUIKitTheme();\n const inputRef = useRef<RNTextInput>(null);\n const { width, height } = useWindowDimensions();\n\n const buttons = [\n { text: cancelLabel, onPress: onCancel },\n { text: submitLabel, onPress: () => onSubmit(text) },\n ];\n\n const [text, setText] = useState(defaultValue);\n\n // FIXME: autoFocus trick with modal\n // Android\n // - InputProps.autoFocus is not trigger keyboard appearing.\n // - InputRef.focus() is trigger keyboard appearing, but position of keyboard selection is always the start of text.\n // iOS\n // - InputProps.autoFocus is trigger weird UI behavior on landscape mode.\n useEffect(() => {\n if (autoFocus && visible) {\n setTimeout(() => {\n if (Platform.OS === 'android') inputRef.current?.blur();\n inputRef.current?.focus();\n }, 250);\n }\n }, [autoFocus, visible, `${width}-${height}`]);\n\n return (\n <Modal\n enableKeyboardAvoid\n disableBackgroundClose\n onClose={onHide}\n onDismiss={() => {\n setText('');\n onDismiss?.();\n }}\n statusBarTranslucent={statusBarTranslucent}\n visible={visible}\n backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}\n >\n <DialogBox style={styles.container}>\n {Boolean(title) && (\n <View style={styles.titleContainer}>\n <Text h1 color={colors.ui.dialog.default.none.text} numberOfLines={1} style={{ flex: 1 }}>\n {title}\n </Text>\n </View>\n )}\n\n <View style={styles.inputContainer}>\n <TextInput\n autoFocus={autoFocus && Platform.OS === 'android'}\n ref={inputRef}\n placeholder={placeholder}\n variant={'underline'}\n value={text}\n onChangeText={setText}\n style={{ paddingHorizontal: 0, paddingVertical: 10 }}\n />\n </View>\n\n <View style={styles.buttonContainer}>\n {buttons.map(({ text, onPress }, index) => {\n return (\n <Button\n key={text + index}\n variant={'text'}\n style={styles.button}\n contentColor={colors.ui.dialog.default.none.highlight}\n onPress={() => {\n Keyboard.dismiss();\n try {\n onPress?.();\n } finally {\n onHide();\n }\n }}\n >\n {text}\n </Button>\n );\n })}\n </View>\n </DialogBox>\n </Modal>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n paddingTop: 8,\n },\n titleContainer: {\n marginBottom: 12,\n paddingVertical: 12,\n paddingHorizontal: 24,\n flexDirection: 'row',\n alignItems: 'center',\n },\n inputContainer: {\n paddingHorizontal: 24,\n marginBottom: 12,\n },\n buttonContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'flex-end',\n padding: 12,\n },\n button: {\n marginLeft: 8,\n },\n});\n\nexport default Prompt;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_uikitUtils","_Modal","_interopRequireDefault","_Text","_TextInput","_createStyleSheet","_useHeaderStyle","_useUIKitTheme","_Button","_DialogBox","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Prompt","_ref","onDismiss","visible","onHide","autoFocus","title","defaultValue","placeholder","onSubmit","NOOP","onCancel","submitLabel","cancelLabel","statusBarTranslucent","useHeaderStyle","colors","useUIKitTheme","inputRef","useRef","width","height","useWindowDimensions","buttons","text","onPress","setText","useState","useEffect","setTimeout","_inputRef$current","_inputRef$current2","Platform","OS","current","blur","focus","createElement","enableKeyboardAvoid","disableBackgroundClose","onClose","backgroundStyle","alignItems","justifyContent","style","styles","container","Boolean","View","titleContainer","h1","color","ui","dialog","none","numberOfLines","flex","inputContainer","ref","variant","value","onChangeText","paddingLeft","paddingRight","paddingTop","paddingBottom","buttonContainer","map","_ref2","index","button","contentColor","highlight","Keyboard","dismiss","createStyleSheet","marginBottom","paddingVertical","paddingHorizontal","flexDirection","padding","marginLeft","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Keyboard, Platform, TextInput as RNTextInput, View, useWindowDimensions } from 'react-native';\n\nimport { NOOP } from '@sendbird/uikit-utils';\n\nimport Modal from '../../components/Modal';\nimport Text from '../../components/Text';\nimport TextInput from '../../components/TextInput';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport DialogBox from '../Dialog/DialogBox';\n\nexport type PromptItem = {\n title: string;\n placeholder?: string;\n defaultValue?: string;\n onSubmit?: (text: string) => void;\n submitLabel?: string;\n onCancel?: () => void;\n cancelLabel?: string;\n};\n\ntype Props = {\n visible: boolean;\n onHide: () => void;\n onDismiss?: () => void;\n autoFocus?: boolean;\n} & PromptItem;\nconst Prompt = ({\n onDismiss,\n visible,\n onHide,\n autoFocus = true,\n title,\n defaultValue = '',\n placeholder = 'Enter',\n onSubmit = NOOP,\n onCancel = NOOP,\n submitLabel = 'Submit',\n cancelLabel = 'Cancel',\n}: Props) => {\n const { statusBarTranslucent } = useHeaderStyle();\n const { colors } = useUIKitTheme();\n const inputRef = useRef<RNTextInput>(null);\n const { width, height } = useWindowDimensions();\n\n const buttons = [\n { text: cancelLabel, onPress: onCancel },\n { text: submitLabel, onPress: () => onSubmit(text) },\n ];\n\n const [text, setText] = useState(defaultValue);\n\n // FIXME: autoFocus trick with modal\n // Android\n // - InputProps.autoFocus is not trigger keyboard appearing.\n // - InputRef.focus() is trigger keyboard appearing, but position of keyboard selection is always the start of text.\n // iOS\n // - InputProps.autoFocus is trigger weird UI behavior on landscape mode.\n useEffect(() => {\n if (autoFocus && visible) {\n setTimeout(() => {\n if (Platform.OS === 'android') inputRef.current?.blur();\n inputRef.current?.focus();\n }, 250);\n }\n }, [autoFocus, visible, `${width}-${height}`]);\n\n return (\n <Modal\n enableKeyboardAvoid\n disableBackgroundClose\n onClose={onHide}\n onDismiss={() => {\n setText('');\n onDismiss?.();\n }}\n statusBarTranslucent={statusBarTranslucent}\n visible={visible}\n backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}\n >\n <DialogBox style={styles.container}>\n {Boolean(title) && (\n <View style={styles.titleContainer}>\n <Text h1 color={colors.ui.dialog.default.none.text} numberOfLines={1} style={{ flex: 1 }}>\n {title}\n </Text>\n </View>\n )}\n\n <View style={styles.inputContainer}>\n <TextInput\n autoFocus={autoFocus && Platform.OS === 'android'}\n ref={inputRef}\n placeholder={placeholder}\n variant={'underline'}\n value={text}\n onChangeText={setText}\n style={{ paddingLeft: 0, paddingRight: 0, paddingTop: 10, paddingBottom: 10 }}\n />\n </View>\n\n <View style={styles.buttonContainer}>\n {buttons.map(({ text, onPress }, index) => {\n return (\n <Button\n key={text + index}\n variant={'text'}\n style={styles.button}\n contentColor={colors.ui.dialog.default.none.highlight}\n onPress={() => {\n Keyboard.dismiss();\n try {\n onPress?.();\n } finally {\n onHide();\n }\n }}\n >\n {text}\n </Button>\n );\n })}\n </View>\n </DialogBox>\n </Modal>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n paddingTop: 8,\n },\n titleContainer: {\n marginBottom: 12,\n paddingVertical: 12,\n paddingHorizontal: 24,\n flexDirection: 'row',\n alignItems: 'center',\n },\n inputContainer: {\n paddingHorizontal: 24,\n marginBottom: 12,\n },\n buttonContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'flex-end',\n padding: 12,\n },\n button: {\n marginLeft: 8,\n },\n});\n\nexport default Prompt;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _Box = _interopRequireDefault(require("../../components/Box"));
|
|
10
|
+
var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
|
|
11
|
+
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
|
|
12
|
+
var _Avatar = _interopRequireDefault(require("../Avatar"));
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
16
|
+
const TypingIndicatorBubble = _ref => {
|
|
17
|
+
let {
|
|
18
|
+
typingUsers,
|
|
19
|
+
containerStyle,
|
|
20
|
+
maxAvatar
|
|
21
|
+
} = _ref;
|
|
22
|
+
const {
|
|
23
|
+
select,
|
|
24
|
+
palette,
|
|
25
|
+
colors
|
|
26
|
+
} = (0, _useUIKitTheme.default)();
|
|
27
|
+
if (typingUsers.length === 0) return null;
|
|
28
|
+
return /*#__PURE__*/_react.default.createElement(_Box.default, {
|
|
29
|
+
flexDirection: 'row',
|
|
30
|
+
justifyContent: 'flex-start',
|
|
31
|
+
alignItems: 'center',
|
|
32
|
+
style: containerStyle
|
|
33
|
+
}, /*#__PURE__*/_react.default.createElement(_Avatar.default.Stack, {
|
|
34
|
+
size: 26,
|
|
35
|
+
maxAvatar: maxAvatar,
|
|
36
|
+
styles: {
|
|
37
|
+
remainsTextColor: colors.onBackground02,
|
|
38
|
+
remainsBackgroundColor: select({
|
|
39
|
+
light: palette.background100,
|
|
40
|
+
dark: palette.background400
|
|
41
|
+
})
|
|
42
|
+
},
|
|
43
|
+
containerStyle: {
|
|
44
|
+
marginRight: 12
|
|
45
|
+
}
|
|
46
|
+
}, typingUsers.map((user, index) => /*#__PURE__*/_react.default.createElement(_Avatar.default, {
|
|
47
|
+
key: index,
|
|
48
|
+
uri: user.profileUrl
|
|
49
|
+
}))), /*#__PURE__*/_react.default.createElement(TypingDots, {
|
|
50
|
+
dotColor: select({
|
|
51
|
+
light: palette.background100,
|
|
52
|
+
dark: palette.background400
|
|
53
|
+
}),
|
|
54
|
+
backgroundColor: colors.onBackground02
|
|
55
|
+
}));
|
|
56
|
+
};
|
|
57
|
+
const TypingDots = _ref2 => {
|
|
58
|
+
let {
|
|
59
|
+
dotColor,
|
|
60
|
+
backgroundColor
|
|
61
|
+
} = _ref2;
|
|
62
|
+
const animation = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
63
|
+
const dots = matrix.map(_ref3 => {
|
|
64
|
+
let [timeline, scale, opacity] = _ref3;
|
|
65
|
+
return [animation.interpolate({
|
|
66
|
+
inputRange: timeline,
|
|
67
|
+
outputRange: scale,
|
|
68
|
+
extrapolate: 'clamp'
|
|
69
|
+
}), animation.interpolate({
|
|
70
|
+
inputRange: timeline,
|
|
71
|
+
outputRange: opacity,
|
|
72
|
+
extrapolate: 'clamp'
|
|
73
|
+
})];
|
|
74
|
+
});
|
|
75
|
+
(0, _react.useEffect)(() => {
|
|
76
|
+
const animated = _reactNative.Animated.loop(_reactNative.Animated.timing(animation, {
|
|
77
|
+
toValue: 1.4,
|
|
78
|
+
duration: 1400,
|
|
79
|
+
easing: _reactNative.Easing.linear,
|
|
80
|
+
useNativeDriver: true
|
|
81
|
+
}));
|
|
82
|
+
animated.start();
|
|
83
|
+
return () => animated.reset();
|
|
84
|
+
}, []);
|
|
85
|
+
return /*#__PURE__*/_react.default.createElement(_Box.default, {
|
|
86
|
+
flexDirection: 'row',
|
|
87
|
+
alignItems: 'center',
|
|
88
|
+
justifyContent: 'center',
|
|
89
|
+
borderRadius: 16,
|
|
90
|
+
paddingHorizontal: 12,
|
|
91
|
+
height: 34,
|
|
92
|
+
backgroundColor: dotColor
|
|
93
|
+
}, dots.map((_ref4, index) => {
|
|
94
|
+
let [scale, opacity] = _ref4;
|
|
95
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
96
|
+
key: index,
|
|
97
|
+
style: [styles.dot, {
|
|
98
|
+
marginRight: index === dots.length - 1 ? 0 : 6,
|
|
99
|
+
opacity: opacity,
|
|
100
|
+
transform: [{
|
|
101
|
+
scale: scale
|
|
102
|
+
}],
|
|
103
|
+
backgroundColor: backgroundColor
|
|
104
|
+
}]
|
|
105
|
+
});
|
|
106
|
+
}));
|
|
107
|
+
};
|
|
108
|
+
const matrix = [[[0.4, 0.7, 1.0], [1.0, 1.2, 1.0], [0.12, 0.38, 0.12]], [[0.6, 0.9, 1.2], [1.0, 1.2, 1.0], [0.12, 0.38, 0.12]], [[0.8, 1.1, 1.4], [1.0, 1.2, 1.0], [0.12, 0.38, 0.12]]];
|
|
109
|
+
const styles = (0, _createStyleSheet.default)({
|
|
110
|
+
dot: {
|
|
111
|
+
width: 8,
|
|
112
|
+
height: 8,
|
|
113
|
+
borderRadius: 4
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
var _default = TypingIndicatorBubble;
|
|
117
|
+
exports.default = _default;
|
|
118
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_Box","_interopRequireDefault","_createStyleSheet","_useUIKitTheme","_Avatar","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","TypingIndicatorBubble","_ref","typingUsers","containerStyle","maxAvatar","select","palette","colors","useUIKitTheme","length","createElement","flexDirection","justifyContent","alignItems","style","Stack","size","styles","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background400","marginRight","map","user","index","uri","profileUrl","TypingDots","dotColor","backgroundColor","_ref2","animation","useRef","Animated","Value","current","dots","matrix","_ref3","timeline","scale","opacity","interpolate","inputRange","outputRange","extrapolate","useEffect","animated","loop","timing","toValue","duration","easing","Easing","linear","useNativeDriver","start","reset","borderRadius","paddingHorizontal","height","_ref4","View","dot","transform","createStyleSheet","width","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Animated, Easing, StyleProp, ViewStyle } from 'react-native';\n\nimport type { SendbirdUser } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\n\ntype Props = {\n typingUsers: SendbirdUser[];\n containerStyle?: StyleProp<ViewStyle>;\n maxAvatar?: number;\n};\n\nconst TypingIndicatorBubble = ({ typingUsers, containerStyle, maxAvatar }: Props) => {\n const { select, palette, colors } = useUIKitTheme();\n\n if (typingUsers.length === 0) return null;\n\n return (\n <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'center'} style={containerStyle}>\n <Avatar.Stack\n size={26}\n maxAvatar={maxAvatar}\n styles={{\n remainsTextColor: colors.onBackground02,\n remainsBackgroundColor: select({ light: palette.background100, dark: palette.background400 }),\n }}\n containerStyle={{ marginRight: 12 }}\n >\n {typingUsers.map((user, index) => (\n <Avatar key={index} uri={user.profileUrl} />\n ))}\n </Avatar.Stack>\n <TypingDots\n dotColor={select({ light: palette.background100, dark: palette.background400 })}\n backgroundColor={colors.onBackground02}\n />\n </Box>\n );\n};\n\ntype TypingDotsProps = {\n dotColor: string;\n backgroundColor: string;\n};\nconst TypingDots = ({ dotColor, backgroundColor }: TypingDotsProps) => {\n const animation = useRef(new Animated.Value(0)).current;\n const dots = matrix.map(([timeline, scale, opacity]) => [\n animation.interpolate({ inputRange: timeline, outputRange: scale, extrapolate: 'clamp' }),\n animation.interpolate({ inputRange: timeline, outputRange: opacity, extrapolate: 'clamp' }),\n ]);\n\n useEffect(() => {\n const animated = Animated.loop(\n Animated.timing(animation, { toValue: 1.4, duration: 1400, easing: Easing.linear, useNativeDriver: true }),\n );\n animated.start();\n return () => animated.reset();\n }, []);\n\n return (\n <Box\n flexDirection={'row'}\n alignItems={'center'}\n justifyContent={'center'}\n borderRadius={16}\n paddingHorizontal={12}\n height={34}\n backgroundColor={dotColor}\n >\n {dots.map(([scale, opacity], index) => {\n return (\n <Animated.View\n key={index}\n style={[\n styles.dot,\n {\n marginRight: index === dots.length - 1 ? 0 : 6,\n opacity: opacity,\n transform: [{ scale: scale }],\n backgroundColor: backgroundColor,\n },\n ]}\n />\n );\n })}\n </Box>\n );\n};\n\nconst matrix = [\n [\n [0.4, 0.7, 1.0],\n [1.0, 1.2, 1.0],\n [0.12, 0.38, 0.12],\n ],\n [\n [0.6, 0.9, 1.2],\n [1.0, 1.2, 1.0],\n [0.12, 0.38, 0.12],\n ],\n [\n [0.8, 1.1, 1.4],\n [1.0, 1.2, 1.0],\n [0.12, 0.38, 0.12],\n ],\n];\n\nconst styles = createStyleSheet({\n dot: {\n width: 8,\n height: 8,\n borderRadius: 4,\n },\n});\n\nexport default TypingIndicatorBubble;\n"],"mappings":"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"}
|
|
@@ -21,12 +21,16 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
|
|
|
21
21
|
borderBottomWidth: 2,
|
|
22
22
|
borderBottomColor: inputStyle.highlight
|
|
23
23
|
};
|
|
24
|
+
const fontStyle = {
|
|
25
|
+
...typography.body3,
|
|
26
|
+
lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined
|
|
27
|
+
};
|
|
24
28
|
return /*#__PURE__*/React.createElement(RNTextInput, _extends({
|
|
25
29
|
ref: ref,
|
|
26
30
|
editable: editable,
|
|
27
31
|
selectionColor: inputStyle.highlight,
|
|
28
32
|
placeholderTextColor: inputStyle.placeholder,
|
|
29
|
-
style: [
|
|
33
|
+
style: [fontStyle, styles.input, {
|
|
30
34
|
color: inputStyle.text,
|
|
31
35
|
backgroundColor: inputStyle.background
|
|
32
36
|
}, underlineStyle, style]
|
|
@@ -34,8 +38,11 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
|
|
|
34
38
|
});
|
|
35
39
|
const styles = createStyleSheet({
|
|
36
40
|
input: {
|
|
37
|
-
|
|
38
|
-
|
|
41
|
+
includeFontPadding: false,
|
|
42
|
+
paddingTop: 8,
|
|
43
|
+
paddingBottom: 8,
|
|
44
|
+
paddingLeft: 16,
|
|
45
|
+
paddingRight: 16
|
|
39
46
|
}
|
|
40
47
|
});
|
|
41
48
|
export default TextInput;
|