@gisce/react-ooui 1.2.0-rc.84 → 1.2.0-rc.86

package/dist/style.css

@@ -1 +1 @@
-.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.react-resizable-handle-e{right:0;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;-webkit-transform:rotate(225deg);transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.react-grid-item.resizing{z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-o-user-select:none;user-select:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;-webkit-transform:rotate(225deg);transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
+.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.react-resizable-handle-e{right:0;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;-webkit-transform:rotate(225deg);transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.2.0-rc.84",
+  "version": "1.2.0-rc.86",
   "files": [
     "dist",
     "src",
@@ -32,15 +32,15 @@
   },
   "dependencies": {
     "@ant-design/plots": "^1.0.9",
-    "@gisce/ooui": "^0.19.6",
+    "@gisce/ooui": "^0.20.0",
     "@gisce/react-formiga-components": "^1.0.9-rc.21",
     "@gisce/react-formiga-table": "^0.5.0",
     "@monaco-editor/react": "^4.4.5",
     "@tabler/icons-react": "^2.11.0",
     "antd": "^5.5.2",
     "buffer": "^6.0.3",
-    "fiber-diagram": "github:gisce/fiber-diagram",
-    "file-type": "^16.5.0",
+    "@gisce/fiber-diagram": "^1.0.1",
+    "file-type-buffer-browser": "git+ssh://git@github.com/mguellsegarra/file-type-buffer-browser.git",
     "interweave": "^13.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

package/src/actionbar/SearchBar.tsx

@@ -13,9 +13,8 @@ function SearchBar(props: Props) {
   const { onSearch, disabled = false, searchText } = props;
   const { t } = useContext(LocaleContext) as LocaleContextType;
   const [form] = Form.useForm();
-  const [mustShowClearSuffix, setMustShowClearSuffix] = useState<boolean>(
-    false
-  );
+  const [mustShowClearSuffix, setMustShowClearSuffix] =
+    useState<boolean>(false);
 
   function handleSubmit(values: any) {
     onSearch(values.search);
@@ -42,6 +41,7 @@ function SearchBar(props: Props) {
               onChange={(e) => {
                 setMustShowClearSuffix(e.target.value.length > 0);
               }}
+              style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
               suffix={
                 (mustShowClearSuffix ||
                   (searchText && searchText.length > 0)) && (
@@ -57,7 +57,11 @@ function SearchBar(props: Props) {
           </Form.Item>
         </Col>
         <Col>
-          <Button htmlType="submit" disabled={disabled}>
+          <Button
+            htmlType="submit"
+            disabled={disabled}
+            style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
+          >
             {t("search")}
           </Button>
         </Col>

package/src/helpers/filesHelper.ts

@@ -1,5 +1,4 @@
-import FileType from "file-type/browser";
-import { Buffer } from "buffer";
+import { fileTypeFromBuffer } from "file-type-buffer-browser";
 
 export function getFilesize(base64string: string) {
   const buffer = Buffer.from(base64string, "base64");
@@ -8,7 +7,7 @@ export function getFilesize(base64string: string) {
 }
 
 export async function getMimeType(base64string: string) {
-  const mimeInfo = await FileType.fromBuffer(
+  const mimeInfo = await fileTypeFromBuffer(
     Buffer.from(base64string, "base64")
   );
   if (!mimeInfo) {

package/src/stories/custom/Avatar.stories.tsx

@@ -0,0 +1,27 @@
+import React, {useState} from "react";
+
+import { Avatar as AvatarOoui } from "@gisce/ooui";
+import Avatar from "@/widgets/custom/Avatar";
+import "antd/dist/antd.css";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Custom/Avatar",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new AvatarOoui({
+    name: "user",
+    string: "Lorem ipsum",
+  });
+  const value = "John Wick";
+  return (
+    <LocaleProvider lang="en_US">
+      <Avatar ooui={ooui} value={value} />
+    </LocaleProvider>
+  );
+};
+
+
+
+

package/src/stories/views/Tree.stories.jsx

@@ -28,6 +28,7 @@ Default.args = {
   results: [
     {
       city: false,
+      user_id: [1, "John Wick"],
       country: false,
       id: 62,
       lang: false,
@@ -39,6 +40,7 @@ Default.args = {
     },
     {
       city: "Wavre",
+      user_id: [2, "JIGNACIO FERREIRO ANDRES"],
       country: [20, "Belgium"],
       id: 3,
       lang: false,
@@ -50,6 +52,7 @@ Default.args = {
     },
     {
       city: false,
+      user_id: [3, "JOSEFA REINA GUTIERREZ"],
       country: false,
       id: 106,
       lang: "ca_ES",
@@ -61,6 +64,7 @@ Default.args = {
     },
     {
       city: "Sevilla",
+      user_id: [4, "GUADALUPE CALERO CATALAN"],
       country: [67, "España"],
       id: 32,
       lang: false,
@@ -73,6 +77,7 @@ Default.args = {
     {
       city: false,
       country: [67, "España"],
+      user_id: [5, "ANDER BAUTISTA ROLDAN"],
       id: 82,
       lang: "es_ES",
       name: "Apellido2 Apellido2, Nombre",
@@ -83,6 +88,7 @@ Default.args = {
     },
     {
       city: "Zaragoza",
+      user_id: [7, "FELICIDAD PAEZ BARRERA"],
       country: [67, "España"],
       id: 33,
       lang: false,
@@ -95,12 +101,17 @@ Default.args = {
   ],
   treeView: {
     arch:
-      `<tree string="Partners">\n<field name="numeric" sum="Numeric"/><field name="name"/>\n                    <field name="title" widget="tag" widget_props="{'colors': {'corp': 'red', 'ltd': 'green'}}"/>\n                    <field name="ref"/>\n                    <field name="city" select="2"/>\n                    <field name="country" select="2"/>\n                    <field name="lang"/>\n <field name="progressbar" string="Progress" />               </tree>`,
+      `<tree string="Partners">\n<field name="numeric" sum="Numeric"/><field name="user_id" widget="avatar"/><field name="name"/>\n                    <field name="title" widget="tag" widget_props="{'colors': {'corp': 'red', 'ltd': 'green'}}"/>\n                    <field name="ref"/>\n                    <field name="city" select="2"/>\n                    <field name="country" select="2"/>\n                    <field name="lang"/>\n <field name="progressbar" string="Progress" />               </tree>`,
     fields: {
       progressbar: {
         string: "Progress bar",
         type: "progressbar",
       },
+      user_id: {
+        string: "User",
+        type: "many2one",
+        relation: "res.users",
+      },
       numeric: {
         digits: [16, 3],
         string: "Potència contractada (kW)",

package/src/widgets/base/many2one/Many2one.tsx

@@ -257,7 +257,7 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
           }
         />
       </Col>
-      <Col flex="32px">
+      <Col flex="32px" style={{ paddingRight: 0 }}>
         <Button
           icon={<FolderOpenOutlined />}
           disabled={id === undefined || text === "" || inputText === undefined}
@@ -268,7 +268,7 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
           tabIndex={-1}
         />
       </Col>
-      <Col flex="32px">
+      <Col flex="32px" style={{ paddingLeft: 0 }}>
         <Button
           icon={searching ? <LoadingOutlined /> : <SearchOutlined />}
           disabled={readOnly || searching}

package/src/widgets/custom/Avatar.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import {WidgetProps} from "@/types";
+import { Avatar as AntdAvatar, Tooltip } from "antd";
+import { Avatar as AvatarOoui} from "@gisce/ooui";
+import { colorFromString } from "@/helpers/formHelper";
+
+type AvatarProps = WidgetProps & {
+  ooui: AvatarOoui
+  value?: any;
+};
+
+const Avatar = (props: AvatarProps): React.ReactElement | null => {
+  console.log("Avatar Props", props);
+  const {ooui, value} = props;
+  if (!value) {
+    return null;
+  }
+  let formattedValue = value;
+  if (ooui.selectionValues.size) {
+    formattedValue = ooui.selectionValues.get(value);
+  } else if (Array.isArray(value)) {
+    formattedValue = value[1];
+  }
+  const text = formattedValue.toString().split(" ").filter((word:string) => word.length > 1).slice(0, 3).map((word:string) => word[0].toUpperCase()).join("");
+  const backgroundColor = colorFromString(formattedValue);
+  return (
+    <Tooltip title={formattedValue}>
+      <AntdAvatar alt={formattedValue} style={{backgroundColor}}>{text}</AntdAvatar>
+    </Tooltip>
+  );
+}
+
+export default Avatar;

package/src/widgets/custom/FiberGrid.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Field from "@/common/Field";
 import { Char as CharOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import { GridUi } from "fiber-diagram";
+import { GridUi } from "@gisce/fiber-diagram";
 
 export const FiberGrid = (props: WidgetProps) => {
   const { ooui } = props;