@sendbird/uikit-react-native-foundation 2.3.0 → 2.4.1

package/lib/typescript/src/ui/OpenChannelPreview/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type Props = {
+    customCover?: React.ReactElement;
+    coverUrl: string;
+    title: string;
+    participantsCount?: number;
+    frozen?: boolean;
+};
+declare const OpenChannelPreview: ({ customCover, coverUrl, participantsCount, title, frozen }: Props) => JSX.Element;
+export default OpenChannelPreview;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -39,13 +39,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "2.3.0"
+    "@sendbird/uikit-utils": "2.4.1"
   },
   "devDependencies": {
     "@types/react": "*",
     "@types/react-native": "*",
     "react": "17.0.2",
-    "react-native": "0.67.4",
+    "react-native": "0.67.5",
     "react-native-builder-bob": "^0.18.0",
     "react-native-fast-image": "^8.5.11",
     "react-native-safe-area-context": "^3.3.2",
@@ -81,5 +81,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native-foundation"
   },
-  "gitHead": "a9bf41fd7919436db99f6cc3bacd0f8d791b7729"
+  "gitHead": "9ba7a005c941a3edd5b0f78d88d8cd1df6c280fc"
 }

package/src/components/Box/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+
+import { isFunction } from '@sendbird/uikit-utils';
+
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import type { UIKitColors, UIKitPalette } from '../../types';
+
+type BaseBoxProps = Pick<
+  ViewStyle,
+  | 'flex'
+  | 'flexShrink'
+  | 'flexGrow'
+  | 'flexDirection'
+  | 'alignItems'
+  | 'justifyContent'
+  | 'borderRadius'
+  | 'borderWidth'
+  | 'borderColor'
+  | 'borderBottomColor'
+  | 'borderBottomWidth'
+  | 'margin'
+  | 'marginHorizontal'
+  | 'marginVertical'
+  | 'marginLeft'
+  | 'marginRight'
+  | 'marginTop'
+  | 'marginBottom'
+  | 'padding'
+  | 'paddingHorizontal'
+  | 'paddingVertical'
+  | 'paddingLeft'
+  | 'paddingRight'
+  | 'paddingTop'
+  | 'paddingBottom'
+  | 'overflow'
+  | 'width'
+  | 'height'
+> & {
+  backgroundColor?: string | ((theme: { colors: UIKitColors; palette: UIKitPalette }) => string);
+};
+
+type BoxProps = BaseBoxProps & ViewProps;
+const Box = ({ style, children, ...props }: BoxProps) => {
+  const boxStyle = useBoxStyle(props);
+
+  return (
+    <View style={[boxStyle, style]} {...props}>
+      {children}
+    </View>
+  );
+};
+
+const useBoxStyle = (props: BaseBoxProps): StyleProp<ViewStyle> => {
+  const theme = useUIKitTheme();
+
+  const { backgroundColor, ...rest } = props;
+
+  return {
+    backgroundColor: isFunction(backgroundColor) ? backgroundColor(theme) : backgroundColor,
+    ...rest,
+  };
+};
+
+export default Box;

package/src/components/ImageWithPlaceholder/index.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+import { useForceUpdate } from '@sendbird/uikit-utils';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Box from '../Box';
+import Icon from '../Icon';
+import Image from '../Image';
+
+const useRetry = (hasError: boolean, retryCount = 5) => {
+  if (Platform.OS === 'android') return '';
+
+  const forceUpdate = useForceUpdate();
+  const retryCountRef = useRef(1);
+  const retryTimeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    if (hasError) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            forceUpdate();
+          }, retryCountRef.current * 5000);
+        }
+      };
+
+      return reloadReservation();
+    } else {
+      return clearTimeout(retryTimeoutRef.current);
+    }
+  }, [hasError]);
+
+  return retryCountRef.current;
+};
+
+type Props = {
+  source: number | { uri: string };
+  width?: number | string;
+  height?: number | string;
+  style?: StyleProp<ViewStyle>;
+};
+const ImageWithPlaceholder = (props: Props) => {
+  const { colors } = useUIKitTheme();
+  const [imageNotFound, setImageNotFound] = useState(false);
+
+  const key = useRetry(imageNotFound);
+  return (
+    <Box
+      style={[{ overflow: 'hidden', width: props.width, height: props.height }, props.style]}
+      backgroundColor={colors.onBackground04}
+    >
+      <Image
+        key={key}
+        source={props.source}
+        style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}
+        resizeMode={'cover'}
+        resizeMethod={'resize'}
+        onError={() => setImageNotFound(true)}
+        onLoad={() => setImageNotFound(false)}
+      />
+      {imageNotFound && (
+        <Icon
+          containerStyle={StyleSheet.absoluteFill}
+          icon={'thumbnail-none'}
+          size={48}
+          color={colors.onBackground02}
+        />
+      )}
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  hide: {
+    display: 'none',
+  },
+});
+
+export default ImageWithPlaceholder;

