diff options
Diffstat (limited to 'app/assets/javascripts/components/features/ui/index.jsx')
-rw-r--r-- | app/assets/javascripts/components/features/ui/index.jsx | 47 |
1 files changed, 26 insertions, 21 deletions
diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx index d3090ae9b..1f35842d9 100644 --- a/app/assets/javascripts/components/features/ui/index.jsx +++ b/app/assets/javascripts/components/features/ui/index.jsx @@ -1,6 +1,6 @@ import ColumnsArea from './components/columns_area'; import NotificationsContainer from './containers/notifications_container'; -import PureRenderMixin from 'react-addons-pure-render-mixin'; +import PropTypes from 'prop-types'; import LoadingBarContainer from './containers/loading_bar_container'; import HomeTimeline from '../home_timeline'; import Compose from '../compose'; @@ -15,26 +15,26 @@ import { refreshTimeline } from '../../actions/timelines'; import { refreshNotifications } from '../../actions/notifications'; import UploadArea from './components/upload_area'; -const UI = React.createClass({ +class UI extends React.PureComponent { - propTypes: { - dispatch: React.PropTypes.func.isRequired, - children: React.PropTypes.node - }, - - getInitialState () { - return { + constructor (props, context) { + super(props, context); + this.state = { width: window.innerWidth, draggingOver: false }; - }, - - mixins: [PureRenderMixin], + this.handleResize = this.handleResize.bind(this); + this.handleDragEnter = this.handleDragEnter.bind(this); + this.handleDragOver = this.handleDragOver.bind(this); + this.handleDrop = this.handleDrop.bind(this); + this.handleDragLeave = this.handleDragLeave.bind(this); + this.setRef = this.setRef.bind(this); + } @debounce(500) handleResize () { this.setState({ width: window.innerWidth }); - }, + } handleDragEnter (e) { e.preventDefault(); @@ -50,7 +50,7 @@ const UI = React.createClass({ if (e.dataTransfer && e.dataTransfer.items.length > 0) { this.setState({ draggingOver: true }); } - }, + } handleDragOver (e) { e.preventDefault(); @@ -63,7 +63,7 @@ const UI = React.createClass({ } return false; - }, + } handleDrop (e) { e.preventDefault(); @@ -73,7 +73,7 @@ const UI = React.createClass({ if (e.dataTransfer && e.dataTransfer.files.length === 1) { this.props.dispatch(uploadCompose(e.dataTransfer.files)); } - }, + } handleDragLeave (e) { e.preventDefault(); @@ -86,7 +86,7 @@ const UI = React.createClass({ } this.setState({ draggingOver: false }); - }, + } componentWillMount () { window.addEventListener('resize', this.handleResize, { passive: true }); @@ -97,7 +97,7 @@ const UI = React.createClass({ this.props.dispatch(refreshTimeline('home')); this.props.dispatch(refreshNotifications()); - }, + } componentWillUnmount () { window.removeEventListener('resize', this.handleResize); @@ -105,11 +105,11 @@ const UI = React.createClass({ document.removeEventListener('dragover', this.handleDragOver); document.removeEventListener('drop', this.handleDrop); document.removeEventListener('dragleave', this.handleDragLeave); - }, + } setRef (c) { this.node = c; - }, + } render () { const { width, draggingOver } = this.state; @@ -148,6 +148,11 @@ const UI = React.createClass({ ); } -}); +} + +UI.propTypes = { + dispatch: PropTypes.func.isRequired, + children: PropTypes.node +}; export default connect()(UI); |