commit: 677e95031e179ccdd69162002ccbfb482f396e4e
parent: 2d8a4c4390acba310972d7dac21b93c4e2ac9f4e
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 13 Feb 2017 17:20:18 +0100
Clean up collapsible components
Diffstat:
3 files changed, 39 insertions(+), 26 deletions(-)
diff --git a/app/assets/javascripts/components/components/collapsable.jsx b/app/assets/javascripts/components/components/collapsable.jsx
@@ -0,0 +1,19 @@
+import { Motion, spring } from 'react-motion';
+
+const Collapsable = ({ fullHeight, isVisible, children }) => (
+ <Motion defaultStyle={{ opacity: !isVisible ? 0 : 100, height: isVisible ? fullHeight : 0 }} style={{ opacity: spring(!isVisible ? 0 : 100), height: spring(!isVisible ? 0 : fullHeight) }}>
+ {({ opacity, height }) =>
+ <div style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100, display: Math.floor(opacity) === 0 ? 'none' : 'block' }}>
+ {children}
+ </div>
+ }
+ </Motion>
+);
+
+Collapsable.propTypes = {
+ fullHeight: React.PropTypes.number.isRequired,
+ isVisible: React.PropTypes.bool.isRequired,
+ children: React.PropTypes.node.isRequired
+};
+
+export default Collapsable;
diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx
@@ -10,7 +10,7 @@ import { debounce } from 'react-decoration';
import UploadButtonContainer from '../containers/upload_button_container';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Toggle from 'react-toggle';
-import { Motion, spring } from 'react-motion';
+import Collapsable from '../../../components/collapsable';
const messages = defineMessages({
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
@@ -136,13 +136,11 @@ const ComposeForm = React.createClass({
return (
<div style={{ padding: '10px' }}>
- <Motion defaultStyle={{ opacity: !this.props.spoiler ? 0 : 100, height: !this.props.spoiler ? 50 : 0 }} style={{ opacity: spring(!this.props.spoiler ? 0 : 100), height: spring(!this.props.spoiler ? 0 : 50) }}>
- {({ opacity, height }) =>
- <div className="spoiler-input" style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
- <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} type="text" className="spoiler-input__input" />
- </div>
- }
- </Motion>
+ <Collapsable isVisible={this.props.spoiler} fullHeight={50}>
+ <div className="spoiler-input">
+ <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} type="text" className="spoiler-input__input" />
+ </div>
+ </Collapsable>
{replyArea}
@@ -176,23 +174,19 @@ const ComposeForm = React.createClass({
<span className='compose-form__label__text'><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span>
</label>
- <Motion defaultStyle={{ opacity: (this.props.private || reply_to_other) ? 0 : 100, height: (this.props.private || reply_to_other) ? 39.5 : 0 }} style={{ opacity: spring((this.props.private || reply_to_other) ? 0 : 100), height: spring((this.props.private || reply_to_other) ? 0 : 39.5) }}>
- {({ opacity, height }) =>
- <label className='compose-form__label' style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
- <Toggle checked={this.props.unlisted} onChange={this.handleChangeListability} />
- <span className='compose-form__label__text'><FormattedMessage id='compose_form.unlisted' defaultMessage='Do not display in public timeline' /></span>
- </label>
- }
- </Motion>
-
- <Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(this.props.media_count === 0 ? 0 : 100), height: spring(this.props.media_count === 0 ? 0 : 39.5) }}>
- {({ opacity, height }) =>
- <label className='compose-form__label' style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
- <Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} />
- <span className='compose-form__label__text'><FormattedMessage id='compose_form.sensitive' defaultMessage='Mark media as sensitive' /></span>
- </label>
- }
- </Motion>
+ <Collapsable isVisible={!(this.props.private || reply_to_other)} fullHeight={39.5}>
+ <label className='compose-form__label'>
+ <Toggle checked={this.props.unlisted} onChange={this.handleChangeListability} />
+ <span className='compose-form__label__text'><FormattedMessage id='compose_form.unlisted' defaultMessage='Do not display in public timeline' /></span>
+ </label>
+ </Collapsable>
+
+ <Collapsable isVisible={this.props.media_count > 0} fullHeight={39.5}>
+ <label className='compose-form__label'>
+ <Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} />
+ <span className='compose-form__label__text'><FormattedMessage id='compose_form.sensitive' defaultMessage='Mark media as sensitive' /></span>
+ </label>
+ </Collapsable>
</div>
);
}
diff --git a/app/assets/javascripts/components/reducers/compose.jsx b/app/assets/javascripts/components/reducers/compose.jsx
@@ -89,7 +89,7 @@ function removeMedia(state, mediaId) {
map.update('text', text => text.replace(media.get('text_url'), '').trim());
if (prevSize === 1) {
- map.update('sensitive', false);
+ map.set('sensitive', false);
}
});
};
