This repository was archived by the owner on Mar 4, 2020. It is now read-only.
feat(Chat): add different chat item types #255
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,62 @@ | ||
| import React from 'react' | ||
| import { Chat, Divider } from '@stardust-ui/react' | ||
|
|
||
| const janeAvatar = { | ||
| image: 'public/images/avatar/small/ade.jpg', | ||
| status: { color: 'green', icon: 'check' }, | ||
| } | ||
|
|
||
| const items = [ | ||
| { | ||
| content: ( | ||
| <Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" mine /> | ||
| ), | ||
| }, | ||
| { | ||
| content: ( | ||
| <Chat.Message | ||
| content="Hi" | ||
| author="Jane Doe" | ||
| timestamp="Yesterday, 10:15 PM" | ||
| avatar={janeAvatar} | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| content: ( | ||
| <Chat.Message | ||
| content="Would you like to grab a lunch?" | ||
| author="John Doe" | ||
| timestamp="Yesterday, 10:16 PM" | ||
| mine | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| content: ( | ||
| <Chat.Message | ||
| content="Sure! Let's try the new place downtown" | ||
| author="Jane Doe" | ||
| timestamp="Yesterday, 10:15 PM" | ||
| avatar={janeAvatar} | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| content: <Divider content="Today" type="primary" important />, | ||
| }, | ||
| { | ||
| content: ( | ||
| <Chat.Message | ||
| content="Let's have a call" | ||
| author="John Doe" | ||
| timestamp="Today, 11:15 PM" | ||
| mine | ||
| /> | ||
| ), | ||
| }, | ||
| ] | ||
|
|
||
| const ChatExample = () => <Chat items={items} /> | ||
|
|
||
| export default ChatExample |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from 'react' | ||
| import { Chat, Divider } from '@stardust-ui/react' | ||
|
|
||
| const janeAvatar = { | ||
| image: 'public/images/avatar/small/ade.jpg', | ||
| status: { color: 'green', icon: 'check' }, | ||
| } | ||
|
|
||
| const ChatExample = () => ( | ||
| <Chat> | ||
| <Chat.Item> | ||
| <Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" mine /> | ||
| </Chat.Item> | ||
| <Chat.Item> | ||
| <Chat.Message | ||
| content="Hi" | ||
| author="Jane Doe" | ||
| timestamp="Yesterday, 10:15 PM" | ||
| avatar={janeAvatar} | ||
| /> | ||
| </Chat.Item> | ||
| <Chat.Item> | ||
| <Chat.Message | ||
| content="Would you like to grab a lunch?" | ||
| author="John Doe" | ||
| timestamp="Yesterday, 10:16 PM" | ||
| mine | ||
| /> | ||
| </Chat.Item> | ||
| <Chat.Item> | ||
| <Chat.Message | ||
| content="Sure! Let's try the new place downtown" | ||
| author="Jane Doe" | ||
| timestamp="Yesterday, 10:15 PM" | ||
| avatar={janeAvatar} | ||
| /> | ||
| </Chat.Item> | ||
| <Chat.Item> | ||
| <Divider content="Today" type="primary" important /> | ||
| </Chat.Item> | ||
| <Chat.Item> | ||
| <Chat.Message | ||
| content="Let's have a call" | ||
| author="John Doe" | ||
| timestamp="Today, 11:15 PM" | ||
| mine | ||
| /> | ||
| </Chat.Item> | ||
| </Chat> | ||
| ) | ||
|
|
||
| export default ChatExample | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,10 @@ | ||
| import React from 'react' | ||
| import Types from './Types' | ||
|
|
||
| const ChatExamples = () => ( | ||
| <div> | ||
| <Types /> | ||
| </div> | ||
| ) | ||
|
|
||
| export default ChatExamples |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import * as React from 'react' | ||
| import * as PropTypes from 'prop-types' | ||
|
|
||
| import { | ||
| createShorthandFactory, | ||
| customPropTypes, | ||
| IRenderResultConfig, | ||
| UIComponent, | ||
| } from '../../lib' | ||
| import { ComponentPartStyle, ComponentVariablesInput } from '../../../types/theme' | ||
| import { Extendable, ReactChildren } from '../../../types/utils' | ||
| import childrenExist from '../../lib/childrenExist' | ||
|
|
||
| export interface IChatItemProps { | ||
| as?: any | ||
| content?: React.ReactNode | ||
| children?: ReactChildren | ||
| className?: string | ||
| styles?: ComponentPartStyle | ||
| variables?: ComponentVariablesInput | ||
| } | ||
|
|
||
| class ChatItem extends UIComponent<Extendable<IChatItemProps>, any> { | ||
| static className = 'ui-chat__item' | ||
|
|
||
| static create: Function | ||
|
|
||
| static displayName = 'ChatItem' | ||
|
|
||
| static propTypes = { | ||
| /** An element type to render as (string or function). */ | ||
| as: customPropTypes.as, | ||
|
Contributor
There was a problem hiding this comment. nit: description for this prop is missing (as well s for a few other components of this PR, like
Contributor
Author
There was a problem hiding this comment. It's not intentional, will provide description for all prop types in the components added/changed in this PR. |
||
|
|
||
| /** Child content. */ | ||
| children: PropTypes.node, | ||
|
|
||
| /** Additional CSS class name(s) to apply. */ | ||
| className: PropTypes.string, | ||
|
|
||
| /** Custom styles to be applied for component. */ | ||
| styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), | ||
|
|
||
| /** Custom variables to be applied for component. */ | ||
| variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), | ||
| } | ||
|
|
||
| static defaultProps = { | ||
| as: 'li', | ||
| } | ||
|
|
||
| renderComponent({ ElementType, classes, rest }: IRenderResultConfig<IChatItemProps>) { | ||
| const { children, content } = this.props | ||
|
|
||
| return ( | ||
| <ElementType {...rest} className={classes.root}> | ||
|
|
||
| {childrenExist(children) ? children : content} | ||
| </ElementType> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| ChatItem.create = createShorthandFactory(ChatItem, content => ({ content })) | ||
|
|
||
| export default ChatItem | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| export { default } from './Chat' | ||
| export { default as ChatItem } from './ChatItem' | ||
| export { default as ChatMessage } from './ChatMessage' |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
shorthand API currently is not working correctly in docs examples - the problem is apparent if one would try to click on 'Shorthand API' button:
Do we really want to dismiss shorthand case for
Chat? This seems to be confusing, as by looking onChat's implementation it is clearly visible thatitemsprop is exposed - thus, it is possible to utilize shorthand advantages for this component. More than that, it seems that we won't be able to get rid of Shorthand API support, due to in this case there won't be clear mechanisms for handlingChatcomponent's accessibility concerns.