fix(ui): mapping find issues

Author: artyorsh

src/framework/theme/component/style/style.spec.tsx

@@ -65,7 +65,7 @@ interface TestComponentProps extends StyledComponentProps, ViewProps {
 }
 
 class Test extends React.Component<TestComponentProps> {
-  static displayName: string = 'Radio';
+  static styledComponentName: string = 'Radio';
 
   static defaultProps: Partial<TestComponentProps> = {
     testID: styleConsumerTestId,
@@ -78,8 +78,20 @@ class Test extends React.Component<TestComponentProps> {
   }
 }
 
+class NonStyledComponent extends React.Component<TestComponentProps> {
+  public render(): React.ReactElement<ViewProps> {
+    return undefined;
+  }
+}
+
 describe('@style: ui component checks', () => {
 
+  it('* returns null if has no static `styledComponentName` property', () => {
+    const styledComponent = styled(NonStyledComponent);
+
+    expect(styledComponent).toBeNull();
+  });
+
   it('* static methods are copied over', async () => {
     // @ts-ignore: test-case
     Test.staticMethod = function () {

src/framework/theme/component/style/styleConsumer.component.tsx

@@ -32,6 +32,12 @@ export interface Context {
 
 export const styled = <P extends object>(Component: React.ComponentClass<P>) => {
 
+  // @ts-ignore
+  if (!Component.styledComponentName) {
+    console.warn('Styled components should specify corresponding style name.');
+    return null;
+  }
+
   type WrappingProps = PrivateProps<WrappedElementInstance> & WrappedProps;
   type WrappedProps = P & Props;
   type WrappingElement = React.ReactElement<WrappingProps>;
@@ -51,9 +57,9 @@ export const styled = <P extends object>(Component: React.ComponentClass<P>) =>
     private service: StyleConsumerService;
 
     private onInit = (context: Context) => {
-      const displayName: string = Component.displayName || Component.name;
 
-      this.service = new StyleConsumerService(displayName, context);
+      // @ts-ignore
+      this.service = new StyleConsumerService(Component.styledComponentName, context);
       this.defaultProps = this.service.createDefaultProps();
 
       this.init = true;

src/framework/ui/avatar/avatar.component.tsx

@@ -20,6 +20,8 @@ export type Props = AvatarProps & StyledComponentProps & ImageProps;
 
 export class Avatar extends React.Component<Props> {
 
+  static styledComponentName: string = 'Avatar';
+
   private getComponentStyle = (source: StyleType): StyleType => {
     const { roundCoefficient, ...componentStyle } = source;
 

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

@@ -27,6 +27,8 @@ export type Props = TabNavigatorProps & StyledComponentProps & ViewProps;
 
 export class BottomNavigation extends React.Component<Props> {
 
+  static styledComponentName: string = 'BottomNavigation';
+
   static defaultProps: Partial<Props> = {
     selectedIndex: 0,
   };

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

@@ -23,6 +23,8 @@ export type Props = BottomNavigatorTabProps & StyledComponentProps & TouchableOp
 
 export class BottomNavigationTab extends React.Component<Props> {
 
+  static styledComponentName: string = 'BottomNavigationTab';
+
   private onPress = () => {
     if (this.props.onSelect) {
       this.props.onSelect(!this.props.selected);

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

@@ -42,6 +42,8 @@ const ALIGNMENT_DEFAULT: ButtonIconAlignment = ButtonIconAlignments.LEFT;
 
 export class Button extends React.Component<Props> {
 
+  static styledComponentName: string = 'Button';
+
   static defaultProps: Partial<Props> = {
     iconAlignment: 'left',
   };

src/framework/ui/buttonGroup/buttonGroup.component.tsx

@@ -25,6 +25,8 @@ export type Props = ButtonGroupProps & StyledComponentProps & ViewProps;
 
 export class ButtonGroup extends React.Component<Props> {
 
+  static styledComponentName: string = 'ButtonGroup';
+
   private styleProvider: ButtonStyleProvider = ButtonStyleProviders.DEFAULT;
 
   private getComponentStyle = (style: StyleType): StyleType => {

src/framework/ui/checkbox/checkbox.component.tsx

@@ -39,6 +39,8 @@ export type Props = CheckBoxProps & StyledComponentProps & TouchableOpacityProps
 
 export class CheckBox extends React.Component<Props> {
 
+  static styledComponentName: string = 'CheckBox';
+
   private onPress = () => {
     this.props.dispatch([]);
 

src/framework/ui/index.ts

@@ -123,6 +123,8 @@ const Input = styled<InputProps>(InputComponent);
 const Layout = styled<LayoutProps>(LayoutComponent);
 const List = styled<ListProps>(ListComponent);
 const ListItem = styled<ListItemProps>(ListItemComponent);
+const OverflowMenu = styled<OverflowMenuProps>(OverflowMenuComponent);
+const OverflowMenuItem = styled<OverflowMenuItemProps>(OverflowMenuItemComponent);
 const Popover = styled<PopoverProps>(PopoverComponent);
 const Radio = styled<RadioProps>(RadioComponent);
 const RadioGroup = styled<RadioGroupProps>(RadioGroupComponent);
@@ -133,8 +135,6 @@ const Toggle = styled<ToggleProps>(ToggleComponent);
 const Tooltip = styled<TooltipProps>(TooltipComponent);
 const TopNavigation = styled<TopNavigationBarProps>(TopNavigationComponent);
 const TopNavigationAction = styled<TopNavigationBarActionProps>(TopNavigationActionComponent);
-const OverflowMenuItem = styled<OverflowMenuItemProps>(OverflowMenuItemComponent);
-const OverflowMenu = styled<OverflowMenuProps>(OverflowMenuComponent);
 
 export {
   Avatar,

src/framework/ui/input/input.component.tsx

@@ -27,8 +27,6 @@ import {
   FlexStyleProps,
 } from '../common/props';
 
-const Text = styled<TextProps>(TextComponent);
-
 type IconElement = React.ReactElement<ImageProps>;
 type TextElement = React.ReactElement<TextProps>;
 type IconProp = (style: StyleType) => React.ReactElement<ImageProps>;
@@ -44,8 +42,12 @@ interface InputProps {
 
 export type Props = InputProps & StyledComponentProps & TextInputProps;
 
+const Text = styled<TextProps>(TextComponent);
+
 export class Input extends React.Component<Props> {
 
+  static styledComponentName: string = 'Input';
+
   private onFocus = (event: InputFocusEvent) => {
     this.props.dispatch([Interaction.FOCUSED]);
 

src/framework/ui/layout/layout.component.tsx

@@ -16,6 +16,8 @@ export type Props = LayoutProps & StyledComponentProps & ViewProps;
 
 export class Layout extends React.Component<Props> {
 
+  static styledComponentName: string = 'Layout';
+
   private getComponentStyle = (style: StyleType): StyleType => {
     return {
       container: style,

src/framework/ui/list/list.component.tsx

@@ -22,6 +22,8 @@ export type Props = ListProps<ItemType> & StyledComponentProps & FlatListProps<I
 
 export class List extends React.Component<Props> {
 
+  static styledComponentName: string = 'List';
+
   private listRef: React.RefObject<FlatList<ItemType>> = React.createRef();
 
   public scrollToEnd = (params?: { animated?: boolean }) => {

src/framework/ui/list/listItem.component.tsx

@@ -52,6 +52,8 @@ export type Props = ListItemProps & StyledComponentProps & TouchableOpacityIndex
 
 export class ListItem extends React.Component<Props> {
 
+  static styledComponentName: string = 'ListItem';
+
   private onPress = (event: GestureResponderEvent) => {
     if (this.props.onPress) {
       this.props.onPress(this.props.index, event);

src/framework/ui/overflowMenu/overflowMenu.component.tsx

@@ -36,6 +36,8 @@ export type Props = & StyledComponentProps & OverflowMenuProps & Omit<PopoverPro
 
 export class OverflowMenu extends React.Component<Props> {
 
+  static styledComponentName: string = 'OverflowMenu';
+
   static defaultProps: Partial<Props> = {
     indicatorOffset: 12,
   };

src/framework/ui/overflowMenu/overflowMenuItem.component.tsx

@@ -30,6 +30,8 @@ export type Props = OverflowMenuItemType & StyledComponentProps & TouchableOpaci
 
 export class OverflowMenuItem extends React.Component<Props> {
 
+  static styledComponentName: string = 'OverflowMenuItem';
+
   private onPress = (event: GestureResponderEvent) => {
     if (this.props.onPress) {
       this.props.onPress(this.props.index, event);

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

@@ -47,6 +47,8 @@ const PLACEMENT_DEFAULT: Placement = Placements.BOTTOM;
 
 export class Popover extends React.Component<Props, State> {
 
+  static styledComponentName: string = 'Popover';
+
   static defaultProps: Partial<Props> = {
     placement: PLACEMENT_DEFAULT.rawValue,
     visible: false,

src/framework/ui/radio/radio.component.tsx

@@ -36,6 +36,8 @@ export type Props = RadioProps & StyledComponentProps & TouchableOpacityProps;
 
 export class Radio extends React.Component<Props> {
 
+  static styledComponentName: string = 'Radio';
+
   private onPress = () => {
     if (this.props.onChange) {
       this.props.onChange(!this.props.checked);

src/framework/ui/radioGroup/radioGroup.component.tsx

@@ -21,6 +21,8 @@ export type Props = RadioGroupProps & StyledComponentProps & ViewProps;
 
 export class RadioGroup extends React.Component<Props> {
 
+  static styledComponentName: string = 'RadioGroup';
+
   static defaultProps: Partial<Props> = {
     selectedIndex: -1,
   };

src/framework/ui/tab/tab.component.tsx

@@ -34,6 +34,8 @@ export type Props = TabProps & StyledComponentProps & TouchableOpacityProps;
 
 export class Tab extends React.Component<Props> {
 
+  static styledComponentName: string = 'Tab';
+
   static defaultProps: Partial<Props> = {
     selected: false,
   };

src/framework/ui/tab/tabBar.component.tsx

@@ -24,6 +24,8 @@ export type Props = TabBarProps & StyledComponentProps & ViewProps;
 
 export class TabBar extends React.Component<Props> {
 
+  static styledComponentName: string = 'TabBar';
+
   static defaultProps: Partial<Props> = {
     selectedIndex: 0,
   };

src/framework/ui/text/text.component.tsx

@@ -17,6 +17,8 @@ export type Props = TextProps & StyledComponentProps & TextComponentProps;
 
 export class Text extends React.Component<Props> {
 
+  static styledComponentName: string = 'Text';
+
   private getComponentStyle = (source: StyleType): StyleType => {
     return {
       color: source.color,

src/framework/ui/toggle/toggle.component.tsx

@@ -31,6 +31,8 @@ export type Props = ToggleComponentProps & StyledComponentProps & ViewProps;
 
 export class Toggle extends React.Component<Props> implements PanResponderCallbacks {
 
+  static styledComponentName: string = 'Toggle';
+
   private panResponder: PanResponderInstance;
   private thumbWidthAnimation: Animated.Value;
   private thumbTranslateAnimation: Animated.Value;

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

@@ -33,6 +33,8 @@ export type Props = TooltipProps & StyledComponentProps & Omit<PopoverProps, 'co
 
 export class Tooltip extends React.Component<Props> {
 
+  static styledComponentName: string = 'Tooltip';
+
   static defaultProps: Partial<Props> = {
     indicatorOffset: 8,
   };

src/framework/ui/topNavigation/topNavigation.component.tsx

@@ -30,6 +30,8 @@ export type Props = TopNavigationProps & StyledComponentProps & ViewProps;
 
 export class TopNavigation extends React.Component<Props> {
 
+  static styledComponentName: string = 'TopNavigation';
+
   private getComponentStyle = (style: StyleType): StyleType => {
     const { alignment: alignmentValue, leftControl, rightControls } = this.props;
 

src/framework/ui/topNavigation/topNavigationAction.component.tsx

@@ -20,6 +20,8 @@ export type Props = StyledComponentProps & TouchableOpacityProps & TopNavigation
 
 export class TopNavigationAction extends React.Component<Props> {
 
+  static styledComponentName: string = 'TopNavigationAction';
+
   private onPress = (event: GestureResponderEvent) => {
     if (this.props.onPress) {
       this.props.onPress(event);