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

package/src/ui/Icon/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import IconAssets from '../../assets/icon';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+type IconNames = keyof typeof IconAssets;
+type SizeFactor = keyof typeof sizeStyles;
+
+type Props = {
+  icon: IconNames;
+  color?: string;
+  size?: number;
+  style?: StyleProp<ImageStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const Icon: React.FC<Props> & { Assets: typeof IconAssets } = ({ icon, color, size = 24, containerStyle, style }) => {
+  const sizeStyle = sizeStyles[size as SizeFactor] ?? { width: size, height: size };
+  const { colors } = useUIKitTheme();
+  return (
+    <View style={[containerStyle, containerStyles.container]}>
+      <Image
+        resizeMode={'contain'}
+        source={IconAssets[icon]}
+        style={[{ tintColor: color ?? colors.primary }, sizeStyle, style]}
+      />
+    </View>
+  );
+};
+
+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;

package/src/ui/LoadingSpinner/index.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleProp, ViewStyle } from 'react-native';
+
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Icon from '../Icon';
+
+type Props = {
+  size?: number;
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+const LoadingSpinner: React.FC<Props> = ({ size = 24, color, style }) => {
+  const { colors } = useUIKitTheme();
+  return (
+    <Rotate style={style}>
+      <Icon icon={'spinner'} size={size} color={color ?? colors.primary} />
+    </Rotate>
+  );
+};
+
+const useLoopAnimated = (duration: number, useNativeDriver = 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: React.FC<{ style: StyleProp<ViewStyle> }> = ({ children, style }) => {
+  const loop = useLoopAnimated(1000);
+  const rotate = loop.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
+  return <Animated.View style={[style, { transform: [{ rotate }] }]}>{children}</Animated.View>;
+};
+
+export default LoadingSpinner;

package/src/ui/MenuBar/index.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { conditionChaining } from '@sendbird/uikit-utils';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Divider from '../Divider';
+import Icon from '../Icon';
+import Text from '../Text';
+
+export type MenuBarProps = {
+  variant?: 'default' | 'contained';
+
+  onPress: () => void;
+  disabled?: boolean;
+
+  icon: keyof typeof Icon.Assets;
+  iconColor?: string;
+  iconBackgroundColor?: string;
+  name: string;
+
+  actionLabel?: string;
+  actionItem?: React.ReactNode;
+};
+const MenuBar: React.FC<MenuBarProps> = ({
+  variant = 'default',
+  disabled,
+  onPress,
+  name,
+  icon,
+  iconColor,
+  iconBackgroundColor,
+  actionLabel,
+  actionItem = null,
+}) => {
+  const { palette, colors } = useUIKitTheme();
+
+  return (
+    <View>
+      <Pressable disabled={disabled} onPress={onPress} style={styles.container}>
+        {icon && (
+          <Icon
+            icon={icon}
+            size={variant === 'contained' ? 16 : 24}
+            color={conditionChaining(
+              [variant === 'contained', iconColor],
+              [palette.background50, iconColor, colors.primary],
+            )}
+            containerStyle={[
+              styles.icon,
+              variant === 'contained' && styles.containedIcon,
+              variant === 'contained' && { backgroundColor: iconBackgroundColor ?? palette.background400 },
+            ]}
+          />
+        )}
+        <Text subtitle2 numberOfLines={1} style={styles.name}>
+          {name}
+        </Text>
+        {Boolean(actionLabel) && (
+          <Text subtitle2 numberOfLines={1} color={colors.onBackground02} style={styles.actionLabel}>
+            {actionLabel}
+          </Text>
+        )}
+        {actionItem}
+      </Pressable>
+      <Divider />
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    paddingVertical: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  name: {
+    flex: 1,
+    marginRight: 8,
+  },
+  icon: {
+    marginRight: 16,
+  },
+  containedIcon: {
+    borderRadius: 24,
+    padding: 4,
+  },
+  actionLabel: {
+    marginRight: 4,
+  },
+});
+
+export default MenuBar;

package/src/ui/Modal/index.tsx

@@ -0,0 +1,195 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Dimensions,
+  KeyboardAvoidingView,
+  ModalProps,
+  PanResponder,
+  Platform,
+  Pressable,
+  Modal as RNModal,
+  StyleProp,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  ViewStyle,
+  useWindowDimensions,
+} from 'react-native';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useHeaderStyle from '../../styles/useHeaderStyle';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+type Props = {
+  type?: 'slide' | 'fade';
+  onClose: () => void;
+  backgroundStyle?: StyleProp<ViewStyle>;
+  disableBackgroundClose?: boolean;
+  enableKeyboardAvoid?: boolean;
+} & Omit<ModalProps, 'animationType' | 'onRequestClose'>;
+
+/**
+ * Modal Open: Triggered by Modal.props.visible state changed to true
+ * - visible true -> modalVisible true -> animation start
+ *
+ * Modal Close: Triggered by Modal.props.onClose() call
+ * - Modal.props.onClose() -> visible false -> animation start -> modalVisible false
+ * */
+const Modal: React.FC<Props> = ({
+  children,
+  onClose,
+  backgroundStyle,
+  onDismiss,
+  type = 'fade',
+  visible = false,
+  disableBackgroundClose = false,
+  enableKeyboardAvoid = false,
+  statusBarTranslucent,
+  ...props
+}) => {
+  const { palette } = useUIKitTheme();
+  const { content, backdrop, showTransition, hideTransition } = useModalAnimation(type);
+  const panResponder = useModalPanResponder(type, content.translateY, showTransition, onClose);
+  const { topInset } = useHeaderStyle();
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const showAction = () => setModalVisible(true);
+  const hideAction = () => hideTransition(() => setModalVisible(false));
+
+  const { width, height } = useWindowDimensions();
+
+  useEffect(() => {
+    if (visible) showAction();
+    else hideAction();
+  }, [visible]);
+
+  useOnDismiss(modalVisible, onDismiss);
+
+  return (
+    <RNModal
+      transparent
+      hardwareAccelerated
+      visible={modalVisible}
+      onRequestClose={onClose}
+      onShow={() => showTransition()}
+      onDismiss={onDismiss}
+      supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
+      animationType={'none'}
+      {...props}
+    >
+      <TouchableWithoutFeedback onPress={disableBackgroundClose ? undefined : onClose}>
+        <Animated.View
+          style={[StyleSheet.absoluteFill, { opacity: backdrop.opacity, backgroundColor: palette.onBackgroundLight03 }]}
+        />
+      </TouchableWithoutFeedback>
+      <KeyboardAvoidingView
+        // NOTE: This is trick for Android.
+        //  When orientation is changed on Android, the offset that to avoid soft-keyboard is not updated normally.
+        key={`${width}-${height}`}
+        enabled={enableKeyboardAvoid}
+        style={styles.background}
+        behavior={Platform.select({ ios: 'padding', default: 'height' })}
+        pointerEvents={'box-none'}
+        keyboardVerticalOffset={enableKeyboardAvoid && statusBarTranslucent ? -topInset : 0}
+      >
+        <Animated.View
+          style={[
+            styles.background,
+            backgroundStyle,
+            { opacity: content.opacity, transform: [{ translateY: content.translateY }] },
+          ]}
+          pointerEvents={'box-none'}
+          {...panResponder.panHandlers}
+        >
+          <Pressable
+          // NOTE: https://github.com/facebook/react-native/issues/14295
+          //  Due to 'Pressable', the width of the children must be explicitly specified as a number.
+          >
+            {children}
+          </Pressable>
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </RNModal>
+  );
+};
+
+const isHideGesture = (distanceY: number, velocityY: number) => {
+  return distanceY > 125 || (distanceY > 0 && velocityY > 0.1);
+};
+const useModalPanResponder = (
+  type: 'slide' | 'fade',
+  translateY: Animated.Value,
+  show: () => void,
+  hide: () => void,
+) => {
+  if (type === 'fade') return { panHandlers: {} };
+  return React.useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponderCapture: (_, { dy }) => dy > 8,
+      // @ts-ignore
+      onPanResponderGrant: () => translateY.setOffset(translateY.__getValue()),
+      onPanResponderMove: (_, { dy }) => dy >= 0 && translateY.setValue(dy), // Animated.event([null, { dy: translateY }], { useNativeDriver: false }),
+      onPanResponderRelease: (_, { dy, vy }) => {
+        if (isHideGesture(dy, vy)) hide();
+        else show();
+      },
+    }),
+  ).current;
+};
+
+const useModalAnimation = (type: 'slide' | 'fade') => {
+  const initialY = type === 'slide' ? Dimensions.get('window').height : 0;
+  const baseAnimBackground = useRef(new Animated.Value(0)).current;
+  const baseAnimContent = useRef(new Animated.Value(initialY)).current;
+
+  const content = {
+    opacity: baseAnimBackground.interpolate({
+      inputRange: [0, 1],
+      outputRange: [type === 'slide' ? 1 : 0, 1],
+    }),
+    translateY: baseAnimContent,
+  };
+  const backdrop = {
+    opacity: baseAnimBackground.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+    }),
+  };
+  const createTransition = (toValue: 0 | 1) => {
+    const config = { duration: 250, useNativeDriver: false };
+    return Animated.parallel([
+      Animated.timing(baseAnimBackground, { toValue, ...config }),
+      Animated.timing(baseAnimContent, { toValue: toValue === 0 ? initialY : 0, ...config }),
+    ]).start;
+  };
+  return {
+    content,
+    backdrop,
+    showTransition: createTransition(1),
+    hideTransition: createTransition(0),
+  };
+};
+
+// NOTE: onDismiss is supports iOS only
+const useOnDismiss = (visible: boolean, onDismiss?: () => void) => {
+  const prevVisible = usePrevProp(visible);
+  useEffect(() => {
+    if (Platform.OS === 'ios') return;
+    if (prevVisible && !visible) onDismiss?.();
+  }, [prevVisible, visible]);
+};
+
+const usePrevProp = <T,>(prop: T) => {
+  const prev = useRef(prop);
+  const curr = useRef(prop);
+  useEffect(() => {
+    prev.current = curr.current;
+    curr.current = prop;
+  });
+  return prev.current;
+};
+
+const styles = createStyleSheet({
+  background: { flex: 1 },
+});
+
+export default Modal;

