feat(smart-app): implement complete mobile app MVP

- App.tsx: full navigation (Auth stack + Main tabs with 5 screens)
- Auth: LoginScreen, RegisterScreen, ForgotPasswordScreen
- HomeScreen: dashboard with IoT metrics, weather widget, alerts, quick actions, sensors
- MapScreen: interactive map with layer toggles (6 layers)
- MarketplaceScreen: categories (6), products (5), search
- ChatScreen: AI chat with quick prompts (4), bot responses
- ProfileScreen: user info, stats, menu (9 items), logout
- AlertsScreen: alert list with severity, acknowledge
- SensorsScreen: sensor list with type filters (6 types), search
- ZonesScreen: zone cards with stats
- SettingsScreen: language picker (FR/EN/ES/DE), privacy, about
- Stores: iotStore (sensors, zones, alerts), notificationStore, uiStore + i18n
- Hooks: useSensors, useAlerts, useNotifications, useLocation
- Components: Card, Button, LoadingSpinner, ErrorBoundary, Header
- Services: iotService, notificationService (with axios API client)
- Utils: formatters (temp, AQI, noise, dates), validators (email, password, IBAN)
- Theme: colors.ts with full design system (Blue Ocean palette)
- Ditto: fixed MongoDB connection, new JWT secrets, official gateway image
This commit is contained in:
Eric FELIXINE
2026-06-01 18:00:35 -04:00
parent 08ca495bde
commit e30ae8ed09
35578 changed files with 3703534 additions and 43 deletions

View File

@@ -0,0 +1,191 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Animated, Easing, Platform, StyleSheet, View } from 'react-native';
import { useInternalTheme } from '../core/theming';
const DURATION = 2400;
/**
* Activity indicator is used to present progress of some activity in the app.
* It can be used as a drop-in replacement for the ActivityIndicator shipped with React Native.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { ActivityIndicator, MD2Colors } from 'react-native-paper';
*
* const MyComponent = () => (
* <ActivityIndicator animating={true} color={MD2Colors.red800} />
* );
*
* export default MyComponent;
* ```
*/
const ActivityIndicator = ({
animating = true,
color: indicatorColor,
hidesWhenStopped = true,
size: indicatorSize = 'small',
style,
theme: themeOverrides,
...rest
}) => {
var _theme$colors;
const theme = useInternalTheme(themeOverrides);
const {
current: timer
} = React.useRef(new Animated.Value(0));
const {
current: fade
} = React.useRef(new Animated.Value(!animating && hidesWhenStopped ? 0 : 1));
const rotation = React.useRef(undefined);
const {
animation: {
scale
}
} = theme;
const startRotation = React.useCallback(() => {
// Show indicator
Animated.timing(fade, {
duration: 200 * scale,
toValue: 1,
isInteraction: false,
useNativeDriver: true
}).start();
// Circular animation in loop
if (rotation.current) {
timer.setValue(0);
// $FlowFixMe
Animated.loop(rotation.current).start();
}
}, [scale, fade, timer]);
const stopRotation = () => {
if (rotation.current) {
rotation.current.stop();
}
};
React.useEffect(() => {
if (rotation.current === undefined) {
// Circular animation in loop
rotation.current = Animated.timing(timer, {
duration: DURATION,
easing: Easing.linear,
// Animated.loop does not work if useNativeDriver is true on web
useNativeDriver: Platform.OS !== 'web',
toValue: 1,
isInteraction: false
});
}
if (animating) {
startRotation();
} else if (hidesWhenStopped) {
// Hide indicator first and then stop rotation
Animated.timing(fade, {
duration: 200 * scale,
toValue: 0,
useNativeDriver: true,
isInteraction: false
}).start(stopRotation);
} else {
stopRotation();
}
}, [animating, fade, hidesWhenStopped, startRotation, scale, timer]);
const color = indicatorColor || ((_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.primary);
const size = typeof indicatorSize === 'string' ? indicatorSize === 'small' ? 24 : 48 : indicatorSize ? indicatorSize : 24;
const frames = 60 * DURATION / 1000;
const easing = Easing.bezier(0.4, 0.0, 0.7, 1.0);
const containerStyle = {
width: size,
height: size / 2,
overflow: 'hidden'
};
return /*#__PURE__*/React.createElement(View, _extends({
style: [styles.container, style]
}, rest, {
accessible: true,
accessibilityRole: "progressbar",
accessibilityState: {
busy: animating
}
}), /*#__PURE__*/React.createElement(Animated.View, {
style: [{
width: size,
height: size,
opacity: fade
}],
collapsable: false
}, [0, 1].map(index => {
// Thanks to https://github.com/n4kz/react-native-indicators for the great work
const inputRange = Array.from(new Array(frames), (_, frameIndex) => frameIndex / (frames - 1));
const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
let progress = 2 * frameIndex / (frames - 1);
const rotation = index ? +(360 - 15) : -(180 - 15);
if (progress > 1.0) {
progress = 2.0 - progress;
}
const direction = index ? -1 : +1;
return `${direction * (180 - 30) * easing(progress) + rotation}deg`;
});
const layerStyle = {
width: size,
height: size,
transform: [{
rotate: timer.interpolate({
inputRange: [0, 1],
outputRange: [`${0 + 30 + 15}deg`, `${2 * 360 + 30 + 15}deg`]
})
}]
};
const viewportStyle = {
width: size,
height: size,
transform: [{
translateY: index ? -size / 2 : 0
}, {
rotate: timer.interpolate({
inputRange,
outputRange
})
}]
};
const offsetStyle = index ? {
top: size / 2
} : null;
const lineStyle = {
width: size,
height: size,
borderColor: color,
borderWidth: size / 10,
borderRadius: size / 2
};
return /*#__PURE__*/React.createElement(Animated.View, {
key: index,
style: [styles.layer]
}, /*#__PURE__*/React.createElement(Animated.View, {
style: layerStyle
}, /*#__PURE__*/React.createElement(Animated.View, {
style: [containerStyle, offsetStyle],
collapsable: false
}, /*#__PURE__*/React.createElement(Animated.View, {
style: viewportStyle
}, /*#__PURE__*/React.createElement(Animated.View, {
style: containerStyle,
collapsable: false
}, /*#__PURE__*/React.createElement(Animated.View, {
style: lineStyle
}))))));
})));
};
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
},
layer: {
...StyleSheet.absoluteFill,
justifyContent: 'center',
alignItems: 'center'
}
});
export default ActivityIndicator;
//# sourceMappingURL=ActivityIndicator.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,253 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import color from 'color';
import AppbarContent from './AppbarContent';
import { DEFAULT_APPBAR_HEIGHT, getAppbarBackgroundColor, modeAppbarHeight, renderAppbarContent, filterAppbarActions } from './utils';
import { useInternalTheme } from '../../core/theming';
import Surface from '../Surface';
/**
* A component to display action items in a bar. It can be placed at the top or bottom.
* The top bar usually contains the screen title, controls such as navigation buttons, menu button etc.
* The bottom bar usually provides access to a drawer and up to four actions.
*
* By default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
* See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more informations
*
* ## Usage
* ### Top bar
* ```js
* import * as React from 'react';
* import { Appbar } from 'react-native-paper';
*
* const MyComponent = () => (
* <Appbar.Header>
* <Appbar.BackAction onPress={() => {}} />
* <Appbar.Content title="Title" />
* <Appbar.Action icon="calendar" onPress={() => {}} />
* <Appbar.Action icon="magnify" onPress={() => {}} />
* </Appbar.Header>
* );
*
* export default MyComponent;
* ```
*
* ### Bottom bar
* ```js
* import * as React from 'react';
* import { StyleSheet } from 'react-native';
* import { Appbar, FAB, useTheme } from 'react-native-paper';
* import { useSafeAreaInsets } from 'react-native-safe-area-context';
*
* const BOTTOM_APPBAR_HEIGHT = 80;
* const MEDIUM_FAB_HEIGHT = 56;
*
* const MyComponent = () => {
* const { bottom } = useSafeAreaInsets();
* const theme = useTheme();
*
* return (
* <Appbar
* style={[
* styles.bottom,
* {
* height: BOTTOM_APPBAR_HEIGHT + bottom,
* backgroundColor: theme.colors.elevation.level2,
* },
* ]}
* safeAreaInsets={{ bottom }}
* >
* <Appbar.Action icon="archive" onPress={() => {}} />
* <Appbar.Action icon="email" onPress={() => {}} />
* <Appbar.Action icon="label" onPress={() => {}} />
* <Appbar.Action icon="delete" onPress={() => {}} />
* <FAB
* mode="flat"
* size="medium"
* icon="plus"
* onPress={() => {}}
* style={[
* styles.fab,
* { top: (BOTTOM_APPBAR_HEIGHT - MEDIUM_FAB_HEIGHT) / 2 },
* ]}
* />
* </Appbar>
* );
* };
*
* const styles = StyleSheet.create({
* bottom: {
* backgroundColor: 'aquamarine',
* position: 'absolute',
* left: 0,
* right: 0,
* bottom: 0,
* },
* fab: {
* position: 'absolute',
* right: 16,
* },
* });
*
* export default MyComponent;
* ```
*/
const Appbar = ({
children,
dark,
style,
mode = 'small',
elevated,
safeAreaInsets,
theme: themeOverrides,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const {
isV3
} = theme;
const flattenedStyle = StyleSheet.flatten(style);
const {
backgroundColor: customBackground,
elevation = isV3 ? elevated ? 2 : 0 : 4,
...restStyle
} = flattenedStyle || {};
const backgroundColor = getAppbarBackgroundColor(theme, elevation, customBackground, elevated);
const isMode = modeToCompare => {
return isV3 && mode === modeToCompare;
};
let isDark = false;
if (typeof dark === 'boolean') {
isDark = dark;
} else if (!isV3) {
isDark = backgroundColor === 'transparent' ? false : typeof backgroundColor === 'string' ? !color(backgroundColor).isLight() : true;
}
const isV3CenterAlignedMode = isV3 && isMode('center-aligned');
let shouldCenterContent = false;
let shouldAddLeftSpacing = false;
let shouldAddRightSpacing = false;
if (!isV3 && Platform.OS === 'ios' || isV3CenterAlignedMode) {
let hasAppbarContent = false;
let leftItemsCount = 0;
let rightItemsCount = 0;
React.Children.forEach(children, child => {
if (/*#__PURE__*/React.isValidElement(child)) {
const isLeading = child.props.isLeading === true;
if (child.type === AppbarContent) {
hasAppbarContent = true;
} else if (isLeading || !hasAppbarContent) {
leftItemsCount++;
} else {
rightItemsCount++;
}
}
});
shouldCenterContent = hasAppbarContent && leftItemsCount < 2 && rightItemsCount < (isV3 ? 3 : 2);
shouldAddLeftSpacing = shouldCenterContent && leftItemsCount === 0;
shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0;
}
const spacingStyle = isV3 ? styles.v3Spacing : styles.spacing;
const insets = {
paddingBottom: safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.bottom,
paddingTop: safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.top,
paddingLeft: safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.left,
paddingRight: safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.right
};
return /*#__PURE__*/React.createElement(Surface, _extends({
style: [{
backgroundColor
}, styles.appbar, {
height: isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT
}, insets, restStyle, !theme.isV3 && {
elevation
}],
elevation: elevation,
container: true
}, rest), shouldAddLeftSpacing ? /*#__PURE__*/React.createElement(View, {
style: spacingStyle
}) : null, (!isV3 || isMode('small') || isMode('center-aligned')) && /*#__PURE__*/React.createElement(React.Fragment, null, renderAppbarContent({
children,
isDark,
theme,
isV3,
renderOnly: ['Appbar.BackAction'],
shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent
}), renderAppbarContent({
// Filter appbar actions - first leading icons, then trailing icons
children: [...filterAppbarActions(children, true), ...filterAppbarActions(children)],
isDark,
theme,
isV3,
renderExcept: ['Appbar.BackAction'],
shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent
})), (isMode('medium') || isMode('large')) && /*#__PURE__*/React.createElement(View, {
style: [styles.columnContainer, isMode('center-aligned') && styles.centerAlignedContainer]
}, /*#__PURE__*/React.createElement(View, {
style: styles.controlsRow
}, renderAppbarContent({
children,
isDark,
isV3,
renderOnly: ['Appbar.BackAction'],
mode
}), renderAppbarContent({
children: filterAppbarActions(children, true),
isDark,
isV3,
renderOnly: ['Appbar.Action'],
mode
}), /*#__PURE__*/React.createElement(View, {
style: styles.rightActionControls
}, renderAppbarContent({
children: filterAppbarActions(children),
isDark,
isV3,
renderExcept: ['Appbar', 'Appbar.BackAction', 'Appbar.Content', 'Appbar.Header'],
mode
}))), renderAppbarContent({
children,
isDark,
isV3,
renderOnly: ['Appbar.Content'],
mode
})), shouldAddRightSpacing ? /*#__PURE__*/React.createElement(View, {
style: spacingStyle
}) : null);
};
const styles = StyleSheet.create({
appbar: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 4
},
spacing: {
width: 48
},
v3Spacing: {
width: 52
},
controlsRow: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
rightActionControls: {
flexDirection: 'row',
flex: 1,
justifyContent: 'flex-end'
},
columnContainer: {
flexDirection: 'column',
flex: 1,
paddingTop: 8
},
centerAlignedContainer: {
paddingTop: 0
}
});
export default Appbar;
// @component-docs ignore-next-line
export { Appbar };
//# sourceMappingURL=Appbar.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,61 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import color from 'color';
import { useInternalTheme } from '../../core/theming';
import { black } from '../../styles/themes/v2/colors';
import { forwardRef } from '../../utils/forwardRef';
import IconButton from '../IconButton/IconButton';
/**
* A component used to display an action item in the appbar.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Appbar } from 'react-native-paper';
* import { Platform } from 'react-native';
*
* const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
*
* const MyComponent = () => (
* <Appbar.Header>
* <Appbar.Content title="Title" subtitle={'Subtitle'} />
* <Appbar.Action icon="magnify" onPress={() => {}} />
* <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
* </Appbar.Header>
* );
*
* export default MyComponent;
* ```
*/
const AppbarAction = forwardRef(({
size = 24,
color: iconColor,
icon,
disabled,
onPress,
accessibilityLabel,
isLeading,
theme: themeOverrides,
rippleColor,
...rest
}, ref) => {
const theme = useInternalTheme(themeOverrides);
const actionIconColor = iconColor ? iconColor : theme.isV3 ? isLeading ? theme.colors.onSurface : theme.colors.onSurfaceVariant : color(black).alpha(0.54).rgb().string();
return /*#__PURE__*/React.createElement(IconButton, _extends({
size: size,
onPress: onPress,
iconColor: actionIconColor,
icon: icon,
disabled: disabled,
accessibilityLabel: accessibilityLabel,
animated: true,
ref: ref,
rippleColor: rippleColor
}, rest));
});
AppbarAction.displayName = 'Appbar.Action';
export default AppbarAction;
// @component-docs ignore-next-line
export { AppbarAction };
//# sourceMappingURL=AppbarAction.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","color","useInternalTheme","black","forwardRef","IconButton","AppbarAction","size","iconColor","icon","disabled","onPress","accessibilityLabel","isLeading","theme","themeOverrides","rippleColor","rest","ref","actionIconColor","isV3","colors","onSurface","onSurfaceVariant","alpha","rgb","string","createElement","_extends","animated","displayName"],"sourceRoot":"../../../../src","sources":["components/Appbar/AppbarAction.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAS9B,OAAOC,KAAK,MAAM,OAAO;AAGzB,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,KAAK,QAAQ,+BAA+B;AACrD,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,OAAOC,UAAU,MAAM,0BAA0B;AA6CjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAAY,GAAGF,UAAU,CAC7B,CACE;EACEG,IAAI,GAAG,EAAE;EACTN,KAAK,EAAEO,SAAS;EAChBC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPC,kBAAkB;EAClBC,SAAS;EACTC,KAAK,EAAEC,cAAc;EACrBC,WAAW;EACX,GAAGC;AACE,CAAC,EACRC,GAAG,KACA;EACH,MAAMJ,KAAK,GAAGZ,gBAAgB,CAACa,cAAc,CAAC;EAE9C,MAAMI,eAAe,GAAGX,SAAS,GAC7BA,SAAS,GACTM,KAAK,CAACM,IAAI,GACVP,SAAS,GACPC,KAAK,CAACO,MAAM,CAACC,SAAS,GACtBR,KAAK,CAACO,MAAM,CAACE,gBAAgB,GAC/BtB,KAAK,CAACE,KAAK,CAAC,CAACqB,KAAK,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC,CAAC,CAACC,MAAM,CAAC,CAAC;EAE3C,oBACE1B,KAAA,CAAA2B,aAAA,CAACtB,UAAU,EAAAuB,QAAA;IACTrB,IAAI,EAAEA,IAAK;IACXI,OAAO,EAAEA,OAAQ;IACjBH,SAAS,EAAEW,eAAgB;IAC3BV,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBE,kBAAkB,EAAEA,kBAAmB;IACvCiB,QAAQ;IACRX,GAAG,EAAEA,GAAI;IACTF,WAAW,EAAEA;EAAY,GACrBC,IAAI,CACT,CAAC;AAEN,CACF,CAAC;AAEDX,YAAY,CAACwB,WAAW,GAAG,eAAe;AAE1C,eAAexB,YAAY;;AAE3B;AACA,SAASA,YAAY","ignoreList":[]}

View File

@@ -0,0 +1,38 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import AppbarAction from './AppbarAction';
import AppbarBackIcon from './AppbarBackIcon';
import { forwardRef } from '../../utils/forwardRef';
/**
* A component used to display a back button in the appbar.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Appbar } from 'react-native-paper';
*
* const MyComponent = () => (
* <Appbar.Header>
* <Appbar.BackAction onPress={() => {}} />
* </Appbar.Header>
* );
*
* export default MyComponent;
* ```
*/
const AppbarBackAction = forwardRef(({
accessibilityLabel = 'Back',
...rest
}, ref) => /*#__PURE__*/React.createElement(AppbarAction, _extends({
accessibilityLabel: accessibilityLabel
}, rest, {
icon: AppbarBackIcon,
isLeading: true,
ref: ref
})));
AppbarBackAction.displayName = 'Appbar.BackAction';
export default AppbarBackAction;
// @component-docs ignore-next-line
export { AppbarBackAction };
//# sourceMappingURL=AppbarBackAction.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","AppbarAction","AppbarBackIcon","forwardRef","AppbarBackAction","accessibilityLabel","rest","ref","createElement","_extends","icon","isLeading","displayName"],"sourceRoot":"../../../../src","sources":["components/Appbar/AppbarBackAction.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAU9B,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,wBAAwB;AA8BnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAGD,UAAU,CACjC,CAAC;EAAEE,kBAAkB,GAAG,MAAM;EAAE,GAAGC;AAAY,CAAC,EAAEC,GAAG,kBACnDP,KAAA,CAAAQ,aAAA,CAACP,YAAY,EAAAQ,QAAA;EACXJ,kBAAkB,EAAEA;AAAmB,GACnCC,IAAI;EACRI,IAAI,EAAER,cAAe;EACrBS,SAAS;EACTJ,GAAG,EAAEA;AAAI,EACV,CAEL,CAAC;AAEDH,gBAAgB,CAACQ,WAAW,GAAG,mBAAmB;AAElD,eAAeR,gBAAgB;;AAE/B;AACA,SAASA,gBAAgB","ignoreList":[]}

View File

@@ -0,0 +1,45 @@
import * as React from 'react';
import { I18nManager, Image, Platform, StyleSheet, View } from 'react-native';
import MaterialCommunityIcon from '../MaterialCommunityIcon';
const AppbarBackIcon = ({
size,
color
}) => {
const iosIconSize = size - 3;
return Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(View, {
style: [styles.wrapper, {
width: size,
height: size,
transform: [{
scaleX: I18nManager.getConstants().isRTL ? -1 : 1
}]
}]
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../assets/back-chevron.png'),
style: [styles.icon, {
tintColor: color,
width: iosIconSize,
height: iosIconSize
}],
accessibilityIgnoresInvertColors: true
})) : /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: "arrow-left",
color: color,
size: size,
direction: I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
});
};
const styles = StyleSheet.create({
wrapper: {
alignItems: 'center',
justifyContent: 'center'
},
icon: {
resizeMode: 'contain'
}
});
export default AppbarBackIcon;
// @component-docs ignore-next-line
export { AppbarBackIcon };
//# sourceMappingURL=AppbarBackIcon.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","I18nManager","Image","Platform","StyleSheet","View","MaterialCommunityIcon","AppbarBackIcon","size","color","iosIconSize","OS","createElement","style","styles","wrapper","width","height","transform","scaleX","getConstants","isRTL","source","require","icon","tintColor","accessibilityIgnoresInvertColors","name","direction","create","alignItems","justifyContent","resizeMode"],"sourceRoot":"../../../../src","sources":["components/Appbar/AppbarBackIcon.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE7E,OAAOC,qBAAqB,MAAM,0BAA0B;AAE5D,MAAMC,cAAc,GAAGA,CAAC;EAAEC,IAAI;EAAEC;AAAuC,CAAC,KAAK;EAC3E,MAAMC,WAAW,GAAGF,IAAI,GAAG,CAAC;EAE5B,OAAOL,QAAQ,CAACQ,EAAE,KAAK,KAAK,gBAC1BX,KAAA,CAAAY,aAAA,CAACP,IAAI;IACHQ,KAAK,EAAE,CACLC,MAAM,CAACC,OAAO,EACd;MACEC,KAAK,EAAER,IAAI;MACXS,MAAM,EAAET,IAAI;MACZU,SAAS,EAAE,CAAC;QAAEC,MAAM,EAAElB,WAAW,CAACmB,YAAY,CAAC,CAAC,CAACC,KAAK,GAAG,CAAC,CAAC,GAAG;MAAE,CAAC;IACnE,CAAC;EACD,gBAEFrB,KAAA,CAAAY,aAAA,CAACV,KAAK;IACJoB,MAAM,EAAEC,OAAO,CAAC,+BAA+B,CAAE;IACjDV,KAAK,EAAE,CACLC,MAAM,CAACU,IAAI,EACX;MAAEC,SAAS,EAAEhB,KAAK;MAAEO,KAAK,EAAEN,WAAW;MAAEO,MAAM,EAAEP;IAAY,CAAC,CAC7D;IACFgB,gCAAgC;EAAA,CACjC,CACG,CAAC,gBAEP1B,KAAA,CAAAY,aAAA,CAACN,qBAAqB;IACpBqB,IAAI,EAAC,YAAY;IACjBlB,KAAK,EAAEA,KAAM;IACbD,IAAI,EAAEA,IAAK;IACXoB,SAAS,EAAE3B,WAAW,CAACmB,YAAY,CAAC,CAAC,CAACC,KAAK,GAAG,KAAK,GAAG;EAAM,CAC7D,CACF;AACH,CAAC;AAED,MAAMP,MAAM,GAAGV,UAAU,CAACyB,MAAM,CAAC;EAC/Bd,OAAO,EAAE;IACPe,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDP,IAAI,EAAE;IACJQ,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,eAAezB,cAAc;;AAE7B;AACA,SAASA,cAAc","ignoreList":[]}

View File

@@ -0,0 +1,134 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Platform, StyleSheet, Pressable, View } from 'react-native';
import color from 'color';
import { modeTextVariant } from './utils';
import { useInternalTheme } from '../../core/theming';
import { white } from '../../styles/themes/v2/colors';
import Text from '../Typography/Text';
/**
* A component used to display a title and optional subtitle in an appbar.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Appbar } from 'react-native-paper';
*
* const MyComponent = () => (
* <Appbar.Header>
* <Appbar.Content title="Title" />
* </Appbar.Header>
* );
*
* export default MyComponent;
* ```
*/
const AppbarContent = ({
color: titleColor,
subtitle,
subtitleStyle,
onPress,
disabled,
style,
titleRef,
titleStyle,
title,
titleMaxFontSizeMultiplier,
mode = 'small',
theme: themeOverrides,
testID = 'appbar-content',
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const {
isV3,
colors
} = theme;
const titleTextColor = titleColor ? titleColor : isV3 ? colors.onSurface : white;
const subtitleColor = color(titleTextColor).alpha(0.7).rgb().string();
const modeContainerStyles = {
small: styles.v3DefaultContainer,
medium: styles.v3MediumContainer,
large: styles.v3LargeContainer,
'center-aligned': styles.v3DefaultContainer
};
const variant = modeTextVariant[mode];
const contentWrapperProps = {
pointerEvents: 'box-none',
style: [styles.container, isV3 && modeContainerStyles[mode], style],
testID,
...rest
};
const content = /*#__PURE__*/React.createElement(React.Fragment, null, typeof title === 'string' ? /*#__PURE__*/React.createElement(Text, _extends({}, isV3 && {
variant
}, {
ref: titleRef,
style: [{
color: titleTextColor,
...(isV3 ? theme.fonts[variant] : Platform.OS === 'ios' ? theme.fonts.regular : theme.fonts.medium)
}, !isV3 && styles.title, titleStyle],
numberOfLines: 1,
accessible: true,
accessibilityRole: onPress ? 'none' : Platform.OS === 'web' ? 'heading' : 'header'
// @ts-expect-error We keep old a11y props for backwards compat with old RN versions
,
accessibilityTraits: "header",
testID: `${testID}-title-text`,
maxFontSizeMultiplier: titleMaxFontSizeMultiplier
}), title) : title, !isV3 && subtitle ? /*#__PURE__*/React.createElement(Text, {
style: [styles.subtitle, {
color: subtitleColor
}, subtitleStyle],
numberOfLines: 1
}, subtitle) : null);
if (onPress) {
return (
/*#__PURE__*/
// eslint-disable-next-line react-native-a11y/has-accessibility-props
React.createElement(Pressable, _extends({
accessibilityRole: touchableRole
// @ts-expect-error We keep old a11y props for backwards compat with old RN versions
,
accessibilityTraits: touchableRole,
accessibilityComponentType: "button",
accessbilityState: disabled ? 'disabled' : null,
onPress: onPress,
disabled: disabled
}, contentWrapperProps), content)
);
}
return /*#__PURE__*/React.createElement(View, contentWrapperProps, content);
};
AppbarContent.displayName = 'Appbar.Content';
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 12
},
v3DefaultContainer: {
paddingHorizontal: 0
},
v3MediumContainer: {
paddingHorizontal: 0,
justifyContent: 'flex-end',
paddingBottom: 24
},
v3LargeContainer: {
paddingHorizontal: 0,
paddingTop: 36,
justifyContent: 'flex-end',
paddingBottom: 28
},
title: {
fontSize: Platform.OS === 'ios' ? 17 : 20
},
subtitle: {
fontSize: Platform.OS === 'ios' ? 11 : 14
}
});
const touchableRole = 'button';
export default AppbarContent;
// @component-docs ignore-next-line
export { AppbarContent };
//# sourceMappingURL=AppbarContent.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","Platform","StyleSheet","Pressable","View","color","modeTextVariant","useInternalTheme","white","Text","AppbarContent","titleColor","subtitle","subtitleStyle","onPress","disabled","style","titleRef","titleStyle","title","titleMaxFontSizeMultiplier","mode","theme","themeOverrides","testID","rest","isV3","colors","titleTextColor","onSurface","subtitleColor","alpha","rgb","string","modeContainerStyles","small","styles","v3DefaultContainer","medium","v3MediumContainer","large","v3LargeContainer","variant","contentWrapperProps","pointerEvents","container","content","createElement","Fragment","_extends","ref","fonts","OS","regular","numberOfLines","accessible","accessibilityRole","accessibilityTraits","maxFontSizeMultiplier","touchableRole","accessibilityComponentType","accessbilityState","displayName","create","flex","paddingHorizontal","justifyContent","paddingBottom","paddingTop","fontSize"],"sourceRoot":"../../../../src","sources":["components/Appbar/AppbarContent.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAGEC,QAAQ,EAERC,UAAU,EAEVC,SAAS,EACTC,IAAI,QAGC,cAAc;AAErB,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,SAAS;AACzC,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,KAAK,QAAQ,+BAA+B;AAErD,OAAOC,IAAI,MAAmB,oBAAoB;AAiElD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAGA,CAAC;EACrBL,KAAK,EAAEM,UAAU;EACjBC,QAAQ;EACRC,aAAa;EACbC,OAAO;EACPC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,UAAU;EACVC,KAAK;EACLC,0BAA0B;EAC1BC,IAAI,GAAG,OAAO;EACdC,KAAK,EAAEC,cAAc;EACrBC,MAAM,GAAG,gBAAgB;EACzB,GAAGC;AACE,CAAC,KAAK;EACX,MAAMH,KAAK,GAAGf,gBAAgB,CAACgB,cAAc,CAAC;EAC9C,MAAM;IAAEG,IAAI;IAAEC;EAAO,CAAC,GAAGL,KAAK;EAE9B,MAAMM,cAAc,GAAGjB,UAAU,GAC7BA,UAAU,GACVe,IAAI,GACJC,MAAM,CAACE,SAAS,GAChBrB,KAAK;EAET,MAAMsB,aAAa,GAAGzB,KAAK,CAACuB,cAAc,CAAC,CAACG,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,CAAC,CAACC,MAAM,CAAC,CAAC;EAErE,MAAMC,mBAAmB,GAAG;IAC1BC,KAAK,EAAEC,MAAM,CAACC,kBAAkB;IAChCC,MAAM,EAAEF,MAAM,CAACG,iBAAiB;IAChCC,KAAK,EAAEJ,MAAM,CAACK,gBAAgB;IAC9B,gBAAgB,EAAEL,MAAM,CAACC;EAC3B,CAAC;EAED,MAAMK,OAAO,GAAGpC,eAAe,CAACe,IAAI,CAAoB;EAExD,MAAMsB,mBAAmB,GAAG;IAC1BC,aAAa,EAAE,UAAwC;IACvD5B,KAAK,EAAE,CAACoB,MAAM,CAACS,SAAS,EAAEnB,IAAI,IAAIQ,mBAAmB,CAACb,IAAI,CAAC,EAAEL,KAAK,CAAC;IACnEQ,MAAM;IACN,GAAGC;EACL,CAAC;EAED,MAAMqB,OAAO,gBACX9C,KAAA,CAAA+C,aAAA,CAAA/C,KAAA,CAAAgD,QAAA,QACG,OAAO7B,KAAK,KAAK,QAAQ,gBACxBnB,KAAA,CAAA+C,aAAA,CAACtC,IAAI,EAAAwC,QAAA,KACEvB,IAAI,IAAI;IAAEgB;EAAQ,CAAC;IACxBQ,GAAG,EAAEjC,QAAS;IACdD,KAAK,EAAE,CACL;MACEX,KAAK,EAAEuB,cAAc;MACrB,IAAIF,IAAI,GACJJ,KAAK,CAAC6B,KAAK,CAACT,OAAO,CAAC,GACpBzC,QAAQ,CAACmD,EAAE,KAAK,KAAK,GACrB9B,KAAK,CAAC6B,KAAK,CAACE,OAAO,GACnB/B,KAAK,CAAC6B,KAAK,CAACb,MAAM;IACxB,CAAC,EACD,CAACZ,IAAI,IAAIU,MAAM,CAACjB,KAAK,EACrBD,UAAU,CACV;IACFoC,aAAa,EAAE,CAAE;IACjBC,UAAU;IACVC,iBAAiB,EACf1C,OAAO,GACH,MAAM,GACNb,QAAQ,CAACmD,EAAE,KAAK,KAAK,GACpB,SAAS,GACV;IAEN;IAAA;IACAK,mBAAmB,EAAC,QAAQ;IAC5BjC,MAAM,EAAE,GAAGA,MAAM,aAAc;IAC/BkC,qBAAqB,EAAEtC;EAA2B,IAEjDD,KACG,CAAC,GAEPA,KACD,EACA,CAACO,IAAI,IAAId,QAAQ,gBAChBZ,KAAA,CAAA+C,aAAA,CAACtC,IAAI;IACHO,KAAK,EAAE,CAACoB,MAAM,CAACxB,QAAQ,EAAE;MAAEP,KAAK,EAAEyB;IAAc,CAAC,EAAEjB,aAAa,CAAE;IAClEyC,aAAa,EAAE;EAAE,GAEhB1C,QACG,CAAC,GACL,IACJ,CACH;EAED,IAAIE,OAAO,EAAE;IACX;MAAA;MACE;MACAd,KAAA,CAAA+C,aAAA,CAAC5C,SAAS,EAAA8C,QAAA;QACRO,iBAAiB,EAAEG;QACnB;QAAA;QACAF,mBAAmB,EAAEE,aAAc;QACnCC,0BAA0B,EAAC,QAAQ;QACnCC,iBAAiB,EAAE9C,QAAQ,GAAG,UAAU,GAAG,IAAK;QAChDD,OAAO,EAAEA,OAAQ;QACjBC,QAAQ,EAAEA;MAAS,GACf4B,mBAAmB,GAEtBG,OACQ;IAAC;EAEhB;EAEA,oBAAO9C,KAAA,CAAA+C,aAAA,CAAC3C,IAAI,EAAKuC,mBAAmB,EAAGG,OAAc,CAAC;AACxD,CAAC;AAEDpC,aAAa,CAACoD,WAAW,GAAG,gBAAgB;AAE5C,MAAM1B,MAAM,GAAGlC,UAAU,CAAC6D,MAAM,CAAC;EAC/BlB,SAAS,EAAE;IACTmB,IAAI,EAAE,CAAC;IACPC,iBAAiB,EAAE;EACrB,CAAC;EACD5B,kBAAkB,EAAE;IAClB4B,iBAAiB,EAAE;EACrB,CAAC;EACD1B,iBAAiB,EAAE;IACjB0B,iBAAiB,EAAE,CAAC;IACpBC,cAAc,EAAE,UAAU;IAC1BC,aAAa,EAAE;EACjB,CAAC;EACD1B,gBAAgB,EAAE;IAChBwB,iBAAiB,EAAE,CAAC;IACpBG,UAAU,EAAE,EAAE;IACdF,cAAc,EAAE,UAAU;IAC1BC,aAAa,EAAE;EACjB,CAAC;EACDhD,KAAK,EAAE;IACLkD,QAAQ,EAAEpE,QAAQ,CAACmD,EAAE,KAAK,KAAK,GAAG,EAAE,GAAG;EACzC,CAAC;EACDxC,QAAQ,EAAE;IACRyD,QAAQ,EAAEpE,QAAQ,CAACmD,EAAE,KAAK,KAAK,GAAG,EAAE,GAAG;EACzC;AACF,CAAC,CAAC;AAEF,MAAMO,aAAgC,GAAG,QAAQ;AAEjD,eAAejD,aAAa;;AAE5B;AACA,SAASA,aAAa","ignoreList":[]}

