mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-24 10:27:10 +02:00
123 lines
3.1 KiB
TypeScript
123 lines
3.1 KiB
TypeScript
import { _ } from '@joplin/lib/locale';
|
|
import { ReactElement, useCallback, useState } from 'react';
|
|
import { LayoutChangeEvent, ScrollView, View } from 'react-native';
|
|
import ToggleOverflowButton from './ToggleOverflowButton';
|
|
import ToolbarButton, { buttonSize } from './ToolbarButton';
|
|
import { ButtonGroup, ButtonSpec, StyleSheetData } from './types';
|
|
|
|
const React = require('react');
|
|
|
|
type OnToggleOverflowCallback = ()=> void;
|
|
interface OverflowPopupProps {
|
|
buttonGroups: ButtonGroup[];
|
|
styleSheet: StyleSheetData;
|
|
visible: boolean;
|
|
|
|
// Should be created using useCallback
|
|
onToggleOverflow: OnToggleOverflowCallback;
|
|
}
|
|
|
|
// Contains buttons that overflow the available space.
|
|
// Displays all buttons in [props.buttonGroups] if [props.visible].
|
|
// Otherwise, displays nothing.
|
|
const ToolbarOverflowRows = (props: OverflowPopupProps) => {
|
|
const overflowRows: ReactElement[] = [];
|
|
|
|
let key = 0;
|
|
for (let i = 0; i < props.buttonGroups.length; i++) {
|
|
key++;
|
|
const row: ReactElement[] = [];
|
|
|
|
const group = props.buttonGroups[i];
|
|
for (let j = 0; j < group.items.length; j++) {
|
|
key++;
|
|
|
|
const buttonSpec = group.items[j];
|
|
row.push(
|
|
<ToolbarButton
|
|
key={key.toString()}
|
|
styleSheet={props.styleSheet}
|
|
spec={buttonSpec}
|
|
|
|
// After invoking this button's action, hide the overflow menu
|
|
onActionComplete={props.onToggleOverflow}
|
|
/>
|
|
);
|
|
|
|
// Show the "hide overflow" button if in the center of the last row
|
|
const isLastRow = i === props.buttonGroups.length - 1;
|
|
const isCenterOfRow = j + 1 === Math.floor(group.items.length / 2);
|
|
if (isLastRow && isCenterOfRow) {
|
|
row.push(
|
|
<ToggleOverflowButton
|
|
key={(++key).toString()}
|
|
styleSheet={props.styleSheet}
|
|
overflowVisible={true}
|
|
onToggleOverflowVisible={props.onToggleOverflow}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
overflowRows.push(
|
|
<View
|
|
key={key.toString()}
|
|
>
|
|
<ScrollView
|
|
horizontal={true}
|
|
contentContainerStyle={props.styleSheet.styles.toolbarContent}
|
|
>
|
|
{row}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const [hasSpaceForCloseBtn, setHasSpaceForCloseBtn] = useState(true);
|
|
const onContainerLayout = useCallback((event: LayoutChangeEvent) => {
|
|
if (props.buttonGroups.length === 0) {
|
|
return;
|
|
}
|
|
|
|
// Add 1 to account for the close button
|
|
const totalButtonCount = props.buttonGroups[0].items.length + 1;
|
|
|
|
const newWidth = event.nativeEvent.layout.width;
|
|
setHasSpaceForCloseBtn(newWidth > totalButtonCount * buttonSize);
|
|
}, [setHasSpaceForCloseBtn, props.buttonGroups]);
|
|
|
|
const closeButtonSpec: ButtonSpec = {
|
|
icon: '⨉',
|
|
description: _('Close'),
|
|
onPress: props.onToggleOverflow,
|
|
};
|
|
const closeButton = (
|
|
<ToolbarButton
|
|
styleSheet={props.styleSheet}
|
|
spec={closeButtonSpec}
|
|
style={{
|
|
position: 'absolute',
|
|
right: 0,
|
|
zIndex: 1,
|
|
}}
|
|
/>
|
|
);
|
|
|
|
if (!props.visible) {
|
|
return null;
|
|
}
|
|
return (
|
|
<View
|
|
style={{
|
|
height: props.buttonGroups.length * buttonSize,
|
|
flexDirection: 'column',
|
|
}}
|
|
onLayout={onContainerLayout}
|
|
>
|
|
{hasSpaceForCloseBtn ? closeButton : null}
|
|
{overflowRows}
|
|
</View>
|
|
);
|
|
};
|
|
export default ToolbarOverflowRows;
|