@gisce/react-ooui 1.5.2-alpha.1 → 1.5.2-rc.0

package/src/widgets/base/one2many/One2manyInput.tsx

@@ -5,16 +5,17 @@ import React, {
   useEffect,
   useCallback,
 } from "react";
+import { One2many as One2manyOoui } from "@gisce/ooui";
+import { Alert, Spin } from "antd";
+import { Form } from "@/index";
+import { Tree } from "@/index";
+import { Graph } from "@/widgets/views/Graph/Graph";
 import {
-  One2many as One2manyOoui,
   Form as FormOoui,
   Tree as TreeOoui,
   parseGraph,
   transformDomainForChildWidget,
 } from "@gisce/ooui";
-import { Alert, Spin } from "antd";
-import { Form, Tree } from "@/index";
-import { Graph } from "@/widgets/views/Graph/Graph";
 import { Views, ViewType } from "@/types";
 import ConnectionProvider from "@/ConnectionProvider";
 import { FormModal } from "@/widgets/modals/FormModal";
@@ -35,7 +36,7 @@ import { transformPlainMany2Ones } from "@/helpers/formHelper";
 
 type One2manyValue = {
   fields?: any;
-  items: One2manyItem[];
+  items: Array<One2manyItem>;
 };
 
 const ViewObjects = {
@@ -74,13 +75,13 @@ function filterDuplicateItems(items: any) {
 }
 
 const One2manyInput: React.FC<One2manyInputProps> = (
-  props: One2manyInputProps,
+  props: One2manyInputProps
 ) => {
   const { value, onChange, ooui, views } = props;
   const { items = [] } = value || {};
 
   const { currentView, setCurrentView, itemIndex, setItemIndex } = useContext(
-    One2manyContext,
+    One2manyContext
   ) as One2manyContextType;
 
   const formContext = useContext(FormContext) as FormContextType;
@@ -112,7 +113,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
   const { id: fieldName } = ooui;
   const itemsToShow = items.filter(
     (item) =>
-      (item.values || item.treeValues) && item.operation !== "pendingRemove",
+      (item.values || item.treeValues) && item.operation !== "pendingRemove"
   );
   const previousCurrentView = useRef<ViewType>();
 
@@ -141,7 +142,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     parseDomain();
   }, [domain]);
 
-  const triggerChange = (changedValue: One2manyItem[]) => {
+  const triggerChange = (changedValue: Array<One2manyItem>) => {
     onChange?.({
       fields: views.get("form")?.fields || views.get("tree")?.fields,
       items: filterDuplicateItems(changedValue),
@@ -211,7 +212,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
         transformDomainForChildWidget({
           domain,
           widgetFieldName: fieldName,
-        }),
+        })
       );
     }
   }
