Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
stream-ci-bot committed Aug 30, 2024
1 parent 8c555b2 commit 957347a
Show file tree
Hide file tree
Showing 2 changed files with 206 additions and 0 deletions.
102 changes: 102 additions & 0 deletions docusaurus/docs/iOS/swiftui/channel-list-components/helper-views.md
Original file line number Diff line number Diff line change
Expand Up @@ -263,3 +263,105 @@ var body: some Scene {
}
}
```

## Search Results View

You can change the search results view with your own implementation. In order to do that, you should implement the following method:

```swift
func makeSearchResultsView(
selectedChannel: Binding<ChannelSelectionInfo?>,
searchResults: [ChannelSelectionInfo],
loadingSearchResults: Bool,
onlineIndicatorShown: @escaping (ChatChannel) -> Bool,
channelNaming: @escaping (ChatChannel) -> String,
imageLoader: @escaping (ChatChannel) -> UIImage,
onSearchResultTap: @escaping (ChannelSelectionInfo) -> Void,
onItemAppear: @escaping (Int) -> Void
) -> some View {
CustomSearchResultsView(
factory: self,
selectedChannel: selectedChannel,
searchResults: searchResults,
loadingSearchResults: loadingSearchResults,
onlineIndicatorShown: onlineIndicatorShown,
channelNaming: channelNaming,
imageLoader: imageLoader,
onSearchResultTap: onSearchResultTap,
onItemAppear: onItemAppear
)
}
```

In case you want to use the default implementation, you can still customize the individual search result items, with the following method:

```swift
func makeChannelListSearchResultItem(
searchResult: ChannelSelectionInfo,
onlineIndicatorShown: Bool,
channelName: String,
avatar: UIImage,
onSearchResultTap: @escaping (ChannelSelectionInfo) -> Void,
channelDestination: @escaping (ChannelSelectionInfo) -> ChannelDestination
) -> some View {
SearchResultItem(
searchResult: searchResult,
onlineIndicatorShown: onlineIndicatorShown,
channelName: channelName,
avatar: avatar,
onSearchResultTap: onSearchResultTap,
channelDestination: channelDestination
)
}
```

## Navigation Bar display mode

You can change the display mode of the navigation bar to be either `large`, `automatic` or `inline` (which is the default value). To do that, you should implement the following method:

```swift
func navigationBarDisplayMode() -> NavigationBarItem.TitleDisplayMode {
.inline
}
```

## More Channel Actions View

In the default implementation, when you press on the more button of a channel list item, a view with the actions about the channel is shown (muting, deleting and more). You can provide your own implementation of this view, with the following method:

```swift
func makeMoreChannelActionsView(
for channel: ChatChannel,
swipedChannelId: Binding<String?>,
onDismiss: @escaping () -> Void,
onError: @escaping (Error) -> Void
) -> some View {
MoreChannelActionsView(
channel: channel,
channelActions: supportedMoreChannelActions(
for: channel,
onDismiss: onDismiss,
onError: onError
),
swipedChannelId: swipedChannelId,
onDismiss: onDismiss
)
}
```

Additionally, you can customize only the presented actions in the view above, by implementing the following method instead:

```swift
func supportedMoreChannelActions(
for channel: ChatChannel,
onDismiss: @escaping () -> Void,
onError: @escaping (Error) -> Void
) -> [ChannelAction] {
ChannelAction.defaultActions(
for: channel,
chatClient: chatClient,
onDismiss: onDismiss,
onError: onError
)
}
```
104 changes: 104 additions & 0 deletions docusaurus/docs/iOS/swiftui/message-components/attachments.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,110 @@ var body: some Scene {

These are all the steps needed to change the default SDK view with your custom one.

### Image Attachment View

Similarly, you can change the other types of attachments view in the SDK. To update the view that presents images, you need to implement the following method:

```swift
func makeImageAttachmentView(
for message: ChatMessage,
isFirst: Bool,
availableWidth: CGFloat,
scrolledId: Binding<String?>
) -> some View {
CustomImageAttachment(
factory: self,
message: message,
width: availableWidth,
isFirst: isFirst,
scrolledId: scrolledId
)
}
```

### Giphy Attachment View

To update the view that presents gifs, you should implement the following method:

```swift
func makeGiphyAttachmentView(
for message: ChatMessage,
isFirst: Bool,
availableWidth: CGFloat,
scrolledId: Binding<String?>
) -> some View {
GiphyAttachmentView(
factory: self,
message: message,
width: availableWidth,
isFirst: isFirst,
scrolledId: scrolledId
)
}
```

### Link Attachment View

You can also change the way links are displayed in the message list, by implementing the following method:

```swift
func makeLinkAttachmentView(
for message: ChatMessage,
isFirst: Bool,
availableWidth: CGFloat,
scrolledId: Binding<String?>
) -> some View {
CustomLinkAttachmentView(
factory: self,
message: message,
width: availableWidth,
isFirst: isFirst,
scrolledId: scrolledId
)
}
```

### File Attachment View

File attachments can be customized by implementing the method below:

```swift
func makeFileAttachmentView(
for message: ChatMessage,
isFirst: Bool,
availableWidth: CGFloat,
scrolledId: Binding<String?>
) -> some View {
CustomFileAttachmentsView(
factory: self,
message: message,
width: availableWidth,
isFirst: isFirst,
scrolledId: scrolledId
)
}
```

### Video Attachments

To replace the way video attachments are presented, you need to provide your own implementation of this method:

```swift
func makeVideoAttachmentView(
for message: ChatMessage,
isFirst: Bool,
availableWidth: CGFloat,
scrolledId: Binding<String?>
) -> some View {
CustomVideoAttachmentsView(
factory: self,
message: message,
width: availableWidth,
scrolledId: scrolledId
)
}
```

## Handling Custom Attachments

You can go a step further and introduce your own custom attachments with their corresponding custom views. Use-cases can be workout attachments, food delivery, money sending and anything else that might be supported within your apps.
Expand Down

0 comments on commit 957347a

Please sign in to comment.