@wordpress/components/build/mobile/html-text-input/index.native.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.HTMLTextInput = void 0;

var _element = require("@wordpress/element");

var _reactNative = require("react-native");

var _i18n = require("@wordpress/i18n");

var _blocks = require("@wordpress/blocks");

var _data = require("@wordpress/data");

var _hooks = require("@wordpress/hooks");

var _compose = require("@wordpress/compose");

var _container = _interopRequireDefault(require("./container"));

var _style = _interopRequireDefault(require("./style.scss"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
class HTMLTextInput extends _element.Component {
  constructor() {
    super(...arguments);
    this.edit = this.edit.bind(this);
    this.stopEditing = this.stopEditing.bind(this);
    this.getHTMLForParent = this.getHTMLForParent.bind(this);
    (0, _hooks.addFilter)('native.persist-html', 'html-text-input', this.getHTMLForParent);
    this.state = {};
  }

  static getDerivedStateFromProps(props, state) {
    if (state.isDirty) {
      return null;
    }

    return {
      value: props.value,
      isDirty: false
    };
  }

  componentWillUnmount() {
    (0, _hooks.removeFilter)('native.persist-html', 'html-text-input'); //TODO: Blocking main thread

    this.stopEditing();
  }

  edit(html) {
    this.props.onChange(html);
    this.setState({
      value: html,
      isDirty: true
    });
  }

  getHTMLForParent() {
    return this.state.value;
  }

  stopEditing() {
    if (this.state.isDirty) {
      this.props.onPersist(this.state.value);
      this.setState({
        isDirty: false
      });
    }
  }

  render() {
    const {
      getStylesFromColorScheme
    } = this.props;
    const htmlStyle = getStylesFromColorScheme(_style.default.htmlView, _style.default.htmlViewDark);
    const placeholderStyle = getStylesFromColorScheme(_style.default.placeholder, _style.default.placeholderDark);
    return (0, _element.createElement)(_container.default, {
      parentHeight: this.props.parentHeight
    }, (0, _element.createElement)(_reactNative.TextInput, {
      autoCorrect: false,
      accessibilityLabel: "html-view-title",
      textAlignVertical: "center",
      numberOfLines: 1,
      style: _style.default.htmlViewTitle,
      value: this.props.title,
      placeholder: (0, _i18n.__)('Add title'),
      placeholderTextColor: placeholderStyle.color,
      onChangeText: this.props.editTitle
    }), (0, _element.createElement)(_reactNative.TextInput, {
      autoCorrect: false,
      accessibilityLabel: "html-view-content",
      textAlignVertical: "top",
      multiline: true,
      style: htmlStyle,
      value: this.state.value,
      onChangeText: this.edit,
      onBlur: this.stopEditing,
      placeholder: (0, _i18n.__)('Start writing…'),
      placeholderTextColor: placeholderStyle.color,
      scrollEnabled: _container.default.scrollEnabled
    }));
  }

}

exports.HTMLTextInput = HTMLTextInput;

var _default = (0, _compose.compose)([(0, _data.withSelect)(select => {
  const {
    getEditedPostAttribute,
    getEditedPostContent
  } = select('core/editor');
  return {
    title: getEditedPostAttribute('title'),
    value: getEditedPostContent()
  };
}), (0, _data.withDispatch)(dispatch => {
  const {
    editPost,
    resetEditorBlocks
  } = dispatch('core/editor');
  return {
    editTitle(title) {
      editPost({
        title
      });
    },

    onChange(content) {
      editPost({
        content
      });
    },

    onPersist(content) {
      const blocks = (0, _blocks.parse)(content);
      resetEditorBlocks(blocks);
    }

  };
}), _compose.withInstanceId, _compose.withPreferredColorScheme])(HTMLTextInput);

exports.default = _default;
//# sourceMappingURL=index.native.js.map