Remove react-dnd as it was interfering with text selection. Move content

warning mentions preview into area where actual content would be
This commit is contained in:
Eugen Rochko 2017-02-05 04:11:14 +01:00
parent fb6aa7ad5c
commit b5bf807a34
5 changed files with 17 additions and 57 deletions

View File

@ -97,11 +97,12 @@ const StatusContent = React.createClass({
const { status } = this.props; const { status } = this.props;
const { hidden } = this.state; const { hidden } = this.state;
const content = { __html: emojify(status.get('content')) }; const content = { __html: emojify(status.get('content')) };
const spoilerContent = { __html: emojify(escapeTextContentForBrowser(status.get('spoiler_text', ''))) }; const spoilerContent = { __html: emojify(escapeTextContentForBrowser(status.get('spoiler_text', ''))) };
if (status.get('spoiler_text').length > 0) { if (status.get('spoiler_text').length > 0) {
let mentionsPlaceholder = '';
const mentionLinks = status.get('mentions').map(item => ( const mentionLinks = status.get('mentions').map(item => (
<Permalink to={`/accounts/${item.get('id')}`} href={item.get('url')} key={item.get('id')} className='mention'> <Permalink to={`/accounts/${item.get('id')}`} href={item.get('url')} key={item.get('id')} className='mention'>
@<span>{item.get('username')}</span> @<span>{item.get('username')}</span>
@ -110,13 +111,18 @@ const StatusContent = React.createClass({
const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />; const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />;
if (hidden) {
mentionsPlaceholder = <div>{mentionLinks}</div>;
}
return ( return (
<div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> <div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
<p style={{ marginBottom: hidden ? '0px' : '' }} > <p style={{ marginBottom: hidden && mentionLinks.size === 0 ? '0px' : '' }} >
{mentionLinks}
<span dangerouslySetInnerHTML={spoilerContent} /> <a className='status__content__spoiler-link' style={spoilerStyle} onClick={this.handleSpoilerClick}>{toggleText}</a> <span dangerouslySetInnerHTML={spoilerContent} /> <a className='status__content__spoiler-link' style={spoilerStyle} onClick={this.handleSpoilerClick}>{toggleText}</a>
</p> </p>
{mentionsPlaceholder}
<div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} /> <div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} />
</div> </div>
); );

View File

@ -1,6 +1,5 @@
import ColumnHeader from './column_header'; import ColumnHeader from './column_header';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import { DragSource } from 'react-dnd';
const easingOutQuint = (x, t, b, c, d) => c*((t=t/d-1)*t*t*t*t + 1) + b; const easingOutQuint = (x, t, b, c, d) => c*((t=t/d-1)*t*t*t*t + 1) + b;
@ -37,22 +36,9 @@ const style = {
flexDirection: 'column' flexDirection: 'column'
}; };
const columnSource = {
beginDrag (props) {
return {};
}
};
const collect = (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
});
const Column = React.createClass({ const Column = React.createClass({
propTypes: { propTypes: {
connectDragSource: React.PropTypes.func.isRequired,
isDragging: React.PropTypes.bool.isRequired,
heading: React.PropTypes.string, heading: React.PropTypes.string,
icon: React.PropTypes.string, icon: React.PropTypes.string,
children: React.PropTypes.node children: React.PropTypes.node
@ -72,7 +58,7 @@ const Column = React.createClass({
}, },
render () { render () {
const { heading, icon, children, connectDragSource, isDragging } = this.props; const { heading, icon, children } = this.props;
let header = ''; let header = '';
@ -80,8 +66,8 @@ const Column = React.createClass({
header = <ColumnHeader icon={icon} type={heading} onClick={this.handleHeaderClick} />; header = <ColumnHeader icon={icon} type={heading} onClick={this.handleHeaderClick} />;
} }
return connectDragSource( return (
<div className='column' style={{...style, opacity: isDragging ? '0.5' : '1' }} onWheel={this.handleWheel}> <div className='column' style={style} onWheel={this.handleWheel}>
{header} {header}
{children} {children}
</div> </div>
@ -90,4 +76,4 @@ const Column = React.createClass({
}); });
export default DragSource('column', columnSource, collect)(Column); export default Column;

View File

@ -13,8 +13,6 @@ import { debounce } from 'react-decoration';
import { uploadCompose } from '../../actions/compose'; import { uploadCompose } from '../../actions/compose';
import { refreshTimeline } from '../../actions/timelines'; import { refreshTimeline } from '../../actions/timelines';
import { refreshNotifications } from '../../actions/notifications'; import { refreshNotifications } from '../../actions/notifications';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
const UI = React.createClass({ const UI = React.createClass({
@ -105,4 +103,4 @@ const UI = React.createClass({
}); });
export default connect()(DragDropContext(HTML5Backend)(UI)); export default connect()(UI);

View File

@ -42,8 +42,6 @@
"react-addons-test-utils": "^15.3.2", "react-addons-test-utils": "^15.3.2",
"react-autosuggest": "^7.0.1", "react-autosuggest": "^7.0.1",
"react-decoration": "^1.4.0", "react-decoration": "^1.4.0",
"react-dnd": "^2.1.4",
"react-dnd-html5-backend": "^2.1.2",
"react-dom": "^15.3.0", "react-dom": "^15.3.0",
"react-imageloader": "^2.1.0", "react-imageloader": "^2.1.0",
"react-immutable-proptypes": "^2.1.0", "react-immutable-proptypes": "^2.1.0",

View File

@ -269,7 +269,7 @@ arrify@^1.0.0:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
asap@^2.0.3, asap@~2.0.3: asap@~2.0.3:
version "2.0.5" version "2.0.5"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
@ -2098,19 +2098,6 @@ diffie-hellman@^5.0.0:
miller-rabin "^4.0.0" miller-rabin "^4.0.0"
randombytes "^2.0.0" randombytes "^2.0.0"
disposables@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/disposables/-/disposables-1.0.1.tgz#064727a25b54f502bd82b89aa2dfb8df9f1b39e3"
dnd-core@^2.0.1:
version "2.0.2"
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-2.0.2.tgz#4528da4fbeb1abb6c308414b2d2e8389f3514646"
dependencies:
asap "^2.0.3"
invariant "^2.0.0"
lodash "^4.2.0"
redux "^3.2.0"
dom-helpers@^2.4.0: dom-helpers@^2.4.0:
version "2.4.0" version "2.4.0"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-2.4.0.tgz#9bb4b245f637367b1fa670274272aa28fe06c367" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-2.4.0.tgz#9bb4b245f637367b1fa670274272aa28fe06c367"
@ -2951,7 +2938,7 @@ intl-relativeformat@^1.3.0:
dependencies: dependencies:
intl-messageformat "1.3.0" intl-messageformat "1.3.0"
invariant@2.x.x, invariant@^2.0.0, invariant@^2.1.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1: invariant@2.x.x, invariant@^2.0.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1:
version "2.2.2" version "2.2.2"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
dependencies: dependencies:
@ -4594,21 +4581,6 @@ react-deep-force-update@^1.0.0:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7" resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"
react-dnd-html5-backend@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-2.1.2.tgz#bcff5866629c335b310b1062fe6537af35073c66"
dependencies:
lodash "^4.2.0"
react-dnd@^2.1.4:
version "2.1.4"
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-2.1.4.tgz#dd2afeddddd5ff4507d795a5bd44361c84374c0f"
dependencies:
disposables "^1.0.1"
dnd-core "^2.0.1"
invariant "^2.1.0"
lodash "^4.2.0"
"react-dom@^0.14.0 || ^15.0.0", react-dom@^15.3.0: "react-dom@^0.14.0 || ^15.0.0", react-dom@^15.3.0:
version "15.3.2" version "15.3.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
@ -4900,7 +4872,7 @@ redux-thunk@^2.1.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.1.0.tgz#c724bfee75dbe352da2e3ba9bc14302badd89a98" resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.1.0.tgz#c724bfee75dbe352da2e3ba9bc14302badd89a98"
redux@^3.2.0, redux@^3.5.2, redux@^3.6.0: redux@^3.5.2, redux@^3.6.0:
version "3.6.0" version "3.6.0"
resolved "https://registry.yarnpkg.com/redux/-/redux-3.6.0.tgz#887c2b3d0b9bd86eca2be70571c27654c19e188d" resolved "https://registry.yarnpkg.com/redux/-/redux-3.6.0.tgz#887c2b3d0b9bd86eca2be70571c27654c19e188d"
dependencies: dependencies: