@gisce/react-ooui 1.4.3-rc.0 → 1.4.3

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { WidgetProps } from '../../types';
+import { TagProps } from 'antd';
 export declare const Tag: (props: WidgetProps) => React.JSX.Element;
 export declare const TagInput: (props: any) => React.JSX.Element | null;
+export declare const CustomTag: (props: TagProps) => React.JSX.Element;
 //# sourceMappingURL=Tag.d.ts.map

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;AAKtC,eAAO,MAAM,GAAG,UAAW,WAAW,sBAMrC,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,GAAG,6BAiBlC,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;AACtC,OAAO,EAAkB,QAAQ,EAAE,MAAM,MAAM,CAAC;AAIhD,eAAO,MAAM,GAAG,UAAW,WAAW,sBAMrC,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,GAAG,6BAiBlC,CAAA;AAGD,eAAO,MAAM,SAAS,UAAW,QAAQ,sBAaxC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["Tags.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAgB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAO7E,aAAK,SAAS,GAAG,WAAW,GAAG;IAC7B,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,sBAQpC,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,cAAc,sBAoI9C,CAAC"}
+{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["Tags.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAgB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAQ7E,aAAK,SAAS,GAAG,WAAW,GAAG;IAC7B,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,sBAQpC,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,cAAc,sBAoI9C,CAAC"}

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;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,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;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA+GF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CAoN9C;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,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;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA8GF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CAqN9C;AAED,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.4.3-rc.0",
+  "version": "1.4.3",
   "files": [
     "dist",
     "src",

package/src/actionbar/TreeActionBar.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { Space, Spin } from "antd";
+import { Space } from "antd";
 import ChangeViewButton from "./ChangeViewButton";
 import {
   ActionViewContext,
@@ -151,13 +151,6 @@ function TreeActionBar(props: Props) {
 
   return (
     <Space wrap={true}>
-      {treeIsLoading && (
-        <>
-          <Spin />
-          {separator()}
-          {separator()}
-        </>
-      )}
       {treeExpandable ? null : (
         <>
           <SearchBar

package/src/helpers/formHelper.ts

@@ -295,11 +295,3 @@ export const colorTextFromBackground = (color: string) => {
   return getTextColor(color);
 
 }
-
-export const colorsFromString = (text: string): any => {
-  const backgroundColor = colorFromString(text)
-  return {
-    backgroundColor,
-    textColor: colorTextFromBackground(backgroundColor)
-  }
-}

package/src/hooks/useSearch.ts

@@ -293,7 +293,6 @@ export const useSearch = (opts: UseSearchOpts) => {
 
   const changeSort = useCallback(
     (newSorter: any) => {
-      if (JSON.stringify(newSorter) === JSON.stringify(sorter)) return;
       setSorter?.(newSorter);
       const sortedResults =
         newSorter !== undefined

package/src/stories/Utils.stories.tsx

@@ -0,0 +1,16 @@
+// @ts-ignore
+import React from "react";
+import { CustomTag } from "../widgets/custom/Tag";
+import { colorFromString } from "../helpers/formHelper";
+
+export default {
+  title: "Components/Pure",
+};
+
+
+
+export const CustomTagWithColor = (): React.ReactElement => {
+  const text = "Hacker";
+  const color = colorFromString(text);
+  return <CustomTag color={color}>{text}</CustomTag>
+};

package/src/widgets/custom/Tag.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
-import { Tag as AntdTag } from 'antd';
-import { isPresetStatusColor } from 'antd/lib/_util/colors'
-import { colorFromString, colorTextFromBackground } from "@/helpers/formHelper";
+import { Tag as AntdTag, TagProps } from 'antd';
+import { isPresetStatusColor, isPresetColor } from 'antd/lib/_util/colors'
+import { colorFromString } from "@/helpers/formHelper";
 
 export const Tag = (props: WidgetProps) => {
   return (
@@ -28,6 +28,22 @@ export const TagInput = (props: any) => {
   }
   const color = ooui.colors === "auto" ? colorFromString(colorValue) : ooui.colors[colorValue] || colorFromString(colorValue);
   return (
-    <AntdTag color={color} style={isPresetStatusColor(color) ? {} : {color: colorTextFromBackground(color)}}>{formattedValue}</AntdTag>
+    <CustomTag color={color}>{formattedValue}</CustomTag>
   );
-}
+}
+
+
+export const CustomTag = (props: TagProps) => {
+  let { color } = props;
+  let style = {}
+  if (!isPresetStatusColor(props.color) && !isPresetColor(props.color)) {
+    style = {
+      color: color,
+      borderColor: color,
+      borderStyle: "solid",
+      borderWidth: "1px",
+    }
+    color = `${color}20`;
+  }
+  return <AntdTag {...props} style={style} color={color}>{props.children}</AntdTag>
+}

package/src/widgets/custom/Tags.tsx

@@ -5,9 +5,10 @@ import { WidgetProps } from "@/types";
 import { One2manyItem, One2manyValue } from "../base/one2many/One2manyInput";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { FormContext, FormContextType } from "@/context/FormContext";
-import { Alert, Tag as AntTag, Select } from "antd";
-import { colorsFromString, transformPlainMany2Ones } from "@/helpers/formHelper";
+import { Alert, Select } from "antd";
+import { colorFromString, transformPlainMany2Ones } from "@/helpers/formHelper";
 import ConnectionProvider from "@/ConnectionProvider";
+import { CustomTag } from "@/widgets/custom/Tag";
 
 type TagsProps = WidgetProps & {
   ooui: TagsOoui;
@@ -126,17 +127,17 @@ export const TagsInput = (props: TagsInputProps) => {
       event.preventDefault();
       event.stopPropagation();
     };
-    const colors = colorsFromString(label);
+    const color = colorFromString(label);
     return (
-      <AntTag
-        color={colors.backgroundColor}
+      <CustomTag
+        color={color}
         onMouseDown={onPreventMouseDown}
-        style={{ margin: "5px", color: colors.textColor }}
         closable={closable}
         onClose={onClose}
+        closeIcon={<span style={{color}}>X</span>}
       >
         {label}
-      </AntTag>
+      </CustomTag>
     );
   };
 

package/src/widgets/views/SearchTree.tsx

@@ -182,9 +182,9 @@ function SearchTree(props: Props, ref: any) {
       setInitialFetchDone(true);
     } catch (error) {
       setInitialError(error);
-      setTreeIsLoading?.(false);
     } finally {
       setIsLoading(false);
+      setTreeIsLoading?.(false);
     }
   };
 

package/src/widgets/views/Tree.tsx

@@ -118,7 +118,7 @@ const imageComponent = (value: string): React.ReactElement => {
 };
 
 const TagComponent = (
-  value: any,
+value: any,
   key: string,
   ooui: any,
   context: any
@@ -127,12 +127,14 @@ const TagComponent = (
 };
 
 const SelectionComponent = (
-  value: any,
+value: any,
   key: string,
   ooui: any,
   context: any
 ): React.ReactElement => {
-  return <>{ooui.selectionValues.get(value)}</>;
+  return (
+    <>{ooui.selectionValues.get(value)}</>
+  );
 };
 
 const referenceComponent = (
@@ -152,12 +154,9 @@ const referenceComponent = (
   );
 };
 
-const AvatarFn = (
-  value: any,
-  key: string,
-  ooui: any,
-  context: any
-): React.ReactElement => <Avatar ooui={ooui} value={value} />;
+const AvatarFn = (value: any, key:string, ooui: any, context: any): React.ReactElement => (
+  <Avatar ooui={ooui} value={value} />
+)
 
 function Tree(props: Props): React.ReactElement {
   const {
@@ -309,7 +308,9 @@ function Tree(props: Props): React.ReactElement {
       summary.push(`${sumField.label}: ${Math.round(total * 100) / 100}`);
     });
 
-    return <div className="p-1 pb-0 pl-2 mt-2 ">{summary.join(", ")}</div>;
+    return (
+      <div className="p-1 pb-0 pl-2 mt-2 ">{summary.join(", ")}</div>
+    );
   }
 
   let dataTable;
@@ -332,12 +333,11 @@ function Tree(props: Props): React.ReactElement {
   ) : (
     <div>
       {pagination()}
-      {loading && <Spin className="pb-4" />}
       <GisceTable
         height={adjustedHeight!}
         columns={dataTable.columns}
         dataSource={items}
-        loading={false}
+        loading={loading}
         loadingComponent={<Spin />}
         onRowStyle={(record: any) => {
           if (colorsForResults![record.id]) {