@wordpress/block-editor
Version:
140 lines (135 loc) • 4.25 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 _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _blockTypesTab = _interopRequireDefault(require("./block-types-tab"));
var _reusableBlocksTab = _interopRequireDefault(require("./reusable-blocks-tab"));
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const TAB_ANIMATION_DURATION = 250;
function InserterTabs({
listProps,
onSelect,
rootClientId,
showReusableBlocks,
tabIndex
}) {
const tabAnimation = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
const lastScrollEvents = (0, _element.useRef)([]).current;
const [wrapperWidth, setWrapperWidth] = (0, _element.useState)(0);
function onScroll(event) {
lastScrollEvents[tabIndex] = event.nativeEvent;
listProps.onScroll(event);
}
const onWrapperLayout = (0, _element.useCallback)(({
nativeEvent
}) => {
setWrapperWidth(nativeEvent.layout.width);
}, [setWrapperWidth]);
(0, _element.useEffect)(() => {
_reactNative.Animated.timing(tabAnimation, {
duration: TAB_ANIMATION_DURATION,
toValue: tabIndex,
useNativeDriver: true
}).start();
// Notify upstream with the last scroll event of the current tab.
const lastScrollEvent = lastScrollEvents[tabIndex];
if (lastScrollEvent) {
listProps.onScroll({
nativeEvent: lastScrollEvent
});
}
}, [tabIndex]);
const {
tabs,
tabKeys
} = (0, _element.useMemo)(() => {
const filteredTabs = InserterTabs.getTabs().filter(({
name
}) => showReusableBlocks || name !== 'reusable');
return {
tabs: filteredTabs,
tabKeys: [...filteredTabs.keys()]
};
}, [showReusableBlocks]);
const translateX = (0, _element.useMemo)(() => tabKeys.length > 1 ? tabAnimation.interpolate({
inputRange: tabKeys,
outputRange: tabKeys.map(key => key * -wrapperWidth)
}) : tabAnimation, [tabAnimation, tabKeys, wrapperWidth]);
const containerStyle = [_style.default['inserter-tabs__container'], {
width: wrapperWidth * tabKeys.length,
transform: [{
translateX
}]
}];
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _style.default['inserter-tabs__wrapper'],
onLayout: onWrapperLayout,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
style: containerStyle,
children: tabs.map(({
component: TabComponent
}, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TabComponent, {
rootClientId: rootClientId,
onSelect: onSelect,
listProps: {
...listProps,
onScroll
}
})
}, `tab-${index}`))
})
});
}
function TabsControl({
onChangeTab,
showReusableBlocks
}) {
const tabs = InserterTabs.getTabs();
const segments = (0, _element.useMemo)(() => {
const filteredTabs = tabs.filter(({
name
}) => showReusableBlocks || name !== 'reusable');
return filteredTabs.map(({
title
}) => title);
}, [showReusableBlocks]);
const segmentHandler = (0, _element.useCallback)(selectedTab => {
const tabTitles = tabs.map(({
title
}) => title);
onChangeTab(tabTitles.indexOf(selectedTab));
}, [onChangeTab]);
return segments.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SegmentedControl, {
segments: segments,
segmentHandler: segmentHandler
}) : null;
}
InserterTabs.Control = TabsControl;
InserterTabs.getTabs = () => [{
name: 'blocks',
title: (0, _i18n.__)('Blocks'),
component: _blockTypesTab.default
}, {
name: 'reusable',
title: (0, _i18n.__)('Synced patterns'),
component: _reusableBlocksTab.default
}];
var _default = exports.default = InserterTabs;
//# sourceMappingURL=tabs.native.js.map