@gisce/react-ooui 2.0.0-rc.8 → 2.0.0

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

@@ -1,158 +0,0 @@
-import React from "react";
-import ButtonWithTooltip from "@/common/ButtonWithTooltip";
-
-import {
-  FileAddOutlined,
-  DeleteOutlined,
-  LeftOutlined,
-  RightOutlined,
-  AlignLeftOutlined,
-  SearchOutlined,
-  ApiOutlined,
-} from "@ant-design/icons";
-import { ViewType } from "@/types";
-import { theme } from "antd";
-const { useToken } = theme;
-
-type One2manyTopBarProps = {
-  title: string;
-  mode: ViewType;
-  isMany2Many: boolean;
-  readOnly: boolean;
-  formHasChanges: boolean;
-  onToggleViewMode: () => void;
-  onCreateItem: () => void;
-  onDelete: () => void;
-  totalItems: number;
-  currentItemIndex: number;
-  onPreviousItem: () => void;
-  onNextItem: () => void;
-  onSearchItem: () => void;
-  selectedRowKeys: string[];
-  showToggleButton: boolean;
-  showCreateButton: boolean;
-};
-
-export const One2manyTopBar = (props: One2manyTopBarProps) => {
-  const {
-    title: titleString,
-    readOnly,
-    onCreateItem,
-    onToggleViewMode,
-    mode,
-    onDelete,
-    totalItems,
-    currentItemIndex,
-    onPreviousItem,
-    onNextItem,
-    isMany2Many,
-    onSearchItem,
-    selectedRowKeys,
-    showCreateButton,
-    showToggleButton,
-  } = props;
-  const { token } = useToken();
-
-  function separator() {
-    return <div className="inline-block w-3" />;
-  }
-
-  function title() {
-    return (
-      <div
-        className="flex flex-grow h-8 text-white"
-        style={{
-          borderRadius: token.borderRadius,
-          backgroundColor: token.colorPrimaryActive,
-        }}
-      >
-        <div className="flex flex-col items-center justify-center h-full">
-          <span className="pl-2 font-bold">{titleString}</span>
-        </div>
-      </div>
-    );
-  }
-
-  function deleteButton() {
-    return (
-      <ButtonWithTooltip
-        tooltip={isMany2Many ? "Unlink" : "Delete"}
-        icon={isMany2Many ? <ApiOutlined /> : <DeleteOutlined />}
-        onClick={onDelete}
-        disabled={
-          totalItems === 0 ||
-          readOnly ||
-          (mode !== "form" && selectedRowKeys.length === 0)
-        }
-      />
-    );
-  }
-
-  function index() {
-    let itemToShow = "_";
-    if (totalItems === 0) {
-      itemToShow = "_";
-    } else {
-      itemToShow = (currentItemIndex + 1).toString();
-    }
-    return (
-      <span className="pl-1 pr-1">
-        ({itemToShow}/{totalItems})
-      </span>
-    );
-  }
-
-  function itemBrowser() {
-    return (
-      <>
-        {separator()}
-        <ButtonWithTooltip
-          tooltip={"Previous item"}
-          icon={<LeftOutlined />}
-          onClick={onPreviousItem}
-        />
-        {index()}
-        <ButtonWithTooltip
-          tooltip={"Next item"}
-          icon={<RightOutlined />}
-          onClick={onNextItem}
-        />
-      </>
-    );
-  }
-
-  return (
-    <div className="flex mb-2">
-      {title()}
-      <div className="flex-none h-8 pl-2">
-        {mode !== "graph" && showCreateButton && (
-          <ButtonWithTooltip
-            tooltip={"Create new item"}
-            icon={<FileAddOutlined />}
-            disabled={readOnly}
-            onClick={onCreateItem}
-          />
-        )}
-        {isMany2Many && showCreateButton && (
-          <ButtonWithTooltip
-            tooltip={"Search existing item"}
-            icon={<SearchOutlined />}
-            disabled={readOnly}
-            onClick={onSearchItem}
-          />
-        )}
-        {mode !== "graph" && separator()}
-        {mode !== "graph" && deleteButton()}
-        {mode === "form" && itemBrowser()}
-        {separator()}
-        {showToggleButton && (
-          <ButtonWithTooltip
-            tooltip={"Toggle view mode"}
-            icon={<AlignLeftOutlined />}
-            onClick={onToggleViewMode}
-          />
-        )}
-      </div>
-    </div>
-  );
-};

