From 365b80bedb2bae43b0a29e64093714fbe9c72efe Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Wed, 3 Jan 2018 16:36:18 -0600 Subject: [PATCH] refactor(framework-delegate): conditionally use for host element for modal and nav --- packages/react/package-lock.json | 48 +++++++++---------- packages/react/package.json | 4 +- .../react/src/react-framework-delegate.ts | 15 ++++-- 3 files changed, 38 insertions(+), 29 deletions(-) diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index ca5aa9eb30..305f1e1091 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -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", diff --git a/packages/react/package.json b/packages/react/package.json index 3d263f0c0c..541fe2290e 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -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": { diff --git a/packages/react/src/react-framework-delegate.ts b/packages/react/src/react-framework-delegate.ts index 9eb1685f15..1ad2293dda 100644 --- a/packages/react/src/react-framework-delegate.ts +++ b/packages/react/src/react-framework-delegate.ts @@ -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 { @@ -36,4 +37,12 @@ const Delegate: FrameworkDelegate = { removeViewFromDom: removeViewFromDom, }; -export { Delegate } \ No newline at end of file +export { Delegate } + + +export function shouldWrapInIonPage(element: HTMLElement) { + if (element.tagName.toUpperCase() === 'ION-NAV' || element.classList.contains('modal-wrapper')) { + return true; + } + return false; +} \ No newline at end of file