View File

@@ -0,0 +1,100 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Appbar } from './Appbar';
import { DEFAULT_APPBAR_HEIGHT, getAppbarBackgroundColor, modeAppbarHeight, getAppbarBorders } from './utils';
import { useInternalTheme } from '../../core/theming';
import shadow from '../../styles/shadow';
/**
* A component to use as a header at the top of the screen.
* It can contain the screen title, controls such as navigation buttons, menu button etc.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Appbar } from 'react-native-paper';
*
* const MyComponent = () => {
* const _goBack = () => console.log('Went back');
*
* const _handleSearch = () => console.log('Searching');
*
* const _handleMore = () => console.log('Shown more');
*
* return (
* <Appbar.Header>
* <Appbar.BackAction onPress={_goBack} />
* <Appbar.Content title="Title" />
* <Appbar.Action icon="magnify" onPress={_handleSearch} />
* <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
* </Appbar.Header>
* );
* };
*
* export default MyComponent;
* ```
*/
const AppbarHeader = ({
// Don't use default props since we check it to know whether we should use SafeAreaView
statusBarHeight,
style,
dark,
mode = Platform.OS === 'ios' ? 'center-aligned' : 'small',
elevated = false,
theme: themeOverrides,
testID = 'appbar-header',
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const {
isV3
} = theme;
const flattenedStyle = StyleSheet.flatten(style);
const {
height = isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT,
elevation = isV3 ? elevated ? 2 : 0 : 4,
backgroundColor: customBackground,
zIndex = isV3 && elevated ? 1 : 0,
...restStyle
} = flattenedStyle || {};
const borderRadius = getAppbarBorders(restStyle);
const backgroundColor = getAppbarBackgroundColor(theme, elevation, customBackground, elevated);
const {
top,
left,
right
} = useSafeAreaInsets();
return /*#__PURE__*/React.createElement(View, {
testID: `${testID}-root-layer`,
style: [{
backgroundColor,
zIndex,
elevation,
paddingTop: statusBarHeight ?? top,
paddingHorizontal: Math.max(left, right)
}, borderRadius, shadow(elevation)]
}, /*#__PURE__*/React.createElement(Appbar, _extends({
testID: testID,
style: [{
height,
backgroundColor
}, styles.appbar, restStyle],
dark: dark
}, isV3 && {
mode
}, rest, {
theme: theme
})));
};
AppbarHeader.displayName = 'Appbar.Header';
const styles = StyleSheet.create({
appbar: {
elevation: 0
}
});
export default AppbarHeader;
// @component-docs ignore-next-line
export { AppbarHeader };
//# sourceMappingURL=AppbarHeader.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","Platform","StyleSheet","View","useSafeAreaInsets","Appbar","DEFAULT_APPBAR_HEIGHT","getAppbarBackgroundColor","modeAppbarHeight","getAppbarBorders","useInternalTheme","shadow","AppbarHeader","statusBarHeight","style","dark","mode","OS","elevated","theme","themeOverrides","testID","rest","isV3","flattenedStyle","flatten","height","elevation","backgroundColor","customBackground","zIndex","restStyle","borderRadius","top","left","right","createElement","paddingTop","paddingHorizontal","Math","max","_extends","styles","appbar","displayName","create"],"sourceRoot":"../../../../src","sources":["components/Appbar/AppbarHeader.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAGEC,QAAQ,EAERC,UAAU,EACVC,IAAI,QAEC,cAAc;AAErB,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE,SAASC,MAAM,QAAQ,UAAU;AACjC,SACEC,qBAAqB,EACrBC,wBAAwB,EACxBC,gBAAgB,EAChBC,gBAAgB,QACX,SAAS;AAChB,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,OAAOC,MAAM,MAAM,qBAAqB;AA4CxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAAY,GAAGA,CAAC;EACpB;EACAC,eAAe;EACfC,KAAK;EACLC,IAAI;EACJC,IAAI,GAAGf,QAAQ,CAACgB,EAAE,KAAK,KAAK,GAAG,gBAAgB,GAAG,OAAO;EACzDC,QAAQ,GAAG,KAAK;EAChBC,KAAK,EAAEC,cAAc;EACrBC,MAAM,GAAG,eAAe;EACxB,GAAGC;AACE,CAAC,KAAK;EACX,MAAMH,KAAK,GAAGT,gBAAgB,CAACU,cAAc,CAAC;EAC9C,MAAM;IAAEG;EAAK,CAAC,GAAGJ,KAAK;EAEtB,MAAMK,cAAc,GAAGtB,UAAU,CAACuB,OAAO,CAACX,KAAK,CAAC;EAChD,MAAM;IACJY,MAAM,GAAGH,IAAI,GAAGf,gBAAgB,CAACQ,IAAI,CAAC,GAAGV,qBAAqB;IAC9DqB,SAAS,GAAGJ,IAAI,GAAIL,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAI,CAAC;IACzCU,eAAe,EAAEC,gBAAgB;IACjCC,MAAM,GAAGP,IAAI,IAAIL,QAAQ,GAAG,CAAC,GAAG,CAAC;IACjC,GAAGa;EACL,CAAC,GAAIP,cAAc,IAAI,CAAC,CAKvB;EAED,MAAMQ,YAAY,GAAGvB,gBAAgB,CAACsB,SAAS,CAAC;EAEhD,MAAMH,eAAe,GAAGrB,wBAAwB,CAC9CY,KAAK,EACLQ,SAAS,EACTE,gBAAgB,EAChBX,QACF,CAAC;EAED,MAAM;IAAEe,GAAG;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAG/B,iBAAiB,CAAC,CAAC;EAEhD,oBACEJ,KAAA,CAAAoC,aAAA,CAACjC,IAAI;IACHkB,MAAM,EAAE,GAAGA,MAAM,aAAc;IAC/BP,KAAK,EAAE,CACL;MACEc,eAAe;MACfE,MAAM;MACNH,SAAS;MACTU,UAAU,EAAExB,eAAe,IAAIoB,GAAG;MAClCK,iBAAiB,EAAEC,IAAI,CAACC,GAAG,CAACN,IAAI,EAAEC,KAAK;IACzC,CAAC,EACDH,YAAY,EACZrB,MAAM,CAACgB,SAAS,CAAC;EACjB,gBAEF3B,KAAA,CAAAoC,aAAA,CAAC/B,MAAM,EAAAoC,QAAA;IACLpB,MAAM,EAAEA,MAAO;IACfP,KAAK,EAAE,CAAC;MAAEY,MAAM;MAAEE;IAAgB,CAAC,EAAEc,MAAM,CAACC,MAAM,EAAEZ,SAAS,CAAE;IAC/DhB,IAAI,EAAEA;EAAK,GACNQ,IAAI,IAAI;IACXP;EACF,CAAC,EACGM,IAAI;IACRH,KAAK,EAAEA;EAAM,EACd,CACG,CAAC;AAEX,CAAC;AAEDP,YAAY,CAACgC,WAAW,GAAG,eAAe;AAE1C,MAAMF,MAAM,GAAGxC,UAAU,CAAC2C,MAAM,CAAC;EAC/BF,MAAM,EAAE;IACNhB,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,eAAef,YAAY;;AAE3B;AACA,SAASA,YAAY","ignoreList":[]}

View File

@@ -0,0 +1,19 @@
import AppbarComponent from './Appbar';
import AppbarAction from './AppbarAction';
import AppbarBackAction from './AppbarBackAction';
import AppbarContent from './AppbarContent';
import AppbarHeader from './AppbarHeader';
const Appbar = Object.assign(
// @component ./Appbar.tsx
AppbarComponent, {
// @component ./AppbarContent.tsx
Content: AppbarContent,
// @component ./AppbarAction.tsx
Action: AppbarAction,
// @component ./AppbarBackAction.tsx
BackAction: AppbarBackAction,
// @component ./AppbarHeader.tsx
Header: AppbarHeader
});
export default Appbar;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["AppbarComponent","AppbarAction","AppbarBackAction","AppbarContent","AppbarHeader","Appbar","Object","assign","Content","Action","BackAction","Header"],"sourceRoot":"../../../../src","sources":["components/Appbar/index.ts"],"mappings":"AAAA,OAAOA,eAAe,MAAM,UAAU;AACtC,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,YAAY,MAAM,gBAAgB;AAEzC,MAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM;AAC1B;AACAP,eAAe,EACf;EACE;EACAQ,OAAO,EAAEL,aAAa;EACtB;EACAM,MAAM,EAAER,YAAY;EACpB;EACAS,UAAU,EAAER,gBAAgB;EAC5B;EACAS,MAAM,EAAEP;AACV,CACF,CAAC;AAED,eAAeC,MAAM","ignoreList":[]}

View File

@@ -0,0 +1,123 @@
import React from 'react';
import { StyleSheet } from 'react-native';
import overlay from '../../styles/overlay';
import { black, white } from '../../styles/themes/v2/colors';
const borderStyleProperties = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'];
export const getAppbarBackgroundColor = (theme, elevation, customBackground, elevated) => {
const {
isV3,
dark: isDarkTheme,
mode,
colors
} = theme;
const isAdaptiveMode = mode === 'adaptive';
if (customBackground) {
return customBackground;
}
if (!isV3) {
if (isDarkTheme && isAdaptiveMode) {
return overlay(elevation, colors === null || colors === void 0 ? void 0 : colors.surface);
}
return colors.primary;
}
if (elevated) {
return theme.colors.elevation.level2;
}
return colors.surface;
};
export const getAppbarColor = ({
color,
isDark,
isV3
}) => {
if (typeof color !== 'undefined') {
return color;
}
if (isDark) {
return white;
}
if (isV3) {
return undefined;
}
return black;
};
export const getAppbarBorders = style => {
const borders = {};
for (const property of borderStyleProperties) {
const value = style[property];
if (value) {
borders[property] = value;
}
}
return borders;
};
export const DEFAULT_APPBAR_HEIGHT = 56;
const MD3_DEFAULT_APPBAR_HEIGHT = 64;
export const modeAppbarHeight = {
small: MD3_DEFAULT_APPBAR_HEIGHT,
medium: 112,
large: 152,
'center-aligned': MD3_DEFAULT_APPBAR_HEIGHT
};
export const modeTextVariant = {
small: 'titleLarge',
medium: 'headlineSmall',
large: 'headlineMedium',
'center-aligned': 'titleLarge'
};
export const filterAppbarActions = (children, isLeading = false) => {
return React.Children.toArray(children).filter(child => {
if (! /*#__PURE__*/React.isValidElement(child)) return false;
return isLeading ? child.props.isLeading : !child.props.isLeading;
});
};
export const renderAppbarContent = ({
children,
isDark,
shouldCenterContent = false,
isV3,
renderOnly,
renderExcept,
mode = 'small',
theme
}) => {
return React.Children.toArray(children).filter(child => child != null && typeof child !== 'boolean').filter(child =>
// @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
renderExcept ? !renderExcept.includes(child.type.displayName) : child).filter(child =>
// @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
renderOnly ? renderOnly.includes(child.type.displayName) : child).map((child, i) => {
if (! /*#__PURE__*/React.isValidElement(child) || !['Appbar.Content', 'Appbar.Action', 'Appbar.BackAction', 'Tooltip'].includes(
// @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
child.type.displayName)) {
return child;
}
const props = {
theme,
color: getAppbarColor({
color: child.props.color,
isDark,
isV3
})
};
// @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
if (child.type.displayName === 'Appbar.Content') {
props.mode = mode;
props.style = [isV3 ? i === 0 && !shouldCenterContent && styles.v3Spacing : i !== 0 && styles.v2Spacing, shouldCenterContent && styles.centerAlignedContent, child.props.style];
props.color;
}
return /*#__PURE__*/React.cloneElement(child, props);
});
};
const styles = StyleSheet.create({
centerAlignedContent: {
alignItems: 'center'
},
v2Spacing: {
marginLeft: 8
},
v3Spacing: {
marginLeft: 12
}
});
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","overlay","black","white","borderStyleProperties","getAppbarBackgroundColor","theme","elevation","customBackground","elevated","isV3","dark","isDarkTheme","mode","colors","isAdaptiveMode","surface","primary","level2","getAppbarColor","color","isDark","undefined","getAppbarBorders","style","borders","property","value","DEFAULT_APPBAR_HEIGHT","MD3_DEFAULT_APPBAR_HEIGHT","modeAppbarHeight","small","medium","large","modeTextVariant","filterAppbarActions","children","isLeading","Children","toArray","filter","child","isValidElement","props","renderAppbarContent","shouldCenterContent","renderOnly","renderExcept","includes","type","displayName","map","i","styles","v3Spacing","v2Spacing","centerAlignedContent","cloneElement","create","alignItems","marginLeft"],"sourceRoot":"../../../../src","sources":["components/Appbar/utils.ts"],"mappings":"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","ignoreList":[]}

View File

@@ -0,0 +1,9 @@
// @component ./AvatarIcon.tsx
export { default as Icon } from './AvatarIcon';
// @component ./AvatarImage.tsx
export { default as Image } from './AvatarImage';
// @component ./AvatarText.tsx
export { default as Text } from './AvatarText';
//# sourceMappingURL=Avatar.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["default","Icon","Image","Text"],"sourceRoot":"../../../../src","sources":["components/Avatar/Avatar.tsx"],"mappings":"AAAA;AACA,SAASA,OAAO,IAAIC,IAAI,QAAQ,cAAc;;AAE9C;AACA,SAASD,OAAO,IAAIE,KAAK,QAAQ,eAAe;;AAEhD;AACA,SAASF,OAAO,IAAIG,IAAI,QAAQ,cAAc","ignoreList":[]}

View File

@@ -0,0 +1,57 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { useInternalTheme } from '../../core/theming';
import { white } from '../../styles/themes/v2/colors';
import getContrastingColor from '../../utils/getContrastingColor';
import Icon from '../Icon';
const defaultSize = 64;
/**
* Avatars can be used to represent people in a graphical way.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Avatar } from 'react-native-paper';
*
* const MyComponent = () => (
* <Avatar.Icon size={24} icon="folder" />
* );
* ```
*/
const Avatar = ({
icon,
size = defaultSize,
style,
theme: themeOverrides,
...rest
}) => {
var _theme$colors;
const theme = useInternalTheme(themeOverrides);
const {
backgroundColor = (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.primary,
...restStyle
} = StyleSheet.flatten(style) || {};
const textColor = rest.color ?? getContrastingColor(backgroundColor, white, 'rgba(0, 0, 0, .54)');
return /*#__PURE__*/React.createElement(View, _extends({
style: [{
width: size,
height: size,
borderRadius: size / 2,
backgroundColor
}, styles.container, restStyle]
}, rest), /*#__PURE__*/React.createElement(Icon, {
source: icon,
color: textColor,
size: size * 0.6
}));
};
Avatar.displayName = 'Avatar.Icon';
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
}
});
export default Avatar;
//# sourceMappingURL=AvatarIcon.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","useInternalTheme","white","getContrastingColor","Icon","defaultSize","Avatar","icon","size","style","theme","themeOverrides","rest","_theme$colors","backgroundColor","colors","primary","restStyle","flatten","textColor","color","createElement","_extends","width","height","borderRadius","styles","container","source","displayName","create","justifyContent","alignItems"],"sourceRoot":"../../../../src","sources":["components/Avatar/AvatarIcon.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAoBC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAErE,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,KAAK,QAAQ,+BAA+B;AAErD,OAAOC,mBAAmB,MAAM,iCAAiC;AACjE,OAAOC,IAAI,MAAsB,SAAS;AAE1C,MAAMC,WAAW,GAAG,EAAE;AAsBtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,MAAM,GAAGA,CAAC;EACdC,IAAI;EACJC,IAAI,GAAGH,WAAW;EAClBI,KAAK;EACLC,KAAK,EAAEC,cAAc;EACrB,GAAGC;AACE,CAAC,KAAK;EAAA,IAAAC,aAAA;EACX,MAAMH,KAAK,GAAGT,gBAAgB,CAACU,cAAc,CAAC;EAC9C,MAAM;IAAEG,eAAe,IAAAD,aAAA,GAAGH,KAAK,CAACK,MAAM,cAAAF,aAAA,uBAAZA,aAAA,CAAcG,OAAO;IAAE,GAAGC;EAAU,CAAC,GAC7DlB,UAAU,CAACmB,OAAO,CAACT,KAAK,CAAC,IAAI,CAAC,CAAC;EACjC,MAAMU,SAAS,GACbP,IAAI,CAACQ,KAAK,IACVjB,mBAAmB,CAACW,eAAe,EAAEZ,KAAK,EAAE,oBAAoB,CAAC;EAEnE,oBACEJ,KAAA,CAAAuB,aAAA,CAACrB,IAAI,EAAAsB,QAAA;IACHb,KAAK,EAAE,CACL;MACEc,KAAK,EAAEf,IAAI;MACXgB,MAAM,EAAEhB,IAAI;MACZiB,YAAY,EAAEjB,IAAI,GAAG,CAAC;MACtBM;IACF,CAAC,EACDY,MAAM,CAACC,SAAS,EAChBV,SAAS;EACT,GACEL,IAAI,gBAERd,KAAA,CAAAuB,aAAA,CAACjB,IAAI;IAACwB,MAAM,EAAErB,IAAK;IAACa,KAAK,EAAED,SAAU;IAACX,IAAI,EAAEA,IAAI,GAAG;EAAI,CAAE,CACrD,CAAC;AAEX,CAAC;AAEDF,MAAM,CAACuB,WAAW,GAAG,aAAa;AAElC,MAAMH,MAAM,GAAG3B,UAAU,CAAC+B,MAAM,CAAC;EAC/BH,SAAS,EAAE;IACTI,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,eAAe1B,MAAM","ignoreList":[]}

View File

@@ -0,0 +1,68 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { useInternalTheme } from '../../core/theming';
const defaultSize = 64;
/**
* Avatars can be used to represent people in a graphical way.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Avatar } from 'react-native-paper';
*
* const MyComponent = () => (
* <Avatar.Image size={24} source={require('../assets/avatar.png')} />
* );
* export default MyComponent
* ```
*/
const AvatarImage = ({
size = defaultSize,
source,
style,
onError,
onLayout,
onLoad,
onLoadEnd,
onLoadStart,
onProgress,
theme: themeOverrides,
testID,
...rest
}) => {
const {
colors
} = useInternalTheme(themeOverrides);
const {
backgroundColor = colors === null || colors === void 0 ? void 0 : colors.primary
} = StyleSheet.flatten(style) || {};
return /*#__PURE__*/React.createElement(View, _extends({
style: [{
width: size,
height: size,
borderRadius: size / 2,
backgroundColor
}, style]
}, rest), typeof source === 'function' && source({
size
}), typeof source !== 'function' && /*#__PURE__*/React.createElement(Image, {
testID: testID,
source: source,
style: {
width: size,
height: size,
borderRadius: size / 2
},
onError: onError,
onLayout: onLayout,
onLoad: onLoad,
onLoadEnd: onLoadEnd,
onLoadStart: onLoadStart,
onProgress: onProgress,
accessibilityIgnoresInvertColors: true
}));
};
AvatarImage.displayName = 'Avatar.Image';
export default AvatarImage;
//# sourceMappingURL=AvatarImage.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","Image","StyleSheet","View","useInternalTheme","defaultSize","AvatarImage","size","source","style","onError","onLayout","onLoad","onLoadEnd","onLoadStart","onProgress","theme","themeOverrides","testID","rest","colors","backgroundColor","primary","flatten","createElement","_extends","width","height","borderRadius","accessibilityIgnoresInvertColors","displayName"],"sourceRoot":"../../../../src","sources":["components/Avatar/AvatarImage.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,KAAK,EAILC,UAAU,EACVC,IAAI,QAEC,cAAc;AAErB,SAASC,gBAAgB,QAAQ,oBAAoB;AAGrD,MAAMC,WAAW,GAAG,EAAE;AAgDtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAGA,CAAC;EACnBC,IAAI,GAAGF,WAAW;EAClBG,MAAM;EACNC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,MAAM;EACNC,SAAS;EACTC,WAAW;EACXC,UAAU;EACVC,KAAK,EAAEC,cAAc;EACrBC,MAAM;EACN,GAAGC;AACE,CAAC,KAAK;EACX,MAAM;IAAEC;EAAO,CAAC,GAAGhB,gBAAgB,CAACa,cAAc,CAAC;EACnD,MAAM;IAAEI,eAAe,GAAGD,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEE;EAAQ,CAAC,GAAGpB,UAAU,CAACqB,OAAO,CAACd,KAAK,CAAC,IAAI,CAAC,CAAC;EAE7E,oBACET,KAAA,CAAAwB,aAAA,CAACrB,IAAI,EAAAsB,QAAA;IACHhB,KAAK,EAAE,CACL;MACEiB,KAAK,EAAEnB,IAAI;MACXoB,MAAM,EAAEpB,IAAI;MACZqB,YAAY,EAAErB,IAAI,GAAG,CAAC;MACtBc;IACF,CAAC,EACDZ,KAAK;EACL,GACEU,IAAI,GAEP,OAAOX,MAAM,KAAK,UAAU,IAAIA,MAAM,CAAC;IAAED;EAAK,CAAC,CAAC,EAChD,OAAOC,MAAM,KAAK,UAAU,iBAC3BR,KAAA,CAAAwB,aAAA,CAACvB,KAAK;IACJiB,MAAM,EAAEA,MAAO;IACfV,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAE;MAAEiB,KAAK,EAAEnB,IAAI;MAAEoB,MAAM,EAAEpB,IAAI;MAAEqB,YAAY,EAAErB,IAAI,GAAG;IAAE,CAAE;IAC7DG,OAAO,EAAEA,OAAQ;IACjBC,QAAQ,EAAEA,QAAS;IACnBC,MAAM,EAAEA,MAAO;IACfC,SAAS,EAAEA,SAAU;IACrBC,WAAW,EAAEA,WAAY;IACzBC,UAAU,EAAEA,UAAW;IACvBc,gCAAgC;EAAA,CACjC,CAEC,CAAC;AAEX,CAAC;AAEDvB,WAAW,CAACwB,WAAW,GAAG,cAAc;AAExC,eAAexB,WAAW","ignoreList":[]}

View File

@@ -0,0 +1,71 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, useWindowDimensions, View } from 'react-native';
import { useInternalTheme } from '../../core/theming';
import { white } from '../../styles/themes/v2/colors';
import getContrastingColor from '../../utils/getContrastingColor';
import Text from '../Typography/Text';
const defaultSize = 64;
/**
* Avatars can be used to represent people in a graphical way.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Avatar } from 'react-native-paper';
*
* const MyComponent = () => (
* <Avatar.Text size={24} label="XD" />
* );
* ```
*/
const AvatarText = ({
label,
size = defaultSize,
style,
labelStyle,
color: customColor,
theme: themeOverrides,
maxFontSizeMultiplier,
...rest
}) => {
var _theme$colors;
const theme = useInternalTheme(themeOverrides);
const {
backgroundColor = (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.primary,
...restStyle
} = StyleSheet.flatten(style) || {};
const textColor = customColor ?? getContrastingColor(backgroundColor, white, 'rgba(0, 0, 0, .54)');
const {
fontScale
} = useWindowDimensions();
return /*#__PURE__*/React.createElement(View, _extends({
style: [{
width: size,
height: size,
borderRadius: size / 2,
backgroundColor
}, styles.container, restStyle]
}, rest), /*#__PURE__*/React.createElement(Text, {
style: [styles.text, {
color: textColor,
fontSize: size / 2,
lineHeight: size / fontScale
}, labelStyle],
numberOfLines: 1,
maxFontSizeMultiplier: maxFontSizeMultiplier
}, label));
};
AvatarText.displayName = 'Avatar.Text';
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
},
text: {
textAlign: 'center',
textAlignVertical: 'center'
}
});
export default AvatarText;
//# sourceMappingURL=AvatarText.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","useWindowDimensions","View","useInternalTheme","white","getContrastingColor","Text","defaultSize","AvatarText","label","size","style","labelStyle","color","customColor","theme","themeOverrides","maxFontSizeMultiplier","rest","_theme$colors","backgroundColor","colors","primary","restStyle","flatten","textColor","fontScale","createElement","_extends","width","height","borderRadius","styles","container","text","fontSize","lineHeight","numberOfLines","displayName","create","justifyContent","alignItems","textAlign","textAlignVertical"],"sourceRoot":"../../../../src","sources":["components/Avatar/AvatarText.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAEEC,UAAU,EAEVC,mBAAmB,EACnBC,IAAI,QAEC,cAAc;AAErB,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,KAAK,QAAQ,+BAA+B;AAErD,OAAOC,mBAAmB,MAAM,iCAAiC;AACjE,OAAOC,IAAI,MAAM,oBAAoB;AAErC,MAAMC,WAAW,GAAG,EAAE;AAiCtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAGA,CAAC;EAClBC,KAAK;EACLC,IAAI,GAAGH,WAAW;EAClBI,KAAK;EACLC,UAAU;EACVC,KAAK,EAAEC,WAAW;EAClBC,KAAK,EAAEC,cAAc;EACrBC,qBAAqB;EACrB,GAAGC;AACE,CAAC,KAAK;EAAA,IAAAC,aAAA;EACX,MAAMJ,KAAK,GAAGZ,gBAAgB,CAACa,cAAc,CAAC;EAC9C,MAAM;IAAEI,eAAe,IAAAD,aAAA,GAAGJ,KAAK,CAACM,MAAM,cAAAF,aAAA,uBAAZA,aAAA,CAAcG,OAAO;IAAE,GAAGC;EAAU,CAAC,GAC7DvB,UAAU,CAACwB,OAAO,CAACb,KAAK,CAAC,IAAI,CAAC,CAAC;EACjC,MAAMc,SAAS,GACbX,WAAW,IACXT,mBAAmB,CAACe,eAAe,EAAEhB,KAAK,EAAE,oBAAoB,CAAC;EACnE,MAAM;IAAEsB;EAAU,CAAC,GAAGzB,mBAAmB,CAAC,CAAC;EAE3C,oBACEF,KAAA,CAAA4B,aAAA,CAACzB,IAAI,EAAA0B,QAAA;IACHjB,KAAK,EAAE,CACL;MACEkB,KAAK,EAAEnB,IAAI;MACXoB,MAAM,EAAEpB,IAAI;MACZqB,YAAY,EAAErB,IAAI,GAAG,CAAC;MACtBU;IACF,CAAC,EACDY,MAAM,CAACC,SAAS,EAChBV,SAAS;EACT,GACEL,IAAI,gBAERnB,KAAA,CAAA4B,aAAA,CAACrB,IAAI;IACHK,KAAK,EAAE,CACLqB,MAAM,CAACE,IAAI,EACX;MACErB,KAAK,EAAEY,SAAS;MAChBU,QAAQ,EAAEzB,IAAI,GAAG,CAAC;MAClB0B,UAAU,EAAE1B,IAAI,GAAGgB;IACrB,CAAC,EACDd,UAAU,CACV;IACFyB,aAAa,EAAE,CAAE;IACjBpB,qBAAqB,EAAEA;EAAsB,GAE5CR,KACG,CACF,CAAC;AAEX,CAAC;AAEDD,UAAU,CAAC8B,WAAW,GAAG,aAAa;AAEtC,MAAMN,MAAM,GAAGhC,UAAU,CAACuC,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACDP,IAAI,EAAE;IACJQ,SAAS,EAAE,QAAQ;IACnBC,iBAAiB,EAAE;EACrB;AACF,CAAC,CAAC;AAEF,eAAenC,UAAU","ignoreList":[]}

