@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 _reactNative = require("react-native");
var _element = require("@wordpress/element");
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 _keyboardAvoidingView = _interopRequireDefault(require("../keyboard-avoiding-view"));
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * 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 {
      editTitle,
      getStylesFromColorScheme,
      parentHeight,
      style,
      title
    } = this.props;
    const titleStyle = [getStylesFromColorScheme(_style.default.htmlViewTitle, _style.default.htmlViewTitleDark), style?.text && {
      color: style.text
    }];
    const htmlStyle = [getStylesFromColorScheme(_style.default.htmlView, _style.default.htmlViewDark), style?.text && {
      color: style.text
    }];
    const placeholderStyle = {
      ...getStylesFromColorScheme(_style.default.placeholder, _style.default.placeholderDark),
      ...(style?.text && {
        color: style.text
      })
    };
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_keyboardAvoidingView.default, {
      style: _style.default.keyboardAvoidingView,
      parentHeight: parentHeight,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
        style: _style.default.scrollView,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
          autoCorrect: false,
          accessibilityLabel: "html-view-title",
          textAlignVertical: "center",
          numberOfLines: 1,
          style: titleStyle,
          value: title,
          placeholder: (0, _i18n.__)('Add title'),
          placeholderTextColor: placeholderStyle.color,
          onChangeText: editTitle
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
          ref: this.contentTextInputRef,
          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: false
          // [Only iOS] This prop prevents the text input from
          // automatically getting focused after scrolling
          // content.
          ,
          rejectResponderTermination: false
        })]
      })
    });
  }
}
exports.HTMLTextInput = HTMLTextInput;
var _default = exports.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);
//# sourceMappingURL=index.native.js.map