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

package/src/views/actionViews/GraphActionView.tsx

@@ -1,152 +0,0 @@
-import GraphActionBar from "@/actionbar/GraphActionBar";
-import TitleHeader from "@/ui/TitleHeader";
-import { Graph } from "@/widgets/views/Graph/Graph";
-import React, { useContext, useEffect, useRef, useState } from "react";
-import {
-  ActionViewContext,
-  ActionViewContextType,
-} from "@/context/ActionViewContext";
-import { FormView, TreeView } from "@/types";
-import { mergeSearchFields } from "@/helpers/formHelper";
-import { useSearch } from "@/hooks/useSearch";
-import SearchFilter from "@/widgets/views/searchFilter/SearchFilter";
-import { Spin } from "antd";
-import { mergeParams } from "@/helpers/searchHelper";
-
-export type GraphActionViewProps = {
-  viewData: any;
-  visible: boolean;
-  model: string;
-  context: any;
-  domain: any;
-  formView: FormView;
-  treeView: TreeView;
-};
-
-export const GraphActionView = (props: GraphActionViewProps) => {
-  const { viewData, visible, model, context, domain, formView, treeView } =
-    props;
-  const graphRef = useRef();
-
-  const actionViewContext = useContext(
-    ActionViewContext
-  ) as ActionViewContextType;
-  const {
-    setResults: setResultsActionView = undefined,
-    setCurrentItemIndex = undefined,
-    currentId = undefined,
-    results: resultsActionView = undefined,
-    setSelectedRowItems = undefined,
-    setSearchParams = undefined,
-    searchVisible = true,
-    setSearchVisible = undefined,
-    sorter = undefined,
-    setSorter = undefined,
-    setTotalItems: setActionViewTotalItems = undefined,
-    setSearchTreeNameSearch = undefined,
-    setTreeIsLoading = undefined,
-    limit,
-    setLimit,
-    searchParams,
-    searchValues,
-    setSearchValues,
-    currentView,
-  } = actionViewContext || {};
-
-  const [applyLimit, setApplyLimit] = useState(true);
-
-  useEffect(() => {
-    (graphRef.current as any)?.refresh();
-  }, [searchParams]);
-
-  useEffect(() => {
-    if (viewData.view_id !== currentView.view_id) {
-      setApplyLimit(true);
-    }
-  }, [currentView]);
-
-  const { clear, searchFilterLoading, searchError, offset, tableRefreshing } =
-    useSearch({
-      model,
-      setSearchTreeNameSearch,
-      setSelectedRowItems,
-      searchParams,
-      setSearchValues,
-      setSearchParams,
-      setSearchVisible,
-      setTreeIsLoading,
-      context,
-      formView: formView!,
-      treeView: treeView!,
-      sorter,
-      setSorter,
-      setCurrentItemIndex,
-      setResultsActionView,
-      resultsActionView,
-      domain,
-      currentId,
-      setActionViewTotalItems,
-      limit,
-      setLimit,
-    });
-
-  if (!visible) {
-    return null;
-  }
-
-  if (!viewData) {
-    return null;
-  }
-
-  return (
-    <>
-      <TitleHeader title={viewData.name}>
-        <GraphActionBar
-          refreshGraph={() => {
-            (graphRef.current as any).refresh();
-          }}
-        />
-      </TitleHeader>
-      <SearchFilter
-        fields={{ ...treeView.fields, ...formView.fields }}
-        searchFields={mergeSearchFields([
-          formView.search_fields,
-          treeView.search_fields,
-        ])}
-        limit={limit!}
-        onClear={clear}
-        offset={offset}
-        isSearching={searchFilterLoading}
-        onSubmit={(opts: {
-          params: any;
-          limit: number;
-          offset: number;
-          searchValues: any;
-        }) => {
-          setApplyLimit(false);
-          setSearchParams?.(opts.params);
-          setSearchVisible?.(false);
-        }}
-        searchError={searchError}
-        searchVisible={searchVisible}
-        searchValues={searchValues}
-        showLimitOptions={false}
-      />
-      {tableRefreshing ? (
-        <Spin />
-      ) : (
-        <Graph
-          ref={graphRef}
-          view_id={viewData.view_id}
-          model={model}
-          context={context}
-          domain={mergeParams(searchParams || [], domain)}
-          limit={applyLimit ? limit : undefined}
-          manualIds={
-            applyLimit ? resultsActionView?.map((r) => r.id) : undefined
-          }
-        />
-      )}
-    </>
-  );
-};

