@wordpress/block-editor/build/components/inserter/search-form.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("@wordpress/element");

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

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

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

var _components = require("@wordpress/components");

var _icons = require("@wordpress/icons");

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function InserterSearchForm({
  value,
  onChange,
  onLayout = () => {}
}) {
  const [isActive, setIsActive] = (0, _element.useState)(false);
  const inputRef = (0, _element.useRef)();
  const searchFormStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.searchForm, _style.default.searchFormDark);
  const searchFormInputStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.searchFormInput, _style.default.searchFormInputDark);
  const placeholderStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.searchFormPlaceholder, _style.default.searchFormPlaceholderDark);
  return (0, _element.createElement)(_reactNative.TouchableHighlight, {
    accessible: false,
    onLayout: onLayout
  }, (0, _element.createElement)(_reactNative.View, {
    style: searchFormStyle
  }, isActive ? (0, _element.createElement)(_components.ToolbarButton, {
    title: (0, _i18n.__)('Cancel search'),
    icon: _icons.arrowLeft,
    onClick: () => {
      inputRef.current.blur();
      onChange('');
      setIsActive(false);
    }
  }) : (0, _element.createElement)(_components.ToolbarButton, {
    title: (0, _i18n.__)('Search block'),
    icon: _icons.search,
    onClick: () => {
      inputRef.current.focus();
      setIsActive(true);
    }
  }), (0, _element.createElement)(_reactNative.TextInput, {
    ref: inputRef,
    style: searchFormInputStyle,
    placeholderTextColor: placeholderStyle.color,
    onChangeText: onChange,
    onFocus: () => setIsActive(true),
    value: value,
    placeholder: (0, _i18n.__)('Search blocks')
  }), !!value && (0, _element.createElement)(_components.ToolbarButton, {
    title: (0, _i18n.__)('Clear search'),
    icon: (0, _element.createElement)(_icons.Icon, {
      icon: _icons.cancelCircleFilled
    }),
    onClick: () => {
      onChange('');
    }
  })));
}

var _default = InserterSearchForm;
exports.default = _default;
//# sourceMappingURL=search-form.native.js.map