Cleanup polkadot-identicon rendering duplication (#14)

* Cleanup polkadot-identicon rendering duplication

* Bump API deps
This commit is contained in:
Jaco Greeff
2018-12-09 12:40:16 +01:00
committed by GitHub
parent d910d69fab
commit cc0fa0f1b3
3 changed files with 50 additions and 27 deletions
+45 -22
View File
@@ -49,9 +49,8 @@ const schema: { [index: string]: Scheme } = {
export default class Identicon extends React.PureComponent<Props> {
render () {
const { className, size, style, value } = this.props;
const { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 } = this.getRotation();
const xy = this.getCircleXY();
const colors = this.getColors();
let i = 0;
return (
<div
@@ -65,31 +64,55 @@ export default class Identicon extends React.PureComponent<Props> {
height={size}
viewBox='0 0 64 64'
>
<circle cx={s / 2} cy={s / 2} r={s / 2} fill='#eee'/>
<circle cx={c} cy={c - r} r={z} fill={colors[i++]}/>
<circle cx={c} cy={c - ro2} r={z} fill={colors[i++]}/>
<circle cx={c - rroot3o4} cy={c - r3o4} r={z} fill={colors[i++]}/>
<circle cx={c - rroot3o2} cy={c - ro2} r={z} fill={colors[i++]}/>
<circle cx={c - rroot3o4} cy={c - ro4} r={z} fill={colors[i++]}/>
<circle cx={c - rroot3o2} cy={c} r={z} fill={colors[i++]}/>
<circle cx={c - rroot3o2} cy={c + ro2} r={z} fill={colors[i++]}/>
<circle cx={c - rroot3o4} cy={c + ro4} r={z} fill={colors[i++]}/>
<circle cx={c - rroot3o4} cy={c + r3o4} r={z} fill={colors[i++]}/>
<circle cx={c} cy={c + r} r={z} fill={colors[i++]}/>
<circle cx={c} cy={c + ro2} r={z} fill={colors[i++]}/>
<circle cx={c + rroot3o4} cy={c + r3o4} r={z} fill={colors[i++]}/>
<circle cx={c + rroot3o2} cy={c + ro2} r={z} fill={colors[i++]}/>
<circle cx={c + rroot3o4} cy={c + ro4} r={z} fill={colors[i++]}/>
<circle cx={c + rroot3o2} cy={c} r={z} fill={colors[i++]}/>
<circle cx={c + rroot3o2} cy={c - ro2} r={z} fill={colors[i++]}/>
<circle cx={c + rroot3o4} cy={c - ro4} r={z} fill={colors[i++]}/>
<circle cx={c + rroot3o4} cy={c - r3o4} r={z} fill={colors[i++]}/>
<circle cx={c} cy={c} r={z} fill={colors[i++]}/>
{this.renderCircle(s / 2, s / 2, s / 2, '#eee', -1)}
{
xy.map(([x, y], index) =>
this.renderCircle(x, y, z, colors[index], index)
)
}
</svg>
</div>
);
}
private renderCircle (cx: number, cy: number, r: number, fill: string, key: number) {
return (
<circle
key={key}
cx={cx}
cy={cy}
r={r}
fill={fill}
/>
);
}
private getCircleXY () {
const { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 } = this.getRotation();
return [
[c, c - r],
[c, c - ro2],
[c - rroot3o4, c - r3o4],
[c - rroot3o2, c - ro2],
[c - rroot3o4, c - ro4],
[c - rroot3o2, c],
[c - rroot3o2, c + ro2],
[c - rroot3o4, c + ro4],
[c - rroot3o4, c + r3o4],
[c, c + r],
[c, c + ro2],
[c + rroot3o4, c + r3o4],
[c + rroot3o2, c + ro2],
[c + rroot3o4, c + ro4],
[c + rroot3o2, c],
[c + rroot3o2, c - ro2],
[c + rroot3o4, c - ro4],
[c + rroot3o4, c - r3o4],
[c, c]
];
}
private getRotation () {
const { sixPoint = false } = this.props;
const r = sixPoint
+1 -1
View File
@@ -12,7 +12,7 @@
"dependencies": {
"@babel/runtime": "^7.1.5",
"@polkadot/keyring": "^0.33.11",
"@polkadot/types": "^0.33.6",
"@polkadot/types": "^0.33.7",
"store": "^2.0.12"
}
}
+4 -4
View File
@@ -1446,10 +1446,10 @@
resolved "https://registry.yarnpkg.com/@polkadot/ts/-/ts-0.1.41.tgz#647b44b038f94a7acf76633b25cb72df897872fc"
integrity sha512-/vYpjqKU+QKHNAlFdLgFZAAr54wxQMgIuszZ5BxaayUoq7ukDlvCPhUGQ3fNoyBSEaL7uTCZ/5SVRc363IehoA==
"@polkadot/types@^0.33.6":
version "0.33.6"
resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.33.6.tgz#04b2a9cabf11634adfa6ee7cdd0cd27665c670c5"
integrity sha512-MKhWsuPqKL9PMvq2rkwckrFVv6HfeEktKlJgMozphxUTebNq+vcpz4zAMwCdP4yKjzNDm8eajS2FG0ui25v3xA==
"@polkadot/types@^0.33.7":
version "0.33.7"
resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.33.7.tgz#60363d6272ee5d37eac10998b6930c06fc40d7e8"
integrity sha512-kkzIMIk+Ai6Elg/mYA5bDn75X68p2yns+dfA8uouuR20MysbxhCNtLkC/dTW0wHiRaNsCjDN+knbWiliLBygEg==
dependencies:
"@babel/runtime" "^7.1.5"
"@polkadot/keyring" "^0.33.11"