WB-554: update components for use with hot-loading (#390)

Khan · Apr 30, 2019 · 8e577a1 · 8e577a1
1 parent 04d9519
commit 8e577a1
Show file tree

Hide file tree

Showing 13 changed files with 46 additions and 25 deletions.
diff --git a/packages/wonder-blocks-dropdown/components/action-item.js b/packages/wonder-blocks-dropdown/components/action-item.js
@@ -94,6 +94,10 @@ export default class ActionItem extends React.Component<ActionProps> {
     };
 
     static contextTypes = {router: PropTypes.any};
+    static __IS_ACTION_ITEM__ = true;
+    static isClassOf(instance: React.Element<any>) {
+        return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
+    }
 
     render() {
         const {

diff --git a/packages/wonder-blocks-dropdown/components/action-menu.js b/packages/wonder-blocks-dropdown/components/action-menu.js
@@ -139,11 +139,8 @@ export default class ActionMenu extends React.Component<MenuProps, State> {
         return React.Children.toArray(children)
             .filter(Boolean)
             .map((item) => {
-                const {
-                    type,
-                    props: {disabled, value},
-                } = item;
-                if (type === ActionItem) {
+                const {disabled, value} = item.props;
+                if (ActionItem.isClassOf(item)) {
                     return {
                         component: item,
                         focusable: !disabled,
@@ -152,7 +149,7 @@ export default class ActionMenu extends React.Component<MenuProps, State> {
                             onClick: this.handleItemSelected,
                         },
                     };
-                } else if (type === OptionItem) {
+                } else if (OptionItem.isClassOf(item)) {
                     return {
                         component: item,
                         focusable: !disabled,

diff --git a/packages/wonder-blocks-dropdown/components/dropdown.js b/packages/wonder-blocks-dropdown/components/dropdown.js
@@ -488,7 +488,7 @@ export default class Dropdown extends React.Component<DropdownProps, State> {
                 ]}
             >
                 {items.map((item, index) => {
-                    if (item.component.type === SeparatorItem) {
+                    if (SeparatorItem.isClassOf(item.component)) {
                         return item.component;
                     } else {
                         if (item.focusable) {

diff --git a/packages/wonder-blocks-dropdown/components/option-item.js b/packages/wonder-blocks-dropdown/components/option-item.js
@@ -80,6 +80,10 @@ export default class OptionItem extends React.Component<OptionProps> {
     };
 
     static contextTypes = {router: PropTypes.any};
+    static __IS_OPTION_ITEM__ = true;
+    static isClassOf(instance: React.Element<any>) {
+        return instance && instance.type && instance.type.__IS_OPTION_ITEM__;
+    }
 
     getCheckComponent() {
         if (this.props.variant === "check") {

diff --git a/packages/wonder-blocks-dropdown/components/separator-item.js b/packages/wonder-blocks-dropdown/components/separator-item.js
@@ -13,6 +13,11 @@ import {View} from "@khanacademy/wonder-blocks-core";
  * A separator used in a dropdown menu.
  */
 export default class SeparatorItem extends React.Component<{}> {
+    static __IS_SEPARATOR_ITEM__ = true;
+    static isClassOf(instance: React.Element<any>) {
+        return instance && instance.type && instance.type.__IS_SEPARATOR_ITEM__;
+    }
+
     render() {
         return <View style={styles.separator} />;
     }

diff --git a/packages/wonder-blocks-grid/components/cell.js b/packages/wonder-blocks-grid/components/cell.js
@@ -63,6 +63,11 @@ export default class Cell extends React.Component<Props> {
         cols: 0,
     };
 
+    static __IS_CELL__ = true;
+    static isClassOf(instance: React.Element<any>) {
+        return instance && instance.type && instance.type.__IS_CELL__;
+    }
+
     static getCols(props: Props, mediaSize: MediaSize) {
         // If no option was specified then we just return undefined,
         // components may handle this case differently.

diff --git a/packages/wonder-blocks-grid/components/row.js b/packages/wonder-blocks-grid/components/row.js
@@ -97,7 +97,7 @@ export default class Row extends React.Component<Props> {
                             // Flow doesn't let us check .type on a non-null React.Node so
                             // we have to cast it to any.
                             (item: any) =>
-                                item && item.type === Cell
+                                Cell.isClassOf(item)
                                     ? Cell.shouldDisplay(item.props, mediaSize)
                                     : true,
                         )

diff --git a/packages/wonder-blocks-modal/components/modal-content.js b/packages/wonder-blocks-modal/components/modal-content.js
@@ -23,6 +23,11 @@ export default class ModalContent extends React.Component<Props> {
         scrollOverflow: true,
     };
 
+    static __IS_MODAL_CONTENT__ = true;
+    static isClassOf(instance: any) {
+        return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
+    }
+
     render() {
         const {header, scrollOverflow, style, children} = this.props;
 
@@ -35,9 +40,7 @@ export default class ModalContent extends React.Component<Props> {
                             scrollOverflow && styles.scrollOverflow,
                         ]}
                     >
-                        {!header ||
-                        (typeof header === "object" &&
-                            header.type === ModalHeader) ? (
+                        {!header || ModalHeader.isClassOf(header) ? (
                             header
                         ) : (
                             <ModalHeader>{header}</ModalHeader>

diff --git a/packages/wonder-blocks-modal/components/modal-footer.js b/packages/wonder-blocks-modal/components/modal-footer.js
@@ -12,6 +12,11 @@ type Props = {|
 |};
 
 export default class ModalFooter extends React.Component<Props> {
+    static __IS_MODAL_FOOTER__ = true;
+    static isClassOf(instance: any) {
+        return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
+    }
+
     render() {
         const {style, children} = this.props;
         return <View style={[styles.footer, style]}>{children}</View>;

diff --git a/packages/wonder-blocks-modal/components/modal-header.js b/packages/wonder-blocks-modal/components/modal-header.js
@@ -18,6 +18,11 @@ export default class ModalHeader extends React.Component<Props> {
         color: "dark",
     };
 
+    static __IS_MODAL_HEADER__ = true;
+    static isClassOf(instance: any) {
+        return instance && instance.type && instance.type.__IS_MODAL_HEADER__;
+    }
+
     render() {
         const {style, color, children} = this.props;
         return (

diff --git a/packages/wonder-blocks-modal/components/modal-panel.js b/packages/wonder-blocks-modal/components/modal-panel.js
@@ -89,14 +89,11 @@ export default class ModalPanel extends React.Component<Props> {
             showCloseButton,
         } = this.props;
 
-        const mainContent =
-            content &&
-            typeof content === "object" &&
-            content.type === ModalContent ? (
-                ((content: any): React.Element<typeof ModalContent>)
-            ) : (
-                <ModalContent>{content}</ModalContent>
-            );
+        const mainContent = ModalContent.isClassOf(content) ? (
+            ((content: any): React.Element<typeof ModalContent>)
+        ) : (
+            <ModalContent>{content}</ModalContent>
+        );
 
         if (!mainContent) {
             return mainContent;

diff --git a/packages/wonder-blocks-modal/components/one-column-modal/small-one-column-modal.js b/packages/wonder-blocks-modal/components/one-column-modal/small-one-column-modal.js
@@ -28,9 +28,7 @@ export default class SmallOneColumnModal extends React.Component<Props> {
                     </View>
                     {!!footer && (
                         <View style={styles.smallFooter}>
-                            {!footer ||
-                            (typeof footer === "object" &&
-                                footer.type === ModalFooter) ? (
+                            {!footer || ModalFooter.isClassOf(footer) ? (
                                 footer
                             ) : (
                                 <ModalFooter>{footer}</ModalFooter>

diff --git a/packages/wonder-blocks-modal/components/two-column-modal/small-two-column-modal.js b/packages/wonder-blocks-modal/components/two-column-modal/small-two-column-modal.js
@@ -56,9 +56,7 @@ export default class SmallTwoColumnModal extends React.Component<Props> {
                     </View>
                     {!!footer && (
                         <View style={styles.smallFooter}>
-                            {!footer ||
-                            (typeof footer === "object" &&
-                                footer.type === ModalFooter) ? (
+                            {!footer || ModalFooter.isClassOf(footer) ? (
                                 footer
                             ) : (
                                 <ModalFooter>{footer}</ModalFooter>