refactor(framework-delegate): conditionally use for host element for modal and nav

This commit is contained in:
Dan Bucholtz
2018-01-03 16:36:18 -06:00
parent 3604adf841
commit 365b80bedb
3 changed files with 38 additions and 29 deletions

View File

@ -5,15 +5,15 @@
"requires": true,
"dependencies": {
"@ionic/core": {
"version": "0.0.2-30",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-30.tgz",
"integrity": "sha512-s5a8QEdUJzGNapsfRCi4oACz9bZ0jTFQ+zmOvBdy+KKBhDnQqGYNDRAz9ED/T/Vkvk7IqX/QCkWs1I5/xw3k2g==",
"version": "0.0.2-32",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-32.tgz",
"integrity": "sha512-43Y6nzBM3HqnitRMcuXlX51XjfVDgHdQJQTf6Ybp+VXxJ6CxV/9cQ28XrvtESa40QRfCLHV5MRNwUajy7F4xJw==",
"dev": true
},
"@stencil/core": {
"version": "0.0.9-1",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.0.9-1.tgz",
"integrity": "sha512-kCcLfolV2QMVu4iAzIBxiJ9L90jaLRZRvR8ureuDVoAjBQ+VSk7jS3kMGMjnPEHk8ctamj60tGvlkEzYbSmpkg==",
"version": "0.1.1-0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.1.1-0.tgz",
"integrity": "sha512-F4frvyNcIJoWO+ht2Hw8nT7TS7IN0/WKx4vGUbdKWnSvIN4/V+gO5pu/Um3MccSEDFnp+VYMKEZk99scF2wX2g==",
"requires": {
"chokidar": "1.7.0",
"jsdom": "11.3.0",
@ -34,9 +34,9 @@
}
},
"@types/node": {
"version": "8.5.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-8.5.1.tgz",
"integrity": "sha512-SrmAO+NhnsuG/6TychSl2VdxBZiw/d6V+8j+DFo8O3PwFi+QeYXWHhAw+b170aSc6zYab6/PjEWRZHIDN9mNUw=="
"version": "8.5.5",
"resolved": "https://registry.npmjs.org/@types/node/-/node-8.5.5.tgz",
"integrity": "sha512-JRnfoh0Ll4ElmIXKxbUfcOodkGvcNHljct6mO1X9hE/mlrMzAx0hYCLAD7sgT53YAY1HdlpzUcV0CkmDqUqTuA=="
},
"abab": {
"version": "1.0.4",
@ -49,22 +49,22 @@
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
},
"acorn": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-5.2.1.tgz",
"integrity": "sha512-jG0u7c4Ly+3QkkW18V+NRDN+4bWHdln30NL1ZL2AvFZZmQe/BfopYCtghCKKVBUSetZ4QKcyA0pY6/4Gw8Pv8w=="
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-5.3.0.tgz",
"integrity": "sha512-Yej+zOJ1Dm/IMZzzj78OntP/r3zHEaKcyNoU2lAaxPtrseM6rF0xwqoz5Q5ysAiED9hTjI2hgtvLXitlCN1/Ug=="
},
"acorn-globals": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.1.0.tgz",
"integrity": "sha512-KjZwU26uG3u6eZcfGbTULzFcsoz6pegNKtHPksZPOUsiKo5bUmiBPa38FuHZ/Eun+XYh/JCCkS9AS3Lu4McQOQ==",
"requires": {
"acorn": "5.2.1"
"acorn": "5.3.0"
}
},
"ajv": {
"version": "5.5.1",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.1.tgz",
"integrity": "sha1-s4u4h22ehr7plJVqBOch6IskjrI=",
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
"integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
"requires": {
"co": "4.6.0",
"fast-deep-equal": "1.0.0",
@ -1532,7 +1532,7 @@
"resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz",
"integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=",
"requires": {
"ajv": "5.5.1",
"ajv": "5.5.2",
"har-schema": "2.0.0"
}
},
@ -1793,7 +1793,7 @@
"integrity": "sha512-aPZTDl4MplzQhx5bLztk6nzjbEslmO3Q3+z0WpCMutL1XJDhZIRzir6R1Y8S84LgeT/7jhQvgtUMkY6oPwvlUw==",
"requires": {
"abab": "1.0.4",
"acorn": "5.2.1",
"acorn": "5.3.0",
"acorn-globals": "4.1.0",
"array-equal": "1.0.0",
"content-type-parser": "1.0.2",
@ -1804,7 +1804,7 @@
"html-encoding-sniffer": "1.0.2",
"nwmatcher": "1.4.3",
"parse5": "3.0.3",
"pn": "1.0.0",
"pn": "1.1.0",
"request": "2.83.0",
"request-promise-native": "1.0.5",
"sax": "1.2.4",
@ -2258,7 +2258,7 @@
"resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
"integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
"requires": {
"@types/node": "8.5.1"
"@types/node": "8.5.5"
}
},
"path-exists": {
@ -2313,9 +2313,9 @@
}
},
"pn": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/pn/-/pn-1.0.0.tgz",
"integrity": "sha1-HPWjCw2AbNGPiPxBprXUrWFbO6k="
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
"integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA=="
},
"prelude-ls": {
"version": "1.1.2",
@ -2595,7 +2595,7 @@
"resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.2.5.tgz",
"integrity": "sha512-RxzILEgDOFvUgnuPVXNCfZ5f7Mv6RlQ1OyW925kmWRCgmV2V+g6G5qmKUmgW2HUQxp0YqqvRkqbez4Q/o6fRog==",
"requires": {
"acorn": "5.2.1",
"acorn": "5.3.0",
"estree-walker": "0.5.1",
"magic-string": "0.22.4",
"resolve": "1.5.0",

View File

@ -33,8 +33,8 @@
],
"devDependencies": {
"@ionic/core": "next",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react": "latest",
"react-dom": "latest",
"typescript": "~2.5.2"
},
"dependencies": {

View File

@ -4,7 +4,9 @@ import ReactDOM from 'react-dom';
import { FrameworkDelegate } from '@ionic/core';
export function attachViewToDom(parentElement: HTMLElement, reactComponent: any, propsOrData: any, classesToAdd: string[]) {
const wrappingDiv = document.createElement('div');
console.log('parentElement: ', parentElement);
console.log('reactComponent: ', reactComponent);
const wrappingDiv = shouldWrapInIonPage(parentElement) ? document.createElement('ion-page') : document.createElement('div');
if (classesToAdd) {
for (const clazz of classesToAdd) {
wrappingDiv.classList.add(clazz);
@ -22,7 +24,6 @@ export function attachViewToDom(parentElement: HTMLElement, reactComponent: any,
reactElement: reactElement,
instance: mountedComponentInstance
});
}
export function removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement): Promise<any> {
@ -36,4 +37,12 @@ const Delegate: FrameworkDelegate = {
removeViewFromDom: removeViewFromDom,
};
export { Delegate }
export { Delegate }
export function shouldWrapInIonPage(element: HTMLElement) {
if (element.tagName.toUpperCase() === 'ION-NAV' || element.classList.contains('modal-wrapper')) {
return true;
}
return false;
}