Skip to content
Snippets Groups Projects
Select Git revision
  • 41cca42fda90013f923af3e86d8d00259f97a472
  • mui5-annotation-on-video-stable default
  • get_setter_canvasSizeInformations
  • fix-error-div-into-p
  • annotation-on-video-v2
  • detached
  • annotation-on-video-r17
  • mui5
  • mui5-react-18
  • jacob-test
  • annotation-on-video protected
  • master
  • test-antoinev1
  • 20-fetch-thumbnail-on-annotation
  • add-research-field
  • Save
  • add-plugin
  • 14-wip-no-seek-to
  • 14-bug-on-video-time-control
  • 9_wip_videotests
  • _upgrade_material_ui
  • latest-tetras-16
  • v3.3.0
  • v3.2.0
  • v3.1.1
  • v3.1.0
  • v3.0.0
  • v3.0.0-rc.7
  • v3.0.0-rc.6
  • v3.0.0-rc.5
  • v3.0.0-rc.4
  • v3.0.0-rc.3
  • v3.0.0-rc.2
  • v3.0.0-rc.1
  • v3.0.0-beta.10
  • v3.0.0-beta.9
  • v3.0.0-beta.8
  • v3.0.0-beta.7
  • v3.0.0-beta.6
  • v3.0.0-beta.5
  • v3.0.0-beta.3
41 results

AnnotationManifestsItem.js

Blame
  • ManifestForm.js 1.73 KiB
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    
    /**
     * Provides a form for user input of a manifest url
     * @prop {Function} fetchManifest
     * @prop {Function} setLastRequested
     */
    class ManifestForm extends Component {
      /**
       * constructor -
       */
      constructor(props) {
        super(props);
        this.state = {
          formValue: '',
        };
    
        this.formSubmit = this.formSubmit.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
      }
    
      /**
       * formSubmit - triggers manifest update and sets lastRequested
       * @param  {Event} event
       * @private
       */
      formSubmit(event) {
        const { fetchManifest, setLastRequested } = this.props;
        const { formValue } = this.state;
        event.preventDefault();
        fetchManifest(formValue);
        setLastRequested(formValue);
      }
    
      /**
       * handleInputChange - sets state based on input change.
       * @param  {Event} event
       * @private
       */
      handleInputChange(event) {
        const that = this;
        event.preventDefault();
        that.setState({
          formValue: event.target.value,
        });
      }
    
      /**
       * render
       * @return {String} - HTML markup for the component
       */
      render() {
        const { formValue } = this.state;
        const { t } = this.props;
        return (
          <form onSubmit={this.formSubmit}>
            <input
              value={formValue}
              id="manifestURL"
              type="text"
              onChange={this.handleInputChange}
            />
            <button id="fetchBtn" type="submit">{t('fetchManifest')}</button>
          </form>
        );
      }
    }
    
    ManifestForm.propTypes = {
      fetchManifest: PropTypes.func.isRequired,
      setLastRequested: PropTypes.func.isRequired,
      t: PropTypes.func,
    };
    
    ManifestForm.defaultProps = {
      t: key => key,
    };
    
    export default ManifestForm;