@wordpress/components
Version:
UI components for WordPress.
79 lines (75 loc) • 2.68 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 _native = require("@react-navigation/native");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _navBar = _interopRequireDefault(require("../bottom-sheet/nav-bar"));
var _styles = _interopRequireDefault(require("./styles.scss"));
var _bottomSheetContext = require("../bottom-sheet/bottom-sheet-context");
var _focalPointPicker = _interopRequireDefault(require("../../focal-point-picker"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const FocalPointSettingsPanelMemo = (0, _element.memo)(({
focalPoint,
onFocalPointChange,
shouldEnableBottomSheetScroll,
url
}) => {
const navigation = (0, _native.useNavigation)();
function onButtonPress(action) {
navigation.goBack();
if (action === 'apply') {
onFocalPointChange(draftFocalPoint);
}
}
const [draftFocalPoint, setDraftFocalPoint] = (0, _element.useState)(focalPoint);
function setPosition(coordinates) {
setDraftFocalPoint(prevState => ({
...prevState,
...coordinates
}));
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.SafeAreaView, {
style: _styles.default.safearea,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_navBar.default, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_navBar.default.DismissButton, {
onPress: () => onButtonPress('cancel')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_navBar.default.Heading, {
children: (0, _i18n.__)('Edit focal point')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_navBar.default.ApplyButton, {
onPress: () => onButtonPress('apply')
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_focalPointPicker.default, {
focalPoint: draftFocalPoint,
onChange: (0, _element.useCallback)(setPosition, []),
shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll,
url: url
})]
});
});
function FocalPointSettingsPanel(props) {
const route = (0, _native.useRoute)();
const {
shouldEnableBottomSheetScroll
} = (0, _element.useContext)(_bottomSheetContext.BottomSheetContext);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(FocalPointSettingsPanelMemo, {
shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll,
...props,
...route.params
});
}
var _default = exports.default = FocalPointSettingsPanel;
//# sourceMappingURL=index.native.js.map