View File

@@ -0,0 +1,90 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Animated, StyleSheet, useWindowDimensions } from 'react-native';
import { useInternalTheme } from '../core/theming';
import { black, white } from '../styles/themes/v2/colors';
import getContrastingColor from '../utils/getContrastingColor';
const defaultSize = 20;
/**
* Badges are small status descriptors for UI elements.
* A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Badge } from 'react-native-paper';
*
* const MyComponent = () => (
* <Badge>3</Badge>
* );
*
* export default MyComponent;
* ```
*/
const Badge = ({
children,
size = defaultSize,
style,
theme: themeOverrides,
visible = true,
...rest
}) => {
var _theme$colors;
const theme = useInternalTheme(themeOverrides);
const {
current: opacity
} = React.useRef(new Animated.Value(visible ? 1 : 0));
const {
fontScale
} = useWindowDimensions();
const isFirstRendering = React.useRef(true);
const {
animation: {
scale
}
} = theme;
React.useEffect(() => {
// Do not run animation on very first rendering
if (isFirstRendering.current) {
isFirstRendering.current = false;
return;
}
Animated.timing(opacity, {
toValue: visible ? 1 : 0,
duration: 150 * scale,
useNativeDriver: true
}).start();
}, [visible, opacity, scale]);
const {
backgroundColor = theme.isV3 ? theme.colors.error : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.notification,
...restStyle
} = StyleSheet.flatten(style) || {};
const textColor = theme.isV3 ? theme.colors.onError : getContrastingColor(backgroundColor, white, black);
const borderRadius = size / 2;
const paddingHorizontal = theme.isV3 ? 3 : 4;
return /*#__PURE__*/React.createElement(Animated.Text, _extends({
numberOfLines: 1,
style: [{
opacity,
backgroundColor,
color: textColor,
fontSize: size * 0.5,
...(!theme.isV3 && theme.fonts.regular),
lineHeight: size / fontScale,
height: size,
minWidth: size,
borderRadius,
paddingHorizontal
}, styles.container, restStyle]
}, rest), children);
};
export default Badge;
const styles = StyleSheet.create({
container: {
alignSelf: 'flex-end',
textAlign: 'center',
textAlignVertical: 'center',
overflow: 'hidden'
}
});
//# sourceMappingURL=Badge.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","Animated","StyleSheet","useWindowDimensions","useInternalTheme","black","white","getContrastingColor","defaultSize","Badge","children","size","style","theme","themeOverrides","visible","rest","_theme$colors","current","opacity","useRef","Value","fontScale","isFirstRendering","animation","scale","useEffect","timing","toValue","duration","useNativeDriver","start","backgroundColor","isV3","colors","error","notification","restStyle","flatten","textColor","onError","borderRadius","paddingHorizontal","createElement","Text","_extends","numberOfLines","color","fontSize","fonts","regular","lineHeight","height","minWidth","styles","container","create","alignSelf","textAlign","textAlignVertical","overflow"],"sourceRoot":"../../../src","sources":["components/Badge.tsx"],"mappings":"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","ignoreList":[]}

View File

