Revert buggy timeline layout refactor
This commit is contained in:
parent
81e991af80
commit
3226156a45
6 changed files with 64 additions and 23 deletions
|
@ -173,6 +173,7 @@ export type PropsType = PropsDataType &
|
|||
type StateType = {
|
||||
hasDismissedDirectContactSpoofingWarning: boolean;
|
||||
hasRecentlyScrolled: boolean;
|
||||
lastMeasuredWarningHeight: number;
|
||||
newestBottomVisibleMessageId?: string;
|
||||
oldestPartiallyVisibleMessageId?: string;
|
||||
widthBreakpoint: WidthBreakpoint;
|
||||
|
@ -276,7 +277,8 @@ export class Timeline extends React.Component<
|
|||
hasRecentlyScrolled: true,
|
||||
hasDismissedDirectContactSpoofingWarning: false,
|
||||
|
||||
// This may be swiftly overridden.
|
||||
// These may be swiftly overridden.
|
||||
lastMeasuredWarningHeight: 0,
|
||||
widthBreakpoint: WidthBreakpoint.Wide,
|
||||
};
|
||||
|
||||
|
@ -792,6 +794,7 @@ export class Timeline extends React.Component<
|
|||
} = this.props;
|
||||
const {
|
||||
hasRecentlyScrolled,
|
||||
lastMeasuredWarningHeight,
|
||||
newestBottomVisibleMessageId,
|
||||
oldestPartiallyVisibleMessageId,
|
||||
widthBreakpoint,
|
||||
|
@ -845,6 +848,11 @@ export class Timeline extends React.Component<
|
|||
<TimelineFloatingHeader
|
||||
i18n={i18n}
|
||||
isLoading={isLoadingMessages}
|
||||
style={
|
||||
lastMeasuredWarningHeight
|
||||
? { marginTop: lastMeasuredWarningHeight }
|
||||
: undefined
|
||||
}
|
||||
timestamp={oldestPartiallyVisibleMessageTimestamp}
|
||||
visible={
|
||||
(hasRecentlyScrolled || isLoadingMessages) &&
|
||||
|
@ -976,14 +984,27 @@ export class Timeline extends React.Component<
|
|||
}
|
||||
|
||||
timelineWarning = (
|
||||
<TimelineWarnings>
|
||||
<TimelineWarning i18n={i18n} onClose={onClose}>
|
||||
<TimelineWarning.IconContainer>
|
||||
<TimelineWarning.GenericIcon />
|
||||
</TimelineWarning.IconContainer>
|
||||
<TimelineWarning.Text>{text}</TimelineWarning.Text>
|
||||
</TimelineWarning>
|
||||
</TimelineWarnings>
|
||||
<Measure
|
||||
bounds
|
||||
onResize={({ bounds }) => {
|
||||
if (!bounds) {
|
||||
assert(false, 'We should be measuring the bounds');
|
||||
return;
|
||||
}
|
||||
this.setState({ lastMeasuredWarningHeight: bounds.height });
|
||||
}}
|
||||
>
|
||||
{({ measureRef }) => (
|
||||
<TimelineWarnings ref={measureRef}>
|
||||
<TimelineWarning i18n={i18n} onClose={onClose}>
|
||||
<TimelineWarning.IconContainer>
|
||||
<TimelineWarning.GenericIcon />
|
||||
</TimelineWarning.IconContainer>
|
||||
<TimelineWarning.Text>{text}</TimelineWarning.Text>
|
||||
</TimelineWarning>
|
||||
</TimelineWarnings>
|
||||
)}
|
||||
</Measure>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -1066,13 +1087,13 @@ export class Timeline extends React.Component<
|
|||
>
|
||||
{timelineWarning}
|
||||
|
||||
{floatingHeader}
|
||||
|
||||
<div
|
||||
className="module-timeline__messages__container"
|
||||
onScroll={this.onScroll}
|
||||
ref={this.containerRef}
|
||||
>
|
||||
{floatingHeader}
|
||||
|
||||
<div
|
||||
className={classNames(
|
||||
'module-timeline__messages',
|
||||
|
@ -1080,8 +1101,14 @@ export class Timeline extends React.Component<
|
|||
)}
|
||||
ref={this.messagesRef}
|
||||
>
|
||||
{haveOldest &&
|
||||
renderHeroRow(id, unblurAvatar, updateSharedGroups)}
|
||||
{haveOldest && (
|
||||
<>
|
||||
{Timeline.getWarning(this.props, this.state) && (
|
||||
<div style={{ height: lastMeasuredWarningHeight }} />
|
||||
)}
|
||||
{renderHeroRow(id, unblurAvatar, updateSharedGroups)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{messageNodes}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue