feat(ui): web states support

docs/package.json

@@ -21,9 +21,9 @@
     "@angular/platform-browser": "8.0.0",
     "@angular/platform-browser-dynamic": "8.0.0",
     "@angular/router": "8.0.0",
-    "@nebular/bootstrap": "4.3.1",
-    "@nebular/eva-icons": "4.3.1",
-    "@nebular/theme": "4.3.1",
+    "@nebular/bootstrap": "4.4.0",
+    "@nebular/eva-icons": "4.4.0",
+    "@nebular/theme": "4.4.0",
     "bootstrap": "4.0.0",
     "colors.js": "1.2.4",
     "core-js": "2.5.7",

src/framework/theme/style/type.ts

@@ -3,6 +3,7 @@ export interface StyleType {
 }
 
 export enum Interaction {
+  HOVER = 'hover',
   ACTIVE = 'active',
   FOCUSED = 'focused',
   INDETERMINATE = 'indeterminate',

src/framework/ui/bottomNavigation/bottomNavigation.component.tsx

@@ -108,7 +108,7 @@ export class BottomNavigationComponent extends React.Component<BottomNavigationP
     selectedIndex: 0,
   };
 
-  private onTabSelect = (index: number) => {
+  private onTabSelect = (index: number): void => {
     if (this.props.onSelect && this.props.selectedIndex !== index) {
       this.props.onSelect(index);
     }
@@ -164,7 +164,7 @@ export class BottomNavigationComponent extends React.Component<BottomNavigationP
     ];
   };
 
