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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useContext","useRef","useForceUpdate","ActionMenu","Alert","BottomSheet","Prompt","AlertContext","createContext","ActionMenuContext","PromptContext","BottomSheetContext","DISMISS_TIMEOUT","DialogProvider","defaultLabels","children","waitDismissTimeout","waitDismissPromise","waitDismiss","resolver","current","setTimeout","completeDismiss","clearTimeout","undefined","render","dialogQueue","workingDialogJob","visibleState","isProcessing","Boolean","updateToShow","updateToHide","Promise","resolve","consumeQueue","job","shift","createJob","type","props","jobItem","push","alert","openMenu","openPrompt","openSheet","title","menuItems","message","buttons","text","ok","onSubmit","defaultValue","submitLabel","prompt","cancelLabel","cancel","placeholder","sheetItems","useActionMenu","context","Error","useAlert","usePrompt","useBottomSheet"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react';\n\nimport { useForceUpdate } from '@sendbird/uikit-utils';\n\nimport type { ActionMenuItem } from '../ActionMenu';\nimport ActionMenu from '../ActionMenu';\nimport type { AlertItem } from '../Alert';\nimport Alert from '../Alert';\nimport type { BottomSheetItem } from '../BottomSheet';\nimport BottomSheet from '../BottomSheet';\nimport type { PromptItem } from '../Prompt';\nimport Prompt from '../Prompt';\n\ntype DialogJob =\n  | {\n      type: 'ActionMenu';\n      props: ActionMenuItem;\n    }\n  | {\n      type: 'Alert';\n      props: AlertItem;\n    }\n  | {\n      type: 'Prompt';\n      props: PromptItem;\n    }\n  | {\n      type: 'BottomSheet';\n      props: BottomSheetItem;\n    };\n\ntype DialogPropsBy<T extends DialogJob['type'], U extends DialogJob = DialogJob> = U extends { type: T; props: infer P }\n  ? P\n  : never;\n\ntype DialogContextType = {\n  openMenu: (props: DialogPropsBy<'ActionMenu'>) => void;\n  alert: (props: DialogPropsBy<'Alert'>) => void;\n  openPrompt: (props: DialogPropsBy<'Prompt'>) => void;\n  openSheet: (props: DialogPropsBy<'BottomSheet'>) => void;\n};\n\nconst AlertContext = React.createContext<Pick<DialogContextType, 'alert'> | null>(null);\nconst ActionMenuContext = React.createContext<Pick<DialogContextType, 'openMenu'> | null>(null);\nconst PromptContext = React.createContext<Pick<DialogContextType, 'openPrompt'> | null>(null);\nconst BottomSheetContext = React.createContext<Pick<DialogContextType, 'openSheet'> | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  defaultLabels?: {\n    alert?: { ok?: string };\n    prompt?: { placeholder?: string; ok?: string; cancel?: string };\n  };\n}>;\nconst DISMISS_TIMEOUT = 3000;\nexport const DialogProvider = ({ defaultLabels, children }: Props) => {\n  const waitDismissTimeout = useRef<NodeJS.Timeout>();\n  const waitDismissPromise = useRef<() => void>();\n  const waitDismiss = useCallback((resolver: () => void) => {\n    waitDismissPromise.current = resolver;\n    waitDismissTimeout.current = setTimeout(completeDismiss, DISMISS_TIMEOUT);\n  }, []);\n  const completeDismiss = useCallback(() => {\n    if (waitDismissTimeout.current) clearTimeout(waitDismissTimeout.current);\n    if (waitDismissPromise.current) waitDismissPromise.current();\n    waitDismissTimeout.current = undefined;\n    waitDismissPromise.current = undefined;\n  }, []);\n\n  const render = useForceUpdate();\n  const dialogQueue = useRef<DialogJob[]>([]);\n  const workingDialogJob = useRef<DialogJob>();\n  const visibleState = useRef(false);\n\n  const isProcessing = () => Boolean(workingDialogJob.current);\n  const updateToShow = useCallback(() => {\n    visibleState.current = true;\n    render();\n  }, []);\n  const updateToHide = useCallback((): Promise<void> => {\n    return new Promise((resolve) => {\n      visibleState.current = false;\n      render();\n      waitDismiss(resolve);\n    });\n  }, []);\n  const consumeQueue = useCallback(() => {\n    completeDismiss();\n    const job = dialogQueue.current.shift();\n    if (job) {\n      workingDialogJob.current = job;\n      updateToShow();\n    } else {\n      workingDialogJob.current = undefined;\n    }\n  }, []);\n\n  const createJob =\n    <T extends DialogJob['type']>(type: T) =>\n    (props: DialogPropsBy<T>) => {\n      const jobItem = { type, props } as DialogJob;\n      if (isProcessing()) dialogQueue.current.push(jobItem);\n      else {\n        workingDialogJob.current = jobItem;\n        updateToShow();\n      }\n    };\n\n  const alert = useCallback(createJob('Alert'), []);\n  const openMenu = useCallback(createJob('ActionMenu'), []);\n  const openPrompt = useCallback(createJob('Prompt'), []);\n  const openSheet = useCallback(createJob('BottomSheet'), []);\n\n  return (\n    <AlertContext.Provider value={{ alert }}>\n      <ActionMenuContext.Provider value={{ openMenu }}>\n        <PromptContext.Provider value={{ openPrompt }}>\n          <BottomSheetContext.Provider value={{ openSheet }}>\n            {children}\n            {workingDialogJob.current?.type === 'ActionMenu' && (\n              <ActionMenu\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                menuItems={workingDialogJob.current.props.menuItems}\n              />\n            )}\n            {workingDialogJob.current?.type === 'Alert' && (\n              <Alert\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                message={workingDialogJob.current.props.message}\n                buttons={workingDialogJob.current.props.buttons ?? [{ text: defaultLabels?.alert?.ok || 'OK' }]}\n              />\n            )}\n            {workingDialogJob.current?.type === 'Prompt' && (\n              <Prompt\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                onSubmit={workingDialogJob.current.props.onSubmit}\n                defaultValue={workingDialogJob.current.props.defaultValue}\n                submitLabel={workingDialogJob.current.props.submitLabel ?? defaultLabels?.prompt?.ok}\n                cancelLabel={workingDialogJob.current.props.cancelLabel ?? defaultLabels?.prompt?.cancel}\n                placeholder={workingDialogJob.current.props.placeholder ?? defaultLabels?.prompt?.placeholder}\n              />\n            )}\n            {workingDialogJob.current?.type === 'BottomSheet' && (\n              <BottomSheet\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                sheetItems={workingDialogJob.current.props.sheetItems}\n              />\n            )}\n          </BottomSheetContext.Provider>\n        </PromptContext.Provider>\n      </ActionMenuContext.Provider>\n    </AlertContext.Provider>\n  );\n};\n\nexport const useActionMenu = () => {\n  const context = useContext(ActionMenuContext);\n  if (!context) throw new Error('ActionMenuContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const useAlert = () => {\n  const context = useContext(AlertContext);\n  if (!context) throw new Error('AlertContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const usePrompt = () => {\n  const context = useContext(PromptContext);\n  if (!context) throw new Error('PromptContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const useBottomSheet = () => {\n  const context = useContext(BottomSheetContext);\n  if (!context) throw new Error('BottomSheetContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View } from 'react-native';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+const Divider = _ref => {
+  let {
+    style,
+    space
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [style, styles.divider, {
+      paddingHorizontal: space
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.inner, {
+      backgroundColor: colors.onBackground04
+    }]
+  }));
+};
+
+const styles = createStyleSheet({
+  divider: {
+    width: '100%',
+    height: 1
+  },
+  inner: {
+    width: '100%',
+    height: '100%'
+  }
+});
+export default Divider;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","createStyleSheet","useUIKitTheme","Divider","style","space","colors","styles","divider","paddingHorizontal","inner","backgroundColor","onBackground04","width","height"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = {\n  style?: StyleProp<ViewStyle>;\n  space?: number;\n};\n\nconst Divider = ({ style, space }: Props) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <View style={[style, styles.divider, { paddingHorizontal: space }]}>\n      <View style={[styles.inner, { backgroundColor: colors.onBackground04 }]} />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  divider: {\n    width: '100%',\n    height: 1,\n  },\n  inner: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default Divider;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAoBC,IAApB,QAA2C,cAA3C;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;;AAOA,MAAMC,OAAO,GAAG,QAA6B;EAAA,IAA5B;IAAEC,KAAF;IAASC;EAAT,CAA4B;EAC3C,MAAM;IAAEC;EAAF,IAAaJ,aAAa,EAAhC;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACE,KAAD,EAAQG,MAAM,CAACC,OAAf,EAAwB;MAAEC,iBAAiB,EAAEJ;IAArB,CAAxB;EAAb,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACE,MAAM,CAACG,KAAR,EAAe;MAAEC,eAAe,EAAEL,MAAM,CAACM;IAA1B,CAAf;EAAb,EADF,CADF;AAKD,CAPD;;AASA,MAAML,MAAM,GAAGN,gBAAgB,CAAC;EAC9BO,OAAO,EAAE;IACPK,KAAK,EAAE,MADA;IAEPC,MAAM,EAAE;EAFD,CADqB;EAK9BJ,KAAK,EAAE;IACLG,KAAK,EAAE,MADF;IAELC,MAAM,EAAE;EAFH;AALuB,CAAD,CAA/B;AAWA,eAAeX,OAAf"}

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