@@ -0,0 +1,227 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Animated, StyleSheet, View } from 'react-native';
import useLatestCallback from 'use-latest-callback';
import Button from './Button/Button';
import Icon from './Icon';
import Surface from './Surface';
import Text from './Typography/Text';
import { useInternalTheme } from '../core/theming';
const DEFAULT_MAX_WIDTH = 960;
/**
* Banner displays a prominent message and related actions.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Image } from 'react-native';
* import { Banner } from 'react-native-paper';
*
* const MyComponent = () => {
* const [visible, setVisible] = React.useState(true);
*
* return (
* <Banner
* visible={visible}
* actions={[
* {
* label: 'Fix it',
* onPress: () => setVisible(false),
* },
* {
* label: 'Learn more',
* onPress: () => setVisible(false),
* },
* ]}
* icon={({size}) => (
* <Image
* source={{
* uri: 'https://avatars3.githubusercontent.com/u/17571969?s=400&v=4',
* }}
* style={{
* width: size,
* height: size,
* }}
* />
* )}>
* There was a problem processing a transaction on your credit card.
* </Banner>
* );
* };
*
* export default MyComponent;
* ```
*/
const Banner = ({
visible,
icon,
children,
actions = [],
contentStyle,
elevation = 1,
style,
theme: themeOverrides,
onShowAnimationFinished = () => {},
onHideAnimationFinished = () => {},
maxFontSizeMultiplier,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const {
current: position
} = React.useRef(new Animated.Value(visible ? 1 : 0));
const [layout, setLayout] = React.useState({
height: 0,
measured: false
});
const showCallback = useLatestCallback(onShowAnimationFinished);
const hideCallback = useLatestCallback(onHideAnimationFinished);
const {
scale
} = theme.animation;
const opacity = position.interpolate({
inputRange: [0, 0.1, 1],
outputRange: [0, 1, 1]
});
React.useEffect(() => {
if (visible) {
// show
Animated.timing(position, {
duration: 250 * scale,
toValue: 1,
useNativeDriver: false
}).start(showCallback);
} else {
// hide
Animated.timing(position, {
duration: 200 * scale,
toValue: 0,
useNativeDriver: false
}).start(hideCallback);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [visible, position, scale]);
const handleLayout = ({
nativeEvent
}) => {
const {
height
} = nativeEvent.layout;
setLayout({
height,
measured: true
});
};
// The banner animation has 2 parts:
// 1. Blank spacer element which animates its height to move the content
// 2. Actual banner which animates its translateY
// In initial render, we position everything normally and measure the height of the banner
// Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
// We need this because we need to move the content below as if banner's height was being animated
// However we can't animated banner's height directly as it'll also resize the content inside
const height = Animated.multiply(position, layout.height);
const translateY = Animated.multiply(Animated.add(position, -1), layout.height);
return /*#__PURE__*/React.createElement(Surface, _extends({}, rest, {
style: [!theme.isV3 && styles.elevation, {
opacity
}, style],
theme: theme,
container: true
}, theme.isV3 && {
elevation
}), /*#__PURE__*/React.createElement(View, {
style: [styles.wrapper, contentStyle]
}, /*#__PURE__*/React.createElement(Animated.View, {
style: {
height
}
}), /*#__PURE__*/React.createElement(Animated.View, {
onLayout: handleLayout,
style: [layout.measured || !visible ?
// If we have measured banner's height or it's invisible,
// Position it absolutely, the layout will be taken care of the spacer
[styles.absolute, {
transform: [{
translateY
}]
}] :
// Otherwise position it normally
null, !layout.measured && !visible ?
// If we haven't measured banner's height yet and it's invisible,
// hide it with opacity: 0 so user doesn't see it
styles.transparent : null]
}, /*#__PURE__*/React.createElement(View, {
style: styles.content
}, icon ? /*#__PURE__*/React.createElement(View, {
style: styles.icon
}, /*#__PURE__*/React.createElement(Icon, {
source: icon,
size: 40
})) : null, /*#__PURE__*/React.createElement(Text, {
style: [styles.message, {
color: theme.isV3 ? theme.colors.onSurface : theme.colors.text
}],
accessibilityLiveRegion: visible ? 'polite' : 'none',
accessibilityRole: "alert",
maxFontSizeMultiplier: maxFontSizeMultiplier
}, children)), /*#__PURE__*/React.createElement(View, {
style: styles.actions
}, actions.map(({
label,
...others
}, i) => {
var _theme$colors;
return /*#__PURE__*/React.createElement(Button, _extends({
key: /* eslint-disable-line react/no-array-index-key */i,
compact: true,
mode: "text",
style: styles.button,
textColor: (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.primary,
theme: theme
}, others), label);
})))));
};
const styles = StyleSheet.create({
wrapper: {
overflow: 'hidden',
alignSelf: 'center',
width: '100%',
maxWidth: DEFAULT_MAX_WIDTH
},
absolute: {
position: 'absolute',
top: 0,
width: '100%'
},
content: {
flexDirection: 'row',
justifyContent: 'flex-start',
marginHorizontal: 8,
marginTop: 16,
marginBottom: 0
},
icon: {
margin: 8
},
message: {
flex: 1,
margin: 8
},
actions: {
flexDirection: 'row',
justifyContent: 'flex-end',
margin: 4
},
button: {
margin: 4
},
elevation: {
elevation: 1
},
transparent: {
opacity: 0
}
});
export default Banner;
//# sourceMappingURL=Banner.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,314 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Animated, Platform, StyleSheet, View } from 'react-native';
import useLatestCallback from 'use-latest-callback';
import BottomNavigationBar from './BottomNavigationBar';
import BottomNavigationRouteScreen from './BottomNavigationRouteScreen';
import { useInternalTheme } from '../../core/theming';
import useAnimatedValueArray from '../../utils/useAnimatedValueArray';
const FAR_FAR_AWAY = Platform.OS === 'web' ? 0 : 9999;
const SceneComponent = /*#__PURE__*/React.memo(({
component,
...rest
}) => /*#__PURE__*/React.createElement(component, rest));
/**
* BottomNavigation provides quick navigation between top-level views of an app with a bottom navigation bar.
* It is primarily designed for use on mobile. If you want to use the navigation bar only see [`BottomNavigation.Bar`](BottomNavigationBar).
*
* By default BottomNavigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
* See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { BottomNavigation, Text } from 'react-native-paper';
*
* const MusicRoute = () => <Text>Music</Text>;
*
* const AlbumsRoute = () => <Text>Albums</Text>;
*
* const RecentsRoute = () => <Text>Recents</Text>;
*
* const NotificationsRoute = () => <Text>Notifications</Text>;
*
* const MyComponent = () => {
* const [index, setIndex] = React.useState(0);
* const [routes] = React.useState([
* { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
* { key: 'albums', title: 'Albums', focusedIcon: 'album' },
* { key: 'recents', title: 'Recents', focusedIcon: 'history' },
* { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
* ]);
*
* const renderScene = BottomNavigation.SceneMap({
* music: MusicRoute,
* albums: AlbumsRoute,
* recents: RecentsRoute,
* notifications: NotificationsRoute,
* });
*
* return (
* <BottomNavigation
* navigationState={{ index, routes }}
* onIndexChange={setIndex}
* renderScene={renderScene}
* />
* );
* };
*
* export default MyComponent;
* ```
*/
const BottomNavigation = ({
navigationState,
renderScene,
renderIcon,
renderLabel,
renderTouchable,
getLabelText,
getBadge,
getColor,
getAccessibilityLabel,
getTestID,
activeColor,
inactiveColor,
keyboardHidesNavigationBar = Platform.OS === 'android',
barStyle,
labeled = true,
style,
activeIndicatorStyle,
sceneAnimationEnabled = false,
sceneAnimationType = 'opacity',
sceneAnimationEasing,
onTabPress,
onTabLongPress,
onIndexChange,
shifting: shiftingProp,
safeAreaInsets,
labelMaxFontSizeMultiplier = 1,
compact: compactProp,
testID = 'bottom-navigation',
theme: themeOverrides,
getLazy = ({
route
}) => route.lazy
}) => {
const theme = useInternalTheme(themeOverrides);
const {
scale
} = theme.animation;
const compact = compactProp ?? !theme.isV3;
let shifting = shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3);
if (shifting && navigationState.routes.length < 2) {
shifting = false;
console.warn('BottomNavigation needs at least 2 tabs to run shifting animation');
}
const focusedKey = navigationState.routes[navigationState.index].key;
/**
* Active state of individual tab item positions:
* -1 if they're before the active tab, 0 if they're active, 1 if they're after the active tab
*/
const tabsPositionAnims = useAnimatedValueArray(navigationState.routes.map((_, i) => i === navigationState.index ? 0 : i >= navigationState.index ? 1 : -1));
/**
* The top offset for each tab item to position it offscreen.
* Placing items offscreen helps to save memory usage for inactive screens with removeClippedSubviews.
* We use animated values for this to prevent unnecessary re-renders.
*/
const offsetsAnims = useAnimatedValueArray(navigationState.routes.map(
// offscreen === 1, normal === 0
(_, i) => i === navigationState.index ? 0 : 1));
/**
* List of loaded tabs, tabs will be loaded when navigated to.
*/
const [loaded, setLoaded] = React.useState([focusedKey]);
if (!loaded.includes(focusedKey)) {
// Set the current tab to be loaded if it was not loaded before
setLoaded(loaded => [...loaded, focusedKey]);
}
const animateToIndex = React.useCallback(index => {
Animated.parallel([...navigationState.routes.map((_, i) => Animated.timing(tabsPositionAnims[i], {
toValue: i === index ? 0 : i >= index ? 1 : -1,
duration: theme.isV3 || shifting ? 150 * scale : 0,
useNativeDriver: true,
easing: sceneAnimationEasing
}))]).start(({
finished
}) => {
if (finished) {
// Position all inactive screens offscreen to save memory usage
// Only do it when animation has finished to avoid glitches mid-transition if switching fast
offsetsAnims.forEach((offset, i) => {
if (i === index) {
offset.setValue(0);
} else {
offset.setValue(1);
}
});
}
});
}, [shifting, navigationState.routes, offsetsAnims, scale, tabsPositionAnims, sceneAnimationEasing, theme]);
React.useEffect(() => {
// Workaround for native animated bug in react-native@^0.57
// Context: https://github.com/callstack/react-native-paper/pull/637
animateToIndex(navigationState.index);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const prevNavigationState = React.useRef(undefined);
React.useEffect(() => {
// Reset offsets of previous and current tabs before animation
offsetsAnims.forEach((offset, i) => {
var _prevNavigationState$;
if (i === navigationState.index || i === ((_prevNavigationState$ = prevNavigationState.current) === null || _prevNavigationState$ === void 0 ? void 0 : _prevNavigationState$.index)) {
offset.setValue(0);
}
});
animateToIndex(navigationState.index);
}, [navigationState.index, animateToIndex, offsetsAnims]);
const handleTabPress = useLatestCallback(event => {
onTabPress === null || onTabPress === void 0 || onTabPress(event);
if (event.defaultPrevented) {
return;
}
const index = navigationState.routes.findIndex(route => event.route.key === route.key);
if (index !== navigationState.index) {
prevNavigationState.current = navigationState;
onIndexChange(index);
}
});
const jumpTo = useLatestCallback(key => {
const index = navigationState.routes.findIndex(route => route.key === key);
prevNavigationState.current = navigationState;
onIndexChange(index);
});
const {
routes
} = navigationState;
const {
colors
} = theme;
return /*#__PURE__*/React.createElement(View, {
style: [styles.container, style],
testID: testID
}, /*#__PURE__*/React.createElement(View, {
style: [styles.content, {
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.background
}]
}, routes.map((route, index) => {
var _prevNavigationState$2;
if (getLazy({
route
}) !== false && !loaded.includes(route.key)) {
// Don't render a screen if we've never navigated to it
return null;
}
const focused = navigationState.index === index;
const previouslyFocused = ((_prevNavigationState$2 = prevNavigationState.current) === null || _prevNavigationState$2 === void 0 ? void 0 : _prevNavigationState$2.index) === index;
const countAlphaOffscreen = sceneAnimationEnabled && (focused || previouslyFocused);
const renderToHardwareTextureAndroid = sceneAnimationEnabled && focused;
const opacity = sceneAnimationEnabled ? tabsPositionAnims[index].interpolate({
inputRange: [-1, 0, 1],
outputRange: [0, 1, 0]
}) : focused ? 1 : 0;
const offsetTarget = focused ? 0 : FAR_FAR_AWAY;
const top = sceneAnimationEnabled ? offsetsAnims[index].interpolate({
inputRange: [0, 1],
outputRange: [0, offsetTarget]
}) : offsetTarget;
const left = sceneAnimationType === 'shifting' ? tabsPositionAnims[index].interpolate({
inputRange: [-1, 0, 1],
outputRange: [-50, 0, 50]
}) : 0;
const zIndex = focused ? 1 : 0;
return /*#__PURE__*/React.createElement(BottomNavigationRouteScreen, {
key: route.key,
pointerEvents: focused ? 'auto' : 'none',
accessibilityElementsHidden: !focused,
importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
index: index,
visibility: opacity,
style: [StyleSheet.absoluteFill, {
zIndex
}],
collapsable: false,
removeClippedSubviews:
// On iOS, set removeClippedSubviews to true only when not focused
// This is an workaround for a bug where the clipped view never re-appears
Platform.OS === 'ios' ? navigationState.index !== index : true
}, /*#__PURE__*/React.createElement(Animated.View, _extends({}, Platform.OS === 'android' && {
needsOffscreenAlphaCompositing: countAlphaOffscreen
}, {
renderToHardwareTextureAndroid: renderToHardwareTextureAndroid,
style: [styles.content, {
opacity,
transform: [{
translateX: left
}, {
translateY: top
}]
}]
}), renderScene({
route,
jumpTo
})));
})), /*#__PURE__*/React.createElement(BottomNavigationBar, {
navigationState: navigationState,
renderIcon: renderIcon,
renderLabel: renderLabel,
renderTouchable: renderTouchable,
getLabelText: getLabelText,
getBadge: getBadge,
getColor: getColor,
getAccessibilityLabel: getAccessibilityLabel,
getTestID: getTestID,
activeColor: activeColor,
inactiveColor: inactiveColor,
keyboardHidesNavigationBar: keyboardHidesNavigationBar,
style: barStyle,
activeIndicatorStyle: activeIndicatorStyle,
labeled: labeled,
animationEasing: sceneAnimationEasing,
onTabPress: handleTabPress,
onTabLongPress: onTabLongPress,
shifting: shifting,
safeAreaInsets: safeAreaInsets,
labelMaxFontSizeMultiplier: labelMaxFontSizeMultiplier,
compact: compact,
testID: `${testID}-bar`,
theme: theme
}));
};
/**
* Function which takes a map of route keys to components.
* Pure components are used to minimize re-rendering of the pages.
* This drastically improves the animation performance.
*/
BottomNavigation.SceneMap = scenes => {
return ({
route,
jumpTo
}) => /*#__PURE__*/React.createElement(SceneComponent, {
key: route.key,
component: scenes[route.key ? route.key : ''],
route: route,
jumpTo: jumpTo
});
};
// @component ./BottomNavigationBar.tsx
BottomNavigation.Bar = BottomNavigationBar;
export default BottomNavigation;
const styles = StyleSheet.create({
container: {
flex: 1,
overflow: 'hidden'
},
content: {
flex: 1
}
});
//# sourceMappingURL=BottomNavigation.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,625 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Animated, Platform, StyleSheet, Pressable, View } from 'react-native';
import color from 'color';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { getActiveTintColor, getInactiveTintColor, getLabelColor } from './utils';
import { useInternalTheme } from '../../core/theming';
import overlay from '../../styles/overlay';
import { black, white } from '../../styles/themes/v2/colors';
import useAnimatedValue from '../../utils/useAnimatedValue';
import useAnimatedValueArray from '../../utils/useAnimatedValueArray';
import useIsKeyboardShown from '../../utils/useIsKeyboardShown';
import useLayout from '../../utils/useLayout';
import Badge from '../Badge';
import Icon from '../Icon';
import Surface from '../Surface';
import TouchableRipple from '../TouchableRipple/TouchableRipple';
import Text from '../Typography/Text';
const MIN_RIPPLE_SCALE = 0.001; // Minimum scale is not 0 due to bug with animation
const MIN_TAB_WIDTH = 96;
const MAX_TAB_WIDTH = 168;
const BAR_HEIGHT = 56;
const OUTLINE_WIDTH = 64;
const Touchable = ({
route: _0,
style,
children,
borderless,
centered,
rippleColor,
...rest
}) => TouchableRipple.supported ? /*#__PURE__*/React.createElement(TouchableRipple, _extends({}, rest, {
disabled: rest.disabled || undefined,
borderless: borderless,
centered: centered,
rippleColor: rippleColor,
style: style
}), children) : /*#__PURE__*/React.createElement(Pressable, _extends({
style: style
}, rest), children);
/**
* A navigation bar which can easily be integrated with [React Navigation's Bottom Tabs Navigator](https://reactnavigation.org/docs/bottom-tab-navigator/).
*
* ## Usage
* ### without React Navigation
* ```js
* import React from 'react';
* import { useState } from 'react';
* import { View } from 'react-native';
* import { BottomNavigation, Text, Provider } from 'react-native-paper';
* import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
*
* function HomeScreen() {
* return (
* <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
* <Text>Home!</Text>
* </View>
* );
* }
*
* function SettingsScreen() {
* return (
* <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
* <Text>Settings!</Text>
* </View>
* );
* }
*
* export default function MyComponent() {
* const [index, setIndex] = useState(0);
*
* const routes = [
* { key: 'home', title: 'Home', icon: 'home' },
* { key: 'settings', title: 'Settings', icon: 'cog' },
* ];
* const renderScene = ({ route }) => {
* switch (route.key) {
* case 'home':
* return <HomeScreen />;
* case 'settings':
* return <SettingsScreen />;
* default:
* return null;
* }
* };
*
* return (
* <Provider>
* {renderScene({ route: routes[index] })}
* <BottomNavigation.Bar
* navigationState={{ index, routes }}
* onTabPress={({ route }) => {
* const newIndex = routes.findIndex((r) => r.key === route.key);
* if (newIndex !== -1) {
* setIndex(newIndex);
* }
* }}
* renderIcon={({ route, color }) => (
* <Icon name={route.icon} size={24} color={color} />
* )}
* getLabelText={({ route }) => route.title}
* />
* </Provider>
* );
* }
* ```
*/
const BottomNavigationBar = ({
navigationState,
renderIcon,
renderLabel,
renderTouchable = ({
key,
...props
}) => /*#__PURE__*/React.createElement(Touchable, _extends({
key: key
}, props)),
getLabelText = ({
route
}) => route.title,
getBadge = ({
route
}) => route.badge,
getColor = ({
route
}) => route.color,
getAccessibilityLabel = ({
route
}) => route.accessibilityLabel,
getTestID = ({
route
}) => route.testID,
activeColor,
inactiveColor,
keyboardHidesNavigationBar = Platform.OS === 'android',
style,
activeIndicatorStyle,
labeled = true,
animationEasing,
onTabPress,
onTabLongPress,
shifting: shiftingProp,
safeAreaInsets,
labelMaxFontSizeMultiplier = 1,
compact: compactProp,
testID = 'bottom-navigation-bar',
theme: themeOverrides
}) => {
const theme = useInternalTheme(themeOverrides);
const {
bottom,
left,
right
} = useSafeAreaInsets();
const {
scale
} = theme.animation;
const compact = compactProp ?? !theme.isV3;
let shifting = shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3);
if (shifting && navigationState.routes.length < 2) {
shifting = false;
console.warn('BottomNavigation.Bar needs at least 2 tabs to run shifting animation');
}
/**
* Visibility of the navigation bar, visible state is 1 and invisible is 0.
*/
const visibleAnim = useAnimatedValue(1);
/**
* Active state of individual tab items, active state is 1 and inactive state is 0.
*/
const tabsAnims = useAnimatedValueArray(navigationState.routes.map(
// focused === 1, unfocused === 0
(_, i) => i === navigationState.index ? 1 : 0));
/**
* Index of the currently active tab. Used for setting the background color.
* We don't use the color as an animated value directly, because `setValue` seems to be buggy with colors?.
*/
const indexAnim = useAnimatedValue(navigationState.index);
/**
* Animation for the background color ripple, used to determine it's scale and opacity.
*/
const rippleAnim = useAnimatedValue(MIN_RIPPLE_SCALE);
/**
* Layout of the navigation bar. The width is used to determine the size and position of the ripple.
*/
const [layout, onLayout] = useLayout();
/**
* Track whether the keyboard is visible to show and hide the navigation bar.
*/
const [keyboardVisible, setKeyboardVisible] = React.useState(false);
const handleKeyboardShow = React.useCallback(() => {
setKeyboardVisible(true);
Animated.timing(visibleAnim, {
toValue: 0,
duration: 150 * scale,
useNativeDriver: true
}).start();
}, [scale, visibleAnim]);
const handleKeyboardHide = React.useCallback(() => {
Animated.timing(visibleAnim, {
toValue: 1,
duration: 100 * scale,
useNativeDriver: true
}).start(() => {
setKeyboardVisible(false);
});
}, [scale, visibleAnim]);
const animateToIndex = React.useCallback(index => {
// Reset the ripple to avoid glitch if it's currently animating
rippleAnim.setValue(MIN_RIPPLE_SCALE);
Animated.parallel([Animated.timing(rippleAnim, {
toValue: 1,
duration: theme.isV3 || shifting ? 400 * scale : 0,
useNativeDriver: true
}), ...navigationState.routes.map((_, i) => Animated.timing(tabsAnims[i], {
toValue: i === index ? 1 : 0,
duration: theme.isV3 || shifting ? 150 * scale : 0,
useNativeDriver: true,
easing: animationEasing
}))]).start(() => {
// Workaround a bug in native animations where this is reset after first animation
tabsAnims.map((tab, i) => tab.setValue(i === index ? 1 : 0));
// Update the index to change bar's background color and then hide the ripple
indexAnim.setValue(index);
rippleAnim.setValue(MIN_RIPPLE_SCALE);
});
}, [rippleAnim, theme.isV3, shifting, scale, navigationState.routes, tabsAnims, animationEasing, indexAnim]);
React.useEffect(() => {
// Workaround for native animated bug in react-native@^0.57
// Context: https://github.com/callstack/react-native-paper/pull/637
animateToIndex(navigationState.index);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useIsKeyboardShown({
onShow: handleKeyboardShow,
onHide: handleKeyboardHide
});
React.useEffect(() => {
animateToIndex(navigationState.index);
}, [navigationState.index, animateToIndex]);
const eventForIndex = index => {
const event = {
route: navigationState.routes[index],
defaultPrevented: false,
preventDefault: () => {
event.defaultPrevented = true;
}
};
return event;
};
const {
routes
} = navigationState;
const {
colors,
dark: isDarkTheme,
mode,
isV3
} = theme;
const {
backgroundColor: customBackground,
elevation = 4
} = StyleSheet.flatten(style) || {};
const approxBackgroundColor = customBackground ? customBackground : isDarkTheme && mode === 'adaptive' ? overlay(elevation, colors === null || colors === void 0 ? void 0 : colors.surface) : colors === null || colors === void 0 ? void 0 : colors.primary;
const v2BackgroundColorInterpolation = shifting ? indexAnim.interpolate({
inputRange: routes.map((_, i) => i),
// FIXME: does outputRange support ColorValue or just strings?
// @ts-expect-error
outputRange: routes.map(route => getColor({
route
}) || approxBackgroundColor)
}) : approxBackgroundColor;
const backgroundColor = isV3 ? customBackground || theme.colors.elevation.level2 : shifting ? v2BackgroundColorInterpolation : approxBackgroundColor;
const isDark = typeof approxBackgroundColor === 'string' ? !color(approxBackgroundColor).isLight() : true;
const textColor = isDark ? white : black;
const activeTintColor = getActiveTintColor({
activeColor,
defaultColor: textColor,
theme
});
const inactiveTintColor = getInactiveTintColor({
inactiveColor,
defaultColor: textColor,
theme
});
const touchColor = color(activeTintColor).alpha(0.12).rgb().string();
const maxTabWidth = routes.length > 3 ? MIN_TAB_WIDTH : MAX_TAB_WIDTH;
const maxTabBarWidth = maxTabWidth * routes.length;
const rippleSize = layout.width / 4;
const insets = {
left: (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.left) ?? left,
right: (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.right) ?? right,
bottom: (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.bottom) ?? bottom
};
return /*#__PURE__*/React.createElement(Surface, _extends({}, theme.isV3 && {
elevation: 0
}, {
testID: testID,
style: [!theme.isV3 && styles.elevation, styles.bar, keyboardHidesNavigationBar // eslint-disable-next-line react-native/no-inline-styles
? {
// When the keyboard is shown, slide down the navigation bar
transform: [{
translateY: visibleAnim.interpolate({
inputRange: [0, 1],
outputRange: [layout.height, 0]
})
}],
// Absolutely position the navigation bar so that the content is below it
// This is needed to avoid gap at bottom when the navigation bar is hidden
position: keyboardVisible ? 'absolute' : undefined
} : null, style],
pointerEvents: layout.measured ? keyboardHidesNavigationBar && keyboardVisible ? 'none' : 'auto' : 'none',
onLayout: onLayout,
container: true
}), /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.barContent, {
backgroundColor
}],
testID: `${testID}-content`
}, /*#__PURE__*/React.createElement(View, {
style: [styles.items, {
marginBottom: insets.bottom,
marginHorizontal: Math.max(insets.left, insets.right)
}, compact && {
maxWidth: maxTabBarWidth
}],
accessibilityRole: 'tablist',
testID: `${testID}-content-wrapper`
}, shifting && !isV3 ? /*#__PURE__*/React.createElement(Animated.View, {
pointerEvents: "none",
style: [styles.ripple, {
// Since we have a single ripple, we have to reposition it so that it appears to expand from active tab.
// We need to move it from the top to center of the navigation bar and from the left to the active tab.
top: (BAR_HEIGHT - rippleSize) / 2,
left: Math.min(layout.width, maxTabBarWidth) / routes.length * (navigationState.index + 0.5) - rippleSize / 2,
height: rippleSize,
width: rippleSize,
borderRadius: rippleSize / 2,
backgroundColor: getColor({
route: routes[navigationState.index]
}),
transform: [{
// Scale to twice the size to ensure it covers the whole navigation bar
scale: rippleAnim.interpolate({
inputRange: [0, 1],
outputRange: [0, 8]
})
}],
opacity: rippleAnim.interpolate({
inputRange: [0, MIN_RIPPLE_SCALE, 0.3, 1],
outputRange: [0, 0, 1, 1]
})
}],
testID: `${testID}-content-ripple`
}) : null, routes.map((route, index) => {
const focused = navigationState.index === index;
const active = tabsAnims[index];
// Scale the label up
const scale = labeled && shifting ? active.interpolate({
inputRange: [0, 1],
outputRange: [0.5, 1]
}) : 1;
// Move down the icon to account for no-label in shifting and smaller label in non-shifting.
const translateY = labeled ? shifting ? active.interpolate({
inputRange: [0, 1],
outputRange: [7, 0]
}) : 0 : 7;
// We render the active icon and label on top of inactive ones and cross-fade them on change.
// This trick gives the illusion that we are animating between active and inactive colors.
// This is to ensure that we can use native driver, as colors cannot be animated with native driver.
const activeOpacity = active;
const inactiveOpacity = active.interpolate({
inputRange: [0, 1],
outputRange: [1, 0]
});
const v3ActiveOpacity = focused ? 1 : 0;
const v3InactiveOpacity = shifting ? inactiveOpacity : focused ? 0 : 1;
// Scale horizontally the outline pill
const outlineScale = focused ? active.interpolate({
inputRange: [0, 1],
outputRange: [0.5, 1]
}) : 0;
const badge = getBadge({
route
});
const activeLabelColor = getLabelColor({
tintColor: activeTintColor,
hasColor: Boolean(activeColor),
focused,
defaultColor: textColor,
theme
});
const inactiveLabelColor = getLabelColor({
tintColor: inactiveTintColor,
hasColor: Boolean(inactiveColor),
focused,
defaultColor: textColor,
theme
});
const badgeStyle = {
top: !isV3 ? -2 : typeof badge === 'boolean' ? 4 : 2,
right: (badge != null && typeof badge !== 'boolean' ? String(badge).length * -2 : 0) - (!isV3 ? 2 : 0)
};
const isLegacyOrV3Shifting = !isV3 || isV3 && shifting && labeled;
const font = isV3 ? theme.fonts.labelMedium : {};
return renderTouchable({
key: route.key,
route,
borderless: true,
centered: true,
rippleColor: isV3 ? 'transparent' : touchColor,
onPress: () => onTabPress(eventForIndex(index)),
onLongPress: () => onTabLongPress === null || onTabLongPress === void 0 ? void 0 : onTabLongPress(eventForIndex(index)),
testID: getTestID({
route
}),
accessibilityLabel: getAccessibilityLabel({
route
}),
accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab',
accessibilityState: {
selected: focused
},
style: [styles.item, isV3 && styles.v3Item],
children: /*#__PURE__*/React.createElement(View, {
pointerEvents: "none",
style: isV3 && (labeled ? styles.v3TouchableContainer : styles.v3NoLabelContainer)
}, /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.iconContainer, isV3 && styles.v3IconContainer, isLegacyOrV3Shifting && {
transform: [{
translateY
}]
}]
}, isV3 && focused && /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.outline, {
transform: [{
scaleX: outlineScale
}],
backgroundColor: theme.colors.secondaryContainer
}, activeIndicatorStyle]
}), /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.iconWrapper, isV3 && styles.v3IconWrapper, {
opacity: isLegacyOrV3Shifting ? activeOpacity : v3ActiveOpacity
}]
}, renderIcon ? renderIcon({
route,
focused: true,
color: activeTintColor
}) : /*#__PURE__*/React.createElement(Icon, {
source: route.focusedIcon,
color: activeTintColor,
size: 24
})), /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.iconWrapper, isV3 && styles.v3IconWrapper, {
opacity: isLegacyOrV3Shifting ? inactiveOpacity : v3InactiveOpacity
}]
}, renderIcon ? renderIcon({
route,
focused: false,
color: inactiveTintColor
}) : /*#__PURE__*/React.createElement(Icon, {
source: theme.isV3 && route.unfocusedIcon !== undefined ? route.unfocusedIcon : route.focusedIcon,
color: inactiveTintColor,
size: 24
})), /*#__PURE__*/React.createElement(View, {
style: [styles.badgeContainer, badgeStyle]
}, typeof badge === 'boolean' ? /*#__PURE__*/React.createElement(Badge, {
visible: badge,
size: isV3 ? 6 : 8
}) : /*#__PURE__*/React.createElement(Badge, {
visible: badge != null,
size: 16
}, badge))), labeled ? /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.labelContainer, !isV3 && {
transform: [{
scale
}]
}]
}, /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.labelWrapper, {
opacity: isLegacyOrV3Shifting ? activeOpacity : v3ActiveOpacity
}]
}, renderLabel ? renderLabel({
route,
focused: true,
color: activeLabelColor
}) : /*#__PURE__*/React.createElement(Text, {
maxFontSizeMultiplier: labelMaxFontSizeMultiplier,
variant: "labelMedium",
style: [styles.label, {
color: activeLabelColor,
...font
}]
}, getLabelText({
route
}))), shifting ? null : /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.labelWrapper, {
opacity: isLegacyOrV3Shifting ? inactiveOpacity : v3InactiveOpacity
}]
}, renderLabel ? renderLabel({
route,
focused: false,
color: inactiveLabelColor
}) : /*#__PURE__*/React.createElement(Text, {
maxFontSizeMultiplier: labelMaxFontSizeMultiplier,
variant: "labelMedium",
selectable: false,
style: [styles.label, {
color: inactiveLabelColor,
...font
}]
}, getLabelText({
route
})))) : !isV3 && /*#__PURE__*/React.createElement(View, {
style: styles.labelContainer
}))
});
}))));
};
BottomNavigationBar.displayName = 'BottomNavigation.Bar';
export default BottomNavigationBar;
const styles = StyleSheet.create({
bar: {
left: 0,
right: 0,
bottom: 0
},
barContent: {
alignItems: 'center',
overflow: 'hidden'
},
items: {
flexDirection: 'row',
...(Platform.OS === 'web' ? {
width: '100%'
} : null)
},
item: {
flex: 1,
// Top padding is 6 and bottom padding is 10
// The extra 4dp bottom padding is offset by label's height
paddingVertical: 6
},
v3Item: {
paddingVertical: 0
},
ripple: {
position: 'absolute'
},
iconContainer: {
height: 24,
width: 24,
marginTop: 2,
marginHorizontal: 12,
alignSelf: 'center'
},
v3IconContainer: {
height: 32,
width: 32,
marginBottom: 4,
marginTop: 0,
justifyContent: 'center'
},
iconWrapper: {
...StyleSheet.absoluteFill,
alignItems: 'center'
},
v3IconWrapper: {
top: 4
},
labelContainer: {
height: 16,
paddingBottom: 2
},
labelWrapper: {
...StyleSheet.absoluteFill
},
// eslint-disable-next-line react-native/no-color-literals
label: {
fontSize: 12,
height: BAR_HEIGHT,
textAlign: 'center',
backgroundColor: 'transparent',
...(Platform.OS === 'web' ? {
whiteSpace: 'nowrap',
alignSelf: 'center'
} : null)
},
badgeContainer: {
position: 'absolute',
left: 0
},
v3TouchableContainer: {
paddingTop: 12,
paddingBottom: 16
},
v3NoLabelContainer: {
height: 80,
justifyContent: 'center',
alignItems: 'center'
},
outline: {
width: OUTLINE_WIDTH,
height: OUTLINE_WIDTH / 2,
borderRadius: OUTLINE_WIDTH / 4,
alignSelf: 'center'
},
elevation: {
elevation: 4
}
});
//# sourceMappingURL=BottomNavigationBar.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,27 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React from 'react';
import { Animated, Platform, View } from 'react-native';
class BottomNavigationRouteScreen extends React.Component {
render() {
const {
style,
index,
children,
visibility,
...rest
} = this.props;
// On Web, the unfocused tab screens can still be clicked since they are transparent, but still there
// Hiding them with `display: none` makes sure that they won't receive clicks
// We only set it on Web since on native, react-native-pager-view's breaks due to layout changing
const display = Platform.OS === 'web' ? visibility === 0 ? 'none' : 'flex' : undefined;
return /*#__PURE__*/React.createElement(View, _extends({
testID: `RouteScreen: ${index}`,
style: [style, {
display
}]
}, rest), children);
}
}
export default Animated.createAnimatedComponent(BottomNavigationRouteScreen);
//# sourceMappingURL=BottomNavigationRouteScreen.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","Animated","Platform","View","BottomNavigationRouteScreen","Component","render","style","index","children","visibility","rest","props","display","OS","undefined","createElement","_extends","testID","createAnimatedComponent"],"sourceRoot":"../../../../src","sources":["components/BottomNavigation/BottomNavigationRouteScreen.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAAqB,OAAO;AACxC,SAASC,QAAQ,EAAEC,QAAQ,EAAEC,IAAI,QAAmB,cAAc;AAOlE,MAAMC,2BAA2B,SAASJ,KAAK,CAACK,SAAS,CAAQ;EAC/DC,MAAMA,CAAA,EAAc;IAClB,MAAM;MAAEC,KAAK;MAAEC,KAAK;MAAEC,QAAQ;MAAEC,UAAU;MAAE,GAAGC;IAAK,CAAC,GAAG,IAAI,CAACC,KAAK;;IAElE;IACA;IACA;IACA,MAAMC,OAAO,GACXX,QAAQ,CAACY,EAAE,KAAK,KAAK,GAAIJ,UAAU,KAAK,CAAC,GAAG,MAAM,GAAG,MAAM,GAAIK,SAAS;IAE1E,oBACEf,KAAA,CAAAgB,aAAA,CAACb,IAAI,EAAAc,QAAA;MACHC,MAAM,EAAE,gBAAgBV,KAAK,EAAG;MAChCD,KAAK,EAAE,CAACA,KAAK,EAAE;QAAEM;MAAQ,CAAC;IAAE,GACxBF,IAAI,GAEPF,QACG,CAAC;EAEX;AACF;AAEA,eAAeR,QAAQ,CAACkB,uBAAuB,CAACf,2BAA2B,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,46 @@
import color from 'color';
export const getActiveTintColor = ({
activeColor,
defaultColor,
theme
}) => {
if (typeof activeColor === 'string') {
return activeColor;
}
if (theme.isV3) {
return theme.colors.onSecondaryContainer;
}
return defaultColor;
};
export const getInactiveTintColor = ({
inactiveColor,
defaultColor,
theme
}) => {
if (typeof inactiveColor === 'string') {
return inactiveColor;
}
if (theme.isV3) {
return theme.colors.onSurfaceVariant;
}
return color(defaultColor).alpha(0.5).rgb().string();
};
export const getLabelColor = ({
tintColor,
hasColor,
focused,
defaultColor,
theme
}) => {
if (hasColor) {
return tintColor;
}
if (theme.isV3) {
if (focused) {
return theme.colors.onSurface;
}
return theme.colors.onSurfaceVariant;
}
return defaultColor;
};
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["color","getActiveTintColor","activeColor","defaultColor","theme","isV3","colors","onSecondaryContainer","getInactiveTintColor","inactiveColor","onSurfaceVariant","alpha","rgb","string","getLabelColor","tintColor","hasColor","focused","onSurface"],"sourceRoot":"../../../../src","sources":["components/BottomNavigation/utils.ts"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAUzB,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EACjCC,WAAW;EACXC,YAAY;EACZC;AAGF,CAAC,KAAK;EACJ,IAAI,OAAOF,WAAW,KAAK,QAAQ,EAAE;IACnC,OAAOA,WAAW;EACpB;EAEA,IAAIE,KAAK,CAACC,IAAI,EAAE;IACd,OAAOD,KAAK,CAACE,MAAM,CAACC,oBAAoB;EAC1C;EAEA,OAAOJ,YAAY;AACrB,CAAC;AAED,OAAO,MAAMK,oBAAoB,GAAGA,CAAC;EACnCC,aAAa;EACbN,YAAY;EACZC;AAGF,CAAC,KAAK;EACJ,IAAI,OAAOK,aAAa,KAAK,QAAQ,EAAE;IACrC,OAAOA,aAAa;EACtB;EAEA,IAAIL,KAAK,CAACC,IAAI,EAAE;IACd,OAAOD,KAAK,CAACE,MAAM,CAACI,gBAAgB;EACtC;EAEA,OAAOV,KAAK,CAACG,YAAY,CAAC,CAACQ,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,CAAC,CAACC,MAAM,CAAC,CAAC;AACtD,CAAC;AAED,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,SAAS;EACTC,QAAQ;EACRC,OAAO;EACPd,YAAY;EACZC;AAKF,CAAC,KAAK;EACJ,IAAIY,QAAQ,EAAE;IACZ,OAAOD,SAAS;EAClB;EAEA,IAAIX,KAAK,CAACC,IAAI,EAAE;IACd,IAAIY,OAAO,EAAE;MACX,OAAOb,KAAK,CAACE,MAAM,CAACY,SAAS;IAC/B;IACA,OAAOd,KAAK,CAACE,MAAM,CAACI,gBAAgB;EACtC;EAEA,OAAOP,YAAY;AACrB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,296 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Animated, Platform, StyleSheet, View } from 'react-native';
import color from 'color';
import { getButtonColors, getButtonTouchableRippleStyle } from './utils';
import { useInternalTheme } from '../../core/theming';
import { forwardRef } from '../../utils/forwardRef';
import hasTouchHandler from '../../utils/hasTouchHandler';
import { splitStyles } from '../../utils/splitStyles';
import ActivityIndicator from '../ActivityIndicator';
import Icon from '../Icon';
import Surface from '../Surface';
import TouchableRipple from '../TouchableRipple/TouchableRipple';
import Text from '../Typography/Text';
/**
* A button is component that the user can press to trigger an action.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Button } from 'react-native-paper';
*
* const MyComponent = () => (
* <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
* Press me
* </Button>
* );
*
* export default MyComponent;
* ```
*/
const Button = ({
disabled,
compact,
mode = 'text',
dark,
loading,
icon,
buttonColor: customButtonColor,
textColor: customTextColor,
rippleColor: customRippleColor,
children,
accessibilityLabel,
accessibilityHint,
accessibilityRole = 'button',
hitSlop,
onPress,
onPressIn,
onPressOut,
onLongPress,
delayLongPress,
style,
theme: themeOverrides,
uppercase: uppercaseProp,
contentStyle,
labelStyle,
testID = 'button',
accessible,
background,
maxFontSizeMultiplier,
touchableRef,
...rest
}, ref) => {
var _StyleSheet$flatten;
const theme = useInternalTheme(themeOverrides);
const isMode = React.useCallback(modeToCompare => {
return mode === modeToCompare;
}, [mode]);
const {
roundness,
isV3,
animation
} = theme;
const uppercase = uppercaseProp ?? !theme.isV3;
const isWeb = Platform.OS === 'web';
const hasPassedTouchHandler = hasTouchHandler({
onPress,
onPressIn,
onPressOut,
onLongPress
});
const isElevationEntitled = !disabled && (isV3 ? isMode('elevated') : isMode('contained'));
const initialElevation = isV3 ? 1 : 2;
const activeElevation = isV3 ? 2 : 8;
const {
current: elevation
} = React.useRef(new Animated.Value(isElevationEntitled ? initialElevation : 0));
React.useEffect(() => {
// Workaround not to call setValue on Animated.Value, because it breaks styles.
// https://github.com/callstack/react-native-paper/issues/4559
Animated.timing(elevation, {
toValue: isElevationEntitled ? initialElevation : 0,
duration: 0,
useNativeDriver: true
});
}, [isElevationEntitled, elevation, initialElevation]);
const handlePressIn = e => {
onPressIn === null || onPressIn === void 0 || onPressIn(e);
if (isV3 ? isMode('elevated') : isMode('contained')) {
const {
scale
} = animation;
Animated.timing(elevation, {
toValue: activeElevation,
duration: 200 * scale,
useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72
}).start();
}
};
const handlePressOut = e => {
onPressOut === null || onPressOut === void 0 || onPressOut(e);
if (isV3 ? isMode('elevated') : isMode('contained')) {
const {
scale
} = animation;
Animated.timing(elevation, {
toValue: initialElevation,
duration: 150 * scale,
useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72
}).start();
}
};
const flattenedStyles = StyleSheet.flatten(style) || {};
const [, borderRadiusStyles] = splitStyles(flattenedStyles, style => style.startsWith('border') && style.endsWith('Radius'));
const borderRadius = (isV3 ? 5 : 1) * roundness;
const iconSize = isV3 ? 18 : 16;
const {
backgroundColor,
borderColor,
textColor,
borderWidth
} = getButtonColors({
customButtonColor,
customTextColor,
theme,
mode,
disabled,
dark
});
const rippleColor = customRippleColor || color(textColor).alpha(0.12).rgb().string();
const touchableStyle = {
...borderRadiusStyles,
borderRadius: borderRadiusStyles.borderRadius ?? borderRadius
};
const buttonStyle = {
backgroundColor,
borderColor,
borderWidth,
...touchableStyle
};
const {
color: customLabelColor,
fontSize: customLabelSize
} = StyleSheet.flatten(labelStyle) || {};
const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
const textStyle = {
color: textColor,
...font
};
const iconStyle = ((_StyleSheet$flatten = StyleSheet.flatten(contentStyle)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.flexDirection) === 'row-reverse' ? [styles.iconReverse, isV3 && styles[`md3IconReverse${compact ? 'Compact' : ''}`], isV3 && isMode('text') && styles[`md3IconReverseTextMode${compact ? 'Compact' : ''}`]] : [styles.icon, isV3 && styles[`md3Icon${compact ? 'Compact' : ''}`], isV3 && isMode('text') && styles[`md3IconTextMode${compact ? 'Compact' : ''}`]];
return /*#__PURE__*/React.createElement(Surface, _extends({}, rest, {
ref: ref,
testID: `${testID}-container`,
style: [styles.button, compact && styles.compact, buttonStyle, style, !isV3 && !disabled && {
elevation
}]
}, isV3 && {
elevation: elevation
}, {
container: true
}), /*#__PURE__*/React.createElement(TouchableRipple, {
borderless: true,
background: background,
onPress: onPress,
onLongPress: onLongPress,
onPressIn: hasPassedTouchHandler ? handlePressIn : undefined,
onPressOut: hasPassedTouchHandler ? handlePressOut : undefined,
delayLongPress: delayLongPress,
accessibilityLabel: accessibilityLabel,
accessibilityHint: accessibilityHint,
accessibilityRole: accessibilityRole,
accessibilityState: {
disabled
},
accessible: accessible,
hitSlop: hitSlop,
disabled: disabled,
rippleColor: rippleColor,
style: getButtonTouchableRippleStyle(touchableStyle, borderWidth),
testID: testID,
theme: theme,
ref: touchableRef
}, /*#__PURE__*/React.createElement(View, {
style: [styles.content, contentStyle]
}, icon && loading !== true ? /*#__PURE__*/React.createElement(View, {
style: iconStyle,
testID: `${testID}-icon-container`
}, /*#__PURE__*/React.createElement(Icon, {
source: icon,
size: customLabelSize ?? iconSize,
color: typeof customLabelColor === 'string' ? customLabelColor : textColor
})) : null, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
size: customLabelSize ?? iconSize,
color: typeof customLabelColor === 'string' ? customLabelColor : textColor,
style: iconStyle
}) : null, /*#__PURE__*/React.createElement(Text, {
variant: "labelLarge",
selectable: false,
numberOfLines: 1,
testID: `${testID}-text`,
style: [styles.label, !isV3 && styles.md2Label, isV3 && (isMode('text') ? icon || loading ? styles.md3LabelTextAddons : styles.md3LabelText : styles.md3Label), compact && styles.compactLabel, uppercase && styles.uppercaseLabel, textStyle, labelStyle],
maxFontSizeMultiplier: maxFontSizeMultiplier
}, children))));
};
const styles = StyleSheet.create({
button: {
minWidth: 64,
borderStyle: 'solid'
},
compact: {
minWidth: 'auto'
},
content: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
icon: {
marginLeft: 12,
marginRight: -4
},
iconReverse: {
marginRight: 12,
marginLeft: -4
},
/* eslint-disable react-native/no-unused-styles */
md3Icon: {
marginLeft: 16,
marginRight: -16
},
md3IconCompact: {
marginLeft: 8,
marginRight: 0
},
md3IconReverse: {
marginLeft: -16,
marginRight: 16
},
md3IconReverseCompact: {
marginLeft: 0,
marginRight: 8
},
md3IconTextMode: {
marginLeft: 12,
marginRight: -8
},
md3IconTextModeCompact: {
marginLeft: 6,
marginRight: 0
},
md3IconReverseTextMode: {
marginLeft: -8,
marginRight: 12
},
md3IconReverseTextModeCompact: {
marginLeft: 0,
marginRight: 6
},
/* eslint-enable react-native/no-unused-styles */
label: {
textAlign: 'center',
marginVertical: 9,
marginHorizontal: 16
},
md2Label: {
letterSpacing: 1
},
compactLabel: {
marginHorizontal: 8
},
uppercaseLabel: {
textTransform: 'uppercase'
},
md3Label: {
marginVertical: 10,
marginHorizontal: 24
},
md3LabelText: {
marginHorizontal: 12
},
md3LabelTextAddons: {
marginHorizontal: 16
}
});
export default forwardRef(Button);
//# sourceMappingURL=Button.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,185 @@
import { StyleSheet } from 'react-native';
import color from 'color';
import { black, white } from '../../styles/themes/v2/colors';
import { splitStyles } from '../../utils/splitStyles';
const isDark = ({
dark,
backgroundColor
}) => {
if (typeof dark === 'boolean') {
return dark;
}
if (backgroundColor === 'transparent') {
return false;
}
if (backgroundColor !== 'transparent') {
return !color(backgroundColor).isLight();
}
return false;
};
const getButtonBackgroundColor = ({
isMode,
theme,
disabled,
customButtonColor
}) => {
if (customButtonColor && !disabled) {
return customButtonColor;
}
if (theme.isV3) {
if (disabled) {
if (isMode('outlined') || isMode('text')) {
return 'transparent';
}
return theme.colors.surfaceDisabled;
}
if (isMode('elevated')) {
return theme.colors.elevation.level1;
}
if (isMode('contained')) {
return theme.colors.primary;
}
if (isMode('contained-tonal')) {
return theme.colors.secondaryContainer;
}
}
if (isMode('contained')) {
if (disabled) {
return color(theme.dark ? white : black).alpha(0.12).rgb().string();
}
return theme.colors.primary;
}
return 'transparent';
};
const getButtonTextColor = ({
isMode,
theme,
disabled,
customTextColor,
backgroundColor,
dark
}) => {
if (customTextColor && !disabled) {
return customTextColor;
}
if (theme.isV3) {
if (disabled) {
return theme.colors.onSurfaceDisabled;
}
if (typeof dark === 'boolean') {
if (isMode('contained') || isMode('contained-tonal') || isMode('elevated')) {
return isDark({
dark,
backgroundColor
}) ? white : black;
}
}
if (isMode('outlined') || isMode('text') || isMode('elevated')) {
return theme.colors.primary;
}
if (isMode('contained')) {
return theme.colors.onPrimary;
}
if (isMode('contained-tonal')) {
return theme.colors.onSecondaryContainer;
}
}
if (disabled) {
return color(theme.dark ? white : black).alpha(0.32).rgb().string();
}
if (isMode('contained')) {
return isDark({
dark,
backgroundColor
}) ? white : black;
}
return theme.colors.primary;
};
const getButtonBorderColor = ({
isMode,
disabled,
theme
}) => {
if (theme.isV3) {
if (disabled && isMode('outlined')) {
return theme.colors.surfaceDisabled;
}
if (isMode('outlined')) {
return theme.colors.outline;
}
}
if (isMode('outlined')) {
return color(theme.dark ? white : black).alpha(0.29).rgb().string();
}
return 'transparent';
};
const getButtonBorderWidth = ({
isMode,
theme
}) => {
if (theme.isV3) {
if (isMode('outlined')) {
return 1;
}
}
if (isMode('outlined')) {
return StyleSheet.hairlineWidth;
}
return 0;
};
export const getButtonColors = ({
theme,
mode,
customButtonColor,
customTextColor,
disabled,
dark
}) => {
const isMode = modeToCompare => {
return mode === modeToCompare;
};
const backgroundColor = getButtonBackgroundColor({
isMode,
theme,
disabled,
customButtonColor
});
const textColor = getButtonTextColor({
isMode,
theme,
disabled,
customTextColor,
backgroundColor,
dark
});
const borderColor = getButtonBorderColor({
isMode,
theme,
disabled
});
const borderWidth = getButtonBorderWidth({
isMode,
theme
});
return {
backgroundColor,
borderColor,
textColor,
borderWidth
};
};
export const getButtonTouchableRippleStyle = (style, borderWidth = 0) => {
if (!style) return {};
const touchableRippleStyle = {};
const [, borderRadiusStyles] = splitStyles(style, style => style.startsWith('border') && style.endsWith('Radius'));
Object.keys(borderRadiusStyles).forEach(key => {
const value = style[key];
if (typeof value === 'number') {
// Only subtract borderWidth if value is greater than 0
const radius = value > 0 ? value - borderWidth : 0;
touchableRippleStyle[key] = radius;
}
});
return touchableRippleStyle;
};
//# sourceMappingURL=utils.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,220 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Animated, StyleSheet, Pressable, View } from 'react-native';
import useLatestCallback from 'use-latest-callback';
import CardActions from './CardActions';
import CardContent from './CardContent';
import CardCover from './CardCover';
import CardTitle from './CardTitle';
import { getCardColors } from './utils';
import { useInternalTheme } from '../../core/theming';
import { forwardRef } from '../../utils/forwardRef';
import hasTouchHandler from '../../utils/hasTouchHandler';
import { splitStyles } from '../../utils/splitStyles';
import Surface from '../Surface';
/**
* A card is a sheet of material that serves as an entry point to more detailed information.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Avatar, Button, Card, Text } from 'react-native-paper';
*
* const LeftContent = props => <Avatar.Icon {...props} icon="folder" />
*
* const MyComponent = () => (
* <Card>
* <Card.Title title="Card Title" subtitle="Card Subtitle" left={LeftContent} />
* <Card.Content>
* <Text variant="titleLarge">Card title</Text>
* <Text variant="bodyMedium">Card content</Text>
* </Card.Content>
* <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
* <Card.Actions>
* <Button>Cancel</Button>
* <Button>Ok</Button>
* </Card.Actions>
* </Card>
* );
*
* export default MyComponent;
* ```
*/
const Card = ({
elevation: cardElevation = 1,
delayLongPress,
onPress,
onLongPress,
onPressOut,
onPressIn,
mode: cardMode = 'elevated',
children,
style,
contentStyle,
theme: themeOverrides,
testID = 'card',
accessible,
disabled,
...rest
}, ref) => {
const theme = useInternalTheme(themeOverrides);
const isMode = React.useCallback(modeToCompare => {
return cardMode === modeToCompare;
}, [cardMode]);
const hasPassedTouchHandler = hasTouchHandler({
onPress,
onLongPress,
onPressIn,
onPressOut
});
// Default animated value
const {
current: elevation
} = React.useRef(new Animated.Value(cardElevation));
// Dark adaptive animated value, used in case of toggling the theme,
// it prevents animating the background with native drivers inside Surface
const {
current: elevationDarkAdaptive
} = React.useRef(new Animated.Value(cardElevation));
const {
animation,
dark,
mode,
roundness,
isV3
} = theme;
const prevDarkRef = React.useRef(dark);
React.useEffect(() => {
prevDarkRef.current = dark;
});
const prevDark = prevDarkRef.current;
const isAdaptiveMode = mode === 'adaptive';
const animationDuration = 150 * animation.scale;
React.useEffect(() => {
/**
* Resets animations values if updating to dark adaptive mode,
* otherwise, any card that is in the middle of animation while
* toggling the theme will stay at that animated value until
* the next press-in
*/
if (dark && isAdaptiveMode && !prevDark) {
elevation.setValue(cardElevation);
elevationDarkAdaptive.setValue(cardElevation);
}
}, [prevDark, dark, isAdaptiveMode, cardElevation, elevation, elevationDarkAdaptive]);
const runElevationAnimation = pressType => {
if (isV3 && isMode('contained')) {
return;
}
const isPressTypeIn = pressType === 'in';
if (dark && isAdaptiveMode) {
Animated.timing(elevationDarkAdaptive, {
toValue: isPressTypeIn ? isV3 ? 2 : 8 : cardElevation,
duration: animationDuration,
useNativeDriver: false
}).start();
} else {
Animated.timing(elevation, {
toValue: isPressTypeIn ? isV3 ? 2 : 8 : cardElevation,
duration: animationDuration,
useNativeDriver: false
}).start();
}
};
const handlePressIn = useLatestCallback(e => {
onPressIn === null || onPressIn === void 0 || onPressIn(e);
runElevationAnimation('in');
});
const handlePressOut = useLatestCallback(e => {
onPressOut === null || onPressOut === void 0 || onPressOut(e);
runElevationAnimation('out');
});
const total = React.Children.count(children);
const siblings = React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.type ? child.type.displayName : null);
const computedElevation = dark && isAdaptiveMode ? elevationDarkAdaptive : elevation;
const {
backgroundColor,
borderColor: themedBorderColor
} = getCardColors({
theme,
mode: cardMode
});
const flattenedStyles = StyleSheet.flatten(style) || {};
const {
borderColor = themedBorderColor
} = flattenedStyles;
const [, borderRadiusStyles] = splitStyles(flattenedStyles, style => style.startsWith('border') && style.endsWith('Radius'));
const borderRadiusCombinedStyles = {
borderRadius: (isV3 ? 3 : 1) * roundness,
...borderRadiusStyles
};
const content = /*#__PURE__*/React.createElement(View, {
style: [styles.innerContainer, contentStyle],
testID: testID
}, React.Children.map(children, (child, index) => /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
index,
total,
siblings,
borderRadiusStyles
}) : child));
return /*#__PURE__*/React.createElement(Surface, _extends({
ref: ref,
style: [isV3 && !isMode('elevated') && {
backgroundColor
}, !isV3 && (isMode('outlined') ? styles.resetElevation : {
elevation: computedElevation
}), borderRadiusCombinedStyles, style],
theme: theme
}, isV3 && {
elevation: isMode('elevated') ? computedElevation : 0
}, {
testID: `${testID}-container`,
container: true
}, rest), isMode('outlined') && /*#__PURE__*/React.createElement(View, {
pointerEvents: "none",
testID: `${testID}-outline`,
style: [{
borderColor
}, styles.outline, borderRadiusCombinedStyles]
}), hasPassedTouchHandler ? /*#__PURE__*/React.createElement(Pressable, {
accessible: accessible,
unstable_pressDelay: 0,
disabled: disabled,
delayLongPress: delayLongPress,
onLongPress: onLongPress,
onPress: onPress,
onPressIn: handlePressIn,
onPressOut: handlePressOut
}, content) : content);
};
Card.displayName = 'Card';
const Component = forwardRef(Card);
const CardComponent = Component;
// @component ./CardContent.tsx
CardComponent.Content = CardContent;
// @component ./CardActions.tsx
CardComponent.Actions = CardActions;
// @component ./CardCover.tsx
CardComponent.Cover = CardCover;
// @component ./CardTitle.tsx
CardComponent.Title = CardTitle;
const styles = StyleSheet.create({
innerContainer: {
flexShrink: 1
},
outline: {
borderWidth: 1,
position: 'absolute',
width: '100%',
height: '100%',
zIndex: 2
},
resetElevation: {
elevation: 0
}
});
export default CardComponent;
//# sourceMappingURL=Card.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,67 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { useInternalTheme } from '../../core/theming';
/**
* A component to show a list of actions inside a Card.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Card, Button } from 'react-native-paper';
*
* const MyComponent = () => (
* <Card>
* <Card.Actions>
* <Button>Cancel</Button>
* <Button>Ok</Button>
* </Card.Actions>
* </Card>
* );
*
* export default MyComponent;
* ```
*/
const CardActions = ({
theme,
style,
children,
...rest
}) => {
const {
isV3
} = useInternalTheme(theme);
const justifyContent = isV3 ? 'flex-end' : 'flex-start';
const containerStyle = [styles.container, {
justifyContent
}, style];
return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
style: containerStyle
}), React.Children.map(children, (child, index) => {
if (! /*#__PURE__*/React.isValidElement(child)) {
return child;
}
const compact = !isV3 && child.props.compact !== false;
const mode = child.props.mode ?? (isV3 ? index === 0 ? 'outlined' : 'contained' : undefined);
const childStyle = [isV3 && styles.button, child.props.style];
return /*#__PURE__*/React.cloneElement(child, {
...child.props,
compact,
mode,
style: childStyle
});
}));
};
CardActions.displayName = 'Card.Actions';
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
padding: 8
},
button: {
marginLeft: 8
}
});
export default CardActions;
//# sourceMappingURL=CardActions.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","useInternalTheme","CardActions","theme","style","children","rest","isV3","justifyContent","containerStyle","styles","container","createElement","_extends","Children","map","child","index","isValidElement","compact","props","mode","undefined","childStyle","button","cloneElement","displayName","create","flexDirection","alignItems","padding","marginLeft"],"sourceRoot":"../../../../src","sources":["components/Card/CardActions.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAoBC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAKrE,SAASC,gBAAgB,QAAQ,oBAAoB;AAWrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAGA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAY,CAAC,KAAK;EAClE,MAAM;IAAEC;EAAK,CAAC,GAAGN,gBAAgB,CAACE,KAAK,CAAC;EAExC,MAAMK,cAAc,GAClBD,IAAI,GAAG,UAAU,GAAG,YACU;EAChC,MAAME,cAAc,GAAG,CAACC,MAAM,CAACC,SAAS,EAAE;IAAEH;EAAe,CAAC,EAAEJ,KAAK,CAAC;EAEpE,oBACEN,KAAA,CAAAc,aAAA,CAACZ,IAAI,EAAAa,QAAA,KAAKP,IAAI;IAAEF,KAAK,EAAEK;EAAe,IACnCX,KAAK,CAACgB,QAAQ,CAACC,GAAG,CAACV,QAAQ,EAAE,CAACW,KAAK,EAAEC,KAAK,KAAK;IAC9C,IAAI,eAACnB,KAAK,CAACoB,cAAc,CAAuBF,KAAK,CAAC,EAAE;MACtD,OAAOA,KAAK;IACd;IAEA,MAAMG,OAAO,GAAG,CAACZ,IAAI,IAAIS,KAAK,CAACI,KAAK,CAACD,OAAO,KAAK,KAAK;IACtD,MAAME,IAAI,GACRL,KAAK,CAACI,KAAK,CAACC,IAAI,KACfd,IAAI,GAAIU,KAAK,KAAK,CAAC,GAAG,UAAU,GAAG,WAAW,GAAIK,SAAS,CAAC;IAC/D,MAAMC,UAAU,GAAG,CAAChB,IAAI,IAAIG,MAAM,CAACc,MAAM,EAAER,KAAK,CAACI,KAAK,CAAChB,KAAK,CAAC;IAE7D,oBAAON,KAAK,CAAC2B,YAAY,CAACT,KAAK,EAAE;MAC/B,GAAGA,KAAK,CAACI,KAAK;MACdD,OAAO;MACPE,IAAI;MACJjB,KAAK,EAAEmB;IACT,CAAC,CAAC;EACJ,CAAC,CACG,CAAC;AAEX,CAAC;AAEDrB,WAAW,CAACwB,WAAW,GAAG,cAAc;AAExC,MAAMhB,MAAM,GAAGX,UAAU,CAAC4B,MAAM,CAAC;EAC/BhB,SAAS,EAAE;IACTiB,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,OAAO,EAAE;EACX,CAAC;EACDN,MAAM,EAAE;IACNO,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,eAAe7B,WAAW","ignoreList":[]}

