From 0938ae14dd4cd424868e57e120b57a7f952cfe73 Mon Sep 17 00:00:00 2001 From: ecarreras <294235+ecarreras@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:27:17 +0000 Subject: [PATCH] fix: sync changes from v2 to v2-develop --- package-lock.json | 30 +++++++++++++++++++++--------- package.json | 3 ++- src/helpers/formHelper.ts | 12 ++++++++++++ src/widgets/custom/Tag.tsx | 13 +++++++++---- src/widgets/custom/Tags.tsx | 9 +++++++-- 5 files changed, 51 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index aaadfed7a..1b607f82f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,14 @@ { "name": "@gisce/react-ooui", - "version": "2.53.0", + "version": "2.53.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gisce/react-ooui", - "version": "2.53.0", + "version": "2.53.1", "dependencies": { + "@ant-design/colors": "^7.2.0", "@ant-design/plots": "^1.0.9", "@gisce/fiber-diagram": "2.1.1", "@gisce/ooui": "2.27.0", @@ -116,11 +117,11 @@ } }, "node_modules/@ant-design/colors": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-7.0.2.tgz", - "integrity": "sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-7.2.0.tgz", + "integrity": "sha512-bjTObSnZ9C/O8MB/B4OUtd/q9COomuJAR2SYfhxLyHvCKn4EKwCN3e+fWGMo7H5InAyV0wL17jdE9ALrdOW/6A==", "dependencies": { - "@ctrl/tinycolor": "^3.6.1" + "@ant-design/fast-color": "^2.0.6" } }, "node_modules/@ant-design/cssinjs": { @@ -141,6 +142,17 @@ "react-dom": ">=16.0.0" } }, + "node_modules/@ant-design/fast-color": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@ant-design/fast-color/-/fast-color-2.0.6.tgz", + "integrity": "sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==", + "dependencies": { + "@babel/runtime": "^7.24.7" + }, + "engines": { + "node": ">=8.x" + } + }, "node_modules/@ant-design/icons": { "version": "5.2.6", "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.2.6.tgz", @@ -2387,9 +2399,9 @@ "dev": true }, "node_modules/@babel/runtime": { - "version": "7.23.8", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz", - "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz", + "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==", "dependencies": { "regenerator-runtime": "^0.14.0" }, diff --git a/package.json b/package.json index 22b71292c..819e0d12c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gisce/react-ooui", - "version": "2.53.0", + "version": "2.53.1", "engines": { "node": "20.5.0" }, @@ -33,6 +33,7 @@ "analyze": "vite-bundle-visualizer" }, "dependencies": { + "@ant-design/colors": "^7.2.0", "@ant-design/plots": "^1.0.9", "@gisce/fiber-diagram": "2.1.1", "@gisce/ooui": "2.27.0", diff --git a/src/helpers/formHelper.ts b/src/helpers/formHelper.ts index 2dd737894..d1c819e22 100644 --- a/src/helpers/formHelper.ts +++ b/src/helpers/formHelper.ts @@ -1,5 +1,6 @@ import { One2manyItem } from "@/widgets/base/one2many/One2manyInput"; import { Form as FormOoui } from "@gisce/ooui"; +import { generate } from "@ant-design/colors"; const filteredValues = (values: any, fields: any) => { if (!fields) { @@ -269,6 +270,17 @@ export const colorFromString = (text: string): string => { return hexColour; }; +export const getTextAndBackgroundColors = ( + color: string, + intensity: number = 7, +) => { + const colors = generate(color); + return { + text: colors[intensity], + background: `${color}40`, + }; +}; + export const colorTextFromBackground = (color: string) => { function getRGB(c: string): number { return parseInt(c, 16) || parseInt(c); diff --git a/src/widgets/custom/Tag.tsx b/src/widgets/custom/Tag.tsx index 65f60d614..6e01e4e4d 100644 --- a/src/widgets/custom/Tag.tsx +++ b/src/widgets/custom/Tag.tsx @@ -3,7 +3,11 @@ import Field from "@/common/Field"; import { WidgetProps } from "@/types"; import { Tag as AntdTag, TagProps } from "antd"; import { isPresetStatusColor, isPresetColor } from "antd/lib/_util/colors"; -import { colorFromString, colorFromBoolean } from "@/helpers/formHelper"; +import { + colorFromString, + colorFromBoolean, + getTextAndBackgroundColors, +} from "@/helpers/formHelper"; import { useLocale } from "@gisce/react-formiga-components"; function capitalizeFirstLetter(text: string): string { @@ -51,13 +55,14 @@ export const CustomTag = (props: TagProps) => { let { color } = props; let style = {}; if (!isPresetStatusColor(props.color) && !isPresetColor(props.color)) { + const colors = getTextAndBackgroundColors(color as string); style = { - color, - borderColor: color, + color: colors.text, + borderColor: colors.text, borderStyle: "solid", borderWidth: "1px", }; - color = `${color}20`; + color = colors.background; } return ( diff --git a/src/widgets/custom/Tags.tsx b/src/widgets/custom/Tags.tsx index 4a46cd534..01335bd45 100644 --- a/src/widgets/custom/Tags.tsx +++ b/src/widgets/custom/Tags.tsx @@ -6,7 +6,11 @@ import { One2manyItem, One2manyValue } from "../base/one2many/One2manyInput"; import useDeepCompareEffect from "use-deep-compare-effect"; import { FormContext, FormContextType } from "@/context/FormContext"; import { Alert, Select } from "antd"; -import { colorFromString, transformPlainMany2Ones } from "@/helpers/formHelper"; +import { + colorFromString, + transformPlainMany2Ones, + getTextAndBackgroundColors, +} from "@/helpers/formHelper"; import ConnectionProvider from "@/ConnectionProvider"; import { CustomTag } from "@/widgets/custom/Tag"; @@ -128,13 +132,14 @@ export const TagsInput = (props: TagsInputProps) => { event.stopPropagation(); }; const color = colorFromString(label); + const colors = getTextAndBackgroundColors(color); return ( X} + closeIcon={X} > {label}