# All files / composer/components ImageDescriptionInput.jsx

0% Statements 0/9
0% Branches 0/6
0% Functions 0/6
0% Lines 0/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66

     import React from 'react';
    import PropTypes from 'prop-types';
    import ComposerActionCreators from '../action-creators/ComposerActionCreators';
    import ModalActionCreators from '../__legacy-buffer-web-shared-components__/modal/actionCreators';
    import Input from '../components/Input';
    import CharacterCount from './CharacterCount';
    import styles from './css/ImageDescriptionInput.css';
    import { Button } from '@bufferapp/components';

    class ImageDescriptionInput extends React.Component {
      static propTypes = {
        draftId: PropTypes.string,
        mediaAttachment: PropTypes.object,
      };

      constructor(props) {
        super(props);
        this.state = {
          altText: this.props.mediaAttachment.altText || '',
          saveButtonText: 'Save',
          count: 0,
        };
      }

      handleChange = (e) => {
        this.setState({
          altText: e.target.value,
          saveButtonText: 'Save',
          count: e.target.value.length,
        });
      }

      componentDidUpdate = (prevProps, prevState) => {
        if (prevState.saveButtonText === 'Save' && this.state.saveButtonText === 'Saved!') {
          setTimeout(() => {
            ModalActionCreators.closeModal();
          }, 800);
        }
      };

      onClick = () => {
        ComposerActionCreators.updateImageAltText(this.props.mediaAttachment, this.state.altText);
        this.setState({ saveButtonText: 'Saved!' });
      }

      render() {
        return (
          <div className={styles.container}>
            <Input
              className={styles.textInput} type="text"
              value={this.state.altText} onChange={this.handleChange}
              placeholder="Add a description for people with visual impairments"
            />
            <CharacterCount count={this.state.count} maxCount={420} className={styles.charCount} />
              <div className={styles.button}>
                <Button onClick={this.onClick} disabled={this.state.count > 420}>
                  {this.state.saveButtonText}
                </Button>
              </div>
          </div>
        );
      }
    }

    export default ImageDescriptionInput;