pezkuwichain/pezkuwi-ui
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pezkuwi-ui.git synced 2026-06-14 19:31:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup polkadot-identicon rendering duplication (#14)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-identicon/src/Polkadot.tsx
+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
packages/ui-keyring/package.json
+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"
}
}