@sendbird/uikit-react-native-foundation 1.0.0-rc.1

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

@@ -0,0 +1,144 @@
+import React, { useCallback, useContext, useRef } from 'react';
+import { useForceUpdate } from '@sendbird/uikit-utils';
+import ActionMenu from '../ActionMenu';
+import Alert from '../Alert';
+import BottomSheet from '../BottomSheet';
+import Prompt from '../Prompt';
+const AlertContext = /*#__PURE__*/React.createContext(null);
+const ActionMenuContext = /*#__PURE__*/React.createContext(null);
+const PromptContext = /*#__PURE__*/React.createContext(null);
+const BottomSheetContext = /*#__PURE__*/React.createContext(null);
+const DISMISS_TIMEOUT = 3000;
+export const DialogProvider = _ref => {
+  var _workingDialogJob$cur, _workingDialogJob$cur2, _defaultLabels$alert, _workingDialogJob$cur3, _defaultLabels$prompt, _defaultLabels$prompt2, _defaultLabels$prompt3, _workingDialogJob$cur4;
+
+  let {
+    defaultLabels,
+    children
+  } = _ref;
+  const waitDismissTimeout = useRef();
+  const waitDismissPromise = useRef();
+  const waitDismiss = useCallback(resolver => {
+    waitDismissPromise.current = resolver;
+    waitDismissTimeout.current = setTimeout(completeDismiss, DISMISS_TIMEOUT);
+  }, []);
+  const completeDismiss = useCallback(() => {
+    if (waitDismissTimeout.current) clearTimeout(waitDismissTimeout.current);
+    if (waitDismissPromise.current) waitDismissPromise.current();
+    waitDismissTimeout.current = undefined;
+    waitDismissPromise.current = undefined;
+  }, []);
+  const render = useForceUpdate();
+  const dialogQueue = useRef([]);
+  const workingDialogJob = useRef();
+  const visibleState = useRef(false);
+
+  const isProcessing = () => Boolean(workingDialogJob.current);
+
+  const updateToShow = useCallback(() => {
+    visibleState.current = true;
+    render();
+  }, []);
+  const updateToHide = useCallback(() => {
+    return new Promise(resolve => {
+      visibleState.current = false;
+      render();
+      waitDismiss(resolve);
+    });
+  }, []);
+  const consumeQueue = useCallback(() => {
+    completeDismiss();
+    const job = dialogQueue.current.shift();
+
+    if (job) {
+      workingDialogJob.current = job;
+      updateToShow();
+    } else {
+      workingDialogJob.current = undefined;
+    }
+  }, []);
+
+  const createJob = type => props => {
+    const jobItem = {
+      type,
+      props
+    };
+    if (isProcessing()) dialogQueue.current.push(jobItem);else {
+      workingDialogJob.current = jobItem;
+      updateToShow();
+    }
+  };
+
+  const alert = useCallback(createJob('Alert'), []);
+  const openMenu = useCallback(createJob('ActionMenu'), []);
+  const openPrompt = useCallback(createJob('Prompt'), []);
+  const openSheet = useCallback(createJob('BottomSheet'), []);
+  return /*#__PURE__*/React.createElement(AlertContext.Provider, {
+    value: {
+      alert
+    }
+  }, /*#__PURE__*/React.createElement(ActionMenuContext.Provider, {
+    value: {
+      openMenu
+    }
+  }, /*#__PURE__*/React.createElement(PromptContext.Provider, {
+    value: {
+      openPrompt
+    }
+  }, /*#__PURE__*/React.createElement(BottomSheetContext.Provider, {
+    value: {
+      openSheet
+    }
+  }, children, ((_workingDialogJob$cur = workingDialogJob.current) === null || _workingDialogJob$cur === void 0 ? void 0 : _workingDialogJob$cur.type) === 'ActionMenu' && /*#__PURE__*/React.createElement(ActionMenu, {
+    onHide: updateToHide,
+    onDismiss: consumeQueue,
+    visible: visibleState.current,
+    title: workingDialogJob.current.props.title,
+    menuItems: workingDialogJob.current.props.menuItems
+  }), ((_workingDialogJob$cur2 = workingDialogJob.current) === null || _workingDialogJob$cur2 === void 0 ? void 0 : _workingDialogJob$cur2.type) === 'Alert' && /*#__PURE__*/React.createElement(Alert, {
+    onHide: updateToHide,
+    onDismiss: consumeQueue,
+    visible: visibleState.current,
+    title: workingDialogJob.current.props.title,
+    message: workingDialogJob.current.props.message,
+    buttons: workingDialogJob.current.props.buttons ?? [{
+      text: (defaultLabels === null || defaultLabels === void 0 ? void 0 : (_defaultLabels$alert = defaultLabels.alert) === null || _defaultLabels$alert === void 0 ? void 0 : _defaultLabels$alert.ok) || 'OK'
+    }]
+  }), ((_workingDialogJob$cur3 = workingDialogJob.current) === null || _workingDialogJob$cur3 === void 0 ? void 0 : _workingDialogJob$cur3.type) === 'Prompt' && /*#__PURE__*/React.createElement(Prompt, {
+    onHide: updateToHide,
+    onDismiss: consumeQueue,
+    visible: visibleState.current,
+    title: workingDialogJob.current.props.title,
+    onSubmit: workingDialogJob.current.props.onSubmit,
+    defaultValue: workingDialogJob.current.props.defaultValue,
+    submitLabel: workingDialogJob.current.props.submitLabel ?? (defaultLabels === null || defaultLabels === void 0 ? void 0 : (_defaultLabels$prompt = defaultLabels.prompt) === null || _defaultLabels$prompt === void 0 ? void 0 : _defaultLabels$prompt.ok),
+    cancelLabel: workingDialogJob.current.props.cancelLabel ?? (defaultLabels === null || defaultLabels === void 0 ? void 0 : (_defaultLabels$prompt2 = defaultLabels.prompt) === null || _defaultLabels$prompt2 === void 0 ? void 0 : _defaultLabels$prompt2.cancel),
+    placeholder: workingDialogJob.current.props.placeholder ?? (defaultLabels === null || defaultLabels === void 0 ? void 0 : (_defaultLabels$prompt3 = defaultLabels.prompt) === null || _defaultLabels$prompt3 === void 0 ? void 0 : _defaultLabels$prompt3.placeholder)
+  }), ((_workingDialogJob$cur4 = workingDialogJob.current) === null || _workingDialogJob$cur4 === void 0 ? void 0 : _workingDialogJob$cur4.type) === 'BottomSheet' && /*#__PURE__*/React.createElement(BottomSheet, {
+    onHide: updateToHide,
+    onDismiss: consumeQueue,
+    visible: visibleState.current,
+    sheetItems: workingDialogJob.current.props.sheetItems
+  })))));
+};
+export const useActionMenu = () => {
+  const context = useContext(ActionMenuContext);
+  if (!context) throw new Error('ActionMenuContext is not provided, wrap your app with DialogProvider');
+  return context;
+};
+export const useAlert = () => {
+  const context = useContext(AlertContext);
+  if (!context) throw new Error('AlertContext is not provided, wrap your app with DialogProvider');
+  return context;
+};
+export const usePrompt = () => {
+  const context = useContext(PromptContext);
+  if (!context) throw new Error('PromptContext is not provided, wrap your app with DialogProvider');
+  return context;
+};
+export const useBottomSheet = () => {
+  const context = useContext(BottomSheetContext);
+  if (!context) throw new Error('BottomSheetContext is not provided, wrap your app with DialogProvider');
+  return context;
+};
+//# sourceMappingURL=index.js.map

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 = {\n  defaultLabels?: {\n    alert?: { ok?: string };\n    prompt?: { placeholder?: string; ok?: string; cancel?: string };\n  };\n};\nconst DISMISS_TIMEOUT = 3000;\nexport const DialogProvider: React.FC<Props> = ({ defaultLabels, children }) => {\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: React.FC<Props> = ({ style, space }) => {\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,OAAwB,GAAG,QAAsB;EAAA,IAArB;IAAEC,KAAF;IAASC;EAAT,CAAqB;EACrD,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: React.FC<Props> = ({\n  customCover,\n  coverUrl,\n  memberCount,\n  badgeCount,\n  maxBadgeCount,\n  body,\n  bodyIcon,\n  title,\n  titleCaption,\n  frozen,\n  notificationOff,\n}) => {\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