Merge pull request #235 from grant-project/fix-body-more
Fix read more missing on SSR
This commit is contained in:
commit
d3beb1f099
|
@ -49,7 +49,6 @@ interface State {
|
||||||
isBodyOverflowing: boolean;
|
isBodyOverflowing: boolean;
|
||||||
isUpdateOpen: boolean;
|
isUpdateOpen: boolean;
|
||||||
isCancelOpen: boolean;
|
isCancelOpen: boolean;
|
||||||
bodyId: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class ProposalDetail extends React.Component<Props, State> {
|
export class ProposalDetail extends React.Component<Props, State> {
|
||||||
|
@ -58,9 +57,10 @@ export class ProposalDetail extends React.Component<Props, State> {
|
||||||
isBodyOverflowing: false,
|
isBodyOverflowing: false,
|
||||||
isUpdateOpen: false,
|
isUpdateOpen: false,
|
||||||
isCancelOpen: false,
|
isCancelOpen: false,
|
||||||
bodyId: `body-${Math.floor(Math.random() * 1000000)}`,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
bodyEl: HTMLElement | null = null;
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
// always refresh from server
|
// always refresh from server
|
||||||
this.props.fetchProposal(this.props.proposalId);
|
this.props.fetchProposal(this.props.proposalId);
|
||||||
|
@ -87,13 +87,7 @@ export class ProposalDetail extends React.Component<Props, State> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { user, detail: proposal, isPreview, detailError } = this.props;
|
const { user, detail: proposal, isPreview, detailError } = this.props;
|
||||||
const {
|
const { isBodyExpanded, isBodyOverflowing, isCancelOpen, isUpdateOpen } = this.state;
|
||||||
isBodyExpanded,
|
|
||||||
isBodyOverflowing,
|
|
||||||
isCancelOpen,
|
|
||||||
isUpdateOpen,
|
|
||||||
bodyId,
|
|
||||||
} = this.state;
|
|
||||||
const showExpand = !isBodyExpanded && isBodyOverflowing;
|
const showExpand = !isBodyExpanded && isBodyOverflowing;
|
||||||
const wrongProposal = proposal && proposal.proposalId !== this.props.proposalId;
|
const wrongProposal = proposal && proposal.proposalId !== this.props.proposalId;
|
||||||
|
|
||||||
|
@ -209,7 +203,7 @@ export class ProposalDetail extends React.Component<Props, State> {
|
||||||
</h1>
|
</h1>
|
||||||
<div className="Proposal-top-main-block" style={{ flexGrow: 1 }}>
|
<div className="Proposal-top-main-block" style={{ flexGrow: 1 }}>
|
||||||
<div
|
<div
|
||||||
id={bodyId}
|
ref={el => (this.bodyEl = el)}
|
||||||
className={classnames({
|
className={classnames({
|
||||||
['Proposal-top-main-block-bodyText']: true,
|
['Proposal-top-main-block-bodyText']: true,
|
||||||
['is-expanded']: isBodyExpanded,
|
['is-expanded']: isBodyExpanded,
|
||||||
|
@ -291,20 +285,17 @@ export class ProposalDetail extends React.Component<Props, State> {
|
||||||
};
|
};
|
||||||
|
|
||||||
private checkBodyOverflow = () => {
|
private checkBodyOverflow = () => {
|
||||||
const { isBodyExpanded, bodyId, isBodyOverflowing } = this.state;
|
const { isBodyExpanded, isBodyOverflowing } = this.state;
|
||||||
if (isBodyExpanded) {
|
if (isBodyExpanded || !this.bodyEl) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use id instead of ref because styled component ref doesn't return html element
|
if (isBodyOverflowing && this.bodyEl.scrollHeight <= this.bodyEl.clientHeight) {
|
||||||
const bodyEl = document.getElementById(bodyId);
|
|
||||||
if (!bodyEl) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isBodyOverflowing && bodyEl.scrollHeight <= bodyEl.clientHeight) {
|
|
||||||
this.setState({ isBodyOverflowing: false });
|
this.setState({ isBodyOverflowing: false });
|
||||||
} else if (!isBodyOverflowing && bodyEl.scrollHeight > bodyEl.clientHeight) {
|
} else if (
|
||||||
|
!isBodyOverflowing &&
|
||||||
|
this.bodyEl.scrollHeight > this.bodyEl.clientHeight
|
||||||
|
) {
|
||||||
this.setState({ isBodyOverflowing: true });
|
this.setState({ isBodyOverflowing: true });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue