@devrue/rn-select
Version:
Custom typescript only select component for react native
82 lines • 2.58 kB
JavaScript
import React, { useCallback } from 'react';
import useStyles from '../hooks/useStyles';
import { Pressable, View, FlatList, Text } from 'react-native';
import CloseIcon from '../icons/CloseIcon';
export default function Selections({
items,
onRemove,
pillTextStyle,
pillRemoveContainerStyle,
pillRemoveIconStyle
}) {
const renderItem = useCallback(({
item: [key, val]
}) => /*#__PURE__*/React.createElement(SelectionChip, {
value: val,
handleRemove: () => onRemove(key),
textStyle: pillTextStyle,
removeContainerStyle: pillRemoveContainerStyle,
removeIconStyle: pillRemoveIconStyle
}), [onRemove, pillRemoveContainerStyle, pillRemoveIconStyle, pillTextStyle]);
return /*#__PURE__*/React.createElement(FlatList, {
horizontal: true,
data: items,
keyExtractor: ([key]) => key,
renderItem: renderItem,
showsHorizontalScrollIndicator: false
});
}
function SelectionChip({
value,
handleRemove,
textStyle,
removeContainerStyle,
removeIconStyle
}) {
const styles = useStyles(({
tokens
}) => ({
container: {
justifyContent: 'center',
height: tokens.size.xl,
paddingRight: tokens.size.sm
},
pillContainer: {
flexDirection: 'row',
alignItems: 'center',
borderRadius: tokens.size.sm,
overflow: 'hidden'
},
text: {
paddingHorizontal: tokens.size.xs,
paddingVertical: tokens.size.xs / 2,
backgroundColor: '#f1f1f1'
},
close: {
height: '100%',
flexDirection: 'row',
backgroundColor: '#b3b3b3',
alignItems: 'center',
justifyContent: 'center',
width: tokens.size.md
},
closeIcon: {
width: (removeIconStyle === null || removeIconStyle === void 0 ? void 0 : removeIconStyle.fontSize) ?? tokens.size.sm,
height: (removeIconStyle === null || removeIconStyle === void 0 ? void 0 : removeIconStyle.fontSize) ?? tokens.size.sm
}
}), [removeIconStyle]);
return /*#__PURE__*/React.createElement(Pressable, {
style: [styles.container]
}, /*#__PURE__*/React.createElement(View, {
style: styles.pillContainer
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.text, textStyle]
}, value), /*#__PURE__*/React.createElement(Pressable, {
style: [styles.close, removeContainerStyle],
onPress: handleRemove
}, /*#__PURE__*/React.createElement(CloseIcon, {
stroke: (removeIconStyle === null || removeIconStyle === void 0 ? void 0 : removeIconStyle.color) ?? '#ffffff',
style: styles.closeIcon
}))));
}
//# sourceMappingURL=Selections.js.map