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

package/src/actionbar/AttachmentsButtonWrapper.tsx

@@ -1,157 +0,0 @@
-import React, { useContext, useState } from "react";
-import {
-  DownOutlined,
-  FormOutlined,
-  DownloadOutlined,
-  LinkOutlined,
-  FileAddOutlined,
-  TableOutlined,
-} from "@ant-design/icons";
-import { Popover, Button, Row, Col, Tooltip, Spin } from "antd";
-import {
-  LocaleContext,
-  LocaleContextType,
-  tForLang,
-} from "@/context/LocaleContext";
-
-export type Attachment = {
-  id: number;
-  name: string;
-  datas: string;
-  link: string;
-};
-
-export type AttachmentsButtonWrapperProps = {
-  attachments: Attachment[] | undefined;
-  numberOfAttachments: number;
-  disabled: boolean;
-  loading: boolean;
-  onAddNewAttachment: () => void;
-  onListAllAttachments: () => void;
-  onopenAttachmentLink: (attachment: Attachment) => void;
-  onOpenAttachmentDetail: (attachment: Attachment) => void;
-};
-
-export const AttachmentsButtonWrapper = (
-  props: AttachmentsButtonWrapperProps,
-) => {
-  const { numberOfAttachments, disabled } = props;
-  const { t, lang } = useContext(LocaleContext) as LocaleContextType;
-  const [popoverVisible, setPopoverVisible] = useState<boolean>(false);
-
-  const button = (
-    <Button disabled={disabled}>
-      <LinkOutlined />
-      {`(${numberOfAttachments})`}
-      <DownOutlined style={{ fontSize: 12 }} />
-    </Button>
-  );
-
-  if (disabled) {
-    return button;
-  }
-
-  return (
-    <Popover
-      onVisibleChange={(visible: boolean) => setPopoverVisible(visible)}
-      visible={popoverVisible}
-      placement="bottom"
-      content={Content(props, setPopoverVisible, lang)}
-      title={t("attachments")}
-      arrowContent={null}
-    >
-      {button}
-    </Popover>
-  );
-};
-
-const Content = (
-  props: AttachmentsButtonWrapperProps,
-  setPopoverVisible: (visible: boolean) => void,
-  locale: string,
-) => {
-  const {
-    attachments = [],
-    loading,
-    onAddNewAttachment,
-    onopenAttachmentLink,
-    onOpenAttachmentDetail,
-    onListAllAttachments,
-  } = props;
-  if (loading) {
-    return <Spin style={{ padding: 20 }} />;
-  }
-
-  return (
-    <>
-      <a
-        style={{ display: "block", paddingBottom: 5 }}
-        href="#"
-        onClick={() => {
-          setPopoverVisible(false);
-          onListAllAttachments();
-        }}
-      >
-        <TableOutlined /> {tForLang("listAllAttachments", locale)}
-      </a>
-      <a
-        style={{ display: "block" }}
-        href="#"
-        onClick={() => {
-          setPopoverVisible(false);
-          onAddNewAttachment();
-        }}
-      >
-        <FileAddOutlined /> {tForLang("addNewAttachment", locale)}
-      </a>
-      {attachments.length > 0 && (
-        <>
-          <li className="ant-dropdown-menu-item-divider"></li>
-          {attachments.map((attachment: any) => {
-            const Icon = attachment.link ? LinkOutlined : DownloadOutlined;
-            return (
-              <Row
-                style={{ paddingTop: 4, paddingBottom: 4 }}
-                wrap={false}
-                align="middle"
-                key={attachment.id}
-              >
-                <Col flex="auto">{attachment.name}</Col>
-                <Col flex="25px" style={{ textAlign: "center" }}>
-                  {(attachment.datas_fname || attachment.link) && (
-                    <Tooltip
-                      title={
-                        attachment.link
-                          ? tForLang("openAttachmentLink", locale)
-                          : tForLang("download", locale)
-                      }
-                    >
-                      <Icon
-                        style={{ cursor: "pointer" }}
-                        onClick={() => {
-                          setPopoverVisible(false);
-                          onopenAttachmentLink(attachment);
-                        }}
-                      />
-                    </Tooltip>
-                  )}
-                </Col>
-                <Col flex="25px" style={{ textAlign: "center" }}>
-                  <Tooltip title={tForLang("openAttachment", locale)}>
-                    <FormOutlined
-                      style={{ cursor: "pointer" }}
-                      onClick={() => {
-                        setPopoverVisible(false);
-                        onOpenAttachmentDetail(attachment);
-                      }}
-                    />
-                  </Tooltip>
-                </Col>
-              </Row>
-            );
-          })}
-        </>
-      )}
-    </>
-  );
-};

