@gisce/react-ooui 0.9.3 → 0.9.4

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,gDAA+C;AAwE7C,uFAxEO,eAAM,OAwEP;AAvER,4CAA2C;AAwEzC,qFAxEO,WAAI,OAwEP;AAvEN,sDAAqD;AAwEnD,0FAxEO,qBAAS,OAwEP;AAvEX,kDAAiD;AAwE/C,wFAxEO,iBAAO,OAwEP;AAvET,6DAA4D;AAwE1D,yFAxEO,mBAAQ,OAwEP;AAvEV,6DAA4D;AAqG1D,yFArGO,mBAAQ,OAqGP;AApGV,8DAAwC;AAuEtC,eAvEK,cAAI,CAuEL;AAtEN,8CAA6C;AA2E3C,sFA3EO,aAAK,OA2EP;AA1EP,0DAAyD;AAyHvD,4FAzHO,yBAAW,OAyHP;AAxHb,sDAAqD;AA0EnD,0FA1EO,qBAAS,OA0EP;AAzEX,kDAAiD;AA0E/C,wFA1EO,iBAAO,OA0EP;AAzET,qEAA+C;AAmE7C,gBAnEK,eAAK,CAmEL;AAlEP,2EAAqD;AAqEnD,mBArEK,kBAAQ,CAqEL;AApEV,8DAAwC;AAmEtC,eAnEK,cAAI,CAmEL;AAlEN,+DAAyC;AAuEvC,gBAvEK,eAAK,CAuEL;AAtEP,6DAAuC;AAuErC,eAvEK,cAAI,CAuEL;AAtEN,sDAAqD;AA0EnD,0FA1EO,qBAAS,OA0EP;AAzEX,2FAAqE;AA8DnE,uBA9DK,sBAAY,CA8DL;AA7Dd,0EAAoD;AAyElD,qBAzEK,oBAAU,CAyEL;AAxEZ,wDAAuD;AAqFrD,0FArFO,qBAAS,OAqFP;AApFX,4DAA2D;AAqFzD,4FArFO,yBAAW,OAqFP;AApFb,6DAAuC;AAwFrC,eAxFK,cAAI,CAwFL;AAvFN,qEAA+C;AAwF7C,mBAxFK,kBAAQ,CAwFL;AAnFV,sDAAqD;AAoFnD,0FApFO,qBAAS,OAoFP;AAnFX,gDAA+C;AAoF7C,uFApFO,eAAM,OAoFP;AAnFR,oEAA8C;AAoF5C,qBApFK,oBAAU,CAoFL;AAnFZ,4EAAkD;AAuFhD,oBAvFK,uBAAS,CAuFL;AAtFX,0CAAyC;AA4FvC,oFA5FO,SAAG,OA4FP;AA3FL,8CAA6C;AA4F3C,sFA5FO,aAAK,OA4FP;AA3FP,8CAA6C;AA4F3C,sFA5FO,aAAK,OA4FP;AA3FP,qEAAmD;AA6FjD,4BA7FK,uBAAiB,CA6FL;AA5FnB,kFAA4D;AAgG1D,oBAhGK,mBAAS,CAgGL;AA/FX,+DAGuC;AA8FrC,kGAhGA,iCAAiB,OAgGA;AACjB,8FAhGA,6BAAa,OAgGA;AA9Ff,uEAAsE;AA4FpE,+FA5FO,+BAAc,OA4FP;AApEhB,4EAAsD;AAgCpD,6BAhCK,4BAAkB,CAgCL;AA/BpB,8DAAwC;AAuDtC,mBAvDK,kBAAQ,CAuDL;AAtDV,oEAA8C;AAuD5C,sBAvDK,qBAAW,CAuDL;AAtDb,gFAA0D;AAuDxD,4BAvDK,2BAAiB,CAuDL;AAtDnB,oFAA+D;AA0D7D,8BA1DK,4BAAmB,CA0DL;AAzDrB,yEAAmD;AA6DjD,0BA7DK,yBAAe,CA6DL"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,gDAA+C;AAyE7C,uFAzEO,eAAM,OAyEP;AAxER,4CAA2C;AAyEzC,qFAzEO,WAAI,OAyEP;AAxEN,sDAAqD;AAyEnD,0FAzEO,qBAAS,OAyEP;AAxEX,kDAAiD;AAyE/C,wFAzEO,iBAAO,OAyEP;AAxET,6DAA4D;AAyE1D,yFAzEO,mBAAQ,OAyEP;AAxEV,6DAA4D;AAsG1D,yFAtGO,mBAAQ,OAsGP;AArGV,8DAAwC;AAwEtC,eAxEK,cAAI,CAwEL;AAvEN,8CAA6C;AA4E3C,sFA5EO,aAAK,OA4EP;AA3EP,0DAAyD;AA0HvD,4FA1HO,yBAAW,OA0HP;AAzHb,sDAAqD;AA2EnD,0FA3EO,qBAAS,OA2EP;AA1EX,kDAAiD;AA2E/C,wFA3EO,iBAAO,OA2EP;AA1ET,qEAA+C;AAoE7C,gBApEK,eAAK,CAoEL;AAnEP,2EAAqD;AAsEnD,mBAtEK,kBAAQ,CAsEL;AArEV,8DAAwC;AAoEtC,eApEK,cAAI,CAoEL;AAnEN,+DAAyC;AAwEvC,gBAxEK,eAAK,CAwEL;AAvEP,6DAAuC;AAwErC,eAxEK,cAAI,CAwEL;AAvEN,sDAAqD;AA2EnD,0FA3EO,qBAAS,OA2EP;AA1EX,2FAAqE;AA+DnE,uBA/DK,sBAAY,CA+DL;AA9Dd,0EAAoD;AA0ElD,qBA1EK,oBAAU,CA0EL;AAzEZ,wDAAuD;AAsFrD,0FAtFO,qBAAS,OAsFP;AArFX,4DAA2D;AAsFzD,4FAtFO,yBAAW,OAsFP;AArFb,6DAAuC;AAyFrC,eAzFK,cAAI,CAyFL;AAxFN,qEAA+C;AAyF7C,mBAzFK,kBAAQ,CAyFL;AApFV,sDAAqD;AAqFnD,0FArFO,qBAAS,OAqFP;AApFX,gDAA+C;AAqF7C,uFArFO,eAAM,OAqFP;AApFR,oEAA8C;AAqF5C,qBArFK,oBAAU,CAqFL;AApFZ,4EAAkD;AAwFhD,oBAxFK,uBAAS,CAwFL;AAvFX,0CAAyC;AA6FvC,oFA7FO,SAAG,OA6FP;AA5FL,8CAA6C;AA6F3C,sFA7FO,aAAK,OA6FP;AA5FP,8CAA6C;AA6F3C,sFA7FO,aAAK,OA6FP;AA5FP,qEAAmD;AA8FjD,4BA9FK,uBAAiB,CA8FL;AA7FnB,kFAA4D;AAiG1D,oBAjGK,mBAAS,CAiGL;AAhGX,8CAA6C;AAoG3C,qFApGO,WAAI,OAoGP;AAnGN,+DAGuC;AA8FrC,kGAhGA,iCAAiB,OAgGA;AACjB,8FAhGA,6BAAa,OAgGA;AA9Ff,uEAAsE;AA4FpE,+FA5FO,+BAAc,OA4FP;AApEhB,4EAAsD;AAgCpD,6BAhCK,4BAAkB,CAgCL;AA/BpB,8DAAwC;AAuDtC,mBAvDK,kBAAQ,CAuDL;AAtDV,oEAA8C;AAuD5C,sBAvDK,qBAAW,CAuDL;AAtDb,gFAA0D;AAuDxD,4BAvDK,2BAAiB,CAuDL;AAtDnB,oFAA+D;AA0D7D,8BA1DK,4BAAmB,CA0DL;AAzDrB,yEAAmD;AA6DjD,0BA7DK,yBAAe,CA6DL"}

