import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../core/theming'; export type Props = React.ComponentPropsWithRef & { /** * Content of the `DialogActions`. */ children: React.ReactNode; style?: StyleProp; /** * @optional */ theme?: ThemeProp; }; /** * 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 ( * * * * * * * * * ); * }; * * export default MyComponent; * ``` */ const DialogActions = (props: Props) => { const { isV3 } = useInternalTheme(props.theme); const actionsLength = React.Children.toArray(props.children).length; return ( {React.Children.map(props.children, (child, i) => React.isValidElement(child) ? React.cloneElement(child as React.ReactElement, { 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;