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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/helpers/filesHelper.d.ts.map +1 -1
  2. package/dist/react-ooui.es.js +7712 -25801
  3. package/dist/react-ooui.es.js.map +1 -1
  4. package/dist/react-ooui.umd.js +15 -229
  5. package/dist/react-ooui.umd.js.map +1 -1
  6. package/dist/style.css +1 -1
  7. package/package.json +4 -4
  8. package/src/helpers/filesHelper.ts +2 -3
  9. package/src/stories/custom/Avatar.stories.tsx +27 -0
  10. package/src/stories/views/Tree.stories.jsx +12 -1
  11. package/src/widgets/custom/Avatar.tsx +33 -0
  12. package/src/widgets/custom/FiberGrid.tsx +1 -1
package/dist/style.css CHANGED
@@ -1 +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)}
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)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gisce/react-ooui",
3
- "version": "1.2.0-rc.85",
3
+ "version": "1.2.0-rc.86",
4
4
  "files": [
5
5
  "dist",
6
6
  "src",
@@ -32,15 +32,15 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@ant-design/plots": "^1.0.9",
35
- "@gisce/ooui": "^0.19.6",
35
+ "@gisce/ooui": "^0.20.0",
36
36
  "@gisce/react-formiga-components": "^1.0.9-rc.21",
37
37
  "@gisce/react-formiga-table": "^0.5.0",
38
38
  "@monaco-editor/react": "^4.4.5",
39
39
  "@tabler/icons-react": "^2.11.0",
40
40
  "antd": "^5.5.2",
41
41
  "buffer": "^6.0.3",
42
- "fiber-diagram": "github:gisce/fiber-diagram",
43
- "file-type": "^16.5.0",
42
+ "@gisce/fiber-diagram": "^1.0.1",
43
+ "file-type-buffer-browser": "git+ssh://git@github.com/mguellsegarra/file-type-buffer-browser.git",
44
44
  "interweave": "^13.0.0",
45
45
  "react": "^17.0.1",
46
46
  "react-dom": "^17.0.1",
package/src/helpers/filesHelper.ts CHANGED
@@ -1,5 +1,4 @@
1
- import FileType from "file-type/browser";
2
- import { Buffer } from "buffer";
1
+ import { fileTypeFromBuffer } from "file-type-buffer-browser";
3
2
 
4
3
  export function getFilesize(base64string: string) {
5
4
  const buffer = Buffer.from(base64string, "base64");
@@ -8,7 +7,7 @@ export function getFilesize(base64string: string) {
8
7
  }
9
8
 
10
9
  export async function getMimeType(base64string: string) {
11
- const mimeInfo = await FileType.fromBuffer(
10
+ const mimeInfo = await fileTypeFromBuffer(
12
11
  Buffer.from(base64string, "base64")
13
12
  );
14
13
  if (!mimeInfo) {
package/src/stories/custom/Avatar.stories.tsx ADDED
@@ -0,0 +1,27 @@
1
+ import React, {useState} from "react";
2
+
3
+ import { Avatar as AvatarOoui } from "@gisce/ooui";
4
+ import Avatar from "@/widgets/custom/Avatar";
5
+ import "antd/dist/antd.css";
6
+ import LocaleProvider from "../../context/LocaleContext";
7
+
8
+ export default {
9
+ title: "Components/Widgets/Custom/Avatar",
10
+ };
11
+
12
+ export const Default = (): React.ReactElement => {
13
+ const ooui = new AvatarOoui({
14
+ name: "user",
15
+ string: "Lorem ipsum",
16
+ });
17
+ const value = "John Wick";
18
+ return (
19
+ <LocaleProvider lang="en_US">
20
+ <Avatar ooui={ooui} value={value} />
21
+ </LocaleProvider>
22
+ );
23
+ };
24
+
25
+
26
+
27
+
package/src/stories/views/Tree.stories.jsx CHANGED
@@ -28,6 +28,7 @@ Default.args = {
28
28
  results: [
29
29
  {
30
30
  city: false,
31
+ user_id: [1, "John Wick"],
31
32
  country: false,
32
33
  id: 62,
33
34
  lang: false,
@@ -39,6 +40,7 @@ Default.args = {
39
40
  },
40
41
  {
41
42
  city: "Wavre",
43
+ user_id: [2, "JIGNACIO FERREIRO ANDRES"],
42
44
  country: [20, "Belgium"],
43
45
  id: 3,
44
46
  lang: false,
@@ -50,6 +52,7 @@ Default.args = {
50
52
  },
51
53
  {
52
54
  city: false,
55
+ user_id: [3, "JOSEFA REINA GUTIERREZ"],
53
56
  country: false,
54
57
  id: 106,
55
58
  lang: "ca_ES",
@@ -61,6 +64,7 @@ Default.args = {
61
64
  },
62
65
  {
63
66
  city: "Sevilla",
67
+ user_id: [4, "GUADALUPE CALERO CATALAN"],
64
68
  country: [67, "España"],
65
69
  id: 32,
66
70
  lang: false,
@@ -73,6 +77,7 @@ Default.args = {
73
77
  {
74
78
  city: false,
75
79
  country: [67, "España"],
80
+ user_id: [5, "ANDER BAUTISTA ROLDAN"],
76
81
  id: 82,
77
82
  lang: "es_ES",
78
83
  name: "Apellido2 Apellido2, Nombre",
@@ -83,6 +88,7 @@ Default.args = {
83
88
  },
84
89
  {
85
90
  city: "Zaragoza",
91
+ user_id: [7, "FELICIDAD PAEZ BARRERA"],
86
92
  country: [67, "España"],
87
93
  id: 33,
88
94
  lang: false,
@@ -95,12 +101,17 @@ Default.args = {
95
101
  ],
96
102
  treeView: {
97
103
  arch:
98
- `<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>`,
104
+ `<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>`,
99
105
  fields: {
100
106
  progressbar: {
101
107
  string: "Progress bar",
102
108
  type: "progressbar",
103
109
  },
110
+ user_id: {
111
+ string: "User",
112
+ type: "many2one",
113
+ relation: "res.users",
114
+ },
104
115
  numeric: {
105
116
  digits: [16, 3],
106
117
  string: "Potència contractada (kW)",
package/src/widgets/custom/Avatar.tsx ADDED
@@ -0,0 +1,33 @@
1
+ import React from "react";
2
+ import {WidgetProps} from "@/types";
3
+ import { Avatar as AntdAvatar, Tooltip } from "antd";
4
+ import { Avatar as AvatarOoui} from "@gisce/ooui";
5
+ import { colorFromString } from "@/helpers/formHelper";
6
+
7
+ type AvatarProps = WidgetProps & {
8
+ ooui: AvatarOoui
9
+ value?: any;
10
+ };
11
+
12
+ const Avatar = (props: AvatarProps): React.ReactElement | null => {
13
+ console.log("Avatar Props", props);
14
+ const {ooui, value} = props;
15
+ if (!value) {
16
+ return null;
17
+ }
18
+ let formattedValue = value;
19
+ if (ooui.selectionValues.size) {
20
+ formattedValue = ooui.selectionValues.get(value);
21
+ } else if (Array.isArray(value)) {
22
+ formattedValue = value[1];
23
+ }
24
+ const text = formattedValue.toString().split(" ").filter((word:string) => word.length > 1).slice(0, 3).map((word:string) => word[0].toUpperCase()).join("");
25
+ const backgroundColor = colorFromString(formattedValue);
26
+ return (
27
+ <Tooltip title={formattedValue}>
28
+ <AntdAvatar alt={formattedValue} style={{backgroundColor}}>{text}</AntdAvatar>
29
+ </Tooltip>
30
+ );
31
+ }
32
+
33
+ export default Avatar;
package/src/widgets/custom/FiberGrid.tsx CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import Field from "@/common/Field";
3
3
  import { Char as CharOoui } from "@gisce/ooui";
4
4
  import { WidgetProps } from "@/types";
5
- import { GridUi } from "fiber-diagram";
5
+ import { GridUi } from "@gisce/fiber-diagram";
6
6
 
7
7
  export const FiberGrid = (props: WidgetProps) => {
8
8
  const { ooui } = props;