Merge pull request #15 from sendbird/feature/foundation

[UIKIT-1588] Prompt [UIKIT-1582] Badge [UIKIT-1593] BottomSheet
sendbird · Mar 3, 2022 · 9f18b22 · 9f18b22
2 parents f51917d + c208710
commit 9f18b22
Show file tree

Hide file tree

Showing 26 changed files with 985 additions and 178 deletions.
diff --git a/packages/chat-react-hooks/src/types.ts b/packages/chat-react-hooks/src/types.ts
@@ -2,12 +2,6 @@ import type Sendbird from 'sendbird';
 
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 
-declare module 'sendbird' {
- interface SendBirdInstance {
- get isCacheEnabled(): boolean;
- }
-}
-
 export interface CustomQueryInterface<Data> {
  isLoading: boolean;
  next: () => Promise<Data[]>;

diff --git a/...t-react-native-core/src/domain/groupChannelList/component/GroupChannelListChannelMenu.tsx b/...t-react-native-core/src/domain/groupChannelList/component/GroupChannelListChannelMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import { ActionMenu } from '@sendbird/uikit-react-native-foundation';
 
@@ -12,15 +12,22 @@ const GroupChannelListChannelMenu: React.FC<GroupChannelListProps['ChannelMenu']
  const { LABEL } = useLocalization();
  const { currentUser } = useSendbirdChat();
 
+ const [visible, setVisible] = useState(false);
+
+ useEffect(() => {
+ if (channelMenu.selectedChannel) setVisible(true);
+ }, [channelMenu.selectedChannel]);
+
  return (
  <ActionMenu
- visible={Boolean(channelMenu.selectedChannel)}
- onHide={channelMenu.selectChannel}
+ visible={visible}
+ onHide={() => setVisible(false)}
+ onDismiss={channelMenu.selectChannel}
  title={
  channelMenu.selectedChannel &&
  LABEL.GROUP_CHANNEL_LIST.CHANNEL_MENU.TITLE(currentUser?.userId ?? '', channelMenu.selectedChannel)
  }
- items={[
+ menuItems={[
  {
  title: LABEL.GROUP_CHANNEL_LIST.CHANNEL_MENU.MENU_NOTIFICATIONS(channelMenu.selectedChannel),
  onPress: async () => {

diff --git a/...-react-native-core/src/domain/groupChannelList/component/GroupChannelListTypeSelector.tsx b/...-react-native-core/src/domain/groupChannelList/component/GroupChannelListTypeSelector.tsx
@@ -76,7 +76,7 @@ const GroupChannelListTypeSelector: React.FC<GroupChannelListProps['TypeSelector
  };
 
  return (
- <Modal visible={visible} onPressBackground={hide} onRequestClose={hide} statusBarTranslucent={statusBarTranslucent}>
+ <Modal visible={visible} onClose={hide} statusBarTranslucent={statusBarTranslucent}>
  {renderHeader()}
  </Modal>
  );

diff --git a/packages/uikit-react-native-foundation/src/index.tsx b/packages/uikit-react-native-foundation/src/index.tsx
@@ -6,15 +6,19 @@ export { default as LightUIKitTheme } from './theme/LightUIKitTheme';
 export { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';
 
 /** UI **/
-export { default as Icon } from './ui/Icon';
-export { default as Text } from './ui/Text';
-export { default as Modal } from './ui/Modal';
+export { default as ActionMenu } from './ui/ActionMenu';
 export { default as Alert } from './ui/Alert';
+export { default as Avatar } from './ui/Avatar';
+export { default as Badge } from './ui/Badge';
+export { default as BottomSheet } from './ui/BottomSheet';
 export { default as Button } from './ui/Button';
+export { DialogProvider, useActionMenu, useAlert, usePrompt } from './ui/Dialog';
 export { default as Header } from './ui/Header';
-export { default as Avatar } from './ui/Avatar';
-export { default as ActionMenu } from './ui/ActionMenu';
-export { DialogProvider, useDialog, useAlert, useActionMenu } from './ui/Dialog';
+export { default as Icon } from './ui/Icon';
+export { default as Modal } from './ui/Modal';
+export { default as Prompt } from './ui/Prompt';
+export { default as Text } from './ui/Text';
+export { default as TextInput } from './ui/TextInput';
 
 /** Styles **/
 export { default as useHeaderStyle } from './styles/useHeaderStyle';

diff --git a/packages/uikit-react-native-foundation/src/theme/DarkUIKitTheme.ts b/packages/uikit-react-native-foundation/src/theme/DarkUIKitTheme.ts
@@ -74,16 +74,44 @@ const DarkUIKitTheme: UIKitTheme = {
  },
  },
  },
- // input: {
- // typeDefault: {
- // text: Palette.onBackgroundDark01,
- // background: Palette.background400,
- // placeholder: {
- // active: Palette.onBackgroundDark03,
- // disabled: Palette.onBackgroundDark04,
- // },
- // },
- // },
+ input: {
+ default: {
+ active: {
+ text: Palette.onBackgroundDark01,
+ placeholder: Palette.onBackgroundDark03,
+ background: Palette.background400,
+ highlight: Palette.transparent,
+ },
+ disabled: {
+ text: Palette.onBackgroundDark04,
+ placeholder: Palette.onBackgroundDark04,
+ background: Palette.background400,
+ highlight: Palette.transparent,
+ },
+ },
+ underline: {
+ active: {
+ text: Palette.onBackgroundDark01,
+ placeholder: Palette.onBackgroundDark03,
+ background: Palette.transparent,
+ highlight: Palette.primary200,
+ },
+ disabled: {
+ text: Palette.onBackgroundDark04,
+ placeholder: Palette.onBackgroundDark04,
+ background: Palette.transparent,
+ highlight: Palette.onBackgroundDark04,
+ },
+ },
+ },
+ badge: {
+ default: {
+ none: {
+ text: Palette.background600,
+ background: Palette.primary200,
+ },
+ },
+ },
  },
  },
 };

diff --git a/packages/uikit-react-native-foundation/src/theme/LightUIKitTheme.ts b/packages/uikit-react-native-foundation/src/theme/LightUIKitTheme.ts
@@ -74,17 +74,45 @@ const LightUIKitTheme: UIKitTheme = {
  },
  },
  },
+ input: {
+ default: {
+ active: {
+ text: Palette.onBackgroundLight01,
+ placeholder: Palette.onBackgroundLight03,
+ background: Palette.background100,
+ highlight: Palette.transparent,
+ },
+ disabled: {
+ text: Palette.onBackgroundLight04,
+ placeholder: Palette.onBackgroundLight04,
+ background: Palette.background100,
+ highlight: Palette.transparent,
+ },
+ },
+ underline: {
+ active: {
+ text: Palette.onBackgroundLight01,
+ placeholder: Palette.onBackgroundLight03,
+ background: Palette.transparent,
+ highlight: Palette.primary300,
+ },
+ disabled: {
+ text: Palette.onBackgroundLight04,
+ placeholder: Palette.onBackgroundLight04,
+ background: Palette.transparent,
+ highlight: Palette.onBackgroundLight04,
+ },
+ },
+ },
+ badge: {
+ default: {
+ none: {
+ text: Palette.background50,
+ background: Palette.primary300,
+ },
+ },
+ },
  },
- // input: {
- // typeDefault: {
- // text: Palette.onBackgroundLight01,
- // background: Palette.background100,
- // placeholder: {
- // active: Palette.onBackgroundLight03,
- // disabled: Palette.onBackgroundLight04,
- // },
- // },
- // },
  },
 };
 