@@ -0,0 +1,190 @@
+import React from 'react';
+import { View } from 'react-native';
+import { conditionChaining } from '@sendbird/uikit-utils';
+import Image from '../../components/Image';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Badge from '../Badge';
+import Icon from '../Icon';
+import Text from '../Text';
+
+const GroupChannelPreview = _ref => {
+  let {
+    customCover,
+    coverUrl,
+    memberCount,
+    badgeCount,
+    maxBadgeCount,
+    body,
+    bodyIcon,
+    title,
+    titleCaption,
+    frozen,
+    notificationOff
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.groupChannelPreview;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: color.default.none.background
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.coverContainer
+  }, conditionChaining([Boolean(customCover)], [customCover, /*#__PURE__*/React.createElement(Image, {
+    resizeMode: 'cover',
+    style: [styles.channelCover, {
+      backgroundColor: color.default.none.coverBackground
+    }],
+    source: {
+      uri: coverUrl
+    }
+  })])), /*#__PURE__*/React.createElement(View, {
+    style: styles.rightSection
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.rightTopSection
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.channelInfo
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    subtitle1: true,
+    style: styles.channelInfoTitle,
+    color: color.default.none.textTitle
+  }, title), Boolean(memberCount) && /*#__PURE__*/React.createElement(Text, {
+    caption1: true,
+    style: styles.channelInfoMemberCount,
+    color: color.default.none.memberCount
+  }, memberCount), frozen && /*#__PURE__*/React.createElement(Icon, {
+    size: 16,
+    icon: 'freeze',
+    color: colors.primary,
+    containerStyle: styles.channelInfoFrozen
+  }), notificationOff && /*#__PURE__*/React.createElement(Icon, {
+    size: 16,
+    icon: 'notifications-off-filled',
+    color: colors.onBackground03
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.titleCaption
+  }, /*#__PURE__*/React.createElement(Text, {
+    caption2: true,
+    color: color.default.none.textTitleCaption
+  }, titleCaption))), /*#__PURE__*/React.createElement(View, {
+    style: styles.rightBottomSection
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.body, bodyIcon && {
+      alignItems: 'center'
+    }]
+  }, bodyIcon && /*#__PURE__*/React.createElement(Icon, {
+    size: 18,
+    icon: bodyIcon,
+    color: color.default.none.bodyIcon,
+    containerStyle: [styles.bodyIcon, {
+      backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground
+    }]
+  }), /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    numberOfLines: 1,
+    style: styles.bodyText,
+    color: color.default.none.textBody
+  }, body)), /*#__PURE__*/React.createElement(View, null, badgeCount > 0 && /*#__PURE__*/React.createElement(Badge, {
+    count: badgeCount,
+    maxCount: maxBadgeCount
+  })))), /*#__PURE__*/React.createElement(Separator, {
+    color: color.default.none.separator
+  }));
+};
+
+const Separator = _ref2 => {
+  let {
+    color
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.separator, {
+      backgroundColor: color
+    }]
+  });
+};
+
+const styles = createStyleSheet({
+  container: {
+    width: '100%',
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    alignItems: 'center'
+  },
+  coverContainer: {
+    marginRight: 16
+  },
+  channelCover: {
+    width: 56,
+    height: 56,
+    borderRadius: 28
+  },
+  rightSection: {
+    flex: 1
+  },
+  rightTopSection: {
+    flexDirection: 'row',
+    marginBottom: 4
+  },
+  channelInfo: {
+    flex: 1,
+    marginRight: 4,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  channelInfoTitle: {
+    flexShrink: 1,
+    marginRight: 4
+  },
+  channelInfoMemberCount: {
+    paddingTop: 2,
+    marginRight: 4
+  },
+  channelInfoFrozen: {
+    marginRight: 4
+  },
+  titleCaption: {
+    marginLeft: 4,
+    paddingTop: 2
+  },
+  rightBottomSection: {
+    flex: 1,
+    height: '100%',
+    flexDirection: 'row'
+  },
+  body: {
+    marginRight: 4,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    flexDirection: 'row'
+  },
+  bodyText: {
+    flex: 1
+  },
+  bodyIcon: {
+    borderRadius: 8,
+    width: 26,
+    height: 26,
+    marginRight: 4
+  },
+  unreadBadge: {
+    minWidth: 20,
+    minHeight: 20,
+    borderRadius: 99,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  separator: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    height: 1,
+    width: '84.5%'
+  }
+});
+export default /*#__PURE__*/React.memo(GroupChannelPreview);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,218 @@
+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); }
+
+import React from 'react';
+import { TouchableOpacity, View, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { conditionChaining } from '@sendbird/uikit-utils';
+import createStyleSheet from '../../styles/createStyleSheet';
+import getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';
+import useHeaderStyle from '../../styles/useHeaderStyle';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Text from '../Text';
+const AlignMapper = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+
+const Header = _ref => {
+  let {
+    children,
+    titleAlign,
+    title = null,
+    left = null,
+    right = null,
+    onPressLeft,
+    onPressRight,
+    clearTitleMargin = false
+  } = _ref;
+  const {
+    topInset,
+    defaultTitleAlign
+  } = useHeaderStyle();
+  const {
+    width,
+    height
+  } = useWindowDimensions();
+  const {
+    colors
+  } = useUIKitTheme();
+  const {
+    left: paddingLeft,
+    right: paddingRight
+  } = useSafeAreaInsets();
+  const actualTitleAlign = titleAlign ?? defaultTitleAlign;
+
+  if (!title && !left && !right) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        paddingTop: topInset,
+        backgroundColor: colors.ui.header.nav.none.background
+      }
+    }, children);
+  }
+
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      paddingLeft: paddingLeft + styles.container.paddingHorizontal,
+      paddingRight: paddingRight + styles.container.paddingHorizontal,
+      paddingTop: topInset,
+      backgroundColor: colors.ui.header.nav.none.background,
+      borderBottomColor: colors.ui.header.nav.none.borderBottom
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.header, {
+      height: getDefaultHeaderHeight(width > height)
+    }]
+  }, /*#__PURE__*/React.createElement(LeftSide, {
+    titleAlign: actualTitleAlign,
+    left: left,
+    onPressLeft: onPressLeft
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.title, clearTitleMargin && {
+      marginHorizontal: 0
+    }, {
+      justifyContent: AlignMapper[actualTitleAlign]
+    }]
+  }, typeof title === 'string' ? /*#__PURE__*/React.createElement(HeaderTitle, null, title) : title), /*#__PURE__*/React.createElement(RightSide, {
+    titleAlign: actualTitleAlign,
+    right: right,
+    onPressRight: onPressRight
+  })), children);
+};
+
+const LeftSide = _ref2 => {
+  let {
+    titleAlign,
+    onPressLeft,
+    left
+  } = _ref2;
+
+  if (titleAlign === 'center') {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.left
+    }, left && /*#__PURE__*/React.createElement(HeaderButton, {
+      onPress: onPressLeft
+    }, left));
+  }
+
+  if (!left) return null;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.left
+  }, /*#__PURE__*/React.createElement(HeaderButton, {
+    onPress: onPressLeft
+  }, left));
+};
+
+const RightSide = _ref3 => {
+  let {
+    titleAlign,
+    onPressRight,
+    right
+  } = _ref3;
+
+  if (titleAlign === 'center') {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.right
+    }, right && /*#__PURE__*/React.createElement(HeaderButton, {
+      onPress: onPressRight
+    }, right));
+  }
+
+  if (!right) return null;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.right
+  }, /*#__PURE__*/React.createElement(HeaderButton, {
+    onPress: onPressRight
+  }, right));
+};
+
+const HeaderTitle = _ref4 => {
+  let {
+    children,
+    style,
+    ...props
+  } = _ref4;
+  return /*#__PURE__*/React.createElement(Text, _extends({}, props, {
+    h1: true,
+    numberOfLines: 1,
+    style: style
+  }), children);
+};
+
+const HeaderSubtitle = _ref5 => {
+  let {
+    children,
+    style,
+    ...props
+  } = _ref5;
+  const {
+    colors
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    color: colors.onBackground03
+  }, props, {
+    caption2: true,
+    numberOfLines: 1,
+    style: style
+  }), children);
+};
+
+const HeaderButton = _ref6 => {
+  let {
+    children,
+    disabled,
+    onPress,
+    color,
+    ...props
+  } = _ref6;
+  return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({
+    style: styles.button
+  }, props, {
+    disabled: !onPress || disabled,
+    onPress: e => onPress === null || onPress === void 0 ? void 0 : onPress(e),
+    activeOpacity: 0.7
+  }), conditionChaining([typeof children === 'string' || typeof children === 'number'], [/*#__PURE__*/React.createElement(Text, {
+    button: true,
+    numberOfLines: 1,
+    color: color
+  }, children), children]));
+};
+
+const styles = createStyleSheet({
+  container: {
+    paddingHorizontal: 12,
+    borderBottomWidth: 1
+  },
+  header: {
+    flexDirection: 'row'
+  },
+  title: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 12
+  },
+  left: {
+    height: '100%',
+    minWidth: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12
+  },
+  right: {
+    height: '100%',
+    minWidth: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 12
+  },
+  button: {
+    padding: 4
+  }
+});
+Header.Button = HeaderButton;
+Header.Title = HeaderTitle;
+Header.Subtitle = HeaderSubtitle;
+export default Header;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import IconAssets from '../../assets/icon';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+const Icon = _ref => {
+  let {
+    icon,
+    color,
+    size = 24,
+    containerStyle,
+    style
+  } = _ref;
+  const sizeStyle = sizeStyles[size] ?? {
+    width: size,
+    height: size
+  };
+  const {
+    colors
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [containerStyle, containerStyles.container]
+  }, /*#__PURE__*/React.createElement(Image, {
+    resizeMode: 'contain',
+    source: IconAssets[icon],
+    style: [{
+      tintColor: color ?? colors.primary
+    }, sizeStyle, style]
+  }));
+};
+
+const containerStyles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+const sizeStyles = createStyleSheet({
+  16: {
+    width: 16,
+    height: 16
+  },
+  20: {
+    width: 20,
+    height: 20
+  },
+  24: {
+    width: 24,
+    height: 24
+  },
+  28: {
+    width: 28,
+    height: 28
+  },
+  32: {
+    width: 32,
+    height: 32
+  }
+});
+Icon.Assets = IconAssets;
+export default Icon;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Image","StyleSheet","View","IconAssets","createStyleSheet","useUIKitTheme","Icon","icon","color","size","containerStyle","style","sizeStyle","sizeStyles","width","height","colors","containerStyles","container","tintColor","primary","create","alignItems","justifyContent","Assets"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport IconAssets from '../../assets/icon';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype IconNames = keyof typeof IconAssets;\ntype SizeFactor = keyof typeof sizeStyles;\n\ntype Props = {\n  icon: IconNames;\n  color?: string;\n  size?: number;\n  style?: StyleProp<ImageStyle>;\n  containerStyle?: StyleProp<ViewStyle>;\n};\nconst Icon: ((props: Props) => JSX.Element) & { Assets: typeof IconAssets } = ({\n  icon,\n  color,\n  size = 24,\n  containerStyle,\n  style,\n}) => {\n  const sizeStyle = sizeStyles[size as SizeFactor] ?? { width: size, height: size };\n  const { colors } = useUIKitTheme();\n  return (\n    <View style={[containerStyle, containerStyles.container]}>\n      <Image\n        resizeMode={'contain'}\n        source={IconAssets[icon]}\n        style={[{ tintColor: color ?? colors.primary }, sizeStyle, style]}\n      />\n    </View>\n  );\n};\n\nconst containerStyles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nconst sizeStyles = createStyleSheet({\n  16: {\n    width: 16,\n    height: 16,\n  },\n  20: {\n    width: 20,\n    height: 20,\n  },\n  24: {\n    width: 24,\n    height: 24,\n  },\n  28: {\n    width: 28,\n    height: 28,\n  },\n  32: {\n    width: 32,\n    height: 32,\n  },\n});\n\nIcon.Assets = IconAssets;\nexport default Icon;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,KAAT,EAAuCC,UAAvC,EAAmDC,IAAnD,QAA0E,cAA1E;AAEA,OAAOC,UAAP,MAAuB,mBAAvB;AACA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;;AAYA,MAAMC,IAAqE,GAAG,QAMxE;EAAA,IANyE;IAC7EC,IAD6E;IAE7EC,KAF6E;IAG7EC,IAAI,GAAG,EAHsE;IAI7EC,cAJ6E;IAK7EC;EAL6E,CAMzE;EACJ,MAAMC,SAAS,GAAGC,UAAU,CAACJ,IAAD,CAAV,IAAkC;IAAEK,KAAK,EAAEL,IAAT;IAAeM,MAAM,EAAEN;EAAvB,CAApD;EACA,MAAM;IAAEO;EAAF,IAAaX,aAAa,EAAhC;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACK,cAAD,EAAiBO,eAAe,CAACC,SAAjC;EAAb,gBACE,oBAAC,KAAD;IACE,UAAU,EAAE,SADd;IAEE,MAAM,EAAEf,UAAU,CAACI,IAAD,CAFpB;IAGE,KAAK,EAAE,CAAC;MAAEY,SAAS,EAAEX,KAAK,IAAIQ,MAAM,CAACI;IAA7B,CAAD,EAAyCR,SAAzC,EAAoDD,KAApD;EAHT,EADF,CADF;AASD,CAlBD;;AAoBA,MAAMM,eAAe,GAAGhB,UAAU,CAACoB,MAAX,CAAkB;EACxCH,SAAS,EAAE;IACTI,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AAD6B,CAAlB,CAAxB;AAOA,MAAMV,UAAU,GAAGT,gBAAgB,CAAC;EAClC,IAAI;IACFU,KAAK,EAAE,EADL;IAEFC,MAAM,EAAE;EAFN,CAD8B;EAKlC,IAAI;IACFD,KAAK,EAAE,EADL;IAEFC,MAAM,EAAE;EAFN,CAL8B;EASlC,IAAI;IACFD,KAAK,EAAE,EADL;IAEFC,MAAM,EAAE;EAFN,CAT8B;EAalC,IAAI;IACFD,KAAK,EAAE,EADL;IAEFC,MAAM,EAAE;EAFN,CAb8B;EAiBlC,IAAI;IACFD,KAAK,EAAE,EADL;IAEFC,MAAM,EAAE;EAFN;AAjB8B,CAAD,CAAnC;AAuBAT,IAAI,CAACkB,MAAL,GAAcrB,UAAd;AACA,eAAeG,IAAf"}

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

@@ -0,0 +1,64 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Icon from '../Icon';
+
+const LoadingSpinner = _ref => {
+  let {
+    size = 24,
+    color,
+    style
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(Rotate, {
+    style: style
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: 'spinner',
+    size: size,
+    color: color ?? colors.primary
+  }));
+};
+
+const useLoopAnimated = function (duration) {
+  let useNativeDriver = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const animated = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.loop(Animated.timing(animated, {
+      toValue: 1,
+      duration,
+      useNativeDriver,
+      easing: Easing.inOut(Easing.linear)
+    }), {
+      resetBeforeIteration: true
+    }).start();
+    return () => {
+      animated.stopAnimation();
+      animated.setValue(0);
+    };
+  }, []);
+  return animated;
+};
+
+const Rotate = _ref2 => {
+  let {
+    children,
+    style
+  } = _ref2;
+  const loop = useLoopAnimated(1000);
+  const rotate = loop.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: [style, {
+      transform: [{
+        rotate
+      }]
+    }]
+  }, children);
+};
+
+export default LoadingSpinner;
+//# sourceMappingURL=index.js.map