fix(retail-ui): fix react-hot-loader issue

packages/retail-ui/components/Button/Button.tsx

@@ -126,7 +126,9 @@ export interface ButtonState {
   focusedByTab: boolean;
 }
 
-class Button extends React.Component<ButtonProps, ButtonState> {
+export default class Button extends React.Component<ButtonProps, ButtonState> {
+  public static __BUTTON__ = true;
+
   public static TOP_LEFT = Corners.TOP_LEFT;
   public static TOP_RIGHT = Corners.TOP_RIGHT;
   public static BOTTOM_RIGHT = Corners.BOTTOM_RIGHT;
@@ -328,4 +330,6 @@ class Button extends React.Component<ButtonProps, ButtonState> {
   };
 }
 
-export default Button;
+export const isButton = (child: React.ReactChild): child is React.ReactElement<ButtonProps> => {
+  return React.isValidElement<ButtonProps>(child) ? child.type.hasOwnProperty('__BUTTON__') : false;
+};

packages/retail-ui/components/Button/index.ts

@@ -1 +1 @@
-export { default, ButtonProps, ButtonState, ButtonSize, ButtonType, ButtonUse } from './Button';
+export { default, ButtonProps, ButtonState, ButtonSize, ButtonType, ButtonUse, isButton } from './Button';

packages/retail-ui/components/Group/Group.tsx

@@ -8,7 +8,7 @@ import Corners from '../Button/Corners';
 import '../ensureOldIEClassName';
 import styles from './Group.less';
 import { Nullable } from '../../typings/utility-types';
-import Button from '../Button';
+import { isButton } from '../Button';
 
 export interface GroupProps {
   width?: React.CSSProperties['width'];
@@ -83,7 +83,7 @@ class Group extends React.Component<GroupProps> {
             corners,
           };
 
-          if (child.type !== Button) {
+          if (!isButton(child)) {
             delete cloneProps.corners;
           }
 

packages/retail-ui/components/Menu/Menu.tsx

@@ -5,7 +5,8 @@ import ReactDOM from 'react-dom';
 import isActiveElement from './isActiveElement';
 import ScrollContainer from '../ScrollContainer/ScrollContainer';
 
-import MenuItem, { MenuItemProps } from '../MenuItem/MenuItem';
+import MenuItem, { MenuItemProps, isMenuItem } from '../MenuItem/MenuItem';
+import { isMenuHeader } from '../MenuHeader/MenuHeader';
 
 import styles from './Menu.less';
 import { Nullable } from '../../typings/utility-types';
@@ -70,9 +71,8 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
             if (typeof child === 'string' || typeof child === 'number') {
               return child;
             }
-            const isMenuItem = child && (child.type as typeof MenuItem).__MENU_ITEM__;
-            const isMenuHeader = child && (child.type as typeof MenuItem).__MENU_HEADER__;
-            if (enableIconPadding && (isMenuItem || isMenuHeader)) {
+
+            if (enableIconPadding && (isMenuItem(child) || isMenuHeader(child))) {
               child = React.cloneElement(child, {
                 _enableIconPadding: true,
               });

packages/retail-ui/components/Menu/isActiveElement.tsx

@@ -1,12 +1,6 @@
 import * as React from 'react';
-import MenuItem, { MenuItemProps } from '../MenuItem/MenuItem';
+import MenuItem, { MenuItemProps, isMenuItem } from '../MenuItem/MenuItem';
 
 export default function isActiveElement(element: any): element is React.ComponentElement<MenuItemProps, MenuItem> {
-  return (
-    element &&
-    element.type &&
-    // FIXME: bad typings
-    (element.type as any).__MENU_ITEM__ &&
-    !element.props.disabled
-  );
+  return isMenuItem(element) && !element.props.disabled;
 }

packages/retail-ui/components/MenuHeader/MenuHeader.tsx

@@ -29,3 +29,7 @@ export default class MenuHeader extends React.Component<MenuHeaderProps> {
     return <div className={classnames}>{this.props.children}</div>;
   }
 }
+
+export const isMenuHeader = (child: React.ReactChild): child is React.ReactElement<MenuHeaderProps> => {
+  return React.isValidElement<MenuHeaderProps>(child) ? child.type.hasOwnProperty('__MENU_HEADER__') : false;
+};

packages/retail-ui/components/MenuHeader/index.tsx

@@ -1 +1 @@
-export { default, MenuHeaderProps } from './MenuHeader';
+export { default, MenuHeaderProps, isMenuHeader } from './MenuHeader';

packages/retail-ui/components/MenuItem/MenuItem.tsx

@@ -39,7 +39,6 @@ export interface MenuItemProps {
  */
 export default class MenuItem extends React.Component<MenuItemProps> {
   public static __MENU_ITEM__ = true;
-  public static __MENU_HEADER__ = false;
 
   public static propTypes = {
     alkoLink: PropTypes.bool,
@@ -124,3 +123,7 @@ export default class MenuItem extends React.Component<MenuItemProps> {
     return 'button';
   };
 }
+
+export const isMenuItem = (child: React.ReactChild): child is React.ReactElement<MenuItemProps> => {
+  return React.isValidElement<MenuItemProps>(child) ? child.type.hasOwnProperty('__MENU_ITEM__') : false;
+};

packages/retail-ui/components/MenuItem/index.tsx

@@ -1 +1 @@
-export { default, MenuItemProps, MenuItemState, MenuItemElement } from './MenuItem';
+export { default, MenuItemProps, MenuItemState, MenuItemElement, isMenuItem } from './MenuItem';

packages/retail-ui/components/Modal/ModalFooter.tsx

@@ -14,14 +14,12 @@ export interface FooterProps {
   sticky: boolean;
 }
 
-export function isFooter(child: React.ReactChild): child is React.ReactElement<FooterProps> {
-  return React.isValidElement<FooterProps>(child) && child.type === Footer;
-}
-
 /**
  * Футер модального окна.
  */
 export class Footer extends React.Component<FooterProps> {
+  public static __MODAL_FOOTER__ = true;
+
   public static defaultProps = {
     sticky: true,
   };
@@ -55,3 +53,7 @@ export class Footer extends React.Component<FooterProps> {
     return <div className={className}>{this.props.children}</div>;
   };
 }
+
+export function isFooter(child: React.ReactChild): child is React.ReactElement<FooterProps> {
+  return React.isValidElement<FooterProps>(child) && child.type.hasOwnProperty('__MODAL_FOOTER__');
+}

packages/retail-ui/components/Modal/ModalHeader.tsx

@@ -11,11 +11,9 @@ export interface HeaderProps {
   sticky: boolean;
 }
 
-export function isHeader(child: React.ReactChild): child is React.ReactElement<HeaderProps> {
-  return React.isValidElement<HeaderProps>(child) && child.type === Header;
-}
-
 export class Header extends React.Component<HeaderProps> {
+  public static __MODAL_HEADER__ = true;
+
   public static defaultProps = {
     sticky: true,
   };
@@ -51,3 +49,7 @@ export class Header extends React.Component<HeaderProps> {
     </div>
   );
 }
+
+export function isHeader(child: React.ReactChild): child is React.ReactElement<HeaderProps> {
+  return React.isValidElement<HeaderProps>(child) && child.type.hasOwnProperty('__MODAL_HEADER__');
+}

packages/retail-ui/components/internal/InternalMenu/InternalMenu.tsx

@@ -5,7 +5,8 @@ import ReactDOM from 'react-dom';
 import isActiveElement from './isActiveElement';
 import ScrollContainer, { ScrollContainerScrollState } from '../../ScrollContainer/ScrollContainer';
 
-import MenuItem, { MenuItemProps } from '../../MenuItem';
+import MenuItem, { MenuItemProps, isMenuItem } from '../../MenuItem';
+import { isMenuHeader } from '../../MenuHeader';
 
 import styles from './InternalMenu.less';
 import { createPropsGetter } from '../createPropsGetter';
@@ -117,11 +118,8 @@ export default class InternalMenu extends React.Component<MenuProps, MenuState>
             if (typeof child.type === 'string') {
               return child;
             }
-            const isMenuItem = child && (child.type as typeof MenuItem).__MENU_ITEM__;
 
-            const isMenuHeader = child && (child.type as typeof MenuItem).__MENU_HEADER__;
-
-            if (enableIconPadding && (isMenuItem || isMenuHeader)) {
+            if (enableIconPadding && (isMenuItem(child) || isMenuHeader(child))) {
               child = React.cloneElement(child, {
                 _enableIconPadding: true,
               });

packages/retail-ui/components/internal/InternalMenu/isActiveElement.tsx

@@ -1,12 +1,6 @@
 import * as React from 'react';
-import MenuItem, { MenuItemProps } from '../../MenuItem';
+import MenuItem, { MenuItemProps, isMenuItem } from '../../MenuItem';
 
 export default function isActiveElement(element: any): element is React.ComponentElement<MenuItemProps, MenuItem> {
-  return (
-    element &&
-    element.type &&
-    // FIXME: bad typings
-    element.type === MenuItem &&
-    !element.props.disabled
-  );
+  return isMenuItem(element) && !element.props.disabled;
 }