@@ -383,7 +384,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
         triggerChange(updatedItems);
       } else {
         triggerChange(
-          items.filter((item) => item.id !== itemsToShow[itemIndex].id!),
+          items.filter((item) => item.id !== itemsToShow[itemIndex].id!)
         );
       }
     } catch (err) {
@@ -437,7 +438,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     id: number | undefined,
     _: any,
     values: any,
-    x2manyPendingLink: boolean = false,
+    x2manyPendingLink: boolean = false
   ) => {
     let updatedItems: One2manyItem[];
 
@@ -497,7 +498,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
   const onSearchModalSelectValue = async (ids: number[]) => {
     setIsLoading(true);
 
-    const updatedItems = items;
+    let updatedItems = items;
     const filteredIds = ids.filter((id) => {
       return !items.find((item) => item.id === id);
     });
@@ -670,7 +671,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
       <One2manyTopBar
         mode={currentView}
         title={getTitle()}
-        readOnly={readOnly}
+        readOnly={readOnly || false}
         isMany2Many={isMany2many}
         formHasChanges={formHasChanges}
         totalItems={itemsToShow.length}

package/src/widgets/containers/Notebook.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Tabs } from "antd";
 import iconMapper from "@/helpers/iconMapper";
+const { TabPane } = Tabs;
 
 import { Notebook as NotebookOoui, Group as GroupOoui } from "@gisce/ooui";
 import { Group } from "@/index";
-const { TabPane } = Tabs;
 
 type Props = {
   ooui: NotebookOoui;
@@ -29,14 +29,7 @@ function Notebook(props: Props): React.ReactElement {
         .filter((page: any) => !page.invisible)
         .map((page: any) => {
           return (
-            <TabPane
-              tab={
-                <>
-                  {getPageIcon(page.icon)} {page.label}
-                </>
-              }
-              key={page.label}
-            >
+            <TabPane tab={<>{getPageIcon(page.icon)}  {page.label}</>} key={page.label}>
               <Group
                 ooui={page as GroupOoui}
                 showLabel={false}

package/src/widgets/custom/ButtonGroup.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from "react";
 import Field from "@/common/Field";
-import { DownOutlined, LoadingOutlined } from "@ant-design/icons";
+import { DownOutlined } from "@ant-design/icons";
 import { Dropdown, Menu } from "antd";
 import { Button } from "@/widgets/base/Button";
 import {
@@ -10,6 +10,7 @@ import {
 } from "@gisce/ooui";
 import showConfirmDialog from "@/ui/ConfirmDialog";
 import { FormContext, FormContextType } from "@/context/FormContext";
+import { LoadingOutlined } from "@ant-design/icons";
 import iconMapper from "@/helpers/iconMapper";
 import { WidgetProps } from "@/types";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
@@ -20,8 +21,8 @@ type ButtonGroupProps = {
 
 type ItemsProps = {
   ooui: ButtonOoui[];
-  executeButtonAction: any;
-  lang: string;
+  executeButtonAction: any,
+  lang: string
 };
 
 export const ButtonGroup = (props: ButtonGroupProps) => {
@@ -85,23 +86,19 @@ export const ButtonGroup = (props: ButtonGroupProps) => {
           onClick={onClick}
           icon={<DownOutlined />}
           type={primary ? "primary" : undefined}
-          // danger={danger ? true : undefined} This works but typescript
+          //danger={danger ? true : undefined} This works but typescript
           // doesn't accept
-          overlay={
-            <Items
-              ooui={secondaryButtons}
-              executeButtonAction={executeButtonAction}
-              lang={lang}
-            />
-          }
+          overlay={<Items ooui={secondaryButtons} executeButtonAction={executeButtonAction} lang={lang} /> }
         >
           {getButtonIcon()}
           {caption}
         </Dropdown.Button>
       </Field>
     );
-  } else if (defaultButton) {
-    return <Button ooui={defaultButton} />;
+  }  else if (defaultButton) {
+    return (
+      <Button ooui={defaultButton} />
+    )
   }
 };
 

package/src/widgets/custom/CodeEditor.tsx

@@ -17,16 +17,12 @@ export const CodeEditor = (props: CodeEditorProps) => {
   const { elementHasLostFocus } = formContext || {};
 
   const onMount = (editor: any) => {
-    editor.onDidBlurEditorWidget(elementHasLostFocus);
-  };
+    editor.onDidBlurEditorWidget(elementHasLostFocus)
+  }
 
   return (
     <Field {...props}>
-      <Editor
-        defaultLanguage={lang || ""}
-        height={height || 300}
-        onMount={onMount}
-      />
+      <Editor defaultLanguage={lang ? lang : ''} height={height ? height : 300} onMount={onMount}/>
     </Field>
   );
 };

package/src/widgets/custom/Comments.tsx

@@ -1,76 +1,72 @@
-import React, { useContext } from "react";
+import React, {useContext} from "react";
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
-import {
-  Card,
-  Space,
-  Typography,
-  Avatar,
-  Tag,
-  Timeline,
-  TimelineItemProps,
-} from "antd";
+import {Card, Space, Typography, Avatar, Tag, Timeline, TimelineItemProps} from "antd"
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 
+const { Meta } = Card;
+const { Text} = Typography;
+
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import md5 from "md5";
 
-const { Meta } = Card;
-const { Text } = Typography;
 
 dayjs.extend(relativeTime);
 
 type GravatarProps = {
-  email: string;
-  size?: number;
-  theme: string;
-};
+  email: string,
+  size?: number,
+  theme: string,
+}
 
 type CommentDataType = {
-  id: number;
-  isSender: boolean;
-  isAuthor: boolean;
-  text: string;
-  email: string;
-  date: string;
-  author: string;
-};
+  id: number,
+  isSender: boolean,
+  isAuthor: boolean,
+  text: string,
+  email: string,
+  date: string,
+  author: string,
+}
 
 type CommentProps = {
-  data: CommentDataType;
-  style?: any;
-};
+  data: CommentDataType,
+  style?: any,
+}
 
 type CommentsTypeProps = {
-  data: CommentDataType[];
-};
+  data: CommentDataType[],
+}
 
 type CommentsTimelineProps = {
-  value?: EventsType[];
-};
+  value?: EventsType[],
+}
+
 
 type EventActionType = {
-  date: string;
-  action: string;
-};
+  date: string,
+  action: string,
+}
 
 export type EventsType = {
-  type: "action" | "comment";
-  event: EventActionType | CommentDataType;
-};
+  type: "action" | "comment",
+  event: EventActionType | CommentDataType
+
+}
 