View File

@@ -0,0 +1,77 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
/**
* A component to show content inside a Card.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Card, Text } from 'react-native-paper';
*
* const MyComponent = () => (
* <Card>
* <Card.Content>
* <Text variant="titleLarge">Card title</Text>
* <Text variant="bodyMedium">Card content</Text>
* </Card.Content>
* </Card>
* );
*
* export default MyComponent;
* ```
*/
const CardContent = ({
index,
total,
siblings,
style,
...rest
}) => {
const cover = 'withInternalTheme(CardCover)';
const title = 'withInternalTheme(CardTitle)';
let contentStyle, prev, next;
if (typeof index === 'number' && siblings) {
prev = siblings[index - 1];
next = siblings[index + 1];
}
if (prev === cover && next === cover || prev === title && next === title || total === 1) {
contentStyle = styles.only;
} else if (index === 0) {
if (next === cover || next === title) {
contentStyle = styles.only;
} else {
contentStyle = styles.first;
}
} else if (typeof total === 'number' && index === total - 1) {
if (prev === cover || prev === title) {
contentStyle = styles.only;
} else {
contentStyle = styles.last;
}
} else if (prev === cover || prev === title) {
contentStyle = styles.first;
} else if (next === cover || next === title) {
contentStyle = styles.last;
}
return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
style: [styles.container, contentStyle, style]
}));
};
CardContent.displayName = 'Card.Content';
const styles = StyleSheet.create({
container: {
paddingHorizontal: 16
},
first: {
paddingTop: 16
},
last: {
paddingBottom: 16
},
only: {
paddingVertical: 16
}
});
export default CardContent;
//# sourceMappingURL=CardContent.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","CardContent","index","total","siblings","style","rest","cover","title","contentStyle","prev","next","styles","only","first","last","createElement","_extends","container","displayName","create","paddingHorizontal","paddingTop","paddingBottom","paddingVertical"],"sourceRoot":"../../../../src","sources":["components/Card/CardContent.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAaC,IAAI,QAAmB,cAAc;AAsBrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAGA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAY,CAAC,KAAK;EACzE,MAAMC,KAAK,GAAG,8BAA8B;EAC5C,MAAMC,KAAK,GAAG,8BAA8B;EAE5C,IAAIC,YAAY,EAAEC,IAAI,EAAEC,IAAI;EAE5B,IAAI,OAAOT,KAAK,KAAK,QAAQ,IAAIE,QAAQ,EAAE;IACzCM,IAAI,GAAGN,QAAQ,CAACF,KAAK,GAAG,CAAC,CAAC;IAC1BS,IAAI,GAAGP,QAAQ,CAACF,KAAK,GAAG,CAAC,CAAC;EAC5B;EAEA,IACGQ,IAAI,KAAKH,KAAK,IAAII,IAAI,KAAKJ,KAAK,IAChCG,IAAI,KAAKF,KAAK,IAAIG,IAAI,KAAKH,KAAM,IAClCL,KAAK,KAAK,CAAC,EACX;IACAM,YAAY,GAAGG,MAAM,CAACC,IAAI;EAC5B,CAAC,MAAM,IAAIX,KAAK,KAAK,CAAC,EAAE;IACtB,IAAIS,IAAI,KAAKJ,KAAK,IAAII,IAAI,KAAKH,KAAK,EAAE;MACpCC,YAAY,GAAGG,MAAM,CAACC,IAAI;IAC5B,CAAC,MAAM;MACLJ,YAAY,GAAGG,MAAM,CAACE,KAAK;IAC7B;EACF,CAAC,MAAM,IAAI,OAAOX,KAAK,KAAK,QAAQ,IAAID,KAAK,KAAKC,KAAK,GAAG,CAAC,EAAE;IAC3D,IAAIO,IAAI,KAAKH,KAAK,IAAIG,IAAI,KAAKF,KAAK,EAAE;MACpCC,YAAY,GAAGG,MAAM,CAACC,IAAI;IAC5B,CAAC,MAAM;MACLJ,YAAY,GAAGG,MAAM,CAACG,IAAI;IAC5B;EACF,CAAC,MAAM,IAAIL,IAAI,KAAKH,KAAK,IAAIG,IAAI,KAAKF,KAAK,EAAE;IAC3CC,YAAY,GAAGG,MAAM,CAACE,KAAK;EAC7B,CAAC,MAAM,IAAIH,IAAI,KAAKJ,KAAK,IAAII,IAAI,KAAKH,KAAK,EAAE;IAC3CC,YAAY,GAAGG,MAAM,CAACG,IAAI;EAC5B;EAEA,oBAAOjB,KAAA,CAAAkB,aAAA,CAAChB,IAAI,EAAAiB,QAAA,KAAKX,IAAI;IAAED,KAAK,EAAE,CAACO,MAAM,CAACM,SAAS,EAAET,YAAY,EAAEJ,KAAK;EAAE,EAAE,CAAC;AAC3E,CAAC;AAEDJ,WAAW,CAACkB,WAAW,GAAG,cAAc;AAExC,MAAMP,MAAM,GAAGb,UAAU,CAACqB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,iBAAiB,EAAE;EACrB,CAAC;EACDP,KAAK,EAAE;IACLQ,UAAU,EAAE;EACd,CAAC;EACDP,IAAI,EAAE;IACJQ,aAAa,EAAE;EACjB,CAAC;EACDV,IAAI,EAAE;IACJW,eAAe,EAAE;EACnB;AACF,CAAC,CAAC;AAEF,eAAevB,WAAW","ignoreList":[]}

View File

@@ -0,0 +1,68 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { getCardCoverStyle } from './utils';
import { useInternalTheme } from '../../core/theming';
import { grey200 } from '../../styles/themes/v2/colors';
import { splitStyles } from '../../utils/splitStyles';
/**
* A component to show a cover image inside a Card.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Card } from 'react-native-paper';
*
* const MyComponent = () => (
* <Card>
* <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
* </Card>
* );
*
* export default MyComponent;
* ```
*
* @extends Image props https://reactnative.dev/docs/image#props
*/
const CardCover = ({
index,
total,
style,
theme: themeOverrides,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const flattenedStyles = StyleSheet.flatten(style) || {};
const [, borderRadiusStyles] = splitStyles(flattenedStyles, style => style.startsWith('border') && style.endsWith('Radius'));
const coverStyle = getCardCoverStyle({
theme,
index,
total,
borderRadiusStyles
});
return /*#__PURE__*/React.createElement(View, {
style: [styles.container, coverStyle, style]
}, /*#__PURE__*/React.createElement(Image, _extends({}, rest, {
style: [styles.image, coverStyle],
accessibilityIgnoresInvertColors: true
})));
};
CardCover.displayName = 'Card.Cover';
const styles = StyleSheet.create({
container: {
height: 195,
backgroundColor: grey200,
overflow: 'hidden'
},
image: {
flex: 1,
height: undefined,
width: undefined,
justifyContent: 'flex-end'
}
});
export default CardCover;
// @component-docs ignore-next-line
export { CardCover };
//# sourceMappingURL=CardCover.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","Image","StyleSheet","View","getCardCoverStyle","useInternalTheme","grey200","splitStyles","CardCover","index","total","style","theme","themeOverrides","rest","flattenedStyles","flatten","borderRadiusStyles","startsWith","endsWith","coverStyle","createElement","styles","container","_extends","image","accessibilityIgnoresInvertColors","displayName","create","height","backgroundColor","overflow","flex","undefined","width","justifyContent"],"sourceRoot":"../../../../src","sources":["components/Card/CardCover.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,EAAaC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAE5E,SAASC,iBAAiB,QAAQ,SAAS;AAC3C,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,OAAO,QAAQ,+BAA+B;AAEvD,SAASC,WAAW,QAAQ,yBAAyB;AAkBrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,SAAS,GAAGA,CAAC;EACjBC,KAAK;EACLC,KAAK;EACLC,KAAK;EACLC,KAAK,EAAEC,cAAc;EACrB,GAAGC;AACE,CAAC,KAAK;EACX,MAAMF,KAAK,GAAGP,gBAAgB,CAACQ,cAAc,CAAC;EAE9C,MAAME,eAAe,GAAIb,UAAU,CAACc,OAAO,CAACL,KAAK,CAAC,IAAI,CAAC,CAAe;EACtE,MAAM,GAAGM,kBAAkB,CAAC,GAAGV,WAAW,CACxCQ,eAAe,EACdJ,KAAK,IAAKA,KAAK,CAACO,UAAU,CAAC,QAAQ,CAAC,IAAIP,KAAK,CAACQ,QAAQ,CAAC,QAAQ,CAClE,CAAC;EAED,MAAMC,UAAU,GAAGhB,iBAAiB,CAAC;IACnCQ,KAAK;IACLH,KAAK;IACLC,KAAK;IACLO;EACF,CAAC,CAAC;EAEF,oBACEjB,KAAA,CAAAqB,aAAA,CAAClB,IAAI;IAACQ,KAAK,EAAE,CAACW,MAAM,CAACC,SAAS,EAAEH,UAAU,EAAET,KAAK;EAAE,gBACjDX,KAAA,CAAAqB,aAAA,CAACpB,KAAK,EAAAuB,QAAA,KACAV,IAAI;IACRH,KAAK,EAAE,CAACW,MAAM,CAACG,KAAK,EAAEL,UAAU,CAAE;IAClCM,gCAAgC;EAAA,EACjC,CACG,CAAC;AAEX,CAAC;AAEDlB,SAAS,CAACmB,WAAW,GAAG,YAAY;AACpC,MAAML,MAAM,GAAGpB,UAAU,CAAC0B,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,MAAM,EAAE,GAAG;IACXC,eAAe,EAAExB,OAAO;IACxByB,QAAQ,EAAE;EACZ,CAAC;EACDN,KAAK,EAAE;IACLO,IAAI,EAAE,CAAC;IACPH,MAAM,EAAEI,SAAS;IACjBC,KAAK,EAAED,SAAS;IAChBE,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,eAAe3B,SAAS;;AAExB;AACA,SAASA,SAAS","ignoreList":[]}

View File

@@ -0,0 +1,113 @@
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { useInternalTheme } from '../../core/theming';
import Text from '../Typography/Text';
import Caption from '../Typography/v2/Caption';
import Title from '../Typography/v2/Title';
const LEFT_SIZE = 40;
/**
* A component to show a title, subtitle and an avatar inside a Card.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Avatar, Card, IconButton } from 'react-native-paper';
*
* const MyComponent = () => (
* <Card.Title
* title="Card Title"
* subtitle="Card Subtitle"
* left={(props) => <Avatar.Icon {...props} icon="folder" />}
* right={(props) => <IconButton {...props} icon="dots-vertical" onPress={() => {}} />}
* />
* );
*
* export default MyComponent;
* ```
*/
const CardTitle = ({
title,
titleStyle,
titleNumberOfLines = 1,
titleVariant = 'bodyLarge',
titleMaxFontSizeMultiplier,
subtitle,
subtitleStyle,
subtitleNumberOfLines = 1,
subtitleVariant = 'bodyMedium',
subtitleMaxFontSizeMultiplier,
left,
leftStyle,
right,
rightStyle,
style,
theme: themeOverrides
}) => {
const theme = useInternalTheme(themeOverrides);
const TitleComponent = theme.isV3 ? Text : Title;
const SubtitleComponent = theme.isV3 ? Text : Caption;
const minHeight = subtitle || left || right ? 72 : 50;
const marginBottom = subtitle ? 0 : 2;
return /*#__PURE__*/React.createElement(View, {
style: [styles.container, {
minHeight
}, style]
}, left ? /*#__PURE__*/React.createElement(View, {
style: [styles.left, leftStyle]
}, left({
size: LEFT_SIZE
})) : null, /*#__PURE__*/React.createElement(View, {
style: [styles.titles]
}, title && /*#__PURE__*/React.createElement(TitleComponent, {
style: [styles.title, {
marginBottom
}, titleStyle],
numberOfLines: titleNumberOfLines,
variant: titleVariant,
maxFontSizeMultiplier: titleMaxFontSizeMultiplier
}, title), subtitle && /*#__PURE__*/React.createElement(SubtitleComponent, {
style: [styles.subtitle, subtitleStyle],
numberOfLines: subtitleNumberOfLines,
variant: subtitleVariant,
maxFontSizeMultiplier: subtitleMaxFontSizeMultiplier
}, subtitle)), /*#__PURE__*/React.createElement(View, {
style: rightStyle
}, right ? right({
size: 24
}) : null));
};
CardTitle.displayName = 'Card.Title';
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingLeft: 16
},
left: {
justifyContent: 'center',
marginRight: 16,
height: LEFT_SIZE,
width: LEFT_SIZE
},
titles: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center'
},
title: {
minHeight: 30,
paddingRight: 16
},
subtitle: {
minHeight: 20,
marginVertical: 0,
paddingRight: 16
}
});
export default CardTitle;
// @component-docs ignore-next-line
export { CardTitle };
//# sourceMappingURL=CardTitle.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","useInternalTheme","Text","Caption","Title","LEFT_SIZE","CardTitle","title","titleStyle","titleNumberOfLines","titleVariant","titleMaxFontSizeMultiplier","subtitle","subtitleStyle","subtitleNumberOfLines","subtitleVariant","subtitleMaxFontSizeMultiplier","left","leftStyle","right","rightStyle","style","theme","themeOverrides","TitleComponent","isV3","SubtitleComponent","minHeight","marginBottom","createElement","styles","container","size","titles","numberOfLines","variant","maxFontSizeMultiplier","displayName","create","flexDirection","alignItems","justifyContent","paddingLeft","marginRight","height","width","flex","paddingRight","marginVertical"],"sourceRoot":"../../../../src","sources":["components/Card/CardTitle.tsx"],"mappings":"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","ignoreList":[]}

View File

@@ -0,0 +1,84 @@
import color from 'color';
import { black, white } from '../../styles/themes/v2/colors';
export const getCardCoverStyle = ({
theme,
index,
total,
borderRadiusStyles
}) => {
const {
isV3,
roundness
} = theme;
if (Object.keys(borderRadiusStyles).length > 0) {
return {
borderRadius: 3 * roundness,
...borderRadiusStyles
};
}
if (isV3) {
return {
borderRadius: 3 * roundness
};
}
if (index === 0) {
if (total === 1) {
return {
borderRadius: roundness
};
}
return {
borderTopLeftRadius: roundness,
borderTopRightRadius: roundness
};
}
if (typeof total === 'number' && index === total - 1) {
return {
borderBottomLeftRadius: roundness
};
}
return undefined;
};
const getBorderColor = ({
theme
}) => {
if (theme.isV3) {
return theme.colors.outline;
}
if (theme.dark) {
return color(white).alpha(0.12).rgb().string();
}
return color(black).alpha(0.12).rgb().string();
};
const getBackgroundColor = ({
theme,
isMode
}) => {
if (theme.isV3) {
if (isMode('contained')) {
return theme.colors.surfaceVariant;
}
if (isMode('outlined')) {
return theme.colors.surface;
}
}
return undefined;
};
export const getCardColors = ({
theme,
mode
}) => {
const isMode = modeToCompare => {
return mode === modeToCompare;
};
return {
backgroundColor: getBackgroundColor({
theme,
isMode
}),
borderColor: getBorderColor({
theme
})
};
};
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["color","black","white","getCardCoverStyle","theme","index","total","borderRadiusStyles","isV3","roundness","Object","keys","length","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","undefined","getBorderColor","colors","outline","dark","alpha","rgb","string","getBackgroundColor","isMode","surfaceVariant","surface","getCardColors","mode","modeToCompare","backgroundColor","borderColor"],"sourceRoot":"../../../../src","sources":["components/Card/utils.tsx"],"mappings":"AAEA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,EAAEC,KAAK,QAAQ,+BAA+B;AAgB5D,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAChCC,KAAK;EACLC,KAAK;EACLC,KAAK;EACLC;AAMF,CAAC,KAAK;EACJ,MAAM;IAAEC,IAAI;IAAEC;EAAU,CAAC,GAAGL,KAAK;EAEjC,IAAIM,MAAM,CAACC,IAAI,CAACJ,kBAAkB,CAAC,CAACK,MAAM,GAAG,CAAC,EAAE;IAC9C,OAAO;MACLC,YAAY,EAAE,CAAC,GAAGJ,SAAS;MAC3B,GAAGF;IACL,CAAC;EACH;EAEA,IAAIC,IAAI,EAAE;IACR,OAAO;MACLK,YAAY,EAAE,CAAC,GAAGJ;IACpB,CAAC;EACH;EAEA,IAAIJ,KAAK,KAAK,CAAC,EAAE;IACf,IAAIC,KAAK,KAAK,CAAC,EAAE;MACf,OAAO;QACLO,YAAY,EAAEJ;MAChB,CAAC;IACH;IAEA,OAAO;MACLK,mBAAmB,EAAEL,SAAS;MAC9BM,oBAAoB,EAAEN;IACxB,CAAC;EACH;EAEA,IAAI,OAAOH,KAAK,KAAK,QAAQ,IAAID,KAAK,KAAKC,KAAK,GAAG,CAAC,EAAE;IACpD,OAAO;MACLU,sBAAsB,EAAEP;IAC1B,CAAC;EACH;EAEA,OAAOQ,SAAS;AAClB,CAAC;AAED,MAAMC,cAAc,GAAGA,CAAC;EAAEd;AAAgC,CAAC,KAAK;EAC9D,IAAIA,KAAK,CAACI,IAAI,EAAE;IACd,OAAOJ,KAAK,CAACe,MAAM,CAACC,OAAO;EAC7B;EAEA,IAAIhB,KAAK,CAACiB,IAAI,EAAE;IACd,OAAOrB,KAAK,CAACE,KAAK,CAAC,CAACoB,KAAK,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC,CAAC,CAACC,MAAM,CAAC,CAAC;EAChD;EACA,OAAOxB,KAAK,CAACC,KAAK,CAAC,CAACqB,KAAK,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC,CAAC,CAACC,MAAM,CAAC,CAAC;AAChD,CAAC;AAED,MAAMC,kBAAkB,GAAGA,CAAC;EAC1BrB,KAAK;EACLsB;AAIF,CAAC,KAAK;EACJ,IAAItB,KAAK,CAACI,IAAI,EAAE;IACd,IAAIkB,MAAM,CAAC,WAAW,CAAC,EAAE;MACvB,OAAOtB,KAAK,CAACe,MAAM,CAACQ,cAAc;IACpC;IACA,IAAID,MAAM,CAAC,UAAU,CAAC,EAAE;MACtB,OAAOtB,KAAK,CAACe,MAAM,CAACS,OAAO;IAC7B;EACF;EACA,OAAOX,SAAS;AAClB,CAAC;AAED,OAAO,MAAMY,aAAa,GAAGA,CAAC;EAC5BzB,KAAK;EACL0B;AAIF,CAAC,KAAK;EACJ,MAAMJ,MAAM,GAAIK,aAAuB,IAAK;IAC1C,OAAOD,IAAI,KAAKC,aAAa;EAC/B,CAAC;EAED,OAAO;IACLC,eAAe,EAAEP,kBAAkB,CAAC;MAClCrB,KAAK;MACLsB;IACF,CAAC,CAAC;IACFO,WAAW,EAAEf,cAAc,CAAC;MAAEd;IAAM,CAAC;EACvC,CAAC;AACH,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,48 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Platform } from 'react-native';
import CheckboxAndroid from './CheckboxAndroid';
import CheckboxIOS from './CheckboxIOS';
import { useInternalTheme } from '../../core/theming';
/**
* Checkboxes allow the selection of multiple options from a set.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Checkbox } from 'react-native-paper';
*
* const MyComponent = () => {
* const [checked, setChecked] = React.useState(false);
*
* return (
* <Checkbox
* status={checked ? 'checked' : 'unchecked'}
* onPress={() => {
* setChecked(!checked);
* }}
* />
* );
* };
*
* export default MyComponent;
* ```
*/
const Checkbox = ({
theme: themeOverrides,
...props
}) => {
const theme = useInternalTheme(themeOverrides);
return Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(CheckboxIOS, _extends({}, props, {
theme: theme
})) : /*#__PURE__*/React.createElement(CheckboxAndroid, _extends({}, props, {
theme: theme
}));
};
export default Checkbox;
// @component-docs ignore-next-line
const CheckboxWithTheme = Checkbox;
// @component-docs ignore-next-line
export { CheckboxWithTheme as Checkbox };
//# sourceMappingURL=Checkbox.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","Platform","CheckboxAndroid","CheckboxIOS","useInternalTheme","Checkbox","theme","themeOverrides","props","OS","createElement","_extends","CheckboxWithTheme"],"sourceRoot":"../../../../src","sources":["components/Checkbox/Checkbox.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAgCC,QAAQ,QAAQ,cAAc;AAE9D,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,WAAW,MAAM,eAAe;AACvC,SAASC,gBAAgB,QAAQ,oBAAoB;AAkCrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,KAAK,EAAEC,cAAc;EAAE,GAAGC;AAAa,CAAC,KAAK;EAC/D,MAAMF,KAAK,GAAGF,gBAAgB,CAACG,cAAc,CAAC;EAC9C,OAAON,QAAQ,CAACQ,EAAE,KAAK,KAAK,gBAC1BT,KAAA,CAAAU,aAAA,CAACP,WAAW,EAAAQ,QAAA,KAAKH,KAAK;IAAEF,KAAK,EAAEA;EAAM,EAAE,CAAC,gBAExCN,KAAA,CAAAU,aAAA,CAACR,eAAe,EAAAS,QAAA,KAAKH,KAAK;IAAEF,KAAK,EAAEA;EAAM,EAAE,CAC5C;AACH,CAAC;AAED,eAAeD,QAAQ;;AAEvB;AACA,MAAMO,iBAAiB,GAAGP,QAAQ;AAClC;AACA,SAASO,iBAAiB,IAAIP,QAAQ","ignoreList":[]}

View File

