stream-chat-react-native-core 9.3.1 → 9.4.0-beta.2

package/src/components/ui/Input/Input.tsx

@@ -52,23 +52,26 @@ export type InputProps = TextInputProps & {
   containerStyle?: StyleProp<ViewStyle>;
 };
 
-export const Input = ({
-  title,
-  description,
-  variant = 'outline',
-  LeadingIcon,
-  TrailingIcon,
-  editable = true,
-  state = 'default',
-  helperText = true,
-  errorMessage,
-  successMessage,
-  infoText,
-  onFocus,
-  onBlur,
-  containerStyle,
-  ...props
-}: InputProps) => {
+export const Input = React.forwardRef<TextInput, InputProps>(function Input(
+  {
+    title,
+    description,
+    variant = 'outline',
+    LeadingIcon,
+    TrailingIcon,
+    editable = true,
+    state = 'default',
+    helperText = true,
+    errorMessage,
+    successMessage,
+    infoText,
+    onFocus,
+    onBlur,
+    containerStyle,
+    ...props
+  },
+  ref,
+) {
   const [isFocused, setIsFocused] = useState(false);
   const {
     theme: { semantics },
@@ -111,9 +114,8 @@ export const Input = ({
             borderWidth: variant === 'outline' ? 1 : 0,
             borderColor: !editable
               ? semantics.borderUtilityDisabled
-              : // TODO: V9: This should go away as it's the same style. In a separate PR though.
-                isFocused
-                ? semantics.borderCoreDefault
+              : isFocused
+                ? semantics.borderUtilityActive
                 : semantics.borderCoreDefault,
           },
           containerStyle,
@@ -128,6 +130,7 @@ export const Input = ({
           />
         ) : null}
         <TextInput
+          ref={ref}
           accessibilityHint={description}
           accessibilityLabel={props.accessibilityLabel ?? title}
           accessibilityState={accessibilityState}
@@ -186,7 +189,7 @@ export const Input = ({
       ) : null}
     </View>
   );
-};
+});
 
 const useStyles = () => {
   const {

package/src/contexts/bottomSheetContext/BottomSheetContext.tsx

@@ -6,7 +6,32 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type BottomSheetContextValue = {
+  /**
+   * Callback that will safely close the modal while preserving animation
+   * timing and respecting actions finishing before the close is invoked.
+   *
+   * @param closeAnimationFinishedCallback {function} - a callback that is
+   * going to be invoked when the closing animation finishes (but not necessarily
+   * when the modal is actually dismissed)
+   * @returns void
+   */
   close: (closeAnimationFinishedCallback?: () => void) => void;
+  /**
+   * A callback that will safely dismiss the modal, while preserving animation timing
+   * and respecting actions finishing before the close is invoked. Very similar to `close`,
+   * however it takes an extra step to make sure that the modal is actually dismissed
+   * before its callback is invoked. This is mostly useful for iOS, where for certain
+   * libraries (i.e `react-native-image-picker`) you aren't able to open both a RN modal
+   * and its internal `UIImagePickerController` at the same time and you have to wait
+   * for `onDismiss` to be fired internally.
+   *
+   * It will work exactly the same as `close` for Android as this is not an issue there.
+   *
+   * @param closeAnimationFinishedCallback {function} - a callback that is
+   * going to be invoked when the dismissal of the modal finishes
+   * @returns void
+   */
+  dismiss: (dismissFinishedCallback?: () => void) => void;
   currentSnapIndex: SharedValue<number>;
   topSnapIndex: SharedValue<number>;
 };

package/src/contexts/channelAddMembersContext/ChannelAddMembersContext.tsx

@@ -0,0 +1,73 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { UserSearchSource } from 'stream-chat';
+
+import { useChatContext } from '..';
+import { SelectionStore } from '../../state-store/selection-store';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelAddMembersContextValue = {
+  selectionStore: SelectionStore;
+  searchSource: UserSearchSource;
+};
+
+export const ChannelAddMembersContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelAddMembersContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelAddMembersProvider = ({ children }: PropsWithChildren<unknown>) => {
+  const { client } = useChatContext();
+  const [selectionStore] = useState(() => new SelectionStore());
+  const [searchSource] = useState(() => {
+    const source = new UserSearchSource(
+      client,
+      { pageSize: 25, allowEmptySearchString: true, resetOnNewSearchQuery: false },
+      {
+        initialFilterConfig: {
+          $or: {
+            enabled: true,
+            generate: ({ searchQuery }) =>
+              searchQuery
+                ? {
+                    name: { $autocomplete: searchQuery },
+                  }
+                : {},
+          },
+        },
+      },
+    );
+    source.activate();
+    source.sort = [{ name: 1 }];
+    return source;
+  });
+
+  return (
+    <ChannelAddMembersContext.Provider value={{ selectionStore, searchSource }}>
+      {children}
+    </ChannelAddMembersContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelAddMembersContext = () => {
+  const contextValue = useContext(
+    ChannelAddMembersContext,
+  ) as unknown as ChannelAddMembersContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelAddMembersContext hook was called outside of the ChannelAddMembersContext provider. Render the add-members UI inside a ChannelAddMembersProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/channelDetailsContext/channelDetailsContext.tsx

@@ -0,0 +1,43 @@
+import React, { PropsWithChildren, useContext } from 'react';
+
+import { ChannelDetailsProps } from '../../components';
+
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelDetailsContextValue = ChannelDetailsProps;
+export const ChannelDetailsContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelDetailsContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelDetailsContextProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: ChannelDetailsContextValue;
+}>) => (
+  <ChannelDetailsContext.Provider value={value as unknown as ChannelDetailsContextValue}>
+    {children}
+  </ChannelDetailsContext.Provider>
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelDetailsContext = () => {
+  const contextValue = useContext(ChannelDetailsContext) as unknown as ChannelDetailsContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelDetailsContext hook was called outside of the ChannelDetailsContext provider. Render the ChannelDetails component (or its content) inside a ChannelDetailsContextProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/channelDetailsContext/index.ts

@@ -0,0 +1 @@
+export * from './channelDetailsContext';

package/src/contexts/channelEditDetailsContext/ChannelEditDetailsContext.tsx

@@ -0,0 +1,56 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel } from 'stream-chat';
+
+import { EditChannelDetailsStore } from '../../state-store/edit-channel-details-store';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelEditDetailsContextValue = {
+  store: EditChannelDetailsStore;
+};
+
+export const ChannelEditDetailsContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelEditDetailsContextValue,
+);
+
+/**
+ * Creates and provides an {@link EditChannelDetailsStore} snapshotted from the
+ * given channel. Mount this once per edit session — the store captures the
+ * channel's name/image at construction and does not track later WebSocket
+ * updates, so an inbound `channel.updated` does not clobber in-progress edits.
+ *
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelEditDetailsProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const [store] = useState(() => new EditChannelDetailsStore(channel));
+
+  return (
+    <ChannelEditDetailsContext.Provider value={{ store }}>
+      {children}
+    </ChannelEditDetailsContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelEditDetailsContext = () => {
+  const contextValue = useContext(
+    ChannelEditDetailsContext,
+  ) as unknown as ChannelEditDetailsContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelEditDetailsContext hook was called outside of the ChannelEditDetailsContext provider. Render the channel edit UI inside a ChannelEditDetailsProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/channelEditDetailsContext/index.ts

@@ -0,0 +1 @@
+export * from './ChannelEditDetailsContext';

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -5,8 +5,8 @@ import type { FlatList } from 'react-native-gesture-handler';
 
 import type { Channel } from 'stream-chat';
 
-import type { GetChannelActionItems } from '../../components/ChannelList/hooks/useChannelActionItems';
 import type { QueryChannels } from '../../components/ChannelList/hooks/usePaginatedChannels';
+import type { GetChannelActionItems } from '../../hooks/actions/useChannelActionItems';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';

package/src/contexts/componentsContext/defaultComponents.ts

@@ -27,6 +27,21 @@ import { AutoCompleteSuggestionHeader } from '../../components/AutoCompleteInput
 import { AutoCompleteSuggestionItem } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
 import { AutoCompleteSuggestionList } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import { InputView } from '../../components/AutoCompleteInput/InputView';
+import { ChannelDetailsContent } from '../../components/ChannelDetails/ChannelDetails';
+import {
+  ChannelAddMembers,
+  ChannelDetailsActionsSection,
+  ChannelDetailsActionItem,
+  ChannelDetailsMemberSection,
+  ChannelDetailsProfile,
+  ChannelDetailsNavHeader,
+  ChannelEditDetails,
+  ChannelEditImageSheet,
+  ChannelEditName,
+  ChannelMemberActionsSheet,
+  ChannelMemberItem,
+  ChannelMemberList,
+} from '../../components/ChannelDetails/components';
 import { ChannelListFooterLoadingIndicator } from '../../components/ChannelList/ChannelListFooterLoadingIndicator';
 import { ChannelListHeaderErrorIndicator } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
 import { ChannelListHeaderNetworkDownIndicator } from '../../components/ChannelList/ChannelListHeaderNetworkDownIndicator';
@@ -289,6 +304,21 @@ const components = {
   // Channel details
   ChannelDetailsHeader,
 
+  // Channel Details Screen
+  ChannelAddMembers,
+  ChannelDetailsActionsSection,
+  ChannelDetailsActionItem,
+  ChannelDetailsMemberSection,
+  ChannelDetailsProfile,
+  ChannelDetailsContent,
+  ChannelDetailsNavHeader,
+  ChannelEditDetails,
+  ChannelEditImageSheet,
+  ChannelEditName,
+  ChannelMemberActionsSheet,
+  ChannelMemberItem,
+  ChannelMemberList,
+
   // Thread
   ThreadMessageComposer: MessageComposer,
   ThreadListComponent,
@@ -327,6 +357,7 @@ const components = {
  */
 export interface OptionalComponentOverrides {
   AttachmentPickerIOSSelectMorePhotos?: React.ComponentType;
+  ChannelDetailsNavigationSection?: React.ComponentType;
   ChatLoadingIndicator?: React.ComponentType | null;
   CreatePollContent?: React.ComponentType;
   Input?: React.ComponentType<{

package/src/contexts/index.ts

@@ -29,6 +29,9 @@ export * from './threadsContext/ThreadListItemContext';
 export * from './translationContext';
 export * from './typingContext/TypingContext';
 export * from './utils/getDisplayName';
+export * from './channelDetailsContext';
+export * from './channelAddMembersContext/ChannelAddMembersContext';
+export * from './channelEditDetailsContext';
 export * from './pollContext';
 export * from './liveLocationManagerContext';
 export * from './audioPlayerContext/AudioPlayerContext';

package/src/contexts/ownCapabilitiesContext/OwnCapabilitiesContext.tsx

@@ -21,6 +21,7 @@ export const allOwnCapabilities = {
   sendReply: 'send-reply',
   sendTypingEvents: 'send-typing-events',
   updateAnyMessage: 'update-any-message',
+  updateChannelMembers: 'update-channel-members',
   updateOwnMessage: 'update-own-message',
   uploadFile: 'upload-file',
 };

package/src/contexts/themeContext/utils/theme.ts

@@ -185,6 +185,72 @@ export type Theme = {
       standardText: TextStyle;
     };
   };
+  channelDetails: {
+    container: ViewStyle;
+    scrollContent: ViewStyle;
+    header: {
+      container: ViewStyle;
+      title: TextStyle;
+    };
+    profile: {
+      container: ViewStyle;
+      heading: ViewStyle;
+      subtitle: TextStyle;
+      title: TextStyle;
+    };
+    sectionCard: ViewStyle;
+    actionItem: {
+      container: ViewStyle;
+      destructiveLabel: TextStyle;
+      iconWrapper: ViewStyle;
+      label: TextStyle;
+      trailingValue: TextStyle;
+    };
+    memberSection: {
+      confirmButton: ViewStyle;
+      footer: ViewStyle;
+      header: ViewStyle;
+      headerTitle: TextStyle;
+      viewAllLabel: TextStyle;
+    };
+    memberItem: {
+      container: ViewStyle;
+      name: TextStyle;
+      role: TextStyle;
+      status: TextStyle;
+    };
+    memberActionsSheet: {
+      actionsList: ViewStyle;
+      container: ViewStyle;
+      header: ViewStyle;
+    };
+    editImageSheet: {
+      actionsList: ViewStyle;
+      container: ViewStyle;
+      header: ViewStyle;
+      headerTitle: TextStyle;
+    };
+    modal: {
+      body: ViewStyle;
+      header: ViewStyle;
+      headerTitle: TextStyle;
+      root: ViewStyle;
+    };
+    addMembers: {
+      searchResultItem: {
+        alreadyMemberInfo: ViewStyle;
+        memberLabel: TextStyle;
+        userName: TextStyle;
+        userRow: ViewStyle;
+      };
+    };
+    editChannel: {
+      avatarSection: ViewStyle;
+      container: ViewStyle;
+      nameInput: ViewStyle;
+      uploadButton: ViewStyle;
+    };
+  };
   channelListSkeleton: {
     animationTime: number;
     avatar: ViewStyle;
@@ -210,6 +276,24 @@ export type Theme = {
     textContainer: ViewStyle;
     timestamp: ViewStyle;
   };
+  memberListSkeleton: {
+    animationTime: number;
+    avatar: ViewStyle;
+    container: ViewStyle;
+    content: ViewStyle;
+    subtitle: ViewStyle;
+    textContainer: ViewStyle;
+    title: ViewStyle;
+  };
+  userListSkeleton: {
+    animationTime: number;
+    avatar: ViewStyle;
+    container: ViewStyle;
+    content: ViewStyle;
+    subtitle: ViewStyle;
+    textContainer: ViewStyle;
+    title: ViewStyle;
+  };
   channelPreview: {
     container: ViewStyle;
     contentContainer: ViewStyle;
@@ -250,6 +334,10 @@ export type Theme = {
     container: ViewStyle;
     text: TextStyle;
   };
+  emptySearchResult: {
+    container: ViewStyle;
+    text: TextStyle;
+  };
   emptyStateIndicator: {
     channelContainer: ViewStyle;
     channelDetails: TextStyle;
@@ -990,6 +1078,10 @@ export type Theme = {
     };
   };
   screenPadding: number;
+  selectionCircle: {
+    circle: ViewStyle;
+    circleSelected: ViewStyle;
+  };
   spinner: ViewStyle;
   thread: {
     newThread: {
@@ -1138,6 +1230,72 @@ export const defaultTheme: Theme = {
       standardText: {},
     },
   },
+  channelDetails: {
+    container: {},
+    scrollContent: {},
+    header: {
+      container: {},
+      title: {},
+    },
+    profile: {
+      container: {},
+      heading: {},
+      subtitle: {},
+      title: {},
+    },
+    sectionCard: {},
+    actionItem: {
+      container: {},
+      destructiveLabel: {},
+      iconWrapper: {},
+      label: {},
+      trailingValue: {},
+    },
+    memberSection: {
+      confirmButton: {},
+      footer: {},
+      header: {},
+      headerTitle: {},
+      viewAllLabel: {},
+    },
+    memberItem: {
+      container: {},
+      name: {},
+      role: {},
+      status: {},
+    },
+    memberActionsSheet: {
+      actionsList: {},
+      container: {},
+      header: {},
+    },
+    editImageSheet: {
+      actionsList: {},
+      container: {},
+      header: {},
+      headerTitle: {},
+    },
+    modal: {
+      body: {},
+      header: {},
+      headerTitle: {},
+      root: {},
+    },
+    addMembers: {
+      searchResultItem: {
+        alreadyMemberInfo: {},
+        memberLabel: {},
+        userName: {},
+        userRow: {},
+      },
+    },
+    editChannel: {
+      avatarSection: {},
+      container: {},
+      nameInput: {},
+      uploadButton: {},
+    },
+  },
   channelListSkeleton: {
     animationTime: 1000, // in milliseconds
     avatar: {},
@@ -1163,6 +1321,24 @@ export const defaultTheme: Theme = {
     textContainer: {},
     timestamp: {},
   },
+  memberListSkeleton: {
+    animationTime: 1000, // in milliseconds
+    avatar: {},
+    container: {},
+    content: {},
+    subtitle: {},
+    textContainer: {},
+    title: {},
+  },
+  userListSkeleton: {
+    animationTime: 1000, // in milliseconds
+    avatar: {},
+    container: {},
+    content: {},
+    subtitle: {},
+    textContainer: {},
+    title: {},
+  },
   channelPreview: {
     container: {},
     contentContainer: {},
@@ -1203,6 +1379,10 @@ export const defaultTheme: Theme = {
     container: {},
     text: {},
   },
+  emptySearchResult: {
+    container: {},
+    text: {},
+  },
   emptyStateIndicator: {
     channelContainer: {},
     channelDetails: {},
@@ -1921,6 +2101,10 @@ export const defaultTheme: Theme = {
     },
   },
   screenPadding: 16,
+  selectionCircle: {
+    circle: {},
+    circleSelected: {},
+  },
   spinner: {},
   thread: {
     newThread: {