@gisce/react-ooui 1.2.7 → 1.2.8

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAItC,eAAO,MAAM,GAAG,UAAW,WAAW,sBAMrC,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,GAAG,6BASlC,CAAA"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAKtC,eAAO,MAAM,GAAG,UAAW,WAAW,sBAMrC,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,GAAG,6BAiBlC,CAAA"}

package/dist/widgets/views/Tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AAuB3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AAkHF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CA4M9C;AAED,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AAwB3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AA8GF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CA4M9C;AAED,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "files": [
     "dist",
     "src",

package/src/helpers/formHelper.ts

@@ -248,6 +248,7 @@ export const transformPlainMany2Ones = ({
 
 export const colorFromString = (text: string) => {
   let hash = 0;
+  text = text.toString().padEnd(10, '0');
   for (let i = 0; i < text.length; i++) {
     hash = text.charCodeAt(i) + ((hash << 5) - hash);
   }
@@ -258,3 +259,47 @@ export const colorFromString = (text: string) => {
   }
   return hexColour;
 }
+
+export const colorTextFromBackground = (color: string) => {
+  function getRGB(c: string): number {
+    return parseInt(c, 16) || parseInt(c)
+  }
+
+  function getsRGB(c: string ) {
+    return getRGB(c) / 255 <= 0.03928
+      ? getRGB(c) / 255 / 12.92
+      : Math.pow((getRGB(c) / 255 + 0.055) / 1.055, 2.4)
+  }
+
+  function getLuminance(hexColor: string) {
+    return (
+      0.2126 * getsRGB(hexColor.substr(1, 2)) +
+      0.7152 * getsRGB(hexColor.substr(3, 2)) +
+      0.0722 * getsRGB(hexColor.substr(-2))
+    )
+  }
+
+  function getContrast(f: string, b: string) {
+    const L1 = getLuminance(f)
+    const L2 = getLuminance(b)
+    return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05)
+  }
+
+  function getTextColor(bgColor: string) {
+    const whiteContrast = getContrast(bgColor, '#ffffff')
+    const blackContrast = getContrast(bgColor, '#000000')
+
+    return whiteContrast > blackContrast ? '#ffffff' : '#000000'
+  }
+
+  return getTextColor(color);
+
+}
+
+export const colorsFromString = (text: string): any => {
+  const backgroundColor = colorFromString(text)
+  return {
+    backgroundColor,
+    textColor: colorTextFromBackground(backgroundColor)
+  }
+}

package/src/widgets/custom/Tag.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
 import { Tag as AntdTag } from 'antd';
-import { colorFromString } from "@/helpers/formHelper";
+import { isPresetStatusColor } from 'antd/lib/_util/colors'
+import { colorFromString, colorTextFromBackground } from "@/helpers/formHelper";
 
 export const Tag = (props: WidgetProps) => {
   return (
@@ -14,11 +15,19 @@ export const Tag = (props: WidgetProps) => {
 
 export const TagInput = (props: any) => {
   const {ooui, value} = props;
+  let formattedValue = value;
+  let colorValue = value;
+  if (ooui.selectionValues.size) {
+    formattedValue = ooui.selectionValues.get(value);
+  } else if (Array.isArray(value)) {
+    colorValue = value[0];
+    formattedValue = value[1];
+  }
   if (!value) {
     return null
   }
-  const color = ooui.colors === "auto" ? colorFromString(value) : ooui.colors[value]
+  const color = ooui.colors === "auto" ? colorFromString(colorValue) : ooui.colors[colorValue] || colorFromString(colorValue);
   return (
-    <AntdTag color={color}>{ooui.selectionValues.get(value)}</AntdTag>
+    <AntdTag color={color} style={isPresetStatusColor(color) ? {} : {color: colorTextFromBackground(color)}}>{formattedValue}</AntdTag>
   );
 }

package/src/widgets/views/Tree.tsx

@@ -24,6 +24,7 @@ import { Many2oneTree } from "../base/many2one/Many2oneTree";
 import { ReferenceTree } from "../base/ReferenceTree";
 import dayjs from "dayjs";
 import Avatar from "../custom/Avatar";
+import { TagInput } from "../custom/Tag";
 import { DatePickerConfig } from "@/common/DatePicker";
 
 type Props = {
@@ -120,11 +121,7 @@ value: any,
   ooui: any,
   context: any
 ): React.ReactElement => {
-  return (
-    <>
-      {value ? <Tag color={ooui.colors[value]}>{ooui.selectionValues.get(value)}</Tag> : null}
-    </>
-  );
+  return <TagInput ooui={ooui} value={value} />
 };
 
 const SelectionComponent = (