51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { View, StyleSheet } from 'react-native';
|
|
import { Button, useTheme } from '@rneui/themed';
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
|
|
interface BottomActionBarProps {
|
|
onRun: () => void;
|
|
onSave: () => void;
|
|
onUndo: () => void;
|
|
onRestore: () => void;
|
|
onBack: () => void;
|
|
isSaveDisabled?: boolean;
|
|
}
|
|
|
|
const BottomActionBar: React.FC<BottomActionBarProps> = ({
|
|
onRun,
|
|
onSave,
|
|
onUndo,
|
|
onRestore,
|
|
onBack,
|
|
isSaveDisabled = true,
|
|
}) => {
|
|
const { theme } = useTheme();
|
|
|
|
return (
|
|
<View style={[styles.bottom, { backgroundColor: theme.colors.background }]}>
|
|
<Button type="clear" onPress={onBack} icon={<Icon name="arrow-left" size={24} color={theme.colors.primary} />} />
|
|
<Button type="clear" onPress={onRun} icon={<Icon name="play" size={24} color={theme.colors.primary} />} />
|
|
<Button type="clear" onPress={onSave} disabled={isSaveDisabled} icon={<Icon name="content-save" size={24} color={isSaveDisabled ? theme.colors.disabled : theme.colors.primary} />} />
|
|
<Button type="clear" onPress={onUndo} icon={<Icon name="undo" size={24} color={theme.colors.primary} />} />
|
|
<Button type="clear" onPress={onRestore} icon={<Icon name="restore" size={24} color={theme.colors.primary} />} />
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
bottom: {
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
paddingVertical: 8,
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#e0e0e0',
|
|
},
|
|
});
|
|
|
|
export default BottomActionBar;
|