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

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,42 +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,67 +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,61 +0,0 @@
-import React from "react";
-import { Menu, Dropdown, Button } from "antd";
-import { DownOutlined } from "@ant-design/icons";
-
-type Props = {
-  onItemClick: (event: any) => void;
-  items: any[];
-  tooltip: string;
-  icon: any;
-  label?: string;
-  disabled?: boolean;
-};
-
-function DropdownButton(props: Props) {
-  const {
-    icon,
-    tooltip,
-    items = [],
-    onItemClick,
-    label,
-    disabled = false,
-  } = props;
-
-  function getMenu() {
-    const menuItems = items?.map((item, idx) => {
-      if (item.name === "divider") {
-        return <Menu.Divider key={"divider" + idx} />;
-      }
-      return <Menu.Item key={item.id}>{item.name}</Menu.Item>;
-    });
-
-    return (
-      <Menu onClick={handleMenuClick}>
-        <Menu.ItemGroup title={tooltip}>{menuItems}</Menu.ItemGroup>
-      </Menu>
-    );
-  }
-
-  function handleMenuClick(event: any) {
-    const itemClicked = items.find((item: any) => {
-      return !isNaN(event.key)
-        ? item.id === parseInt(event.key)
-        : item.id === event.key;
-    });
-
-    onItemClick(itemClicked);
-  }
-
-  return (
-    <Dropdown
-      overlay={getMenu()}
-      disabled={disabled || !items || items.length === 0}
-    >
-      <Button>
-        {icon} {label} <DownOutlined />
-      </Button>
-    </Dropdown>
-  );
-}
-
-export default DropdownButton;