Remove react-sizeme (#5143)

* Remove react-sizeme

* Fix aspect ratio in "sensitive" mode
This commit is contained in:
Nolan Lawson 2017-09-29 13:46:43 -07:00 committed by Eugen Rochko
parent 1a72813b53
commit 0060f98847
3 changed files with 30 additions and 30 deletions

View File

@ -6,7 +6,6 @@ import IconButton from './icon_button';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { isIOS } from '../is_mobile'; import { isIOS } from '../is_mobile';
import classNames from 'classnames'; import classNames from 'classnames';
import sizeMe from 'react-sizeme';
const messages = defineMessages({ const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' }, toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
@ -172,7 +171,6 @@ class Item extends React.PureComponent {
} }
@injectIntl @injectIntl
@sizeMe({})
export default class MediaGallery extends React.PureComponent { export default class MediaGallery extends React.PureComponent {
static propTypes = { static propTypes = {
@ -209,21 +207,42 @@ export default class MediaGallery extends React.PureComponent {
this.props.onOpenMedia(this.props.media, index); this.props.onOpenMedia(this.props.media, index);
} }
handleRef = (node) => {
if (node && this.isStandaloneEligible()) {
// offsetWidth triggers a layout, so only calculate when we need to
this.setState({
width: node.offsetWidth,
});
}
}
isStandaloneEligible() {
const { media, standalone } = this.props;
return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
}
render () { render () {
const { media, intl, sensitive, height, standalone, size } = this.props; const { media, intl, sensitive, height } = this.props;
const { width, visible } = this.state;
let children; let children;
const standaloneEligible = standalone && size.width && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
const style = {}; const style = {};
if (standaloneEligible) { if (this.isStandaloneEligible()) {
style.height = size.width / media.getIn([0, 'meta', 'small', 'aspect']); if (!visible && width) {
// only need to forcibly set the height in "sensitive" mode
style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
} else { } else {
// layout automatically, using image's natural aspect ratio
style.height = '';
}
} else {
// crop the image
style.height = height; style.height = height;
} }
if (!this.state.visible) { if (!visible) {
let warning; let warning;
if (sensitive) { if (sensitive) {
@ -233,7 +252,7 @@ export default class MediaGallery extends React.PureComponent {
} }
children = ( children = (
<button className='media-spoiler' onClick={this.handleOpen} style={style}> <button className='media-spoiler' onClick={this.handleOpen} style={style} ref={this.handleRef}>
<span className='media-spoiler__warning'>{warning}</span> <span className='media-spoiler__warning'>{warning}</span>
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</button> </button>
@ -241,7 +260,7 @@ export default class MediaGallery extends React.PureComponent {
} else { } else {
const size = media.take(4).size; const size = media.take(4).size;
if (standaloneEligible) { if (this.isStandaloneEligible()) {
children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} autoPlayGif={this.props.autoPlayGif} />; children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} autoPlayGif={this.props.autoPlayGif} />;
} else { } else {
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} />); children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} />);
@ -250,8 +269,8 @@ export default class MediaGallery extends React.PureComponent {
return ( return (
<div className='media-gallery' style={style}> <div className='media-gallery' style={style}>
<div className={classNames('spoiler-button', { 'spoiler-button--visible': this.state.visible })}> <div className={classNames('spoiler-button', { 'spoiler-button--visible': visible })}>
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} /> <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
</div> </div>
{children} {children}

View File

@ -95,7 +95,6 @@
"react-router-dom": "^4.1.1", "react-router-dom": "^4.1.1",
"react-router-scroll": "ytase/react-router-scroll#build", "react-router-scroll": "ytase/react-router-scroll#build",
"react-simple-dropdown": "^3.0.0", "react-simple-dropdown": "^3.0.0",
"react-sizeme": "^2.3.5",
"react-swipeable-views": "^0.12.3", "react-swipeable-views": "^0.12.3",
"react-textarea-autosize": "^5.0.7", "react-textarea-autosize": "^5.0.7",
"react-toggle": "^4.0.1", "react-toggle": "^4.0.1",

View File

@ -982,10 +982,6 @@ base64-js@^1.0.2:
version "1.2.1" version "1.2.1"
resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
batch-processor@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
batch@0.6.1: batch@0.6.1:
version "0.6.1" version "0.6.1"
resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16" resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@ -2057,12 +2053,6 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.14:
version "1.3.15" version "1.3.15"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.15.tgz#08397934891cbcfaebbd18b82a95b5a481138369" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.15.tgz#08397934891cbcfaebbd18b82a95b5a481138369"
element-resize-detector@^1.1.12:
version "1.1.12"
resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.12.tgz#8b3fd6eedda17f9c00b360a0ea2df9927ae80ba2"
dependencies:
batch-processor "^1.0.0"
elliptic@^6.0.0: elliptic@^6.0.0:
version "6.4.0" version "6.4.0"
resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df" resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@ -5423,14 +5413,6 @@ react-simple-dropdown@^3.0.0:
classnames "^2.1.2" classnames "^2.1.2"
prop-types "^15.5.8" prop-types "^15.5.8"
react-sizeme@^2.3.5:
version "2.3.5"
resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.3.5.tgz#f14c0a15f9b24d7b8b6f196871b0af19aa01a422"
dependencies:
element-resize-detector "^1.1.12"
invariant "^2.2.2"
lodash "^4.17.4"
react-swipeable-views-core@^0.11.1: react-swipeable-views-core@^0.11.1:
version "0.11.1" version "0.11.1"
resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.11.1.tgz#61d046799f90725bbf91a0eb3abcab805c774cac" resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.11.1.tgz#61d046799f90725bbf91a0eb3abcab805c774cac"