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

package/src/ui/Dialog/DialogSheet.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Icon from '../Icon';
+import Text from '../Text';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+};
+const DialogSheet: React.FC<Props> & { Item: typeof SheetItem } = ({ style, children }) => {
+  const { colors } = useUIKitTheme();
+  return (
+    <View style={[styles.container, { backgroundColor: colors.ui.dialog.default.none.background }, style]}>
+      {children}
+    </View>
+  );
+};
+
+export type SheetItemProps = {
+  icon?: keyof typeof Icon.Assets;
+  iconColor?: string;
+  title: string;
+  titleColor?: string;
+};
+const SheetItem: React.FC<SheetItemProps> = ({ icon, title, iconColor, titleColor }) => {
+  const { colors } = useUIKitTheme();
+  return (
+    <View style={[styles.sheetItemContainer, { backgroundColor: colors.ui.dialog.default.none.background }]}>
+      {icon && (
+        <Icon
+          icon={icon}
+          color={iconColor ?? colors.ui.dialog.default.none.highlight}
+          containerStyle={styles.sheetItemIcon}
+        />
+      )}
+      <Text
+        subtitle1
+        numberOfLines={1}
+        color={titleColor ?? colors.ui.dialog.default.none.text}
+        style={styles.sheetItemText}
+      >
+        {title}
+      </Text>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    overflow: 'hidden',
+    flexDirection: 'column',
+    width: '100%',
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  sheetItemContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 48,
+  },
+  sheetItemIcon: {
+    marginLeft: 16,
+  },
+  sheetItemText: {
+    marginHorizontal: 24,
+  },
+});
+
+DialogSheet.Item = SheetItem;
+export default DialogSheet;

package/src/ui/Dialog/index.tsx

@@ -0,0 +1,185 @@
+import React, { useCallback, useContext, useRef } from 'react';
+
+import { useForceUpdate } from '@sendbird/uikit-utils';
+
+import type { ActionMenuItem } from '../ActionMenu';
+import ActionMenu from '../ActionMenu';
+import type { AlertItem } from '../Alert';
+import Alert from '../Alert';
+import type { BottomSheetItem } from '../BottomSheet';
+import BottomSheet from '../BottomSheet';
+import type { PromptItem } from '../Prompt';
+import Prompt from '../Prompt';
+
+type DialogJob =
+  | {
+      type: 'ActionMenu';
+      props: ActionMenuItem;
+    }
+  | {
+      type: 'Alert';
+      props: AlertItem;
+    }
+  | {
+      type: 'Prompt';
+      props: PromptItem;
+    }
+  | {
+      type: 'BottomSheet';
+      props: BottomSheetItem;
+    };
+
+type DialogPropsBy<T extends DialogJob['type'], U extends DialogJob = DialogJob> = U extends { type: T; props: infer P }
+  ? P
+  : never;
+
+type DialogContextType = {
+  openMenu: (props: DialogPropsBy<'ActionMenu'>) => void;
+  alert: (props: DialogPropsBy<'Alert'>) => void;
+  openPrompt: (props: DialogPropsBy<'Prompt'>) => void;
+  openSheet: (props: DialogPropsBy<'BottomSheet'>) => void;
+};
+
+const AlertContext = React.createContext<Pick<DialogContextType, 'alert'> | null>(null);
+const ActionMenuContext = React.createContext<Pick<DialogContextType, 'openMenu'> | null>(null);
+const PromptContext = React.createContext<Pick<DialogContextType, 'openPrompt'> | null>(null);
+const BottomSheetContext = React.createContext<Pick<DialogContextType, 'openSheet'> | null>(null);
+
+type Props = {
+  defaultLabels?: {
+    alert?: { ok?: string };
+    prompt?: { placeholder?: string; ok?: string; cancel?: string };
+  };
+};
+const DISMISS_TIMEOUT = 3000;
+export const DialogProvider: React.FC<Props> = ({ defaultLabels, children }) => {
+  const waitDismissTimeout = useRef<NodeJS.Timeout>();
+  const waitDismissPromise = useRef<() => void>();
+  const waitDismiss = useCallback((resolver: () => void) => {
+    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<DialogJob[]>([]);
+  const workingDialogJob = useRef<DialogJob>();
+  const visibleState = useRef(false);
+
+  const isProcessing = () => Boolean(workingDialogJob.current);
+  const updateToShow = useCallback(() => {
+    visibleState.current = true;
+    render();
+  }, []);
+  const updateToHide = useCallback((): Promise<void> => {
+    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 =
+    <T extends DialogJob['type']>(type: T) =>
+    (props: DialogPropsBy<T>) => {
+      const jobItem = { type, props } as DialogJob;
+      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 (
+    <AlertContext.Provider value={{ alert }}>
+      <ActionMenuContext.Provider value={{ openMenu }}>
+        <PromptContext.Provider value={{ openPrompt }}>
+          <BottomSheetContext.Provider value={{ openSheet }}>
+            {children}
+            {workingDialogJob.current?.type === 'ActionMenu' && (
+              <ActionMenu
+                onHide={updateToHide}
+                onDismiss={consumeQueue}
+                visible={visibleState.current}
+                title={workingDialogJob.current.props.title}
+                menuItems={workingDialogJob.current.props.menuItems}
+              />
+            )}
+            {workingDialogJob.current?.type === 'Alert' && (
+              <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?.alert?.ok || 'OK' }]}
+              />
+            )}
+            {workingDialogJob.current?.type === 'Prompt' && (
+              <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?.prompt?.ok}
+                cancelLabel={workingDialogJob.current.props.cancelLabel ?? defaultLabels?.prompt?.cancel}
+                placeholder={workingDialogJob.current.props.placeholder ?? defaultLabels?.prompt?.placeholder}
+              />
+            )}
+            {workingDialogJob.current?.type === 'BottomSheet' && (
+              <BottomSheet
+                onHide={updateToHide}
+                onDismiss={consumeQueue}
+                visible={visibleState.current}
+                sheetItems={workingDialogJob.current.props.sheetItems}
+              />
+            )}
+          </BottomSheetContext.Provider>
+        </PromptContext.Provider>
+      </ActionMenuContext.Provider>
+    </AlertContext.Provider>
+  );
+};
+
+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;
+};

