UNPKG

6.14 kBTypeScriptView Raw
1import * as React from 'react';
2import { StyleProp, TextStyle, View, ViewStyle } from 'react-native';
3declare type Props = React.ComponentPropsWithRef<typeof View> & {
4 /**
5 * Text for the title. Note that this will only accept a string or `<Text>`-based node.
6 */
7 title: React.ReactNode;
8 /**
9 * Style for the title.
10 */
11 titleStyle?: StyleProp<TextStyle>;
12 /**
13 * Number of lines for the title.
14 */
15 titleNumberOfLines?: number;
16 /**
17 * Text for the subtitle. Note that this will only accept a string or `<Text>`-based node.
18 */
19 subtitle?: React.ReactNode;
20 /**
21 * Style for the subtitle.
22 */
23 subtitleStyle?: StyleProp<TextStyle>;
24 /**
25 * Number of lines for the subtitle.
26 */
27 subtitleNumberOfLines?: number;
28 /**
29 * Callback which returns a React element to display on the left side.
30 */
31 left?: (props: {
32 size: number;
33 }) => React.ReactNode;
34 /**
35 * Style for the left element wrapper.
36 */
37 leftStyle?: StyleProp<ViewStyle>;
38 /**
39 * Callback which returns a React element to display on the right side.
40 */
41 right?: (props: {
42 size: number;
43 }) => React.ReactNode;
44 /**
45 * Style for the right element wrapper.
46 */
47 rightStyle?: StyleProp<ViewStyle>;
48 /**
49 * @internal
50 */
51 index?: number;
52 /**
53 * @internal
54 */
55 total?: number;
56 style?: StyleProp<ViewStyle>;
57 /**
58 * @optional
59 */
60 theme: ReactNativePaper.Theme;
61};
62/**
63 * A component to show a title, subtitle and an avatar inside a Card.
64 *
65 * <div class="screenshots">
66 * <img class="medium" src="screenshots/card-title-1.png" />
67 * </div>
68 *
69 * ## Usage
70 * ```js
71 * import * as React from 'react';
72 * import { Avatar, Card, IconButton } from 'react-native-paper';
73 *
74 * const MyComponent = () => (
75 * <Card.Title
76 * title="Card Title"
77 * subtitle="Card Subtitle"
78 * left={(props) => <Avatar.Icon {...props} icon="folder" />}
79 * right={(props) => <IconButton {...props} icon="more-vert" onPress={() => {}} />}
80 * />
81 * );
82 *
83 * export default MyComponent;
84 * ```
85 */
86declare const CardTitle: {
87 ({ title, titleStyle, titleNumberOfLines, subtitle, subtitleStyle, subtitleNumberOfLines, left, leftStyle, right, rightStyle, style, }: Props): JSX.Element;
88 displayName: string;
89};
90declare const _default: React.ComponentType<Pick<import("react-native").ViewProps & React.RefAttributes<View> & {
91 /**
92 * Text for the title. Note that this will only accept a string or `<Text>`-based node.
93 */
94 title: React.ReactNode;
95 /**
96 * Style for the title.
97 */
98 titleStyle?: StyleProp<TextStyle>;
99 /**
100 * Number of lines for the title.
101 */
102 titleNumberOfLines?: number | undefined;
103 /**
104 * Text for the subtitle. Note that this will only accept a string or `<Text>`-based node.
105 */
106 subtitle?: React.ReactNode;
107 /**
108 * Style for the subtitle.
109 */
110 subtitleStyle?: StyleProp<TextStyle>;
111 /**
112 * Number of lines for the subtitle.
113 */
114 subtitleNumberOfLines?: number | undefined;
115 /**
116 * Callback which returns a React element to display on the left side.
117 */
118 left?: ((props: {
119 size: number;
120 }) => React.ReactNode) | undefined;
121 /**
122 * Style for the left element wrapper.
123 */
124 leftStyle?: StyleProp<ViewStyle>;
125 /**
126 * Callback which returns a React element to display on the right side.
127 */
128 right?: ((props: {
129 size: number;
130 }) => React.ReactNode) | undefined;
131 /**
132 * Style for the right element wrapper.
133 */
134 rightStyle?: StyleProp<ViewStyle>;
135 /**
136 * @internal
137 */
138 index?: number | undefined;
139 /**
140 * @internal
141 */
142 total?: number | undefined;
143 style?: StyleProp<ViewStyle>;
144 /**
145 * @optional
146 */
147 theme: ReactNativePaper.Theme;
148}, "title" | "left" | "right" | keyof import("react-native").ViewProps | keyof React.RefAttributes<View> | "titleStyle" | "titleNumberOfLines" | "index" | "total" | "subtitle" | "subtitleStyle" | "subtitleNumberOfLines" | "leftStyle" | "rightStyle"> & {
149 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
150}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<import("react-native").ViewProps & React.RefAttributes<View> & {
151 /**
152 * Text for the title. Note that this will only accept a string or `<Text>`-based node.
153 */
154 title: React.ReactNode;
155 /**
156 * Style for the title.
157 */
158 titleStyle?: StyleProp<TextStyle>;
159 /**
160 * Number of lines for the title.
161 */
162 titleNumberOfLines?: number | undefined;
163 /**
164 * Text for the subtitle. Note that this will only accept a string or `<Text>`-based node.
165 */
166 subtitle?: React.ReactNode;
167 /**
168 * Style for the subtitle.
169 */
170 subtitleStyle?: StyleProp<TextStyle>;
171 /**
172 * Number of lines for the subtitle.
173 */
174 subtitleNumberOfLines?: number | undefined;
175 /**
176 * Callback which returns a React element to display on the left side.
177 */
178 left?: ((props: {
179 size: number;
180 }) => React.ReactNode) | undefined;
181 /**
182 * Style for the left element wrapper.
183 */
184 leftStyle?: StyleProp<ViewStyle>;
185 /**
186 * Callback which returns a React element to display on the right side.
187 */
188 right?: ((props: {
189 size: number;
190 }) => React.ReactNode) | undefined;
191 /**
192 * Style for the right element wrapper.
193 */
194 rightStyle?: StyleProp<ViewStyle>;
195 /**
196 * @internal
197 */
198 index?: number | undefined;
199 /**
200 * @internal
201 */
202 total?: number | undefined;
203 style?: StyleProp<ViewStyle>;
204 /**
205 * @optional
206 */
207 theme: ReactNativePaper.Theme;
208}> & {
209 ({ title, titleStyle, titleNumberOfLines, subtitle, subtitleStyle, subtitleNumberOfLines, left, leftStyle, right, rightStyle, style, }: Props): JSX.Element;
210 displayName: string;
211}, {}>;
212export default _default;
213export { CardTitle };