mirror of
https://github.com/pezkuwichain/pezkuwi-ui.git
synced 2026-04-22 04:28:00 +00:00
Cleanup polkadot-identicon rendering duplication (#14)
* Cleanup polkadot-identicon rendering duplication * Bump API deps
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user