-const Gravatar = ({ email, size = 40, theme = "" }: GravatarProps) => {
+const Gravatar = ({ email, size = 40, theme = '' } : GravatarProps) => {
   // Genera el enlace de Gravatar utilizando el email
-  const gravatarUrl = `https://www.gravatar.com/avatar/${md5(
-    email,
-  )}?s=${size}&d=${theme}`;
+  const gravatarUrl = `https://www.gravatar.com/avatar/${md5(email)}?s=${size}&d=${theme}`;
 
-  return <Avatar src={gravatarUrl} size={size} />;
+  return (
+    <Avatar src={gravatarUrl} size={size} />
+  );
 };
 
-function TextWithNewlines({ text }: { text: string }) {
-  const textParts = text.split("\n");
+
+function TextWithNewlines({ text }:{text: string}) {
+  const textParts = text.split('\n');
 
   return (
     <div>
@@ -85,61 +81,59 @@ function TextWithNewlines({ text }: { text: string }) {
 }
 
 export const Comment = (props: CommentProps) => {
-  const { data, style } = props;
+  const {data, style} = props;
   const { t } = useContext(LocaleContext) as LocaleContextType;
   return (
-    <Card key={data.id} style={{ ...style, ...{ textAlign: "start" } }}>
-      <Meta
-        avatar={<Gravatar email={data.email} theme="mp" />}
-        title={data.author}
-        description={
-          <Space direction="horizontal">
-            <span title={data.date}>{dayjs(data.date).fromNow()}</span>
-            {data.isAuthor && <Tag color="blue">{t("author")}</Tag>}
-          </Space>
-        }
-        style={{ marginBottom: "5px" }}
-      />
+    <Card key={data.id} style={{...style, ...{textAlign: 'start'}}}>
+      <Meta avatar={<Gravatar email={data.email} theme='mp'/>}
+            title={data.author}
+            description={(
+              <Space direction="horizontal">
+                <span title={data.date}>{dayjs(data.date).fromNow()}</span>
+                {data.isAuthor && <Tag color="blue">{t('author')}</Tag>}
+              </Space>
+            )} style={{marginBottom: '5px'}}/>
       <Text>
         <TextWithNewlines text={data.text} />
       </Text>
     </Card>
-  );
-};
+  )
+}
 
 export const Comments = (props: CommentsTypeProps) => {
   const { data = [] } = props;
   const comments = data.map((c) => {
-    const style = { float: c.isSender ? "right" : "left", width: "60%" };
-    return <Comment data={c} style={style} />;
-  });
+      const style = {float: c.isSender ? 'right' : 'left', width: '60%'};
+      return <Comment data={c} style={style}/>
+    });
   return (
     <div>
-      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
+      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
         {comments}
       </Space>
     </div>
-  );
-};
+  )
+}
+
 
 export const CommentsTimeline = (props: CommentsTimelineProps) => {
   const { value } = props;
-  const items = (value || []).map((i) => {
-    if (i.type === "action") {
+  const items = (value || []).map(i => {
+    if (i.type === 'action') {
       return {
-        children: `${i.event.date} - ${(i.event as EventActionType).action}`,
-      };
+        children: `${i.event.date} - ${(i.event as EventActionType).action}`
+      }
     } else if (i.type === "comment") {
       return {
-        color: "gray",
-        position: (i.event as CommentDataType).isSender ? "left" : "right",
+        color: 'gray',
+        position: (i.event as CommentDataType).isSender ? 'left' : 'right',
         label: i.event.date,
         children: <Comment data={i.event as CommentDataType} />,
-      };
+      }
     }
-  });
-  return <Timeline mode="alternate" items={items as TimelineItemProps[]} />;
-};
+  })
+  return <Timeline mode="alternate" items={items as TimelineItemProps[]} />
+}
 
 export const CommentsTimelineField = (props: WidgetProps) => {
   return (
@@ -147,4 +141,4 @@ export const CommentsTimelineField = (props: WidgetProps) => {
       <CommentsTimeline />
     </Field>
   );
-};
+}

