import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { ChatList } from '.';
import { Props } from './props';
import { chats } from '../../util/mocks';
export const Template = (args) => ;
# Chat List
The Chat List component is for listing all chats relevant to one user.
It stacks the ``, `` and `` components in a convenient way.
## Default
{Template.bind({})}
## Active Chat
You can specify the active chat with `activeChatId` and the corresponding ChatCard will be active.
{Template.bind({})}
## My Username
If you set the `username` prop, you can see which chats this User has notifications for.
{Template.bind({})}
## Is Loading
If the chats are not present yet, you can set `isLoading` to true and the chats will be loading.
{Template.bind({})}
## Has More Chats
If this User has more chats, set `hasMoreChats` prop to `true`. Then there will be a Chat Loader component at the bottom of the list.
{Template.bind({})}
## Event Hooks
Use event hooks with the `on*` props.
They let you run you own code when they occur / trigger.
console.log('Chat Click', id),
onChatFormSubmit: (data) => console.log('New Chat', data),
onChatLoaderShow: (id) => console.log('Load more chats!'),
}}
>
{Template.bind({})}
## Render Functions
You can render you own code instead of this component with the `render*` functions.
<>Your code here!,
}}
>
{Template.bind({})}
You can render you own code for sub-components within Chat List.
Chat Form: {props.title}
,
renderChatCard: (props) => Chat Card: {props.title}
,
style: {
maxWidth: '400px',
boxShadow: '0px 0px 3px 6px rgba(0, 0, 0, 0.1)',
maxHeight: '330px',
},
}}
>
{Template.bind({})}
## Custom Styles
Customize the look and feel with the `*Style` props.
{Template.bind({})}