package/dist/widgets/custom/Tags.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Tags as TagsOoui } from "@gisce/ooui";
+import { One2manyValue } from "../base/one2many/One2manyInput";
+declare type TagsProps = {
+    ooui: TagsOoui;
+};
+declare type TagsInputProps = TagsProps & {
+    value?: One2manyValue;
+    onChange?: (value: One2manyValue) => void;
+};
+export declare const Tags: (props: TagsProps) => JSX.Element;
+export declare const TagsInput: (props: TagsInputProps) => JSX.Element;
+export {};
+//# sourceMappingURL=Tags.d.ts.map

package/dist/widgets/custom/Tags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/widgets/custom/Tags.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAgB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAO7E,aAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,aAAK,cAAc,GAAG,SAAS,GAAG;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,IAAI,UAAW,SAAS,gBAuCpC,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,cAAc,gBAgF9C,CAAC"}

package/dist/widgets/custom/Tags.js

@@ -0,0 +1,192 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagsInput = exports.Tags = void 0;
+var react_1 = __importStar(require("react"));
+var Field_1 = __importDefault(require("@/common/Field"));
+var use_deep_compare_effect_1 = __importDefault(require("use-deep-compare-effect"));
+var FormContext_1 = require("@/context/FormContext");
+var antd_1 = require("antd");
+var one2manyHelper_1 = require("@/helpers/one2manyHelper");
+var Tags = function (props) {
+    var ooui = props.ooui;
+    var relation = ooui.relation, context = ooui.context;
+    var _a = react_1.useState(true), isLoading = _a[0], setIsLoading = _a[1];
+    var _b = react_1.useState(), error = _b[0], setError = _b[1];
+    var formContext = react_1.useContext(FormContext_1.FormContext);
+    var getContext = (formContext || {}).getContext;
+    use_deep_compare_effect_1.default(function () {
+        fetchData();
+    }, [ooui]);
+    var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setIsLoading(true);
+            setError(undefined);
+            try {
+                console.log('Fetching....');
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setIsLoading(false);
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    if (isLoading) {
+        return react_1.default.createElement(antd_1.Spin, null);
+    }
+    if (error) {
+        return react_1.default.createElement(antd_1.Alert, { className: "mt-10", message: error, type: "error", banner: true });
+    }
+    return (react_1.default.createElement(Field_1.default, __assign({ type: "array" }, props),
+        react_1.default.createElement(exports.TagsInput, { ooui: ooui })));
+};
+exports.Tags = Tags;
+var TagsInput = function (props) {
+    var value = props.value, ooui = props.ooui, onChange = props.onChange;
+    var _a = (value || {}).items, items = _a === void 0 ? [] : _a;
+    var _b = react_1.useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = react_1.useState(), error = _c[0], setError = _c[1];
+    var relation = ooui.relation, context = ooui.context, readOnly = ooui.readOnly, field = ooui.field;
+    var itemsToShow = items.filter(function (item) { return item.values && item.operation !== "pendingRemove"; });
+    var formContext = react_1.useContext(FormContext_1.FormContext);
+    var getContext = (formContext || {}).getContext;
+    use_deep_compare_effect_1.default(function () {
+        fetchData();
+    }, [items]);
+    var triggerChange = function (changedValue) {
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            items: changedValue,
+        });
+    };
+    function fetchData() {
+        return __awaiter(this, void 0, void 0, function () {
+            var itemsWithValues, err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setIsLoading(true);
+                        setError(undefined);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, one2manyHelper_1.readObjectValues({
+                                treeFields: [ooui.field],
+                                formFields: [],
+                                model: relation,
+                                items: items,
+                                context: __assign(__assign({}, getContext === null || getContext === void 0 ? void 0 : getContext()), context),
+                            })];
+                    case 2:
+                        itemsWithValues = _a.sent();
+                        triggerChange(itemsWithValues);
+                        return [3 /*break*/, 5];
+                    case 3:
+                        err_1 = _a.sent();
+                        setError(err_1);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setIsLoading(false);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    if (error) {
+        return react_1.default.createElement(antd_1.Alert, { className: "mt-10", message: error, type: "error", banner: true });
+    }
+    if (isLoading) {
+        return react_1.default.createElement(antd_1.Spin, null);
+    }
+    var color = function (text) {
+        var hash = 0;
+        for (var i = 0; i < text.length; i++) {
+            hash = text.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        var colour = '#';
+        for (var i = 0; i < 3; i++) {
+            var value = (hash >> (i * 8)) & 0xFF;
+            colour += ('00' + value.toString(16)).substr(-2);
+        }
+        return colour;
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { padding: "1rem" } }, itemsToShow.map(function (item, index) {
+            var _a;
+            var value = (_a = item.values) === null || _a === void 0 ? void 0 : _a[field];
+            return (react_1.default.createElement(antd_1.Tag, { key: index, color: color(value) }, value));
+        }))));
+};
+exports.TagsInput = TagsInput;
+//# sourceMappingURL=Tags.js.map

