Skip to content

Commit

Permalink
Channel and Theming adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
arnautov-anton committed Feb 21, 2024
1 parent ff83826 commit 0274653
Show file tree
Hide file tree
Showing 11 changed files with 20 additions and 1,085 deletions.
7 changes: 1 addition & 6 deletions docusaurus/docs/React/basics/getting-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -123,14 +123,9 @@ const { client } = useChatContext();
The [`Channel`](../components/core-components/channel.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for an individual chat channel.
It provides five separate contexts to its children:

:::caution
`EmojiContext` has been removed in version `11.0.0`, see related release guides ([Introducing new reactions](../release-guides/upgrade-to-v11.mdx#introducing-new-reactions), [Dropping support for built-in `EmojiPicker`](../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojipicker) and [Dropping support for built-in `EmojiIndex`](../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojiindex)) to adjust your integration to this new change.
:::

- [`ChannelStateContext`](../components/contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`)
- [`ChannelActionContext`](../components/contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`)
- [`ComponentContext`](../components/contexts/component-context.mdx) - custom component UI overrides (ex: `Avatar` or `Message`)
- [`EmojiContext`](../components/contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`) - removed in `11.0.0`
- [`TypingContext`](../components/contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)

### ChannelList
Expand Down Expand Up @@ -188,7 +183,7 @@ Make sure to read ["Dropping support for built-in `EmojiPicker`"](../release-gui
In addition to the above referenced UI components, client instantiation, and user connection, you need little other code to get a fully functioning chat application up and running. See below for an example of the complete code.

:::note
Remember our [Theming](../guides/theming/overview.mdx) and [Customizing Components](../guides/customization/overview.mdx) sections in our guides. They offer you a lot of flexibility when adopting our SDK.
Remember our [Theming](../theming/introduction.mdx) and [Customizing Components](../guides/customization/overview.mdx) sections in our guides. They offer you a lot of flexibility when adopting our SDK.
:::

```tsx
Expand Down
6 changes: 3 additions & 3 deletions docusaurus/docs/React/basics/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ If you are new to our SDK it is best to go through a of our [tutorial](https://g
After that, our [getting started page](./getting-started.mdx) is a great next step.

:::tip
If you are integrating our SDK, please pay attention to our [Theming](../guides/theming/overview.mdx) and [Customizing Components](../guides/customization/overview.mdx) sections in our guides. We see that most of our users can get very far by utilizing the flexibility of our SDKs.
If you are integrating our SDK, please pay attention to our [Theming](../theming/introduction.mdx) and [Customizing Components](../guides/customization/overview.mdx) sections in our guides. We see that most of our users can get very far by utilizing the flexibility of our SDKs.
:::

## Architecture

A common pattern in the library is the use of context provider hooks (see [Contexts](./contexts/chat_context)). These custom hooks allow for effective value sharing between parent components and their children.
A common pattern in the library is the use of context provider hooks. These custom hooks allow for effective value sharing between parent components and their children.
This makes customization straightforward, as you can use our exported hooks in your custom components to receive the exact values needed, while also subscribing to context changes.

The left navigation will guide you to the various documentation sections for information on everything regarding our robust component library. Check out the instructions below for adding the library to your React project.
The left navigation will guide you to the various documentation sections for information on everything regarding our robust component library. Check out the instructions below for adding the library to your React project.
53 changes: 0 additions & 53 deletions docusaurus/docs/React/components/contexts/emoji-context.mdx

This file was deleted.

51 changes: 8 additions & 43 deletions docusaurus/docs/React/components/core-components/channel.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ It provides five separate contexts to its children:
- [`ChannelStateContext`](../contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`)
- [`ChannelActionContext`](../contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`)
- [`ComponentContext`](../contexts/component-context.mdx) - custom component UI overrides (ex: `Avatar` or `Message`)
- [`EmojiContext`](../contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`)
- [`TypingContext`](../contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)

:::note
Expand Down Expand Up @@ -259,9 +258,8 @@ const App = () => (

Custom action handler to override the default `channel.markRead` request function (advanced usage only). The function takes two arguments:


| Argument | Type | Description |
|---------------------------|-----------------------------------------|---------------------------------------------------------------------------------------------------------|
| ------------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| `channel` | `Channel` | The current channel object instance |
| `setChannelUnreadUiState` | `(state: ChannelUnreadUiState) => void` | Function that allows us to set the unread state for the components reflecting the unread message state. |

Expand Down Expand Up @@ -301,54 +299,21 @@ Custom UI component to override default edit message input.
| --------- | ---------------------------------------------------------------------------------- |
| component | <GHComponentLink text='EditMessageForm' path='/MessageInput/EditMessageForm.tsx'/> |

### Emoji (removed in `11.0.0`)

Custom UI component to override default `NimbleEmoji` from `emoji-mart`.

| Type |
| --------- |
| component |

### emojiData (removed in `11.0.0`)

Custom prop to override default `facebook.json` emoji data set from `emoji-mart`.

| Type |
| ------ |
| object |

### EmojiIcon (removed in `11.0.0`)

Custom UI component for emoji button in input.

| Type | Default |
| --------- | ----------------------------------------------------------------------- |
| component | <GHComponentLink text='EmojiIconSmall' path='/MessageInput/icons.tsx'/> |

### EmojiIndex (removed in `11.0.0`)

Custom search mechanism class to override default `NimbleEmojiIndex` class from `emoji-mart`.

| Type | Default |
| ----- | ----------------------------------------------------------------------------------------------------------------- |
| class | [NimbleEmojiIndex](https://github.com/missive/emoji-mart/blob/v3.0.1/src/utils/emoji-index/nimble-emoji-index.js) |

### emojiSearchIndex (available since `11.0.0`)
### emojiSearchIndex

Custom search mechanism instance or object to enable emoji autocomplete. See ["Dropping support for built-in `EmojiIndex`"](../../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojiindex) release guide for more information.
Custom search mechanism instance or object to enable emoji autocomplete.

| Type | Default |
| ------ | --------- |
| object | undefined |

### EmojiPicker (changed in `11.0.0`)
### EmojiPicker

Custom UI component to override default `NimblePicker` from `emoji-mart`. Markup structure changed in `11.0.0`, see ["Dropping support for built-in `EmojiPicker`"](../../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojipicker) release guide for more information.
Custom UI component to be rendered in the `MessageInput` component, see [Emoji Picker guide](../../guides/customization/emoji-picker.mdx) for more information.

| Version | Type | Default |
| ------- | --------- | -------------------------------------------------------------------------------------------------------- |
| >=4.0.0 | component | [NimblePicker](https://github.com/missive/emoji-mart/blob/v3.0.1/src/components/picker/nimble-picker.js) |
| ^11.0.0 | component | undefined |
| Type | Default |
| --------- | --------- |
| component | undefined |

### EmptyPlaceholder

Expand Down
6 changes: 0 additions & 6 deletions docusaurus/docs/React/components/core-components/overview.mdx

This file was deleted.

Loading

0 comments on commit 0274653

Please sign in to comment.