react-spatial/components/PermalinkInput/PermalinkInput.js

Components to build React map apps.

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { MdContentCopy } from 'react-icons/md';
import Button from '../Button';

var propTypes = {
  /**
   * Value of the permalink
   */
  value: PropTypes.string,

  /**
   * CSS class of the container (input+button).
   */
  className: PropTypes.string,

  /**
   * CSS class of the input field.
   */
  classNameInputField: PropTypes.string,

  /**
   * CSS class of the copy button.
   */
  classNameCopyBt: PropTypes.string,

  /**
   * Content for copy button.
   */
  button: PropTypes.any,

  /**
   * Title for the copy button.
   */
  titleCopyBt: PropTypes.string,

  /**
   * Title for the input field.
   */
  titleInputField: PropTypes.string,

  /**
   * Callback function to get a shortened URL.
   */
  getShortenedUrl: PropTypes.func,
};

var defaultProps = {
  value: '',
  className: 'tm-permalink-field',
  classNameInputField: 'tm-permalink-input',
  classNameCopyBt: 'tm-permalink-bt',
  titleCopyBt: '',
  titleInputField: '',
  button: React.createElement( MdContentCopy, { focusable: false }),
  getShortenedUrl: function (val) {
    return new Promise(function (resolve) {
      return resolve(val);
    });
  },
};

/**
 * This component displays a permalink field.
 */
var PermalinkInput = /*@__PURE__*/(function (PureComponent) {
  function PermalinkInput(props) {
    PureComponent.call(this, props);
    this.state = { permalinkValue: null };
    this.inputRef = null;
  }

  if ( PureComponent ) PermalinkInput.__proto__ = PureComponent;
  PermalinkInput.prototype = Object.create( PureComponent && PureComponent.prototype );
  PermalinkInput.prototype.constructor = PermalinkInput;

  PermalinkInput.selectInput = function selectInput () {
    document.execCommand('selectall');
  };

  PermalinkInput.prototype.componentDidMount = function componentDidMount () {
    var ref = this.props;
    var value = ref.value;

    if (value) {
      this.updatePermalinkValue();
    }
  };

  PermalinkInput.prototype.componentDidUpdate = function componentDidUpdate (prevProps) {
    var ref = this.props;
    var value = ref.value;

    if (value !== prevProps.value) {
      this.updatePermalinkValue();
    }
  };

  PermalinkInput.prototype.onClickCopyButton = function onClickCopyButton () {
    if (this.inputRef) {
      this.inputRef.select();
    }
    document.execCommand('copy');
  };

  PermalinkInput.prototype.updatePermalinkValue = function updatePermalinkValue () {
    var this$1 = this;

    var ref = this.props;
    var value = ref.value;
    var getShortenedUrl = ref.getShortenedUrl;

    return getShortenedUrl(value).then(function (v) {
      this$1.setState({ permalinkValue: v });
    });
  };

  PermalinkInput.prototype.render = function render () {
    var this$1 = this;

    var ref = this.props;
    var button = ref.button;
    var className = ref.className;
    var classNameInputField = ref.classNameInputField;
    var classNameCopyBt = ref.classNameCopyBt;
    var titleCopyBt = ref.titleCopyBt;
    var titleInputField = ref.titleInputField;

    var ref$1 = this.state;
    var permalinkValue = ref$1.permalinkValue;
    return (
      React.createElement( 'div', { className: className },
        React.createElement( 'input', {
          value: permalinkValue || '', type: "text", tabIndex: "0", title: titleInputField, className: classNameInputField, ref: function (node) {
            this$1.inputRef = node;
          }, onClick: function () { return PermalinkInput.selectInput(); }, onChange: function () {} }),
        React.createElement( Button, {
          className: classNameCopyBt, title: titleCopyBt, onClick: function () {
            this$1.onClickCopyButton();
          } },
          button
        )
      )
    );
  };

  return PermalinkInput;
}(PureComponent));

PermalinkInput.propTypes = propTypes;
PermalinkInput.defaultProps = defaultProps;

export default PermalinkInput;

//# sourceMappingURL=PermalinkInput.js.map