diff options
author | Thomas <thomas.b.huang@gmail.com> | 2018-10-31 20:55:25 +0800 |
---|---|---|
committer | Thomas <thomas.b.huang@gmail.com> | 2018-10-31 20:55:25 +0800 |
commit | 7531de14f9575e59b9d0a1b30cf0df46dbc4af67 (patch) | |
tree | d9268e89a9fd7e5c6bf3c7c82c195422d7ffa117 /ui/app/components/jazzicon/jazzicon.component.js | |
parent | 611a61b7bc576bb83a6b7851f26d00488fe060f2 (diff) | |
parent | ac079365e6b4cf8b19db127e6971fa694fa54fff (diff) | |
download | tangerine-wallet-browser-7531de14f9575e59b9d0a1b30cf0df46dbc4af67.tar.gz tangerine-wallet-browser-7531de14f9575e59b9d0a1b30cf0df46dbc4af67.tar.zst tangerine-wallet-browser-7531de14f9575e59b9d0a1b30cf0df46dbc4af67.zip |
Merge branch 'develop' into reducers
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} + /> + ) + } +} |