@@ -0,0 +1,127 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Animated, StyleSheet, View } from 'react-native';
import { getAndroidSelectionControlColor } from './utils';
import { useInternalTheme } from '../../core/theming';
import MaterialCommunityIcon from '../MaterialCommunityIcon';
import TouchableRipple from '../TouchableRipple/TouchableRipple';
// From https://material.io/design/motion/speed.html#duration
const ANIMATION_DURATION = 100;
/**
* Checkboxes allow the selection of multiple options from a set.
* This component follows platform guidelines for Android, but can be used
* on any platform.
*
* @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
*/
const CheckboxAndroid = ({
status,
theme: themeOverrides,
disabled,
onPress,
testID,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const {
current: scaleAnim
} = React.useRef(new Animated.Value(1));
const isFirstRendering = React.useRef(true);
const {
animation: {
scale
}
} = theme;
React.useEffect(() => {
// Do not run animation on very first rendering
if (isFirstRendering.current) {
isFirstRendering.current = false;
return;
}
const checked = status === 'checked';
Animated.sequence([Animated.timing(scaleAnim, {
toValue: 0.85,
duration: checked ? ANIMATION_DURATION * scale : 0,
useNativeDriver: false
}), Animated.timing(scaleAnim, {
toValue: 1,
duration: checked ? ANIMATION_DURATION * scale : ANIMATION_DURATION * scale * 1.75,
useNativeDriver: false
})]).start();
}, [status, scaleAnim, scale]);
const checked = status === 'checked';
const indeterminate = status === 'indeterminate';
const {
rippleColor,
selectionControlColor
} = getAndroidSelectionControlColor({
theme,
disabled,
checked,
customColor: rest.color,
customUncheckedColor: rest.uncheckedColor
});
const borderWidth = scaleAnim.interpolate({
inputRange: [0.8, 1],
outputRange: [7, 0]
});
const icon = indeterminate ? 'minus-box' : checked ? 'checkbox-marked' : 'checkbox-blank-outline';
return /*#__PURE__*/React.createElement(TouchableRipple, _extends({}, rest, {
borderless: true,
rippleColor: rippleColor,
onPress: onPress,
disabled: disabled,
accessibilityRole: "checkbox",
accessibilityState: {
disabled,
checked
},
accessibilityLiveRegion: "polite",
style: styles.container,
testID: testID,
theme: theme
}), /*#__PURE__*/React.createElement(Animated.View, {
style: {
transform: [{
scale: scaleAnim
}]
}
}, /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
allowFontScaling: false,
name: icon,
size: 24,
color: selectionControlColor,
direction: "ltr"
}), /*#__PURE__*/React.createElement(View, {
style: [StyleSheet.absoluteFill, styles.fillContainer]
}, /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.fill, {
borderColor: selectionControlColor
}, {
borderWidth
}]
}))));
};
CheckboxAndroid.displayName = 'Checkbox.Android';
const styles = StyleSheet.create({
container: {
borderRadius: 18,
width: 36,
height: 36,
padding: 6
},
fillContainer: {
alignItems: 'center',
justifyContent: 'center'
},
fill: {
height: 14,
width: 14
}
});
export default CheckboxAndroid;
// @component-docs ignore-next-line
export { CheckboxAndroid };
//# sourceMappingURL=CheckboxAndroid.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","Animated","StyleSheet","View","getAndroidSelectionControlColor","useInternalTheme","MaterialCommunityIcon","TouchableRipple","ANIMATION_DURATION","CheckboxAndroid","status","theme","themeOverrides","disabled","onPress","testID","rest","current","scaleAnim","useRef","Value","isFirstRendering","animation","scale","useEffect","checked","sequence","timing","toValue","duration","useNativeDriver","start","indeterminate","rippleColor","selectionControlColor","customColor","color","customUncheckedColor","uncheckedColor","borderWidth","interpolate","inputRange","outputRange","icon","createElement","_extends","borderless","accessibilityRole","accessibilityState","accessibilityLiveRegion","style","styles","container","transform","allowFontScaling","name","size","direction","absoluteFill","fillContainer","fill","borderColor","displayName","create","borderRadius","width","height","padding","alignItems","justifyContent"],"sourceRoot":"../../../../src","sources":["components/Checkbox/CheckboxAndroid.tsx"],"mappings":"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","ignoreList":[]}

View File

@@ -0,0 +1,73 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { getSelectionControlIOSColor } from './utils';
import { useInternalTheme } from '../../core/theming';
import MaterialCommunityIcon from '../MaterialCommunityIcon';
import TouchableRipple from '../TouchableRipple/TouchableRipple';
/**
* Checkboxes allow the selection of multiple options from a set.
* This component follows platform guidelines for iOS, but can be used
* on any platform.
*
* @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
*/
const CheckboxIOS = ({
status,
disabled,
onPress,
theme: themeOverrides,
testID,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const checked = status === 'checked';
const indeterminate = status === 'indeterminate';
const {
checkedColor,
rippleColor
} = getSelectionControlIOSColor({
theme,
disabled,
customColor: rest.color
});
const icon = indeterminate ? 'minus' : 'check';
const opacity = indeterminate || checked ? 1 : 0;
return /*#__PURE__*/React.createElement(TouchableRipple, _extends({}, rest, {
borderless: true,
rippleColor: rippleColor,
onPress: onPress,
disabled: disabled,
accessibilityRole: "checkbox",
accessibilityState: {
disabled,
checked
},
accessibilityLiveRegion: "polite",
style: styles.container,
testID: testID,
theme: theme
}), /*#__PURE__*/React.createElement(View, {
style: {
opacity
}
}, /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
allowFontScaling: false,
name: icon,
size: 24,
color: checkedColor,
direction: "ltr"
})));
};
CheckboxIOS.displayName = 'Checkbox.IOS';
const styles = StyleSheet.create({
container: {
borderRadius: 18,
padding: 6
}
});
export default CheckboxIOS;
// @component-docs ignore-next-line
export { CheckboxIOS };
//# sourceMappingURL=CheckboxIOS.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","getSelectionControlIOSColor","useInternalTheme","MaterialCommunityIcon","TouchableRipple","CheckboxIOS","status","disabled","onPress","theme","themeOverrides","testID","rest","checked","indeterminate","checkedColor","rippleColor","customColor","color","icon","opacity","createElement","_extends","borderless","accessibilityRole","accessibilityState","accessibilityLiveRegion","style","styles","container","allowFontScaling","name","size","direction","displayName","create","borderRadius","padding"],"sourceRoot":"../../../../src","sources":["components/Checkbox/CheckboxIOS.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAgCC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAEtE,SAASC,2BAA2B,QAAQ,SAAS;AACrD,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,OAAOC,eAAe,MAAM,oCAAoC;AA6BhE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,QAAQ;EACRC,OAAO;EACPC,KAAK,EAAEC,cAAc;EACrBC,MAAM;EACN,GAAGC;AACE,CAAC,KAAK;EACX,MAAMH,KAAK,GAAGP,gBAAgB,CAACQ,cAAc,CAAC;EAC9C,MAAMG,OAAO,GAAGP,MAAM,KAAK,SAAS;EACpC,MAAMQ,aAAa,GAAGR,MAAM,KAAK,eAAe;EAEhD,MAAM;IAAES,YAAY;IAAEC;EAAY,CAAC,GAAGf,2BAA2B,CAAC;IAChEQ,KAAK;IACLF,QAAQ;IACRU,WAAW,EAAEL,IAAI,CAACM;EACpB,CAAC,CAAC;EAEF,MAAMC,IAAI,GAAGL,aAAa,GAAG,OAAO,GAAG,OAAO;EAC9C,MAAMM,OAAO,GAAGN,aAAa,IAAID,OAAO,GAAG,CAAC,GAAG,CAAC;EAEhD,oBACEf,KAAA,CAAAuB,aAAA,CAACjB,eAAe,EAAAkB,QAAA,KACVV,IAAI;IACRW,UAAU;IACVP,WAAW,EAAEA,WAAY;IACzBR,OAAO,EAAEA,OAAQ;IACjBD,QAAQ,EAAEA,QAAS;IACnBiB,iBAAiB,EAAC,UAAU;IAC5BC,kBAAkB,EAAE;MAAElB,QAAQ;MAAEM;IAAQ,CAAE;IAC1Ca,uBAAuB,EAAC,QAAQ;IAChCC,KAAK,EAAEC,MAAM,CAACC,SAAU;IACxBlB,MAAM,EAAEA,MAAO;IACfF,KAAK,EAAEA;EAAM,iBAEbX,KAAA,CAAAuB,aAAA,CAACrB,IAAI;IAAC2B,KAAK,EAAE;MAAEP;IAAQ;EAAE,gBACvBtB,KAAA,CAAAuB,aAAA,CAAClB,qBAAqB;IACpB2B,gBAAgB,EAAE,KAAM;IACxBC,IAAI,EAAEZ,IAAK;IACXa,IAAI,EAAE,EAAG;IACTd,KAAK,EAAEH,YAAa;IACpBkB,SAAS,EAAC;EAAK,CAChB,CACG,CACS,CAAC;AAEtB,CAAC;AAED5B,WAAW,CAAC6B,WAAW,GAAG,cAAc;AAExC,MAAMN,MAAM,GAAG7B,UAAU,CAACoC,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,YAAY,EAAE,EAAE;IAChBC,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAEF,eAAehC,WAAW;;AAE1B;AACA,SAASA,WAAW","ignoreList":[]}

View File

@@ -0,0 +1,118 @@
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import Checkbox from './Checkbox';
import CheckboxAndroid from './CheckboxAndroid';
import CheckboxIOS from './CheckboxIOS';
import { useInternalTheme } from '../../core/theming';
import TouchableRipple from '../TouchableRipple/TouchableRipple';
import Text from '../Typography/Text';
/**
* Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { View } from 'react-native';
* import { Checkbox } from 'react-native-paper';
*
* const MyComponent = () => (
* <View>
* <Checkbox.Item label="Item" status="checked" />
* </View>
* );
*
* export default MyComponent;
*```
*/
const CheckboxItem = ({
style,
status,
label,
onPress,
onLongPress,
labelStyle,
theme: themeOverrides,
testID,
mode,
position = 'trailing',
accessibilityLabel = label,
disabled,
labelVariant = 'bodyLarge',
labelMaxFontSizeMultiplier = 1.5,
rippleColor,
background,
hitSlop,
...props
}) => {
const theme = useInternalTheme(themeOverrides);
const checkboxProps = {
...props,
status,
theme,
disabled
};
const isLeading = position === 'leading';
let checkbox;
if (mode === 'android') {
checkbox = /*#__PURE__*/React.createElement(CheckboxAndroid, checkboxProps);
} else if (mode === 'ios') {
checkbox = /*#__PURE__*/React.createElement(CheckboxIOS, checkboxProps);
} else {
checkbox = /*#__PURE__*/React.createElement(Checkbox, checkboxProps);
}
const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
const disabledTextColor = theme.isV3 ? theme.colors.onSurfaceDisabled : theme.colors.disabled;
const textAlign = isLeading ? 'right' : 'left';
const computedStyle = {
color: disabled ? disabledTextColor : textColor,
textAlign
};
return /*#__PURE__*/React.createElement(TouchableRipple, {
accessibilityLabel: accessibilityLabel,
accessibilityRole: "checkbox",
accessibilityState: {
checked: status === 'checked',
disabled
},
onPress: onPress,
onLongPress: onLongPress,
testID: testID,
disabled: disabled,
rippleColor: rippleColor,
theme: theme,
background: background,
hitSlop: hitSlop
}, /*#__PURE__*/React.createElement(View, {
style: [styles.container, style],
pointerEvents: "none",
importantForAccessibility: "no-hide-descendants"
}, isLeading && checkbox, /*#__PURE__*/React.createElement(Text, {
variant: labelVariant,
testID: `${testID}-text`,
maxFontSizeMultiplier: labelMaxFontSizeMultiplier,
style: [styles.label, !theme.isV3 && styles.font, computedStyle, labelStyle]
}, label), !isLeading && checkbox));
};
CheckboxItem.displayName = 'Checkbox.Item';
export default CheckboxItem;
// @component-docs ignore-next-line
export { CheckboxItem };
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: 8,
paddingHorizontal: 16
},
label: {
flexShrink: 1,
flexGrow: 1
},
font: {
fontSize: 16
}
});
//# sourceMappingURL=CheckboxItem.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","Checkbox","CheckboxAndroid","CheckboxIOS","useInternalTheme","TouchableRipple","Text","CheckboxItem","style","status","label","onPress","onLongPress","labelStyle","theme","themeOverrides","testID","mode","position","accessibilityLabel","disabled","labelVariant","labelMaxFontSizeMultiplier","rippleColor","background","hitSlop","props","checkboxProps","isLeading","checkbox","createElement","textColor","isV3","colors","onSurface","text","disabledTextColor","onSurfaceDisabled","textAlign","computedStyle","color","accessibilityRole","accessibilityState","checked","styles","container","pointerEvents","importantForAccessibility","variant","maxFontSizeMultiplier","font","displayName","create","flexDirection","alignItems","justifyContent","paddingVertical","paddingHorizontal","flexShrink","flexGrow","fontSize"],"sourceRoot":"../../../../src","sources":["components/Checkbox/CheckboxItem.tsx"],"mappings":"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","ignoreList":[]}

View File

@@ -0,0 +1,16 @@
import CheckboxComponent from './Checkbox';
import CheckboxAndroid from './CheckboxAndroid';
import CheckboxIOS from './CheckboxIOS';
import CheckboxItem from './CheckboxItem';
const Checkbox = Object.assign(
// @component ./Checkbox.tsx
CheckboxComponent, {
// @component ./CheckboxItem.tsx
Item: CheckboxItem,
// @component ./CheckboxAndroid.tsx
Android: CheckboxAndroid,
// @component ./CheckboxIOS.tsx
IOS: CheckboxIOS
});
export default Checkbox;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["CheckboxComponent","CheckboxAndroid","CheckboxIOS","CheckboxItem","Checkbox","Object","assign","Item","Android","IOS"],"sourceRoot":"../../../../src","sources":["components/Checkbox/index.ts"],"mappings":"AAAA,OAAOA,iBAAiB,MAAM,YAAY;AAC1C,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,YAAY,MAAM,gBAAgB;AAEzC,MAAMC,QAAQ,GAAGC,MAAM,CAACC,MAAM;AAC5B;AACAN,iBAAiB,EACjB;EACE;EACAO,IAAI,EAAEJ,YAAY;EAClB;EACAK,OAAO,EAAEP,eAAe;EACxB;EACAQ,GAAG,EAAEP;AACP,CACF,CAAC;AAED,eAAeE,QAAQ","ignoreList":[]}

View File

@@ -0,0 +1,141 @@
import color from 'color';
const getAndroidCheckedColor = ({
theme,
customColor
}) => {
if (customColor) {
return customColor;
}
if (theme.isV3) {
return theme.colors.primary;
}
return theme.colors.accent;
};
const getAndroidUncheckedColor = ({
theme,
customUncheckedColor
}) => {
if (customUncheckedColor) {
return customUncheckedColor;
}
if (theme.isV3) {
return theme.colors.onSurfaceVariant;
}
if (theme.dark) {
return color(theme.colors.text).alpha(0.7).rgb().string();
}
return color(theme.colors.text).alpha(0.54).rgb().string();
};
const getAndroidRippleColor = ({
theme,
checkedColor,
disabled
}) => {
if (disabled) {
if (theme.isV3) {
return color(theme.colors.onSurface).alpha(0.16).rgb().string();
}
return color(theme.colors.text).alpha(0.16).rgb().string();
}
return color(checkedColor).fade(0.32).rgb().string();
};
const getAndroidControlColor = ({
theme,
checked,
disabled,
checkedColor,
uncheckedColor
}) => {
if (disabled) {
if (theme.isV3) {
return theme.colors.onSurfaceDisabled;
}
return theme.colors.disabled;
}
if (checked) {
return checkedColor;
}
return uncheckedColor;
};
export const getAndroidSelectionControlColor = ({
theme,
disabled,
checked,
customColor,
customUncheckedColor
}) => {
const checkedColor = getAndroidCheckedColor({
theme,
customColor
});
const uncheckedColor = getAndroidUncheckedColor({
theme,
customUncheckedColor
});
return {
rippleColor: getAndroidRippleColor({
theme,
checkedColor,
disabled
}),
selectionControlColor: getAndroidControlColor({
theme,
disabled,
checked,
checkedColor,
uncheckedColor
})
};
};
const getIOSCheckedColor = ({
theme,
disabled,
customColor
}) => {
if (disabled) {
if (theme.isV3) {
return theme.colors.onSurfaceDisabled;
}
return theme.colors.disabled;
}
if (customColor) {
return customColor;
}
if (theme.isV3) {
return theme.colors.primary;
}
return theme.colors.accent;
};
const getIOSRippleColor = ({
theme,
checkedColor,
disabled
}) => {
if (disabled) {
if (theme.isV3) {
return color(theme.colors.onSurface).alpha(0.16).rgb().string();
}
return color(theme.colors.text).alpha(0.16).rgb().string();
}
return color(checkedColor).fade(0.32).rgb().string();
};
export const getSelectionControlIOSColor = ({
theme,
disabled,
customColor
}) => {
const checkedColor = getIOSCheckedColor({
theme,
disabled,
customColor
});
return {
checkedColor,
rippleColor: getIOSRippleColor({
theme,
checkedColor,
disabled
})
};
};
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["color","getAndroidCheckedColor","theme","customColor","isV3","colors","primary","accent","getAndroidUncheckedColor","customUncheckedColor","onSurfaceVariant","dark","text","alpha","rgb","string","getAndroidRippleColor","checkedColor","disabled","onSurface","fade","getAndroidControlColor","checked","uncheckedColor","onSurfaceDisabled","getAndroidSelectionControlColor","rippleColor","selectionControlColor","getIOSCheckedColor","getIOSRippleColor","getSelectionControlIOSColor"],"sourceRoot":"../../../../src","sources":["components/Checkbox/utils.ts"],"mappings":"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","ignoreList":[]}

View File

@@ -0,0 +1,308 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Animated, Platform, StyleSheet, Pressable, View } from 'react-native';
import useLatestCallback from 'use-latest-callback';
import { getChipColors } from './helpers';
import { useInternalTheme } from '../../core/theming';
import { white } from '../../styles/themes/v2/colors';
import hasTouchHandler from '../../utils/hasTouchHandler';
import Icon from '../Icon';
import MaterialCommunityIcon from '../MaterialCommunityIcon';
import Surface from '../Surface';
import TouchableRipple from '../TouchableRipple/TouchableRipple';
import Text from '../Typography/Text';
/**
* Chips are compact elements that can represent inputs, attributes, or actions.
* They can have an icon or avatar on the left, and a close button icon on the right.
* They are typically used to:
* <ul>
* <li>Present multiple options </li>
* <li>Represent attributes active or chosen </li>
* <li>Present filter options </li>
* <li>Trigger actions related to primary content </li>
* </ul>
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Chip } from 'react-native-paper';
*
* const MyComponent = () => (
* <Chip icon="information" onPress={() => console.log('Pressed')}>Example Chip</Chip>
* );
*
* export default MyComponent;
* ```
*/
const Chip = ({
mode = 'flat',
children,
icon,
avatar,
selected = false,
disabled = false,
background,
accessibilityLabel,
accessibilityRole = 'button',
closeIconAccessibilityLabel = 'Close',
onPress,
onLongPress,
onPressOut,
onPressIn,
delayLongPress,
onClose,
closeIcon,
textStyle,
style,
theme: themeOverrides,
testID = 'chip',
selectedColor,
rippleColor: customRippleColor,
showSelectedOverlay = false,
showSelectedCheck = true,
ellipsizeMode,
compact,
elevated = false,
maxFontSizeMultiplier,
hitSlop,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const {
isV3,
roundness
} = theme;
const isWeb = Platform.OS === 'web';
const {
current: elevation
} = React.useRef(new Animated.Value(isV3 && elevated ? 1 : 0));
const hasPassedTouchHandler = hasTouchHandler({
onPress,
onLongPress,
onPressIn,
onPressOut
});
const isOutlined = mode === 'outlined';
const handlePressIn = useLatestCallback(e => {
const {
scale
} = theme.animation;
onPressIn === null || onPressIn === void 0 || onPressIn(e);
Animated.timing(elevation, {
toValue: isV3 ? elevated ? 2 : 0 : 4,
duration: 200 * scale,
useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72
}).start();
});
const handlePressOut = useLatestCallback(e => {
const {
scale
} = theme.animation;
onPressOut === null || onPressOut === void 0 || onPressOut(e);
Animated.timing(elevation, {
toValue: isV3 && elevated ? 1 : 0,
duration: 150 * scale,
useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72
}).start();
});
const opacity = isV3 ? 0.38 : 0.26;
const defaultBorderRadius = roundness * (isV3 ? 2 : 4);
const iconSize = isV3 ? 18 : 16;
const {
backgroundColor: customBackgroundColor,
borderRadius = defaultBorderRadius
} = StyleSheet.flatten(style) || {};
const {
borderColor,
textColor,
iconColor,
rippleColor,
selectedBackgroundColor,
backgroundColor
} = getChipColors({
isOutlined,
theme,
selectedColor,
showSelectedOverlay,
customBackgroundColor,
disabled,
customRippleColor
});
const accessibilityState = {
selected,
disabled
};
const elevationStyle = isV3 || Platform.OS === 'android' ? elevation : 0;
const multiplier = isV3 ? compact ? 1.5 : 2 : 1;
const labelSpacings = {
marginRight: onClose ? 0 : 8 * multiplier,
marginLeft: avatar || icon || selected && showSelectedCheck ? 4 * multiplier : 8 * multiplier
};
const contentSpacings = {
paddingRight: isV3 ? onClose ? 34 : 0 : onClose ? 32 : 4
};
const labelTextStyle = {
color: textColor,
...(isV3 ? theme.fonts.labelLarge : theme.fonts.regular)
};
return /*#__PURE__*/React.createElement(Surface, _extends({
style: [styles.container, isV3 && styles.md3Container, !theme.isV3 && {
elevation: elevationStyle
}, {
backgroundColor: selected ? selectedBackgroundColor : backgroundColor,
borderColor,
borderRadius
}, style]
}, theme.isV3 && {
elevation: elevationStyle
}, rest, {
testID: `${testID}-container`,
theme: theme,
container: true
}), /*#__PURE__*/React.createElement(TouchableRipple, {
borderless: true,
background: background,
style: [{
borderRadius
}, styles.touchable],
onPress: onPress,
onLongPress: onLongPress,
onPressIn: hasPassedTouchHandler ? handlePressIn : undefined,
onPressOut: hasPassedTouchHandler ? handlePressOut : undefined,
delayLongPress: delayLongPress,
rippleColor: rippleColor,
disabled: disabled,
accessibilityLabel: accessibilityLabel,
accessibilityRole: accessibilityRole,
accessibilityState: accessibilityState,
testID: testID,
theme: theme,
hitSlop: hitSlop
}, /*#__PURE__*/React.createElement(View, {
style: [styles.content, isV3 && styles.md3Content, contentSpacings]
}, avatar && !icon ? /*#__PURE__*/React.createElement(View, {
style: [styles.avatarWrapper, isV3 && styles.md3AvatarWrapper, disabled && {
opacity
}]
}, /*#__PURE__*/React.isValidElement(avatar) ? /*#__PURE__*/React.cloneElement(avatar, {
style: [styles.avatar, avatar.props.style]
}) : avatar) : null, icon || selected && showSelectedCheck ? /*#__PURE__*/React.createElement(View, {
style: [styles.icon, isV3 && styles.md3Icon, avatar ? [styles.avatar, styles.avatarSelected, isV3 && selected && styles.md3SelectedIcon] : null]
}, icon ? /*#__PURE__*/React.createElement(Icon, {
source: icon,
color: avatar ? white : !disabled && theme.isV3 ? theme.colors.primary : iconColor,
size: 18,
theme: theme
}) : /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: "check",
color: avatar ? white : iconColor,
size: 18,
direction: "ltr"
})) : null, /*#__PURE__*/React.createElement(Text, {
variant: "labelLarge",
selectable: false,
numberOfLines: 1,
style: [isV3 ? styles.md3LabelText : styles.labelText, labelTextStyle, labelSpacings, textStyle],
ellipsizeMode: ellipsizeMode,
maxFontSizeMultiplier: maxFontSizeMultiplier
}, children))), onClose ? /*#__PURE__*/React.createElement(View, {
style: styles.closeButtonStyle
}, /*#__PURE__*/React.createElement(Pressable, {
onPress: onClose,
disabled: disabled,
accessibilityRole: "button",
accessibilityLabel: closeIconAccessibilityLabel
}, /*#__PURE__*/React.createElement(View, {
style: [styles.icon, styles.closeIcon, isV3 && styles.md3CloseIcon]
}, closeIcon ? /*#__PURE__*/React.createElement(Icon, {
source: closeIcon,
color: iconColor,
size: iconSize
}) : /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: isV3 ? 'close' : 'close-circle',
size: iconSize,
color: iconColor,
direction: "ltr"
})))) : null);
};
const styles = StyleSheet.create({
container: {
borderWidth: StyleSheet.hairlineWidth,
borderStyle: 'solid',
flexDirection: Platform.select({
default: 'column',
web: 'row'
})
},
md3Container: {
borderWidth: 1
},
content: {
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 4,
position: 'relative'
},
md3Content: {
paddingLeft: 0
},
icon: {
padding: 4,
alignSelf: 'center'
},
md3Icon: {
paddingLeft: 8,
paddingRight: 0
},
closeIcon: {
marginRight: 4
},
md3CloseIcon: {
marginRight: 8,
padding: 0
},
labelText: {
minHeight: 24,
lineHeight: 24,
textAlignVertical: 'center',
marginVertical: 4
},
md3LabelText: {
textAlignVertical: 'center',
marginVertical: 6
},
avatar: {
width: 24,
height: 24,
borderRadius: 12
},
avatarWrapper: {
marginRight: 4
},
md3AvatarWrapper: {
marginLeft: 4,
marginRight: 0
},
md3SelectedIcon: {
paddingLeft: 4
},
// eslint-disable-next-line react-native/no-color-literals
avatarSelected: {
position: 'absolute',
top: 4,
left: 4,
backgroundColor: 'rgba(0, 0, 0, .29)'
},
closeButtonStyle: {
position: 'absolute',
right: 0,
height: '100%',
justifyContent: 'center',
alignItems: 'center'
},
touchable: {
width: '100%'
}
});
export default Chip;
//# sourceMappingURL=Chip.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,242 @@
import color from 'color';
import { black, white } from '../../styles/themes/v2/colors';
const getBorderColor = ({
theme,
isOutlined,
disabled,
selectedColor,
backgroundColor
}) => {
const isSelectedColor = selectedColor !== undefined;
if (theme.isV3) {
if (!isOutlined) {
// If the Chip mode is "flat", set border color to transparent
return 'transparent';
}
if (disabled) {
return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string();
}
if (isSelectedColor) {
return color(selectedColor).alpha(0.29).rgb().string();
}
return theme.colors.outline;
}
if (isOutlined) {
if (isSelectedColor) {
return color(selectedColor).alpha(0.29).rgb().string();
}
if (theme.dark) {
return color(white).alpha(0.29).rgb().string();
}
return color(black).alpha(0.29).rgb().string();
}
return backgroundColor;
};
const getTextColor = ({
theme,
isOutlined,
disabled,
selectedColor
}) => {
const isSelectedColor = selectedColor !== undefined;
if (theme.isV3) {
if (disabled) {
return theme.colors.onSurfaceDisabled;
}
if (isSelectedColor) {
return selectedColor;
}
if (isOutlined) {
return theme.colors.onSurfaceVariant;
}
return theme.colors.onSecondaryContainer;
}
if (disabled) {
return theme.colors.disabled;
}
if (isSelectedColor) {
return color(selectedColor).alpha(0.87).rgb().string();
}
return color(theme.colors.text).alpha(0.87).rgb().string();
};
const getDefaultBackgroundColor = ({
theme,
isOutlined
}) => {
if (theme.isV3) {
if (isOutlined) {
return theme.colors.surface;
}
return theme.colors.secondaryContainer;
}
if (isOutlined) {
var _theme$colors;
return (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.surface;
}
if (theme.dark) {
return '#383838';
}
return '#ebebeb';
};
const getBackgroundColor = ({
theme,
isOutlined,
disabled,
customBackgroundColor
}) => {
if (typeof customBackgroundColor === 'string') {
return customBackgroundColor;
}
if (theme.isV3) {
if (disabled) {
if (isOutlined) {
return 'transparent';
}
return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string();
}
}
return getDefaultBackgroundColor({
theme,
isOutlined
});
};
const getSelectedBackgroundColor = ({
theme,
isOutlined,
disabled,
customBackgroundColor,
showSelectedOverlay
}) => {
const backgroundColor = getBackgroundColor({
theme,
disabled,
isOutlined,
customBackgroundColor
});
if (theme.isV3) {
if (isOutlined) {
if (showSelectedOverlay) {
return color(backgroundColor).mix(color(theme.colors.onSurfaceVariant), 0.12).rgb().string();
}
return color(backgroundColor).mix(color(theme.colors.onSurfaceVariant), 0).rgb().string();
}
if (showSelectedOverlay) {
return color(backgroundColor).mix(color(theme.colors.onSecondaryContainer), 0.12).rgb().string();
}
return color(backgroundColor).mix(color(theme.colors.onSecondaryContainer), 0).rgb().string();
}
if (theme.dark) {
if (isOutlined) {
return color(backgroundColor).lighten(0.2).rgb().string();
}
return color(backgroundColor).lighten(0.4).rgb().string();
}
if (isOutlined) {
return color(backgroundColor).darken(0.08).rgb().string();
}
return color(backgroundColor).darken(0.2).rgb().string();
};
const getIconColor = ({
theme,
isOutlined,
disabled,
selectedColor
}) => {
const isSelectedColor = selectedColor !== undefined;
if (theme.isV3) {
if (disabled) {
return theme.colors.onSurfaceDisabled;
}
if (isSelectedColor) {
return selectedColor;
}
if (isOutlined) {
return theme.colors.onSurfaceVariant;
}
return theme.colors.onSecondaryContainer;
}
if (disabled) {
return theme.colors.disabled;
}
if (isSelectedColor) {
return color(selectedColor).alpha(0.54).rgb().string();
}
return color(theme.colors.text).alpha(0.54).rgb().string();
};
const getRippleColor = ({
theme,
isOutlined,
disabled,
selectedColor,
selectedBackgroundColor,
customRippleColor
}) => {
if (customRippleColor) {
return customRippleColor;
}
const isSelectedColor = selectedColor !== undefined;
const textColor = getTextColor({
theme,
disabled,
selectedColor,
isOutlined
});
if (theme.isV3) {
if (isSelectedColor) {
return color(selectedColor).alpha(0.12).rgb().string();
}
return color(textColor).alpha(0.12).rgb().string();
}
if (isSelectedColor) {
return color(selectedColor).fade(0.5).rgb().string();
}
return selectedBackgroundColor;
};
export const getChipColors = ({
isOutlined,
theme,
selectedColor,
showSelectedOverlay,
customBackgroundColor,
disabled,
customRippleColor
}) => {
const baseChipColorProps = {
theme,
isOutlined,
disabled
};
const backgroundColor = getBackgroundColor({
...baseChipColorProps,
customBackgroundColor
});
const selectedBackgroundColor = getSelectedBackgroundColor({
...baseChipColorProps,
customBackgroundColor,
showSelectedOverlay
});
return {
borderColor: getBorderColor({
...baseChipColorProps,
selectedColor,
backgroundColor
}),
textColor: getTextColor({
...baseChipColorProps,
selectedColor
}),
iconColor: getIconColor({
...baseChipColorProps,
selectedColor
}),
rippleColor: getRippleColor({
...baseChipColorProps,
selectedColor,
selectedBackgroundColor,
customRippleColor
}),
backgroundColor,
selectedBackgroundColor
};
};
//# sourceMappingURL=helpers.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,95 @@
import * as React from 'react';
import { Animated, StyleSheet, View } from 'react-native';
import Icon, { isEqualIcon, isValidIcon } from './Icon';
import { useInternalTheme } from '../core/theming';
const CrossFadeIcon = ({
color,
size,
source,
theme: themeOverrides,
testID = 'cross-fade-icon'
}) => {
const theme = useInternalTheme(themeOverrides);
const [currentIcon, setCurrentIcon] = React.useState(() => source);
const [previousIcon, setPreviousIcon] = React.useState(null);
const {
current: fade
} = React.useRef(new Animated.Value(1));
const {
scale
} = theme.animation;
if (currentIcon !== source) {
setPreviousIcon(() => currentIcon);
setCurrentIcon(() => source);
}
React.useEffect(() => {
if (isValidIcon(previousIcon) && !isEqualIcon(previousIcon, currentIcon)) {
fade.setValue(1);
Animated.timing(fade, {
duration: scale * 200,
toValue: 0,
useNativeDriver: true
}).start();
}
}, [currentIcon, previousIcon, fade, scale]);
const opacityPrev = fade;
const opacityNext = previousIcon ? fade.interpolate({
inputRange: [0, 1],
outputRange: [1, 0]
}) : 1;
const rotatePrev = fade.interpolate({
inputRange: [0, 1],
outputRange: ['-90deg', '0deg']
});
const rotateNext = previousIcon ? fade.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '-180deg']
}) : '0deg';
return /*#__PURE__*/React.createElement(View, {
style: [styles.content, {
height: size,
width: size
}]
}, previousIcon ? /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.icon, {
opacity: opacityPrev,
transform: [{
rotate: rotatePrev
}]
}],
testID: `${testID}-previous`
}, /*#__PURE__*/React.createElement(Icon, {
source: previousIcon,
size: size,
color: color,
theme: theme
})) : null, /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.icon, {
opacity: opacityNext,
transform: [{
rotate: rotateNext
}]
}],
testID: `${testID}-current`
}, /*#__PURE__*/React.createElement(Icon, {
source: currentIcon,
size: size,
color: color,
theme: theme
})));
};
export default CrossFadeIcon;
const styles = StyleSheet.create({
content: {
alignItems: 'center',
justifyContent: 'center'
},
icon: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}
});
//# sourceMappingURL=CrossFadeIcon.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","Animated","StyleSheet","View","Icon","isEqualIcon","isValidIcon","useInternalTheme","CrossFadeIcon","color","size","source","theme","themeOverrides","testID","currentIcon","setCurrentIcon","useState","previousIcon","setPreviousIcon","current","fade","useRef","Value","scale","animation","useEffect","setValue","timing","duration","toValue","useNativeDriver","start","opacityPrev","opacityNext","interpolate","inputRange","outputRange","rotatePrev","rotateNext","createElement","style","styles","content","height","width","icon","opacity","transform","rotate","create","alignItems","justifyContent","position","top","left","right","bottom"],"sourceRoot":"../../../src","sources":["components/CrossFadeIcon.tsx"],"mappings":"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","ignoreList":[]}

