diff --git a/src/components/devsupport/components/measure/measure.component.tsx b/src/components/devsupport/components/measure/measure.component.tsx index b4e675edc..b6141e4d4 100644 --- a/src/components/devsupport/components/measure/measure.component.tsx +++ b/src/components/devsupport/components/measure/measure.component.tsx @@ -8,17 +8,19 @@ import React from 'react'; import { findNodeHandle, UIManager, + StatusBar, } from 'react-native'; import { Frame } from './type'; - + export interface MeasureElementProps

{ force?: boolean; + shouldUseTopInsets?: boolean; onMeasure: (frame: Frame) => void; children: React.ReactElement

; } export type MeasuringElement

= React.ReactElement; - + /** * Measures child element size and it's screen position asynchronously. * Returns measure result in `onMeasure` callback. @@ -32,7 +34,9 @@ export type MeasuringElement

= React.ReactElement; * ... * }; * - * + * * * * ``` @@ -41,7 +45,7 @@ export type MeasuringElement

= React.ReactElement; * but `force` property may be used to measure any time it's needed. * DON'T USE THIS FLAG IF THE COMPONENT RENDERS FIRST TIME OR YOU KNOW `onLayout` WILL BE CALLED. */ -export const MeasureElement = (props: MeasureElementProps): MeasuringElement => { +export const MeasureElement: React.FC = (props): MeasuringElement => { const ref = React.useRef(); @@ -61,7 +65,8 @@ export const MeasureElement = (props: MeasureElementProps): MeasuringElement => }; const onUIManagerMeasure = (x: number, y: number, w: number, h: number): void => { - const frame: Frame = bindToWindow(new Frame(x, y, w, h), Frame.window()); + const originY = props.shouldUseTopInsets ? y + StatusBar.currentHeight || 0 : y; + const frame: Frame = bindToWindow(new Frame(x, originY, w, h), Frame.window()); props.onMeasure(frame); }; @@ -76,3 +81,7 @@ export const MeasureElement = (props: MeasureElementProps): MeasuringElement => return React.cloneElement(props.children, { ref, onLayout: measureSelf }); }; + +MeasureElement.defaultProps = { + shouldUseTopInsets: false, +} \ No newline at end of file diff --git a/src/components/theme/application/applicationProvider.component.tsx b/src/components/theme/application/applicationProvider.component.tsx index dff878364..c1170a217 100644 --- a/src/components/theme/application/applicationProvider.component.tsx +++ b/src/components/theme/application/applicationProvider.component.tsx @@ -1,8 +1,8 @@ /** - * @license - * Copyright Akveo. All Rights Reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - */ + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ import React from 'react'; import merge from 'lodash.merge'; @@ -15,25 +15,25 @@ import { import { StyleProvider } from '../style/styleProvider.component'; import { ThemeProviderProps } from '../theme/themeProvider.component'; import { ModalPanel } from '../modal/modalPanel.component'; - + interface EvaRuntimeProcessingProps { mapping: SchemaType; customMapping?: CustomSchemaType; } - + interface EvaBuildtimeProcessingProps { styles: ThemeStyleType; } - + type EvaProcessingProps = EvaRuntimeProcessingProps | EvaBuildtimeProcessingProps; - + export type ApplicationProviderProps = EvaProcessingProps & ThemeProviderProps; export type ApplicationProviderElement = React.ReactElement; - + interface State { styles: ThemeStyleType; } - + /** * Overall application container. * @@ -110,7 +110,7 @@ export class ApplicationProvider extends React.Component { const customizedMapping: SchemaType = merge({}, mapping, custom); return this.schemaProcessor.process(customizedMapping); @@ -127,4 +127,4 @@ export class ApplicationProvider extends React.Component ); } -} +} \ No newline at end of file diff --git a/src/components/theme/modal/modal.service.tsx b/src/components/theme/modal/modal.service.tsx index 943aa058f..c0a814e26 100644 --- a/src/components/theme/modal/modal.service.tsx +++ b/src/components/theme/modal/modal.service.tsx @@ -61,6 +61,7 @@ import { class ModalServiceType { panel: ModalPresenting | null = null; + private shouldUseTopInsets: boolean = false; public mount(panel: ModalPresenting | null): void { this.panel = panel; @@ -87,6 +88,14 @@ class ModalServiceType { return this.panel.hide(identifier); } } + + public set setShouldUseTopInsets(state: boolean) { + this.shouldUseTopInsets = state; + }; + + public get getShouldUseTopInsets(): boolean { + return this.shouldUseTopInsets; + } } export interface ModalPresentingConfig { diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index 807f1b2fd..71c769eb6 100644 --- a/src/components/ui/menu/menuGroup.component.tsx +++ b/src/components/ui/menu/menuGroup.component.tsx @@ -20,6 +20,7 @@ import { MenuItemElement, MenuItemProps, } from './menuItem.component'; +import { ModalService } from '../../theme'; import { MenuItemDescriptor } from './menu.service'; export interface MenuGroupProps extends MenuItemProps { @@ -149,7 +150,9 @@ export class MenuGroup extends React.Component { private renderMeasuringGroupedItems = (evaStyle): MeasuringElement => { return ( - + {this.renderGroupedItems(evaStyle)} ); diff --git a/src/components/ui/modal/modal.component.tsx b/src/components/ui/modal/modal.component.tsx index 1d604db83..532d92ea2 100644 --- a/src/components/ui/modal/modal.component.tsx +++ b/src/components/ui/modal/modal.component.tsx @@ -149,7 +149,9 @@ export class Modal extends React.PureComponent { private renderMeasuringContentElement = (): MeasuringElement => { return ( - + {this.renderContentElement()} ); diff --git a/src/components/ui/popover/popover.component.tsx b/src/components/ui/popover/popover.component.tsx index ceffa77cc..eff3eff32 100644 --- a/src/components/ui/popover/popover.component.tsx +++ b/src/components/ui/popover/popover.component.tsx @@ -218,7 +218,9 @@ export class Popover extends React.Component { private renderMeasuringPopoverElement = (): MeasuringElement => { return ( - + {this.renderPopoverElement()} ); @@ -227,6 +229,7 @@ export class Popover extends React.Component { public render(): React.ReactElement { return ( {this.props.anchor()}