diff options
author | kumavis <aaron@kumavis.me> | 2018-10-26 10:24:30 +0800 |
---|---|---|
committer | kumavis <aaron@kumavis.me> | 2018-10-26 10:24:30 +0800 |
commit | 9b42416fc0d92662d1a21759db357e7f439d7a7b (patch) | |
tree | 4fb658d739a7127d4c18a22b4abe556bfc3a194e /ui/app/components/jazzicon | |
parent | 9b501b7c42ebebb61ac3130d1e84d36efcac9b7e (diff) | |
parent | 55c66b0d988fac6b2ed5948cf4dcd20fd486070e (diff) | |
download | tangerine-wallet-browser-9b42416fc0d92662d1a21759db357e7f439d7a7b.tar.gz tangerine-wallet-browser-9b42416fc0d92662d1a21759db357e7f439d7a7b.tar.zst tangerine-wallet-browser-9b42416fc0d92662d1a21759db357e7f439d7a7b.zip |
Merge branch 'develop' of github.com:MetaMask/metamask-extension into HowardBraham-develop
Diffstat (limited to 'ui/app/components/jazzicon')
-rw-r--r-- | ui/app/components/jazzicon/index.js | 1 | ||||
-rw-r--r-- | ui/app/components/jazzicon/jazzicon.component.js | 69 |
2 files changed, 70 insertions, 0 deletions
diff --git a/ui/app/components/jazzicon/index.js b/ui/app/components/jazzicon/index.js new file mode 100644 index 000000000..bea900ab9 --- /dev/null +++ b/ui/app/components/jazzicon/index.js @@ -0,0 +1 @@ +export { default } from './jazzicon.component' 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} + /> + ) + } +} |