m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Update jazzicon component (#7898)

Browse Source 
* 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).
This commit is contained in:
Mark Stacey 2020-01-28 20:08:55 -04:00 committed by GitHub
parent ffd24a2854
commit 99ceca3d25
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -86,7 +86,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",
@ -120,7 +119,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",
"json-rpc-engine": "^5.1.6",
"json-rpc-middleware-stream": "^2.1.1",
"jsonschema": "^1.2.4",

23
ui/app/components/ui/jazzicon/jazzicon.component.js
View File

@ -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,38 +21,34 @@ 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 () {
@ -63,6 +57,7 @@ export default class Jazzicon extends PureComponent {
return (
<div
className={className}
ref={this.container}
style={style}
/>
)

34
yarn.lock
View File

@ -7303,7 +7303,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=
@ -9019,11 +9019,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"
@ -11429,11 +11424,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"
@ -16426,14 +16416,13 @@ java-properties@^0.2.9:
resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-0.2.10.tgz#2551560c25fa1ad94d998218178f233ad9b18f60"
integrity sha512-CpKJh9VRNhS+XqZtg1UMejETGEiqwCGDC/uwPEEQwc2nfdbSm73SIE29TplG2gLYuBOOTNDqxzG6A9NtEPLt0w==
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"
@ -19438,7 +19427,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=
@ -23493,13 +23482,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"