package/src/ui/Divider/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  space?: number;
+};
+
+const Divider: React.FC<Props> = ({ style, space }) => {
+  const { colors } = useUIKitTheme();
+  return (
+    <View style={[style, styles.divider, { paddingHorizontal: space }]}>
+      <View style={[styles.inner, { backgroundColor: colors.onBackground04 }]} />
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  divider: {
+    width: '100%',
+    height: 1,
+  },
+  inner: {
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export default Divider;

package/src/ui/GroupChannelPreview/index.tsx

@@ -0,0 +1,193 @@
+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';
+
+type Props = {
+  customCover?: React.ReactElement;
+  coverUrl: string;
+
+  title: string;
+  titleCaption: string;
+  bodyIcon?: keyof typeof Icon.Assets;
+  body: string;
+
+  memberCount?: number;
+  badgeCount: number;
+  maxBadgeCount?: number;
+
+  frozen?: boolean;
+  notificationOff?: boolean;
+};
+
+const GroupChannelPreview: React.FC<Props> = ({
+  customCover,
+  coverUrl,
+  memberCount,
+  badgeCount,
+  maxBadgeCount,
+  body,
+  bodyIcon,
+  title,
+  titleCaption,
+  frozen,
+  notificationOff,
+}) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelPreview;
+
+  return (
+    <View style={[styles.container, { backgroundColor: color.default.none.background }]}>
+      <View style={styles.coverContainer}>
+        {conditionChaining(
+          [Boolean(customCover)],
+          [
+            customCover,
+            <Image
+              resizeMode={'cover'}
+              style={[styles.channelCover, { backgroundColor: color.default.none.coverBackground }]}
+              source={{ uri: coverUrl }}
+            />,
+          ],
+        )}
+      </View>
+      <View style={styles.rightSection}>
+        <View style={styles.rightTopSection}>
+          <View style={styles.channelInfo}>
+            <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>
+              {title}
+            </Text>
+            {Boolean(memberCount) && (
+              <Text caption1 style={styles.channelInfoMemberCount} color={color.default.none.memberCount}>
+                {memberCount}
+              </Text>
+            )}
+            {frozen && (
+              <Icon size={16} icon={'freeze'} color={colors.primary} containerStyle={styles.channelInfoFrozen} />
+            )}
+            {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}
+          </View>
+          <View style={styles.titleCaption}>
+            <Text caption2 color={color.default.none.textTitleCaption}>
+              {titleCaption}
+            </Text>
+          </View>
+        </View>
+
+        <View style={styles.rightBottomSection}>
+          <View style={[styles.body, bodyIcon && { alignItems: 'center' }]}>
+            {bodyIcon && (
+              <Icon
+                size={18}
+                icon={bodyIcon}
+                color={color.default.none.bodyIcon}
+                containerStyle={[
+                  styles.bodyIcon,
+                  { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },
+                ]}
+              />
+            )}
+            <Text body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>
+              {body}
+            </Text>
+          </View>
+          <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>
+        </View>
+      </View>
+      <Separator color={color.default.none.separator} />
+    </View>
+  );
+};
+
+type SeparatorProps = { color: string };
+const Separator = ({ color }: SeparatorProps) => <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 React.memo(GroupChannelPreview);

package/src/ui/Header/index.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import { TouchableOpacity, TouchableOpacityProps, View, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { conditionChaining } from '@sendbird/uikit-utils';
+
+import type { BaseHeaderProps } from '../../index';
+import createStyleSheet from '../../styles/createStyleSheet';
+import getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';
+import useHeaderStyle from '../../styles/useHeaderStyle';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Text, { TextProps } from '../Text';
+
+type HeaderElement = string | React.ReactElement | null;
+type HeaderProps = BaseHeaderProps<
+  {
+    title?: HeaderElement;
+    left?: HeaderElement;
+    right?: HeaderElement;
+    onPressLeft?: () => void;
+    onPressRight?: () => void;
+  },
+  { clearTitleMargin?: boolean }
+>;
+
+const AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;
+const Header: React.FC<HeaderProps> & {
+  Button: typeof HeaderButton;
+  Title: typeof HeaderTitle;
+  Subtitle: typeof HeaderSubtitle;
+} = ({
+  children,
+  titleAlign,
+  title = null,
+  left = null,
+  right = null,
+  onPressLeft,
+  onPressRight,
+  clearTitleMargin = false,
+}) => {
+  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 (
+      <View style={{ paddingTop: topInset, backgroundColor: colors.ui.header.nav.none.background }}>{children}</View>
+    );
+  }
+
+  return (
+    <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,
+        },
+      ]}
+    >
+      <View style={[styles.header, { height: getDefaultHeaderHeight(width > height) }]}>
+        <LeftSide titleAlign={actualTitleAlign} left={left} onPressLeft={onPressLeft} />
+        <View
+          style={[
+            styles.title,
+            clearTitleMargin && { marginHorizontal: 0 },
+            { justifyContent: AlignMapper[actualTitleAlign] },
+          ]}
+        >
+          {typeof title === 'string' ? <HeaderTitle>{title}</HeaderTitle> : title}
+        </View>
+        <RightSide titleAlign={actualTitleAlign} right={right} onPressRight={onPressRight} />
+      </View>
+      {children}
+    </View>
+  );
+};
+
+const LeftSide: React.FC<HeaderProps> = ({ titleAlign, onPressLeft, left }) => {
+  if (titleAlign === 'center') {
+    return <View style={styles.left}>{left && <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>}</View>;
+  }
+  if (!left) return null;
+  return (
+    <View style={styles.left}>
+      <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>
+    </View>
+  );
+};
+
+const RightSide: React.FC<HeaderProps> = ({ titleAlign, onPressRight, right }) => {
+  if (titleAlign === 'center') {
+    return <View style={styles.right}>{right && <HeaderButton onPress={onPressRight}>{right}</HeaderButton>}</View>;
+  }
+  if (!right) return null;
+  return (
+    <View style={styles.right}>
+      <HeaderButton onPress={onPressRight}>{right}</HeaderButton>
+    </View>
+  );
+};
+
+const HeaderTitle: React.FC<{ children: string } & TextProps> = ({ children, style, ...props }) => {
+  return (
+    <Text {...props} h1 numberOfLines={1} style={style}>
+      {children}
+    </Text>
+  );
+};
+const HeaderSubtitle: React.FC<{ children: string } & TextProps> = ({ children, style, ...props }) => {
+  const { colors } = useUIKitTheme();
+  return (
+    <Text color={colors.onBackground03} {...props} caption2 numberOfLines={1} style={style}>
+      {children}
+    </Text>
+  );
+};
+const HeaderButton: React.FC<TouchableOpacityProps & { color?: string }> = ({
+  children,
+  disabled,
+  onPress,
+  color,
+  ...props
+}) => {
+  return (
+    <TouchableOpacity
+      style={styles.button}
+      {...props}
+      disabled={!onPress || disabled}
+      onPress={(e) => onPress?.(e)}
+      activeOpacity={0.7}
+    >
+      {conditionChaining(
+        [typeof children === 'string' || typeof children === 'number'],
+        [
+          <Text button numberOfLines={1} color={color}>
+            {children}
+          </Text>,
+          children,
+        ],
+      )}
+    </TouchableOpacity>
+  );
+};
+
+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;