Progress

app/javascript/gabsocial/components/status_content/status_content.js

@@ -1,13 +1,14 @@
-import { Fragment } from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import { Fragment } from 'react'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'
 import classNames from 'classnames/bind'
-import { isRtl } from '../../utils/rtl';
+import { isRtl } from '../../utils/rtl'
 import Button from '../button'
-import Icon from '../icon';
+import Icon from '../icon'
+import Text from '../text'
 
-const MAX_HEIGHT = 200;
+const MAX_HEIGHT = 200
 
 const messages = defineMessages({
   showMore: { id: 'status.show_more', defaultMessage: 'Show more' },
@@ -23,7 +24,7 @@ class StatusContent extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
-  };
+  }
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
@@ -34,36 +35,36 @@ class StatusContent extends ImmutablePureComponent {
     collapsable: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     isComment: PropTypes.bool,
-  };
+  }
 
   state = {
     hidden: true,
-    collapsed: null, //  `collapsed: null` indicates that an element doesn't need collapsing, while `true` or `false` indicates that it does (and is/isn't).
-  };
+    collapsed: null, // `collapsed: null` indicates that an element doesn't need collapsing, while `true` or `false` indicates that it does (and is/isn't).
+  }
 
-  _updateStatusLinks () {
-    const node = this.node;
+  _updateStatusLinks() {
+    const node = this.node
 
-    if (!node) return;
+    if (!node) return
 
-    const links = node.querySelectorAll('a');
+    const links = node.querySelectorAll('a')
 
     for (var i = 0; i < links.length; ++i) {
-      let link = links[i];
+      let link = links[i]
       if (link.classList.contains('status-link')) {
-        continue;
+        continue
       }
-      link.classList.add('status-link');
+      link.classList.add('status-link')
 
-      let mention = this.props.status.get('mentions').find(item => link.href === `${item.get('url')}`);
+      let mention = this.props.status.get('mentions').find(item => link.href === `${item.get('url')}`)
 
       if (mention) {
-        link.addEventListener('click', this.onMentionClick.bind(this, mention), false);
-        link.setAttribute('title', mention.get('acct'));
+        link.addEventListener('click', this.onMentionClick.bind(this, mention), false)
+        link.setAttribute('title', mention.get('acct'))
       } else if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) {
-        link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
+        link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false)
       } else {
-        link.setAttribute('title', link.href);
+        link.setAttribute('title', link.href)
       }
     }
 
@@ -74,59 +75,59 @@ class StatusContent extends ImmutablePureComponent {
       && node.clientHeight > MAX_HEIGHT
       && this.props.status.get('spoiler_text').length === 0
     ) {
-      this.setState({ collapsed: true });
+      this.setState({ collapsed: true })
     }
   }
 
-  componentDidMount () {
-    this._updateStatusLinks();
+  componentDidMount() {
+    this._updateStatusLinks()
   }
 
-  componentDidUpdate () {
-    this._updateStatusLinks();
+  componentDidUpdate() {
+    this._updateStatusLinks()
   }
 
   onMentionClick = (mention, e) => {
     if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      this.context.router.history.push(`/${mention.get('acct')}`);
+      e.preventDefault()
+      this.context.router.history.push(`/${mention.get('acct')}`)
     }
   }
 
   onHashtagClick = (hashtag, e) => {
-    hashtag = hashtag.replace(/^#/, '').toLowerCase();
+    hashtag = hashtag.replace(/^#/, '').toLowerCase()
 
     if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      this.context.router.history.push(`/tags/${hashtag}`);
+      e.preventDefault()
+      this.context.router.history.push(`/tags/${hashtag}`)
     }
   }
 
   handleMouseDown = (e) => {
-    this.startXY = [e.clientX, e.clientY];
+    this.startXY = [e.clientX, e.clientY]
   }
 
   handleMouseUp = (e) => {
-    if (!this.startXY) return;
+    if (!this.startXY) return
 
-    const [ startX, startY ] = this.startXY;
-    const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)];
+    const [startX, startY] = this.startXY
+    const [deltaX, deltaY] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)]
 
     if (e.target.localName === 'button' ||
-        e.target.localName === 'a' ||
-        (e.target.parentNode && (e.target.parentNode.localName === 'button' || e.target.parentNode.localName === 'a'))) {
-      return;
+      e.target.localName === 'a' ||
+      (e.target.parentNode && (e.target.parentNode.localName === 'button' || e.target.parentNode.localName === 'a'))) {
+      return
     }
 
     if (deltaX + deltaY < 5 && e.button === 0 && this.props.onClick) {
-      this.props.onClick();
+      this.props.onClick()
     }
 