package/src/views/actionViews/TreeActionView.tsx

@@ -1,87 +0,0 @@
-import TreeActionBar from "@/actionbar/TreeActionBar";
-import { FormView, TreeView, View } from "@/types";
-import TitleHeader from "@/ui/TitleHeader";
-import SearchTree from "@/widgets/views/SearchTree";
-import React, { useContext } from "react";
-import {
-  ActionViewContext,
-  ActionViewContextType,
-} from "@/context/ActionViewContext";
-
-export type TreeActionViewProps = {
-  formView?: FormView;
-  treeView?: TreeView;
-  visible: boolean;
-  searchTreeRef: any;
-  model: string;
-  domain: any;
-  context: any;
-  results: any[];
-  setCurrentItemIndex: (value?: number) => void;
-  setCurrentId: (id?: number) => void;
-  setCurrentView: (view: View) => void;
-  availableViews: View[];
-  searchTreeNameSearch?: string;
-  limit?: number;
-};
-
-export const TreeActionView = (props: TreeActionViewProps) => {
-  const {
-    visible,
-    searchTreeRef,
-    model,
-    context,
-    formView,
-    treeView,
-    domain,
-    setCurrentItemIndex,
-    results,
-    setCurrentId,
-    setCurrentView,
-    availableViews,
-    searchTreeNameSearch,
-  } = props;
-
-  const { currentView, setPreviousView } = useContext(
-    ActionViewContext
-  ) as ActionViewContextType;
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <>
-      <TitleHeader>
-        <TreeActionBar
-          toolbar={treeView?.toolbar}
-          parentContext={context}
-          treeExpandable={treeView?.isExpandable || false}
-        />
-      </TitleHeader>
-      <SearchTree
-        ref={searchTreeRef}
-        rootTree={true}
-        model={model}
-        parentContext={context}
-        nameSearch={searchTreeNameSearch}
-        formView={formView}
-        treeView={treeView}
-        domain={domain}
-        onRowClicked={(event: any) => {
-          const { id } = event;
-          setCurrentId(id);
-          const itemIndex = results.findIndex((item: any) => {
-            return item.id === id;
-          });
-          setPreviousView?.(currentView);
-          setCurrentItemIndex(itemIndex);
-          const formView = availableViews.find(
-            (v) => v.type === "form"
-          ) as FormView;
-          setCurrentView(formView);
-        }}
-      />
-    </>
-  );
-};

package/src/views/tabs/Tab.tsx