View File

@@ -0,0 +1,127 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import DataTableCell from './DataTableCell';
import DataTableHeader
// eslint-disable-next-line @typescript-eslint/no-unused-vars
from './DataTableHeader';
import DataTablePagination
// eslint-disable-next-line @typescript-eslint/no-unused-vars
from './DataTablePagination';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import DataTableRow from './DataTableRow';
import DataTableTitle
// eslint-disable-next-line @typescript-eslint/no-unused-vars
from './DataTableTitle';
/**
* Data tables allow displaying sets of data.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { DataTable } from 'react-native-paper';
*
* const MyComponent = () => {
* const [page, setPage] = React.useState<number>(0);
* const [numberOfItemsPerPageList] = React.useState([2, 3, 4]);
* const [itemsPerPage, onItemsPerPageChange] = React.useState(
* numberOfItemsPerPageList[0]
* );
*
* const [items] = React.useState([
* {
* key: 1,
* name: 'Cupcake',
* calories: 356,
* fat: 16,
* },
* {
* key: 2,
* name: 'Eclair',
* calories: 262,
* fat: 16,
* },
* {
* key: 3,
* name: 'Frozen yogurt',
* calories: 159,
* fat: 6,
* },
* {
* key: 4,
* name: 'Gingerbread',
* calories: 305,
* fat: 3.7,
* },
* ]);
*
* const from = page * itemsPerPage;
* const to = Math.min((page + 1) * itemsPerPage, items.length);
*
* React.useEffect(() => {
* setPage(0);
* }, [itemsPerPage]);
*
* return (
* <DataTable>
* <DataTable.Header>
* <DataTable.Title>Dessert</DataTable.Title>
* <DataTable.Title numeric>Calories</DataTable.Title>
* <DataTable.Title numeric>Fat</DataTable.Title>
* </DataTable.Header>
*
* {items.slice(from, to).map((item) => (
* <DataTable.Row key={item.key}>
* <DataTable.Cell>{item.name}</DataTable.Cell>
* <DataTable.Cell numeric>{item.calories}</DataTable.Cell>
* <DataTable.Cell numeric>{item.fat}</DataTable.Cell>
* </DataTable.Row>
* ))}
*
* <DataTable.Pagination
* page={page}
* numberOfPages={Math.ceil(items.length / itemsPerPage)}
* onPageChange={(page) => setPage(page)}
* label={`${from + 1}-${to} of ${items.length}`}
* numberOfItemsPerPageList={numberOfItemsPerPageList}
* numberOfItemsPerPage={itemsPerPage}
* onItemsPerPageChange={onItemsPerPageChange}
* showFastPaginationControls
* selectPageDropdownLabel={'Rows per page'}
* />
* </DataTable>
* );
* };
*
* export default MyComponent;
* ```
*/
const DataTable = ({
children,
style,
...rest
}) => /*#__PURE__*/React.createElement(View, _extends({}, rest, {
style: [styles.container, style]
}), children);
// @component ./DataTableHeader.tsx
DataTable.Header = DataTableHeader;
// @component ./DataTableTitle.tsx
DataTable.Title = DataTableTitle;
// @component ./DataTableRow.tsx
DataTable.Row = DataTableRow;
// @component ./DataTableCell.tsx
DataTable.Cell = DataTableCell;
// @component ./DataTablePagination.tsx
DataTable.Pagination = DataTablePagination;
const styles = StyleSheet.create({
container: {
width: '100%'
}
});
export default DataTable;
//# sourceMappingURL=DataTable.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","DataTableCell","DataTableHeader","DataTablePagination","DataTableRow","DataTableTitle","DataTable","children","style","rest","createElement","_extends","styles","container","Header","Title","Row","Cell","Pagination","create","width"],"sourceRoot":"../../../../src","sources":["components/DataTable/DataTable.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAaC,IAAI,QAAmB,cAAc;AAErE,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC;AACL;AAAA,KAEK,mBAAmB;AAC1B,OAAOC;AACL;AAAA,KAEK,uBAAuB;AAC9B;AACA,OAAOC,YAAY,MAAyC,gBAAgB;AAC5E,OAAOC;AACL;AAAA,KAEK,kBAAkB;AAUzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,SAAS,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAY,CAAC,kBACpDX,KAAA,CAAAY,aAAA,CAACV,IAAI,EAAAW,QAAA,KAAKF,IAAI;EAAED,KAAK,EAAE,CAACI,MAAM,CAACC,SAAS,EAAEL,KAAK;AAAE,IAC9CD,QACG,CACP;;AAED;AACAD,SAAS,CAACQ,MAAM,GAAGZ,eAAe;;AAElC;AACAI,SAAS,CAACS,KAAK,GAAGV,cAAc;;AAEhC;AACAC,SAAS,CAACU,GAAG,GAAGZ,YAAY;;AAE5B;AACAE,SAAS,CAACW,IAAI,GAAGhB,aAAa;;AAE9B;AACAK,SAAS,CAACY,UAAU,GAAGf,mBAAmB;AAE1C,MAAMS,MAAM,GAAGb,UAAU,CAACoB,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,eAAed,SAAS","ignoreList":[]}

View File

@@ -0,0 +1,77 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet } from 'react-native';
import TouchableRipple from '../TouchableRipple/TouchableRipple';
import Text from '../Typography/Text';
/**
* A component to show a single cell inside of a table.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { DataTable } from 'react-native-paper';
*
* const MyComponent = () => (
* <DataTable.Row>
* <DataTable.Cell numeric>1</DataTable.Cell>
* <DataTable.Cell numeric>2</DataTable.Cell>
* <DataTable.Cell numeric>3</DataTable.Cell>
* <DataTable.Cell numeric>4</DataTable.Cell>
* </DataTable.Row>
* );
*
* export default MyComponent;
* ```
*
* If you want to support multiline text, please use View instead, as multiline text doesn't comply with
* MD Guidelines (https://github.com/callstack/react-native-paper/issues/2381).
*
* @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
*/
const DataTableCell = ({
children,
textStyle,
style,
numeric,
maxFontSizeMultiplier,
testID,
...rest
}) => {
return /*#__PURE__*/React.createElement(TouchableRipple, _extends({}, rest, {
testID: testID,
style: [styles.container, numeric && styles.right, style]
}), /*#__PURE__*/React.createElement(CellContent, {
textStyle: textStyle,
testID: testID,
maxFontSizeMultiplier: maxFontSizeMultiplier
}, children));
};
const CellContent = ({
children,
textStyle,
maxFontSizeMultiplier,
testID
}) => {
if (/*#__PURE__*/React.isValidElement(children)) {
return children;
}
return /*#__PURE__*/React.createElement(Text, {
style: textStyle,
numberOfLines: 1,
maxFontSizeMultiplier: maxFontSizeMultiplier,
testID: `${testID}-text-container`
}, children);
};
DataTableCell.displayName = 'DataTable.Cell';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center'
},
right: {
justifyContent: 'flex-end'
}
});
export default DataTableCell;
//# sourceMappingURL=DataTableCell.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","TouchableRipple","Text","DataTableCell","children","textStyle","style","numeric","maxFontSizeMultiplier","testID","rest","createElement","_extends","styles","container","right","CellContent","isValidElement","numberOfLines","displayName","create","flex","flexDirection","alignItems","justifyContent"],"sourceRoot":"../../../../src","sources":["components/DataTable/DataTableCell.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,UAAU,QAKL,cAAc;AAGrB,OAAOC,eAAe,MAAM,oCAAoC;AAChE,OAAOC,IAAI,MAAM,oBAAoB;AA8BrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAGA,CAAC;EACrBC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,OAAO;EACPC,qBAAqB;EACrBC,MAAM;EACN,GAAGC;AACE,CAAC,KAAK;EACX,oBACEX,KAAA,CAAAY,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVF,IAAI;IACRD,MAAM,EAAEA,MAAO;IACfH,KAAK,EAAE,CAACO,MAAM,CAACC,SAAS,EAAEP,OAAO,IAAIM,MAAM,CAACE,KAAK,EAAET,KAAK;EAAE,iBAE1DP,KAAA,CAAAY,aAAA,CAACK,WAAW;IACVX,SAAS,EAAEA,SAAU;IACrBI,MAAM,EAAEA,MAAO;IACfD,qBAAqB,EAAEA;EAAsB,GAE5CJ,QACU,CACE,CAAC;AAEtB,CAAC;AAED,MAAMY,WAAW,GAAGA,CAAC;EACnBZ,QAAQ;EACRC,SAAS;EACTG,qBAAqB;EACrBC;AAIF,CAAC,KAAK;EACJ,iBAAIV,KAAK,CAACkB,cAAc,CAACb,QAAQ,CAAC,EAAE;IAClC,OAAOA,QAAQ;EACjB;EAEA,oBACEL,KAAA,CAAAY,aAAA,CAACT,IAAI;IACHI,KAAK,EAAED,SAAU;IACjBa,aAAa,EAAE,CAAE;IACjBV,qBAAqB,EAAEA,qBAAsB;IAC7CC,MAAM,EAAE,GAAGA,MAAM;EAAkB,GAElCL,QACG,CAAC;AAEX,CAAC;AAEDD,aAAa,CAACgB,WAAW,GAAG,gBAAgB;AAE5C,MAAMN,MAAM,GAAGb,UAAU,CAACoB,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,IAAI,EAAE,CAAC;IACPC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE;EACd,CAAC;EAEDR,KAAK,EAAE;IACLS,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,eAAerB,aAAa","ignoreList":[]}

View File

@@ -0,0 +1,59 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import color from 'color';
import { useInternalTheme } from '../../core/theming';
import { black, white } from '../../styles/themes/v2/colors';
/**
* A component to display title in table header.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { DataTable } from 'react-native-paper';
*
* const MyComponent = () => (
* <DataTable>
* <DataTable.Header>
* <DataTable.Title
* sortDirection='descending'
* >
* Dessert
* </DataTable.Title>
* <DataTable.Title numeric>Calories</DataTable.Title>
* <DataTable.Title numeric>Fat (g)</DataTable.Title>
* </DataTable.Header>
* </DataTable>
* );
*
* export default MyComponent;
* ```
*/
const DataTableHeader = ({
children,
style,
theme: themeOverrides,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const borderBottomColor = theme.isV3 ? theme.colors.surfaceVariant : color(theme.dark ? white : black).alpha(0.12).rgb().string();
return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
style: [styles.header, {
borderBottomColor
}, style]
}), children);
};
DataTableHeader.displayName = 'DataTable.Header';
const styles = StyleSheet.create({
header: {
flexDirection: 'row',
paddingHorizontal: 16,
borderBottomWidth: StyleSheet.hairlineWidth * 2
}
});
export default DataTableHeader;
// @component-docs ignore-next-line
export { DataTableHeader };
//# sourceMappingURL=DataTableHeader.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","color","useInternalTheme","black","white","DataTableHeader","children","style","theme","themeOverrides","rest","borderBottomColor","isV3","colors","surfaceVariant","dark","alpha","rgb","string","createElement","_extends","styles","header","displayName","create","flexDirection","paddingHorizontal","borderBottomWidth","hairlineWidth"],"sourceRoot":"../../../../src","sources":["components/DataTable/DataTableHeader.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAoBC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAErE,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,KAAK,EAAEC,KAAK,QAAQ,+BAA+B;AAe5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMC,eAAe,GAAGA,CAAC;EACvBC,QAAQ;EACRC,KAAK;EACLC,KAAK,EAAEC,cAAc;EACrB,GAAGC;AACE,CAAC,KAAK;EACX,MAAMF,KAAK,GAAGN,gBAAgB,CAACO,cAAc,CAAC;EAC9C,MAAME,iBAAiB,GAAGH,KAAK,CAACI,IAAI,GAChCJ,KAAK,CAACK,MAAM,CAACC,cAAc,GAC3Bb,KAAK,CAACO,KAAK,CAACO,IAAI,GAAGX,KAAK,GAAGD,KAAK,CAAC,CAC9Ba,KAAK,CAAC,IAAI,CAAC,CACXC,GAAG,CAAC,CAAC,CACLC,MAAM,CAAC,CAAC;EAEf,oBACEpB,KAAA,CAAAqB,aAAA,CAACnB,IAAI,EAAAoB,QAAA,KAAKV,IAAI;IAAEH,KAAK,EAAE,CAACc,MAAM,CAACC,MAAM,EAAE;MAAEX;IAAkB,CAAC,EAAEJ,KAAK;EAAE,IAClED,QACG,CAAC;AAEX,CAAC;AAEDD,eAAe,CAACkB,WAAW,GAAG,kBAAkB;AAEhD,MAAMF,MAAM,GAAGtB,UAAU,CAACyB,MAAM,CAAC;EAC/BF,MAAM,EAAE;IACNG,aAAa,EAAE,KAAK;IACpBC,iBAAiB,EAAE,EAAE;IACrBC,iBAAiB,EAAE5B,UAAU,CAAC6B,aAAa,GAAG;EAChD;AACF,CAAC,CAAC;AAEF,eAAevB,eAAe;;AAE9B;AACA,SAASA,eAAe","ignoreList":[]}

View File

@@ -0,0 +1,271 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { I18nManager, StyleSheet, View } from 'react-native';
import color from 'color';
import { useInternalTheme } from '../../core/theming';
import Button from '../Button/Button';
import IconButton from '../IconButton/IconButton';
import MaterialCommunityIcon from '../MaterialCommunityIcon';
import Menu from '../Menu/Menu';
import Text from '../Typography/Text';
const PaginationControls = ({
page,
numberOfPages,
onPageChange,
showFastPaginationControls,
theme: themeOverrides,
paginationControlRippleColor
}) => {
const theme = useInternalTheme(themeOverrides);
const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
return /*#__PURE__*/React.createElement(React.Fragment, null, showFastPaginationControls ? /*#__PURE__*/React.createElement(IconButton, {
icon: ({
size,
color
}) => /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: "page-first",
color: color,
size: size,
direction: I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
}),
iconColor: textColor,
rippleColor: paginationControlRippleColor,
disabled: page === 0,
onPress: () => onPageChange(0),
accessibilityLabel: "page-first",
theme: theme
}) : null, /*#__PURE__*/React.createElement(IconButton, {
icon: ({
size,
color
}) => /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: "chevron-left",
color: color,
size: size,
direction: I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
}),
iconColor: textColor,
rippleColor: paginationControlRippleColor,
disabled: page === 0,
onPress: () => onPageChange(page - 1),
accessibilityLabel: "chevron-left",
theme: theme
}), /*#__PURE__*/React.createElement(IconButton, {
icon: ({
size,
color
}) => /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: "chevron-right",
color: color,
size: size,
direction: I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
}),
iconColor: textColor,
rippleColor: paginationControlRippleColor,
disabled: numberOfPages === 0 || page === numberOfPages - 1,
onPress: () => onPageChange(page + 1),
accessibilityLabel: "chevron-right",
theme: theme
}), showFastPaginationControls ? /*#__PURE__*/React.createElement(IconButton, {
icon: ({
size,
color
}) => /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: "page-last",
color: color,
size: size,
direction: I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
}),
iconColor: textColor,
rippleColor: paginationControlRippleColor,
disabled: numberOfPages === 0 || page === numberOfPages - 1,
onPress: () => onPageChange(numberOfPages - 1),
accessibilityLabel: "page-last",
theme: theme
}) : null);
};
const PaginationDropdown = ({
numberOfItemsPerPageList,
numberOfItemsPerPage,
onItemsPerPageChange,
theme: themeOverrides,
selectPageDropdownRippleColor,
dropdownItemRippleColor
}) => {
const theme = useInternalTheme(themeOverrides);
const {
colors
} = theme;
const [showSelect, toggleSelect] = React.useState(false);
return /*#__PURE__*/React.createElement(Menu, {
visible: showSelect,
onDismiss: () => toggleSelect(!showSelect),
theme: theme,
anchor: /*#__PURE__*/React.createElement(Button, {
mode: "outlined",
onPress: () => toggleSelect(true),
style: styles.button,
icon: "menu-down",
contentStyle: styles.contentStyle,
theme: theme,
rippleColor: selectPageDropdownRippleColor
}, `${numberOfItemsPerPage}`)
}, numberOfItemsPerPageList === null || numberOfItemsPerPageList === void 0 ? void 0 : numberOfItemsPerPageList.map(option => /*#__PURE__*/React.createElement(Menu.Item, {
key: option,
titleStyle: option === numberOfItemsPerPage && {
color: colors === null || colors === void 0 ? void 0 : colors.primary
},
onPress: () => {
onItemsPerPageChange === null || onItemsPerPageChange === void 0 || onItemsPerPageChange(option);
toggleSelect(false);
},
rippleColor: dropdownItemRippleColor,
title: option,
theme: theme
})));
};
/**
* A component to show pagination for data table.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { DataTable } from 'react-native-paper';
*
* const numberOfItemsPerPageList = [2, 3, 4];
*
* const items = [
* {
* key: 1,
* name: 'Page 1',
* },
* {
* key: 2,
* name: 'Page 2',
* },
* {
* key: 3,
* name: 'Page 3',
* },
* ];
*
* const MyComponent = () => {
* const [page, setPage] = React.useState(0);
* const [numberOfItemsPerPage, onItemsPerPageChange] = React.useState(numberOfItemsPerPageList[0]);
* const from = page * numberOfItemsPerPage;
* const to = Math.min((page + 1) * numberOfItemsPerPage, items.length);
*
* React.useEffect(() => {
* setPage(0);
* }, [numberOfItemsPerPage]);
*
* return (
* <DataTable>
* <DataTable.Pagination
* page={page}
* numberOfPages={Math.ceil(items.length / numberOfItemsPerPage)}
* onPageChange={page => setPage(page)}
* label={`${from + 1}-${to} of ${items.length}`}
* showFastPaginationControls
* numberOfItemsPerPageList={numberOfItemsPerPageList}
* numberOfItemsPerPage={numberOfItemsPerPage}
* onItemsPerPageChange={onItemsPerPageChange}
* selectPageDropdownLabel={'Rows per page'}
* />
* </DataTable>
* );
* };
*
* export default MyComponent;
* ```
*/
const DataTablePagination = ({
label,
accessibilityLabel,
page,
numberOfPages,
onPageChange,
style,
showFastPaginationControls = false,
numberOfItemsPerPageList,
numberOfItemsPerPage,
onItemsPerPageChange,
selectPageDropdownLabel,
selectPageDropdownAccessibilityLabel,
selectPageDropdownRippleColor,
dropdownItemRippleColor,
theme: themeOverrides,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const labelColor = color(theme.isV3 ? theme.colors.onSurface : theme === null || theme === void 0 ? void 0 : theme.colors.text).alpha(0.6).rgb().string();
return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
style: [styles.container, style],
accessibilityLabel: "pagination-container"
}), numberOfItemsPerPageList && numberOfItemsPerPage && onItemsPerPageChange && /*#__PURE__*/React.createElement(View, {
accessibilityLabel: "Options Select",
style: styles.optionsContainer
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.label, {
color: labelColor
}],
numberOfLines: 3,
accessibilityLabel: selectPageDropdownAccessibilityLabel || 'selectPageDropdownLabel'
}, selectPageDropdownLabel), /*#__PURE__*/React.createElement(PaginationDropdown, {
numberOfItemsPerPageList: numberOfItemsPerPageList,
numberOfItemsPerPage: numberOfItemsPerPage,
onItemsPerPageChange: onItemsPerPageChange,
selectPageDropdownRippleColor: selectPageDropdownRippleColor,
dropdownItemRippleColor: dropdownItemRippleColor,
theme: theme
})), /*#__PURE__*/React.createElement(Text, {
style: [styles.label, {
color: labelColor
}],
numberOfLines: 3,
accessibilityLabel: accessibilityLabel || 'label'
}, label), /*#__PURE__*/React.createElement(View, {
style: styles.iconsContainer
}, /*#__PURE__*/React.createElement(PaginationControls, {
showFastPaginationControls: showFastPaginationControls,
onPageChange: onPageChange,
page: page,
numberOfPages: numberOfPages,
theme: theme
})));
};
DataTablePagination.displayName = 'DataTable.Pagination';
const styles = StyleSheet.create({
container: {
justifyContent: 'flex-end',
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 16,
flexWrap: 'wrap'
},
optionsContainer: {
flexDirection: 'row',
alignItems: 'center',
marginVertical: 6
},
label: {
fontSize: 12,
marginRight: 16
},
button: {
textAlign: 'center',
marginRight: 16
},
iconsContainer: {
flexDirection: 'row'
},
contentStyle: {
flexDirection: 'row-reverse'
}
});
export default DataTablePagination;
// @component-docs ignore-next-line
export { DataTablePagination };
//# sourceMappingURL=DataTablePagination.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,67 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import color from 'color';
import { useInternalTheme } from '../../core/theming';
import { black, white } from '../../styles/themes/v2/colors';
import TouchableRipple from '../TouchableRipple/TouchableRipple';
/**
* A component to show a single row inside of a table.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { DataTable } from 'react-native-paper';
*
* const MyComponent = () => (
* <DataTable.Row>
* <DataTable.Cell numeric>1</DataTable.Cell>
* <DataTable.Cell numeric>2</DataTable.Cell>
* <DataTable.Cell numeric>3</DataTable.Cell>
* <DataTable.Cell numeric>4</DataTable.Cell>
* </DataTable.Row>
* );
*
* export default MyComponent;
* ```
*
* @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
*/
const DataTableRow = ({
onPress,
style,
children,
pointerEvents,
theme: themeOverrides,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const borderBottomColor = theme.isV3 ? theme.colors.surfaceVariant : color(theme.dark ? white : black).alpha(0.12).rgb().string();
return /*#__PURE__*/React.createElement(TouchableRipple, _extends({}, rest, {
onPress: onPress,
style: [styles.container, {
borderBottomColor
}, style]
}), /*#__PURE__*/React.createElement(View, {
style: styles.content,
pointerEvents: pointerEvents
}, children));
};
DataTableRow.displayName = 'DataTable.Row';
const styles = StyleSheet.create({
container: {
borderStyle: 'solid',
borderBottomWidth: StyleSheet.hairlineWidth,
minHeight: 48,
paddingHorizontal: 16
},
content: {
flex: 1,
flexDirection: 'row'
}
});
export default DataTableRow;
// @component-docs ignore-next-line
export { DataTableRow };
//# sourceMappingURL=DataTableRow.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","color","useInternalTheme","black","white","TouchableRipple","DataTableRow","onPress","style","children","pointerEvents","theme","themeOverrides","rest","borderBottomColor","isV3","colors","surfaceVariant","dark","alpha","rgb","string","createElement","_extends","styles","container","content","displayName","create","borderStyle","borderBottomWidth","hairlineWidth","minHeight","paddingHorizontal","flex","flexDirection"],"sourceRoot":"../../../../src","sources":["components/DataTable/DataTableRow.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAGEC,UAAU,EACVC,IAAI,QAGC,cAAc;AAErB,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,KAAK,EAAEC,KAAK,QAAQ,+BAA+B;AAE5D,OAAOC,eAAe,MAAM,oCAAoC;AAsBhE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAAY,GAAGA,CAAC;EACpBC,OAAO;EACPC,KAAK;EACLC,QAAQ;EACRC,aAAa;EACbC,KAAK,EAAEC,cAAc;EACrB,GAAGC;AACE,CAAC,KAAK;EACX,MAAMF,KAAK,GAAGT,gBAAgB,CAACU,cAAc,CAAC;EAC9C,MAAME,iBAAiB,GAAGH,KAAK,CAACI,IAAI,GAChCJ,KAAK,CAACK,MAAM,CAACC,cAAc,GAC3BhB,KAAK,CAACU,KAAK,CAACO,IAAI,GAAGd,KAAK,GAAGD,KAAK,CAAC,CAC9BgB,KAAK,CAAC,IAAI,CAAC,CACXC,GAAG,CAAC,CAAC,CACLC,MAAM,CAAC,CAAC;EAEf,oBACEvB,KAAA,CAAAwB,aAAA,CAACjB,eAAe,EAAAkB,QAAA,KACVV,IAAI;IACRN,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAE,CAACgB,MAAM,CAACC,SAAS,EAAE;MAAEX;IAAkB,CAAC,EAAEN,KAAK;EAAE,iBAExDV,KAAA,CAAAwB,aAAA,CAACtB,IAAI;IAACQ,KAAK,EAAEgB,MAAM,CAACE,OAAQ;IAAChB,aAAa,EAAEA;EAAc,GACvDD,QACG,CACS,CAAC;AAEtB,CAAC;AAEDH,YAAY,CAACqB,WAAW,GAAG,eAAe;AAE1C,MAAMH,MAAM,GAAGzB,UAAU,CAAC6B,MAAM,CAAC;EAC/BH,SAAS,EAAE;IACTI,WAAW,EAAE,OAAO;IACpBC,iBAAiB,EAAE/B,UAAU,CAACgC,aAAa;IAC3CC,SAAS,EAAE,EAAE;IACbC,iBAAiB,EAAE;EACrB,CAAC;EACDP,OAAO,EAAE;IACPQ,IAAI,EAAE,CAAC;IACPC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;AAEF,eAAe7B,YAAY;;AAE3B;AACA,SAASA,YAAY","ignoreList":[]}

View File

@@ -0,0 +1,133 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Animated, I18nManager, PixelRatio, Pressable, StyleSheet } from 'react-native';
import color from 'color';
import { useInternalTheme } from '../../core/theming';
import MaterialCommunityIcon from '../MaterialCommunityIcon';
import Text from '../Typography/Text';
/**
* A component to display title in table header.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { DataTable } from 'react-native-paper';
*
* const MyComponent = () => (
* <DataTable>
* <DataTable.Header>
* <DataTable.Title
* sortDirection='descending'
* >
* Dessert
* </DataTable.Title>
* <DataTable.Title numeric>Calories</DataTable.Title>
* <DataTable.Title numeric>Fat (g)</DataTable.Title>
* </DataTable.Header>
* </DataTable>
* );
*
* export default MyComponent;
* ```
*/
const DataTableTitle = ({
numeric,
children,
onPress,
sortDirection,
textStyle,
style,
theme: themeOverrides,
numberOfLines = 1,
maxFontSizeMultiplier,
...rest
}) => {
var _theme$colors;
const theme = useInternalTheme(themeOverrides);
const {
current: spinAnim
} = React.useRef(new Animated.Value(sortDirection === 'ascending' ? 0 : 1));
React.useEffect(() => {
Animated.timing(spinAnim, {
toValue: sortDirection === 'ascending' ? 0 : 1,
duration: 150,
useNativeDriver: true
}).start();
}, [sortDirection, spinAnim]);
const textColor = theme.isV3 ? theme.colors.onSurface : theme === null || theme === void 0 || (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.text;
const alphaTextColor = color(textColor).alpha(0.6).rgb().string();
const spin = spinAnim.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '180deg']
});
const icon = sortDirection ? /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.icon, {
transform: [{
rotate: spin
}]
}]
}, /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: "arrow-up",
size: 16,
color: textColor,
direction: I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
})) : null;
return /*#__PURE__*/React.createElement(Pressable, _extends({
disabled: !onPress,
onPress: onPress
}, rest, {
style: [styles.container, numeric && styles.right, style]
}), icon, /*#__PURE__*/React.createElement(Text, {
style: [styles.cell,
// height must scale with numberOfLines
{
maxHeight: 24 * PixelRatio.getFontScale() * numberOfLines
},
// if numberOfLines causes wrap, center is lost. Align directly, sensitive to numeric and RTL
numberOfLines > 1 ? numeric ? I18nManager.getConstants().isRTL ? styles.leftText : styles.rightText : styles.centerText : {}, sortDirection ? styles.sorted : {
color: alphaTextColor
}, textStyle],
numberOfLines: numberOfLines,
maxFontSizeMultiplier: maxFontSizeMultiplier
}, children));
};
DataTableTitle.displayName = 'DataTable.Title';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignContent: 'center',
paddingVertical: 12
},
rightText: {
textAlign: 'right'
},
leftText: {
textAlign: 'left'
},
centerText: {
textAlign: 'center'
},
right: {
justifyContent: 'flex-end'
},
cell: {
lineHeight: 24,
fontSize: 12,
fontWeight: '500',
alignItems: 'center'
},
sorted: {
marginLeft: 8
},
icon: {
height: 24,
justifyContent: 'center'
}
});
export default DataTableTitle;
// @component-docs ignore-next-line
export { DataTableTitle };
//# sourceMappingURL=DataTableTitle.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","Animated","I18nManager","PixelRatio","Pressable","StyleSheet","color","useInternalTheme","MaterialCommunityIcon","Text","DataTableTitle","numeric","children","onPress","sortDirection","textStyle","style","theme","themeOverrides","numberOfLines","maxFontSizeMultiplier","rest","_theme$colors","current","spinAnim","useRef","Value","useEffect","timing","toValue","duration","useNativeDriver","start","textColor","isV3","colors","onSurface","text","alphaTextColor","alpha","rgb","string","spin","interpolate","inputRange","outputRange","icon","createElement","View","styles","transform","rotate","name","size","direction","getConstants","isRTL","_extends","disabled","container","right","cell","maxHeight","getFontScale","leftText","rightText","centerText","sorted","displayName","create","flex","flexDirection","alignContent","paddingVertical","textAlign","justifyContent","lineHeight","fontSize","fontWeight","alignItems","marginLeft","height"],"sourceRoot":"../../../../src","sources":["components/DataTable/DataTableTitle.tsx"],"mappings":"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","ignoreList":[]}