package/src/ui/Placeholder/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { conditionChaining } from '@sendbird/uikit-utils';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Button from '../Button';
+import Icon from '../Icon';
+import LoadingSpinner from '../LoadingSpinner';
+import Text from '../Text';
+
+type Props = {
+  loading?: boolean;
+
+  icon: keyof typeof Icon.Assets;
+  message?: string;
+  errorRetryLabel?: string;
+  onPressRetry?: () => void;
+};
+
+const Placeholder: React.FC<Props> = ({ icon, loading = false, message = '', errorRetryLabel, onPressRetry }) => {
+  const { colors } = useUIKitTheme();
+
+  // loading ? styles.containerLoading : errorRetryLabel ? styles.containerError : styles.container
+  return (
+    <View
+      style={conditionChaining(
+        [loading, errorRetryLabel],
+        [styles.containerLoading, styles.containerError, styles.container],
+      )}
+    >
+      {conditionChaining(
+        [loading],
+        [
+          <LoadingSpinner size={64} color={colors.ui.placeholder.default.none.highlight} />,
+          <Icon icon={icon} size={64} color={colors.ui.placeholder.default.none.content} />,
+        ],
+      )}
+      {Boolean(message) && !loading && (
+        <Text body3 color={colors.ui.placeholder.default.none.content}>
+          {message}
+        </Text>
+      )}
+      {Boolean(errorRetryLabel) && !loading && (
+        <Button
+          variant={'text'}
+          onPress={onPressRetry}
+          contentColor={colors.ui.placeholder.default.none.highlight}
+          icon={'refresh'}
+        >
+          {errorRetryLabel}
+        </Button>
+      )}
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    width: 200,
+    height: 100,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  containerError: {
+    width: 200,
+    height: 148,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  containerLoading: {
+    width: 200,
+    height: 100,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default Placeholder;

package/src/ui/Prompt/index.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Keyboard, Platform, TextInput as RNTextInput, View, useWindowDimensions } from 'react-native';
+
+import { NOOP } from '@sendbird/uikit-utils';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useHeaderStyle from '../../styles/useHeaderStyle';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Button from '../Button';
+import DialogBox from '../Dialog/DialogBox';
+import Modal from '../Modal';
+import Text from '../Text';
+import TextInput from '../TextInput';
+
+export type PromptItem = {
+  title: string;
+  placeholder?: string;
+  defaultValue?: string;
+  onSubmit?: (text: string) => void;
+  submitLabel?: string;
+  onCancel?: () => void;
+  cancelLabel?: string;
+};
+
+type Props = {
+  visible: boolean;
+  onHide: () => void;
+  onDismiss?: () => void;
+  autoFocus?: boolean;
+} & PromptItem;
+const Prompt: React.FC<Props> = ({
+  onDismiss,
+  visible,
+  onHide,
+  autoFocus = true,
+  title,
+  defaultValue = '',
+  placeholder = 'Enter',
+  onSubmit = NOOP,
+  onCancel = NOOP,
+  submitLabel = 'Submit',
+  cancelLabel = 'Cancel',
+}) => {
+  const { statusBarTranslucent } = useHeaderStyle();
+  const { colors } = useUIKitTheme();
+  const inputRef = useRef<RNTextInput>(null);
+  const { width, height } = useWindowDimensions();
+
+  const buttons = [
+    { text: cancelLabel, onPress: onCancel },
+    { text: submitLabel, onPress: () => onSubmit(text) },
+  ];
+
+  const [text, setText] = useState(defaultValue);
+
+  // FIXME: autoFocus trick with modal
+  // Android
+  // - InputProps.autoFocus is not trigger keyboard appearing.
+  // - InputRef.focus() is trigger keyboard appearing, but position of keyboard selection is always the start of text.
+  // iOS
+  // - InputProps.autoFocus is trigger weird UI behavior on landscape mode.
+  useEffect(() => {
+    if (autoFocus && visible) {
+      setTimeout(() => {
+        if (Platform.OS === 'android') inputRef.current?.blur();
+        inputRef.current?.focus();
+      }, 250);
+    }
+  }, [autoFocus, visible, `${width}-${height}`]);
+
+  return (
+    <Modal
+      enableKeyboardAvoid
+      disableBackgroundClose
+      onClose={onHide}
+      onDismiss={() => {
+        setText('');
+        onDismiss?.();
+      }}
+      statusBarTranslucent={statusBarTranslucent}
+      visible={visible}
+      backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}
+    >
+      <DialogBox style={styles.container}>
+        {Boolean(title) && (
+          <View style={styles.titleContainer}>
+            <Text h1 color={colors.ui.dialog.default.none.text} numberOfLines={1} style={{ flex: 1 }}>
+              {title}
+            </Text>
+          </View>
+        )}
+
+        <View style={styles.inputContainer}>
+          <TextInput
+            autoFocus={autoFocus && Platform.OS === 'android'}
+            ref={inputRef}
+            placeholder={placeholder}
+            variant={'underline'}
+            value={text}
+            onChangeText={setText}
+            style={{ paddingHorizontal: 0, paddingVertical: 10 }}
+          />
+        </View>
+
+        <View style={styles.buttonContainer}>
+          {buttons.map(({ text, onPress }, index) => {
+            return (
+              <Button
+                key={text + index}
+                variant={'text'}
+                style={styles.button}
+                contentColor={colors.ui.dialog.default.none.highlight}
+                onPress={() => {
+                  Keyboard.dismiss();
+                  try {
+                    onPress?.();
+                  } finally {
+                    onHide();
+                  }
+                }}
+              >
+                {text}
+              </Button>
+            );
+          })}
+        </View>
+      </DialogBox>
+    </Modal>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    paddingTop: 8,
+  },
+  titleContainer: {
+    marginBottom: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  inputContainer: {
+    paddingHorizontal: 24,
+    marginBottom: 12,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: 12,
+  },
+  button: {
+    marginLeft: 8,
+  },
+});
+
+export default Prompt;