package/src/components/PressBox/index.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { useState } from 'react';
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
+import { Pressable, TouchableOpacity } from 'react-native';
+
+import { isFunction } from '@sendbird/uikit-utils';
+
+type PressBoxStateParams = {
+  pressed: boolean;
+};
+
+type Props = {
+  onPress?: (event: GestureResponderEvent) => void;
+  onLongPress?: (event: GestureResponderEvent) => void;
+  delayLongPress?: number;
+  activeOpacity?: number;
+  style?: StyleProp<ViewStyle> | ((state: PressBoxStateParams) => StyleProp<ViewStyle>);
+  children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);
+};
+
+export const DEFAULT_LONG_PRESS_DELAY = 350;
+
+const PressBox = (props: Props) => {
+  if (props.activeOpacity && props.activeOpacity < 1) return <PressBoxWithTouchableOpacity {...props} />;
+  return <PressBoxWithPressable {...props} />;
+};
+
+const PressBoxWithPressable = ({ children, ...props }: Props) => {
+  return (
+    <Pressable disabled={!props.onPress && !props.onLongPress} delayLongPress={DEFAULT_LONG_PRESS_DELAY} {...props}>
+      {(state) => (isFunction(children) ? children(state) : children)}
+    </Pressable>
+  );
+};
+
+const PressBoxWithTouchableOpacity = ({ children, style, ...props }: Props) => {
+  const [pressed, setPressed] = useState(false);
+  const state: PressBoxStateParams = { pressed };
+  return (
+    <TouchableOpacity
+      disabled={!props.onPress && !props.onLongPress}
+      delayLongPress={DEFAULT_LONG_PRESS_DELAY}
+      style={isFunction(style) ? style(state) : style}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      {...props}
+    >
+      {isFunction(children) ? children(state) : children}
+    </TouchableOpacity>
+  );
+};
+
+export default PressBox;

package/src/index.ts

@@ -2,10 +2,13 @@
 export { default as IconAssets } from './assets/icon';
 
 /** Component **/
+export { default as Box } from './components/Box';
 export { default as Divider } from './components/Divider';
 export { default as Icon } from './components/Icon';
 export { default as Image } from './components/Image';
+export { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';
 export { default as Modal } from './components/Modal';
+export { default as PressBox } from './components/PressBox';
 export { default as RegexText } from './components/RegexText';
 export { default as Switch } from './components/Switch';
 export { default as Text } from './components/Text';
@@ -24,7 +27,11 @@ export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } fr
 export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
-export { default as MenuBar, MenuBarProps } from './ui/MenuBar';
+export { default as MenuBar } from './ui/MenuBar';
+export type { MenuBarProps } from './ui/MenuBar';
+export { default as OpenChannelMessage } from './ui/OpenChannelMessage';
+export type { OpenChannelMessageProps } from './ui/OpenChannelMessage';
+export { default as OpenChannelPreview } from './ui/OpenChannelPreview';
 export { default as OutlinedButton } from './ui/OutlinedButton';
 export { default as Placeholder } from './ui/Placeholder';
 export { default as ProfileCard } from './ui/ProfileCard';