| 1 | {"version":3,"sources":["Chip.tsx"],"names":["Chip","mode","children","icon","avatar","selected","disabled","accessibilityLabel","closeIconAccessibilityLabel","onPress","onLongPress","onClose","closeIcon","textStyle","style","theme","testID","selectedColor","ellipsizeMode","rest","current","elevation","React","useRef","Animated","Value","handlePressIn","scale","animation","timing","toValue","duration","useNativeDriver","start","handlePressOut","dark","colors","defaultBackgroundColor","surface","backgroundColor","borderRadius","StyleSheet","flatten","borderColor","undefined","white","black","alpha","rgb","string","textColor","text","iconColor","backgroundColorString","selectedBackgroundColor","lighten","darken","underlayColor","fade","accessibilityTraits","accessibilityState","push","styles","container","Platform","OS","touchable","content","paddingRight","avatarWrapper","opacity","isValidElement","cloneElement","props","avatarSelected","fonts","regular","color","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"]} |