diff --git a/.travis.yml b/.travis.yml index bc8ddcc78..d36ce59dc 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/* @@ -22,5 +30,5 @@ install: - ./install_react.sh env: matrix: - - REACT_VERSION=15.6 - REACT_VERSION=16.7 + - REACT_VERSION=16.8 diff --git a/docs/src/index.js b/docs/src/index.js index c185aec79..11a16c12b 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.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.current && 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; + const pageHeaderHeight = this.nodeRefs.pageHeader.current.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/install_react.sh b/install_react.sh index e9ebb2a47..9faaee68b 100755 --- a/install_react.sh +++ b/install_react.sh @@ -1,4 +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 969dfa71d..11403baab 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" } } } @@ -10952,11 +10952,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 +11029,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 +11117,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 +11150,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 +11163,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 +12758,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 +12773,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 +12787,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": { @@ -17211,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": { @@ -17243,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", @@ -17783,12 +17813,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 +17827,7 @@ "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "requires": { - "brace-expansion": "1.1.8" + "brace-expansion": "^1.1.7" } }, "minimist": { @@ -17814,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 bdf1e3c55..0d9953745 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": "^15.0.0 || ^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" }, @@ -92,7 +93,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", @@ -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 diff --git a/src/Dropdown/Dropdown.js b/src/Dropdown/Dropdown.js index 6baf51191..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); } } @@ -161,8 +163,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 +232,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/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 f1ed1838a..1a5594845 100644 --- a/src/Form/FieldTextarea.js +++ b/src/Form/FieldTextarea.js @@ -23,23 +23,25 @@ class FieldTextarea extends FieldInput { this.state = { height: this.props.minHeight }; this.updateTextareaHeight = throttle(this.updateTextareaHeight, 100); + + this.inputElementRef = React.createRef(); } 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; } } } @@ -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 05ca29a29..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() { @@ -153,21 +160,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 +222,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(); @@ -243,10 +257,7 @@ class ModalContents extends Util.mixin(BindMixin) { } return ( -
(this.headerRef = element)} - > +
{props.header} {props.subHeader}
@@ -261,10 +272,7 @@ class ModalContents extends Util.mixin(BindMixin) { } return ( -
(this.footerRef = element)} - > +
{props.footer}
); @@ -274,10 +282,7 @@ class ModalContents extends Util.mixin(BindMixin) { const { props, state } = this; const modalContent = ( -
(this.innerContentRef = element)} - > +
{props.children}
); @@ -303,7 +308,7 @@ class ModalContents extends Util.mixin(BindMixin) { (this.geminiRef = element)} + ref={this.geminiRef} style={geminiContainerStyle} > {modalContent} @@ -324,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()}
@@ -355,8 +357,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..e29a0e949 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 { @@ -25,9 +29,11 @@ export default class Select extends React.Component { window.HTMLInputElement.prototype, "value" ).set; - nativeInputValueSetter.call(this.input, selectedOption.id); - this.input.dispatchEvent(new Event("input", { bubbles: true })); + if (this.input && this.input.current) { + nativeInputValueSetter.call(this.input.current, selectedOption.id); + this.input.current.dispatchEvent(new Event("input", { bubbles: true })); + } } render() { @@ -36,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 be5b8209d..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() { @@ -147,7 +151,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", @@ -156,8 +165,8 @@ class Tooltip extends Util.mixin(BindMixin) { } const isVertical = this.isVertical(position); - const clearance = DOMUtil.getNodeClearance(this.triggerNode); - const tooltipRect = this.tooltipNode.getBoundingClientRect(); + 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; @@ -272,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))}