Merge pull request #2667 from lbryio/commentsExpandContained

comments and expandable changes
This commit is contained in:
Sean Yesmunt 2019-07-29 10:51:31 -04:00 committed by GitHub
commit a9a6b7659e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 47 deletions

View file

@ -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 => (

View file

@ -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>
);
}

View file

@ -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>
);
}

View file

@ -1,5 +1,4 @@
.expandable {
border-bottom: 1px solid $lbry-gray-1;
margin-bottom: var(--spacing-medium);
padding-bottom: var(--spacing-medium);