Skip to content

Commit f545613

Browse files
authored
Merge branch 'master' into markdown-email-fix
2 parents 603cc37 + cb9d520 commit f545613

File tree

12 files changed

+92
-61
lines changed

12 files changed

+92
-61
lines changed

CHANGELOG.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
# Changelog
22

3+
## [4.1.3](https://github.com/GetStream/stream-chat-react/releases/tag/v4.1.3) 2021-03-12
4+
5+
### Chore
6+
7+
- Remove legacy example apps [#766](https://github.com/GetStream/stream-chat-react/pull/766)
8+
- Handle soft deleted messages in `VirtualizedMessageList` [#773](https://github.com/GetStream/stream-chat-react/pull/773)
9+
10+
### Bug
11+
12+
- Add missing ChannelPreview helpers to exports [#775](https://github.com/GetStream/stream-chat-react/pull/775)
13+
314
## [4.1.2](https://github.com/GetStream/stream-chat-react/releases/tag/v4.1.2) 2021-03-09
415

516
### Feature

docs/build/bundle.c23d0a3d.js renamed to docs/build/bundle.f0b037b4.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
</head>
1010
<body>
1111
<div id="rsg-root"></div>
12-
<script src="build/bundle.c23d0a3d.js"></script>
12+
<script src="build/bundle.f0b037b4.js"></script>
1313
</body>
1414
</html>

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "stream-chat-react",
3-
"version": "4.1.2",
3+
"version": "4.1.3",
44
"description": "React components to create chat conversations or livestream style chat",
55
"author": "GetStream",
66
"homepage": "https://getstream.io/chat/",

src/components/AutoCompleteTextarea/List.js

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const List = (props) => {
2424

2525
const [selectedItem, setSelectedItem] = useState(undefined);
2626

27-
const itemsRef = {};
27+
const itemsRef = [];
2828

2929
const isSelected = (item) => selectedItem === values.indexOf(item);
3030

@@ -53,24 +53,29 @@ const List = (props) => {
5353
modifyText(values[selectedItem]);
5454
};
5555

56-
const selectItem = (item, keyboard = false) => {
56+
const selectItem = (item) => {
5757
setSelectedItem(values.indexOf(item));
58-
if (keyboard) dropdownScroll(itemsRef[getId(item)]);
5958
};
6059

6160
const handleKeyDown = useCallback(
6261
(event) => {
6362
if (event.which === KEY_CODES.UP) {
6463
setSelectedItem((prevSelected) => {
6564
if (prevSelected === undefined) return 0;
66-
return prevSelected === 0 ? values.length - 1 : prevSelected - 1;
65+
const newID =
66+
prevSelected === 0 ? values.length - 1 : prevSelected - 1;
67+
dropdownScroll(itemsRef[newID]);
68+
return newID;
6769
});
6870
}
6971

7072
if (event.which === KEY_CODES.DOWN) {
7173
setSelectedItem((prevSelected) => {
7274
if (prevSelected === undefined) return 0;
73-
return prevSelected === values.length - 1 ? 0 : prevSelected + 1;
75+
const newID =
76+
prevSelected === values.length - 1 ? 0 : prevSelected + 1;
77+
dropdownScroll(itemsRef[newID]);
78+
return newID;
7479
});
7580
}
7681

@@ -123,7 +128,7 @@ const List = (props) => {
123128
__html: renderHeader(propValue),
124129
}}
125130
/>
126-
{values.map((item) => (
131+
{values.map((item, i) => (
127132
<Item
128133
className={itemClassName}
129134
component={component}
@@ -132,7 +137,7 @@ const List = (props) => {
132137
onClickHandler={handleClick}
133138
onSelectHandler={selectItem}
134139
ref={(ref) => {
135-
itemsRef[getId(item)] = ref;
140+
itemsRef[i] = ref;
136141
}}
137142
selected={isSelected(item)}
138143
style={itemStyle}

src/components/AutoCompleteTextarea/Textarea.js

Lines changed: 41 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -619,62 +619,61 @@ class ReactTextareaAutocomplete extends React.Component {
619619
scrollToItem(this.dropdownRef, item);
620620
};
621621

622-
render() {
622+
renderSuggestionListContainer() {
623623
const {
624-
className,
625-
containerClassName,
626-
containerStyle,
627624
disableMentions,
628625
dropdownClassName,
629626
dropdownStyle,
630627
itemClassName,
631628
itemStyle,
632629
listClassName,
633-
style,
634630
SuggestionList = DefaultSuggestionList,
635631
} = this.props;
636-
637-
let { maxRows } = this.props;
638-
639632
const { component, currentTrigger, dataLoading, value } = this.state;
640633

641634
const selectedItem = this._getItemOnSelect();
642635
const suggestionData = this._getSuggestions();
643636
const textToReplace = this._getTextToReplace();
644637

645-
const SuggestionListContainer = () => {
646-
if (
647-
(dataLoading || suggestionData) &&
648-
currentTrigger &&
649-
!(disableMentions && currentTrigger === '@')
650-
) {
651-
return (
652-
<div
653-
className={`rta__autocomplete ${dropdownClassName || ''}`}
654-
ref={(ref) => {
655-
this.dropdownRef = ref;
656-
}}
657-
style={dropdownStyle}
658-
>
659-
{component && suggestionData && textToReplace && (
660-
<SuggestionList
661-
className={listClassName}
662-
component={component}
663-
dropdownScroll={this._dropdownScroll}
664-
getSelectedItem={selectedItem}
665-
getTextToReplace={textToReplace}
666-
itemClassName={itemClassName}
667-
itemStyle={itemStyle}
668-
onSelect={this._onSelect}
669-
value={value}
670-
values={suggestionData}
671-
/>
672-
)}
673-
</div>
674-
);
675-
}
676-
return null;
677-
};
638+
if (
639+
(dataLoading || suggestionData) &&
640+
currentTrigger &&
641+
!(disableMentions && currentTrigger === '@')
642+
) {
643+
return (
644+
<div
645+
className={`rta__autocomplete ${dropdownClassName || ''}`}
646+
ref={(ref) => {
647+
this.dropdownRef = ref;
648+
}}
649+
style={dropdownStyle}
650+
>
651+
{component && suggestionData && textToReplace && (
652+
<SuggestionList
653+
className={listClassName}
654+
component={component}
655+
dropdownScroll={this._dropdownScroll}
656+
getSelectedItem={selectedItem}
657+
getTextToReplace={textToReplace}
658+
itemClassName={itemClassName}
659+
itemStyle={itemStyle}
660+
onSelect={this._onSelect}
661+
value={value}
662+
values={suggestionData}
663+
/>
664+
)}
665+
</div>
666+
);
667+
}
668+
return null;
669+
}
670+
671+
render() {
672+
const { className, containerClassName, containerStyle, style } = this.props;
673+
674+
let { maxRows } = this.props;
675+
676+
const { dataLoading, value } = this.state;
678677

679678
if (!this.props.grow) maxRows = 1;
680679

@@ -685,7 +684,7 @@ class ReactTextareaAutocomplete extends React.Component {
685684
}`}
686685
style={containerStyle}
687686
>
688-
<SuggestionListContainer />
687+
{this.renderSuggestionListContainer()}
689688
<Textarea
690689
{...this._cleanUpProps()}
691690
className={`rta__textarea ${className || ''}`}

src/components/MessageList/VirtualizedMessageList.js

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -118,13 +118,7 @@ const VirtualizedMessageList = ({
118118
*/
119119
const Item = (props) => {
120120
return (
121-
<div
122-
{...props}
123-
style={{
124-
display: 'inline-block',
125-
width: '100%',
126-
}}
127-
/>
121+
<div {...props} className="str-chat__virtual-list-message-wrapper" />
128122
);
129123
};
130124

src/styles/MessageList.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
overflow-y: auto;
55
-webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
66
padding: 0 0 0 0;
7+
position: relative;
8+
z-index: 0;
79
.str-chat__reverse-infinite-scroll {
810
padding-top: 75px;
911
}

src/styles/VirtualMessage.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
}
2525

2626
.str-chat__virtual-list {
27+
// this resolves the issue with 1px tall messages (i.e. deleted messages)
28+
font-size: 0;
2729
.str-chat__message.str-chat__message--deleted {
2830
align-items: initial;
2931
padding: 16px 42px;
@@ -35,6 +37,11 @@
3537
}
3638
}
3739

40+
.str-chat__virtual-list-message-wrapper {
41+
display: inline-block;
42+
width: 100%;
43+
}
44+
3845
.str-chat__virtual-message__meta {
3946
display: flex;
4047
flex-direction: row;

0 commit comments

Comments
 (0)