@xylabs/react-identicon 3.1.0-rc.6 → 3.1.0
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/README.md +20 -49
- package/dist/browser/components/Identicon.d.cts +14 -0
- package/dist/browser/components/Identicon.d.cts.map +1 -0
- package/dist/browser/components/Identicon.d.mts.map +1 -1
- package/dist/browser/components/Identicon.d.ts.map +1 -1
- package/dist/browser/components/index.d.cts +2 -0
- package/dist/browser/components/index.d.cts.map +1 -0
- package/dist/browser/index.cjs +103 -0
- package/dist/browser/index.cjs.map +1 -0
- package/dist/browser/index.d.cts +2 -0
- package/dist/browser/index.d.cts.map +1 -0
- package/dist/browser/index.js +69 -1
- package/dist/browser/index.js.map +1 -1
- package/dist/node/components/Identicon.d.cts +14 -0
- package/dist/node/components/Identicon.d.cts.map +1 -0
- package/dist/node/components/Identicon.d.mts.map +1 -1
- package/dist/node/components/Identicon.d.ts.map +1 -1
- package/dist/node/components/index.d.cts +2 -0
- package/dist/node/components/index.d.cts.map +1 -0
- package/dist/node/{components/Identicon.js → index.cjs} +24 -24
- package/dist/node/index.cjs.map +1 -0
- package/dist/node/index.d.cts +2 -0
- package/dist/node/index.d.cts.map +1 -0
- package/dist/node/index.js +67 -20
- package/dist/node/index.js.map +1 -1
- package/package.json +20 -17
- package/src/components/Identicon.tsx +18 -16
- package/dist/browser/components/Identicon.js +0 -73
- package/dist/browser/components/Identicon.js.map +0 -1
- package/dist/browser/components/index.js +0 -2
- package/dist/browser/components/index.js.map +0 -1
- package/dist/node/components/Identicon.js.map +0 -1
- package/dist/node/components/Identicon.mjs +0 -73
- package/dist/node/components/Identicon.mjs.map +0 -1
- package/dist/node/components/index.js +0 -23
- package/dist/node/components/index.js.map +0 -1
- package/dist/node/components/index.mjs +0 -2
- package/dist/node/components/index.mjs.map +0 -1
- package/dist/node/index.mjs +0 -2
- package/dist/node/index.mjs.map +0 -1
package/README.md
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
[![logo][]](https://xylabs.com)
|
|
2
2
|
|
|
3
|
-
# @xylabs/
|
|
3
|
+
# @xylabs/react-identicon
|
|
4
4
|
|
|
5
|
-
[![main-build][]][main-build-link]
|
|
6
|
-
[![beta-build][]][beta-build-link]
|
|
7
5
|
[![npm-badge][]][npm-link]
|
|
8
|
-
[![
|
|
9
|
-
[![
|
|
10
|
-
[![
|
|
11
|
-
[![snyk-badge][]][snyk-link]
|
|
6
|
+
[![npm-downloads-badge][]][npm-link]
|
|
7
|
+
[![jsdelivr-badge][]][jsdelivr-link]
|
|
8
|
+
[![npm-license-badge][]](LICENSE)
|
|
12
9
|
|
|
13
10
|
> XY Labs generalized React library
|
|
14
11
|
|
|
@@ -16,53 +13,39 @@
|
|
|
16
13
|
|
|
17
14
|
- [Description](#description)
|
|
18
15
|
- [Install](#install)
|
|
19
|
-
- [Scripts](#scripts)
|
|
20
16
|
- [Maintainers](#maintainers)
|
|
21
17
|
- [License](#license)
|
|
22
18
|
- [Credits](#credits)
|
|
23
19
|
|
|
24
20
|
## Description
|
|
25
21
|
|
|
26
|
-
Common React code that is used
|
|
22
|
+
Common React code that is used throughout XYO projects that use React.
|
|
27
23
|
|
|
28
24
|
## Install
|
|
29
25
|
|
|
30
26
|
Using npm:
|
|
31
27
|
|
|
32
28
|
```sh
|
|
33
|
-
npm i --save @xylabs/
|
|
29
|
+
npm i --save @xylabs/react-identicon
|
|
34
30
|
```
|
|
35
31
|
|
|
36
32
|
Using yarn:
|
|
37
33
|
|
|
38
34
|
```sh
|
|
39
|
-
yarn add @xylabs/
|
|
35
|
+
yarn add @xylabs/react-identicon
|
|
40
36
|
```
|
|
41
37
|
|
|
42
|
-
##
|
|
38
|
+
## Documentation
|
|
39
|
+
[Developer Reference](https://xylabs.github.io/sdk-react)
|
|
43
40
|
|
|
44
|
-
|
|
45
|
-
list of shared scripts. The below scripts are custom scripts for this repo.
|
|
46
|
-
|
|
47
|
-
### Build (Storybook)
|
|
48
|
-
|
|
49
|
-
Build the static Storybook site
|
|
50
|
-
|
|
51
|
-
```sh
|
|
52
|
-
yarn build-storybook
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
### Start
|
|
56
|
-
|
|
57
|
-
Starts the project in the browser for testing, with auto reload using Storybook
|
|
58
|
-
|
|
59
|
-
```sh
|
|
60
|
-
yarn start
|
|
61
|
-
```
|
|
41
|
+
[Storybook](https://xylabs.github.io/sdk-react/storybook)
|
|
62
42
|
|
|
63
43
|
## Maintainers
|
|
64
44
|
|
|
65
|
-
- [Arie Trouw](https://github.com/arietrouw) [arietrouw.com](https://arietrouw.com)
|
|
45
|
+
- [Arie Trouw](https://github.com/arietrouw) ([arietrouw.com](https://arietrouw.com))
|
|
46
|
+
- [Matt Jones](https://github.com/jonesmac)
|
|
47
|
+
- [Joel Carter](https://github.com/JoelBCarter)
|
|
48
|
+
- [Jordan Trouw](https://github.com/jordantrouw)
|
|
66
49
|
|
|
67
50
|
## License
|
|
68
51
|
|
|
@@ -74,23 +57,11 @@ See the [LICENSE](LICENSE) file for license details
|
|
|
74
57
|
|
|
75
58
|
[logo]: https://cdn.xy.company/img/brand/XYPersistentCompany_Logo_Icon_Colored.svg
|
|
76
59
|
|
|
77
|
-
[
|
|
78
|
-
[
|
|
79
|
-
|
|
80
|
-
[beta-build]: https://github.com/xylabs/sdk-react/actions/workflows/build-beta.yml/badge.svg
|
|
81
|
-
[beta-build-link]: https://github.com/xylabs/sdk-react/actions/workflows/build-beta.yml
|
|
82
|
-
|
|
83
|
-
[npm-badge]: https://img.shields.io/npm/v/@xylabs/sdk-react.svg
|
|
84
|
-
[npm-link]: https://www.npmjs.com/package/@xylabs/sdk-react
|
|
85
|
-
|
|
86
|
-
[bch-badge]: https://bettercodehub.com/edge/badge/xylabs/sdk-react?branch=main
|
|
87
|
-
[bch-link]: https://bettercodehub.com/results/xylabs/sdk-react
|
|
88
|
-
|
|
89
|
-
[codacy-badge]: https://app.codacy.com/project/badge/Grade/c2a69d4530ed4b7da6ddb070169dd339
|
|
90
|
-
[codacy-link]: https://www.codacy.com/gh/xylabs/sdk-react/dashboard?utm_source=github.com&utm_medium=referral&utm_content=xylabs/sdk-react&utm_campaign=Badge_Grade
|
|
60
|
+
[npm-badge]: https://img.shields.io/npm/v/@xylabs/react-identicon.svg
|
|
61
|
+
[npm-link]: https://www.npmjs.com/package/@xylabs/react-identicon
|
|
91
62
|
|
|
92
|
-
[
|
|
93
|
-
[
|
|
63
|
+
[npm-downloads-badge]: https://img.shields.io/npm/dw/@xylabs/react-identicon
|
|
64
|
+
[npm-license-badge]: https://img.shields.io/npm/l/@xylabs/react-identicon
|
|
94
65
|
|
|
95
|
-
[
|
|
96
|
-
[
|
|
66
|
+
[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@xylabs/react-identicon/badge
|
|
67
|
+
[jsdelivr-link]: https://www.jsdelivr.com/package/npm/@xylabs/react-identicon
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FlexBoxProps } from '@xylabs/react-flexbox';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface IdenticonProps extends FlexBoxProps {
|
|
4
|
+
bg?: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
count?: number;
|
|
7
|
+
fg?: string;
|
|
8
|
+
iconPadding?: number;
|
|
9
|
+
palette?: string[];
|
|
10
|
+
size?: number;
|
|
11
|
+
value?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const Identicon: React.FC<IdenticonProps>;
|
|
14
|
+
//# sourceMappingURL=Identicon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Identicon.d.ts","sourceRoot":"","sources":["../../../src/components/Identicon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAoDD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwB9C,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Identicon.d.ts","sourceRoot":"","sources":["../../../src/components/Identicon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;
|
|
1
|
+
{"version":3,"file":"Identicon.d.ts","sourceRoot":"","sources":["../../../src/components/Identicon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAoDD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwB9C,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Identicon.d.ts","sourceRoot":"","sources":["../../../src/components/Identicon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;
|
|
1
|
+
{"version":3,"file":"Identicon.d.ts","sourceRoot":"","sources":["../../../src/components/Identicon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAoDD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwB9C,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/index.ts
|
|
31
|
+
var src_exports = {};
|
|
32
|
+
__export(src_exports, {
|
|
33
|
+
Identicon: () => Identicon
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(src_exports);
|
|
36
|
+
|
|
37
|
+
// src/components/Identicon.tsx
|
|
38
|
+
var import_react_flexbox = require("@xylabs/react-flexbox");
|
|
39
|
+
var import_md5 = __toESM(require("md5"), 1);
|
|
40
|
+
var import_react = require("react");
|
|
41
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
|
+
var range = (n, in_min, in_max, out_min, out_max) => {
|
|
43
|
+
return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
|
44
|
+
};
|
|
45
|
+
var updateCanvas = (canvas, props) => {
|
|
46
|
+
const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
|
|
47
|
+
let { fg } = props;
|
|
48
|
+
const hash = (0, import_md5.default)(value);
|
|
49
|
+
const block = Math.floor(size / count);
|
|
50
|
+
const hashColor = hash.slice(0, 6);
|
|
51
|
+
const current = canvas.current;
|
|
52
|
+
if (!current) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
if (palette && palette.length > 0) {
|
|
56
|
+
const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
|
|
57
|
+
fg = palette[index];
|
|
58
|
+
}
|
|
59
|
+
current.width = block * count + iconPadding;
|
|
60
|
+
current.height = block * count + iconPadding;
|
|
61
|
+
const arr = [...hash].map((el) => {
|
|
62
|
+
const parsedEl = Number.parseInt(el, 16);
|
|
63
|
+
return parsedEl < 8 ? 0 : 1;
|
|
64
|
+
});
|
|
65
|
+
const map = [];
|
|
66
|
+
map[0] = map[4] = arr.slice(0, 5);
|
|
67
|
+
map[1] = map[3] = arr.slice(5, 10);
|
|
68
|
+
map[2] = arr.slice(10, 15);
|
|
69
|
+
const ctx = current.getContext("2d");
|
|
70
|
+
if (ctx) {
|
|
71
|
+
ctx.imageSmoothingEnabled = false;
|
|
72
|
+
ctx.clearRect(0, 0, current.width, current.height);
|
|
73
|
+
for (const [i, row] of map.entries()) {
|
|
74
|
+
for (const [j, el] of row.entries()) {
|
|
75
|
+
if (el) {
|
|
76
|
+
ctx.fillStyle = fg ?? "#" + hashColor;
|
|
77
|
+
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
78
|
+
} else {
|
|
79
|
+
ctx.fillStyle = bg;
|
|
80
|
+
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
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
|
+
}) => {
|
|
97
|
+
const canvas = (0, import_react.useRef)(null);
|
|
98
|
+
(0, import_react.useEffect)(() => {
|
|
99
|
+
updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
|
|
100
|
+
});
|
|
101
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { ...props, children: value ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
|
|
102
|
+
};
|
|
103
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts","../../src/components/Identicon.tsx"],"sourcesContent":["export * from './components'\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;AAAA;AAAA;AAAA;AAAA;;;ACAA,2BAAsC;AACtC,iBAAgB;AAChB,mBAAyC;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,WAAO,WAAAA,SAAI,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,aAAS,qBAA0B,IAAI;AAE7C,8BAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SACE,4CAAC,gCAAS,GAAG,OACV,kBACC,4CAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IACjF,MACJ;AAEJ;","names":["md5"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
|
package/dist/browser/index.js
CHANGED
|
@@ -1,2 +1,70 @@
|
|
|
1
|
-
|
|
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 > 0) {
|
|
20
|
+
const index = Math.floor(range(Number.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].map((el) => {
|
|
26
|
+
const parsedEl = Number.parseInt(el, 16);
|
|
27
|
+
return parsedEl < 8 ? 0 : 1;
|
|
28
|
+
});
|
|
29
|
+
const map = [];
|
|
30
|
+
map[0] = map[4] = arr.slice(0, 5);
|
|
31
|
+
map[1] = map[3] = arr.slice(5, 10);
|
|
32
|
+
map[2] = arr.slice(10, 15);
|
|
33
|
+
const ctx = current.getContext("2d");
|
|
34
|
+
if (ctx) {
|
|
35
|
+
ctx.imageSmoothingEnabled = false;
|
|
36
|
+
ctx.clearRect(0, 0, current.width, current.height);
|
|
37
|
+
for (const [i, row] of map.entries()) {
|
|
38
|
+
for (const [j, el] of row.entries()) {
|
|
39
|
+
if (el) {
|
|
40
|
+
ctx.fillStyle = fg ?? "#" + hashColor;
|
|
41
|
+
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
42
|
+
} else {
|
|
43
|
+
ctx.fillStyle = bg;
|
|
44
|
+
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
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
|
+
}) => {
|
|
61
|
+
const canvas = useRef(null);
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
|
|
64
|
+
});
|
|
65
|
+
return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
|
|
66
|
+
};
|
|
67
|
+
export {
|
|
68
|
+
Identicon
|
|
69
|
+
};
|
|
2
70
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/
|
|
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":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FlexBoxProps } from '@xylabs/react-flexbox';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface IdenticonProps extends FlexBoxProps {
|
|
4
|
+
bg?: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
count?: number;
|
|
7
|
+
fg?: string;
|
|
8
|
+
iconPadding?: number;
|
|
9
|
+
palette?: string[];
|
|
10
|
+
size?: number;
|
|
11
|
+
value?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const Identicon: React.FC<IdenticonProps>;
|
|
14
|
+
//# sourceMappingURL=Identicon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Identicon.d.ts","sourceRoot":"","sources":["../../../src/components/Identicon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAoDD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwB9C,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Identicon.d.ts","sourceRoot":"","sources":["../../../src/components/Identicon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;
|
|
1
|
+
{"version":3,"file":"Identicon.d.ts","sourceRoot":"","sources":["../../../src/components/Identicon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAoDD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwB9C,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Identicon.d.ts","sourceRoot":"","sources":["../../../src/components/Identicon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;
|
|
1
|
+
{"version":3,"file":"Identicon.d.ts","sourceRoot":"","sources":["../../../src/components/Identicon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAoDD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwB9C,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}
|
|
@@ -26,41 +26,41 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
26
|
mod
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
|
|
30
|
+
// src/index.ts
|
|
31
|
+
var src_exports = {};
|
|
32
|
+
__export(src_exports, {
|
|
31
33
|
Identicon: () => Identicon
|
|
32
34
|
});
|
|
33
|
-
module.exports = __toCommonJS(
|
|
34
|
-
|
|
35
|
+
module.exports = __toCommonJS(src_exports);
|
|
36
|
+
|
|
37
|
+
// src/components/Identicon.tsx
|
|
35
38
|
var import_react_flexbox = require("@xylabs/react-flexbox");
|
|
36
|
-
var import_md5 = __toESM(require("md5"));
|
|
39
|
+
var import_md5 = __toESM(require("md5"), 1);
|
|
37
40
|
var import_react = require("react");
|
|
38
|
-
|
|
41
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
|
+
var range = (n, in_min, in_max, out_min, out_max) => {
|
|
39
43
|
return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
|
40
44
|
};
|
|
41
|
-
|
|
45
|
+
var updateCanvas = (canvas, props) => {
|
|
42
46
|
const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
|
|
43
47
|
let { fg } = props;
|
|
44
48
|
const hash = (0, import_md5.default)(value);
|
|
45
49
|
const block = Math.floor(size / count);
|
|
46
|
-
const
|
|
50
|
+
const hashColor = hash.slice(0, 6);
|
|
47
51
|
const current = canvas.current;
|
|
48
52
|
if (!current) {
|
|
49
53
|
return;
|
|
50
54
|
}
|
|
51
|
-
if (palette && palette.length) {
|
|
52
|
-
const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
|
|
55
|
+
if (palette && palette.length > 0) {
|
|
56
|
+
const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
|
|
53
57
|
fg = palette[index];
|
|
54
58
|
}
|
|
55
59
|
current.width = block * count + iconPadding;
|
|
56
60
|
current.height = block * count + iconPadding;
|
|
57
|
-
const arr = hash.
|
|
58
|
-
const parsedEl = parseInt(el, 16);
|
|
59
|
-
|
|
60
|
-
return 0;
|
|
61
|
-
} else {
|
|
62
|
-
return 1;
|
|
63
|
-
}
|
|
61
|
+
const arr = [...hash].map((el) => {
|
|
62
|
+
const parsedEl = Number.parseInt(el, 16);
|
|
63
|
+
return parsedEl < 8 ? 0 : 1;
|
|
64
64
|
});
|
|
65
65
|
const map = [];
|
|
66
66
|
map[0] = map[4] = arr.slice(0, 5);
|
|
@@ -70,20 +70,20 @@ const updateCanvas = (canvas, props) => {
|
|
|
70
70
|
if (ctx) {
|
|
71
71
|
ctx.imageSmoothingEnabled = false;
|
|
72
72
|
ctx.clearRect(0, 0, current.width, current.height);
|
|
73
|
-
map.
|
|
74
|
-
row.
|
|
73
|
+
for (const [i, row] of map.entries()) {
|
|
74
|
+
for (const [j, el] of row.entries()) {
|
|
75
75
|
if (el) {
|
|
76
|
-
ctx.fillStyle = fg
|
|
76
|
+
ctx.fillStyle = fg ?? "#" + hashColor;
|
|
77
77
|
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
78
78
|
} else {
|
|
79
79
|
ctx.fillStyle = bg;
|
|
80
80
|
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
81
81
|
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
84
|
}
|
|
85
85
|
};
|
|
86
|
-
|
|
86
|
+
var Identicon = ({
|
|
87
87
|
size = 400,
|
|
88
88
|
className = "identicon",
|
|
89
89
|
bg,
|
|
@@ -104,4 +104,4 @@ const Identicon = ({
|
|
|
104
104
|
0 && (module.exports = {
|
|
105
105
|
Identicon
|
|
106
106
|
});
|
|
107
|
-
//# sourceMappingURL=
|
|
107
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts","../../src/components/Identicon.tsx"],"sourcesContent":["export * from './components'\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;AAAA;AAAA;AAAA;AAAA;;;ACAA,2BAAsC;AACtC,iBAAgB;AAChB,mBAAyC;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,WAAO,WAAAA,SAAI,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,aAAS,qBAA0B,IAAI;AAE7C,8BAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SACE,4CAAC,gCAAS,GAAG,OACV,kBACC,4CAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IACjF,MACJ;AAEJ;","names":["md5"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
|
package/dist/node/index.js
CHANGED
|
@@ -1,23 +1,70 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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 > 0) {
|
|
20
|
+
const index = Math.floor(range(Number.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].map((el) => {
|
|
26
|
+
const parsedEl = Number.parseInt(el, 16);
|
|
27
|
+
return parsedEl < 8 ? 0 : 1;
|
|
28
|
+
});
|
|
29
|
+
const map = [];
|
|
30
|
+
map[0] = map[4] = arr.slice(0, 5);
|
|
31
|
+
map[1] = map[3] = arr.slice(5, 10);
|
|
32
|
+
map[2] = arr.slice(10, 15);
|
|
33
|
+
const ctx = current.getContext("2d");
|
|
34
|
+
if (ctx) {
|
|
35
|
+
ctx.imageSmoothingEnabled = false;
|
|
36
|
+
ctx.clearRect(0, 0, current.width, current.height);
|
|
37
|
+
for (const [i, row] of map.entries()) {
|
|
38
|
+
for (const [j, el] of row.entries()) {
|
|
39
|
+
if (el) {
|
|
40
|
+
ctx.fillStyle = fg ?? "#" + hashColor;
|
|
41
|
+
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
42
|
+
} else {
|
|
43
|
+
ctx.fillStyle = bg;
|
|
44
|
+
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
11
48
|
}
|
|
12
|
-
return to;
|
|
13
49
|
};
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
50
|
+
var Identicon = ({
|
|
51
|
+
size = 400,
|
|
52
|
+
className = "identicon",
|
|
53
|
+
bg,
|
|
54
|
+
count,
|
|
55
|
+
fg,
|
|
56
|
+
iconPadding,
|
|
57
|
+
palette,
|
|
58
|
+
value,
|
|
59
|
+
...props
|
|
60
|
+
}) => {
|
|
61
|
+
const canvas = useRef(null);
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
|
|
64
|
+
});
|
|
65
|
+
return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
|
|
66
|
+
};
|
|
67
|
+
export {
|
|
68
|
+
Identicon
|
|
69
|
+
};
|
|
23
70
|
//# sourceMappingURL=index.js.map
|
package/dist/node/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/
|
|
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/package.json
CHANGED
|
@@ -13,17 +13,17 @@
|
|
|
13
13
|
"packages/*"
|
|
14
14
|
],
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xylabs/react-flexbox": "~3.1.0
|
|
16
|
+
"@xylabs/react-flexbox": "~3.1.0",
|
|
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
|
-
"@types/md5": "^2.3.
|
|
22
|
-
"@xylabs/ts-scripts-yarn3": "^3.
|
|
23
|
-
"@xylabs/tsconfig-react": "^3.
|
|
21
|
+
"@types/md5": "^2.3.5",
|
|
22
|
+
"@xylabs/ts-scripts-yarn3": "^3.4.1",
|
|
23
|
+
"@xylabs/tsconfig-react": "^3.4.1",
|
|
24
24
|
"react": "^18.2.0",
|
|
25
25
|
"react-dom": "^18.2.0",
|
|
26
|
-
"typescript": "^5.
|
|
26
|
+
"typescript": "^5.3.3"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@mui/material": "^5",
|
|
@@ -35,26 +35,29 @@
|
|
|
35
35
|
"node": {
|
|
36
36
|
"import": {
|
|
37
37
|
"types": "./dist/node/index.d.mts",
|
|
38
|
-
"default": "./dist/node/index.
|
|
38
|
+
"default": "./dist/node/index.js"
|
|
39
39
|
},
|
|
40
40
|
"require": {
|
|
41
|
-
"types": "./dist/node/index.d.
|
|
42
|
-
"default": "./dist/node/index.
|
|
41
|
+
"types": "./dist/node/index.d.cts",
|
|
42
|
+
"default": "./dist/node/index.cjs"
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
45
|
"browser": {
|
|
46
|
-
"
|
|
47
|
-
|
|
46
|
+
"import": {
|
|
47
|
+
"types": "./dist/browser/index.d.mts",
|
|
48
|
+
"default": "./dist/browser/index.js"
|
|
49
|
+
},
|
|
50
|
+
"require": {
|
|
51
|
+
"types": "./dist/browser/index.d.cts",
|
|
52
|
+
"default": "./dist/browser/index.cjs"
|
|
53
|
+
}
|
|
48
54
|
},
|
|
49
55
|
"default": "./dist/browser/index.js"
|
|
50
56
|
},
|
|
51
|
-
"./dist/docs.json": {
|
|
52
|
-
"default": "./dist/docs.json"
|
|
53
|
-
},
|
|
54
57
|
"./package.json": "./package.json"
|
|
55
58
|
},
|
|
56
59
|
"types": "dist/browser/index.d.ts",
|
|
57
|
-
"main": "./dist/
|
|
60
|
+
"main": "./dist/browser/index.cjs",
|
|
58
61
|
"module": "./dist/browser/index.js",
|
|
59
62
|
"homepage": "https://xylabs.com",
|
|
60
63
|
"keywords": [
|
|
@@ -62,7 +65,7 @@
|
|
|
62
65
|
"typescript",
|
|
63
66
|
"react"
|
|
64
67
|
],
|
|
65
|
-
"license": "LGPL-3.0",
|
|
68
|
+
"license": "LGPL-3.0-only",
|
|
66
69
|
"publishConfig": {
|
|
67
70
|
"access": "public"
|
|
68
71
|
},
|
|
@@ -71,6 +74,6 @@
|
|
|
71
74
|
"url": "https://github.com/xylabs/sdk-react.git"
|
|
72
75
|
},
|
|
73
76
|
"sideEffects": false,
|
|
74
|
-
"version": "3.1.0
|
|
75
|
-
"
|
|
77
|
+
"version": "3.1.0",
|
|
78
|
+
"type": "module"
|
|
76
79
|
}
|
|
@@ -22,7 +22,7 @@ const updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: Identic
|
|
|
22
22
|
let { fg } = props
|
|
23
23
|
const hash = md5(value)
|
|
24
24
|
const block = Math.floor(size / count)
|
|
25
|
-
const
|
|
25
|
+
const hashColor = hash.slice(0, 6)
|
|
26
26
|
|
|
27
27
|
const current = canvas.current
|
|
28
28
|
|
|
@@ -30,20 +30,16 @@ const updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: Identic
|
|
|
30
30
|
return
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
if (palette && palette.length) {
|
|
34
|
-
const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))
|
|
33
|
+
if (palette && palette.length > 0) {
|
|
34
|
+
const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))
|
|
35
35
|
fg = palette[index]
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
current.width = block * count + iconPadding
|
|
39
39
|
current.height = block * count + iconPadding
|
|
40
|
-
const arr = hash.
|
|
41
|
-
const parsedEl = parseInt(el, 16)
|
|
42
|
-
|
|
43
|
-
return 0
|
|
44
|
-
} else {
|
|
45
|
-
return 1
|
|
46
|
-
}
|
|
40
|
+
const arr = [...hash].map((el) => {
|
|
41
|
+
const parsedEl = Number.parseInt(el, 16)
|
|
42
|
+
return parsedEl < 8 ? 0 : 1
|
|
47
43
|
})
|
|
48
44
|
|
|
49
45
|
const map = []
|
|
@@ -57,17 +53,17 @@ const updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: Identic
|
|
|
57
53
|
ctx.imageSmoothingEnabled = false
|
|
58
54
|
ctx.clearRect(0, 0, current.width, current.height)
|
|
59
55
|
|
|
60
|
-
map.
|
|
61
|
-
row.
|
|
56
|
+
for (const [i, row] of map.entries()) {
|
|
57
|
+
for (const [j, el] of row.entries()) {
|
|
62
58
|
if (el) {
|
|
63
|
-
ctx.fillStyle = fg
|
|
59
|
+
ctx.fillStyle = fg ?? '#' + hashColor
|
|
64
60
|
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)
|
|
65
61
|
} else {
|
|
66
62
|
ctx.fillStyle = bg
|
|
67
63
|
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)
|
|
68
64
|
}
|
|
69
|
-
}
|
|
70
|
-
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
71
67
|
}
|
|
72
68
|
}
|
|
73
69
|
|
|
@@ -88,5 +84,11 @@ export const Identicon: React.FC<IdenticonProps> = ({
|
|
|
88
84
|
updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })
|
|
89
85
|
})
|
|
90
86
|
|
|
91
|
-
return
|
|
87
|
+
return (
|
|
88
|
+
<FlexRow {...props}>
|
|
89
|
+
{value ?
|
|
90
|
+
<canvas className={className} ref={canvas} style={{ height: size, width: size }} />
|
|
91
|
+
: null}
|
|
92
|
+
</FlexRow>
|
|
93
|
+
)
|
|
92
94
|
}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { FlexRow } from "@xylabs/react-flexbox";
|
|
3
|
-
import md5 from "md5";
|
|
4
|
-
import { useEffect, useRef } from "react";
|
|
5
|
-
const range = (n, in_min, in_max, out_min, out_max) => {
|
|
6
|
-
return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
|
7
|
-
};
|
|
8
|
-
const updateCanvas = (canvas, props) => {
|
|
9
|
-
const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
|
|
10
|
-
let { fg } = props;
|
|
11
|
-
const hash = md5(value);
|
|
12
|
-
const block = Math.floor(size / count);
|
|
13
|
-
const hashcolor = hash.slice(0, 6);
|
|
14
|
-
const current = canvas.current;
|
|
15
|
-
if (!current) {
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
if (palette && palette.length) {
|
|
19
|
-
const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
|
|
20
|
-
fg = palette[index];
|
|
21
|
-
}
|
|
22
|
-
current.width = block * count + iconPadding;
|
|
23
|
-
current.height = block * count + iconPadding;
|
|
24
|
-
const arr = hash.split("").map((el) => {
|
|
25
|
-
const parsedEl = parseInt(el, 16);
|
|
26
|
-
if (parsedEl < 8) {
|
|
27
|
-
return 0;
|
|
28
|
-
} else {
|
|
29
|
-
return 1;
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
const map = [];
|
|
33
|
-
map[0] = map[4] = arr.slice(0, 5);
|
|
34
|
-
map[1] = map[3] = arr.slice(5, 10);
|
|
35
|
-
map[2] = arr.slice(10, 15);
|
|
36
|
-
const ctx = current.getContext("2d");
|
|
37
|
-
if (ctx) {
|
|
38
|
-
ctx.imageSmoothingEnabled = false;
|
|
39
|
-
ctx.clearRect(0, 0, current.width, current.height);
|
|
40
|
-
map.forEach((row, i) => {
|
|
41
|
-
row.forEach((el, j) => {
|
|
42
|
-
if (el) {
|
|
43
|
-
ctx.fillStyle = fg ? fg : "#" + hashcolor;
|
|
44
|
-
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
45
|
-
} else {
|
|
46
|
-
ctx.fillStyle = bg;
|
|
47
|
-
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
const Identicon = ({
|
|
54
|
-
size = 400,
|
|
55
|
-
className = "identicon",
|
|
56
|
-
bg,
|
|
57
|
-
count,
|
|
58
|
-
fg,
|
|
59
|
-
iconPadding,
|
|
60
|
-
palette,
|
|
61
|
-
value,
|
|
62
|
-
...props
|
|
63
|
-
}) => {
|
|
64
|
-
const canvas = useRef(null);
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
|
|
67
|
-
});
|
|
68
|
-
return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
|
|
69
|
-
};
|
|
70
|
-
export {
|
|
71
|
-
Identicon
|
|
72
|
-
};
|
|
73
|
-
//# sourceMappingURL=Identicon.js.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":"AA0FsC;AA1FtC,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAEzC,MAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,MAAM,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,MAAM,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 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './Identicon'\n"],"mappings":"AAAA,cAAc;","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) {\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;AAAA;AAAA;AAAA;AAAA;AA0FsC;AA1FtC,2BAAsC;AACtC,iBAAgB;AAChB,mBAAyC;AAEzC,MAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,MAAM,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,WAAO,WAAAA,SAAI,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,MAAM,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,aAAS,qBAA0B,IAAI;AAE7C,8BAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,4CAAC,gCAAS,GAAG,OAAQ,kBAAQ,4CAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":["md5"]}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { FlexRow } from "@xylabs/react-flexbox";
|
|
3
|
-
import md5 from "md5";
|
|
4
|
-
import { useEffect, useRef } from "react";
|
|
5
|
-
const range = (n, in_min, in_max, out_min, out_max) => {
|
|
6
|
-
return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
|
7
|
-
};
|
|
8
|
-
const updateCanvas = (canvas, props) => {
|
|
9
|
-
const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
|
|
10
|
-
let { fg } = props;
|
|
11
|
-
const hash = md5(value);
|
|
12
|
-
const block = Math.floor(size / count);
|
|
13
|
-
const hashcolor = hash.slice(0, 6);
|
|
14
|
-
const current = canvas.current;
|
|
15
|
-
if (!current) {
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
if (palette && palette.length) {
|
|
19
|
-
const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
|
|
20
|
-
fg = palette[index];
|
|
21
|
-
}
|
|
22
|
-
current.width = block * count + iconPadding;
|
|
23
|
-
current.height = block * count + iconPadding;
|
|
24
|
-
const arr = hash.split("").map((el) => {
|
|
25
|
-
const parsedEl = parseInt(el, 16);
|
|
26
|
-
if (parsedEl < 8) {
|
|
27
|
-
return 0;
|
|
28
|
-
} else {
|
|
29
|
-
return 1;
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
const map = [];
|
|
33
|
-
map[0] = map[4] = arr.slice(0, 5);
|
|
34
|
-
map[1] = map[3] = arr.slice(5, 10);
|
|
35
|
-
map[2] = arr.slice(10, 15);
|
|
36
|
-
const ctx = current.getContext("2d");
|
|
37
|
-
if (ctx) {
|
|
38
|
-
ctx.imageSmoothingEnabled = false;
|
|
39
|
-
ctx.clearRect(0, 0, current.width, current.height);
|
|
40
|
-
map.forEach((row, i) => {
|
|
41
|
-
row.forEach((el, j) => {
|
|
42
|
-
if (el) {
|
|
43
|
-
ctx.fillStyle = fg ? fg : "#" + hashcolor;
|
|
44
|
-
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
45
|
-
} else {
|
|
46
|
-
ctx.fillStyle = bg;
|
|
47
|
-
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
const Identicon = ({
|
|
54
|
-
size = 400,
|
|
55
|
-
className = "identicon",
|
|
56
|
-
bg,
|
|
57
|
-
count,
|
|
58
|
-
fg,
|
|
59
|
-
iconPadding,
|
|
60
|
-
palette,
|
|
61
|
-
value,
|
|
62
|
-
...props
|
|
63
|
-
}) => {
|
|
64
|
-
const canvas = useRef(null);
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
|
|
67
|
-
});
|
|
68
|
-
return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
|
|
69
|
-
};
|
|
70
|
-
export {
|
|
71
|
-
Identicon
|
|
72
|
-
};
|
|
73
|
-
//# sourceMappingURL=Identicon.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":"AA0FsC;AA1FtC,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAEzC,MAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,MAAM,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,MAAM,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,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __copyProps = (to, from, except, desc) => {
|
|
7
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
-
for (let key of __getOwnPropNames(from))
|
|
9
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
-
}
|
|
12
|
-
return to;
|
|
13
|
-
};
|
|
14
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
-
var components_exports = {};
|
|
17
|
-
module.exports = __toCommonJS(components_exports);
|
|
18
|
-
__reExport(components_exports, require("./Identicon"), module.exports);
|
|
19
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
20
|
-
0 && (module.exports = {
|
|
21
|
-
...require("./Identicon")
|
|
22
|
-
});
|
|
23
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './Identicon'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,wBAAd;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './Identicon'\n"],"mappings":"AAAA,cAAc;","names":[]}
|
package/dist/node/index.mjs
DELETED
package/dist/node/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from './components'\n"],"mappings":"AAAA,cAAc;","names":[]}
|