From a6d5a6932a65f5d38acba7c586acb32bb39d2dc1 Mon Sep 17 00:00:00 2001 From: Daniel Schmidt Date: Wed, 6 Feb 2019 13:06:43 +0100 Subject: [PATCH 1/8] fix(Dropdown): ref was called without current Additionally this adds some safe guards, so we don't fail with missing properties --- package-lock.json | 185 +++++++++++++++++++++++-------------- package.json | 2 +- src/Dropdown/Dropdown.js | 15 ++- src/Form/FieldTextarea.js | 6 +- src/Modal/ModalContents.js | 39 +++++--- src/Select/Select.js | 4 +- src/Tooltip/Tooltip.js | 9 +- 7 files changed, 165 insertions(+), 95 deletions(-) diff --git a/package-lock.json b/package-lock.json index b2a771923..a8d445773 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5389,7 +5389,7 @@ "dev": true, "optional": true, "requires": { - "amdefine": "1.0.1" + "amdefine": ">=0.0.4" } } } @@ -7025,7 +7025,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.1.1", @@ -7084,7 +7085,8 @@ "version": "0.4.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz", "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=", - "dev": true + "dev": true, + "optional": true }, "bcrypt-pbkdf": { "version": "1.0.1", @@ -7101,6 +7103,7 @@ "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=", "dev": true, + "optional": true, "requires": { "inherits": "~2.0.0" } @@ -7110,6 +7113,7 @@ "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", "dev": true, + "optional": true, "requires": { "hoek": "2.x.x" } @@ -7119,6 +7123,7 @@ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.7.tgz", "integrity": "sha1-Pv/DxQ4ABTH7cg6v+A8K6O8jz1k=", "dev": true, + "optional": true, "requires": { "balanced-match": "^0.4.1", "concat-map": "0.0.1" @@ -7128,7 +7133,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz", "integrity": "sha1-mXjOMXOIxkmth5MCjDR37wRKi1E=", - "dev": true + "dev": true, + "optional": true }, "caseless": { "version": "0.12.0", @@ -7148,13 +7154,15 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "combined-stream": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz", "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=", "dev": true, + "optional": true, "requires": { "delayed-stream": "~1.0.0" } @@ -7163,25 +7171,29 @@ "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", - "dev": true + "dev": true, + "optional": true }, "cryptiles": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz", "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", "dev": true, + "optional": true, "requires": { "boom": "2.x.x" } @@ -7226,7 +7238,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "dev": true + "dev": true, + "optional": true }, "delegates": { "version": "1.0.0", @@ -7263,7 +7276,8 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz", "integrity": "sha1-4QgOBljjALBilJkMxw4VAiNf1VA=", - "dev": true + "dev": true, + "optional": true }, "forever-agent": { "version": "0.6.1", @@ -7288,13 +7302,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", - "dev": true + "dev": true, + "optional": true }, "fstream": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=", "dev": true, + "optional": true, "requires": { "graceful-fs": "^4.1.2", "inherits": "~2.0.0", @@ -7355,6 +7371,7 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", "dev": true, + "optional": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -7368,7 +7385,8 @@ "version": "4.1.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", - "dev": true + "dev": true, + "optional": true }, "har-schema": { "version": "1.0.5", @@ -7400,6 +7418,7 @@ "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", "dev": true, + "optional": true, "requires": { "boom": "2.x.x", "cryptiles": "2.x.x", @@ -7411,7 +7430,8 @@ "version": "2.16.3", "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", - "dev": true + "dev": true, + "optional": true }, "http-signature": { "version": "1.1.1", @@ -7430,6 +7450,7 @@ "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, + "optional": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -7439,7 +7460,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.4", @@ -7453,6 +7475,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7468,7 +7491,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", - "dev": true + "dev": true, + "optional": true }, "isstream": { "version": "0.1.2", @@ -7551,13 +7575,15 @@ "version": "1.27.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.27.0.tgz", "integrity": "sha1-gg9XIpa70g7CXtVeW13oaeVDbrE=", - "dev": true + "dev": true, + "optional": true }, "mime-types": { "version": "2.1.15", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.15.tgz", "integrity": "sha1-pOv1BkCUVpI3uM9wBGd20J/JKu0=", "dev": true, + "optional": true, "requires": { "mime-db": "~1.27.0" } @@ -7567,6 +7593,7 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7575,13 +7602,15 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "mkdirp": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7641,7 +7670,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "oauth-sign": { "version": "0.8.2", @@ -7662,6 +7692,7 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7695,7 +7726,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", - "dev": true + "dev": true, + "optional": true }, "performance-now": { "version": "0.2.0", @@ -7708,7 +7740,8 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz", "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=", - "dev": true + "dev": true, + "optional": true }, "punycode": { "version": "1.4.1", @@ -7751,6 +7784,7 @@ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.9.tgz", "integrity": "sha1-z3jsb0ptHrQ9JkiMrJfwQudLf8g=", "dev": true, + "optional": true, "requires": { "buffer-shims": "~1.0.0", "core-util-is": "~1.0.0", @@ -7797,6 +7831,7 @@ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz", "integrity": "sha1-wjOOxkPfeht/5cVPqG9XQopV8z0=", "dev": true, + "optional": true, "requires": { "glob": "^7.0.5" } @@ -7805,7 +7840,8 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz", "integrity": "sha1-0mPKVGls2KMGtcplUekt5XkY++c=", - "dev": true + "dev": true, + "optional": true }, "semver": { "version": "5.3.0", @@ -7833,6 +7869,7 @@ "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", "dev": true, + "optional": true, "requires": { "hoek": "2.x.x" } @@ -7869,6 +7906,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7880,6 +7918,7 @@ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz", "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.0.1" } @@ -7896,6 +7935,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7912,6 +7952,7 @@ "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz", "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=", "dev": true, + "optional": true, "requires": { "block-stream": "*", "fstream": "^1.0.2", @@ -7973,7 +8014,8 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", - "dev": true + "dev": true, + "optional": true }, "uuid": { "version": "3.0.1", @@ -8006,7 +8048,8 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true } } }, @@ -8954,6 +8997,7 @@ "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", "dev": true, + "optional": true, "requires": { "hoek": "2.x.x" } @@ -9015,7 +9059,8 @@ "version": "2.16.3", "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", - "dev": true + "dev": true, + "optional": true }, "http-signature": { "version": "1.1.1", @@ -10952,11 +10997,11 @@ "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" } } } @@ -11029,11 +11074,11 @@ "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" } } } @@ -11117,10 +11162,10 @@ "integrity": "sha1-JmswS5EJYH1gdIR0OUZ2mC9mDfQ=", "dev": true, "requires": { - "find-up": "1.1.2", - "istanbul-lib-instrument": "1.9.1", - "object-assign": "4.1.1", - "test-exclude": "2.1.3" + "find-up": "^1.1.2", + "istanbul-lib-instrument": "^1.1.4", + "object-assign": "^4.1.0", + "test-exclude": "^2.1.1" } }, "babel-plugin-jest-hoist": { @@ -11150,11 +11195,11 @@ "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" } }, "test-exclude": { @@ -11163,11 +11208,11 @@ "integrity": "sha1-qNiWjh2oMmb5hk8oUsVeIg8GQ0o=", "dev": true, "requires": { - "arrify": "1.0.1", - "micromatch": "2.3.11", - "object-assign": "4.1.1", - "read-pkg-up": "1.0.1", - "require-main-filename": "1.0.1" + "arrify": "^1.0.1", + "micromatch": "^2.3.11", + "object-assign": "^4.1.0", + "read-pkg-up": "^1.0.1", + "require-main-filename": "^1.0.1" } }, "yargs": { @@ -12758,13 +12803,13 @@ "integrity": "sha1-BW0UJE89zBzq3+aK+c/wxUc6M/M=", "dev": true, "requires": { - "cli-usage": "0.1.8", - "growly": "1.3.0", - "lodash.clonedeep": "3.0.2", - "minimist": "1.2.0", - "semver": "5.6.0", - "shellwords": "0.1.1", - "which": "1.3.0" + "cli-usage": "^0.1.1", + "growly": "^1.2.0", + "lodash.clonedeep": "^3.0.0", + "minimist": "^1.1.1", + "semver": "^5.1.0", + "shellwords": "^0.1.0", + "which": "^1.0.5" }, "dependencies": { "lodash._baseclone": { @@ -12773,12 +12818,12 @@ "integrity": "sha1-MDUZv2OT/n5C802LYw73eU41Qrc=", "dev": true, "requires": { - "lodash._arraycopy": "3.0.0", - "lodash._arrayeach": "3.0.0", - "lodash._baseassign": "3.2.0", - "lodash._basefor": "3.0.3", - "lodash.isarray": "3.0.4", - "lodash.keys": "3.1.2" + "lodash._arraycopy": "^3.0.0", + "lodash._arrayeach": "^3.0.0", + "lodash._baseassign": "^3.0.0", + "lodash._basefor": "^3.0.0", + "lodash.isarray": "^3.0.0", + "lodash.keys": "^3.0.0" } }, "lodash.clonedeep": { @@ -12787,8 +12832,8 @@ "integrity": "sha1-oKHkDYKl6on/WxR7hETtY9koJ9s=", "dev": true, "requires": { - "lodash._baseclone": "3.3.0", - "lodash._bindcallback": "3.0.1" + "lodash._baseclone": "^3.0.0", + "lodash._bindcallback": "^3.0.0" } }, "minimist": { @@ -17783,12 +17828,12 @@ "integrity": "sha1-iPdj10BA9fDCVrYWPbOZvxEKxxU=", "dev": true, "requires": { - "exec-sh": "0.2.2", - "fb-watchman": "1.9.2", - "minimatch": "3.0.4", - "minimist": "1.2.0", - "walker": "1.0.7", - "watch": "0.10.0" + "exec-sh": "^0.2.0", + "fb-watchman": "^1.8.0", + "minimatch": "^3.0.2", + "minimist": "^1.1.1", + "walker": "~1.0.5", + "watch": "~0.10.0" }, "dependencies": { "minimatch": { @@ -17797,7 +17842,7 @@ "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "requires": { - "brace-expansion": "1.1.8" + "brace-expansion": "^1.1.7" } }, "minimist": { diff --git a/package.json b/package.json index 4cc60487c..d5ef19aa9 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ }, "peerDependencies": { "cnvs": "1.1.14", - "react": "^15.0.0 || ^16.0.0", + "react": ">= 16.0.0", "react-transition-group": "1.2.x", "react-gemini-scrollbar": "^2.1.5 || ^2.3.0" }, diff --git a/src/Dropdown/Dropdown.js b/src/Dropdown/Dropdown.js index 6baf51191..0d2776c9d 100644 --- a/src/Dropdown/Dropdown.js +++ b/src/Dropdown/Dropdown.js @@ -161,8 +161,11 @@ class Dropdown extends Util.mixin(BindMixin) { const spaceAroundDropdownButton = DOMUtil.getNodeClearance( this.dropdownWrapperRef ); - const menuHeight = - this.state.menuHeight || this.dropdownMenuRef.firstChild.clientHeight; + const dropdownChildHeight = + this.dropdownMenuRef && this.dropdownMenuRef.current + ? this.dropdownMenuRef.current.firstChild.clientHeight + : 0; + const menuHeight = this.state.menuHeight || dropdownChildHeight; const isMenuTallerThanBottom = menuHeight > spaceAroundDropdownButton.bottom; const isMenuTallerThanTop = menuHeight > spaceAroundDropdownButton.top; @@ -227,8 +230,12 @@ class Dropdown extends Util.mixin(BindMixin) { // If we don't already know the menu height, we need to set the menu // position to a default state to trigger its recalculation on the next // render. - if (this.state.menuHeight == null && this.dropdownWrapperRef) { - const buttonPosition = this.dropdownWrapperRef.getBoundingClientRect(); + if ( + this.state.menuHeight == null && + this.dropdownWrapperRef && + this.dropdownWrapperRef.current + ) { + const buttonPosition = this.dropdownWrapperRef.current.getBoundingClientRect(); state.menuDirection = "down"; state.menuPositionStyle = { diff --git a/src/Form/FieldTextarea.js b/src/Form/FieldTextarea.js index f1ed1838a..35294006b 100644 --- a/src/Form/FieldTextarea.js +++ b/src/Form/FieldTextarea.js @@ -28,18 +28,18 @@ class FieldTextarea extends FieldInput { componentDidMount() { super.componentDidMount(...arguments); - if (!this.inputElementRef) { + if (!this.inputElementRef && !this.inputElementRef.current) { return; } if (this.isEditing() || this.props.writeType === "input") { - this.updateTextareaHeight(this.inputElementRef); + this.updateTextareaHeight(this.inputElementRef.current); // React throws a warning if children are specified in an element with // contenteditable="true", so this hack allows us to set a default value // for this form field. if (this.props.startValue) { - this.inputElementRef.textContent = this.props.startValue; + this.inputElementRef.current.textContent = this.props.startValue; } } } diff --git a/src/Modal/ModalContents.js b/src/Modal/ModalContents.js index 05ca29a29..9746e9ff7 100644 --- a/src/Modal/ModalContents.js +++ b/src/Modal/ModalContents.js @@ -153,21 +153,25 @@ class ModalContents extends Util.mixin(BindMixin) { let modalHeight = 0; let innerContentHeight = 0; - if (headerRef != null) { - headerHeight = Math.ceil(headerRef.getBoundingClientRect().height); + if (headerRef != null && headerRef.current != null) { + headerHeight = Math.ceil( + headerRef.current.getBoundingClientRect().height + ); } - if (footerRef != null) { - footerHeight = Math.ceil(footerRef.getBoundingClientRect().height); + if (footerRef != null && footerRef.current != null) { + footerHeight = Math.ceil( + footerRef.current.getBoundingClientRect().height + ); } - if (modalRef != null) { - modalHeight = Math.ceil(modalRef.getBoundingClientRect().height); + if (modalRef != null && modalRef.current != null) { + modalHeight = Math.ceil(modalRef.current.getBoundingClientRect().height); } - if (innerContentRef != null) { + if (innerContentRef != null && innerContentRef.current != null) { innerContentHeight = Math.ceil( - innerContentRef.getBoundingClientRect().height + innerContentRef.current.getBoundingClientRect().height ); } @@ -211,11 +215,14 @@ class ModalContents extends Util.mixin(BindMixin) { } } - if (innerContentContainerRef != null) { - innerContentContainerRef.style.height = nextInnerContentContainerHeight; + if ( + innerContentContainerRef != null && + innerContentContainerRef.current != null + ) { + innerContentContainerRef.current.style.height = nextInnerContentContainerHeight; } - if (modalRef != null) { - modalRef.style.height = nextModalHeight; + if (modalRef != null && modalRef.current != null) { + modalRef.current.style.height = nextModalHeight; } this.triggerGeminiUpdate(); @@ -355,8 +362,12 @@ class ModalContents extends Util.mixin(BindMixin) { } triggerGeminiUpdate() { - if (this.geminiRef != null && this.geminiRef.scrollbar != null) { - this.geminiRef.scrollbar.update(); + if ( + this.geminiRef != null && + this.geminiRef.current != null && + this.geminiRef.current.scrollbar != null + ) { + this.geminiRef.current.scrollbar.update(); } } diff --git a/src/Select/Select.js b/src/Select/Select.js index e7984a32e..1cf3bc1b9 100644 --- a/src/Select/Select.js +++ b/src/Select/Select.js @@ -27,7 +27,9 @@ export default class Select extends React.Component { ).set; nativeInputValueSetter.call(this.input, selectedOption.id); - this.input.dispatchEvent(new Event("input", { bubbles: true })); + if (this.input && this.input.current) { + this.input.current.dispatchEvent(new Event("input", { bubbles: true })); + } } render() { diff --git a/src/Tooltip/Tooltip.js b/src/Tooltip/Tooltip.js index be5b8209d..c45508eb6 100644 --- a/src/Tooltip/Tooltip.js +++ b/src/Tooltip/Tooltip.js @@ -147,7 +147,12 @@ class Tooltip extends Util.mixin(BindMixin) { } getIdealLocation(anchor, position) { - if (!this.triggerNode || !this.tooltipNode) { + if ( + !this.triggerNode || + !this.triggerNode.current || + !this.tooltipNode || + !this.tooltipNode.current + ) { return { anchor: "center", position: "top", @@ -157,7 +162,7 @@ class Tooltip extends Util.mixin(BindMixin) { const isVertical = this.isVertical(position); const clearance = DOMUtil.getNodeClearance(this.triggerNode); - const tooltipRect = this.tooltipNode.getBoundingClientRect(); + const tooltipRect = this.tooltipNode.current.getBoundingClientRect(); const tooltipHeight = tooltipRect.height + ARROW_SIZE; const tooltipWidth = tooltipRect.width + ARROW_SIZE; From f41073727e4bc3e07f3023466ed50b5ff7af88da Mon Sep 17 00:00:00 2001 From: Daniel Schmidt Date: Mon, 11 Feb 2019 16:44:08 +0100 Subject: [PATCH 2/8] chore: add 16.8 as react version --- .travis.yml | 1 + install_react.sh | 1 + 2 files changed, 2 insertions(+) diff --git a/.travis.yml b/.travis.yml index bc8ddcc78..8a8cc1868 100644 --- a/.travis.yml +++ b/.travis.yml @@ -24,3 +24,4 @@ env: matrix: - REACT_VERSION=15.6 - REACT_VERSION=16.7 + - REACT_VERSION=16.8 diff --git a/install_react.sh b/install_react.sh index e9ebb2a47..d4bfa62a1 100755 --- a/install_react.sh +++ b/install_react.sh @@ -2,3 +2,4 @@ if [ "$REACT_VERSION" = "15.6" ]; then npm install react@15.6 react-dom@15.6; fi if [ "$REACT_VERSION" = "16.7" ]; then npm install react@16.7 react-dom@16.7; fi +if [ "$REACT_VERSION" = "16.8" ]; then npm install react@16.8 react-dom@16.8; fi From 9625be65a6af1dbe2d2baf080c6c464da8bb7a11 Mon Sep 17 00:00:00 2001 From: Dmitriy Rozhkov Date: Tue, 12 Feb 2019 10:56:34 +0100 Subject: [PATCH 3/8] ci: split lint and test stages --- .travis.yml | 8 ++++++++ package.json | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 8a8cc1868..bd4c5342c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,6 +6,14 @@ node_js: jobs: include: + - stage: lint + name: "Lint && Dist" + script: + - npm run lint && npm run dist + - stage: test + name: "Unit tests" + script: + - npm run test # Define the release stage that runs semantic-release - stage: release node_js: lts/* diff --git a/package.json b/package.json index d5ef19aa9..9eef2dffa 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "predist-src": "rm -rf ./lib", "dist-src": "cp -r ./src ./lib && find ./lib -name '__tests__' -type d -exec rm -r '{}' + && ./node_modules/.bin/babel lib --out-dir lib", "livereload": "NODE_ENV='development' ./node_modules/.bin/gulp docs:livereload", - "test": "npm run lint && npm run dist && NODE_PATH=node_modules jest --config=jest/config.json --no-cache", + "test": "NODE_PATH=node_modules jest --config=jest/config.json --no-cache", "release": "npm version -m 'Version %s'", "release:major": "npm run release -- major", "release:minor": "npm run release -- minor", From f37e452f358d5d7b6e36f6da3538592228b708ba Mon Sep 17 00:00:00 2001 From: Dmitriy Rozhkov Date: Tue, 12 Feb 2019 10:59:01 +0100 Subject: [PATCH 4/8] feat: drop react@15 BREAKING CHANGE: react 15 support is dropped --- .travis.yml | 1 - install_react.sh | 1 - package-lock.json | 151 ++++++++++++++++++++++------------------------ package.json | 9 +-- 4 files changed, 78 insertions(+), 84 deletions(-) diff --git a/.travis.yml b/.travis.yml index bd4c5342c..d36ce59dc 100644 --- a/.travis.yml +++ b/.travis.yml @@ -30,6 +30,5 @@ install: - ./install_react.sh env: matrix: - - REACT_VERSION=15.6 - REACT_VERSION=16.7 - REACT_VERSION=16.8 diff --git a/install_react.sh b/install_react.sh index d4bfa62a1..9faaee68b 100755 --- a/install_react.sh +++ b/install_react.sh @@ -1,5 +1,4 @@ #!/bin/bash -if [ "$REACT_VERSION" = "15.6" ]; then npm install react@15.6 react-dom@15.6; fi if [ "$REACT_VERSION" = "16.7" ]; then npm install react@16.7 react-dom@16.7; fi if [ "$REACT_VERSION" = "16.8" ]; then npm install react@16.8 react-dom@16.8; fi diff --git a/package-lock.json b/package-lock.json index a8d445773..dbb6ee0b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7025,8 +7025,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.1.1", @@ -7085,8 +7084,7 @@ "version": "0.4.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz", "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=", - "dev": true, - "optional": true + "dev": true }, "bcrypt-pbkdf": { "version": "1.0.1", @@ -7103,7 +7101,6 @@ "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=", "dev": true, - "optional": true, "requires": { "inherits": "~2.0.0" } @@ -7113,7 +7110,6 @@ "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", "dev": true, - "optional": true, "requires": { "hoek": "2.x.x" } @@ -7123,7 +7119,6 @@ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.7.tgz", "integrity": "sha1-Pv/DxQ4ABTH7cg6v+A8K6O8jz1k=", "dev": true, - "optional": true, "requires": { "balanced-match": "^0.4.1", "concat-map": "0.0.1" @@ -7133,8 +7128,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz", "integrity": "sha1-mXjOMXOIxkmth5MCjDR37wRKi1E=", - "dev": true, - "optional": true + "dev": true }, "caseless": { "version": "0.12.0", @@ -7154,15 +7148,13 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true, - "optional": true + "dev": true }, "combined-stream": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz", "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=", "dev": true, - "optional": true, "requires": { "delayed-stream": "~1.0.0" } @@ -7171,29 +7163,25 @@ "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", - "dev": true, - "optional": true + "dev": true }, "cryptiles": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz", "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", "dev": true, - "optional": true, "requires": { "boom": "2.x.x" } @@ -7238,8 +7226,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "dev": true, - "optional": true + "dev": true }, "delegates": { "version": "1.0.0", @@ -7276,8 +7263,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz", "integrity": "sha1-4QgOBljjALBilJkMxw4VAiNf1VA=", - "dev": true, - "optional": true + "dev": true }, "forever-agent": { "version": "0.6.1", @@ -7302,15 +7288,13 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", - "dev": true, - "optional": true + "dev": true }, "fstream": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=", "dev": true, - "optional": true, "requires": { "graceful-fs": "^4.1.2", "inherits": "~2.0.0", @@ -7371,7 +7355,6 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", "dev": true, - "optional": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -7385,8 +7368,7 @@ "version": "4.1.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", - "dev": true, - "optional": true + "dev": true }, "har-schema": { "version": "1.0.5", @@ -7418,7 +7400,6 @@ "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", "dev": true, - "optional": true, "requires": { "boom": "2.x.x", "cryptiles": "2.x.x", @@ -7430,8 +7411,7 @@ "version": "2.16.3", "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", - "dev": true, - "optional": true + "dev": true }, "http-signature": { "version": "1.1.1", @@ -7450,7 +7430,6 @@ "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, - "optional": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -7460,8 +7439,7 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.4", @@ -7475,7 +7453,6 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7491,8 +7468,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", - "dev": true, - "optional": true + "dev": true }, "isstream": { "version": "0.1.2", @@ -7575,15 +7551,13 @@ "version": "1.27.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.27.0.tgz", "integrity": "sha1-gg9XIpa70g7CXtVeW13oaeVDbrE=", - "dev": true, - "optional": true + "dev": true }, "mime-types": { "version": "2.1.15", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.15.tgz", "integrity": "sha1-pOv1BkCUVpI3uM9wBGd20J/JKu0=", "dev": true, - "optional": true, "requires": { "mime-db": "~1.27.0" } @@ -7593,7 +7567,6 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7602,15 +7575,13 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true, - "optional": true + "dev": true }, "mkdirp": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7670,8 +7641,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true, - "optional": true + "dev": true }, "oauth-sign": { "version": "0.8.2", @@ -7692,7 +7662,6 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -7726,8 +7695,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", - "dev": true, - "optional": true + "dev": true }, "performance-now": { "version": "0.2.0", @@ -7740,8 +7708,7 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz", "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=", - "dev": true, - "optional": true + "dev": true }, "punycode": { "version": "1.4.1", @@ -7784,7 +7751,6 @@ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.9.tgz", "integrity": "sha1-z3jsb0ptHrQ9JkiMrJfwQudLf8g=", "dev": true, - "optional": true, "requires": { "buffer-shims": "~1.0.0", "core-util-is": "~1.0.0", @@ -7831,7 +7797,6 @@ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz", "integrity": "sha1-wjOOxkPfeht/5cVPqG9XQopV8z0=", "dev": true, - "optional": true, "requires": { "glob": "^7.0.5" } @@ -7840,8 +7805,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz", "integrity": "sha1-0mPKVGls2KMGtcplUekt5XkY++c=", - "dev": true, - "optional": true + "dev": true }, "semver": { "version": "5.3.0", @@ -7869,7 +7833,6 @@ "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", "dev": true, - "optional": true, "requires": { "hoek": "2.x.x" } @@ -7906,7 +7869,6 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7918,7 +7880,6 @@ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz", "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=", "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.0.1" } @@ -7935,7 +7896,6 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7952,7 +7912,6 @@ "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz", "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=", "dev": true, - "optional": true, "requires": { "block-stream": "*", "fstream": "^1.0.2", @@ -8014,8 +7973,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", - "dev": true, - "optional": true + "dev": true }, "uuid": { "version": "3.0.1", @@ -8048,8 +8006,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true, - "optional": true + "dev": true } } }, @@ -8997,7 +8954,6 @@ "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", "dev": true, - "optional": true, "requires": { "hoek": "2.x.x" } @@ -9059,8 +9015,7 @@ "version": "2.16.3", "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", - "dev": true, - "optional": true + "dev": true }, "http-signature": { "version": "1.1.1", @@ -17256,27 +17211,51 @@ } }, "react": { - "version": "16.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.2.0.tgz", - "integrity": "sha1-oxvS2rib/2XUITT6GH8k0FTCc7o=", + "version": "16.8.1", + "resolved": "https://registry.npmjs.org/react/-/react-16.8.1.tgz", + "integrity": "sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ==", "dev": true, "requires": { - "fbjs": "^0.8.16", "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "prop-types": "^15.6.0" + "prop-types": "^15.6.2", + "scheduler": "^0.13.1" + }, + "dependencies": { + "prop-types": { + "version": "15.7.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.1.tgz", + "integrity": "sha512-f8Lku2z9kERjOCcnDOPm68EBJAO2K00Q5mSgPAUE/gJuBgsYLbVy6owSrtcHj90zt8PvW+z0qaIIgsIhHOa1Qw==", + "dev": true, + "requires": { + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + } } }, "react-dom": { - "version": "16.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz", - "integrity": "sha1-aQAxeGAcDKGbcJszqDNp/mEkwEQ=", + "version": "16.8.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.1.tgz", + "integrity": "sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg==", "dev": true, "requires": { - "fbjs": "^0.8.16", "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "prop-types": "^15.6.0" + "prop-types": "^15.6.2", + "scheduler": "^0.13.1" + }, + "dependencies": { + "prop-types": { + "version": "15.7.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.1.tgz", + "integrity": "sha512-f8Lku2z9kERjOCcnDOPm68EBJAO2K00Q5mSgPAUE/gJuBgsYLbVy6owSrtcHj90zt8PvW+z0qaIIgsIhHOa1Qw==", + "dev": true, + "requires": { + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + } } }, "react-gemini-scrollbar": { @@ -17288,6 +17267,12 @@ "gemini-scrollbar": "^1.5.3" } }, + "react-is": { + "version": "16.8.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.1.tgz", + "integrity": "sha512-ioMCzVDWvCvKD8eeT+iukyWrBGrA3DiFYkXfBsVYIRdaREZuBjENG+KjrikavCLasozqRWTwFUagU/O4vPpRMA==", + "dev": true + }, "react-transition-group": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz", @@ -17859,6 +17844,16 @@ "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk=", "dev": true }, + "scheduler": { + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.1.tgz", + "integrity": "sha512-VJKOkiKIN2/6NOoexuypwSrybx13MY7NSy9RNt8wPvZDMRT1CW6qlpF5jXRToXNHz3uWzbm2elNpZfXfGPqP9A==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "semantic-release": { "version": "15.13.3", "resolved": "https://registry.npmjs.org/semantic-release/-/semantic-release-15.13.3.tgz", diff --git a/package.json b/package.json index 9eef2dffa..c1229e812 100644 --- a/package.json +++ b/package.json @@ -67,8 +67,8 @@ "less-color-lighten": "0.0.1", "node-libs-browser": "1.0.0", "prettier": "1.16.4", - "react": "^15.0.0 || ^16.0.0", - "react-dom": "^15.0.0 || ^16.0.0", + "react": "^16.8.1", + "react-dom": "^16.8.1", "react-gemini-scrollbar": "2.3.x", "react-transition-group": "1.2.x", "semantic-release": "^15.13.3", @@ -82,7 +82,8 @@ }, "peerDependencies": { "cnvs": "1.1.14", - "react": ">= 16.0.0", + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", "react-transition-group": "1.2.x", "react-gemini-scrollbar": "^2.1.5 || ^2.3.0" }, @@ -107,4 +108,4 @@ "stylelint": "stylelint src/**/*.less docs/src/**/*.less", "preversion": "npm run clean && npm run dist-src" } -} +} \ No newline at end of file From 925782976ad50d5a9eb80446e63910699e36352f Mon Sep 17 00:00:00 2001 From: Dmitriy Rozhkov Date: Tue, 12 Feb 2019 11:24:38 +0100 Subject: [PATCH 5/8] refactor: use React.createRef --- docs/src/index.js | 41 +++++++++++---------------- src/Form/FieldInput.js | 15 ++++++---- src/Form/FieldTextarea.js | 6 ++-- src/Modal/ModalContents.js | 31 +++++++++----------- src/Select/Select.js | 6 +++- src/Table/Table.js | 18 ++++++------ src/Tooltip/Tooltip.js | 10 +++++-- src/Tooltip/__tests__/Tooltip-test.js | 8 ++++-- src/VirtualList/VirtualList.js | 8 ++++-- 9 files changed, 76 insertions(+), 67 deletions(-) diff --git a/docs/src/index.js b/docs/src/index.js index c185aec79..202df131e 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -82,10 +82,15 @@ class Docs extends Util.mixin(BindMixin) { }; this.sectionScrollPositions = {}; this.state = { - activeSection: null, - pageRef: null + activeSection: null }; this.viewportHeight = 0; + + this.pageRef = React.createRef(); + this.nodeRefs.sectionRefs.pageHeader = React.createRef(); + navigationItems.forEach( + ({ id }) => (this.nodeRefs.sectionRefs[id] = React.createRef()) + ); } componentDidMount() { @@ -97,17 +102,16 @@ class Docs extends Util.mixin(BindMixin) { } handleNavigationClick(id) { - const { pageRef } = this.state; const sectionPosition = this.sectionScrollPositions[id]; - if (pageRef && sectionPosition != null) { - pageRef.scrollTop = sectionPosition; + if (this.pageRef && sectionPosition != null) { + this.pageRef.current.scrollTop = sectionPosition; } } handlePageScroll() { let activeSection = null; - const pageScrollTop = this.state.pageRef.scrollTop; + const pageScrollTop = this.pageRef.current.scrollTop; const scrollThreshhold = pageScrollTop + this.viewportHeight / 2; Object.keys(this.sectionScrollPositions).forEach(ref => { @@ -122,18 +126,13 @@ class Docs extends Util.mixin(BindMixin) { } } - setPageRef(pageRef) { - if (this.state.pageRef === null) { - this.setState({ pageRef }); - } - } - calculateNodePositions() { const pageHeaderHeight = this.nodeRefs.pageHeader.offsetHeight; this.viewportHeight = DOMUtil.getViewportHeight(); Object.keys(this.nodeRefs.sectionRefs).forEach(ref => { - const top = this.nodeRefs.sectionRefs[ref].offsetTop + pageHeaderHeight; + const top = + this.nodeRefs.sectionRefs[ref].current.offsetTop + pageHeaderHeight; this.sectionScrollPositions[ref] = top; }); } @@ -162,26 +161,20 @@ class Docs extends Util.mixin(BindMixin) { render() { let docsContent = null; - const { pageRef } = this.state; // Delay the rendering of the components until we have a reference to the // scrolling container's DOM node. - if (pageRef !== null) { + if (this.pageRef !== null) { docsContent = navigationItems.map((navigationItem, index) => { const { id, passScrollContainer } = navigationItem; const props = {}; if (passScrollContainer) { - props.scrollContainer = pageRef; + props.scrollContainer = this.pageRef; } return ( -
{ - this.nodeRefs.sectionRefs[id] = ref; - }} - > +
); @@ -206,12 +199,12 @@ class Docs extends Util.mixin(BindMixin) { className="page flex-item-grow-1" id="page" onScroll={this.handlePageScroll} - ref={ref => this.setPageRef(ref)} + ref={this.pageRef} >
(this.nodeRefs.pageHeader = ref)} + ref={this.nodeRefs.pageHeader} >
diff --git a/src/Form/FieldInput.js b/src/Form/FieldInput.js index 0d3688f98..9d5104c57 100644 --- a/src/Form/FieldInput.js +++ b/src/Form/FieldInput.js @@ -11,12 +11,17 @@ import Util from "../Util/Util"; const EVENTS = ["blur", "change", "focus"]; class FieldInput extends Util.mixin(BindMixin) { + constructor() { + super(...arguments); + this.inputElementRef = React.createRef(); + } + shouldComponentUpdate(nextProps) { return !Util.isEqual(this.props, nextProps); } componentDidUpdate() { - const inputElement = ReactDOM.findDOMNode(this.inputElementRef); + const inputElement = ReactDOM.findDOMNode(this.inputElementRef.current); if (this.isEditing() && inputElement !== global.document.activeElement) { inputElement.focus(); @@ -24,7 +29,7 @@ class FieldInput extends Util.mixin(BindMixin) { } componentDidMount() { - const inputElement = ReactDOM.findDOMNode(this.inputElementRef); + const inputElement = ReactDOM.findDOMNode(this.inputElementRef.current); if ( inputElement != null && inputElement.type === "text" && @@ -61,7 +66,7 @@ class FieldInput extends Util.mixin(BindMixin) { props.handleSubmit(); } - ReactDOM.findDOMNode(this.inputElementRef).blur(); + ReactDOM.findDOMNode(this.inputElementRef.current).blur(); } } @@ -158,7 +163,7 @@ class FieldInput extends Util.mixin(BindMixin) { if (this.isEditing() || writeType === "input") { inputContent = ( (this.inputElementRef = el)} + ref={this.inputElementRef} className={classes} onKeyDown={this.handleKeyDown.bind(this)} name={attributes.name} @@ -170,7 +175,7 @@ class FieldInput extends Util.mixin(BindMixin) { } else { inputContent = ( (this.inputElementRef = el)} + ref={this.inputElementRef} {...htmlAttributes} className={classes} onClick={attributes.onFocus} diff --git a/src/Form/FieldTextarea.js b/src/Form/FieldTextarea.js index 35294006b..1a5594845 100644 --- a/src/Form/FieldTextarea.js +++ b/src/Form/FieldTextarea.js @@ -23,6 +23,8 @@ class FieldTextarea extends FieldInput { this.state = { height: this.props.minHeight }; this.updateTextareaHeight = throttle(this.updateTextareaHeight, 100); + + this.inputElementRef = React.createRef(); } componentDidMount() { @@ -92,7 +94,7 @@ class FieldTextarea extends FieldInput { style={{ height: `${this.state.height}px` }} >
(this.inputElementRef = el)} + ref={this.inputElementRef} className={classes} {...attributes} contentEditable={true} @@ -106,7 +108,7 @@ class FieldTextarea extends FieldInput { } else { inputContent = ( (this.inputElementRef = el)} + ref={this.inputElementRef} {...attributes} className={classes} onClick={attributes.onFocus} diff --git a/src/Modal/ModalContents.js b/src/Modal/ModalContents.js index 9746e9ff7..a41251d9c 100644 --- a/src/Modal/ModalContents.js +++ b/src/Modal/ModalContents.js @@ -29,6 +29,13 @@ class ModalContents extends Util.mixin(BindMixin) { this.state = { height: null }; + + this.footerRef = React.createRef(); + this.geminiRef = React.createRef(); + this.headerRef = React.createRef(); + this.innerContentContainerRef = React.createRef(); + this.innerContentRef = React.createRef(); + this.modalRef = React.createRef(); } get methodsToBind() { @@ -250,10 +257,7 @@ class ModalContents extends Util.mixin(BindMixin) { } return ( -
(this.headerRef = element)} - > +
{props.header} {props.subHeader}
@@ -268,10 +272,7 @@ class ModalContents extends Util.mixin(BindMixin) { } return ( -
(this.footerRef = element)} - > +
{props.footer}
); @@ -281,10 +282,7 @@ class ModalContents extends Util.mixin(BindMixin) { const { props, state } = this; const modalContent = ( -
(this.innerContentRef = element)} - > +
{props.children}
); @@ -310,7 +308,7 @@ class ModalContents extends Util.mixin(BindMixin) { (this.geminiRef = element)} + ref={this.geminiRef} style={geminiContainerStyle} > {modalContent} @@ -331,16 +329,13 @@ class ModalContents extends Util.mixin(BindMixin) { } return ( -
(this.modalRef = element)} - className={props.modalClass} - > +
{this.getCloseButton()} {this.getHeader()}
(this.innerContentContainerRef = element)} + ref={this.innerContentContainerRef} > {this.getModalContent()}
diff --git a/src/Select/Select.js b/src/Select/Select.js index 1cf3bc1b9..982770e0f 100644 --- a/src/Select/Select.js +++ b/src/Select/Select.js @@ -5,6 +5,10 @@ import Dropdown from "../Dropdown/Dropdown"; import DropdownListTrigger from "../Dropdown/DropdownListTrigger"; export default class Select extends React.Component { + constructor() { + super(); + this.input = React.createRef(); + } buildItemsArray() { return React.Children.map(this.props.children, child => { return { @@ -38,7 +42,7 @@ export default class Select extends React.Component { (this.input = input)} + ref={this.input} style={{ display: "none" }} diff --git a/src/Table/Table.js b/src/Table/Table.js index f01c03723..307c22036 100644 --- a/src/Table/Table.js +++ b/src/Table/Table.js @@ -47,13 +47,16 @@ const getClassName = (column, sortBy, data, columns) => { class Table extends React.Component { constructor() { - super(); + super(...arguments); + this.state = { sortBy: {} }; this.cachedCells = {}; this.cachedIDs = []; this.container = window; + + this.itemHeightContainer = React.createRef(); } componentWillMount() { @@ -104,11 +107,14 @@ class Table extends React.Component { if ( props.itemHeight == null && state.itemHeight == null && - this.itemHeightContainer != null + this.itemHeightContainer && + this.itemHeightContainer.current ) { // Calculate content height only once and when node is ready const itemHeight = DOMUtil.getComputedDimensions( - ReactDOM.findDOMNode(this.itemHeightContainer).querySelector("tr") + ReactDOM.findDOMNode(this.itemHeightContainer.current).querySelector( + "tr" + ) ).height; this.setState({ itemHeight }); } @@ -275,11 +281,7 @@ class Table extends React.Component { -1 ); - return ( - (this.itemHeightContainer = el)}> - {childToMeasure} - - ); + return {childToMeasure}; } if (data.length === 0) { diff --git a/src/Tooltip/Tooltip.js b/src/Tooltip/Tooltip.js index c45508eb6..21770ef37 100644 --- a/src/Tooltip/Tooltip.js +++ b/src/Tooltip/Tooltip.js @@ -24,7 +24,11 @@ class Tooltip extends Util.mixin(BindMixin) { constructor() { super(...arguments); + this.state = { isOpen: false, wasTriggeredClose: false }; + + this.tooltipNode = React.createRef(); + this.triggerNode = React.createRef(); } componentWillUnmount() { @@ -161,7 +165,7 @@ class Tooltip extends Util.mixin(BindMixin) { } const isVertical = this.isVertical(position); - const clearance = DOMUtil.getNodeClearance(this.triggerNode); + const clearance = DOMUtil.getNodeClearance(this.triggerNode.current); const tooltipRect = this.tooltipNode.current.getBoundingClientRect(); const tooltipHeight = tooltipRect.height + ARROW_SIZE; const tooltipWidth = tooltipRect.width + ARROW_SIZE; @@ -277,13 +281,13 @@ class Tooltip extends Util.mixin(BindMixin) { onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} {...elementProps} - ref={el => (this.triggerNode = el)} + ref={this.triggerNode} > {props.children}
(this.tooltipNode = el)} + ref={this.tooltipNode} style={tooltipStyle} onMouseEnter={this.handleTooltipMouseEnter} onMouseLeave={this.handleTooltipMouseLeave} diff --git a/src/Tooltip/__tests__/Tooltip-test.js b/src/Tooltip/__tests__/Tooltip-test.js index f8cf5d329..cf55730cc 100644 --- a/src/Tooltip/__tests__/Tooltip-test.js +++ b/src/Tooltip/__tests__/Tooltip-test.js @@ -29,18 +29,20 @@ describe("Tooltip", function() { }); it("should render with the intended class", function() { - expect(this.instance.tooltipNode.classList.contains("foo")).toBeTruthy(); + expect( + this.instance.tooltipNode.current.classList.contains("foo") + ).toBeTruthy(); }); it("should render with the intended position as a class", function() { expect( - this.instance.tooltipNode.classList.contains("position-bottom") + this.instance.tooltipNode.current.classList.contains("position-bottom") ).toBeTruthy(); }); it("should render with the intended anchor as a class", function() { expect( - this.instance.tooltipNode.classList.contains("anchor-start") + this.instance.tooltipNode.current.classList.contains("anchor-start") ).toBeTruthy(); }); diff --git a/src/VirtualList/VirtualList.js b/src/VirtualList/VirtualList.js index 526e2a6e1..ea63e7436 100644 --- a/src/VirtualList/VirtualList.js +++ b/src/VirtualList/VirtualList.js @@ -52,6 +52,8 @@ class VirtualList extends React.Component { METHODS_TO_BIND.forEach(method => { this[method] = this[method].bind(this); }); + + this.listRef = React.createRef(); } componentDidMount() { @@ -185,9 +187,9 @@ class VirtualList extends React.Component { viewTop = DOMUtil.getScrollTop(container) || 0; } - if (this.listRef) { + if (this.listRef && this.listRef.current) { const listBounding = ReactDOM.findDOMNode( - this.listRef + this.listRef.current ).getBoundingClientRect(); const elementTop = @@ -248,7 +250,7 @@ class VirtualList extends React.Component { ); return ( - (this.listRef = el)} {...htmlAttributes}> + {safeCall(() => props.renderBufferItem(topStyles))} {this.getItemsToRender(props, state)} {safeCall(() => props.renderBufferItem(bottomStyles))} From 0b10f5925d8b8417c2878448dfe2d1b6ab7b5837 Mon Sep 17 00:00:00 2001 From: Daniel Schmidt Date: Tue, 12 Feb 2019 12:05:32 +0100 Subject: [PATCH 6/8] fix(Select): call native set on current ref --- src/Select/Select.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Select/Select.js b/src/Select/Select.js index 982770e0f..e29a0e949 100644 --- a/src/Select/Select.js +++ b/src/Select/Select.js @@ -29,9 +29,9 @@ export default class Select extends React.Component { window.HTMLInputElement.prototype, "value" ).set; - nativeInputValueSetter.call(this.input, selectedOption.id); if (this.input && this.input.current) { + nativeInputValueSetter.call(this.input.current, selectedOption.id); this.input.current.dispatchEvent(new Event("input", { bubbles: true })); } } From d130a2531f098615f08eb70fd668dba31268310d Mon Sep 17 00:00:00 2001 From: Dmitriy Rozhkov Date: Wed, 13 Feb 2019 12:39:51 +0100 Subject: [PATCH 7/8] fix: container ref --- src/Dropdown/Dropdown.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Dropdown/Dropdown.js b/src/Dropdown/Dropdown.js index 0d2776c9d..04d474310 100644 --- a/src/Dropdown/Dropdown.js +++ b/src/Dropdown/Dropdown.js @@ -135,7 +135,9 @@ class Dropdown extends Util.mixin(BindMixin) { } addScrollListener() { - this.container.addEventListener("scroll", this.closeDropdown); + if (this.container && this.container.current) { + this.container.current.addEventListener("scroll", this.closeDropdown); + } } removeKeydownListener() { @@ -143,8 +145,8 @@ class Dropdown extends Util.mixin(BindMixin) { } removeScrollListener() { - if (this.container) { - this.container.removeEventListener("scroll", this.closeDropdown); + if (this.container && this.container.current) { + this.container.current.removeEventListener("scroll", this.closeDropdown); } } From 10c51f97e768458a3fdf6dba23a76276d7ff6066 Mon Sep 17 00:00:00 2001 From: Dmitriy Rozhkov Date: Wed, 13 Feb 2019 12:40:07 +0100 Subject: [PATCH 8/8] fix: documentation page --- docs/src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/index.js b/docs/src/index.js index 202df131e..11a16c12b 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -87,7 +87,7 @@ class Docs extends Util.mixin(BindMixin) { this.viewportHeight = 0; this.pageRef = React.createRef(); - this.nodeRefs.sectionRefs.pageHeader = React.createRef(); + this.nodeRefs.pageHeader = React.createRef(); navigationItems.forEach( ({ id }) => (this.nodeRefs.sectionRefs[id] = React.createRef()) ); @@ -104,7 +104,7 @@ class Docs extends Util.mixin(BindMixin) { handleNavigationClick(id) { const sectionPosition = this.sectionScrollPositions[id]; - if (this.pageRef && sectionPosition != null) { + if (this.pageRef.current && sectionPosition != null) { this.pageRef.current.scrollTop = sectionPosition; } } @@ -127,7 +127,7 @@ class Docs extends Util.mixin(BindMixin) { } calculateNodePositions() { - const pageHeaderHeight = this.nodeRefs.pageHeader.offsetHeight; + const pageHeaderHeight = this.nodeRefs.pageHeader.current.offsetHeight; this.viewportHeight = DOMUtil.getViewportHeight(); Object.keys(this.nodeRefs.sectionRefs).forEach(ref => {