@gechiui/block-editor/build/components/plain-text/index.native.js

Generic block editor.

"use strict";

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

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

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

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

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

var _blockEditor = require("@gechiui/block-editor");

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
class PlainText extends _element.Component {
  constructor() {
    super(...arguments);
    this.isAndroid = _reactNative.Platform.OS === 'android';
  }

  componentDidMount() {
    // if isSelected is true, we should request the focus on this TextInput
    if (this._input && this._input.isFocused() === false && this.props.isSelected) {
      if (this.isAndroid) {
        /*
         * There seems to be an issue in React Native where the keyboard doesn't show if called shortly after rendering.
         * As a common work around this delay is used.
         * https://github.com/facebook/react-native/issues/19366#issuecomment-400603928
         */
        this.timeoutID = setTimeout(() => {
          this._input.focus();
        }, 100);
      } else {
        this._input.focus();
      }
    }
  }

  componentDidUpdate(prevProps) {
    if (!this.props.isSelected && prevProps.isSelected) {
      this._input.blur();
    }
  }

  componentWillUnmount() {
    if (this.isAndroid) {
      clearTimeout(this.timeoutID);
    }
  }

  focus() {
    this._input.focus();
  }

  blur() {
    this._input.blur();
  }

  getFontSize() {
    const {
      style
    } = this.props;

    if (!(style !== null && style !== void 0 && style.fontSize)) {
      return;
    }

    const {
      width,
      height
    } = _reactNative.Dimensions.get('window');

    const cssUnitOptions = {
      height,
      width
    };
    return {
      fontSize: parseFloat((0, _blockEditor.getPxFromCssUnit)(style.fontSize, cssUnitOptions))
    };
  }

  render() {
    const {
      style
    } = this.props;
    const textStyles = [style || _style.default['block-editor-plain-text'], this.getFontSize()];
    return (0, _element.createElement)(_reactNative.TextInput, (0, _extends2.default)({}, this.props, {
      ref: x => this._input = x,
      onChange: event => {
        this.props.onChange(event.nativeEvent.text);
      },
      onFocus: this.props.onFocus // always assign onFocus as a props
      ,
      onBlur: this.props.onBlur // always assign onBlur as a props
      ,
      fontFamily: this.props.style && this.props.style.fontFamily || _style.default['block-editor-plain-text'].fontFamily,
      style: textStyles,
      scrollEnabled: false
    }));
  }

}

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