fix(components): calendar / datepicker performance

src/components/theme/index.ts

@@ -21,7 +21,10 @@ export {
   ThemeProvider,
   ThemeProviderProps,
 } from './theme/themeProvider.component';
-export { ModalService } from './modal/modal.service';
+export {
+  ModalService,
+  ModalPresentingConfig,
+} from './modal/modal.service';
 export {
   Interaction,
   State,

src/components/theme/modal/modal.service.tsx

@@ -5,7 +5,10 @@
  */
 
 import React from 'react';
-import { ModalPresentingBased } from '../../ui/support/typings';
+import {
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
 /**
  * Singleton service designed to manage modal components.
@@ -67,15 +70,13 @@ class ModalServiceType {
     this.panel = null;
   }
 
-  public show(element: React.ReactElement<ModalPresentingBased>,
-              config: ModalPresentingConfig): string {
-
+  public show(element: React.ReactElement, config: ModalPresentingConfig): string {
     if (this.panel) {
       return this.panel.show(element, config);
     }
   }
 
-  public update(identifier: string, children: React.ReactNode): void {
+  public update(identifier: string, children: React.ReactElement): void {
     if (this.panel) {
       this.panel.update(identifier, children);
     }
@@ -89,17 +90,17 @@ class ModalServiceType {
 }
 
 export interface ModalPresentingConfig {
-  allowBackdrop: boolean;
-  onBackdropPress: () => void;
+  allowBackdrop?: boolean;
+  backdropStyle?: StyleProp<ViewStyle>;
+  onBackdropPress?: () => void;
 }
 
 export interface ModalPresenting {
-  show(element: React.ReactElement<ModalPresentingBased>,
-       config: ModalPresentingConfig): string;
+  show(element: React.ReactElement, config: ModalPresentingConfig): string;
 
   hide(identifier: string): string;
 
-  update(identifier: string, children: React.ReactNode): void;
+  update(identifier: string, children: React.ReactElement): void;
 }
 
 export const ModalService = new ModalServiceType();

src/components/theme/modal/modalPanel.component.tsx

@@ -19,10 +19,9 @@ import {
   ModalPresenting,
   ModalPresentingConfig,
 } from './modal.service';
-import { ModalPresentingBased } from '../../ui/support/typings';
 
 interface ModalPanelChild extends ModalPresentingConfig {
-  element: React.ReactElement<ModalPresentingBased>;
+  element: React.ReactElement;
 }
 
 export interface ModalPanelProps {
@@ -54,9 +53,7 @@ export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState
     return '';
   };
 
-  public show(element: React.ReactElement<ModalPresentingBased>,
-              config: ModalPresentingConfig): string {
-
+  public show(element: React.ReactElement, config: ModalPresentingConfig): string {
     const key: string = this.generateUniqueComponentKey();
     const components: Map<string, ModalPanelChild> = this.state.components
       .set(key, { ...config, element });
@@ -68,7 +65,12 @@ export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState
 
   public update(identifier: string, children: React.ReactNode): void {
     const panelChild: ModalPanelChild = this.state.components.get(identifier);
-    const childElement: React.ReactElement<ModalPresentingBased> = panelChild.element;
+
+    if (!panelChild) {
+      return;
+    }
+
+    const childElement: React.ReactElement = panelChild.element;
 
     panelChild.element = React.cloneElement(childElement, {
       children: children,
@@ -92,6 +94,7 @@ export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState
     return (
       <ModalResolver
         {...config.element.props}
+        style={config.backdropStyle}
         visible={true}
         key={index}
         allowBackdrop={config.allowBackdrop}

src/components/theme/modal/modalPanel.spec.tsx

@@ -1,20 +1,22 @@
 import React from 'react';
+import {
+  View,
+  Text,
+  Button,
+  TouchableOpacity,
+} from 'react-native';
 import {
   fireEvent,
   render,
   RenderAPI,
   shallow,
 } from 'react-native-testing-library';
 import { ReactTestInstance } from 'react-test-renderer';
-import {
-  View,
-  Text,
-  Button,
-  TouchableOpacity,
-} from 'react-native';
 import { ModalPanel } from './modalPanel.component';
-import { ModalService } from './modal.service';
-import { ModalPresentingBased } from '../../ui/support/typings';
+import {
+  ModalPresentingConfig,
+  ModalService,
+} from './modal.service';
 
 describe('@modal-service: service checks', () => {
 
@@ -246,7 +248,7 @@ describe('@modal panel checks', () => {
     }
   }
 
-  class TestModal extends React.Component<ModalPresentingBased> {
+  class TestModal extends React.Component<ModalPresentingConfig> {
 
     public render(): React.ReactNode {
       return (

src/components/theme/modal/modalResolver.component.tsx

@@ -66,7 +66,7 @@ export class ModalResolver extends React.Component<ModalResolverProps> {
 
     return (
       <TouchableOpacity
-        style={styles.container}
+        style={[styles.container, this.props.style]}
         onPress={this.onBackdropPress}
         activeOpacity={1}>
         {component}