package/src/actionbar/ButtonWithBadge.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import ButtonWithTooltip, {
-  Props as ButtonWithTooltipProps,
-} from "@/common/ButtonWithTooltip";
-import { theme } from "antd";
-const { useToken } = theme;
-
-type Props = ButtonWithTooltipProps & {
-  badgeNumber?: number;
-};
-
-function ButtonWithBadge(props: Props) {
-  const { badgeNumber = 0, ...restProps } = props;
-  const { token } = useToken();
-
-  return (
-    <div style={{ position: "relative" }}>
-      {badgeNumber > 0 && (
-        <div style={{ position: "absolute", left: -10, top: -10, zIndex: 2 }}>
-          <span
-            style={{
-              display: "inline-block",
-              minWidth: "22px",
-              padding: "2px",
-              borderRadius: "50%",
-              fontSize: "12px",
-              textAlign: "center",
-              background: token.colorPrimaryHover,
-              color: token.colorPrimaryBg,
-            }}
-          >
-            {badgeNumber}
-          </span>
-        </div>
-      )}
-      <ButtonWithTooltip
-        {...restProps}
-        style={{ width: 46, zIndex: 0 }}
-      ></ButtonWithTooltip>
-    </div>
-  );
-}
-
-export default ButtonWithBadge;

package/src/actionbar/ChangeViewButton.tsx

@@ -1,137 +0,0 @@
-import React, { useContext } from "react";
-import { Menu, Dropdown, Row, Col, Button } from "antd";
-import {
-  DownOutlined,
-  TableOutlined,
-  FormOutlined,
-  CheckOutlined,
-  AreaChartOutlined,
-  CalendarOutlined,
-} from "@ant-design/icons";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import showUnsavedChangesDialog from "@/ui/UnsavedChangesDialog";
-import ButtonWithTooltip from "@/common/ButtonWithTooltip";
-import { GraphView, View } from "@/types";
-
-type Props = {
-  onChangeView: (view: View) => void;
-  currentView: View;
-  availableViews: View[];
-  disabled?: boolean;
-  formHasChanges?: boolean;
-  previousView?: View;
-};
-
-const iconsForViewTypes = {
-  tree: <TableOutlined />,
-  form: <FormOutlined />,
-  graph: <AreaChartOutlined />,
-  calendar: <CalendarOutlined />,
-};
-
-function getIconForView(view?: View) {
-  if (!view) {
-    return <FormOutlined />;
-  }
-
-  return (iconsForViewTypes as any)?.[view.type] || <FormOutlined />;
-}
-
-function ChangeViewButton(props: Props) {
-  const {
-    currentView,
-    availableViews,
-    onChangeView,
-    disabled = false,
-    formHasChanges = false,
-    previousView,
-  } = props;
-  const { t, lang } = useContext(LocaleContext) as LocaleContextType;
-
-  function getMenu() {
-    const menuItems = availableViews.map((view, idx) => {
-      return (
-        <Menu.Item key={view.view_id || idx}>
-          <Row wrap={false}>
-            <Col flex="none" style={{ paddingRight: 20 }}>
-              {getIconForView(view)}
-            </Col>
-            <Col flex="auto" style={{ paddingRight: 20 }}>
-              {view.type.charAt(0).toUpperCase() + view.type.slice(1)}
-            </Col>
-            <Col flex="none">
-              <CheckOutlined
-                style={{
-                  opacity: currentView.view_id === view.view_id ? 1 : 0,
-                }}
-              />
-            </Col>
-          </Row>
-        </Menu.Item>
-      );
-    });
-
-    return (
-      <Menu onClick={handleMenuClick}>
-        <Menu.ItemGroup title={t("viewAs")}>{menuItems}</Menu.ItemGroup>
-      </Menu>
-    );
-  }
-
-  function tryNavigate(callback: any) {
-    if (formHasChanges) {
-      showUnsavedChangesDialog({
-        lang,
-        onOk: () => {
-          callback();
-        },
-      });
-      return;
-    }
-
-    callback();
-  }
-
-  function handleMenuClick(event: any) {
-    tryNavigate(() => {
-      const selectedView = availableViews.find(
-        (view) => view.view_id === parseInt(event.key),
-      );
-      onChangeView(selectedView!);
-    });
-  }
-
-  return (
-    <div style={{ display: "flex" }}>
-      <ButtonWithTooltip
-        tooltip={previousView ? t("viewAs") + " " + t(previousView.type) : ""}
-        icon={getIconForView(previousView)}
-        style={{
-          width: 50,
-          borderTopRightRadius: 0,
-          borderBottomRightRadius: 0,
-        }}
-        onClick={() => {
-          handleMenuClick({ key: previousView?.view_id });
-        }}
-        disabled={disabled || availableViews.length === 1}
-      />
-      <Dropdown
-        overlay={getMenu()}
-        disabled={disabled || availableViews.length === 1}
-      >
-        <Button
-          style={{
-            width: 25,
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-          }}
-          icon={<DownOutlined style={{ fontSize: "0.5em" }} />}
-          onClick={(e) => e.preventDefault()}
-        ></Button>
-      </Dropdown>
-    </div>
-  );
-}
-
-export default ChangeViewButton;

package/src/actionbar/DashboardActionBar.tsx

