diff options
author | kumavis <kumavis@users.noreply.github.com> | 2018-11-02 09:29:45 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-11-02 09:29:45 +0800 |
commit | 337a4e1b4ea7a560d773bc262b2adffd1617a39b (patch) | |
tree | f3c2f9b33642ef9be901645645734129686e6c6e /ui/app/components/jazzicon/jazzicon.component.js | |
parent | c2f97717c0fbf9a64cf527891f7a1f35049fb023 (diff) | |
parent | de231c7a6191ca869308b6d27ca9cd4b020e59aa (diff) | |
download | tangerine-wallet-browser-337a4e1b4ea7a560d773bc262b2adffd1617a39b.tar.gz tangerine-wallet-browser-337a4e1b4ea7a560d773bc262b2adffd1617a39b.tar.zst tangerine-wallet-browser-337a4e1b4ea7a560d773bc262b2adffd1617a39b.zip |
Merge pull request #5649 from MetaMask/develop
Version 4.17.0
Diffstat (limited to 'ui/app/components/jazzicon/jazzicon.component.js')
-rw-r--r-- | ui/app/components/jazzicon/jazzicon.component.js | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/ui/app/components/jazzicon/jazzicon.component.js b/ui/app/components/jazzicon/jazzicon.component.js new file mode 100644 index 000000000..fcb1c59b1 --- /dev/null +++ b/ui/app/components/jazzicon/jazzicon.component.js @@ -0,0 +1,69 @@ +import React, { 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' +const iconFactory = iconFactoryGenerator(jazzicon) + +/** + * Wrapper around the jazzicon library to return a React component, as the library returns an + * HTMLDivElement which needs to be appended. + */ +export default class Jazzicon extends PureComponent { + static propTypes = { + address: PropTypes.string.isRequired, + className: PropTypes.string, + diameter: PropTypes.number, + style: PropTypes.object, + } + + static defaultProps = { + diameter: 46, + } + + componentDidMount () { + if (!isNode) { + this.appendJazzicon() + } + } + + componentDidUpdate (prevProps) { + const { address: prevAddress } = prevProps + const { address } = this.props + + if (!isNode && address !== prevAddress) { + this.removeExistingChildren() + this.appendJazzicon() + } + } + + removeExistingChildren () { + // eslint-disable-next-line react/no-find-dom-node + const container = findDOMNode(this) + const { children } = container + + for (let i = 0; i < children.length; i++) { + container.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) + } + + render () { + const { className, style } = this.props + + return ( + <div + className={className} + style={style} + /> + ) + } +} |