package/src/widgets/containers/Container.tsx

@@ -1,99 +0,0 @@
-import React from "react";
-import { Container as ContainerOoui, Widget, Label } from "@gisce/ooui";
-import { createReactWidget } from "@/widgets/WidgetFactory";
-
-import {
-  getTemplateColumns,
-  fillRowWithEmptiesToFit,
-  getSpanStyleForItem,
-  expandWidgetsIfNeeded,
-  getMaxColspanForRows,
-  getSingleRowTemplateColumns,
-} from "@/helpers/containerHelper";
-
-type Props = {
-  container: ContainerOoui;
-  responsiveBehaviour: boolean;
-};
-
-const Container = (props: Props): React.ReactElement => {
-  const { container, responsiveBehaviour } = props;
-  const { rows } = container;
-  let { columns } = container;
-
-  // We check for the largest colspan for each row
-  // And if the value is smaller than the columns value
-  // We adjust the columns value
-  const maxColspanForRows = getMaxColspanForRows(rows);
-  if (maxColspanForRows < columns) {
-    columns = maxColspanForRows;
-  }
-
-  let fieldInRows = false;
-  let firstRow: Widget[] = [];
-
-  const content = rows.map((row: Widget[], i) => {
-    const rowWithoutInvisibleFields = row.filter((widget) => {
-      return !widget.invisible;
-    });
-
-    const rowWithExpandedItems = expandWidgetsIfNeeded({
-      row: rowWithoutInvisibleFields,
-      numberOfColumns: columns,
-    });
-
-    let rowWithEmptiesToFit = rowWithExpandedItems;
-    if (
-      i === 0 ||
-      !(row.length === 1 && row.some((widget) => widget.type === "group"))
-    ) {
-      rowWithEmptiesToFit = fillRowWithEmptiesToFit({
-        row: rowWithExpandedItems,
-        numberOfColumns: columns,
-        mustFillWithEmpties: responsiveBehaviour,
-      });
-
-      firstRow = firstRow.concat(rowWithEmptiesToFit);
-    }
-
-    return rowWithEmptiesToFit.map((item: Widget) => {
-      // We check if we have any label+field inside the container.
-      // In this scenario, we must format the grid accordingly
-      // Otherwise, the grid will divide uniformly
-      if (item instanceof Label && (item as Label).fieldForLabel) {
-        fieldInRows = true;
-      }
-
-      return (
-        <div
-          key={item.key}
-          style={{
-            ...getSpanStyleForItem({ item, responsiveBehaviour }),
-            minWidth: 0,
-          }}
-        >
-          {createReactWidget({
-            ooui: item,
-            responsiveBehaviour,
-          })}
-        </div>
-      );
-    });
-  });
-
-  const templateColumns =
-    rows.length === 1
-      ? getSingleRowTemplateColumns(firstRow, columns)
-      : getTemplateColumns(columns, fieldInRows);
-  const gridStyle = {
-    display: "grid",
-    gridTemplateColumns: responsiveBehaviour ? "auto" : templateColumns,
-    gap: "1rem",
-    minHeight: 0,
-    minWidth: 0,
-  };
-
-  return <div style={gridStyle}>{content}</div>;
-};
-
-export default Container;

package/src/widgets/containers/Group.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-import { Group as GroupOoui } from "@gisce/ooui";
-import Container from "./Container";
-import { FieldSet } from "@gisce/react-formiga-components";
-import { Space } from "antd";
-import iconMapper from "@/helpers/iconMapper";
-
-type Props = {
-  ooui: GroupOoui;
-  showLabel?: boolean;
-  responsiveBehaviour: boolean;
-};
-
-function Group(props: Props): React.ReactElement {
-  const { ooui, showLabel = true, responsiveBehaviour } = props;
-  const icon: React.ElementType | undefined = iconMapper(ooui.icon || "");
-
-  return (
-    <>
-      {(ooui.label || icon) && showLabel ? (
-        <FieldSet label={ooui.label} icon={icon}>
-          <Container
-            container={ooui!.container}
-            responsiveBehaviour={responsiveBehaviour}
-          />
-        </FieldSet>
-      ) : (
-        <Container
-          container={ooui!.container}
-          responsiveBehaviour={responsiveBehaviour}
-        />
-      )}
-    </>
-  );
-}
-
-export default Group;