package/src/widgets/custom/Indicator.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Tooltip, theme, Statistic, Card } from "antd";
+import { Tooltip, theme } from "antd";
+import { Statistic, Card } from "antd";
 import { Indicator as IndicatorOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
 import Field from "@/common/Field";

package/src/widgets/custom/MultiCheckbox.tsx

@@ -46,7 +46,7 @@ export const MultiCheckboxInput = (props: MultiCheckboxInputProps) => {
     fetchOptions();
   }, [items]);
 
-  const triggerChange = (changedValue: One2manyItem[]) => {
+  const triggerChange = (changedValue: Array<One2manyItem>) => {
     onChange?.({
       items: changedValue,
     });
@@ -70,7 +70,7 @@ export const MultiCheckboxInput = (props: MultiCheckboxInputProps) => {
     try {
       const optionsRead = await ConnectionProvider.getHandler().search({
         model: relation,
-        params,
+        params: params,
         fields: [field],
         context: { ...getContext?.(), ...context },
       });

package/src/widgets/custom/Tag.tsx

@@ -1,20 +1,20 @@
 import React from "react";
 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 { 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 (
     <Field {...props}>
-      <TagInput {...props} />
+      <TagInput {...props}/>
     </Field>
   );
 };
 
 export const TagInput = (props: any) => {
-  const { ooui, value } = props;
+  const {ooui, value} = props;
   let formattedValue = value;
   let colorValue = value;
   if (ooui.selectionValues.size) {
@@ -24,30 +24,26 @@ export const TagInput = (props: any) => {
     formattedValue = value[1];
   }
   if (!value) {
-    return null;
+    return null
   }
-  const color =
-    ooui.colors === "auto"
-      ? colorFromString(colorValue)
-      : ooui.colors[colorValue] || colorFromString(colorValue);
-  return <CustomTag color={color}>{formattedValue}</CustomTag>;
-};
+  const color = ooui.colors === "auto" ? colorFromString(colorValue) : ooui.colors[colorValue] || colorFromString(colorValue);
+  return (
+    <CustomTag color={color}>{formattedValue}</CustomTag>
+  );
+}
+
 
 export const CustomTag = (props: TagProps) => {
   let { color } = props;
-  let style = {};
+  let style = {}
   if (!isPresetStatusColor(props.color) && !isPresetColor(props.color)) {
     style = {
-      color,
+      color: color,
       borderColor: color,
       borderStyle: "solid",
       borderWidth: "1px",
-    };
+    }
     color = `${color}20`;
   }
-  return (
-    <AntdTag {...props} style={style} color={color}>
-      {props.children}
-    </AntdTag>
-  );
-};
+  return <AntdTag {...props} style={style} color={color}>{props.children}</AntdTag>
+}

package/src/widgets/custom/Tags.tsx

@@ -48,7 +48,7 @@ export const TagsInput = (props: TagsInputProps) => {
     fetchOptions();
   }, [items]);
 
-  const triggerChange = (changedValue: One2manyItem[]) => {
+  const triggerChange = (changedValue: Array<One2manyItem>) => {
     onChange?.({
       items: changedValue,
     });
@@ -77,7 +77,7 @@ export const TagsInput = (props: TagsInputProps) => {
 
       const optionsRead = await ConnectionProvider.getHandler().search({
         model: relation,
-        params,
+        params: params,
         fields: [field],
         context: { ...getContext?.(), ...context },
       });
@@ -134,7 +134,7 @@ export const TagsInput = (props: TagsInputProps) => {
         onMouseDown={onPreventMouseDown}
         closable={closable}
         onClose={onClose}
-        closeIcon={<span style={{ color }}>X</span>}
+        closeIcon={<span style={{color}}>X</span>}
       >
         {label}
       </CustomTag>

package/src/widgets/custom/Timeline.tsx

@@ -94,7 +94,7 @@ export const TimelineInput = (props: TimelineInputProps) => {
     fetchData();
   }, [items]);
 
-  const triggerChange = (changedValue: One2manyItem[]) => {
+  const triggerChange = (changedValue: Array<One2manyItem>) => {
     onChange?.({
       items: changedValue,
     });
@@ -108,7 +108,7 @@ export const TimelineInput = (props: TimelineInputProps) => {
       const [itemsWithValues] = await readObjectValues({
         treeView: {
           fields: views.get("tree").fields,
-          arch: views.get("tree").arch,
+          arch: views.get("tree").arch
         },
         formView: {
           fields: views.get("form").fields,
@@ -147,8 +147,8 @@ export const TimelineInput = (props: TimelineInputProps) => {
                   onClick={() => {
                     setModalItem(
                       itemsToShow.find(
-                        (searchItem) => item.id === searchItem.id,
-                      ),
+                        (searchItem) => item.id === searchItem.id
+                      )
                     );
                     setShowFormModal(true);
                   }}
@@ -161,8 +161,8 @@ export const TimelineInput = (props: TimelineInputProps) => {
                   onClick={() => {
                     setModalItem(
                       itemsToShow.find(
-                        (searchItem) => item.id === searchItem.id,
-                      ),
+                        (searchItem) => item.id === searchItem.id
+                      )
                     );
                     setShowFormModal(true);
                   }}

package/src/widgets/views/Dashboard/DashboardTree.tsx

@@ -48,7 +48,7 @@ function DashboardTree(props: Props) {
   const [offset, setOffset] = useState<number>(0);
   const limitRef = useRef<number>(DEFAULT_SEARCH_LIMIT);
 
-  const paramsRef = useRef<any[]>([]);
+  const paramsRef = useRef<Array<any>>([]);
 
   const [totalItems, setTotalItems] = useState<number>(0);
   const [results, setResults] = useState<any>([]);
@@ -89,7 +89,7 @@ function DashboardTree(props: Props) {
 
     const resultsSorted = sortResults({
       resultsToSort: results,
-      sorter,
+      sorter: sorter,
       fields: { ...treeView!.fields, ...formView!.fields },
     });
     setTableRefreshing(false);

package/src/widgets/views/DashboardGrid/DashboardGrid.types.ts

@@ -1,4 +1,4 @@
 export type DashboardGridProps = {
-  children?: Array<React.ReactElement<any>> | any;
+  children?: React.ReactElement<any>[] | any;
   onPositionItemsChanged?: (items: any[]) => void;
 };