From 1948f9e767c5c8f7cb52337ce777a61b5ad1a599 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Sat, 22 Apr 2017 03:05:35 +0900 Subject: Remove deprecated features at React v15.5 (#1905) * Remove deprecated features at React v15.5 - [x] React.PropTypes - [x] react-addons-pure-render-mixin - [x] react-addons-test-utils * Uncommented out & Add browserify_rails options * re-add react-addons-shallow * Fix syntax error from resolve conflicts * follow up 59a77923b368d48c590cd9f4a0c6b73ce972d33f --- .../features/status/components/action_bar.jsx | 60 ++++++++++-------- .../components/features/status/components/card.jsx | 14 ++-- .../features/status/components/detailed_status.jsx | 35 +++++----- .../components/features/status/index.jsx | 74 +++++++++++++--------- 4 files changed, 102 insertions(+), 81 deletions(-) (limited to 'app/assets/javascripts/components/features/status') diff --git a/app/assets/javascripts/components/features/status/components/action_bar.jsx b/app/assets/javascripts/components/features/status/components/action_bar.jsx index a2d8a24be..4bd3352d8 100644 --- a/app/assets/javascripts/components/features/status/components/action_bar.jsx +++ b/app/assets/javascripts/components/features/status/components/action_bar.jsx @@ -1,4 +1,4 @@ -import PureRenderMixin from 'react-addons-pure-render-mixin'; +import PropTypes from 'prop-types'; import IconButton from '../../../components/icon_button'; import ImmutablePropTypes from 'react-immutable-proptypes'; import DropdownMenu from '../../../components/dropdown_menu'; @@ -13,50 +13,42 @@ const messages = defineMessages({ report: { id: 'status.report', defaultMessage: 'Report @{name}' } }); -const ActionBar = React.createClass({ +class ActionBar extends React.PureComponent { - contextTypes: { - router: React.PropTypes.object - }, - - propTypes: { - status: ImmutablePropTypes.map.isRequired, - onReply: React.PropTypes.func.isRequired, - onReblog: React.PropTypes.func.isRequired, - onFavourite: React.PropTypes.func.isRequired, - onDelete: React.PropTypes.func.isRequired, - onMention: React.PropTypes.func.isRequired, - onReport: React.PropTypes.func, - me: React.PropTypes.number.isRequired, - intl: React.PropTypes.object.isRequired - }, - - mixins: [PureRenderMixin], + constructor (props, context) { + super(props, context); + this.handleReplyClick = this.handleReplyClick.bind(this); + this.handleReblogClick = this.handleReblogClick.bind(this); + this.handleFavouriteClick = this.handleFavouriteClick.bind(this); + this.handleDeleteClick = this.handleDeleteClick.bind(this); + this.handleMentionClick = this.handleMentionClick.bind(this); + this.handleReport = this.handleReport.bind(this); + } handleReplyClick () { this.props.onReply(this.props.status); - }, + } handleReblogClick (e) { this.props.onReblog(this.props.status, e); - }, + } handleFavouriteClick () { this.props.onFavourite(this.props.status); - }, + } handleDeleteClick () { this.props.onDelete(this.props.status); - }, + } handleMentionClick () { this.props.onMention(this.props.status.get('account'), this.context.router); - }, + } handleReport () { this.props.onReport(this.props.status); this.context.router.push('/report'); - }, + } render () { const { status, me, intl } = this.props; @@ -85,6 +77,22 @@ const ActionBar = React.createClass({ ); } -}); +} + +ActionBar.contextTypes = { + router: PropTypes.object +}; + +ActionBar.propTypes = { + status: ImmutablePropTypes.map.isRequired, + onReply: PropTypes.func.isRequired, + onReblog: PropTypes.func.isRequired, + onFavourite: PropTypes.func.isRequired, + onDelete: PropTypes.func.isRequired, + onMention: PropTypes.func.isRequired, + onReport: PropTypes.func, + me: PropTypes.number.isRequired, + intl: PropTypes.object.isRequired +}; export default injectIntl(ActionBar); diff --git a/app/assets/javascripts/components/features/status/components/card.jsx b/app/assets/javascripts/components/features/status/components/card.jsx index d016212fd..8feb3b350 100644 --- a/app/assets/javascripts/components/features/status/components/card.jsx +++ b/app/assets/javascripts/components/features/status/components/card.jsx @@ -1,4 +1,3 @@ -import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; const contentStyle = { @@ -28,12 +27,7 @@ const getHostname = url => { return parser.hostname; }; -const Card = React.createClass({ - propTypes: { - card: ImmutablePropTypes.map - }, - - mixins: [PureRenderMixin], +class Card extends React.PureComponent { render () { const { card } = this.props; @@ -64,6 +58,10 @@ const Card = React.createClass({ ); } -}); +} + +Card.propTypes = { + card: ImmutablePropTypes.map +}; export default Card; diff --git a/app/assets/javascripts/components/features/status/components/detailed_status.jsx b/app/assets/javascripts/components/features/status/components/detailed_status.jsx index 620af36fe..566eb3974 100644 --- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx +++ b/app/assets/javascripts/components/features/status/components/detailed_status.jsx @@ -1,4 +1,4 @@ -import PureRenderMixin from 'react-addons-pure-render-mixin'; +import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Avatar from '../../../components/avatar'; import DisplayName from '../../../components/display_name'; @@ -10,20 +10,12 @@ import { Link } from 'react-router'; import { FormattedDate, FormattedNumber } from 'react-intl'; import CardContainer from '../containers/card_container'; -const DetailedStatus = React.createClass({ +class DetailedStatus extends React.PureComponent { - contextTypes: { - router: React.PropTypes.object - }, - - propTypes: { - status: ImmutablePropTypes.map.isRequired, - onOpenMedia: React.PropTypes.func.isRequired, - onOpenVideo: React.PropTypes.func.isRequired, - autoPlayGif: React.PropTypes.bool, - }, - - mixins: [PureRenderMixin], + constructor (props, context) { + super(props, context); + this.handleAccountClick = this.handleAccountClick.bind(this); + } handleAccountClick (e) { if (e.button === 0) { @@ -32,7 +24,7 @@ const DetailedStatus = React.createClass({ } e.stopPropagation(); - }, + } render () { const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status; @@ -74,6 +66,17 @@ const DetailedStatus = React.createClass({ ); } -}); +} + +DetailedStatus.contextTypes = { + router: PropTypes.object +}; + +DetailedStatus.propTypes = { + status: ImmutablePropTypes.map.isRequired, + onOpenMedia: PropTypes.func.isRequired, + onOpenVideo: PropTypes.func.isRequired, + autoPlayGif: PropTypes.bool, +}; export default DetailedStatus; diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx index ca6e08cdc..ba7c8d3ed 100644 --- a/app/assets/javascripts/components/features/status/index.jsx +++ b/app/assets/javascripts/components/features/status/index.jsx @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import PureRenderMixin from 'react-addons-pure-render-mixin'; +import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { fetchStatus } from '../../actions/statuses'; import Immutable from 'immutable'; @@ -46,33 +46,30 @@ const makeMapStateToProps = () => { return mapStateToProps; }; -const Status = React.createClass({ - contextTypes: { - router: React.PropTypes.object - }, - - propTypes: { - params: React.PropTypes.object.isRequired, - dispatch: React.PropTypes.func.isRequired, - status: ImmutablePropTypes.map, - ancestorsIds: ImmutablePropTypes.list, - descendantsIds: ImmutablePropTypes.list, - me: React.PropTypes.number, - boostModal: React.PropTypes.bool, - autoPlayGif: React.PropTypes.bool - }, - - mixins: [PureRenderMixin], +class Status extends React.PureComponent { + + constructor (props, context) { + super(props, context); + this.handleFavouriteClick = this.handleFavouriteClick.bind(this); + this.handleReplyClick = this.handleReplyClick.bind(this); + this.handleModalReblog = this.handleModalReblog.bind(this); + this.handleReblogClick = this.handleReblogClick.bind(this); + this.handleDeleteClick = this.handleDeleteClick.bind(this); + this.handleMentionClick = this.handleMentionClick.bind(this); + this.handleOpenMedia = this.handleOpenMedia.bind(this); + this.handleOpenVideo = this.handleOpenVideo.bind(this); + this.handleReport = this.handleReport.bind(this); + } componentWillMount () { this.props.dispatch(fetchStatus(Number(this.props.params.statusId))); - }, + } componentWillReceiveProps (nextProps) { if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { this.props.dispatch(fetchStatus(Number(nextProps.params.statusId))); } - }, + } handleFavouriteClick (status) { if (status.get('favourited')) { @@ -80,15 +77,15 @@ const Status = React.createClass({ } else { this.props.dispatch(favourite(status)); } - }, + } handleReplyClick (status) { this.props.dispatch(replyCompose(status, this.context.router)); - }, + } handleModalReblog (status) { this.props.dispatch(reblog(status)); - }, + } handleReblogClick (status, e) { if (status.get('reblogged')) { @@ -100,31 +97,31 @@ const Status = React.createClass({ this.props.dispatch(openModal('BOOST', { status, onReblog: this.handleModalReblog })); } } - }, + } handleDeleteClick (status) { this.props.dispatch(deleteStatus(status.get('id'))); - }, + } handleMentionClick (account, router) { this.props.dispatch(mentionCompose(account, router)); - }, + } handleOpenMedia (media, index) { this.props.dispatch(openModal('MEDIA', { media, index })); - }, + } handleOpenVideo (media, time) { this.props.dispatch(openModal('VIDEO', { media, time })); - }, + } handleReport (status) { this.props.dispatch(initReport(status.get('account'), status)); - }, + } renderChildren (list) { return list.map(id => ); - }, + } render () { let ancestors, descendants; @@ -167,6 +164,21 @@ const Status = React.createClass({ ); } -}); +} + +Status.contextTypes = { + router: PropTypes.object +}; + +Status.propTypes = { + params: PropTypes.object.isRequired, + dispatch: PropTypes.func.isRequired, + status: ImmutablePropTypes.map, + ancestorsIds: ImmutablePropTypes.list, + descendantsIds: ImmutablePropTypes.list, + me: PropTypes.number, + boostModal: PropTypes.bool, + autoPlayGif: PropTypes.bool +}; export default connect(makeMapStateToProps)(Status); -- cgit