Merge pull request #2667 from lbryio/commentsExpandContained
comments and expandable changes
This commit is contained in:
commit
a9a6b7659e
4 changed files with 43 additions and 47 deletions
|
@ -42,6 +42,10 @@ export default function ClaimTags(props: Props) {
|
|||
}
|
||||
}
|
||||
|
||||
if (!tagsToDisplay.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classnames('file-properties', { 'file-properties--large': type === 'large' })}>
|
||||
{tagsToDisplay.map(tag => (
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
import React from 'react';
|
||||
import relativeDate from 'tiny-relative-date';
|
||||
import Button from 'component/button';
|
||||
import Expandable from 'component/expandable';
|
||||
|
||||
type Props = {
|
||||
author: string,
|
||||
|
@ -25,8 +26,11 @@ function Comment(props: Props) {
|
|||
{relativeDate(timePosted)}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
<p className={'comment__message'}>{message}</p>
|
||||
<div>
|
||||
<Expandable>
|
||||
<p className={'comment__message'}>{message}</p>
|
||||
</Expandable>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,58 +1,47 @@
|
|||
// @flow
|
||||
import React, { PureComponent } from 'react';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import Button from 'component/button';
|
||||
import { useRect } from '@reach/rect';
|
||||
|
||||
// Note:
|
||||
// When we use this in other parts of the app, we will probably need to
|
||||
// add props for collapsed height
|
||||
const COLLAPSED_HEIGHT = 120;
|
||||
|
||||
type Props = {
|
||||
children: React$Node | Array<React$Node>,
|
||||
};
|
||||
|
||||
type State = {
|
||||
expanded: boolean,
|
||||
};
|
||||
export default function Expandable(props: Props) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const { children } = props;
|
||||
const ref = useRef();
|
||||
const rect = useRect(ref);
|
||||
|
||||
export default class Expandable extends PureComponent<Props, State> {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
expanded: false,
|
||||
};
|
||||
|
||||
(this: any).handleClick = this.handleClick.bind(this);
|
||||
function handleClick() {
|
||||
setExpanded(!expanded);
|
||||
}
|
||||
|
||||
handleClick() {
|
||||
this.setState({
|
||||
expanded: !this.state.expanded,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
const { expanded } = this.state;
|
||||
|
||||
return (
|
||||
<div className="expandable">
|
||||
<div
|
||||
className={classnames({
|
||||
'expandable--open': expanded,
|
||||
'expandable--closed': !expanded,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
return (
|
||||
<div ref={ref}>
|
||||
{rect && rect.height > COLLAPSED_HEIGHT ? (
|
||||
<div ref={ref} className="expandable">
|
||||
<div
|
||||
className={classnames({
|
||||
'expandable--open': expanded,
|
||||
'expandable--closed': !expanded,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
<Button
|
||||
button="link"
|
||||
className="expandable__button"
|
||||
label={expanded ? __('Less') : __('More')}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
button="link"
|
||||
className="expandable__button"
|
||||
label={expanded ? __('Less') : __('More')}
|
||||
onClick={this.handleClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
) : (
|
||||
<div>{children}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
.expandable {
|
||||
border-bottom: 1px solid $lbry-gray-1;
|
||||
margin-bottom: var(--spacing-medium);
|
||||
padding-bottom: var(--spacing-medium);
|
||||
|
||||
|
|
Loading…
Reference in a new issue