UNPKG

6.54 kBTypeScriptView Raw
1import * as React from 'react';
2import { StyleProp, ViewStyle } from 'react-native';
3import type { IconSource } from './Icon';
4import Surface from './Surface';
5import type { EllipsizeProp } from '../types';
6declare type Props = React.ComponentProps<typeof Surface> & {
7 /**
8 * Mode of the chip.
9 * - `flat` - flat chip without outline.
10 * - `outlined` - chip with an outline.
11 */
12 mode?: 'flat' | 'outlined';
13 /**
14 * Text content of the `Chip`.
15 */
16 children: React.ReactNode;
17 /**
18 * Icon to display for the `Chip`. Both icon and avatar cannot be specified.
19 */
20 icon?: IconSource;
21 /**
22 * Avatar to display for the `Chip`. Both icon and avatar cannot be specified.
23 */
24 avatar?: React.ReactNode;
25 /**
26 * Whether chip is selected.
27 */
28 selected?: boolean;
29 /**
30 * Whether to style the chip color as selected.
31 */
32 selectedColor?: string;
33 /**
34 * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.
35 */
36 disabled?: boolean;
37 /**
38 * Accessibility label for the chip. This is read by the screen reader when the user taps the chip.
39 */
40 accessibilityLabel?: string;
41 /**
42 * Accessibility label for the close icon. This is read by the screen reader when the user taps the close icon.
43 */
44 closeIconAccessibilityLabel?: string;
45 /**
46 * Function to execute on press.
47 */
48 onPress?: () => void;
49 /**
50 * Function to execute on long press.
51 */
52 onLongPress?: () => void;
53 /**
54 * Function to execute on close button press. The close button appears only when this prop is specified.
55 */
56 onClose?: () => void;
57 /**
58 * Style of chip's text
59 */
60 textStyle?: any;
61 style?: StyleProp<ViewStyle>;
62 /**
63 * @optional
64 */
65 theme: ReactNativePaper.Theme;
66 /**
67 * Pass down testID from chip props to touchable for Detox tests.
68 */
69 testID?: string;
70 /**
71 * Ellipsize Mode for the children text
72 */
73 ellipsizeMode?: EllipsizeProp;
74};
75declare const _default: (React.ComponentClass<Pick<Props, "ref" | "style" | "children" | "pointerEvents" | "ellipsizeMode" | "onLayout" | "onPress" | "onLongPress" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "icon" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "disabled" | "mode" | "selected" | "avatar" | "closeIconAccessibilityLabel" | "onClose" | "textStyle" | "selectedColor"> & {
76 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
77}, any> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<Props, any> & (({ mode, children, icon, avatar, selected, disabled, accessibilityLabel, closeIconAccessibilityLabel, onPress, onLongPress, onClose, textStyle, style, theme, testID, selectedColor, ellipsizeMode, ...rest }: Props) => JSX.Element)) | (React.FunctionComponent<Props> & (({ mode, children, icon, avatar, selected, disabled, accessibilityLabel, closeIconAccessibilityLabel, onPress, onLongPress, onClose, textStyle, style, theme, testID, selectedColor, ellipsizeMode, ...rest }: Props) => JSX.Element)), {}>) | (React.FunctionComponent<Pick<Props, "ref" | "style" | "children" | "pointerEvents" | "ellipsizeMode" | "onLayout" | "onPress" | "onLongPress" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "icon" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "disabled" | "mode" | "selected" | "avatar" | "closeIconAccessibilityLabel" | "onClose" | "textStyle" | "selectedColor"> & {
78 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
79}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<Props, any> & (({ mode, children, icon, avatar, selected, disabled, accessibilityLabel, closeIconAccessibilityLabel, onPress, onLongPress, onClose, textStyle, style, theme, testID, selectedColor, ellipsizeMode, ...rest }: Props) => JSX.Element)) | (React.FunctionComponent<Props> & (({ mode, children, icon, avatar, selected, disabled, accessibilityLabel, closeIconAccessibilityLabel, onPress, onLongPress, onClose, textStyle, style, theme, testID, selectedColor, ellipsizeMode, ...rest }: Props) => JSX.Element)), {}>);
80export default _default;
81
\No newline at end of file