You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

130 lines
4.4 KiB

  1. import React from 'react';
  2. import ImmutablePropTypes from 'react-immutable-proptypes';
  3. import PropTypes from 'prop-types';
  4. import Motion from '../../ui/util/optional_motion';
  5. import spring from 'react-motion/lib/spring';
  6. import ImmutablePureComponent from 'react-immutable-pure-component';
  7. import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
  8. import classNames from 'classnames';
  9. import Icon from 'mastodon/components/icon';
  10. const messages = defineMessages({
  11. description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
  12. });
  13. export default @injectIntl
  14. class Upload extends ImmutablePureComponent {
  15. static contextTypes = {
  16. router: PropTypes.object,
  17. };
  18. static propTypes = {
  19. media: ImmutablePropTypes.map.isRequired,
  20. intl: PropTypes.object.isRequired,
  21. onUndo: PropTypes.func.isRequired,
  22. onDescriptionChange: PropTypes.func.isRequired,
  23. onOpenFocalPoint: PropTypes.func.isRequired,
  24. onSubmit: PropTypes.func.isRequired,
  25. };
  26. state = {
  27. hovered: false,
  28. focused: false,
  29. dirtyDescription: null,
  30. };
  31. handleKeyDown = (e) => {
  32. if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
  33. this.handleSubmit();
  34. }
  35. }
  36. handleSubmit = () => {
  37. this.handleInputBlur();
  38. this.props.onSubmit(this.context.router.history);
  39. }
  40. handleUndoClick = e => {
  41. e.stopPropagation();
  42. this.props.onUndo(this.props.media.get('id'));
  43. }
  44. handleFocalPointClick = e => {
  45. e.stopPropagation();
  46. this.props.onOpenFocalPoint(this.props.media.get('id'));
  47. }
  48. handleInputChange = e => {
  49. this.setState({ dirtyDescription: e.target.value });
  50. }
  51. handleMouseEnter = () => {
  52. this.setState({ hovered: true });
  53. }
  54. handleMouseLeave = () => {
  55. this.setState({ hovered: false });
  56. }
  57. handleInputFocus = () => {
  58. this.setState({ focused: true });
  59. }
  60. handleClick = () => {
  61. this.setState({ focused: true });
  62. }
  63. handleInputBlur = () => {
  64. const { dirtyDescription } = this.state;
  65. this.setState({ focused: false, dirtyDescription: null });
  66. if (dirtyDescription !== null) {
  67. this.props.onDescriptionChange(this.props.media.get('id'), dirtyDescription);
  68. }
  69. }
  70. render () {
  71. const { intl, media } = this.props;
  72. const active = this.state.hovered || this.state.focused;
  73. const description = this.state.dirtyDescription || (this.state.dirtyDescription !== '' && media.get('description')) || '';
  74. const focusX = media.getIn(['meta', 'focus', 'x']);
  75. const focusY = media.getIn(['meta', 'focus', 'y']);
  76. const x = ((focusX / 2) + .5) * 100;
  77. const y = ((focusY / -2) + .5) * 100;
  78. return (
  79. <div className='compose-form__upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'>
  80. <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
  81. {({ scale }) => (
  82. <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
  83. <div className={classNames('compose-form__upload__actions', { active })}>
  84. <button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
  85. {media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>}
  86. </div>
  87. <div className={classNames('compose-form__upload-description', { active })}>
  88. <label>
  89. <span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
  90. <input
  91. placeholder={intl.formatMessage(messages.description)}
  92. type='text'
  93. value={description}
  94. maxLength={420}
  95. onFocus={this.handleInputFocus}
  96. onChange={this.handleInputChange}
  97. onBlur={this.handleInputBlur}
  98. onKeyDown={this.handleKeyDown}
  99. />
  100. </label>
  101. </div>
  102. </div>
  103. )}
  104. </Motion>
  105. </div>
  106. );
  107. }
  108. }