@@ -1,82 +0,0 @@
-import React from "react";
-import { CloseOutlined } from "@ant-design/icons";
-import { theme } from "antd";
-const { useToken } = theme;
-
-type TabProps = {
-  tabKey: string;
-  label: string;
-  onClose: (key: string) => void;
-  isActive: boolean;
-  onSelected: (key: string) => void;
-};
-
-function Tab(props: TabProps) {
-  const { label, onClose, tabKey, isActive, onSelected } = props;
-  const { token } = useToken();
-  const bgColor = isActive ? token.colorBgContainer : token.colorPrimaryBg;
-
-  return (
-    <div
-      onClick={() => {
-        !isActive && onSelected(tabKey);
-      }}
-      style={{
-        cursor: "pointer",
-        height: 40,
-        paddingTop: 7,
-        paddingBottom: 5,
-        paddingLeft: 10,
-        paddingRight: 10,
-        backgroundColor: bgColor,
-        display: "inline-flex",
-        flex: 1,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        borderTopLeftRadius: token.borderRadius,
-        borderTopRightRadius: token.borderRadius,
-        marginLeft: 2,
-      }}
-    >
-      <div
-        style={{
-          color: token.colorPrimaryActive,
-          userSelect: "none",
-          height: 40,
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          paddingLeft: 5,
-          paddingRight: 5,
-          marginBottom: 2,
-          fontWeight: isActive ? 500 : "normal",
-        }}
-      >
-        {label}
-      </div>
-      <div
-        style={{
-          paddingLeft: 5,
-          height: 40,
-
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <CloseOutlined
-          style={{
-            color: token.colorPrimaryActive,
-          }}
-          onClick={(e) => {
-            e.stopPropagation();
-            onClose(tabKey);
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default Tab;

package/src/widgets/WidgetFactory.tsx

@@ -1,142 +0,0 @@
-import React from "react";
-
-import {
-  Notebook,
-  Group,
-  Label,
-  Char,
-  Text,
-  Button,
-  ButtonGroup,
-  Selection,
-  Many2one,
-  Boolean,
-  Integer,
-  Float,
-  Date,
-  DateTime,
-  Time,
-  One2many,
-  Separator,
-  Form,
-  Tree,
-  Reference,
-  Binary,
-  Url,
-  Email,
-  FloatTime,
-  ProgressBar,
-  MultiCheckbox,
-  Markdown,
-  Radio,
-  Switch,
-  Steps,
-  Tag,
-  CodeEditor,
-  CommentsTimelineField,
-} from "@/index";
-import { Image } from "./base/Image";
-import { FiberGrid } from "./custom/FiberGrid";
-import { Timeline } from "./custom/Timeline";
-import { Indicator} from "./custom/Indicator";
-import { Tags } from "./custom/Tags";
-
-const getWidgetType = (type: string) => {
-  switch (type) {
-    case "form":
-      return Form;
-    case "tree":
-      return Tree;
-    case "notebook":
-      return Notebook;
-    case "group":
-      return Group;
-    case "label":
-      return Label;
-    case "char":
-      return Char;
-    case "text":
-      return Text;
-    case "button":
-      return Button;
-    case "buttonGroup":
-      return ButtonGroup;
-    case "selection":
-      return Selection;
-    case "many2one":
-      return Many2one;
-    case "boolean":
-      return Boolean;
-    case "integer":
-      return Integer;
-    case "float":
-      return Float;
-    case "progressbar":
-      return ProgressBar;
-    case "date":
-      return Date;
-    case "datetime":
-      return DateTime;
-    case "time":
-      return Time;
-    case "one2many":
-    case "one2many_list":
-    case "many2many":
-      return One2many;
-    case "separator":
-      return Separator;
-    case "reference":
-      return Reference;
-    case "binary":
-      return Binary;
-    case "image":
-      return Image;
-    case "url":
-      return Url;
-    case "email":
-      return Email;
-    case "float_time":
-      return FloatTime;
-    case "fiber_grid":
-      return FiberGrid;
-    case "timeline":
-      return Timeline;
-    case "indicator":
-      return Indicator;
-    case "tags":
-      return Tags;
-    case "tag":
-      return Tag;
-    case "multicheckbox":
-      return MultiCheckbox;
-    case "markdown":
-      return Markdown;
-    case "radio":
-      return Radio;
-    case "switch":
-      return Switch;
-    case "steps":
-      return Steps;
-    case "codeeditor":
-      return CodeEditor;
-    case "comments_timeline":
-      return CommentsTimelineField;
-    default:
-      return undefined;
-  }
-};
-
-const createReactWidget = (props: any) => {
-  const { ooui } = props;
-  const { type }: { type: string } = ooui;
-
-  const widgetClass: any = getWidgetType(type);
-
-  if (!widgetClass) {
-    return null;
-  }
-
-  return React.createElement(widgetClass, props);
-};
-
-export { createReactWidget };

package/src/widgets/base/Binary.tsx

@@ -1,145 +0,0 @@
-import React, { useRef, useContext } from "react";
-import { Row, Col, Button, Input, Space, theme } from "antd";
-import Field from "@/common/Field";
-import { Binary as BinaryOoui } from "@gisce/ooui";
-const { useToken } = theme;
-import ButtonWithTooltip from "@/common/ButtonWithTooltip";
-import {
-  FolderOpenOutlined,
-  DownloadOutlined,
-  ClearOutlined,
-  EyeOutlined,
-} from "@ant-design/icons";
-import { FormContext, FormContextType } from "@/context/FormContext";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-
-import {
-  getFilesize,
-  getMimeType,
-  openBase64InNewTab,
-  toBase64,
-} from "@/helpers/filesHelper";
-
-type Props = {
-  ooui: BinaryOoui;
-};
-
-export const Binary = (props: Props) => {
-  const { ooui } = props;
-  const { required } = ooui;
-
-  return (
-    <Field required={required} {...props}>
-      <BinaryInput ooui={ooui} />
-    </Field>
-  );
-};
-
-interface BinaryInputProps {
-  ooui: BinaryOoui;
-  value?: string;
-  onChange?: (value: string | undefined) => void;
-}
-
-export const BinaryInput = (props: BinaryInputProps) => {
-  const { ooui, value, onChange } = props;
-  const { readOnly, required, filenameField } = ooui as BinaryOoui;
-  const { token } = useToken();
-  const requiredStyle =
-    required && !readOnly
-      ? { backgroundColor: token.colorPrimaryBg }
-      : undefined;
-  const inputFile = useRef(null);
-  const { setFieldValue, getFieldValue } =
-    (useContext(FormContext) as FormContextType) || {};
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-
-  const filesize = value ? getFilesize(value) : "";
-
-  const triggerChange = (changedValue?: string) => {
-    onChange?.(changedValue);
-  };
-
-  async function downloadFile() {
-    const fileType = await getMimeType(value!);
-    const linkSource = `data:${fileType?.mime};base64,${value}`;
-    const downloadLink = document.createElement("a");
-    const fileName = getFieldValue(filenameField);
-    const name = getFieldValue("name");
-
-    downloadLink.href = linkSource;
-    downloadLink.download = fileName || name;
-    downloadLink.click();
-  }
-
-  async function openFile() {
-    const fileType: any = await getMimeType(value!);
-    openBase64InNewTab(value!, fileType.mime);
-  }
-
-  async function onChangeFile(event: any) {
-    event.stopPropagation();
-    event.preventDefault();
-    const file = event.target.files[0];
-    const b64: string = await toBase64(file);
-    triggerChange(b64);
-
-    if (filenameField) {
-      setFieldValue(filenameField, file.name);
-    }
-  }
-
-  function clearFile() {
-    setFieldValue(filenameField, undefined);
-    triggerChange(undefined);
-  }
-
-  return (
-    <Row gutter={8}>
-      <Col style={{ paddingBottom: 5 }}>
-        <input
-          type="file"
-          id="file"
-          ref={inputFile}
-          style={{ display: "none" }}
-          onChange={onChangeFile}
-        />
-        <Input
-          type="text"
-          disabled={true}
-          style={requiredStyle}
-          value={filesize}
-        />
-      </Col>
-      <Col>
-        <Space>
-          <Button
-            icon={<FolderOpenOutlined />}
-            disabled={readOnly}
-            onClick={() => {
-              const fileUploadField = inputFile.current as any;
-              fileUploadField.click();
-            }}
-          >
-            Select
-          </Button>
-          <Button icon={<EyeOutlined />} disabled={!value} onClick={openFile}>
-            {t("open")}
-          </Button>
-          <ButtonWithTooltip
-            tooltip={t("download")}
-            disabled={!value}
-            onClick={downloadFile}
-            icon={<DownloadOutlined />}
-          />
-          <ButtonWithTooltip
-            tooltip={t("clear")}
-            disabled={readOnly || !value}
-            onClick={clearFile}
-            icon={<ClearOutlined />}
-          />
-        </Space>
-      </Col>
-    </Row>
-  );
-};

package/src/widgets/base/Boolean.tsx

@@ -1,45 +0,0 @@
-import React from "react";
-import { Checkbox as AntCheckbox } from "antd";
-import styled from "styled-components";
-
-import Field from "@/common/Field";
-import { WidgetProps } from "@/types";
-import { theme } from "antd";
-
-const { defaultAlgorithm, defaultSeed } = theme;
-
-const mapToken = defaultAlgorithm(defaultSeed);
-
-export const Boolean = (props: WidgetProps) => {
-  const { ooui } = props;
-  const { id, readOnly, required } = ooui;
-
-  return (
-    <Field {...props} valuePropName="checked">
-      <BooleanInput id={id} readOnly={readOnly} required={required} />
-    </Field>
-  );
-};
-
-const BooleanInput = (props: any) => {
-  const { required, readOnly, ...restProps } = props;
-
-  const CustomCheckbox: any =
-    required && !readOnly ? RequiredCheckbox : AntCheckbox;
-
-  return (
-    <div className="flex flex-row">
-      <CustomCheckbox disabled={readOnly} {...restProps} />
-    </div>
-  );
-};
-
-const RequiredCheckbox = styled(AntCheckbox)`
-  .ant-checkbox-inner {
-    background-color: ${mapToken.colorPrimaryBg};
-  }
-
-  .ant-checkbox-checked .ant-checkbox-inner {
-    background-color: ${mapToken.colorPrimary};
-  }
-`;