fix(theme): style provider - reduce setState calls

Author: artyorsh

src/framework/theme/component/application/applicationProvider.component.tsx

@@ -23,27 +23,19 @@ interface State {
 
 export class ApplicationProvider extends React.Component<Props, State> {
 
-  state: State;
+  public state: State = {
+    mapping: this.props.mapping,
+    styles: this.props.styles,
+    theme: this.props.theme,
+  };
 
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      mapping: props.mapping,
-      styles: props.styles,
-      theme: props.theme,
-    };
-  }
-
-  render() {
-   return (
-     <ModalPanel>
-       <StyleProvider
-         mapping={this.state.mapping}
-         styles={this.state.styles}
-         theme={this.state.theme}
-         children={this.props.children}
-       />
-     </ModalPanel>
-   );
+  public render(): React.ReactNode {
+    return (
+      <StyleProvider {...this.state}>
+        <ModalPanel>
+          {this.props.children}
+        </ModalPanel>
+      </StyleProvider>
+    );
   }
 }

src/framework/ui/popover/popover.component.tsx

@@ -60,9 +60,9 @@ export class Popover extends React.Component<Props, State> {
   };
 
   private containerRef: React.RefObject<MeasuredNode> = React.createRef();
-  private componentId: string = '';
+  private modalIdentifier: string = '';
 
-  public shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
+  public shouldComponentUpdate(nextProps: Props, nextState: State, nextContext: any): boolean {
     const isLayoutChanged: boolean = nextState.layout !== undefined;
     const isVisibilityChanged: boolean = this.props.visible !== nextProps.visible;
 
@@ -82,23 +82,23 @@ export class Popover extends React.Component<Props, State> {
 
         const { current: container } = this.containerRef;
 
-        // Retrieve `content` from popover children
-        // and clone it with measured position
+        // Retrieve `content` from popover children and clone it with measured position
         const { [TAG_CONTENT]: popoverView } = container.props.children;
-        const popover: React.ReactElement<ModalComponentCloseProps> =
-          React.cloneElement(popoverView, {
-            style: style,
-            onRequestClose: onRequestClose,
-          });
-        this.componentId = ModalService.show(popover, true);
+
+        const popover: React.ReactElement<ModalComponentCloseProps> = React.cloneElement(popoverView, {
+          style: style,
+          onRequestClose: onRequestClose,
+        });
+
+        this.modalIdentifier = ModalService.show(popover, true);
       } else {
-        ModalService.hide(this.componentId);
+        ModalService.hide(this.modalIdentifier);
       }
     }
   }
 
   public componentWillUnmount(): void {
-    this.componentId = '';
+    this.modalIdentifier = '';
   }
 
   private getComponentStyle = (source: StyleType): StyleType => {

src/framework/ui/tooltip/tooltip.component.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import {
-  Text,
-  StyleSheet,
-  TextProps,
-} from 'react-native';
+import { StyleSheet } from 'react-native';
 import {
   styled,
   StyledComponentProps,
   StyleType,
 } from '@kitten/theme';
+import {
+  Text as TextComponent,
+  Props as TextProps,
+} from '../text/text.component';
 import {
   Popover as PopoverComponent,
   Props as PopoverProps,
@@ -21,6 +21,7 @@ interface TooltipProps {
 }
 
 const Popover = styled<PopoverComponent, PopoverProps>(PopoverComponent);
+const Text = styled<TextComponent, TextProps>(TextComponent);
 
 export type Props = TooltipProps & StyledComponentProps & Omit<PopoverProps, 'content'>;