package/dist/widgets/custom/Tags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/widgets/custom/Tags.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@ant-design/charts": "^1.3.6",
-    "@gisce/ooui": "^0.7.1",
+    "@gisce/ooui": "^0.7.2",
     "@gisce/react-formiga-table": "^0.3.0",
     "fiber-diagram": "github:gisce/fiber-diagram",
     "file-type": "^16.5.0",

package/src/index.ts

@@ -34,6 +34,7 @@ import { Email } from "@/widgets/base/Email";
 import { Image } from "@/widgets/base/Image";
 import showConfirmDialog from "@/ui/ConfirmDialog";
 import Dashboard from "@/widgets/views/Dashboard/Dashboard";
+import { Tags } from "@/widgets/custom/Tags";
 import {
   DashboardGridItem,
   DashboardGrid,
@@ -133,4 +134,5 @@ export {
   GraphIndicator,
   DashboardGridItem,
   DashboardGrid,
+  Tags,
 };

package/src/stories/custom/Tags.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { TagsInput } from "../../widgets/custom/Tags";
+import { Tags as TagsOoui } from "@gisce/ooui";
+import "antd/dist/antd.css";
+import LocaleProvider from "../../context/LocaleContext";
+import { One2manyInput } from "../../widgets/base/one2many/One2manyInput";
+
+export default {
+  title: "Components/Widgets/Custom/Tags",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new TagsOoui({
+    name: "button_field",
+    string: "Lorem ipsum",
+    field: "name"
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+      <TagsInput ooui={ooui} value={{items: [
+          {id: 1, operation: "original", values: {name: "test"}},
+          {id: 2, operation: "original", values: {name: "foo"}},
+          {id: 3, operation: "pendingRemove", values: {name: "remove"}}
+        ]}}
+      />
+    </LocaleProvider>
+  );
+};

package/src/widgets/custom/Tags.tsx

@@ -0,0 +1,141 @@
+import React, { useContext, useState } from "react";
+import { Tags as TagsOoui } from "@gisce/ooui";
+import Field from "@/common/Field";
+import { One2manyItem, One2manyValue } from "../base/one2many/One2manyInput";
+import useDeepCompareEffect from "use-deep-compare-effect";
+import { FormContext, FormContextType } from "@/context/FormContext";
+import ConnectionProvider from "@/ConnectionProvider";
+import { Spin, Alert, Timeline as AntTimeline, Tag as AntTag } from "antd";
+import { readObjectValues } from "@/helpers/one2manyHelper";
+
+type TagsProps = {
+  ooui: TagsOoui;
+};
+
+type TagsInputProps = TagsProps & {
+  value?: One2manyValue;
+  onChange?: (value: One2manyValue) => void;
+};
+
+export const Tags = (props: TagsProps) => {
+  const { ooui } = props;
+  const { relation, context } = ooui;
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string>();
+  const formContext = useContext(FormContext) as FormContextType;
+  const { getContext } = formContext || {};
+
+  useDeepCompareEffect(() => {
+    fetchData();
+  }, [ooui]);
+
+
+  const fetchData = async () => {
+    setIsLoading(true);
+    setError(undefined);
+
+    try {
+     console.log('Fetching....')
+    } catch (err) {
+      setError(err as any);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return <Spin />;
+  }
+
+  if (error) {
+    return <Alert className="mt-10" message={error} type="error" banner />;
+  }
+
+  return (
+    <Field type={"array"} {...props}>
+      <TagsInput ooui={ooui}  />
+    </Field>
+  );
+};
+
+export const TagsInput = (props: TagsInputProps) => {
+  const { value, ooui, onChange } = props;
+  const { items = [] } = value || {};
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>();
+  const { relation, context, readOnly, field } = ooui;
+  const itemsToShow = items.filter(
+    (item) => item.values && item.operation !== "pendingRemove"
+  );
+
+  const formContext = useContext(FormContext) as FormContextType;
+  const { getContext } = formContext || {};
+
+  useDeepCompareEffect(() => {
+    fetchData();
+  }, [items]);
+
+  const triggerChange = (changedValue: Array<One2manyItem>) => {
+    onChange?.({
+      items: changedValue,
+    });
+  };
+
+  async function fetchData() {
+    setIsLoading(true);
+    setError(undefined);
+
+    try {
+      const itemsWithValues = await readObjectValues({
+        treeFields: [ooui.field],
+        formFields: [],
+        model: relation,
+        items,
+        context: { ...getContext?.(), ...context },
+      });
+
+      triggerChange(itemsWithValues);
+    } catch (err) {
+      setError(err as any);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  if (error) {
+    return <Alert className="mt-10" message={error} type="error" banner />;
+  }
+
+  if (isLoading) {
+    return <Spin />;
+  }
+
+  const color = (text: string) => {
+    let hash = 0;
+    for (let i = 0; i < text.length; i++) {
+      hash = text.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    var colour = '#';
+    for (let i = 0; i < 3; i++) {
+      var value = (hash >> (i * 8)) & 0xFF;
+      colour += ('00' + value.toString(16)).substr(-2);
+    }
+    return colour;
+  }
+
+  return (
+    <>
+      <div style={{ padding: "1rem" }}>
+        
+        {itemsToShow.map((item, index) => {
+          const value = item.values?.[field];
+          return (
+            <AntTag key={index} color={color(value)}>{value}</AntTag>
+          );
+        })}
+      </div>
+     
+    </>
+  );
+};