@gisce/react-ooui 1.5.1 → 2.0.0-alpha.1

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

@@ -5,17 +5,16 @@ 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";
@@ -36,7 +35,7 @@ import { transformPlainMany2Ones } from "@/helpers/formHelper";
 
 type One2manyValue = {
   fields?: any;
-  items: Array<One2manyItem>;
+  items: One2manyItem[];
 };
 
 const ViewObjects = {
@@ -75,13 +74,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;
@@ -113,7 +112,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>();
 
@@ -142,7 +141,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     parseDomain();
   }, [domain]);
 
-  const triggerChange = (changedValue: Array<One2manyItem>) => {
+  const triggerChange = (changedValue: One2manyItem[]) => {
     onChange?.({
       fields: views.get("form")?.fields || views.get("tree")?.fields,
       items: filterDuplicateItems(changedValue),
@@ -212,7 +211,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
         transformDomainForChildWidget({
           domain,
           widgetFieldName: fieldName,
-        })
+        }),
       );
     }
   }
@@ -384,7 +383,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) {
@@ -438,7 +437,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     id: number | undefined,
     _: any,
     values: any,
-    x2manyPendingLink: boolean = false
+    x2manyPendingLink: boolean = false,
   ) => {
     let updatedItems: One2manyItem[];
 
@@ -498,7 +497,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
   const onSearchModalSelectValue = async (ids: number[]) => {
     setIsLoading(true);
 
-    let updatedItems = items;
+    const updatedItems = items;
     const filteredIds = ids.filter((id) => {
       return !items.find((item) => item.id === id);
     });

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,7 +29,14 @@ 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 } from "@ant-design/icons";
+import { DownOutlined, LoadingOutlined } from "@ant-design/icons";
 import { Dropdown, Menu } from "antd";
 import { Button } from "@/widgets/base/Button";
 import {
@@ -10,7 +10,6 @@ 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";
@@ -21,8 +20,8 @@ type ButtonGroupProps = {
 
 type ItemsProps = {
   ooui: ButtonOoui[];
-  executeButtonAction: any,
-  lang: string
+  executeButtonAction: any;
+  lang: string;
 };
 
 export const ButtonGroup = (props: ButtonGroupProps) => {
@@ -86,19 +85,23 @@ 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,12 +17,16 @@ export const CodeEditor = (props: CodeEditorProps) => {
   const { elementHasLostFocus } = formContext || {};
 
   const onMount = (editor: any) => {
-    editor.onDidBlurEditorWidget(elementHasLostFocus)
-  }
+    editor.onDidBlurEditorWidget(elementHasLostFocus);
+  };
 
   return (
     <Field {...props}>
-      <Editor defaultLanguage={lang ? lang : ''} height={height ? height : 300} onMount={onMount}/>
+      <Editor
+        defaultLanguage={lang || ""}
+        height={height || 300}
+        onMount={onMount}
+      />
     </Field>
   );
 };

package/src/widgets/custom/Comments.tsx

@@ -1,72 +1,76 @@
-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>
@@ -81,59 +85,61 @@ 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 (
@@ -141,4 +147,4 @@ export const CommentsTimelineField = (props: WidgetProps) => {
       <CommentsTimeline />
     </Field>
   );
-}
+};

package/src/widgets/custom/Indicator.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { Tooltip, theme } from "antd";
-import { Statistic, Card } from "antd";
+import { Tooltip, theme, 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: Array<One2manyItem>) => {
+  const triggerChange = (changedValue: 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,26 +24,30 @@ 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: Array<One2manyItem>) => {
+  const triggerChange = (changedValue: 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: Array<One2manyItem>) => {
+  const triggerChange = (changedValue: 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<Array<any>>([]);
+  const paramsRef = useRef<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?: React.ReactElement<any>[] | any;
+  children?: Array<React.ReactElement<any>> | any;
   onPositionItemsChanged?: (items: any[]) => void;
 };