@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
143 lines (139 loc) • 6.06 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 _clipboard = _interopRequireDefault(require("@react-native-clipboard/clipboard"));
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _reactNativeBridge = require("@wordpress/react-native-bridge");
var _compose = require("@wordpress/compose");
var _icons = require("@wordpress/icons");
var _components = require("@wordpress/components");
var _store = require("../../store");
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function getContent() {
try {
// While `select` in a component is generally discouraged, it is
// used here because it (a) reduces the chance of data loss in the
// case of additional errors by performing a direct retrieval and
// (b) avoids the performance cost associated with unnecessary
// content serialization throughout the lifetime of a non-erroring
// application.
return (0, _data.select)(_store.store).getEditedPostContent();
} catch (error) {}
}
function CopyButton({
text,
label,
accessibilityLabel,
accessibilityHint,
secondary = false
}) {
const containerStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['copy-button__container'], _style.default['copy-button__container--dark']);
const containerSecondaryStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['copy-button__container--secondary'], _style.default['copy-button__container--secondary-dark']);
const textStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['copy-button__text'], _style.default['copy-button__text--dark']);
const textSecondaryStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['copy-button__text--secondary'], _style.default['copy-button__text--secondary-dark']);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
activeOpacity: 0.5,
accessibilityLabel: accessibilityLabel,
style: [containerStyle, secondary && containerSecondaryStyle],
accessibilityRole: "button",
accessibilityHint: accessibilityHint,
onPress: () => {
_clipboard.default.setString(typeof text === 'function' ? text() : text || '');
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [textStyle, secondary && textSecondaryStyle],
children: label
})
});
}
class ErrorBoundary extends _element.Component {
constructor() {
super(...arguments);
this.state = {
error: null
};
}
componentDidCatch(error) {
(0, _reactNativeBridge.logException)(error, {
context: {
component_stack: error.componentStack
},
isHandled: true,
handledBy: 'Editor-level Error Boundary'
});
}
static getDerivedStateFromError(error) {
return {
error
};
}
render() {
const {
error
} = this.state;
if (!error) {
return this.props.children;
}
const {
getStylesFromColorScheme
} = this.props;
const iconContainerStyle = getStylesFromColorScheme(_style.default['error-boundary__icon-container'], _style.default['error-boundary__icon-container--dark']);
const titleStyle = getStylesFromColorScheme(_style.default['error-boundary__title'], _style.default['error-boundary__title--dark']);
const messageStyle = getStylesFromColorScheme(_style.default['error-boundary__message'], _style.default['error-boundary__message--dark']);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSafeAreaContext.SafeAreaView, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
style: _style.default['error-boundary__scroll'],
contentContainerStyle: _style.default['error-boundary__scroll-container'],
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: _style.default['error-boundary__container'],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: iconContainerStyle,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
icon: _icons.warning,
..._style.default['error-boundary__icon']
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: titleStyle,
children: (0, _i18n.__)('The editor has encountered an unexpected error')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: messageStyle,
children: (0, _i18n.__)('You can copy your post text in case your content is impacted. Copy error details to debug and share with support.')
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: _style.default['error-boundary__actions-container'],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CopyButton, {
label: (0, _i18n.__)('Copy post text'),
accessibilityLabel: (0, _i18n.__)('Button to copy post text'),
accessibilityHint: (0, _i18n.__)('Tap here to copy post text'),
text: getContent
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyButton, {
label: (0, _i18n.__)('Copy error details'),
accessibilityLabel: (0, _i18n.__)('Button to copy error details'),
accessibilityHint: (0, _i18n.__)('Tap here to copy error details'),
text: error.stack,
secondary: true
})]
})]
})
})
});
}
}
var _default = exports.default = (0, _compose.withPreferredColorScheme)(ErrorBoundary);
//# sourceMappingURL=index.native.js.map