Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit 4fb0e96

Browse files
bmdalexbmdalex
committed
implemented gutterPosition
1 parent e791f49 commit 4fb0e96

File tree

7 files changed

+43
-40
lines changed

7 files changed

+43
-40
lines changed

‎docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ const janeAvatar = {
88

99
const items = [
1010
{
11-
mine: true,
1211
content: (
1312
<Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" mine />
1413
),
1514
key: 'message-id-1',
1615
},
1716
{
17+
gutterPosition: 'start',
1818
gutter: { content: <Avatar {...janeAvatar} /> },
1919
content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />,
2020
key: 'message-id-2',
@@ -24,7 +24,6 @@ const items = [
2424
key: 'message-id-3',
2525
},
2626
{
27-
mine: true,
2827
content: (
2928
<Chat.Message
3029
content="Would you like to grab a lunch?"
@@ -36,6 +35,7 @@ const items = [
3635
key: 'message-id-4',
3736
},
3837
{
38+
gutterPosition: 'start',
3939
gutter: { content: <Avatar {...janeAvatar} /> },
4040
content: (
4141
<Chat.Message
@@ -51,7 +51,6 @@ const items = [
5151
key: 'message-id-6',
5252
},
5353
{
54-
mine: true,
5554
content: (
5655
<Chat.Message
5756
content="Let's have a call"

‎docs/src/examples/components/Chat/Types/ChatExample.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ const janeAvatar = {
99
const ChatExample = () => (
1010
<Chat>
1111
<Chat.Item
12-
mine
1312
content={
1413
<Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" mine />
1514
}
1615
/>
1716
<Chat.Item
17+
gutterPosition="start"
1818
gutter={
1919
<Chat.Gutter>
2020
<Avatar {...janeAvatar} />
@@ -24,7 +24,7 @@ const ChatExample = () => (
2424
/>
2525
<Chat.Item content={<Chat.Message content="What's up?" />} />
2626
<Chat.Item
27-
mine
27+
gutterPosition="start"
2828
content={
2929
<Chat.Message
3030
content="Would you like to grab a lunch?"
@@ -35,6 +35,7 @@ const ChatExample = () => (
3535
}
3636
/>
3737
<Chat.Item
38+
gutterPosition="start"
3839
gutter={
3940
<Chat.Gutter>
4041
<Avatar {...janeAvatar} />
@@ -52,7 +53,6 @@ const ChatExample = () => (
5253
<Divider content="Today" color="primary" important />
5354
</Chat.Item>
5455
<Chat.Item
55-
mine
5656
content={
5757
<Chat.Message
5858
content="Let's have a call"

‎docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ const ChatMessageExampleStyled = () => (
7070
<Chat
7171
items={[
7272
{
73-
mine: true,
7473
content: (
7574
<Chat.Message
7675
content="Hey, do you know any restaurants with good food?"
@@ -83,6 +82,7 @@ const ChatMessageExampleStyled = () => (
8382
},
8483
{
8584
key: 'message-id-2',
85+
gutterPosition: 'start',
8686
gutter: { content: <Avatar {...janeAvatar} /> },
8787
content: (
8888
<Chat.Message content={{ content }} author="Jane Doe" timestamp="Yesterday, 10:15 PM" />

‎docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ const ChatMessageExampleStyled = () => (
6969
>
7070
<Chat>
7171
<Chat.Item
72-
mine
7372
content={
7473
<Chat.Message
7574
content="Hey, do you know any restaurants with good food?"
@@ -80,6 +79,7 @@ const ChatMessageExampleStyled = () => (
8079
}
8180
/>
8281
<Chat.Item
82+
gutterPosition="start"
8383
gutter={{ content: <Avatar {...janeAvatar} /> }}
8484
content={
8585
<Chat.Message content={{ content }} author="Jane Doe" timestamp="Yesterday, 10:15 PM" />

‎docs/src/prototypes/chatPane/chatPaneContent.tsx

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -38,32 +38,35 @@ class ChatPaneContainer extends React.PureComponent<ChatPaneContainerProps> {
3838
}
3939

4040
private generateChatItems(chat: ChatData): JSX.Element[] {
41-
return generateChatProps(chat).map(({ gutter, content: { itemType, ...props } }, index) => {
42-
const ElementType = this.getElementType(itemType)
43-
const maybeAttributesForDivider =
44-
itemType === ChatItemTypes.divider
45-
? {
46-
role: 'heading',
47-
'aria-level': 3,
41+
return generateChatProps(chat).map(
42+
({ mine, gutter, content: { itemType, ...props } }, index) => {
43+
const ElementType = this.getElementType(itemType)
44+
const maybeAttributesForDivider =
45+
itemType === ChatItemTypes.divider
46+
? {
47+
role: 'heading',
48+
'aria-level': 3,
49+
}
50+
: {}
51+
return (
52+
<Chat.Item
53+
key={`chat-item-${index}`}
54+
gutterPosition={mine ? 'end' : 'start'}
55+
gutter={gutter && { content: <Avatar {...gutter} /> }}
56+
content={
57+
<>
58+
{itemType === ChatItemTypes.message && (
59+
<div style={screenReaderMessageContainerStyles} role="heading" aria-level={4}>
60+
{this.getMessagePreviewForScreenReader(props)}
61+
</div>
62+
)}
63+
<ElementType {...props} text={undefined} {...maybeAttributesForDivider} />
64+
</>
4865
}
49-
: {}
50-
return (
51-
<Chat.Item
52-
key={`chat-item-${index}`}
53-
gutter={gutter && { content: <Avatar {...gutter} /> }}
54-
content={
55-
<>
56-
{itemType === ChatItemTypes.message && (
57-
<div style={screenReaderMessageContainerStyles} role="heading" aria-level={4}>
58-
{this.getMessagePreviewForScreenReader(props)}
59-
</div>
60-
)}
61-
<ElementType {...props} text={undefined} {...maybeAttributesForDivider} />
62-
</>
63-
}
64-
/>
65-
)
66-
})
66+
/>
67+
)
68+
},
69+
)
6770
}
6871

6972
private getElementType = (itemType: ChatItemTypes) => {

‎src/components/Chat/ChatItem.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export interface ChatItemProps
2424
gutter?: ShorthandValue
2525

2626
/** Indicates whether message belongs to the current user. */
27-
mine?: boolean
27+
gutterPosition?: 'start' | 'end'
2828
}
2929

3030
/**
@@ -40,11 +40,12 @@ class ChatItem extends UIComponent<Extendable<ChatItemProps>, any> {
4040
content: 'shorthand',
4141
}),
4242
gutter: customPropTypes.itemShorthand,
43-
mine: PropTypes.bool,
43+
gutterPosition: PropTypes.oneOf(['start', 'end']),
4444
}
4545

4646
static defaultProps = {
4747
as: 'li',
48+
gutterPosition: 'end',
4849
}
4950

5051
renderComponent({ ElementType, classes, rest, styles }: RenderResultConfig<ChatItemProps>) {
@@ -58,14 +59,14 @@ class ChatItem extends UIComponent<Extendable<ChatItemProps>, any> {
5859
}
5960

6061
private renderChatItem() {
61-
const { content, gutter, mine } = this.props
62-
const gutterElement = ChatGutter.create(gutter, { defaultProps: { mine } })
62+
const { content, gutter, gutterPosition } = this.props
63+
const gutterElement = ChatGutter.create(gutter)
6364

6465
return (
6566
<>
66-
{!mine && gutterElement}
67+
{gutterPosition === 'start' && gutterElement}
6768
{Slot.create(content)}
68-
{mine && gutterElement}
69+
{gutterPosition === 'end' && gutterElement}
6970
</>
7071
)
7172
}

‎src/themes/teams/components/Chat/chatItemStyles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const chatItemStyles: ComponentSlotStylesInput<ChatItemProps, ChatItemVariables>
1212
[`& .${Chat.Gutter.className}`]: {
1313
position: 'absolute',
1414
marginTop: v.gutter.margin,
15-
[p.mine ? 'right' : 'left']: 0,
15+
[p.gutterPosition === 'end' ? 'right' : 'left']: 0,
1616
},
1717

1818
[`& .${Chat.Message.className}`]: {

0 commit comments

Comments
 (0)