@xylabs/react-identicon 3.4.1 → 3.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/components/index.d.cts +1 -1
- package/dist/browser/components/index.d.mts +1 -1
- package/dist/browser/components/index.d.ts +1 -1
- package/dist/browser/index.cjs +29 -21
- package/dist/browser/index.cjs.map +1 -1
- package/dist/browser/index.d.cts +1 -1
- package/dist/browser/index.d.mts +1 -1
- package/dist/browser/index.d.ts +1 -1
- package/dist/browser/{index.js → index.mjs} +32 -22
- package/dist/browser/index.mjs.map +1 -0
- package/dist/neutral/components/index.d.cts +1 -1
- package/dist/neutral/components/index.d.mts +1 -1
- package/dist/neutral/components/index.d.ts +1 -1
- package/dist/neutral/index.cjs +29 -21
- package/dist/neutral/index.cjs.map +1 -1
- package/dist/neutral/index.d.cts +1 -1
- package/dist/neutral/index.d.mts +1 -1
- package/dist/neutral/index.d.ts +1 -1
- package/dist/{node/index.js → neutral/index.mjs} +32 -22
- package/dist/neutral/index.mjs.map +1 -0
- package/dist/node/components/index.d.cts +1 -1
- package/dist/node/components/index.d.mts +1 -1
- package/dist/node/components/index.d.ts +1 -1
- package/dist/node/index.cjs +29 -21
- package/dist/node/index.cjs.map +1 -1
- package/dist/node/index.d.cts +1 -1
- package/dist/node/index.d.mts +1 -1
- package/dist/node/index.d.ts +1 -1
- package/dist/{neutral/index.js → node/index.mjs} +32 -22
- package/dist/node/index.mjs.map +1 -0
- package/package.json +9 -9
- package/src/components/Identicon.tsx +3 -3
- package/src/components/index.ts +1 -1
- package/src/index.ts +1 -1
- package/dist/browser/index.js.map +0 -1
- package/dist/neutral/index.js.map +0 -1
- package/dist/node/index.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './Identicon.
|
|
1
|
+
export * from './Identicon.tsx';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './Identicon.
|
|
1
|
+
export * from './Identicon.tsx';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './Identicon.
|
|
1
|
+
export * from './Identicon.tsx';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/browser/index.cjs
CHANGED
|
@@ -5,6 +5,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
8
9
|
var __export = (target, all) => {
|
|
9
10
|
for (var name in all)
|
|
10
11
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -37,12 +38,11 @@ module.exports = __toCommonJS(src_exports);
|
|
|
37
38
|
// src/components/Identicon.tsx
|
|
38
39
|
var import_react_flexbox = require("@xylabs/react-flexbox");
|
|
39
40
|
var import_md5 = __toESM(require("md5"), 1);
|
|
40
|
-
var import_react = require("react");
|
|
41
|
-
var
|
|
42
|
-
var range = (n, in_min, in_max, out_min, out_max) => {
|
|
41
|
+
var import_react = __toESM(require("react"), 1);
|
|
42
|
+
var range = /* @__PURE__ */ __name((n, in_min, in_max, out_min, out_max) => {
|
|
43
43
|
return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
|
44
|
-
};
|
|
45
|
-
var updateCanvas = (canvas, props) => {
|
|
44
|
+
}, "range");
|
|
45
|
+
var updateCanvas = /* @__PURE__ */ __name((canvas, props) => {
|
|
46
46
|
const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
|
|
47
47
|
let { fg } = props;
|
|
48
48
|
const hash = (0, import_md5.default)(value);
|
|
@@ -58,7 +58,9 @@ var updateCanvas = (canvas, props) => {
|
|
|
58
58
|
}
|
|
59
59
|
current.width = block * count + iconPadding;
|
|
60
60
|
current.height = block * count + iconPadding;
|
|
61
|
-
const arr = [
|
|
61
|
+
const arr = [
|
|
62
|
+
...hash
|
|
63
|
+
].map((el) => {
|
|
62
64
|
const parsedEl = Number.parseInt(el, 16);
|
|
63
65
|
return parsedEl < 8 ? 0 : 1;
|
|
64
66
|
});
|
|
@@ -82,22 +84,28 @@ var updateCanvas = (canvas, props) => {
|
|
|
82
84
|
}
|
|
83
85
|
}
|
|
84
86
|
}
|
|
85
|
-
};
|
|
86
|
-
var Identicon = ({
|
|
87
|
-
size = 400,
|
|
88
|
-
className = "identicon",
|
|
89
|
-
bg,
|
|
90
|
-
count,
|
|
91
|
-
fg,
|
|
92
|
-
iconPadding,
|
|
93
|
-
palette,
|
|
94
|
-
value,
|
|
95
|
-
...props
|
|
96
|
-
}) => {
|
|
87
|
+
}, "updateCanvas");
|
|
88
|
+
var Identicon = /* @__PURE__ */ __name(({ size = 400, className = "identicon", bg, count, fg, iconPadding, palette, value, ...props }) => {
|
|
97
89
|
const canvas = (0, import_react.useRef)(null);
|
|
98
90
|
(0, import_react.useEffect)(() => {
|
|
99
|
-
updateCanvas(canvas, {
|
|
91
|
+
updateCanvas(canvas, {
|
|
92
|
+
bg,
|
|
93
|
+
className,
|
|
94
|
+
count,
|
|
95
|
+
fg,
|
|
96
|
+
iconPadding,
|
|
97
|
+
palette,
|
|
98
|
+
size,
|
|
99
|
+
value
|
|
100
|
+
});
|
|
100
101
|
});
|
|
101
|
-
return /* @__PURE__ */
|
|
102
|
-
|
|
102
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react_flexbox.FlexRow, props, value ? /* @__PURE__ */ import_react.default.createElement("canvas", {
|
|
103
|
+
className,
|
|
104
|
+
ref: canvas,
|
|
105
|
+
style: {
|
|
106
|
+
height: size,
|
|
107
|
+
width: size
|
|
108
|
+
}
|
|
109
|
+
}) : null);
|
|
110
|
+
}, "Identicon");
|
|
103
111
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts","../../src/components/Identicon.tsx"],"sourcesContent":["export * from './components/index.
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts","../../src/components/Identicon.tsx"],"sourcesContent":["export * from './components/index.ts'\n","import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashColor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length > 0) {\n const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = [...hash].map((el) => {\n const parsedEl = Number.parseInt(el, 16)\n return parsedEl < 8 ? 0 : 1\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n for (const [i, row] of map.entries()) {\n for (const [j, el] of row.entries()) {\n if (el) {\n ctx.fillStyle = fg ?? '#' + hashColor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n }\n }\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return (\n <FlexRow {...props}>\n {value\n ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} />\n : null}\n </FlexRow>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;ACAA,2BAAsC;AACtC,iBAAgB;AAChB,mBAAyC;AAEzC,IAAMA,QAAQ,wBAACC,GAAWC,QAAgBC,QAAgBC,SAAiBC,YAAAA;AACzE,UAASJ,IAAIC,WAAWG,UAAUD,YAAaD,SAASD,UAAUE;AACpE,GAFc;AAed,IAAME,eAAe,wBAACC,QAA4CC,UAAAA;AAChE,QAAM,EAAEC,QAAQ,IAAIC,OAAO,KAAKC,KAAK,eAAeC,QAAQ,GAAGC,SAASC,cAAc,EAAC,IAAKN;AAC5F,MAAI,EAAEO,GAAE,IAAKP;AACb,QAAMQ,WAAOC,WAAAA,SAAIR,KAAAA;AACjB,QAAMS,QAAQC,KAAKC,MAAMV,OAAOE,KAAAA;AAChC,QAAMS,YAAYL,KAAKM,MAAM,GAAG,CAAA;AAEhC,QAAMC,UAAUhB,OAAOgB;AAEvB,MAAI,CAACA,SAAS;AACZ;EACF;AAEA,MAAIV,WAAWA,QAAQW,SAAS,GAAG;AACjC,UAAMC,QAAQN,KAAKC,MAAMpB,MAAM0B,OAAOC,SAASX,KAAKM,MAAM,EAAC,GAAI,EAAA,GAAK,GAAG,MAAM,GAAGT,QAAQW,MAAM,CAAA;AAC9FT,SAAKF,QAAQY,KAAAA;EACf;AAEAF,UAAQK,QAAQV,QAAQN,QAAQE;AAChCS,UAAQM,SAASX,QAAQN,QAAQE;AACjC,QAAMgB,MAAM;OAAId;IAAMe,IAAI,CAACC,OAAAA;AACzB,UAAMC,WAAWP,OAAOC,SAASK,IAAI,EAAA;AACrC,WAAOC,WAAW,IAAI,IAAI;EAC5B,CAAA;AAEA,QAAMF,MAAM,CAAA;AAEZA,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,CAAA;AAC/BS,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,EAAA;AAC/BS,MAAI,CAAA,IAAKD,IAAIR,MAAM,IAAI,EAAA;AAEvB,QAAMY,MAAMX,QAAQY,WAAW,IAAA;AAC/B,MAAID,KAAK;AACPA,QAAIE,wBAAwB;AAC5BF,QAAIG,UAAU,GAAG,GAAGd,QAAQK,OAAOL,QAAQM,MAAM;AAEjD,eAAW,CAACS,GAAGC,GAAAA,KAAQR,IAAIS,QAAO,GAAI;AACpC,iBAAW,CAACC,GAAGT,EAAAA,KAAOO,IAAIC,QAAO,GAAI;AACnC,YAAIR,IAAI;AACNE,cAAIQ,YAAY3B,MAAM,MAAMM;AAC5Ba,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F,OAAO;AACLoB,cAAIQ,YAAY/B;AAChBuB,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F;MACF;IACF;EACF;AACF,GAhDqB;AAkDd,IAAM8B,YAAsC,wBAAC,EAClDlC,OAAO,KACPmC,YAAY,aACZlC,IACAC,OACAG,IACAD,aACAD,SACAJ,OACA,GAAGD,MAAAA,MACJ;AACC,QAAMD,aAASuC,qBAA0B,IAAA;AAEzCC,8BAAU,MAAA;AACRzC,iBAAaC,QAAQ;MAAEI;MAAIkC;MAAWjC;MAAOG;MAAID;MAAaD;MAASH;MAAMD;IAAM,CAAA;EACrF,CAAA;AAEA,SACE,6BAAAuC,QAAA,cAACC,8BAAYzC,OACVC,QACG,6BAAAuC,QAAA,cAACzC,UAAAA;IAAOsC;IAAsBK,KAAK3C;IAAQ4C,OAAO;MAAEtB,QAAQnB;MAAMkB,OAAOlB;IAAK;OAC9E,IAAA;AAGV,GAxBmD;","names":["range","n","in_min","in_max","out_min","out_max","updateCanvas","canvas","props","value","size","bg","count","palette","iconPadding","fg","hash","md5","block","Math","floor","hashColor","slice","current","length","index","Number","parseInt","width","height","arr","map","el","parsedEl","ctx","getContext","imageSmoothingEnabled","clearRect","i","row","entries","j","fillStyle","fillRect","Identicon","className","useRef","useEffect","React","FlexRow","ref","style"]}
|
package/dist/browser/index.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './components/index.
|
|
1
|
+
export * from './components/index.ts';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/browser/index.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './components/index.
|
|
1
|
+
export * from './components/index.ts';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/browser/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './components/index.
|
|
1
|
+
export * from './components/index.ts';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
|
|
1
4
|
// src/components/Identicon.tsx
|
|
2
5
|
import { FlexRow } from "@xylabs/react-flexbox";
|
|
3
6
|
import md5 from "md5";
|
|
4
|
-
import { useEffect, useRef } from "react";
|
|
5
|
-
|
|
6
|
-
var range = (n, in_min, in_max, out_min, out_max) => {
|
|
7
|
+
import React, { useEffect, useRef } from "react";
|
|
8
|
+
var range = /* @__PURE__ */ __name((n, in_min, in_max, out_min, out_max) => {
|
|
7
9
|
return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
|
8
|
-
};
|
|
9
|
-
var updateCanvas = (canvas, props) => {
|
|
10
|
+
}, "range");
|
|
11
|
+
var updateCanvas = /* @__PURE__ */ __name((canvas, props) => {
|
|
10
12
|
const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
|
|
11
13
|
let { fg } = props;
|
|
12
14
|
const hash = md5(value);
|
|
@@ -22,7 +24,9 @@ var updateCanvas = (canvas, props) => {
|
|
|
22
24
|
}
|
|
23
25
|
current.width = block * count + iconPadding;
|
|
24
26
|
current.height = block * count + iconPadding;
|
|
25
|
-
const arr = [
|
|
27
|
+
const arr = [
|
|
28
|
+
...hash
|
|
29
|
+
].map((el) => {
|
|
26
30
|
const parsedEl = Number.parseInt(el, 16);
|
|
27
31
|
return parsedEl < 8 ? 0 : 1;
|
|
28
32
|
});
|
|
@@ -46,25 +50,31 @@ var updateCanvas = (canvas, props) => {
|
|
|
46
50
|
}
|
|
47
51
|
}
|
|
48
52
|
}
|
|
49
|
-
};
|
|
50
|
-
var Identicon = ({
|
|
51
|
-
size = 400,
|
|
52
|
-
className = "identicon",
|
|
53
|
-
bg,
|
|
54
|
-
count,
|
|
55
|
-
fg,
|
|
56
|
-
iconPadding,
|
|
57
|
-
palette,
|
|
58
|
-
value,
|
|
59
|
-
...props
|
|
60
|
-
}) => {
|
|
53
|
+
}, "updateCanvas");
|
|
54
|
+
var Identicon = /* @__PURE__ */ __name(({ size = 400, className = "identicon", bg, count, fg, iconPadding, palette, value, ...props }) => {
|
|
61
55
|
const canvas = useRef(null);
|
|
62
56
|
useEffect(() => {
|
|
63
|
-
updateCanvas(canvas, {
|
|
57
|
+
updateCanvas(canvas, {
|
|
58
|
+
bg,
|
|
59
|
+
className,
|
|
60
|
+
count,
|
|
61
|
+
fg,
|
|
62
|
+
iconPadding,
|
|
63
|
+
palette,
|
|
64
|
+
size,
|
|
65
|
+
value
|
|
66
|
+
});
|
|
64
67
|
});
|
|
65
|
-
return /* @__PURE__ */
|
|
66
|
-
|
|
68
|
+
return /* @__PURE__ */ React.createElement(FlexRow, props, value ? /* @__PURE__ */ React.createElement("canvas", {
|
|
69
|
+
className,
|
|
70
|
+
ref: canvas,
|
|
71
|
+
style: {
|
|
72
|
+
height: size,
|
|
73
|
+
width: size
|
|
74
|
+
}
|
|
75
|
+
}) : null);
|
|
76
|
+
}, "Identicon");
|
|
67
77
|
export {
|
|
68
78
|
Identicon
|
|
69
79
|
};
|
|
70
|
-
//# sourceMappingURL=index.
|
|
80
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashColor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length > 0) {\n const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = [...hash].map((el) => {\n const parsedEl = Number.parseInt(el, 16)\n return parsedEl < 8 ? 0 : 1\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n for (const [i, row] of map.entries()) {\n for (const [j, el] of row.entries()) {\n if (el) {\n ctx.fillStyle = fg ?? '#' + hashColor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n }\n }\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return (\n <FlexRow {...props}>\n {value\n ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} />\n : null}\n </FlexRow>\n )\n}\n"],"mappings":";;;;AAAA,SAAuBA,eAAe;AACtC,OAAOC,SAAS;AAChB,OAAOC,SAASC,WAAWC,cAAc;AAEzC,IAAMC,QAAQ,wBAACC,GAAWC,QAAgBC,QAAgBC,SAAiBC,YAAAA;AACzE,UAASJ,IAAIC,WAAWG,UAAUD,YAAaD,SAASD,UAAUE;AACpE,GAFc;AAed,IAAME,eAAe,wBAACC,QAA4CC,UAAAA;AAChE,QAAM,EAAEC,QAAQ,IAAIC,OAAO,KAAKC,KAAK,eAAeC,QAAQ,GAAGC,SAASC,cAAc,EAAC,IAAKN;AAC5F,MAAI,EAAEO,GAAE,IAAKP;AACb,QAAMQ,OAAOC,IAAIR,KAAAA;AACjB,QAAMS,QAAQC,KAAKC,MAAMV,OAAOE,KAAAA;AAChC,QAAMS,YAAYL,KAAKM,MAAM,GAAG,CAAA;AAEhC,QAAMC,UAAUhB,OAAOgB;AAEvB,MAAI,CAACA,SAAS;AACZ;EACF;AAEA,MAAIV,WAAWA,QAAQW,SAAS,GAAG;AACjC,UAAMC,QAAQN,KAAKC,MAAMpB,MAAM0B,OAAOC,SAASX,KAAKM,MAAM,EAAC,GAAI,EAAA,GAAK,GAAG,MAAM,GAAGT,QAAQW,MAAM,CAAA;AAC9FT,SAAKF,QAAQY,KAAAA;EACf;AAEAF,UAAQK,QAAQV,QAAQN,QAAQE;AAChCS,UAAQM,SAASX,QAAQN,QAAQE;AACjC,QAAMgB,MAAM;OAAId;IAAMe,IAAI,CAACC,OAAAA;AACzB,UAAMC,WAAWP,OAAOC,SAASK,IAAI,EAAA;AACrC,WAAOC,WAAW,IAAI,IAAI;EAC5B,CAAA;AAEA,QAAMF,MAAM,CAAA;AAEZA,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,CAAA;AAC/BS,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,EAAA;AAC/BS,MAAI,CAAA,IAAKD,IAAIR,MAAM,IAAI,EAAA;AAEvB,QAAMY,MAAMX,QAAQY,WAAW,IAAA;AAC/B,MAAID,KAAK;AACPA,QAAIE,wBAAwB;AAC5BF,QAAIG,UAAU,GAAG,GAAGd,QAAQK,OAAOL,QAAQM,MAAM;AAEjD,eAAW,CAACS,GAAGC,GAAAA,KAAQR,IAAIS,QAAO,GAAI;AACpC,iBAAW,CAACC,GAAGT,EAAAA,KAAOO,IAAIC,QAAO,GAAI;AACnC,YAAIR,IAAI;AACNE,cAAIQ,YAAY3B,MAAM,MAAMM;AAC5Ba,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F,OAAO;AACLoB,cAAIQ,YAAY/B;AAChBuB,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F;MACF;IACF;EACF;AACF,GAhDqB;AAkDd,IAAM8B,YAAsC,wBAAC,EAClDlC,OAAO,KACPmC,YAAY,aACZlC,IACAC,OACAG,IACAD,aACAD,SACAJ,OACA,GAAGD,MAAAA,MACJ;AACC,QAAMD,SAASuC,OAA0B,IAAA;AAEzCC,YAAU,MAAA;AACRzC,iBAAaC,QAAQ;MAAEI;MAAIkC;MAAWjC;MAAOG;MAAID;MAAaD;MAASH;MAAMD;IAAM,CAAA;EACrF,CAAA;AAEA,SACE,sBAAA,cAACuC,SAAYxC,OACVC,QACG,sBAAA,cAACF,UAAAA;IAAOsC;IAAsBI,KAAK1C;IAAQ2C,OAAO;MAAErB,QAAQnB;MAAMkB,OAAOlB;IAAK;OAC9E,IAAA;AAGV,GAxBmD;","names":["FlexRow","md5","React","useEffect","useRef","range","n","in_min","in_max","out_min","out_max","updateCanvas","canvas","props","value","size","bg","count","palette","iconPadding","fg","hash","md5","block","Math","floor","hashColor","slice","current","length","index","Number","parseInt","width","height","arr","map","el","parsedEl","ctx","getContext","imageSmoothingEnabled","clearRect","i","row","entries","j","fillStyle","fillRect","Identicon","className","useRef","useEffect","FlexRow","ref","style"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './Identicon.
|
|
1
|
+
export * from './Identicon.tsx';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './Identicon.
|
|
1
|
+
export * from './Identicon.tsx';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './Identicon.
|
|
1
|
+
export * from './Identicon.tsx';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/neutral/index.cjs
CHANGED
|
@@ -5,6 +5,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
8
9
|
var __export = (target, all) => {
|
|
9
10
|
for (var name in all)
|
|
10
11
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -37,12 +38,11 @@ module.exports = __toCommonJS(src_exports);
|
|
|
37
38
|
// src/components/Identicon.tsx
|
|
38
39
|
var import_react_flexbox = require("@xylabs/react-flexbox");
|
|
39
40
|
var import_md5 = __toESM(require("md5"), 1);
|
|
40
|
-
var import_react = require("react");
|
|
41
|
-
var
|
|
42
|
-
var range = (n, in_min, in_max, out_min, out_max) => {
|
|
41
|
+
var import_react = __toESM(require("react"), 1);
|
|
42
|
+
var range = /* @__PURE__ */ __name((n, in_min, in_max, out_min, out_max) => {
|
|
43
43
|
return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
|
44
|
-
};
|
|
45
|
-
var updateCanvas = (canvas, props) => {
|
|
44
|
+
}, "range");
|
|
45
|
+
var updateCanvas = /* @__PURE__ */ __name((canvas, props) => {
|
|
46
46
|
const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
|
|
47
47
|
let { fg } = props;
|
|
48
48
|
const hash = (0, import_md5.default)(value);
|
|
@@ -58,7 +58,9 @@ var updateCanvas = (canvas, props) => {
|
|
|
58
58
|
}
|
|
59
59
|
current.width = block * count + iconPadding;
|
|
60
60
|
current.height = block * count + iconPadding;
|
|
61
|
-
const arr = [
|
|
61
|
+
const arr = [
|
|
62
|
+
...hash
|
|
63
|
+
].map((el) => {
|
|
62
64
|
const parsedEl = Number.parseInt(el, 16);
|
|
63
65
|
return parsedEl < 8 ? 0 : 1;
|
|
64
66
|
});
|
|
@@ -82,22 +84,28 @@ var updateCanvas = (canvas, props) => {
|
|
|
82
84
|
}
|
|
83
85
|
}
|
|
84
86
|
}
|
|
85
|
-
};
|
|
86
|
-
var Identicon = ({
|
|
87
|
-
size = 400,
|
|
88
|
-
className = "identicon",
|
|
89
|
-
bg,
|
|
90
|
-
count,
|
|
91
|
-
fg,
|
|
92
|
-
iconPadding,
|
|
93
|
-
palette,
|
|
94
|
-
value,
|
|
95
|
-
...props
|
|
96
|
-
}) => {
|
|
87
|
+
}, "updateCanvas");
|
|
88
|
+
var Identicon = /* @__PURE__ */ __name(({ size = 400, className = "identicon", bg, count, fg, iconPadding, palette, value, ...props }) => {
|
|
97
89
|
const canvas = (0, import_react.useRef)(null);
|
|
98
90
|
(0, import_react.useEffect)(() => {
|
|
99
|
-
updateCanvas(canvas, {
|
|
91
|
+
updateCanvas(canvas, {
|
|
92
|
+
bg,
|
|
93
|
+
className,
|
|
94
|
+
count,
|
|
95
|
+
fg,
|
|
96
|
+
iconPadding,
|
|
97
|
+
palette,
|
|
98
|
+
size,
|
|
99
|
+
value
|
|
100
|
+
});
|
|
100
101
|
});
|
|
101
|
-
return /* @__PURE__ */
|
|
102
|
-
|
|
102
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react_flexbox.FlexRow, props, value ? /* @__PURE__ */ import_react.default.createElement("canvas", {
|
|
103
|
+
className,
|
|
104
|
+
ref: canvas,
|
|
105
|
+
style: {
|
|
106
|
+
height: size,
|
|
107
|
+
width: size
|
|
108
|
+
}
|
|
109
|
+
}) : null);
|
|
110
|
+
}, "Identicon");
|
|
103
111
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts","../../src/components/Identicon.tsx"],"sourcesContent":["export * from './components/index.
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts","../../src/components/Identicon.tsx"],"sourcesContent":["export * from './components/index.ts'\n","import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashColor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length > 0) {\n const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = [...hash].map((el) => {\n const parsedEl = Number.parseInt(el, 16)\n return parsedEl < 8 ? 0 : 1\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n for (const [i, row] of map.entries()) {\n for (const [j, el] of row.entries()) {\n if (el) {\n ctx.fillStyle = fg ?? '#' + hashColor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n }\n }\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return (\n <FlexRow {...props}>\n {value\n ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} />\n : null}\n </FlexRow>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;ACAA,2BAAsC;AACtC,iBAAgB;AAChB,mBAAyC;AAEzC,IAAMA,QAAQ,wBAACC,GAAWC,QAAgBC,QAAgBC,SAAiBC,YAAAA;AACzE,UAASJ,IAAIC,WAAWG,UAAUD,YAAaD,SAASD,UAAUE;AACpE,GAFc;AAed,IAAME,eAAe,wBAACC,QAA4CC,UAAAA;AAChE,QAAM,EAAEC,QAAQ,IAAIC,OAAO,KAAKC,KAAK,eAAeC,QAAQ,GAAGC,SAASC,cAAc,EAAC,IAAKN;AAC5F,MAAI,EAAEO,GAAE,IAAKP;AACb,QAAMQ,WAAOC,WAAAA,SAAIR,KAAAA;AACjB,QAAMS,QAAQC,KAAKC,MAAMV,OAAOE,KAAAA;AAChC,QAAMS,YAAYL,KAAKM,MAAM,GAAG,CAAA;AAEhC,QAAMC,UAAUhB,OAAOgB;AAEvB,MAAI,CAACA,SAAS;AACZ;EACF;AAEA,MAAIV,WAAWA,QAAQW,SAAS,GAAG;AACjC,UAAMC,QAAQN,KAAKC,MAAMpB,MAAM0B,OAAOC,SAASX,KAAKM,MAAM,EAAC,GAAI,EAAA,GAAK,GAAG,MAAM,GAAGT,QAAQW,MAAM,CAAA;AAC9FT,SAAKF,QAAQY,KAAAA;EACf;AAEAF,UAAQK,QAAQV,QAAQN,QAAQE;AAChCS,UAAQM,SAASX,QAAQN,QAAQE;AACjC,QAAMgB,MAAM;OAAId;IAAMe,IAAI,CAACC,OAAAA;AACzB,UAAMC,WAAWP,OAAOC,SAASK,IAAI,EAAA;AACrC,WAAOC,WAAW,IAAI,IAAI;EAC5B,CAAA;AAEA,QAAMF,MAAM,CAAA;AAEZA,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,CAAA;AAC/BS,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,EAAA;AAC/BS,MAAI,CAAA,IAAKD,IAAIR,MAAM,IAAI,EAAA;AAEvB,QAAMY,MAAMX,QAAQY,WAAW,IAAA;AAC/B,MAAID,KAAK;AACPA,QAAIE,wBAAwB;AAC5BF,QAAIG,UAAU,GAAG,GAAGd,QAAQK,OAAOL,QAAQM,MAAM;AAEjD,eAAW,CAACS,GAAGC,GAAAA,KAAQR,IAAIS,QAAO,GAAI;AACpC,iBAAW,CAACC,GAAGT,EAAAA,KAAOO,IAAIC,QAAO,GAAI;AACnC,YAAIR,IAAI;AACNE,cAAIQ,YAAY3B,MAAM,MAAMM;AAC5Ba,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F,OAAO;AACLoB,cAAIQ,YAAY/B;AAChBuB,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F;MACF;IACF;EACF;AACF,GAhDqB;AAkDd,IAAM8B,YAAsC,wBAAC,EAClDlC,OAAO,KACPmC,YAAY,aACZlC,IACAC,OACAG,IACAD,aACAD,SACAJ,OACA,GAAGD,MAAAA,MACJ;AACC,QAAMD,aAASuC,qBAA0B,IAAA;AAEzCC,8BAAU,MAAA;AACRzC,iBAAaC,QAAQ;MAAEI;MAAIkC;MAAWjC;MAAOG;MAAID;MAAaD;MAASH;MAAMD;IAAM,CAAA;EACrF,CAAA;AAEA,SACE,6BAAAuC,QAAA,cAACC,8BAAYzC,OACVC,QACG,6BAAAuC,QAAA,cAACzC,UAAAA;IAAOsC;IAAsBK,KAAK3C;IAAQ4C,OAAO;MAAEtB,QAAQnB;MAAMkB,OAAOlB;IAAK;OAC9E,IAAA;AAGV,GAxBmD;","names":["range","n","in_min","in_max","out_min","out_max","updateCanvas","canvas","props","value","size","bg","count","palette","iconPadding","fg","hash","md5","block","Math","floor","hashColor","slice","current","length","index","Number","parseInt","width","height","arr","map","el","parsedEl","ctx","getContext","imageSmoothingEnabled","clearRect","i","row","entries","j","fillStyle","fillRect","Identicon","className","useRef","useEffect","React","FlexRow","ref","style"]}
|
package/dist/neutral/index.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './components/index.
|
|
1
|
+
export * from './components/index.ts';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/neutral/index.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './components/index.
|
|
1
|
+
export * from './components/index.ts';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/neutral/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './components/index.
|
|
1
|
+
export * from './components/index.ts';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
|
|
1
4
|
// src/components/Identicon.tsx
|
|
2
5
|
import { FlexRow } from "@xylabs/react-flexbox";
|
|
3
6
|
import md5 from "md5";
|
|
4
|
-
import { useEffect, useRef } from "react";
|
|
5
|
-
|
|
6
|
-
var range = (n, in_min, in_max, out_min, out_max) => {
|
|
7
|
+
import React, { useEffect, useRef } from "react";
|
|
8
|
+
var range = /* @__PURE__ */ __name((n, in_min, in_max, out_min, out_max) => {
|
|
7
9
|
return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
|
8
|
-
};
|
|
9
|
-
var updateCanvas = (canvas, props) => {
|
|
10
|
+
}, "range");
|
|
11
|
+
var updateCanvas = /* @__PURE__ */ __name((canvas, props) => {
|
|
10
12
|
const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
|
|
11
13
|
let { fg } = props;
|
|
12
14
|
const hash = md5(value);
|
|
@@ -22,7 +24,9 @@ var updateCanvas = (canvas, props) => {
|
|
|
22
24
|
}
|
|
23
25
|
current.width = block * count + iconPadding;
|
|
24
26
|
current.height = block * count + iconPadding;
|
|
25
|
-
const arr = [
|
|
27
|
+
const arr = [
|
|
28
|
+
...hash
|
|
29
|
+
].map((el) => {
|
|
26
30
|
const parsedEl = Number.parseInt(el, 16);
|
|
27
31
|
return parsedEl < 8 ? 0 : 1;
|
|
28
32
|
});
|
|
@@ -46,25 +50,31 @@ var updateCanvas = (canvas, props) => {
|
|
|
46
50
|
}
|
|
47
51
|
}
|
|
48
52
|
}
|
|
49
|
-
};
|
|
50
|
-
var Identicon = ({
|
|
51
|
-
size = 400,
|
|
52
|
-
className = "identicon",
|
|
53
|
-
bg,
|
|
54
|
-
count,
|
|
55
|
-
fg,
|
|
56
|
-
iconPadding,
|
|
57
|
-
palette,
|
|
58
|
-
value,
|
|
59
|
-
...props
|
|
60
|
-
}) => {
|
|
53
|
+
}, "updateCanvas");
|
|
54
|
+
var Identicon = /* @__PURE__ */ __name(({ size = 400, className = "identicon", bg, count, fg, iconPadding, palette, value, ...props }) => {
|
|
61
55
|
const canvas = useRef(null);
|
|
62
56
|
useEffect(() => {
|
|
63
|
-
updateCanvas(canvas, {
|
|
57
|
+
updateCanvas(canvas, {
|
|
58
|
+
bg,
|
|
59
|
+
className,
|
|
60
|
+
count,
|
|
61
|
+
fg,
|
|
62
|
+
iconPadding,
|
|
63
|
+
palette,
|
|
64
|
+
size,
|
|
65
|
+
value
|
|
66
|
+
});
|
|
64
67
|
});
|
|
65
|
-
return /* @__PURE__ */
|
|
66
|
-
|
|
68
|
+
return /* @__PURE__ */ React.createElement(FlexRow, props, value ? /* @__PURE__ */ React.createElement("canvas", {
|
|
69
|
+
className,
|
|
70
|
+
ref: canvas,
|
|
71
|
+
style: {
|
|
72
|
+
height: size,
|
|
73
|
+
width: size
|
|
74
|
+
}
|
|
75
|
+
}) : null);
|
|
76
|
+
}, "Identicon");
|
|
67
77
|
export {
|
|
68
78
|
Identicon
|
|
69
79
|
};
|
|
70
|
-
//# sourceMappingURL=index.
|
|
80
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashColor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length > 0) {\n const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = [...hash].map((el) => {\n const parsedEl = Number.parseInt(el, 16)\n return parsedEl < 8 ? 0 : 1\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n for (const [i, row] of map.entries()) {\n for (const [j, el] of row.entries()) {\n if (el) {\n ctx.fillStyle = fg ?? '#' + hashColor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n }\n }\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return (\n <FlexRow {...props}>\n {value\n ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} />\n : null}\n </FlexRow>\n )\n}\n"],"mappings":";;;;AAAA,SAAuBA,eAAe;AACtC,OAAOC,SAAS;AAChB,OAAOC,SAASC,WAAWC,cAAc;AAEzC,IAAMC,QAAQ,wBAACC,GAAWC,QAAgBC,QAAgBC,SAAiBC,YAAAA;AACzE,UAASJ,IAAIC,WAAWG,UAAUD,YAAaD,SAASD,UAAUE;AACpE,GAFc;AAed,IAAME,eAAe,wBAACC,QAA4CC,UAAAA;AAChE,QAAM,EAAEC,QAAQ,IAAIC,OAAO,KAAKC,KAAK,eAAeC,QAAQ,GAAGC,SAASC,cAAc,EAAC,IAAKN;AAC5F,MAAI,EAAEO,GAAE,IAAKP;AACb,QAAMQ,OAAOC,IAAIR,KAAAA;AACjB,QAAMS,QAAQC,KAAKC,MAAMV,OAAOE,KAAAA;AAChC,QAAMS,YAAYL,KAAKM,MAAM,GAAG,CAAA;AAEhC,QAAMC,UAAUhB,OAAOgB;AAEvB,MAAI,CAACA,SAAS;AACZ;EACF;AAEA,MAAIV,WAAWA,QAAQW,SAAS,GAAG;AACjC,UAAMC,QAAQN,KAAKC,MAAMpB,MAAM0B,OAAOC,SAASX,KAAKM,MAAM,EAAC,GAAI,EAAA,GAAK,GAAG,MAAM,GAAGT,QAAQW,MAAM,CAAA;AAC9FT,SAAKF,QAAQY,KAAAA;EACf;AAEAF,UAAQK,QAAQV,QAAQN,QAAQE;AAChCS,UAAQM,SAASX,QAAQN,QAAQE;AACjC,QAAMgB,MAAM;OAAId;IAAMe,IAAI,CAACC,OAAAA;AACzB,UAAMC,WAAWP,OAAOC,SAASK,IAAI,EAAA;AACrC,WAAOC,WAAW,IAAI,IAAI;EAC5B,CAAA;AAEA,QAAMF,MAAM,CAAA;AAEZA,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,CAAA;AAC/BS,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,EAAA;AAC/BS,MAAI,CAAA,IAAKD,IAAIR,MAAM,IAAI,EAAA;AAEvB,QAAMY,MAAMX,QAAQY,WAAW,IAAA;AAC/B,MAAID,KAAK;AACPA,QAAIE,wBAAwB;AAC5BF,QAAIG,UAAU,GAAG,GAAGd,QAAQK,OAAOL,QAAQM,MAAM;AAEjD,eAAW,CAACS,GAAGC,GAAAA,KAAQR,IAAIS,QAAO,GAAI;AACpC,iBAAW,CAACC,GAAGT,EAAAA,KAAOO,IAAIC,QAAO,GAAI;AACnC,YAAIR,IAAI;AACNE,cAAIQ,YAAY3B,MAAM,MAAMM;AAC5Ba,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F,OAAO;AACLoB,cAAIQ,YAAY/B;AAChBuB,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F;MACF;IACF;EACF;AACF,GAhDqB;AAkDd,IAAM8B,YAAsC,wBAAC,EAClDlC,OAAO,KACPmC,YAAY,aACZlC,IACAC,OACAG,IACAD,aACAD,SACAJ,OACA,GAAGD,MAAAA,MACJ;AACC,QAAMD,SAASuC,OAA0B,IAAA;AAEzCC,YAAU,MAAA;AACRzC,iBAAaC,QAAQ;MAAEI;MAAIkC;MAAWjC;MAAOG;MAAID;MAAaD;MAASH;MAAMD;IAAM,CAAA;EACrF,CAAA;AAEA,SACE,sBAAA,cAACuC,SAAYxC,OACVC,QACG,sBAAA,cAACF,UAAAA;IAAOsC;IAAsBI,KAAK1C;IAAQ2C,OAAO;MAAErB,QAAQnB;MAAMkB,OAAOlB;IAAK;OAC9E,IAAA;AAGV,GAxBmD;","names":["FlexRow","md5","React","useEffect","useRef","range","n","in_min","in_max","out_min","out_max","updateCanvas","canvas","props","value","size","bg","count","palette","iconPadding","fg","hash","md5","block","Math","floor","hashColor","slice","current","length","index","Number","parseInt","width","height","arr","map","el","parsedEl","ctx","getContext","imageSmoothingEnabled","clearRect","i","row","entries","j","fillStyle","fillRect","Identicon","className","useRef","useEffect","FlexRow","ref","style"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './Identicon.
|
|
1
|
+
export * from './Identicon.tsx';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './Identicon.
|
|
1
|
+
export * from './Identicon.tsx';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './Identicon.
|
|
1
|
+
export * from './Identicon.tsx';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/node/index.cjs
CHANGED
|
@@ -5,6 +5,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
8
9
|
var __export = (target, all) => {
|
|
9
10
|
for (var name in all)
|
|
10
11
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -37,12 +38,11 @@ module.exports = __toCommonJS(src_exports);
|
|
|
37
38
|
// src/components/Identicon.tsx
|
|
38
39
|
var import_react_flexbox = require("@xylabs/react-flexbox");
|
|
39
40
|
var import_md5 = __toESM(require("md5"), 1);
|
|
40
|
-
var import_react = require("react");
|
|
41
|
-
var
|
|
42
|
-
var range = (n, in_min, in_max, out_min, out_max) => {
|
|
41
|
+
var import_react = __toESM(require("react"), 1);
|
|
42
|
+
var range = /* @__PURE__ */ __name((n, in_min, in_max, out_min, out_max) => {
|
|
43
43
|
return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
|
44
|
-
};
|
|
45
|
-
var updateCanvas = (canvas, props) => {
|
|
44
|
+
}, "range");
|
|
45
|
+
var updateCanvas = /* @__PURE__ */ __name((canvas, props) => {
|
|
46
46
|
const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
|
|
47
47
|
let { fg } = props;
|
|
48
48
|
const hash = (0, import_md5.default)(value);
|
|
@@ -58,7 +58,9 @@ var updateCanvas = (canvas, props) => {
|
|
|
58
58
|
}
|
|
59
59
|
current.width = block * count + iconPadding;
|
|
60
60
|
current.height = block * count + iconPadding;
|
|
61
|
-
const arr = [
|
|
61
|
+
const arr = [
|
|
62
|
+
...hash
|
|
63
|
+
].map((el) => {
|
|
62
64
|
const parsedEl = Number.parseInt(el, 16);
|
|
63
65
|
return parsedEl < 8 ? 0 : 1;
|
|
64
66
|
});
|
|
@@ -82,24 +84,30 @@ var updateCanvas = (canvas, props) => {
|
|
|
82
84
|
}
|
|
83
85
|
}
|
|
84
86
|
}
|
|
85
|
-
};
|
|
86
|
-
var Identicon = ({
|
|
87
|
-
size = 400,
|
|
88
|
-
className = "identicon",
|
|
89
|
-
bg,
|
|
90
|
-
count,
|
|
91
|
-
fg,
|
|
92
|
-
iconPadding,
|
|
93
|
-
palette,
|
|
94
|
-
value,
|
|
95
|
-
...props
|
|
96
|
-
}) => {
|
|
87
|
+
}, "updateCanvas");
|
|
88
|
+
var Identicon = /* @__PURE__ */ __name(({ size = 400, className = "identicon", bg, count, fg, iconPadding, palette, value, ...props }) => {
|
|
97
89
|
const canvas = (0, import_react.useRef)(null);
|
|
98
90
|
(0, import_react.useEffect)(() => {
|
|
99
|
-
updateCanvas(canvas, {
|
|
91
|
+
updateCanvas(canvas, {
|
|
92
|
+
bg,
|
|
93
|
+
className,
|
|
94
|
+
count,
|
|
95
|
+
fg,
|
|
96
|
+
iconPadding,
|
|
97
|
+
palette,
|
|
98
|
+
size,
|
|
99
|
+
value
|
|
100
|
+
});
|
|
100
101
|
});
|
|
101
|
-
return /* @__PURE__ */
|
|
102
|
-
|
|
102
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react_flexbox.FlexRow, props, value ? /* @__PURE__ */ import_react.default.createElement("canvas", {
|
|
103
|
+
className,
|
|
104
|
+
ref: canvas,
|
|
105
|
+
style: {
|
|
106
|
+
height: size,
|
|
107
|
+
width: size
|
|
108
|
+
}
|
|
109
|
+
}) : null);
|
|
110
|
+
}, "Identicon");
|
|
103
111
|
// Annotate the CommonJS export names for ESM import in node:
|
|
104
112
|
0 && (module.exports = {
|
|
105
113
|
Identicon
|
package/dist/node/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts","../../src/components/Identicon.tsx"],"sourcesContent":["export * from './components/index.
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts","../../src/components/Identicon.tsx"],"sourcesContent":["export * from './components/index.ts'\n","import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashColor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length > 0) {\n const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = [...hash].map((el) => {\n const parsedEl = Number.parseInt(el, 16)\n return parsedEl < 8 ? 0 : 1\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n for (const [i, row] of map.entries()) {\n for (const [j, el] of row.entries()) {\n if (el) {\n ctx.fillStyle = fg ?? '#' + hashColor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n }\n }\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return (\n <FlexRow {...props}>\n {value\n ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} />\n : null}\n </FlexRow>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;ACAA,2BAAsC;AACtC,iBAAgB;AAChB,mBAAyC;AAEzC,IAAMA,QAAQ,wBAACC,GAAWC,QAAgBC,QAAgBC,SAAiBC,YAAAA;AACzE,UAASJ,IAAIC,WAAWG,UAAUD,YAAaD,SAASD,UAAUE;AACpE,GAFc;AAed,IAAME,eAAe,wBAACC,QAA4CC,UAAAA;AAChE,QAAM,EAAEC,QAAQ,IAAIC,OAAO,KAAKC,KAAK,eAAeC,QAAQ,GAAGC,SAASC,cAAc,EAAC,IAAKN;AAC5F,MAAI,EAAEO,GAAE,IAAKP;AACb,QAAMQ,WAAOC,WAAAA,SAAIR,KAAAA;AACjB,QAAMS,QAAQC,KAAKC,MAAMV,OAAOE,KAAAA;AAChC,QAAMS,YAAYL,KAAKM,MAAM,GAAG,CAAA;AAEhC,QAAMC,UAAUhB,OAAOgB;AAEvB,MAAI,CAACA,SAAS;AACZ;EACF;AAEA,MAAIV,WAAWA,QAAQW,SAAS,GAAG;AACjC,UAAMC,QAAQN,KAAKC,MAAMpB,MAAM0B,OAAOC,SAASX,KAAKM,MAAM,EAAC,GAAI,EAAA,GAAK,GAAG,MAAM,GAAGT,QAAQW,MAAM,CAAA;AAC9FT,SAAKF,QAAQY,KAAAA;EACf;AAEAF,UAAQK,QAAQV,QAAQN,QAAQE;AAChCS,UAAQM,SAASX,QAAQN,QAAQE;AACjC,QAAMgB,MAAM;OAAId;IAAMe,IAAI,CAACC,OAAAA;AACzB,UAAMC,WAAWP,OAAOC,SAASK,IAAI,EAAA;AACrC,WAAOC,WAAW,IAAI,IAAI;EAC5B,CAAA;AAEA,QAAMF,MAAM,CAAA;AAEZA,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,CAAA;AAC/BS,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,EAAA;AAC/BS,MAAI,CAAA,IAAKD,IAAIR,MAAM,IAAI,EAAA;AAEvB,QAAMY,MAAMX,QAAQY,WAAW,IAAA;AAC/B,MAAID,KAAK;AACPA,QAAIE,wBAAwB;AAC5BF,QAAIG,UAAU,GAAG,GAAGd,QAAQK,OAAOL,QAAQM,MAAM;AAEjD,eAAW,CAACS,GAAGC,GAAAA,KAAQR,IAAIS,QAAO,GAAI;AACpC,iBAAW,CAACC,GAAGT,EAAAA,KAAOO,IAAIC,QAAO,GAAI;AACnC,YAAIR,IAAI;AACNE,cAAIQ,YAAY3B,MAAM,MAAMM;AAC5Ba,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F,OAAO;AACLoB,cAAIQ,YAAY/B;AAChBuB,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F;MACF;IACF;EACF;AACF,GAhDqB;AAkDd,IAAM8B,YAAsC,wBAAC,EAClDlC,OAAO,KACPmC,YAAY,aACZlC,IACAC,OACAG,IACAD,aACAD,SACAJ,OACA,GAAGD,MAAAA,MACJ;AACC,QAAMD,aAASuC,qBAA0B,IAAA;AAEzCC,8BAAU,MAAA;AACRzC,iBAAaC,QAAQ;MAAEI;MAAIkC;MAAWjC;MAAOG;MAAID;MAAaD;MAASH;MAAMD;IAAM,CAAA;EACrF,CAAA;AAEA,SACE,6BAAAuC,QAAA,cAACC,8BAAYzC,OACVC,QACG,6BAAAuC,QAAA,cAACzC,UAAAA;IAAOsC;IAAsBK,KAAK3C;IAAQ4C,OAAO;MAAEtB,QAAQnB;MAAMkB,OAAOlB;IAAK;OAC9E,IAAA;AAGV,GAxBmD;","names":["range","n","in_min","in_max","out_min","out_max","updateCanvas","canvas","props","value","size","bg","count","palette","iconPadding","fg","hash","md5","block","Math","floor","hashColor","slice","current","length","index","Number","parseInt","width","height","arr","map","el","parsedEl","ctx","getContext","imageSmoothingEnabled","clearRect","i","row","entries","j","fillStyle","fillRect","Identicon","className","useRef","useEffect","React","FlexRow","ref","style"]}
|
package/dist/node/index.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './components/index.
|
|
1
|
+
export * from './components/index.ts';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/node/index.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './components/index.
|
|
1
|
+
export * from './components/index.ts';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/node/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './components/index.
|
|
1
|
+
export * from './components/index.ts';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
|
|
1
4
|
// src/components/Identicon.tsx
|
|
2
5
|
import { FlexRow } from "@xylabs/react-flexbox";
|
|
3
6
|
import md5 from "md5";
|
|
4
|
-
import { useEffect, useRef } from "react";
|
|
5
|
-
|
|
6
|
-
var range = (n, in_min, in_max, out_min, out_max) => {
|
|
7
|
+
import React, { useEffect, useRef } from "react";
|
|
8
|
+
var range = /* @__PURE__ */ __name((n, in_min, in_max, out_min, out_max) => {
|
|
7
9
|
return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
|
8
|
-
};
|
|
9
|
-
var updateCanvas = (canvas, props) => {
|
|
10
|
+
}, "range");
|
|
11
|
+
var updateCanvas = /* @__PURE__ */ __name((canvas, props) => {
|
|
10
12
|
const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
|
|
11
13
|
let { fg } = props;
|
|
12
14
|
const hash = md5(value);
|
|
@@ -22,7 +24,9 @@ var updateCanvas = (canvas, props) => {
|
|
|
22
24
|
}
|
|
23
25
|
current.width = block * count + iconPadding;
|
|
24
26
|
current.height = block * count + iconPadding;
|
|
25
|
-
const arr = [
|
|
27
|
+
const arr = [
|
|
28
|
+
...hash
|
|
29
|
+
].map((el) => {
|
|
26
30
|
const parsedEl = Number.parseInt(el, 16);
|
|
27
31
|
return parsedEl < 8 ? 0 : 1;
|
|
28
32
|
});
|
|
@@ -46,25 +50,31 @@ var updateCanvas = (canvas, props) => {
|
|
|
46
50
|
}
|
|
47
51
|
}
|
|
48
52
|
}
|
|
49
|
-
};
|
|
50
|
-
var Identicon = ({
|
|
51
|
-
size = 400,
|
|
52
|
-
className = "identicon",
|
|
53
|
-
bg,
|
|
54
|
-
count,
|
|
55
|
-
fg,
|
|
56
|
-
iconPadding,
|
|
57
|
-
palette,
|
|
58
|
-
value,
|
|
59
|
-
...props
|
|
60
|
-
}) => {
|
|
53
|
+
}, "updateCanvas");
|
|
54
|
+
var Identicon = /* @__PURE__ */ __name(({ size = 400, className = "identicon", bg, count, fg, iconPadding, palette, value, ...props }) => {
|
|
61
55
|
const canvas = useRef(null);
|
|
62
56
|
useEffect(() => {
|
|
63
|
-
updateCanvas(canvas, {
|
|
57
|
+
updateCanvas(canvas, {
|
|
58
|
+
bg,
|
|
59
|
+
className,
|
|
60
|
+
count,
|
|
61
|
+
fg,
|
|
62
|
+
iconPadding,
|
|
63
|
+
palette,
|
|
64
|
+
size,
|
|
65
|
+
value
|
|
66
|
+
});
|
|
64
67
|
});
|
|
65
|
-
return /* @__PURE__ */
|
|
66
|
-
|
|
68
|
+
return /* @__PURE__ */ React.createElement(FlexRow, props, value ? /* @__PURE__ */ React.createElement("canvas", {
|
|
69
|
+
className,
|
|
70
|
+
ref: canvas,
|
|
71
|
+
style: {
|
|
72
|
+
height: size,
|
|
73
|
+
width: size
|
|
74
|
+
}
|
|
75
|
+
}) : null);
|
|
76
|
+
}, "Identicon");
|
|
67
77
|
export {
|
|
68
78
|
Identicon
|
|
69
79
|
};
|
|
70
|
-
//# sourceMappingURL=index.
|
|
80
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashColor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length > 0) {\n const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = [...hash].map((el) => {\n const parsedEl = Number.parseInt(el, 16)\n return parsedEl < 8 ? 0 : 1\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n for (const [i, row] of map.entries()) {\n for (const [j, el] of row.entries()) {\n if (el) {\n ctx.fillStyle = fg ?? '#' + hashColor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n }\n }\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return (\n <FlexRow {...props}>\n {value\n ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} />\n : null}\n </FlexRow>\n )\n}\n"],"mappings":";;;;AAAA,SAAuBA,eAAe;AACtC,OAAOC,SAAS;AAChB,OAAOC,SAASC,WAAWC,cAAc;AAEzC,IAAMC,QAAQ,wBAACC,GAAWC,QAAgBC,QAAgBC,SAAiBC,YAAAA;AACzE,UAASJ,IAAIC,WAAWG,UAAUD,YAAaD,SAASD,UAAUE;AACpE,GAFc;AAed,IAAME,eAAe,wBAACC,QAA4CC,UAAAA;AAChE,QAAM,EAAEC,QAAQ,IAAIC,OAAO,KAAKC,KAAK,eAAeC,QAAQ,GAAGC,SAASC,cAAc,EAAC,IAAKN;AAC5F,MAAI,EAAEO,GAAE,IAAKP;AACb,QAAMQ,OAAOC,IAAIR,KAAAA;AACjB,QAAMS,QAAQC,KAAKC,MAAMV,OAAOE,KAAAA;AAChC,QAAMS,YAAYL,KAAKM,MAAM,GAAG,CAAA;AAEhC,QAAMC,UAAUhB,OAAOgB;AAEvB,MAAI,CAACA,SAAS;AACZ;EACF;AAEA,MAAIV,WAAWA,QAAQW,SAAS,GAAG;AACjC,UAAMC,QAAQN,KAAKC,MAAMpB,MAAM0B,OAAOC,SAASX,KAAKM,MAAM,EAAC,GAAI,EAAA,GAAK,GAAG,MAAM,GAAGT,QAAQW,MAAM,CAAA;AAC9FT,SAAKF,QAAQY,KAAAA;EACf;AAEAF,UAAQK,QAAQV,QAAQN,QAAQE;AAChCS,UAAQM,SAASX,QAAQN,QAAQE;AACjC,QAAMgB,MAAM;OAAId;IAAMe,IAAI,CAACC,OAAAA;AACzB,UAAMC,WAAWP,OAAOC,SAASK,IAAI,EAAA;AACrC,WAAOC,WAAW,IAAI,IAAI;EAC5B,CAAA;AAEA,QAAMF,MAAM,CAAA;AAEZA,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,CAAA;AAC/BS,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,EAAA;AAC/BS,MAAI,CAAA,IAAKD,IAAIR,MAAM,IAAI,EAAA;AAEvB,QAAMY,MAAMX,QAAQY,WAAW,IAAA;AAC/B,MAAID,KAAK;AACPA,QAAIE,wBAAwB;AAC5BF,QAAIG,UAAU,GAAG,GAAGd,QAAQK,OAAOL,QAAQM,MAAM;AAEjD,eAAW,CAACS,GAAGC,GAAAA,KAAQR,IAAIS,QAAO,GAAI;AACpC,iBAAW,CAACC,GAAGT,EAAAA,KAAOO,IAAIC,QAAO,GAAI;AACnC,YAAIR,IAAI;AACNE,cAAIQ,YAAY3B,MAAM,MAAMM;AAC5Ba,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F,OAAO;AACLoB,cAAIQ,YAAY/B;AAChBuB,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F;MACF;IACF;EACF;AACF,GAhDqB;AAkDd,IAAM8B,YAAsC,wBAAC,EAClDlC,OAAO,KACPmC,YAAY,aACZlC,IACAC,OACAG,IACAD,aACAD,SACAJ,OACA,GAAGD,MAAAA,MACJ;AACC,QAAMD,SAASuC,OAA0B,IAAA;AAEzCC,YAAU,MAAA;AACRzC,iBAAaC,QAAQ;MAAEI;MAAIkC;MAAWjC;MAAOG;MAAID;MAAaD;MAASH;MAAMD;IAAM,CAAA;EACrF,CAAA;AAEA,SACE,sBAAA,cAACuC,SAAYxC,OACVC,QACG,sBAAA,cAACF,UAAAA;IAAOsC;IAAsBI,KAAK1C;IAAQ2C,OAAO;MAAErB,QAAQnB;MAAMkB,OAAOlB;IAAK;OAC9E,IAAA;AAGV,GAxBmD;","names":["FlexRow","md5","React","useEffect","useRef","range","n","in_min","in_max","out_min","out_max","updateCanvas","canvas","props","value","size","bg","count","palette","iconPadding","fg","hash","md5","block","Math","floor","hashColor","slice","current","length","index","Number","parseInt","width","height","arr","map","el","parsedEl","ctx","getContext","imageSmoothingEnabled","clearRect","i","row","entries","j","fillStyle","fillRect","Identicon","className","useRef","useEffect","FlexRow","ref","style"]}
|
package/package.json
CHANGED
|
@@ -13,17 +13,17 @@
|
|
|
13
13
|
"packages/*"
|
|
14
14
|
],
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xylabs/react-flexbox": "^3.4.
|
|
16
|
+
"@xylabs/react-flexbox": "^3.4.2",
|
|
17
17
|
"md5": "^2.3.0"
|
|
18
18
|
},
|
|
19
19
|
"description": "Common React library for all XY Labs projects that use React",
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@types/md5": "^2.3.5",
|
|
22
22
|
"@types/react": "^18.3.3",
|
|
23
|
-
"@xylabs/ts-scripts-yarn3": "^3.
|
|
24
|
-
"@xylabs/tsconfig-react": "^3.
|
|
23
|
+
"@xylabs/ts-scripts-yarn3": "^3.15.16",
|
|
24
|
+
"@xylabs/tsconfig-react": "^3.15.16",
|
|
25
25
|
"react": "^18.3.1",
|
|
26
|
-
"typescript": "^5.5.
|
|
26
|
+
"typescript": "^5.5.4"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@mui/material": "^5",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"node": {
|
|
35
35
|
"import": {
|
|
36
36
|
"types": "./dist/node/index.d.mts",
|
|
37
|
-
"default": "./dist/node/index.
|
|
37
|
+
"default": "./dist/node/index.mjs"
|
|
38
38
|
},
|
|
39
39
|
"require": {
|
|
40
40
|
"types": "./dist/node/index.d.cts",
|
|
@@ -44,20 +44,20 @@
|
|
|
44
44
|
"browser": {
|
|
45
45
|
"import": {
|
|
46
46
|
"types": "./dist/browser/index.d.mts",
|
|
47
|
-
"default": "./dist/browser/index.
|
|
47
|
+
"default": "./dist/browser/index.mjs"
|
|
48
48
|
},
|
|
49
49
|
"require": {
|
|
50
50
|
"types": "./dist/browser/index.d.cts",
|
|
51
51
|
"default": "./dist/browser/index.cjs"
|
|
52
52
|
}
|
|
53
53
|
},
|
|
54
|
-
"default": "./dist/browser/index.
|
|
54
|
+
"default": "./dist/browser/index.mjs"
|
|
55
55
|
},
|
|
56
56
|
"./package.json": "./package.json"
|
|
57
57
|
},
|
|
58
58
|
"types": "dist/browser/index.d.ts",
|
|
59
59
|
"main": "./dist/browser/index.cjs",
|
|
60
|
-
"module": "./dist/browser/index.
|
|
60
|
+
"module": "./dist/browser/index.mjs",
|
|
61
61
|
"homepage": "https://xylabs.com",
|
|
62
62
|
"keywords": [
|
|
63
63
|
"utility",
|
|
@@ -73,6 +73,6 @@
|
|
|
73
73
|
"url": "https://github.com/xylabs/sdk-react.git"
|
|
74
74
|
},
|
|
75
75
|
"sideEffects": false,
|
|
76
|
-
"version": "3.4.
|
|
76
|
+
"version": "3.4.2",
|
|
77
77
|
"type": "module"
|
|
78
78
|
}
|
|
@@ -86,9 +86,9 @@ export const Identicon: React.FC<IdenticonProps> = ({
|
|
|
86
86
|
|
|
87
87
|
return (
|
|
88
88
|
<FlexRow {...props}>
|
|
89
|
-
{value
|
|
90
|
-
<canvas className={className} ref={canvas} style={{ height: size, width: size }} />
|
|
91
|
-
|
|
89
|
+
{value
|
|
90
|
+
? <canvas className={className} ref={canvas} style={{ height: size, width: size }} />
|
|
91
|
+
: null}
|
|
92
92
|
</FlexRow>
|
|
93
93
|
)
|
|
94
94
|
}
|
package/src/components/index.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './Identicon.
|
|
1
|
+
export * from './Identicon.tsx'
|
package/src/index.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './components/index.
|
|
1
|
+
export * from './components/index.ts'
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashColor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length > 0) {\n const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = [...hash].map((el) => {\n const parsedEl = Number.parseInt(el, 16)\n return parsedEl < 8 ? 0 : 1\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n for (const [i, row] of map.entries()) {\n for (const [j, el] of row.entries()) {\n if (el) {\n ctx.fillStyle = fg ?? '#' + hashColor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n }\n }\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return (\n <FlexRow {...props}>\n {value ?\n <canvas className={className} ref={canvas} style={{ height: size, width: size }} />\n : null}\n </FlexRow>\n )\n}\n"],"mappings":";AAAA,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAuFjC;AArFR,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,MAAI,EAAE,GAAG,IAAI;AACb,QAAM,OAAO,IAAI,KAAK;AACtB,QAAM,QAAQ,KAAK,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,KAAK,MAAM,GAAG,CAAC;AAEjC,QAAM,UAAU,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,SAAS,GAAG;AACjC,UAAM,QAAQ,KAAK,MAAM,MAAM,OAAO,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AAC/F,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,OAAO;AAChC,UAAM,WAAW,OAAO,SAAS,IAAI,EAAE;AACvC,WAAO,WAAW,IAAI,IAAI;AAAA,EAC5B,CAAC;AAED,QAAM,MAAM,CAAC;AAEb,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC;AAChC,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE;AACjC,MAAI,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE;AAEzB,QAAM,MAAM,QAAQ,WAAW,IAAI;AACnC,MAAI,KAAK;AACP,QAAI,wBAAwB;AAC5B,QAAI,UAAU,GAAG,GAAG,QAAQ,OAAO,QAAQ,MAAM;AAEjD,eAAW,CAAC,GAAG,GAAG,KAAK,IAAI,QAAQ,GAAG;AACpC,iBAAW,CAAC,GAAG,EAAE,KAAK,IAAI,QAAQ,GAAG;AACnC,YAAI,IAAI;AACN,cAAI,YAAY,MAAM,MAAM;AAC5B,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG,OAAO;AACL,cAAI,YAAY;AAChB,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,OAA0B,IAAI;AAE7C,YAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SACE,oBAAC,WAAS,GAAG,OACV,kBACC,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IACjF,MACJ;AAEJ;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashColor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length > 0) {\n const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = [...hash].map((el) => {\n const parsedEl = Number.parseInt(el, 16)\n return parsedEl < 8 ? 0 : 1\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n for (const [i, row] of map.entries()) {\n for (const [j, el] of row.entries()) {\n if (el) {\n ctx.fillStyle = fg ?? '#' + hashColor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n }\n }\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return (\n <FlexRow {...props}>\n {value ?\n <canvas className={className} ref={canvas} style={{ height: size, width: size }} />\n : null}\n </FlexRow>\n )\n}\n"],"mappings":";AAAA,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAuFjC;AArFR,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,MAAI,EAAE,GAAG,IAAI;AACb,QAAM,OAAO,IAAI,KAAK;AACtB,QAAM,QAAQ,KAAK,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,KAAK,MAAM,GAAG,CAAC;AAEjC,QAAM,UAAU,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,SAAS,GAAG;AACjC,UAAM,QAAQ,KAAK,MAAM,MAAM,OAAO,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AAC/F,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,OAAO;AAChC,UAAM,WAAW,OAAO,SAAS,IAAI,EAAE;AACvC,WAAO,WAAW,IAAI,IAAI;AAAA,EAC5B,CAAC;AAED,QAAM,MAAM,CAAC;AAEb,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC;AAChC,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE;AACjC,MAAI,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE;AAEzB,QAAM,MAAM,QAAQ,WAAW,IAAI;AACnC,MAAI,KAAK;AACP,QAAI,wBAAwB;AAC5B,QAAI,UAAU,GAAG,GAAG,QAAQ,OAAO,QAAQ,MAAM;AAEjD,eAAW,CAAC,GAAG,GAAG,KAAK,IAAI,QAAQ,GAAG;AACpC,iBAAW,CAAC,GAAG,EAAE,KAAK,IAAI,QAAQ,GAAG;AACnC,YAAI,IAAI;AACN,cAAI,YAAY,MAAM,MAAM;AAC5B,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG,OAAO;AACL,cAAI,YAAY;AAChB,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,OAA0B,IAAI;AAE7C,YAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SACE,oBAAC,WAAS,GAAG,OACV,kBACC,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IACjF,MACJ;AAEJ;","names":[]}
|
package/dist/node/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashColor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length > 0) {\n const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = [...hash].map((el) => {\n const parsedEl = Number.parseInt(el, 16)\n return parsedEl < 8 ? 0 : 1\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n for (const [i, row] of map.entries()) {\n for (const [j, el] of row.entries()) {\n if (el) {\n ctx.fillStyle = fg ?? '#' + hashColor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n }\n }\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return (\n <FlexRow {...props}>\n {value ?\n <canvas className={className} ref={canvas} style={{ height: size, width: size }} />\n : null}\n </FlexRow>\n )\n}\n"],"mappings":";AAAA,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAuFjC;AArFR,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,MAAI,EAAE,GAAG,IAAI;AACb,QAAM,OAAO,IAAI,KAAK;AACtB,QAAM,QAAQ,KAAK,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,KAAK,MAAM,GAAG,CAAC;AAEjC,QAAM,UAAU,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,SAAS,GAAG;AACjC,UAAM,QAAQ,KAAK,MAAM,MAAM,OAAO,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AAC/F,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,OAAO;AAChC,UAAM,WAAW,OAAO,SAAS,IAAI,EAAE;AACvC,WAAO,WAAW,IAAI,IAAI;AAAA,EAC5B,CAAC;AAED,QAAM,MAAM,CAAC;AAEb,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC;AAChC,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE;AACjC,MAAI,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE;AAEzB,QAAM,MAAM,QAAQ,WAAW,IAAI;AACnC,MAAI,KAAK;AACP,QAAI,wBAAwB;AAC5B,QAAI,UAAU,GAAG,GAAG,QAAQ,OAAO,QAAQ,MAAM;AAEjD,eAAW,CAAC,GAAG,GAAG,KAAK,IAAI,QAAQ,GAAG;AACpC,iBAAW,CAAC,GAAG,EAAE,KAAK,IAAI,QAAQ,GAAG;AACnC,YAAI,IAAI;AACN,cAAI,YAAY,MAAM,MAAM;AAC5B,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG,OAAO;AACL,cAAI,YAAY;AAChB,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,OAA0B,IAAI;AAE7C,YAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SACE,oBAAC,WAAS,GAAG,OACV,kBACC,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IACjF,MACJ;AAEJ;","names":[]}
|