@xylabs/react-identicon 3.0.4 → 3.0.5

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.
Files changed (36) hide show
  1. package/dist/browser/components/Identicon.cjs +7 -5
  2. package/dist/browser/components/Identicon.cjs.map +1 -1
  3. package/dist/browser/components/Identicon.d.cts +14 -0
  4. package/dist/browser/components/Identicon.d.cts.map +1 -0
  5. package/dist/browser/components/index.cjs +90 -2
  6. package/dist/browser/components/index.cjs.map +1 -1
  7. package/dist/browser/components/index.d.cts +2 -0
  8. package/dist/browser/components/index.d.cts.map +1 -0
  9. package/dist/browser/index.cjs +90 -2
  10. package/dist/browser/index.cjs.map +1 -1
  11. package/dist/browser/index.d.cts +2 -0
  12. package/dist/browser/index.d.cts.map +1 -0
  13. package/dist/node/components/Identicon.cjs +109 -0
  14. package/dist/node/components/{Identicon.mjs.map → Identicon.cjs.map} +1 -1
  15. package/dist/node/components/Identicon.d.cts +14 -0
  16. package/dist/node/components/Identicon.d.cts.map +1 -0
  17. package/dist/node/components/Identicon.js +10 -45
  18. package/dist/node/components/Identicon.js.map +1 -1
  19. package/dist/node/components/index.cjs +111 -0
  20. package/dist/node/components/index.cjs.map +1 -0
  21. package/dist/node/components/index.d.cts +2 -0
  22. package/dist/node/components/index.d.cts.map +1 -0
  23. package/dist/node/components/index.js +10 -47
  24. package/dist/node/components/index.js.map +1 -1
  25. package/dist/node/index.cjs +111 -0
  26. package/dist/node/index.cjs.map +1 -0
  27. package/dist/node/index.d.cts +2 -0
  28. package/dist/node/index.d.cts.map +1 -0
  29. package/dist/node/index.js +10 -47
  30. package/dist/node/index.js.map +1 -1
  31. package/package.json +11 -10
  32. package/dist/node/components/Identicon.mjs +0 -74
  33. package/dist/node/components/index.mjs +0 -74
  34. package/dist/node/components/index.mjs.map +0 -1
  35. package/dist/node/index.mjs +0 -74
  36. package/dist/node/index.mjs.map +0 -1
