@wordpress/block-editor
Version:
102 lines (98 loc) • 3.75 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _blockIcon = require("../block-icon");
var _style = _interopRequireDefault(require("./style.scss"));
var _sparkles = _interopRequireDefault(require("./sparkles"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* 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: %s: Block name e.g. "Image block"
(0, _i18n.__)('%s block');
const accessibilityLabel = (0, _i18n.sprintf)(accessibilityLabelFormat, item.title);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_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,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [_style.default.modalItem, {
width: maxWidth
}],
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [modalIconWrapperStyle, itemWidth && {
width: itemWidth
}, isClipboardBlock && clipboardBlockStyles],
children: [blockIsNew && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
icon: _sparkles.default,
style: _style.default.newIndicator
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: modalIconStyle,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.BlockIcon, {
icon: item.icon,
size: modalIconStyle.width
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
numberOfLines: 3,
style: modalItemLabelStyle,
children: blockTitle
})]
})
});
}
}
const InserterButton = (0, _compose.withPreferredColorScheme)(MenuItem);
InserterButton.Styles = {
modalItem: _style.default.modalItem,
modalIconWrapper: _style.default.modalIconWrapper
};
var _default = exports.default = InserterButton;
//# sourceMappingURL=index.native.js.map