View File

@@ -0,0 +1,138 @@
import * as React from 'react';
import { Platform, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import DialogActions from './DialogActions';
import DialogContent from './DialogContent';
import DialogIcon from './DialogIcon';
import DialogScrollArea from './DialogScrollArea';
import DialogTitle from './DialogTitle';
import { useInternalTheme } from '../../core/theming';
import overlay from '../../styles/overlay';
import Modal from '../Modal';
const DIALOG_ELEVATION = 24;
/**
* Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
* To render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../../Portal) component.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { View } from 'react-native';
* import { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';
*
* const MyComponent = () => {
* const [visible, setVisible] = React.useState(false);
*
* const showDialog = () => setVisible(true);
*
* const hideDialog = () => setVisible(false);
*
* return (
* <PaperProvider>
* <View>
* <Button onPress={showDialog}>Show Dialog</Button>
* <Portal>
* <Dialog visible={visible} onDismiss={hideDialog}>
* <Dialog.Title>Alert</Dialog.Title>
* <Dialog.Content>
* <Text variant="bodyMedium">This is simple dialog</Text>
* </Dialog.Content>
* <Dialog.Actions>
* <Button onPress={hideDialog}>Done</Button>
* </Dialog.Actions>
* </Dialog>
* </Portal>
* </View>
* </PaperProvider>
* );
* };
*
* export default MyComponent;
* ```
*/
const Dialog = ({
children,
dismissable = true,
dismissableBackButton = dismissable,
onDismiss,
visible = false,
style,
theme: themeOverrides,
testID
}) => {
const {
right,
left
} = useSafeAreaInsets();
const theme = useInternalTheme(themeOverrides);
const {
isV3,
dark,
mode,
colors,
roundness
} = theme;
const borderRadius = (isV3 ? 7 : 1) * roundness;
const backgroundColorV2 = dark && mode === 'adaptive' ? overlay(DIALOG_ELEVATION, colors === null || colors === void 0 ? void 0 : colors.surface) : colors === null || colors === void 0 ? void 0 : colors.surface;
const backgroundColor = isV3 ? theme.colors.elevation.level3 : backgroundColorV2;
return /*#__PURE__*/React.createElement(Modal, {
dismissable: dismissable,
dismissableBackButton: dismissableBackButton,
onDismiss: onDismiss,
visible: visible,
contentContainerStyle: [{
borderRadius,
backgroundColor,
marginHorizontal: Math.max(left, right, 26)
}, styles.container, style],
theme: theme,
testID: testID
}, React.Children.toArray(children).filter(child => child != null && typeof child !== 'boolean').map((child, i) => {
if (isV3) {
if (i === 0 && /*#__PURE__*/React.isValidElement(child)) {
return /*#__PURE__*/React.cloneElement(child, {
style: [{
marginTop: 24
}, child.props.style]
});
}
}
if (i === 0 && /*#__PURE__*/React.isValidElement(child) && child.type === DialogContent) {
// Dialog content is the first item, so we add a top padding
return /*#__PURE__*/React.cloneElement(child, {
style: [{
paddingTop: 24
}, child.props.style]
});
}
return child;
}));
};
// @component ./DialogContent.tsx
Dialog.Content = DialogContent;
// @component ./DialogActions.tsx
Dialog.Actions = DialogActions;
// @component ./DialogTitle.tsx
Dialog.Title = DialogTitle;
// @component ./DialogScrollArea.tsx
Dialog.ScrollArea = DialogScrollArea;
// @component ./DialogIcon.tsx
Dialog.Icon = DialogIcon;
const styles = StyleSheet.create({
container: {
/**
* This prevents the shadow from being clipped on Android since Android
* doesn't support `overflow: visible`.
* One downside for this fix is that it will disable clicks on the area
* of the shadow around the dialog, consequently, if you click around the
* dialog (44 pixel from the top and bottom) it won't be dismissed.
*/
marginVertical: Platform.OS === 'android' ? 44 : 0,
elevation: DIALOG_ELEVATION,
justifyContent: 'flex-start'
}
});
export default Dialog;
//# sourceMappingURL=Dialog.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","Platform","StyleSheet","useSafeAreaInsets","DialogActions","DialogContent","DialogIcon","DialogScrollArea","DialogTitle","useInternalTheme","overlay","Modal","DIALOG_ELEVATION","Dialog","children","dismissable","dismissableBackButton","onDismiss","visible","style","theme","themeOverrides","testID","right","left","isV3","dark","mode","colors","roundness","borderRadius","backgroundColorV2","surface","backgroundColor","elevation","level3","createElement","contentContainerStyle","marginHorizontal","Math","max","styles","container","Children","toArray","filter","child","map","i","isValidElement","cloneElement","marginTop","props","type","paddingTop","Content","Actions","Title","ScrollArea","Icon","create","marginVertical","OS","justifyContent"],"sourceRoot":"../../../../src","sources":["components/Dialog/Dialog.tsx"],"mappings":"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","ignoreList":[]}

View File

@@ -0,0 +1,66 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { useInternalTheme } from '../../core/theming';
/**
* A component to show a list of actions in a Dialog.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Button, Dialog, Portal } from 'react-native-paper';
*
* const MyComponent = () => {
* const [visible, setVisible] = React.useState(false);
*
* const hideDialog = () => setVisible(false);
*
* return (
* <Portal>
* <Dialog visible={visible} onDismiss={hideDialog}>
* <Dialog.Actions>
* <Button onPress={() => console.log('Cancel')}>Cancel</Button>
* <Button onPress={() => console.log('Ok')}>Ok</Button>
* </Dialog.Actions>
* </Dialog>
* </Portal>
* );
* };
*
* export default MyComponent;
* ```
*/
const DialogActions = props => {
const {
isV3
} = useInternalTheme(props.theme);
const actionsLength = React.Children.toArray(props.children).length;
return /*#__PURE__*/React.createElement(View, _extends({}, props, {
style: [isV3 ? styles.v3Container : styles.container, props.style]
}), React.Children.map(props.children, (child, i) => /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
compact: true,
uppercase: !isV3,
style: [isV3 && {
marginRight: i + 1 === actionsLength ? 0 : 8
}, child.props.style]
}) : child));
};
DialogActions.displayName = 'Dialog.Actions';
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
padding: 8
},
v3Container: {
flexDirection: 'row',
flexGrow: 1,
alignItems: 'center',
justifyContent: 'flex-end',
paddingBottom: 24,
paddingHorizontal: 24
}
});
export default DialogActions;
//# sourceMappingURL=DialogActions.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","useInternalTheme","DialogActions","props","isV3","theme","actionsLength","Children","toArray","children","length","createElement","_extends","style","styles","v3Container","container","map","child","i","isValidElement","cloneElement","compact","uppercase","marginRight","displayName","create","flexDirection","alignItems","justifyContent","padding","flexGrow","paddingBottom","paddingHorizontal"],"sourceRoot":"../../../../src","sources":["components/Dialog/DialogActions.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAoBC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAKrE,SAASC,gBAAgB,QAAQ,oBAAoB;AAcrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAIC,KAAY,IAAK;EACtC,MAAM;IAAEC;EAAK,CAAC,GAAGH,gBAAgB,CAACE,KAAK,CAACE,KAAK,CAAC;EAC9C,MAAMC,aAAa,GAAGR,KAAK,CAACS,QAAQ,CAACC,OAAO,CAACL,KAAK,CAACM,QAAQ,CAAC,CAACC,MAAM;EAEnE,oBACEZ,KAAA,CAAAa,aAAA,CAACX,IAAI,EAAAY,QAAA,KACCT,KAAK;IACTU,KAAK,EAAE,CAACT,IAAI,GAAGU,MAAM,CAACC,WAAW,GAAGD,MAAM,CAACE,SAAS,EAAEb,KAAK,CAACU,KAAK;EAAE,IAElEf,KAAK,CAACS,QAAQ,CAACU,GAAG,CAACd,KAAK,CAACM,QAAQ,EAAE,CAACS,KAAK,EAAEC,CAAC,KAC3C,aAAArB,KAAK,CAACsB,cAAc,CAAyBF,KAAK,CAAC,gBAC/CpB,KAAK,CAACuB,YAAY,CAACH,KAAK,EAAE;IACxBI,OAAO,EAAE,IAAI;IACbC,SAAS,EAAE,CAACnB,IAAI;IAChBS,KAAK,EAAE,CACLT,IAAI,IAAI;MACNoB,WAAW,EAAEL,CAAC,GAAG,CAAC,KAAKb,aAAa,GAAG,CAAC,GAAG;IAC7C,CAAC,EACDY,KAAK,CAACf,KAAK,CAACU,KAAK;EAErB,CAAC,CAAC,GACFK,KACN,CACI,CAAC;AAEX,CAAC;AAEDhB,aAAa,CAACuB,WAAW,GAAG,gBAAgB;AAE5C,MAAMX,MAAM,GAAGf,UAAU,CAAC2B,MAAM,CAAC;EAC/BV,SAAS,EAAE;IACTW,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,UAAU;IAC1BC,OAAO,EAAE;EACX,CAAC;EACDf,WAAW,EAAE;IACXY,aAAa,EAAE,KAAK;IACpBI,QAAQ,EAAE,CAAC;IACXH,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,UAAU;IAC1BG,aAAa,EAAE,EAAE;IACjBC,iBAAiB,EAAE;EACrB;AACF,CAAC,CAAC;AAEF,eAAe/B,aAAa","ignoreList":[]}

View File

@@ -0,0 +1,42 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
/**
* A component to show content in a Dialog.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Dialog, Portal, Text } from 'react-native-paper';
*
* const MyComponent = () => {
* const [visible, setVisible] = React.useState(false);
*
* const hideDialog = () => setVisible(false);
*
* return (
* <Portal>
* <Dialog visible={visible} onDismiss={hideDialog}>
* <Dialog.Content>
* <Text variant="bodyMedium">This is simple dialog</Text>
* </Dialog.Content>
* </Dialog>
* </Portal>
* );
* };
*
* export default MyComponent;
* ```
*/
const DialogContent = props => /*#__PURE__*/React.createElement(View, _extends({}, props, {
style: [styles.container, props.style]
}), props.children);
DialogContent.displayName = 'Dialog.Content';
const styles = StyleSheet.create({
container: {
paddingBottom: 24,
paddingHorizontal: 24
}
});
export default DialogContent;
//# sourceMappingURL=DialogContent.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","View","StyleSheet","DialogContent","props","createElement","_extends","style","styles","container","children","displayName","create","paddingBottom","paddingHorizontal"],"sourceRoot":"../../../../src","sources":["components/Dialog/DialogContent.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,EAAaC,UAAU,QAAmB,cAAc;AAUrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAIC,KAAY,iBACjCJ,KAAA,CAAAK,aAAA,CAACJ,IAAI,EAAAK,QAAA,KAAKF,KAAK;EAAEG,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEL,KAAK,CAACG,KAAK;AAAE,IACrDH,KAAK,CAACM,QACH,CACP;AAEDP,aAAa,CAACQ,WAAW,GAAG,gBAAgB;AAE5C,MAAMH,MAAM,GAAGN,UAAU,CAACU,MAAM,CAAC;EAC/BH,SAAS,EAAE;IACTI,aAAa,EAAE,EAAE;IACjBC,iBAAiB,EAAE;EACrB;AACF,CAAC,CAAC;AAEF,eAAeX,aAAa","ignoreList":[]}

View File

@@ -0,0 +1,75 @@
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { useInternalTheme } from '../../core/theming';
import Icon from '../Icon';
/**
* @supported Available in v5.x with theme version 3
* A component to show an icon in a Dialog.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { StyleSheet } from 'react-native';
* import { Dialog, Portal, Text } from 'react-native-paper';
*
* const MyComponent = () => {
* const [visible, setVisible] = React.useState(false);
*
* const hideDialog = () => setVisible(false);
*
* return (
* <Portal>
* <Dialog visible={visible} onDismiss={hideDialog}>
* <Dialog.Icon icon="alert" />
* <Dialog.Title style={styles.title}>This is a title</Dialog.Title>
* <Dialog.Content>
* <Text variant="bodyMedium">This is simple dialog</Text>
* </Dialog.Content>
* </Dialog>
* </Portal>
* );
* };
*
* const styles = StyleSheet.create({
* title: {
* textAlign: 'center',
* },
* })
*
* export default MyComponent;
* ```
*/
const DialogIcon = ({
size = 24,
color,
icon,
theme: themeOverrides
}) => {
const theme = useInternalTheme(themeOverrides);
if (!theme.isV3) {
return null;
}
//@ts-ignore
const iconColor = color || theme.colors.secondary;
return /*#__PURE__*/React.createElement(View, {
style: styles.wrapper
}, /*#__PURE__*/React.createElement(Icon, {
source: icon,
color: iconColor,
size: size
}));
};
DialogIcon.displayName = 'Dialog.Icon';
const styles = StyleSheet.create({
wrapper: {
alignItems: 'center',
justifyContent: 'center',
paddingTop: 24
}
});
export default DialogIcon;
// @component-docs ignore-next-line
export { DialogIcon };
//# sourceMappingURL=DialogIcon.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","useInternalTheme","Icon","DialogIcon","size","color","icon","theme","themeOverrides","isV3","iconColor","colors","secondary","createElement","style","styles","wrapper","source","displayName","create","alignItems","justifyContent","paddingTop"],"sourceRoot":"../../../../src","sources":["components/Dialog/DialogIcon.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAI/C,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,OAAOC,IAAI,MAAsB,SAAS;AAqB1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAGA,CAAC;EAClBC,IAAI,GAAG,EAAE;EACTC,KAAK;EACLC,IAAI;EACJC,KAAK,EAAEC;AACF,CAAC,KAAK;EACX,MAAMD,KAAK,GAAGN,gBAAgB,CAACO,cAAc,CAAC;EAE9C,IAAI,CAACD,KAAK,CAACE,IAAI,EAAE;IACf,OAAO,IAAI;EACb;;EAEA;EACA,MAAMC,SAAS,GAAGL,KAAK,IAAIE,KAAK,CAACI,MAAM,CAACC,SAAS;EAEjD,oBACEd,KAAA,CAAAe,aAAA,CAACb,IAAI;IAACc,KAAK,EAAEC,MAAM,CAACC;EAAQ,gBAC1BlB,KAAA,CAAAe,aAAA,CAACX,IAAI;IAACe,MAAM,EAAEX,IAAK;IAACD,KAAK,EAAEK,SAAU;IAACN,IAAI,EAAEA;EAAK,CAAE,CAC/C,CAAC;AAEX,CAAC;AAEDD,UAAU,CAACe,WAAW,GAAG,aAAa;AAEtC,MAAMH,MAAM,GAAGhB,UAAU,CAACoB,MAAM,CAAC;EAC/BH,OAAO,EAAE;IACPI,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,eAAenB,UAAU;;AAEzB;AACA,SAASA,UAAU","ignoreList":[]}

View File

@@ -0,0 +1,59 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { useInternalTheme } from '../../core/theming';
/**
* A component to show a scrollable content in a Dialog. The component only provides appropriate styling.
* For the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { ScrollView } from 'react-native';
* import { Dialog, Portal, Text } from 'react-native-paper';
*
* const MyComponent = () => {
* const [visible, setVisible] = React.useState(false);
*
* const hideDialog = () => setVisible(false);
*
* return (
* <Portal>
* <Dialog visible={visible} onDismiss={hideDialog}>
* <Dialog.ScrollArea>
* <ScrollView contentContainerStyle={{paddingHorizontal: 24}}>
* <Text>This is a scrollable area</Text>
* </ScrollView>
* </Dialog.ScrollArea>
* </Dialog>
* </Portal>
* );
* };
*
* export default MyComponent;
* ```
*/
const DialogScrollArea = props => {
const theme = useInternalTheme(props.theme);
const borderStyles = {
borderColor: theme.isV3 ? theme.colors.surfaceVariant : 'rgba(0, 0, 0, .12)',
borderTopWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth,
borderBottomWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth
};
return /*#__PURE__*/React.createElement(View, _extends({}, props, {
style: [styles.container, borderStyles, theme.isV3 && styles.v3Container, props.style]
}), props.children);
};
DialogScrollArea.displayName = 'Dialog.ScrollArea';
const styles = StyleSheet.create({
container: {
paddingHorizontal: 24,
flexGrow: 1,
flexShrink: 1
},
v3Container: {
marginBottom: 24
}
});
export default DialogScrollArea;
//# sourceMappingURL=DialogScrollArea.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","useInternalTheme","DialogScrollArea","props","theme","borderStyles","borderColor","isV3","colors","surfaceVariant","borderTopWidth","hairlineWidth","borderBottomWidth","createElement","_extends","style","styles","container","v3Container","children","displayName","create","paddingHorizontal","flexGrow","flexShrink","marginBottom"],"sourceRoot":"../../../../src","sources":["components/Dialog/DialogScrollArea.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAoBC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAIrE,SAASC,gBAAgB,QAAQ,oBAAoB;AAcrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAIC,KAAY,IAAK;EACzC,MAAMC,KAAK,GAAGH,gBAAgB,CAACE,KAAK,CAACC,KAAK,CAAC;EAC3C,MAAMC,YAAY,GAAG;IACnBC,WAAW,EAAEF,KAAK,CAACG,IAAI,GACnBH,KAAK,CAACI,MAAM,CAACC,cAAc,GAC3B,oBAAoB;IACxBC,cAAc,EAAEN,KAAK,CAACG,IAAI,GAAG,CAAC,GAAGR,UAAU,CAACY,aAAa;IACzDC,iBAAiB,EAAER,KAAK,CAACG,IAAI,GAAG,CAAC,GAAGR,UAAU,CAACY;EACjD,CAAC;EACD,oBACEb,KAAA,CAAAe,aAAA,CAACb,IAAI,EAAAc,QAAA,KACCX,KAAK;IACTY,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChBZ,YAAY,EACZD,KAAK,CAACG,IAAI,IAAIS,MAAM,CAACE,WAAW,EAChCf,KAAK,CAACY,KAAK;EACX,IAEDZ,KAAK,CAACgB,QACH,CAAC;AAEX,CAAC;AAEDjB,gBAAgB,CAACkB,WAAW,GAAG,mBAAmB;AAElD,MAAMJ,MAAM,GAAGjB,UAAU,CAACsB,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACTK,iBAAiB,EAAE,EAAE;IACrBC,QAAQ,EAAE,CAAC;IACXC,UAAU,EAAE;EACd,CAAC;EACDN,WAAW,EAAE;IACXO,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAevB,gBAAgB","ignoreList":[]}

View File

@@ -0,0 +1,74 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { useInternalTheme } from '../../core/theming';
import Text from '../Typography/Text';
import Title from '../Typography/v2/Title';
/**
* A component to show a title in a Dialog.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Dialog, Portal, Text } from 'react-native-paper';
*
* const MyComponent = () => {
* const [visible, setVisible] = React.useState(false);
*
* const hideDialog = () => setVisible(false);
*
* return (
* <Portal>
* <Dialog visible={visible} onDismiss={hideDialog}>
* <Dialog.Title>This is a title</Dialog.Title>
* <Dialog.Content>
* <Text variant="bodyMedium">This is simple dialog</Text>
* </Dialog.Content>
* </Dialog>
* </Portal>
* );
* };
*
* export default MyComponent;
* ```
*/
const DialogTitle = ({
children,
theme: themeOverrides,
style,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const {
isV3,
colors,
fonts
} = theme;
const TextComponent = isV3 ? Text : Title;
const headerTextStyle = {
color: isV3 ? colors.onSurface : colors === null || colors === void 0 ? void 0 : colors.text,
...(isV3 ? fonts.headlineSmall : {})
};
return /*#__PURE__*/React.createElement(TextComponent, _extends({
variant: "headlineSmall",
accessibilityRole: "header",
style: [styles.text, isV3 && styles.v3Text, headerTextStyle, style]
}, rest), children);
};
DialogTitle.displayName = 'Dialog.Title';
const styles = StyleSheet.create({
text: {
marginTop: 22,
marginBottom: 18,
marginHorizontal: 24
},
v3Text: {
marginTop: 16,
marginBottom: 16
}
});
export default DialogTitle;
// @component-docs ignore-next-line
export { DialogTitle };
//# sourceMappingURL=DialogTitle.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","useInternalTheme","Text","Title","DialogTitle","children","theme","themeOverrides","style","rest","isV3","colors","fonts","TextComponent","headerTextStyle","color","onSurface","text","headlineSmall","createElement","_extends","variant","accessibilityRole","styles","v3Text","displayName","create","marginTop","marginBottom","marginHorizontal"],"sourceRoot":"../../../../src","sources":["components/Dialog/DialogTitle.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAoBC,UAAU,QAAmB,cAAc;AAE/D,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,OAAOC,IAAI,MAAM,oBAAoB;AACrC,OAAOC,KAAK,MAAM,wBAAwB;AAc1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAGA,CAAC;EACnBC,QAAQ;EACRC,KAAK,EAAEC,cAAc;EACrBC,KAAK;EACL,GAAGC;AACE,CAAC,KAAK;EACX,MAAMH,KAAK,GAAGL,gBAAgB,CAACM,cAAc,CAAC;EAC9C,MAAM;IAAEG,IAAI;IAAEC,MAAM;IAAEC;EAAM,CAAC,GAAGN,KAAK;EAErC,MAAMO,aAAa,GAAGH,IAAI,GAAGR,IAAI,GAAGC,KAAK;EAEzC,MAAMW,eAAe,GAAG;IACtBC,KAAK,EAAEL,IAAI,GAAGC,MAAM,CAACK,SAAS,GAAGL,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEM,IAAI;IAC7C,IAAIP,IAAI,GAAGE,KAAK,CAACM,aAAa,GAAG,CAAC,CAAC;EACrC,CAAC;EAED,oBACEnB,KAAA,CAAAoB,aAAA,CAACN,aAAa,EAAAO,QAAA;IACZC,OAAO,EAAC,eAAe;IACvBC,iBAAiB,EAAC,QAAQ;IAC1Bd,KAAK,EAAE,CAACe,MAAM,CAACN,IAAI,EAAEP,IAAI,IAAIa,MAAM,CAACC,MAAM,EAAEV,eAAe,EAAEN,KAAK;EAAE,GAChEC,IAAI,GAEPJ,QACY,CAAC;AAEpB,CAAC;AAEDD,WAAW,CAACqB,WAAW,GAAG,cAAc;AAExC,MAAMF,MAAM,GAAGvB,UAAU,CAAC0B,MAAM,CAAC;EAC/BT,IAAI,EAAE;IACJU,SAAS,EAAE,EAAE;IACbC,YAAY,EAAE,EAAE;IAChBC,gBAAgB,EAAE;EACpB,CAAC;EACDL,MAAM,EAAE;IACNG,SAAS,EAAE,EAAE;IACbC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAexB,WAAW;;AAE1B;AACA,SAASA,WAAW","ignoreList":[]}

View File

@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/Dialog/utils.ts"],"mappings":"","ignoreList":[]}

View File

@@ -0,0 +1,65 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import color from 'color';
import { useInternalTheme } from '../core/theming';
import { black, white } from '../styles/themes/v2/colors';
/**
* A divider is a thin, lightweight separator that groups content in lists and page layouts.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { View } from 'react-native';
* import { Divider, Text } from 'react-native-paper';
*
* const MyComponent = () => (
* <View>
* <Text>Lemon</Text>
* <Divider />
* <Text>Mango</Text>
* <Divider />
* </View>
* );
*
* export default MyComponent;
* ```
*/
const Divider = ({
leftInset,
horizontalInset = false,
style,
theme: themeOverrides,
bold = false,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const {
dark: isDarkTheme,
isV3
} = theme;
const dividerColor = isV3 ? theme.colors.outlineVariant : color(isDarkTheme ? white : black).alpha(0.12).rgb().string();
return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
style: [{
height: StyleSheet.hairlineWidth,
backgroundColor: dividerColor
}, leftInset && (isV3 ? styles.v3LeftInset : styles.leftInset), isV3 && horizontalInset && styles.horizontalInset, isV3 && bold && styles.bold, style]
}));
};
const styles = StyleSheet.create({
leftInset: {
marginLeft: 72
},
v3LeftInset: {
marginLeft: 16
},
horizontalInset: {
marginLeft: 16,
marginRight: 16
},
bold: {
height: 1
}
});
export default Divider;
//# sourceMappingURL=Divider.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","color","useInternalTheme","black","white","Divider","leftInset","horizontalInset","style","theme","themeOverrides","bold","rest","dark","isDarkTheme","isV3","dividerColor","colors","outlineVariant","alpha","rgb","string","createElement","_extends","height","hairlineWidth","backgroundColor","styles","v3LeftInset","create","marginLeft","marginRight"],"sourceRoot":"../../../src","sources":["components/Divider.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAoBC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAErE,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,gBAAgB,QAAQ,iBAAiB;AAClD,SAASC,KAAK,EAAEC,KAAK,QAAQ,4BAA4B;AA0BzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,OAAO,GAAGA,CAAC;EACfC,SAAS;EACTC,eAAe,GAAG,KAAK;EACvBC,KAAK;EACLC,KAAK,EAAEC,cAAc;EACrBC,IAAI,GAAG,KAAK;EACZ,GAAGC;AACE,CAAC,KAAK;EACX,MAAMH,KAAK,GAAGP,gBAAgB,CAACQ,cAAc,CAAC;EAC9C,MAAM;IAAEG,IAAI,EAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEzC,MAAMO,YAAY,GAAGD,IAAI,GACrBN,KAAK,CAACQ,MAAM,CAACC,cAAc,GAC3BjB,KAAK,CAACa,WAAW,GAAGV,KAAK,GAAGD,KAAK,CAAC,CAC/BgB,KAAK,CAAC,IAAI,CAAC,CACXC,GAAG,CAAC,CAAC,CACLC,MAAM,CAAC,CAAC;EAEf,oBACEvB,KAAA,CAAAwB,aAAA,CAACtB,IAAI,EAAAuB,QAAA,KACCX,IAAI;IACRJ,KAAK,EAAE,CACL;MAAEgB,MAAM,EAAEzB,UAAU,CAAC0B,aAAa;MAAEC,eAAe,EAAEV;IAAa,CAAC,EACnEV,SAAS,KAAKS,IAAI,GAAGY,MAAM,CAACC,WAAW,GAAGD,MAAM,CAACrB,SAAS,CAAC,EAC3DS,IAAI,IAAIR,eAAe,IAAIoB,MAAM,CAACpB,eAAe,EACjDQ,IAAI,IAAIJ,IAAI,IAAIgB,MAAM,CAAChB,IAAI,EAC3BH,KAAK;EACL,EACH,CAAC;AAEN,CAAC;AAED,MAAMmB,MAAM,GAAG5B,UAAU,CAAC8B,MAAM,CAAC;EAC/BvB,SAAS,EAAE;IACTwB,UAAU,EAAE;EACd,CAAC;EACDF,WAAW,EAAE;IACXE,UAAU,EAAE;EACd,CAAC;EACDvB,eAAe,EAAE;IACfuB,UAAU,EAAE,EAAE;IACdC,WAAW,EAAE;EACf,CAAC;EACDpB,IAAI,EAAE;IACJa,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAEF,eAAenB,OAAO","ignoreList":[]}

Some files were not shown because too many files have changed in this diff Show More