-  public render(): React.ReactNode {
+  public render(): React.ReactElement<ViewProps> {
     const { themedStyle, style, ...derivedProps } = this.props;
     const { container, ...componentStyles } = this.getComponentStyle(themedStyle);
 

src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx

@@ -72,7 +72,7 @@ export class BottomNavigationTabComponent extends React.Component<BottomNavigati
 
   static styledComponentName: string = 'BottomNavigationTab';
 
-  private onPress = () => {
+  private onPress = (): void => {
     if (this.props.onSelect) {
       this.props.onSelect(!this.props.selected);
     }
@@ -142,17 +142,16 @@ export class BottomNavigationTabComponent extends React.Component<BottomNavigati
     ];
   };
 
-  public render(): React.ReactNode {
+  public render(): React.ReactElement<TouchableOpacityProps> {
     const { style, themedStyle, ...restProps } = this.props;
     const { container, ...componentStyles } = this.getComponentStyle(themedStyle);
-
     const [iconElement, titleElement] = this.renderComponentChildren(componentStyles);
 
     return (
       <TouchableOpacity
+        activeOpacity={1.0}
         {...restProps}
         style={[container, styles.container, style]}
-        activeOpacity={1.0}
         onPress={this.onPress}>
         {iconElement}
         {titleElement}

src/framework/ui/bottomNavigation/bottomNavigationTab.component.web.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Interaction } from '@kitten/theme';
+import {
+  BottomNavigationTab as RNBottomNavigationTab,
+  BottomNavigationTabElement as RNBottomNavigationTabElement,
+  BottomNavigationTabProps as RNBottomNavigationTabProps,
+  // @ts-ignore
+} from './bottomNavigationTab.component.tsx';
+import {
+  WebEventResponder,
+  WebEventResponderCallbacks,
+  WebEventResponderInstance,
+} from '../support/services';
+
+export type BottomNavigationTabProps = RNBottomNavigationTabProps & WebEventResponderCallbacks;
+export type BottomNavigationTabElement = React.ReactElement<BottomNavigationTabProps>;
+
+export class BottomNavigationTab extends React.Component<BottomNavigationTabProps>
+  implements WebEventResponderCallbacks {
+
+  private bottomNavigationTabRef: React.RefObject<any> = React.createRef();
+  private webEventResponder: WebEventResponderInstance = WebEventResponder.create(this);
+
+  public onMouseEnter = (): void => {
+    this.bottomNavigationTabRef.current.props.dispatch([Interaction.HOVER]);
+
+    if (this.props.onMouseEnter) {
+      this.props.onMouseEnter();
+    }
+  };
+
+  public onMouseLeave = (): void => {
+    this.bottomNavigationTabRef.current.props.dispatch([]);
+
+    if (this.props.onMouseLeave) {
+      this.props.onMouseLeave();
+    }
+  };
+
+  public onFocus = (): void => {
+    if (this.props.onFocus) {
+      this.props.onFocus();
+    }
+  };
+
+  public onBlur = (): void => {
+    if (this.props.onBlur) {
+      this.props.onBlur();
+    }
+  };
+
+  public render(): RNBottomNavigationTabElement {
+    const { style, ...restProps } = this.props;
+
+    return (
+      <RNBottomNavigationTab
+        {...restProps}
+        {...this.webEventResponder.eventHandlers}
+        ref={this.bottomNavigationTabRef}
+        style={[style, styles.element]}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  element: {
+    // @ts-ignore
+    outlineWidth: 0,
+  },
+});

src/framework/ui/button/button.component.tsx

@@ -89,21 +89,21 @@ export class ButtonComponent extends React.Component<ButtonProps> {
 
   static styledComponentName: string = 'Button';
 
-  private onPress = (event: GestureResponderEvent) => {
+  private onPress = (event: GestureResponderEvent): void => {
     if (this.props.onPress) {
       this.props.onPress(event);
     }
   };
 
-  private onPressIn = (event: GestureResponderEvent) => {
+  private onPressIn = (event: GestureResponderEvent): void => {
     this.props.dispatch([Interaction.ACTIVE]);
 
     if (this.props.onPressIn) {
       this.props.onPressIn(event);
     }
   };
 
-  private onPressOut = (event: GestureResponderEvent) => {
+  private onPressOut = (event: GestureResponderEvent): void => {
     this.props.dispatch([]);
 
     if (this.props.onPressOut) {
@@ -176,7 +176,6 @@ export class ButtonComponent extends React.Component<ButtonProps> {
   public render(): React.ReactElement<TouchableOpacityProps> {
     const { themedStyle, style, ...containerProps } = this.props;
     const { container, ...childStyles } = this.getComponentStyle(themedStyle);
-
     const [iconElement, textElement] = this.renderComponentChildren(childStyles);
 
     return (

src/framework/ui/button/button.component.web.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Interaction } from '@kitten/theme';
+import {
+  Button as RNButton,
+  ButtonElement as RNButtonElement,
+  ButtonProps as RNButtonProps,
+  // @ts-ignore
+} from './button.component.tsx';
+import {
+  WebEventResponder,
+  WebEventResponderCallbacks,
+  WebEventResponderInstance,
+} from '../support/services';
+
+export type ButtonProps = RNButtonProps & WebEventResponderCallbacks;
+export type ButtonElement = React.ReactElement<ButtonProps>;
+
+export class Button extends React.Component<ButtonProps> implements WebEventResponderCallbacks {
+
+  private buttonRef: React.RefObject<any> = React.createRef();
+  private webEventResponder: WebEventResponderInstance = WebEventResponder.create(this);
+
+  public onMouseEnter = (): void => {
+    this.buttonRef.current.props.dispatch([Interaction.HOVER]);
+
+    if (this.props.onMouseEnter) {
+      this.props.onMouseEnter();
+    }
+  };
+
+  public onMouseLeave = (): void => {
+    this.buttonRef.current.props.dispatch([]);
+
+    if (this.props.onMouseLeave) {
+      this.props.onMouseLeave();
+    }
+  };
+
+  public onFocus = (): void => {
+    this.buttonRef.current.props.dispatch([Interaction.FOCUSED]);
+
+    if (this.props.onFocus) {
+      this.props.onFocus();
+    }
+  };
+
+  public onBlur = (): void => {
+    this.buttonRef.current.props.dispatch([]);
+
+    if (this.props.onBlur) {
+      this.props.onBlur();
+    }
+  };
+
+  public render(): RNButtonElement {
+    const { style, ...restProps } = this.props;
+
+    return (
+      <RNButton
+        {...restProps}
+        {...this.webEventResponder.eventHandlers}
+        ref={this.buttonRef}
+        style={[style, styles.element]}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  element: {
+    // @ts-ignore
+    outlineWidth: 0,
+  },
+});

src/framework/ui/calendar/baseCalendar.component.tsx

@@ -346,8 +346,7 @@ export abstract class BaseCalendarComponent<D, P> extends React.Component<BaseCa
   };
 
   private isLateralNavigationAllowed = (): boolean => {
-    const { viewMode } = this.state;
-    return viewMode.id === CalendarViewModes.DATE.id || viewMode.id === CalendarViewModes.YEAR.id;
+    return this.state.viewMode.id === CalendarViewModes.DATE.id || this.state.viewMode.id === CalendarViewModes.YEAR.id;
   };
 
   private renderWeekdayElement = (weekday: string, index: number): CalendarDateContentElement => {
@@ -420,9 +419,8 @@ export abstract class BaseCalendarComponent<D, P> extends React.Component<BaseCa
     );
   };
 
-  private renderDayPickerPagerElement = (date: D): React.ReactElement<ViewProps> => {
-    const { themedStyle } = this.props;
-    const { divider, daysHeaderContainer } = this.getCalendarStyle(themedStyle);
+  private renderDayPickerPagerElement = (date: D): React.ReactFragment => {
+    const { divider, daysHeaderContainer } = this.getCalendarStyle(this.props.themedStyle);
     const visibleDayPickerIndex: number = this.dataService.getNumberOfMonths(this.min, this.state.visibleDate);
 
     return (
@@ -496,7 +494,7 @@ export abstract class BaseCalendarComponent<D, P> extends React.Component<BaseCa
     );
   };
 
-  private renderPickerElement = (date: D): React.ReactElement<ViewProps> => {
+  private renderPickerElement = (date: D): React.ReactNode => {
     switch (this.state.viewMode.id) {
       case CalendarViewModes.DATE.id:
         return this.renderDayPickerPagerElement(date);
@@ -508,16 +506,15 @@ export abstract class BaseCalendarComponent<D, P> extends React.Component<BaseCa
   };
 
   private renderCalendarFooter = (): React.ReactElement<any> => {
-    const { renderFooter } = this.props;
-
-    return renderFooter && renderFooter();
+    if (this.props.renderFooter) {
+      return this.props.renderFooter();
+    }
+    return null;
   };
 
   private renderCalendarHeader = (): CalendarHeaderElement => {
-    const { themedStyle, title } = this.props;
-    const { headerContainer, title: titleStyle, icon } = this.getCalendarStyle(themedStyle);
-
-    const titleSelector = title || this.createHeaderTitle;
+    const { headerContainer, title: titleStyle, icon } = this.getCalendarStyle(this.props.themedStyle);
+    const titleSelector = this.props.title || this.createHeaderTitle;
 
     return (
       <CalendarHeader

src/framework/ui/calendar/calendar.component.tsx

@@ -73,10 +73,8 @@ export class CalendarComponent<D> extends BaseCalendarComponent<D, CalendarProps
   // BaseCalendarComponent
 
   public onDaySelect(date: CalendarDateInfo<D>): void {
-    const { onSelect } = this.props;
-
-    if (onSelect) {
-      onSelect(date.date);
+    if (this.props.onSelect) {
+      this.props.onSelect(date.date);
     }
   }
 

src/framework/ui/calendar/components/calendarPager.component.tsx

@@ -16,14 +16,14 @@ export type CalendarPagerElement<D> = React.ReactElement<CalendarPagerProps<D>>;
 
 export class CalendarPager<D> extends React.Component<CalendarPagerProps<D>> {
 
-  public scrollToIndex(params: { index: number, animated?: boolean }) {
+  public scrollToIndex(params: { index: number, animated?: boolean }): void {
     this.viewPagerRef.current.scrollToIndex(params);
   }
 
   private viewPagerRef: React.RefObject<ViewPager> = React.createRef();
 
-  private onSelect = (index: number) => {
-    // TODO: This fixes layout junks (for any reason)
+  private onSelect = (index: number): void => {
+    // For any reason, this fixes layout junks
     setTimeout(() => {
       this.props.onSelect(index);
     });

src/framework/ui/calendar/components/picker/calendarPickerCell.component.tsx

@@ -52,7 +52,7 @@ class CalendarPickerCellComponent<D> extends React.Component<CalendarPickerCellP
     return true;
   }
 
-  private onPress = () => {
+  private onPress = (): void => {
     if (this.props.onSelect) {
       this.props.onSelect(this.props.date);
     }