90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
import { Capacitor } from '@capacitor/core'
|
|
|
|
/**
|
|
* Utility functions for handling safe area insets consistently across the app
|
|
*/
|
|
|
|
/**
|
|
* Get the appropriate bottom value that accounts for safe area insets
|
|
* @param {number|string} baseBottom - The base bottom value (default: 0)
|
|
* @param {number|string} extraPadding - Additional padding to add (default: 0)
|
|
* @returns {string} - CSS calc() expression for bottom positioning
|
|
*/
|
|
export const getSafeBottom = (baseBottom = 0, extraPadding = 0) => {
|
|
const base = typeof baseBottom === 'number' ? `${baseBottom}px` : baseBottom
|
|
const extra =
|
|
typeof extraPadding === 'number' ? `${extraPadding}px` : extraPadding
|
|
|
|
if (Capacitor.getPlatform() === 'android') {
|
|
if (extraPadding) {
|
|
return `calc(var(--safe-area-inset-bottom, 0px) + ${base} + ${extra})`
|
|
}
|
|
return `calc(var(--safe-area-inset-bottom, 0px) + ${base})`
|
|
}
|
|
|
|
// For iOS and web, safe area is already handled by the system
|
|
if (extraPadding) {
|
|
return `calc(${base} + ${extra})`
|
|
}
|
|
return base
|
|
}
|
|
|
|
/**
|
|
* Get safe area padding for bottom elements
|
|
* @param {number|string} extraPadding - Additional padding to add
|
|
* @returns {string} - CSS calc() expression for padding
|
|
*/
|
|
export const getSafeBottomPadding = (extraPadding = 0) => {
|
|
const extra =
|
|
typeof extraPadding === 'number' ? `${extraPadding * 8}px` : extraPadding
|
|
|
|
if (Capacitor.getPlatform() === 'android') {
|
|
if (extraPadding) {
|
|
return `calc(var(--safe-area-inset-bottom, 0px) + ${extra})`
|
|
}
|
|
return `var(--safe-area-inset-bottom, 0px)`
|
|
}
|
|
|
|
return extra || '0px'
|
|
}
|
|
|
|
/**
|
|
* Get safe area styles object for common bottom-positioned elements
|
|
* @param {object} options - Configuration options
|
|
* @param {number|string} options.bottom - Bottom position value
|
|
* @param {number|string} options.padding - Additional padding
|
|
* @param {'fixed'|'absolute'|'sticky'} options.position - Position type
|
|
* @returns {object} - Style object
|
|
*/
|
|
export const getSafeBottomStyles = ({
|
|
bottom = 0,
|
|
padding = 0,
|
|
position = 'fixed',
|
|
} = {}) => {
|
|
return {
|
|
position,
|
|
bottom: getSafeBottom(bottom, padding),
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Hook-like function to get safe area values for use in components
|
|
* @returns {object} - Object with safe area utility functions
|
|
*/
|
|
export const useSafeArea = () => {
|
|
return {
|
|
getSafeBottom,
|
|
getSafeBottomPadding,
|
|
getSafeBottomStyles,
|
|
isAndroid: Capacitor.getPlatform() === 'android',
|
|
isNative: Capacitor.isNativePlatform(),
|
|
}
|
|
}
|
|
|
|
export default {
|
|
getSafeBottom,
|
|
getSafeBottomPadding,
|
|
getSafeBottomStyles,
|
|
useSafeArea,
|
|
}
|