| 1 | {"version":3,"sources":["Appbar.tsx"],"names":["React","View","Platform","StyleSheet","color","AppbarContent","AppbarAction","AppbarBackAction","Surface","withTheme","black","white","overlay","DEFAULT_APPBAR_HEIGHT","Appbar","children","dark","style","theme","rest","colors","isDarkTheme","mode","backgroundColor","customBackground","elevation","restStyle","flatten","isDark","surface","primary","isLight","shouldCenterContent","shouldAddLeftSpacing","shouldAddRightSpacing","OS","hasAppbarContent","leftItemsCount","rightItemsCount","Children","forEach","child","isValidElement","type","styles","appbar","spacing","toArray","filter","map","i","includes","props","marginLeft","alignItems","cloneElement","create","height","flexDirection","paddingHorizontal","width","AppbarWithTheme"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { View, ViewStyle, Platform, StyleSheet, StyleProp } from 'react-native';\nimport color from 'color';\n\nimport AppbarContent from './AppbarContent';\nimport AppbarAction from './AppbarAction';\nimport AppbarBackAction from './AppbarBackAction';\nimport Surface from '../Surface';\nimport { withTheme } from '../../core/theming';\nimport { black, white } from '../../styles/colors';\nimport overlay from '../../styles/overlay';\n\ntype Props = Partial<React.ComponentPropsWithRef<typeof View>> & {\n /**\n * Whether the background color is a dark color. A dark appbar will render light text and vice-versa.\n */\n dark?: boolean;\n /**\n * Content of the `Appbar`.\n */\n children: React.ReactNode;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n style?: StyleProp<ViewStyle>;\n};\n\nexport const DEFAULT_APPBAR_HEIGHT = 56;\n\n/**\n * A component to display action items in a bar. It can be placed at the top or bottom.\n * The top bar usually contains the screen title, controls such as navigation buttons, menu button etc.\n * The bottom bar usually provides access to a drawer and up to four actions.\n *\n * By default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\n * See [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more informations\n *\n * <div class=\"screenshots\">\n * <img class=\"medium\" src=\"screenshots/appbar.png\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Appbar } from 'react-native-paper';\n * import { StyleSheet } from 'react-native';\n *\n * const MyComponent = () => (\n * <Appbar style={styles.bottom}>\n * <Appbar.Action\n * icon=\"archive\"\n * onPress={() => console.log('Pressed archive')}\n * />\n * <Appbar.Action icon=\"mail\" onPress={() => console.log('Pressed mail')} />\n * <Appbar.Action icon=\"label\" onPress={() => console.log('Pressed label')} />\n * <Appbar.Action\n * icon=\"delete\"\n * onPress={() => console.log('Pressed delete')}\n * />\n * </Appbar>\n * );\n *\n * export default MyComponent\n *\n * const styles = StyleSheet.create({\n * bottom: {\n * position: 'absolute',\n * left: 0,\n * right: 0,\n * bottom: 0,\n * },\n * });\n * ```\n */\nconst Appbar = ({ children, dark, style, theme, ...rest }: Props) => {\n const { colors, dark: isDarkTheme, mode } = theme;\n const {\n backgroundColor: customBackground,\n elevation = 4,\n ...restStyle\n }: ViewStyle = StyleSheet.flatten(style) || {};\n\n let isDark: boolean;\n\n const backgroundColor = customBackground\n ? customBackground\n : isDarkTheme && mode === 'adaptive'\n ? overlay(elevation, colors.surface)\n : colors.primary;\n if (typeof dark === 'boolean') {\n isDark = dark;\n } else {\n isDark =\n backgroundColor === 'transparent'\n ? false\n : typeof backgroundColor === 'string'\n ? !color(backgroundColor).isLight()\n : true;\n }\n\n let shouldCenterContent = false;\n let shouldAddLeftSpacing = false;\n let shouldAddRightSpacing = false;\n if (Platform.OS === 'ios') {\n let hasAppbarContent = false;\n let leftItemsCount = 0;\n let rightItemsCount = 0;\n\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child)) {\n if (child.type === AppbarContent) {\n hasAppbarContent = true;\n } else if (hasAppbarContent) {\n rightItemsCount++;\n } else {\n leftItemsCount++;\n }\n }\n });\n\n shouldCenterContent =\n hasAppbarContent && leftItemsCount < 2 && rightItemsCount < 2;\n shouldAddLeftSpacing = shouldCenterContent && leftItemsCount === 0;\n shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0;\n }\n return (\n <Surface\n style={[{ backgroundColor }, styles.appbar, { elevation }, restStyle]}\n {...rest}\n >\n {shouldAddLeftSpacing ? <View style={styles.spacing} /> : null}\n {React.Children.toArray(children)\n .filter((child) => child != null && typeof child !== 'boolean')\n .map((child, i) => {\n if (\n !React.isValidElement(child) ||\n ![AppbarContent, AppbarAction, AppbarBackAction].includes(\n // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter\n child.type\n )\n ) {\n return child;\n }\n\n const props: { color?: string; style?: StyleProp<ViewStyle> } = {\n color:\n typeof child.props.color !== 'undefined'\n ? child.props.color\n : isDark\n ? white\n : black,\n };\n\n if (child.type === AppbarContent) {\n props.style = [\n // Since content is not first item, add extra left margin\n i !== 0 && { marginLeft: 8 },\n shouldCenterContent && { alignItems: 'center' },\n child.props.style,\n ];\n }\n return React.cloneElement(child, props);\n })}\n {shouldAddRightSpacing ? <View style={styles.spacing} /> : null}\n </Surface>\n );\n};\n\nconst styles = StyleSheet.create({\n appbar: {\n height: DEFAULT_APPBAR_HEIGHT,\n flexDirection: 'row',\n alignItems: 'center',\n paddingHorizontal: 4,\n elevation: 4,\n },\n spacing: {\n width: 48,\n },\n});\n\nexport default withTheme(Appbar);\n\n// @component-docs ignore-next-line\nconst AppbarWithTheme = withTheme(Appbar);\n// @component-docs ignore-next-line\nexport { AppbarWithTheme as Appbar };\n"]} |