@gisce/react-ooui 2.0.0-alpha.61 → 2.0.0-alpha.63

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,52 +0,0 @@
-import React from "react";
-import { Tabs } from "antd";
-import iconMapper from "@/helpers/iconMapper";
-
-import { Notebook as NotebookOoui, Group as GroupOoui } from "@gisce/ooui";
-import { Group } from "@/index";
-const { TabPane } = Tabs;
-
-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,40 +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,169 +0,0 @@
-import React, { useContext, useState } from "react";
-import Field from "@/common/Field";
-import { DownOutlined, LoadingOutlined } 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 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,32 +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 || ""}
-        height={height || 300}
-        onMount={onMount}
-      />
-    </Field>
-  );
-};