| 1 | {"version":3,"sources":["Chip.tsx"],"names":["React","Animated","Platform","StyleSheet","TouchableWithoutFeedback","View","color","Icon","MaterialCommunityIcon","Surface","Text","TouchableRipple","withTheme","black","white","Chip","mode","children","icon","avatar","selected","disabled","accessibilityLabel","closeIconAccessibilityLabel","onPress","onLongPress","onClose","closeIcon","textStyle","style","theme","testID","selectedColor","ellipsizeMode","rest","current","elevation","useRef","Value","handlePressIn","scale","animation","timing","toValue","duration","useNativeDriver","start","handlePressOut","dark","colors","defaultBackgroundColor","surface","backgroundColor","borderRadius","flatten","borderColor","undefined","alpha","rgb","string","textColor","text","iconColor","backgroundColorString","selectedBackgroundColor","lighten","darken","underlayColor","fade","accessibilityTraits","accessibilityState","push","styles","container","OS","touchable","content","paddingRight","avatarWrapper","opacity","isValidElement","cloneElement","props","avatarSelected","fonts","regular","marginRight","marginLeft","closeButtonStyle","create","borderWidth","hairlineWidth","borderStyle","flexDirection","select","default","web","alignItems","paddingLeft","position","flexGrow","padding","alignSelf","minHeight","lineHeight","textAlignVertical","marginVertical","width","height","top","left","right","justifyContent"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n AccessibilityState,\n Animated,\n Platform,\n StyleProp,\n StyleSheet,\n TextStyle,\n TouchableWithoutFeedback,\n View,\n ViewStyle,\n} from 'react-native';\nimport color from 'color';\nimport type { IconSource } from './Icon';\nimport Icon from './Icon';\nimport MaterialCommunityIcon from './MaterialCommunityIcon';\nimport Surface from './Surface';\nimport Text from './Typography/Text';\nimport TouchableRipple from './TouchableRipple/TouchableRipple';\nimport { withTheme } from '../core/theming';\nimport { black, white } from '../styles/colors';\nimport type { EllipsizeProp } from '../types';\n\ntype Props = React.ComponentProps<typeof Surface> & {\n /**\n * Mode of the chip.\n * - `flat` - flat chip without outline.\n * - `outlined` - chip with an outline.\n */\n mode?: 'flat' | 'outlined';\n /**\n * Text content of the `Chip`.\n */\n children: React.ReactNode;\n /**\n * Icon to display for the `Chip`. Both icon and avatar cannot be specified.\n */\n icon?: IconSource;\n /**\n * Avatar to display for the `Chip`. Both icon and avatar cannot be specified.\n */\n avatar?: React.ReactNode;\n /**\n * Icon to display as the close button for the `Chip`. The icon appears only when the onClose prop is specified.\n */\n closeIcon?: IconSource;\n /**\n * Whether chip is selected.\n */\n selected?: boolean;\n /**\n * Whether to style the chip color as selected.\n */\n selectedColor?: string;\n /**\n * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.\n */\n disabled?: boolean;\n /**\n * Accessibility label for the chip. This is read by the screen reader when the user taps the chip.\n */\n accessibilityLabel?: string;\n /**\n * Accessibility label for the close icon. This is read by the screen reader when the user taps the close icon.\n */\n closeIconAccessibilityLabel?: string;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * Function to execute on long press.\n */\n onLongPress?: () => void;\n /**\n * Function to execute on close button press. The close button appears only when this prop is specified.\n */\n onClose?: () => void;\n /**\n * Style of chip's text\n */\n textStyle?: StyleProp<TextStyle>;\n style?: StyleProp<ViewStyle>;\n\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n /**\n * Pass down testID from chip props to touchable for Detox tests.\n */\n testID?: string;\n /**\n * Ellipsize Mode for the children text\n */\n ellipsizeMode?: EllipsizeProp;\n};\n\n/**\n * Chips can be used to display entities in small blocks.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img class=\"medium\" src=\"screenshots/chip-1.png\" />\n * <figcaption>Flat chip</figcaption>\n * </figure>\n * <figure>\n * <img class=\"medium\" src=\"screenshots/chip-2.png\" />\n * <figcaption>Outlined chip</figcaption>\n * </figure>\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Chip } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <Chip icon=\"information\" onPress={() => console.log('Pressed')}>Example Chip</Chip>\n * );\n *\n * export default MyComponent;\n * ```\n */\nconst Chip = ({\n mode = 'flat',\n children,\n icon,\n avatar,\n selected = false,\n disabled = false,\n accessibilityLabel,\n closeIconAccessibilityLabel = 'Close',\n onPress,\n onLongPress,\n onClose,\n closeIcon,\n textStyle,\n style,\n theme,\n testID,\n selectedColor,\n ellipsizeMode,\n ...rest\n}: Props) => {\n const { current: elevation } = React.useRef<Animated.Value>(\n new Animated.Value(0)\n );\n\n const handlePressIn = () => {\n const { scale } = theme.animation;\n Animated.timing(elevation, {\n toValue: 4,\n duration: 200 * scale,\n useNativeDriver: true,\n }).start();\n };\n\n const handlePressOut = () => {\n const { scale } = theme.animation;\n Animated.timing(elevation, {\n toValue: 0,\n duration: 150 * scale,\n useNativeDriver: true,\n }).start();\n };\n\n const { dark, colors } = theme;\n const defaultBackgroundColor =\n mode === 'outlined' ? colors.surface : dark ? '#383838' : '#ebebeb';\n\n const { backgroundColor = defaultBackgroundColor, borderRadius = 16 } =\n (StyleSheet.flatten(style) || {}) as ViewStyle;\n\n const borderColor =\n mode === 'outlined'\n ? color(\n selectedColor !== undefined\n ? selectedColor\n : color(dark ? white : black)\n )\n .alpha(0.29)\n .rgb()\n .string()\n : backgroundColor;\n const textColor = disabled\n ? colors.disabled\n : color(selectedColor !== undefined ? selectedColor : colors.text)\n .alpha(0.87)\n .rgb()\n .string();\n const iconColor = disabled\n ? colors.disabled\n : color(selectedColor !== undefined ? selectedColor : colors.text)\n .alpha(0.54)\n .rgb()\n .string();\n\n const backgroundColorString =\n typeof backgroundColor === 'string'\n ? backgroundColor\n : defaultBackgroundColor;\n const selectedBackgroundColor = (\n dark\n ? color(backgroundColorString).lighten(mode === 'outlined' ? 0.2 : 0.4)\n : color(backgroundColorString).darken(mode === 'outlined' ? 0.08 : 0.2)\n )\n .rgb()\n .string();\n\n const underlayColor = selectedColor\n ? color(selectedColor).fade(0.5).rgb().string()\n : selectedBackgroundColor;\n\n const accessibilityTraits = ['button'];\n const accessibilityState: AccessibilityState = {\n selected,\n disabled,\n };\n\n if (selected) {\n accessibilityTraits.push('selected');\n }\n\n if (disabled) {\n accessibilityTraits.push('disabled');\n }\n\n return (\n <Surface\n style={\n [\n styles.container,\n {\n elevation: Platform.OS === 'android' ? elevation : 0,\n backgroundColor: selected\n ? selectedBackgroundColor\n : backgroundColor,\n borderColor,\n borderRadius,\n },\n style,\n ] as StyleProp<ViewStyle>\n }\n {...rest}\n >\n <TouchableRipple\n borderless\n delayPressIn={0}\n style={[{ borderRadius }, styles.touchable]}\n onPress={onPress}\n onLongPress={onLongPress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n underlayColor={underlayColor}\n disabled={disabled}\n accessibilityLabel={accessibilityLabel}\n // @ts-expect-error We keep old a11y props for backwards compat with old RN versions\n accessibilityTraits={accessibilityTraits}\n accessibilityComponentType=\"button\"\n accessibilityRole=\"button\"\n accessibilityState={accessibilityState}\n testID={testID}\n >\n <View style={[styles.content, { paddingRight: onClose ? 32 : 4 }]}>\n {avatar && !icon ? (\n <View style={[styles.avatarWrapper, disabled && { opacity: 0.26 }]}>\n {React.isValidElement(avatar)\n ? React.cloneElement(avatar, {\n style: [styles.avatar, avatar.props.style],\n })\n : avatar}\n </View>\n ) : null}\n {icon || selected ? (\n <View\n style={[\n styles.icon,\n avatar ? [styles.avatar, styles.avatarSelected] : null,\n ]}\n >\n {icon ? (\n <Icon\n source={icon}\n color={avatar ? white : iconColor}\n size={18}\n />\n ) : (\n <MaterialCommunityIcon\n name=\"check\"\n color={avatar ? white : iconColor}\n size={18}\n direction=\"ltr\"\n />\n )}\n </View>\n ) : null}\n <Text\n selectable={false}\n numberOfLines={1}\n style={[\n styles.text,\n {\n ...theme.fonts.regular,\n color: textColor,\n marginRight: onClose ? 0 : 8,\n marginLeft: avatar || icon || selected ? 4 : 8,\n },\n textStyle,\n ]}\n ellipsizeMode={ellipsizeMode}\n >\n {children}\n </Text>\n </View>\n </TouchableRipple>\n {onClose ? (\n <View style={styles.closeButtonStyle}>\n <TouchableWithoutFeedback\n onPress={onClose}\n // @ts-expect-error We keep old a11y props for backwards compat with old RN versions\n accessibilityTraits=\"button\"\n accessibilityComponentType=\"button\"\n accessibilityRole=\"button\"\n accessibilityLabel={closeIconAccessibilityLabel}\n >\n <View style={[styles.icon, styles.closeIcon]}>\n {closeIcon ? (\n <Icon source={closeIcon} color={iconColor} size={16} />\n ) : (\n <MaterialCommunityIcon\n name=\"close-circle\"\n size={16}\n color={iconColor}\n direction=\"ltr\"\n />\n )}\n </View>\n </TouchableWithoutFeedback>\n </View>\n ) : null}\n </Surface>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n borderWidth: StyleSheet.hairlineWidth,\n borderStyle: 'solid',\n flexDirection: Platform.select({ default: 'column', web: 'row' }),\n },\n content: {\n flexDirection: 'row',\n alignItems: 'center',\n paddingLeft: 4,\n position: 'relative',\n flexGrow: 1,\n },\n icon: {\n padding: 4,\n alignSelf: 'center',\n },\n closeIcon: {\n marginRight: 4,\n },\n text: {\n minHeight: 24,\n lineHeight: 24,\n textAlignVertical: 'center',\n marginVertical: 4,\n },\n avatar: {\n width: 24,\n height: 24,\n borderRadius: 12,\n },\n avatarWrapper: {\n marginRight: 4,\n },\n avatarSelected: {\n position: 'absolute',\n top: 4,\n left: 4,\n backgroundColor: 'rgba(0, 0, 0, .29)',\n },\n closeButtonStyle: {\n position: 'absolute',\n right: 0,\n height: '100%',\n justifyContent: 'center',\n alignItems: 'center',\n },\n touchable: {\n flexGrow: 1,\n },\n});\n\nexport default withTheme(Chip);\n"]} |