@wordpress/components/build/mobile/inserter-button/index.native.js

UI components for WordPress.

"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 _components = require("@wordpress/components");

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

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

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

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

var _sparkles = _interopRequireDefault(require("./sparkles"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
class MenuItem extends _element.Component {
  constructor() {
    super(...arguments);
    this.onPress = this.onPress.bind(this);
  }

  onPress() {
    const {
      onSelect,
      item
    } = this.props;
    onSelect(item);
  }

  render() {
    const {
      getStylesFromColorScheme,
      item,
      itemWidth,
      maxWidth
    } = this.props;
    const modalIconWrapperStyle = getStylesFromColorScheme(_style.default.modalIconWrapper, _style.default.modalIconWrapperDark);
    const modalIconStyle = _style.default.modalIcon;
    const modalItemLabelStyle = getStylesFromColorScheme(_style.default.modalItemLabel, _style.default.modalItemLabelDark);
    const clipboardBlockStyles = getStylesFromColorScheme(_style.default.clipboardBlock, _style.default.clipboardBlockDark);
    const isClipboardBlock = item.id === 'clipboard';
    const blockTitle = isClipboardBlock ? (0, _i18n.__)('Copied block') : item.title;
    const blockIsNew = item.isNew === true;
    const accessibilityLabelFormat = blockIsNew ? // translators: Newly available block name. %s: The localized block name
    (0, _i18n.__)('%s block, newly available') : // translators: Block name. %s: The localized block name
    (0, _i18n.__)('%s block');
    const accessibilityLabel = (0, _i18n.sprintf)(accessibilityLabelFormat, item.title);
    return (0, _element.createElement)(_reactNative.TouchableHighlight, {
      style: [_style.default.touchableArea, item.isDisabled ? _style.default.disabled : null],
      underlayColor: "transparent",
      activeOpacity: 0.5,
      accessibilityRole: "button",
      accessibilityLabel: accessibilityLabel,
      onPress: this.onPress,
      disabled: item.isDisabled
    }, (0, _element.createElement)(_reactNative.View, {
      style: [_style.default.modalItem, {
        width: maxWidth
      }]
    }, (0, _element.createElement)(_reactNative.View, {
      style: [modalIconWrapperStyle, itemWidth && {
        width: itemWidth
      }, isClipboardBlock && clipboardBlockStyles]
    }, blockIsNew && (0, _element.createElement)(_components.Icon, {
      icon: _sparkles.default,
      style: _style.default.newIndicator
    }), (0, _element.createElement)(_reactNative.View, {
      style: modalIconStyle
    }, (0, _element.createElement)(_blockEditor.BlockIcon, {
      icon: item.icon,
      size: modalIconStyle.width
    }))), (0, _element.createElement)(_reactNative.Text, {
      numberOfLines: 3,
      style: modalItemLabelStyle
    }, blockTitle)));
  }

}

const InserterButton = (0, _compose.withPreferredColorScheme)(MenuItem);
InserterButton.Styles = {
  modalItem: _style.default.modalItem,
  modalIconWrapper: _style.default.modalIconWrapper
};
var _default = InserterButton;
exports.default = _default;
//# sourceMappingURL=index.native.js.map