react-native-cn-quill
Version:
react-native quill richtext editor
46 lines (45 loc) • 1.74 kB
JavaScript
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, } from 'react-native';
import { useToolbar } from './toolbar-context';
export const TextListButton = ({ name, items, style }) => {
const { theme, show, hide, open, selectionName, getSelected } = useToolbar();
const styles = makeStyles(theme);
const showMenu = () => {
if (open && selectionName === name)
hide();
else
show(name, items);
};
const selectedValue = getSelected(name);
const selectedItem = items.find((x) => x.valueOn === selectedValue);
const isOpen = selectionName === name;
return (React.createElement(TouchableOpacity, { onPress: showMenu },
React.createElement(View, { style: [styles.tool, style] },
selectedItem?.source ? (React.createElement(Image, { source: selectedItem.source, style: [styles.image] })) : (React.createElement(Text, { style: styles.text }, selectedItem ? selectedItem.name : name)),
isOpen && React.createElement(View, { style: [styles.overlay] }))));
};
const makeStyles = (theme) => StyleSheet.create({
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: theme.overlay,
borderRadius: 3,
},
tool: {
borderRadius: 3,
alignItems: 'center',
justifyContent: 'center',
padding: 2,
marginRight: 4,
marginLeft: 4,
height: Math.round(theme.size),
},
image: {
height: Math.round(theme.size * 0.6),
width: Math.round(theme.size * 0.6),
tintColor: theme.color,
},
text: {
color: theme.color,
fontWeight: 'bold',
},
});