@wordpress/block-editor
Version:
126 lines (122 loc) • 4.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _navUpIcon = _interopRequireDefault(require("./nav-up-icon"));
var _blockSelectionButton = _interopRequireDefault(require("../block-list/block-selection-button.native"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const EASE_IN_DURATION = 250;
const EASE_OUT_DURATION = 80;
const TRANSLATION_RANGE = 8;
const FloatingToolbar = ({
selectedClientId,
parentId,
showFloatingToolbar,
onNavigateUp,
isRTL
}) => {
const opacity = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
// Sustain old selection for proper block selection button rendering when exit animation is ongoing.
const [previousSelection, setPreviousSelection] = (0, _element.useState)({});
(0, _element.useEffect)(() => {
_reactNative.Animated.timing(opacity, {
toValue: showFloatingToolbar ? 1 : 0,
duration: showFloatingToolbar ? EASE_IN_DURATION : EASE_OUT_DURATION,
easing: _reactNative.Easing.ease,
useNativeDriver: true
}).start();
}, [showFloatingToolbar]);
(0, _element.useEffect)(() => {
if (showFloatingToolbar) {
setPreviousSelection({
clientId: selectedClientId,
parentId
});
}
}, [selectedClientId]);
const translationRange = (_reactNative.Platform.OS === 'android' ? -1 : 1) * TRANSLATION_RANGE;
const translation = opacity.interpolate({
inputRange: [0, 1],
outputRange: [translationRange, 0]
});
const animationStyle = {
opacity,
transform: [{
translateY: translation
}]
};
const {
clientId: previousSelectedClientId,
parentId: previousSelectedParentId
} = previousSelection;
const showPrevious = previousSelectedClientId && !showFloatingToolbar;
const blockSelectionButtonClientId = showPrevious ? previousSelectedClientId : selectedClientId;
const showNavUpButton = !!parentId || showPrevious && !!previousSelectedParentId;
return !!opacity && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
style: [_styles.default.floatingToolbar, animationStyle],
pointerEvents: showFloatingToolbar ? 'auto' : 'none',
children: [showNavUpButton && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ToolbarGroup, {
passedStyle: _styles.default.toolbar,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
title: (0, _i18n.__)('Navigate Up'),
onClick: !showPrevious && (() => onNavigateUp(parentId)),
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_navUpIcon.default, {
isRTL: isRTL
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _styles.default.pipe
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockSelectionButton.default, {
clientId: blockSelectionButtonClientId
})]
});
};
var _default = exports.default = (0, _compose.compose)([(0, _data.withSelect)(select => {
const {
getSelectedBlockClientId,
getBlockHierarchyRootClientId,
getBlockRootClientId,
getBlockCount,
getSettings
} = select(_store.store);
const selectedClientId = getSelectedBlockClientId();
if (!selectedClientId) {
return;
}
const rootBlockId = getBlockHierarchyRootClientId(selectedClientId);
return {
selectedClientId,
showFloatingToolbar: !!getBlockCount(rootBlockId),
parentId: getBlockRootClientId(selectedClientId),
isRTL: getSettings().isRTL
};
}), (0, _data.withDispatch)(dispatch => {
const {
selectBlock
} = dispatch(_store.store);
return {
onNavigateUp(clientId, initialPosition) {
selectBlock(clientId, initialPosition);
}
};
})])(FloatingToolbar);
//# sourceMappingURL=index.native.js.map