package/src/widgets/containers/Notebook.tsx

@@ -1,45 +0,0 @@
-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";
-
-type Props = {
-  ooui: NotebookOoui;
-  responsiveBehaviour: boolean;
-};
-
-function Notebook(props: Props): React.ReactElement {
-  const { ooui, responsiveBehaviour } = props;
-  const tabs = ooui.pages;
-
-  function getPageIcon(icon: string) {
-    if (icon) {
-      const Icon: React.ElementType = iconMapper(icon) as any;
-      return Icon && <Icon />;
-    }
-    return undefined;
-  }
-
-  return (
-    <Tabs defaultActiveKey="1" tabPosition={ooui.tabPosition}>
-      {tabs
-        .filter((page: any) => !page.invisible)
-        .map((page: any) => {
-          return (
-            <TabPane tab={<>{getPageIcon(page.icon)}  {page.label}</>} key={page.label}>
-              <Group
-                ooui={page as GroupOoui}
-                showLabel={false}
-                responsiveBehaviour={responsiveBehaviour}
-              />
-            </TabPane>
-          );
-        })}
-    </Tabs>
-  );
-}
-
-export default Notebook;

package/src/widgets/custom/Avatar.tsx

@@ -1,32 +0,0 @@
-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 => {
-  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/ButtonGroup.tsx

@@ -1,166 +0,0 @@
-import React, { useContext, useState } from "react";
-import Field from "@/common/Field";
-import { DownOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
-import { Button } from "@/widgets/base/Button";
-import {
-  ButtonGroup as ButtonGroupOoui,
-  Button as ButtonOoui,
-  Field as FieldOoui,
-} 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";
-
-type ButtonGroupProps = {
-  ooui: ButtonGroupOoui;
-};
-
-type ItemsProps = {
-  ooui: ButtonOoui[];
-  executeButtonAction: any,
-  lang: string
-};
-
-export const ButtonGroup = (props: ButtonGroupProps) => {
-  const { ooui } = props;
-  const { defaultButton, secondaryButtons } = ooui;
-  const {
-    id,
-    caption,
-    activated,
-    buttonType,
-    confirmMessage,
-    icon,
-    primary,
-    danger,
-    context,
-    readOnly,
-  } = defaultButton || {};
-  const formContext = useContext(FormContext) as FormContextType;
-  const { executeButtonAction } = formContext || {};
-  const [isRunning, setIsRunning] = useState<boolean>(false);
-  const { lang } = useContext(LocaleContext) as LocaleContextType;
-
-  function getButtonIcon() {
-    if (isRunning) return <LoadingOutlined />;
-    if (icon) {
-      const Icon: React.ElementType = iconMapper(icon) as any;
-      return Icon && <Icon />;
-    }
-    return undefined;
-  }
-
-  async function onClick_confirm() {
-    if (buttonType && id) {
-      setIsRunning(true);
-      await executeButtonAction({ type: buttonType, action: id, context });
-      setIsRunning(false);
-    }
-  }
-
-  function onClick() {
-    if (confirmMessage) {
-      showConfirmDialog({
-        confirmMessage,
-        lang,
-        onOk: () => {
-          onClick_confirm();
-        },
-      });
-      return;
-    }
-
-    onClick_confirm();
-  }
-  if (ooui.buttons.length === 0) {
-    return null;
-  } else if (ooui.buttons.length > 1) {
-    return (
-      <Field ooui={new FieldOoui({ ...{ ooui } })}>
-        <Dropdown.Button
-          disabled={!activated || readOnly}
-          onClick={onClick}
-          icon={<DownOutlined />}
-          type={primary ? "primary" : undefined}
-          //danger={danger ? true : undefined} This works but typescript
-          // doesn't accept
-          overlay={<Items ooui={secondaryButtons} executeButtonAction={executeButtonAction} lang={lang} /> }
-        >
-          {getButtonIcon()}
-          {caption}
-        </Dropdown.Button>
-      </Field>
-    );
-  }  else if (defaultButton) {
-    return (
-      <Button ooui={defaultButton} />
-    )
-  }
-};
-
-const Items = (props: ItemsProps) => {
-  const { ooui, executeButtonAction, lang } = props;
-  if (!ooui) {
-    return null;
-  }
-  const items = ooui.map((button) => {
-    const {
-      id,
-      caption,
-      activated,
-      buttonType,
-      confirmMessage,
-      icon,
-      context,
-      readOnly,
-      danger,
-    } = button;
-    const [isRunning, setIsRunning] = useState<boolean>(false);
-
-    async function onClick_confirm() {
-      setIsRunning(true);
-      await executeButtonAction({ type: buttonType, action: id, context });
-      setIsRunning(false);
-    }
-
-    function onClick() {
-      if (confirmMessage) {
-        showConfirmDialog({
-          confirmMessage,
-          lang,
-          onOk: () => {
-            onClick_confirm();
-          },
-        });
-        return;
-      }
-
-      onClick_confirm();
-    }
-
-    function getButtonIcon() {
-      if (isRunning) return <LoadingOutlined />;
-      if (icon) {
-        const Icon: React.ElementType = iconMapper(icon) as any;
-        return Icon && <Icon />;
-      }
-      return undefined;
-    }
-
-    return (
-      <Menu.Item
-        disabled={!activated || readOnly}
-        onClick={onClick}
-        icon={getButtonIcon()}
-        danger={danger}
-      >
-        {caption}
-      </Menu.Item>
-    );
-  });
-  return <Menu>{items}</Menu>;
-};

package/src/widgets/custom/CodeEditor.tsx

@@ -1,28 +0,0 @@
-import React, { useContext } from "react";
-import Editor from "@monaco-editor/react";
-import { FormContext, FormContextType } from "@/context/FormContext";
-import { CodeEditor as CodeEditorOoui } from "@gisce/ooui";
-
-import Field from "@/common/Field";
-import { WidgetProps } from "@/types";
-
-type CodeEditorProps = WidgetProps & {
-  ooui: CodeEditorOoui;
-};
-
-export const CodeEditor = (props: CodeEditorProps) => {
-  const { ooui } = props;
-  const { lang, height } = ooui;
-  const formContext = useContext(FormContext) as FormContextType;
-  const { elementHasLostFocus } = formContext || {};
-
-  const onMount = (editor: any) => {
-    editor.onDidBlurEditorWidget(elementHasLostFocus)
-  }
-
-  return (
-    <Field {...props}>
-      <Editor defaultLanguage={lang ? lang : ''} height={height ? height : 300} onMount={onMount}/>
-    </Field>
-  );
-};

package/src/widgets/custom/Comments.tsx

@@ -1,144 +0,0 @@
-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 { 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";
-
-
-dayjs.extend(relativeTime);
-
-type GravatarProps = {
-  email: string,
-  size?: number,
-  theme: string,
-}
-
-type CommentDataType = {
-  id: number,
-  isSender: boolean,
-  isAuthor: boolean,
-  text: string,
-  email: string,
-  date: string,
-  author: string,
-}
-
-type CommentProps = {
-  data: CommentDataType,
-  style?: any,
-}
-
-type CommentsTypeProps = {
-  data: CommentDataType[],
-}
-
-type CommentsTimelineProps = {
-  value?: EventsType[],
-}
-
-
-type EventActionType = {
-  date: string,
-  action: string,
-}
-
-export type EventsType = {
-  type: "action" | "comment",
-  event: EventActionType | CommentDataType
-
-}
-
-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}`;
-
-  return (
-    <Avatar src={gravatarUrl} size={size} />
-  );
-};
-
-
-function TextWithNewlines({ text }:{text: string}) {
-  const textParts = text.split('\n');
-
-  return (
-    <div>
-      {textParts.map((part, index) => (
-        <React.Fragment key={index}>
-          {part}
-          {index !== textParts.length - 1 && <br />}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-}
-
-export const Comment = (props: CommentProps) => {
-  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'}}/>
-      <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}/>
-    });
-  return (
-    <div>
-      <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') {
-      return {
-        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',
-        label: i.event.date,
-        children: <Comment data={i.event as CommentDataType} />,
-      }
-    }
-  })
-  return <Timeline mode="alternate" items={items as TimelineItemProps[]} />
-}
-
-export const CommentsTimelineField = (props: WidgetProps) => {
-  return (
-    <Field {...props}>
-      <CommentsTimeline />
-    </Field>
-  );
-}