import React from 'react' ; import { StyleSheet , View } from 'react-native' ; import { FAB , fabSize , fabSpacing } from '../components/common/FAB' ; import { useColumnFilters } from '../components/context/ColumnFiltersContext' ; import { AppLayoutProviderState , useAppLayout , } from '../components/context/LayoutContext' ; import { keyboardShortcutsById } from '../components/modals/KeyboardShortcutsModal' ; import * as actions from '../redux/actions' ; import * as selectors from '../redux/selectors' ; import { contentPadding } from '../styles/variables' ; import { useKeyboardVisibility } from './use-keyboard-visibility' ; import { useReduxAction } from './use-redux-action' ; import { useReduxState } from './use-redux-state' ; const styles = StyleSheet . create ( { container : { position : 'absolute' , bottom : fabSpacing , right : contentPadding , marginTop : fabSpacing , zIndex : 1000 , } , } ) ; export function shouldRenderFAB ( { isColumnFiltersVisible , keyboardVisibility , sizename , } ) { if ( ! ( sizename <= '3-large' ) ) return false ; if ( sizename === '1-small' && isColumnFiltersVisible ) return false ; if ( keyboardVisibility === 'appearing' || keyboardVisibility === 'visible' ) return false ; return true ; } export function useFAB ( ) { const { isSharedFiltersOpened } = useColumnFilters ( ) ; const { sizename } = useAppLayout ( ) ; const keyboardVisibility = useKeyboardVisibility ( ) ; const currentOpenedModal = useReduxState ( selectors . currentOpenedModal ) ; const closeAllModals = useReduxAction ( actions . closeAllModals ) ; const replaceModal = useReduxAction ( actions . replaceModal ) ; if ( ! shouldRenderFAB ( { sizename , keyboardVisibility , isColumnFiltersVisible : isSharedFiltersOpened , } ) ) return { Component : undefined , size : 0 } ; if ( ! currentOpenedModal ) { const iconStyle = undefined ; return { size : fabSize + 2 * fabSpacing , Component : ( < View collapsable = { false } style = { styles . container } > < FAB key = "fab" analyticsLabel = "add_column" icon = { { family : 'octicon' , name : 'plus' , style : iconStyle } } onPress = { ( ) => replaceModal ( { name : 'ADD_COLUMN' } ) } tooltip = { `Add column (${ keyboardShortcutsById . addColumn . keys [ 0 ] })` } useBrandColor / > < /View>), } ; } switch ( currentOpenedModal . name ) { case 'ADD_COLUMN' : case 'ADD_COLUMN_DETAILS' : { const iconStyle = undefined ; return { size : fabSize + 2 * fabSpacing , Component : ( < View style = { styles . container } > < FAB analyticsLabel = "close_modals" key = "fab" icon = { { family : 'octicon' , name : 'x' , style : iconStyle } } onPress = { ( ) => closeAllModals ( ) } tooltip = { `Close (${ keyboardShortcutsById . closeModal . keys [ 0 ] })` } /> < /View>), } ; } default : { return { Component : undefined , size : 0 } ; } } }