UNPKG

17.8 kBSource Map (JSON)View Raw
1{"version":3,"sources":["Chip.tsx"],"names":["Chip","mode","children","icon","avatar","selected","disabled","accessibilityLabel","closeIconAccessibilityLabel","onPress","onLongPress","onClose","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","content","paddingRight","avatarWrapper","opacity","isValidElement","cloneElement","props","avatarSelected","fonts","regular","color","marginRight","marginLeft","closeButtonStyle","closeIcon","create","borderWidth","hairlineWidth","borderStyle","flexDirection","alignItems","paddingLeft","position","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 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 * 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?: any;\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 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 {\n backgroundColor = defaultBackgroundColor,\n 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 = (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 }}\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 <MaterialCommunityIcon\n name=\"close-circle\"\n size={16}\n color={iconColor}\n direction=\"ltr\"\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: 'row',\n },\n content: {\n flexDirection: 'row',\n alignItems: 'center',\n paddingLeft: 4,\n position: 'relative',\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});\n\nexport default withTheme(Chip);\n"]}
\No newline at end of file