From 568a5631f0825e5eff75ab408a640fc07ed1253c Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Tue, 28 Jan 2020 20:08:55 -0400 Subject: [PATCH] Update jazzicon component (#7898) * Use ref instead of findDOMNode in jazzicon component The jazzicon component was using `findDOMNode` to get the DOM node for the main div returned by the component, which is generally not recommended. Instead a ref is now used. * Update Jazzicon to v2 This version drops the dependency upon `raphael`, and no longer uses the function `createSVGMatrix` which was causing unit tests to fail (because it's not supported by jsdom). --- package.json | 3 +- .../ui/jazzicon/jazzicon.component.js | 30 ++++++++-------- yarn.lock | 34 +++++-------------- 3 files changed, 24 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index 5182d38f0e4d..3873e6f6f135 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,6 @@ "debounce": "1.1.0", "debounce-stream": "^2.0.0", "deep-freeze-strict": "1.1.1", - "detect-node": "^2.0.3", "dnode": "^1.2.2", "end-of-stream": "^1.1.0", "eth-block-tracker": "^4.4.2", @@ -138,7 +137,7 @@ "fuse.js": "^3.2.0", "gaba": "^1.9.3", "human-standard-token-abi": "^2.0.0", - "jazzicon": "^1.2.0", + "jazzicon": "^2.0.0", "js-conflux-sdk": "^0.6.0-alpha", "json-rpc-engine": "^5.1.6", "json-rpc-middleware-stream": "^2.1.1", diff --git a/ui/app/components/ui/jazzicon/jazzicon.component.js b/ui/app/components/ui/jazzicon/jazzicon.component.js index 2c34e005336d..24fb9f61e079 100644 --- a/ui/app/components/ui/jazzicon/jazzicon.component.js +++ b/ui/app/components/ui/jazzicon/jazzicon.component.js @@ -1,7 +1,5 @@ -import React, { PureComponent } from 'react' +import React, { createRef, PureComponent } from 'react' import PropTypes from 'prop-types' -import isNode from 'detect-node' -import { findDOMNode } from 'react-dom' import jazzicon from 'jazzicon' import iconFactoryGenerator from '../../../../lib/icon-factory' @@ -23,43 +21,45 @@ export default class Jazzicon extends PureComponent { diameter: 46, } + container = createRef() + componentDidMount () { - if (!isNode) { - this.appendJazzicon() - } + this.appendJazzicon() } componentDidUpdate (prevProps) { const { address: prevAddress } = prevProps const { address } = this.props - if (!isNode && address !== prevAddress) { + if (address !== prevAddress) { this.removeExistingChildren() this.appendJazzicon() } } removeExistingChildren () { - // eslint-disable-next-line react/no-find-dom-node - const container = findDOMNode(this) - const { children } = container + const { children } = this.container.current for (let i = 0; i < children.length; i++) { - container.removeChild(children[i]) + this.container.current.removeChild(children[i]) } } appendJazzicon () { - // eslint-disable-next-line react/no-find-dom-node - const container = findDOMNode(this) const { address, diameter } = this.props const image = iconFactory.iconForAddress(address, diameter) - container.appendChild(image) + this.container.current.appendChild(image) } render () { const { className, style } = this.props - return
+ return ( +
+ ) } } diff --git a/yarn.lock b/yarn.lock index bff5ee120369..fab8c4ccbd96 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7621,7 +7621,7 @@ color-support@^1.1.3: resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2" integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg== -color@^0.11.1: +color@^0.11.3: version "0.11.4" resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764" integrity sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q= @@ -9405,11 +9405,6 @@ detect-newline@2.X, detect-newline@^2.1.0: resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2" integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I= -detect-node@^2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127" - integrity sha1-ogM8CcyOFY03dI+951B4Mr1s4Sc= - detect-node@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c" @@ -11813,11 +11808,6 @@ ethjs@^0.4.0: js-sha3 "0.5.5" number-to-bn "1.7.0" -eve-raphael@0.5.0: - version "0.5.0" - resolved "https://registry.yarnpkg.com/eve-raphael/-/eve-raphael-0.5.0.tgz#17c754b792beef3fa6684d79cf5a47c63c4cda30" - integrity sha1-F8dUt5K+7z+maE15z1pHxjxM2jA= - event-emitter@^0.3.5, event-emitter@~0.3.5: version "0.3.5" resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39" @@ -16959,14 +16949,13 @@ jayson@^3.2.0: lodash "^4.17.15" uuid "^3.2.1" -jazzicon@^1.2.0: - version "1.5.0" - resolved "https://registry.yarnpkg.com/jazzicon/-/jazzicon-1.5.0.tgz#d7f36b516023db39ee6eac117f4054e937b65e99" - integrity sha1-1/NrUWAj2znubqwRf0BU6Te2Xpk= +jazzicon@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/jazzicon/-/jazzicon-2.0.0.tgz#a45f10f330ad529d054264759a9e4817292bb440" + integrity sha1-pF8Q8zCtUp0FQmR1mp5IFykrtEA= dependencies: - color "^0.11.1" - mersenne-twister "^1.0.1" - raphael "^2.2.0" + color "^0.11.3" + mersenne-twister "^1.1.0" jed@1.1.1: version "1.1.1" @@ -20130,7 +20119,7 @@ merkle-patricia-tree@^3.0.0: rlp "^2.0.0" semaphore ">=1.0.1" -mersenne-twister@^1.0.1: +mersenne-twister@^1.0.1, mersenne-twister@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/mersenne-twister/-/mersenne-twister-1.1.0.tgz#f916618ee43d7179efcf641bec4531eb9670978a" integrity sha1-+RZhjuQ9cXnvz2Qb7EUx65Zwl4o= @@ -24346,13 +24335,6 @@ range-parser@^1.2.0, range-parser@^1.2.1, range-parser@~1.2.1: resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031" integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg== -raphael@^2.2.0: - version "2.2.7" - resolved "https://registry.yarnpkg.com/raphael/-/raphael-2.2.7.tgz#231b19141f8d086986d8faceb66f8b562ee2c810" - integrity sha1-IxsZFB+NCGmG2PrOtm+LVi7iyBA= - dependencies: - eve-raphael "0.5.0" - raw-body@2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"