@@ -1,74 +0,0 @@
1
- // src/components/Identicon.tsx
2
- import { FlexRow } from "@xylabs/react-flexbox";
3
- import md5 from "md5";
4
- import { useEffect, useRef } from "react";
5
- import { jsx } from "react/jsx-runtime";
6
- var range = (n, in_min, in_max, out_min, out_max) => {
7
- return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
8
- };
9
- var updateCanvas = (canvas, props) => {
10
- const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
11
- let { fg } = props;
12
- const hash = md5(value);
13
- const block = Math.floor(size / count);
14
- const hashcolor = hash.slice(0, 6);
15
- const current = canvas.current;
16
- if (!current) {
17
- return;
18
- }
19
- if (palette && palette.length) {
20
- const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
21
- fg = palette[index];
22
- }
23
- current.width = block * count + iconPadding;
24
- current.height = block * count + iconPadding;
25
- const arr = hash.split("").map((el) => {
26
- const parsedEl = parseInt(el, 16);
27
- if (parsedEl < 8) {
28
- return 0;
29
- } else {
30
- return 1;
31
- }
32
- });
33
- const map = [];
34
- map[0] = map[4] = arr.slice(0, 5);
35
- map[1] = map[3] = arr.slice(5, 10);
36
- map[2] = arr.slice(10, 15);
37
- const ctx = current.getContext("2d");
38
- if (ctx) {
39
- ctx.imageSmoothingEnabled = false;
40
- ctx.clearRect(0, 0, current.width, current.height);
41
- map.forEach((row, i) => {
42
- row.forEach((el, j) => {
43
- if (el) {
44
- ctx.fillStyle = fg ? fg : "#" + hashcolor;
45
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
46
- } else {
47
- ctx.fillStyle = bg;
48
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
49
- }
50
- });
51
- });
52
- }
53
- };
54
- var Identicon = ({
55
- size = 400,
56
- className = "identicon",
57
- bg,
58
- count,
59
- fg,
60
- iconPadding,
61
- palette,
62
- value,
63
- ...props
64
- }) => {
65
- const canvas = useRef(null);
66
- useEffect(() => {
67
- updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
68
- });
69
- return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
70
- };
71
- export {
72
- Identicon
73
- };
74
- //# sourceMappingURL=index.mjs.map
@@ -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) {\n const index = Math.floor(range(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.split('').map((el) => {\n const parsedEl = parseInt(el, 16)\n if (parsedEl < 8) {\n return 0\n } else {\n return 1\n }\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 map.forEach((row, i) => {\n row.forEach((el, j) => {\n if (el) {\n ctx.fillStyle = fg ? 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 <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";AAAA,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAwFH;AAtFtC,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,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,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,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,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,CAAC;AAAA,IACH,CAAC;AAAA,EACH;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,SAAO,oBAAC,WAAS,GAAG,OAAQ,kBAAQ,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":[]}
@@ -1,74 +0,0 @@
1
- // src/components/Identicon.tsx
2
- import { FlexRow } from "@xylabs/react-flexbox";
3
- import md5 from "md5";
4
- import { useEffect, useRef } from "react";
5
- import { jsx } from "react/jsx-runtime";
6
- var range = (n, in_min, in_max, out_min, out_max) => {
7
- return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
8
- };
9
- var updateCanvas = (canvas, props) => {
10
- const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
11
- let { fg } = props;
12
- const hash = md5(value);
13
- const block = Math.floor(size / count);
14
- const hashcolor = hash.slice(0, 6);
15
- const current = canvas.current;
16
- if (!current) {
17
- return;
18
- }
19
- if (palette && palette.length) {
20
- const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
21
- fg = palette[index];
22
- }
23
- current.width = block * count + iconPadding;
24
- current.height = block * count + iconPadding;
25
- const arr = hash.split("").map((el) => {
26
- const parsedEl = parseInt(el, 16);
27
- if (parsedEl < 8) {
28
- return 0;
29
- } else {
30
- return 1;
31
- }
32
- });
33
- const map = [];
34
- map[0] = map[4] = arr.slice(0, 5);
35
- map[1] = map[3] = arr.slice(5, 10);
36
- map[2] = arr.slice(10, 15);
37
- const ctx = current.getContext("2d");
38
- if (ctx) {
39
- ctx.imageSmoothingEnabled = false;
40
- ctx.clearRect(0, 0, current.width, current.height);
41
- map.forEach((row, i) => {
42
- row.forEach((el, j) => {
43
- if (el) {
44
- ctx.fillStyle = fg ? fg : "#" + hashcolor;
45
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
46
- } else {
47
- ctx.fillStyle = bg;
48
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
49
- }
50
- });
51
- });
52
- }
53
- };
54
- var Identicon = ({
55
- size = 400,
56
- className = "identicon",
57
- bg,
58
- count,
59
- fg,
60
- iconPadding,
61
- palette,
62
- value,
63
- ...props
64
- }) => {
65
- const canvas = useRef(null);
66
- useEffect(() => {
67
- updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
68
- });
69
- return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
70
- };
71
- export {
72
- Identicon
73
- };
74
- //# sourceMappingURL=index.mjs.map
@@ -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) {\n const index = Math.floor(range(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.split('').map((el) => {\n const parsedEl = parseInt(el, 16)\n if (parsedEl < 8) {\n return 0\n } else {\n return 1\n }\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 map.forEach((row, i) => {\n row.forEach((el, j) => {\n if (el) {\n ctx.fillStyle = fg ? 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 <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";AAAA,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAwFH;AAtFtC,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,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,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,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,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,CAAC;AAAA,IACH,CAAC;AAAA,EACH;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,SAAO,oBAAC,WAAS,GAAG,OAAQ,kBAAQ,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":[]}