Phenome: use display name in react children

Fixes #2459

Author: nolimits4web

src/phenome/components/fab.jsx

@@ -44,8 +44,8 @@ export default {
         const child = defaultSlots[i];
         let isRoot;
         if (process.env.COMPILER === 'react') {
-          const tag = child.type && child.type.name;
-          if (tag === 'F7FabButtons') isRoot = true;
+          const tag = child.type && (child.type.displayName || child.type.name);
+          if (tag === 'F7FabButtons' || tag === 'f7-fab-buttons') isRoot = true;
         }
         if (process.env.COMPILER === 'vue') {
           if (child.tag && child.tag.indexOf('fab-buttons') >= 0) isRoot = true;

src/phenome/components/list-item-content.jsx

@@ -123,13 +123,13 @@ export default {
     flattenSlots.forEach((child) => {
       if (typeof child === 'undefined') return;
       if (process.env.COMPILER === 'react') {
-        const tag = child.type && child.type.name;
-        if (tag === 'F7Input') {
+        const tag = child.type && (child.type.displayName || child.type.name);
+        if (tag === 'F7Input' || tag === 'f7-input') {
           hasInput = true;
           if (child.props && child.props.info) hasInputInfo = true;
           if (child.props && child.props.errorMessage && child.props.errorMessageForce) hasInputErrorMessage = true;
         }
-        if (tag === 'F7Label') {
+        if (tag === 'F7Label' || tag === 'f7-label') {
           if (child.props && child.props.inline) hasInlineLabel = true;
         }
       }

src/phenome/components/list.jsx

@@ -57,7 +57,7 @@ export default {
       if (typeof child === 'undefined') return;
       let tag;
       if (process.env.COMPILER === 'react') {
-        tag = child.type && child.type.name;
+        tag = child.type && (child.type.displayName || child.type.name);
         if (!tag && typeof child.type === 'string') {
           tag = child.type;
         }
@@ -67,13 +67,15 @@ export default {
       }
 
       if (
-        (!tag && process.env.COMPILER === 'react') ||
-        (tag && !(
-          tag === 'li' ||
-          tag === 'F7ListItem' ||
-          tag === 'F7ListButton' ||
-          tag.indexOf('list-item') >= 0 ||
-          tag.indexOf('list-button') >= 0
+        (!tag && process.env.COMPILER === 'react')
+        || (tag && !(
+          tag === 'li'
+          || tag === 'F7ListItem'
+          || tag === 'F7ListButton'
+          || tag.indexOf('list-item') >= 0
+          || tag.indexOf('list-button') >= 0
+          || tag.indexOf('f7-list-item') >= 0
+          || tag.indexOf('f7-list-button') >= 0
         ))
       ) {
         if (wasUlChild) rootChildrenAfterList.push(child);

src/phenome/components/messagebar.jsx

@@ -88,11 +88,11 @@ export default {
         if (typeof child === 'undefined') return;
         let tag;
         tag = child.tag; // phenome-vue-line
-        tag = child.type && child.type.name; // phenome-react-line
+        tag = child.type && (child.type.displayName || child.type.name); // phenome-react-line
 
-        if (tag && (tag.indexOf('messagebar-attachments') >= 0 || tag === 'F7MessagebarAttachments')) {
+        if (tag && (tag.indexOf('messagebar-attachments') >= 0 || tag === 'F7MessagebarAttachments' || tag === 'f7-messagebar-attachments')) {
           messagebarAttachmentsEl = child;
-        } else if (tag && (tag.indexOf('messagebar-sheet') >= 0 || tag === 'F7MessagebarSheet')) {
+        } else if (tag && (tag.indexOf('messagebar-sheet') >= 0 || tag === 'F7MessagebarSheet' || tag === 'f7-messagebar-sheet')) {
           messagebarSheetEl = child;
         } else {
           innerEndEls.push(child);
@@ -125,11 +125,11 @@ export default {
             />
             {slotsAfterArea}
           </div>
-          {((sendLink && sendLink.length > 0) || slotsSendLink) &&
+          {((sendLink && sendLink.length > 0) || slotsSendLink) && (
             <F7Link onClick={self.onClickBound}>
               {slotsSendLink || sendLink}
             </F7Link>
-          }
+          )}
           {slotsInnerEnd}
           {innerEndEls}
         </div>

src/phenome/components/page.jsx

@@ -84,7 +84,7 @@ export default {
     // phenome-vue-next-line
     fixedTags = ('navbar toolbar tabbar subnavbar searchbar messagebar fab list-index').split(' ');
     // phenome-react-next-line
-    fixedTags = ('Navbar Toolbar Tabbar Subnavbar Searchbar Messagebar Fab ListIndex').split(' ').map(tagName => `F7${tagName}`);
+    fixedTags = ('navbar toolbar tabbar subnavbar searchbar messagebar fab list-index').split(' ').map(tagName => `f7-${tagName}`);
 
     let hasSubnavbar;
     let hasMessages;
@@ -96,13 +96,13 @@ export default {
         if (typeof child === 'undefined') return;
         let isFixedTag = false;
         if (process.env.COMPILER === 'react') {
-          const tag = child.type && child.type.name;
+          const tag = child.type && (child.type.displayName || child.type.name);
           if (!tag) {
             if (needsPageContent) staticList.push(child);
             return;
           }
-          if (tag === 'F7Subnavbar') hasSubnavbar = true;
-          if (typeof hasMessages === 'undefined' && tag === 'F7Messages') hasMessages = true;
+          if (tag === 'F7Subnavbar' || tag === 'f7-subnavbar') hasSubnavbar = true;
+          if (typeof hasMessages === 'undefined' && (tag === 'F7Messages' || tag === 'f7-messages')) hasMessages = true;
           if (fixedTags.indexOf(tag) >= 0) {
             isFixedTag = true;
           }

src/phenome/components/sheet.jsx

@@ -24,7 +24,7 @@ export default {
     // phenome-vue-next-line
     fixedTags = ('navbar toolbar tabbar subnavbar searchbar messagebar fab list-index').split(' ');
     // phenome-react-next-line
-    fixedTags = ('Navbar Toolbar Tabbar Subnavbar Searchbar Messagebar Fab ListIndex').split(' ').map(tagName => `F7${tagName}`);
+    fixedTags = ('navbar toolbar tabbar subnavbar searchbar messagebar fab list-index').split(' ').map(tagName => `f7-${tagName}`);
 
     const slotsDefault = self.slots.default;
 
@@ -33,7 +33,7 @@ export default {
         if (typeof child === 'undefined') return;
         let isFixedTag = false;
         if (process.env.COMPILER === 'react') {
-          const tag = child.type && child.type.name;
+          const tag = child.type && (child.type.displayName || child.type.name);
           if (!tag) {
             return;
           }