-    this.startXY = null;
+    this.startXY = null
   }
 
   handleSpoilerClick = (e) => {
-    e.preventDefault();
+    e.preventDefault()
 
     if (this.props.onExpandedToggle) {
       // The parent manages the state
@@ -137,77 +138,125 @@ class StatusContent extends ImmutablePureComponent {
   }
 
   handleReadMore = (e) => {
-    e.preventDefault();
-    this.setState({ collapsed: false });
+    e.preventDefault()
+    this.setState({ collapsed: false })
   }
 
   setRef = (c) => {
-    this.node = c;
+    this.node = c
   }
 
   getHtmlContent = () => {
-    const { status, reblogContent } = this.props;
+    const { status, reblogContent } = this.props
 
-    const properContent = status.get('contentHtml');
+    const properContent = status.get('contentHtml')
 
     return reblogContent
       ? `${reblogContent} <div class='status__quote'>${properContent}</div>`
-      : properContent;
+      : properContent
   }
 
-  render () {
+  render() {
     const { status, intl, isComment } = this.props
     const { collapsed } = this.state
 
-    console.log("status content", status.get('content'))
+    if (status.get('content').length === 0) return null
 
-    if (status.get('content').length === 0) return null;
+    const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden
 
-    const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
-
-    const content = { __html: this.getHtmlContent() };
-    const spoilerContent = { __html: status.get('spoilerHtml') };
-    const directionStyle = { direction: 'ltr' };
-    // const classNames = ''; 
-    // classnames('status__content', {
-    //   'status__content--with-action': this.props.onClick && this.context.router,
-    //   'status__content--with-spoiler': status.get('spoiler_text').length > 0,
-    //   'status__content--collapsed': this.state.collapsed === true,
-    //   // _s.px15, _s.mb15
-    // });
-
-    if (isRtl(status.get('search_index'))) {
-      directionStyle.direction = 'rtl';
+    const content = { __html: this.getHtmlContent() }
+    const spoilerContent = { __html: status.get('spoilerHtml') }
+    const directionStyle = {
+      direction: isRtl(status.get('search_index')) ? 'rtl' : 'ltr',
     }
 
     if (status.get('spoiler_text').length > 0) {
-      let mentionsPlaceholder = '';
+      let mentionsPlaceholder = null
 
       const mentionLinks = status.get('mentions').map(item => (
-        <Button to={`/${item.get('acct')}`} href={`/${item.get('acct')}`} key={item.get('id')} className='mention'>
-          @<span>{item.get('username')}</span>
+        <Button
+          text
+          backgroundColor='none'
+          to={`/${item.get('acct')}`}
+          href={`/${item.get('acct')}`}
+          key={item.get('id')}
+          className={['mention', _s.mr5, _s.mb5].join(' ')}
+        >
+          @{item.get('username')}
         </Button>
-      )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
-
-      const toggleText = intl.formatMessage(hidden ? messages.showMore : messages.showLess);
+      )).reduce((aggregate, item) => [...aggregate, item, ' '], [])
 
       if (hidden) {
-        mentionsPlaceholder = <div>{mentionLinks}</div>;
+        mentionsPlaceholder = (
+          <div className={[_s.statusContent, _s.default, _s.alignItemsStart, _s.flexRow, _s.flexWrap].join(' ')}>
+            {mentionLinks}
+          </div>
+        )
       }
 
+      const toggleText = intl.formatMessage(hidden ? messages.showMore : messages.showLess)
+
+      const spoilerContainerClasses = cx({
+        default: 1,
+        py10: 1,
+        borderBottom1PX: !hidden,
+        borderColorSecondary: !hidden,
+        mb10: !hidden,
+      })
+
+      const statusContentClasses = cx({
+        statusContent: 1,
+        displayNone: hidden,
+      })
+
       return (
-        <div className={[].join(' ')} ref={this.setRef} tabIndex='0' style={directionStyle} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
-          <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
-            <span dangerouslySetInnerHTML={spoilerContent} lang={status.get('language')} />
-            {' '}
-            <button tabIndex='0' className={`status__content__spoiler-link ${hidden ? 'status__content__spoiler-link--show-more' : 'status__content__spoiler-link--show-less'}`} onClick={this.handleSpoilerClick}>{toggleText}</button>
-          </p>
+        <div
+          className={[].join(' ')}
+          ref={this.setRef}
+          tabIndex='0'
+          className={[_s.px15, _s.statusContent].join(' ')}
+          style={directionStyle}
+          onMouseDown={this.handleMouseDown}
+          onMouseUp={this.handleMouseUp}
+        >
+
+          <div className={spoilerContainerClasses}>
+            <div className={[_s.default, _s.flexRow, _s.mr5].join(' ')}>
+              <Icon id='warning' height='14px' width='14px' className={[_s.fillColorBlack, _s.mt2, _s.mr5].join(' ')}/>
+              <div
+                className={_s.statusContent}
+                dangerouslySetInnerHTML={spoilerContent}
+                lang={status.get('language')}
+              />
+            </div>
+
+            <div className={[_s.default, _s.mt10, _s.alignItemsStart].join(' ')}>
+              <Button
+                narrow
+                radiusSmall
+                backgroundColor='tertiary'
+                color='primary'
+                tabIndex='0'
+                onClick={this.handleSpoilerClick}
+              >
+                <Text size='small' color='inherit'>
+                  {toggleText}
+                </Text>
+              </Button>
+            </div>
+          </div>
 
           {mentionsPlaceholder}
 
-          <div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} style={directionStyle} dangerouslySetInnerHTML={content} lang={status.get('language')} />
+          <div
+            tabIndex={!hidden ? 0 : null}
+            className={statusContentClasses}
+            style={directionStyle}
+            dangerouslySetInnerHTML={content}
+            lang={status.get('language')}
+          />
         </div>
-      );
+      )
     } else if (this.props.onClick) {
       const hasMarginBottom = !!status.get('card') || !!status.get('poll') || status.get('media_attachments').size > 0
 
@@ -256,7 +305,7 @@ class StatusContent extends ImmutablePureComponent {
         dangerouslySetInnerHTML={content}
         lang={status.get('language')}
       />
-    );
+    )
   }
 
 }