diff --git a/packages/uikit-react-native-foundation/src/types.ts b/packages/uikit-react-native-foundation/src/types.ts
@@ -28,7 +28,7 @@ export interface UIKitTheme extends AppearanceHelper {
  typography: Typography;
 }
 
-type Component = 'Header' | 'Button' | 'Dialog';
+type Component = 'Header' | 'Button' | 'Dialog' | 'Input' | 'Badge';
 type GetColorTree<
  Tree extends {
  Variant: {
@@ -48,19 +48,22 @@ export type ComponentColorTree = GetColorTree<{
  Header: 'nav';
  Button: 'contained' | 'text';
  Dialog: 'default';
- Input: 'default';
+ Input: 'default' | 'underline';
+ Badge: 'default';
  };
  State: {
  Header: 'none';
  Button: 'enabled' | 'pressed' | 'disabled';
  Dialog: 'none';
  Input: 'active' | 'disabled';
+ Badge: 'none';
  };
  ColorPart: {
  Header: 'background' | 'borderBottom';
  Button: 'background' | 'content';
  Dialog: 'background' | 'text' | 'message' | 'highlight' | 'destructive';
- Input: 'text' | 'background' | 'placeholder';
+ Input: 'text' | 'placeholder' | 'background' | 'highlight';
+ Badge: 'text' | 'background';
  };
 }>;
 type ComponentColors<T extends Component> = {
@@ -99,7 +102,8 @@ export type UIKitColors = {
  header: ComponentColors<'Header'>;
  button: ComponentColors<'Button'>;
  dialog: ComponentColors<'Dialog'>;
- // input: ComponentColors<'Input'>;
+ input: ComponentColors<'Input'>;
+ badge: ComponentColors<'Badge'>;
  };
 };
 

diff --git a/packages/uikit-react-native-foundation/src/ui/ActionMenu/index.tsx b/packages/uikit-react-native-foundation/src/ui/ActionMenu/index.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { ActivityIndicator, Pressable, View } from 'react-native';
+import React from 'react';
+import { Pressable, View } from 'react-native';
 
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
@@ -9,34 +9,30 @@ import Modal from '../Modal';
 import Text from '../Text';
 
 export type ActionMenuItem = {
- title: string;
- onPress?: () => void;
+ title?: string;
+ menuItems: { title: string; onPress?: () => void }[];
 };
+
 type Props = {
  visible: boolean;
  onHide: () => void;
  onError?: (error: unknown) => void;
  onDismiss?: () => void;
-
- title?: string;
- items: ActionMenuItem[];
-};
-const ActionMenu: React.FC<Props> = ({ visible, onHide, onError, onDismiss, title, items }) => {
+} & ActionMenuItem;
+const ActionMenu: React.FC<Props> = ({ visible, onHide, onError, onDismiss, title, menuItems }) => {
  const { statusBarTranslucent } = useHeaderStyle();
  const { colors } = useUIKitTheme();
- const [pending, setPending] = useState(false);
-
- const _onHide = () => {
- if (!pending) onHide();
- };
+ // const [pending, setPending] = useState(false);
+ // const _onHide = () => {
+ // if (!pending) onHide();
+ // };
 
  return (
  <Modal
+ onClose={onHide}
  onDismiss={onDismiss}
  statusBarTranslucent={statusBarTranslucent}
  visible={visible}
- onRequestClose={_onHide}
- onPressBackground={_onHide}
  backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}
  >
  <DialogBox>
@@ -45,35 +41,43 @@ const ActionMenu: React.FC<Props> = ({ visible, onHide, onError, onDismiss, titl
  h1
  color={colors.ui.dialog.default.none.text}
  numberOfLines={1}
- style={{ maxWidth: pending ? '86%' : '100%' }}
+ style={{ flex: 1 }}
+ // style={{ maxWidth: pending ? '86%' : '100%' }}
  >
  {title}
  </Text>
- {pending && (
+ {/*{pending && (
  <ActivityIndicator
  size={'small'}
  color={colors.ui.dialog.default.none.highlight}
  style={{ width: '10%', marginLeft: '4%' }}
  />
- )}
+ )}*/}
  </View>
  <View style={styles.buttonContainer}>
- {items.map(({ title, onPress }, index) => {
+ {menuItems.map(({ title, onPress }, index) => {
  return (
  <Pressable
  key={title + index}
  style={styles.button}
- disabled={pending}
+ // disabled={pending}
  onPress={async () => {
- setPending(true);
  try {
- await onPress?.();
- onHide();
- } catch (e: unknown) {
+ onPress?.();
+ } catch (e) {
  onError?.(e);
  } finally {
- setPending(false);
+ onHide();
  }
+ // setPending(true);
+ // try {
+ // await onPress?.();
+ // onHide();
+ // } catch (e: unknown) {
+ // onError?.(e);
+ // } finally {
+ // setPending(false);
+ // }
  }}
  >
  <Text subtitle2 color={colors.ui.dialog.default.none.text} numberOfLines={1}>

diff --git a/packages/uikit-react-native-foundation/src/ui/Alert/index.tsx b/packages/uikit-react-native-foundation/src/ui/Alert/index.tsx
@@ -18,11 +18,8 @@ export type AlertItem = {
 type Props = {
  visible: boolean;
  onHide: () => void;
- title: AlertItem['title'];
- message: AlertItem['message'];
- buttons: AlertItem['buttons'];
  onDismiss?: () => void;
-};
+} & AlertItem;
 const Alert: React.FC<Props> = ({
  onDismiss,
  visible,
@@ -36,11 +33,10 @@ const Alert: React.FC<Props> = ({
 
  return (
  <Modal
+ onClose={onHide}
  onDismiss={onDismiss}
  statusBarTranslucent={statusBarTranslucent}
  visible={visible}
- onRequestClose={onHide}
- onPressBackground={onHide}
  backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}
  >
  <DialogBox style={styles.container}>