@@ -1,63 +0,0 @@
-import React, { useContext } from "react";
-import {
-  DashboardActionContext,
-  DashboardActionContextType,
-} from "@/context/DashboardActionContext";
-import { Space } from "antd";
-import ActionButton from "./ActionButton";
-import {
-  ReloadOutlined,
-  SettingOutlined,
-  BorderOuterOutlined,
-} from "@ant-design/icons";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-
-function DashboardActionBar() {
-  const { isLoading, dashboardRef, moveItemsEnabled, setMoveItemsEnabled } =
-    useContext(DashboardActionContext) as DashboardActionContextType;
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-
-  return (
-    <Space wrap={true}>
-      <ActionButton
-        icon={
-          <BorderOuterOutlined
-            style={{ color: moveItemsEnabled ? "white" : undefined }}
-          />
-        }
-        type={moveItemsEnabled ? "primary" : "default"}
-        tooltip={t("moveDashboard")}
-        disabled={isLoading}
-        loading={false}
-        onClick={() => {
-          setMoveItemsEnabled(!moveItemsEnabled);
-        }}
-      />
-      {separator()}
-      <ActionButton
-        icon={<SettingOutlined />}
-        tooltip={t("configDashboard")}
-        disabled={isLoading}
-        loading={false}
-        onClick={() => {
-          dashboardRef?.current.configDashboard();
-        }}
-      />
-      <ActionButton
-        icon={<ReloadOutlined />}
-        tooltip={t("refresh")}
-        disabled={isLoading}
-        loading={false}
-        onClick={() => {
-          dashboardRef?.current.refresh();
-        }}
-      />
-    </Space>
-  );
-}
-
-function separator() {
-  return <div className="inline-block w-2" />;
-}
-
-export default DashboardActionBar;

package/src/actionbar/DropdownButton.tsx

@@ -1,124 +0,0 @@
-import { memo, useState, useMemo, useCallback } from "react";
-import { Menu, Dropdown, Button, Input } from "antd";
-import { DownOutlined } from "@ant-design/icons";
-
-const { Search } = Input;
-
-type Props = {
-  onItemClick: (event: any) => void;
-  items: any[];
-  tooltip: string;
-  icon: any;
-  label?: string;
-  disabled?: boolean;
-  searchable?: true | false | "auto";
-};
-
-const DropdownButton: React.FC<Props> = memo(
-  ({
-    icon,
-    tooltip,
-    items = [],
-    onItemClick,
-    label,
-    disabled = false,
-    searchable = "auto",
-  }: Props) => {
-    const [searchValue, setSearchValue] = useState<string>();
-
-    const mustShowSearch =
-      searchable === true || (searchable === "auto" && items.length > 3);
-
-    const onSearch = useCallback((value?: string) => {
-      const sanitizedValue = value?.trim();
-      if (sanitizedValue && sanitizedValue.length > 0) {
-        setSearchValue(sanitizedValue);
-        return;
-      }
-      setSearchValue(undefined);
-    }, []);
-
-    const filteredItems = useMemo(() => {
-      if (searchValue) {
-        return items
-          .map((item) => {
-            if (item.name.toLowerCase().includes(searchValue.toLowerCase())) {
-              return { ...item };
-            }
-            return { ...item, name: "no_match" };
-          })
-          .sort((a, b) => {
-            // all the items with name "no_match" have to be in the end of the array
-            if (a.name === "no_match") return 1;
-            if (b.name === "no_match") return -1;
-            return 0;
-          });
-      }
-      return items;
-    }, [items, searchValue]);
-
-    const handleMenuClick = useCallback(
-      (event: any) => {
-        const itemClicked = filteredItems.find(
-          (item: any) => item.id.toString() === event.key,
-        );
-        if (itemClicked && itemClicked.name !== "no_match")
-          onItemClick(itemClicked);
-      },
-      [onItemClick, filteredItems],
-    );
-
-    const getMenu = useMemo(() => {
-      const menuItems = filteredItems.map((item, idx) => {
-        if (item.name === "divider")
-          return <Menu.Divider key={"divider" + idx} />;
-        if (item.name === "no_match")
-          return (
-            <Menu.Item
-              key={"no_match" + idx}
-              style={{ cursor: "auto", pointerEvents: "none", opacity: 0 }}
-            >
-              {item.name}
-            </Menu.Item>
-          );
-        return <Menu.Item key={item.id}>{item.name}</Menu.Item>;
-      });
-
-      return (
-        <Menu onClick={handleMenuClick}>
-          {mustShowSearch && (
-            <div style={{ padding: 5 }}>
-              <Search
-                onChange={(e) => onSearch(e.target.value)}
-                onSearch={onSearch}
-                allowClear
-              />
-            </div>
-          )}
-          <div
-            style={{
-              width: 300,
-              maxHeight: 300,
-              overflowY: "auto",
-            }}
-          >
-            <Menu.ItemGroup title={tooltip}>{menuItems}</Menu.ItemGroup>
-          </div>
-        </Menu>
-      );
-    }, [filteredItems, handleMenuClick, mustShowSearch, onSearch, tooltip]);
-
-    return (
-      <>
-        <Dropdown overlay={getMenu} disabled={disabled || items.length === 0}>
-          <Button>
-            {icon} {label} <DownOutlined />
-          </Button>
-        </Dropdown>
-      </>
-    );
-  },
-);
-DropdownButton.displayName = "DropdownButton";
-
-export default DropdownButton;