@gisce/react-ooui 0.1.0

package/src/widgets/WidgetFactory.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+
+import {
+  Notebook,
+  Group,
+  Label,
+  Char,
+  Text,
+  Button,
+  Selection,
+  Many2one,
+  Boolean,
+  Integer,
+  Float,
+  Date,
+  DateTime,
+  One2many,
+  Separator,
+  Form,
+  Tree,
+  Reference,
+  Binary,
+  Url,
+  Email,
+  FloatTime,
+  ProgressBar,
+} from "@/index";
+import { Image } from "./base/Image";
+import { FiberGrid } from "./custom/FiberGrid";
+import { Timeline } from "./custom/Timeline";
+import { Indicator} from "./custom/Indicator";
+
+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 "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 "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;
+    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

@@ -0,0 +1,141 @@
+import React, { useRef, useContext } from "react";
+import { Row, Col, Button, Input, Space } from "antd";
+import Field from "@/common/Field";
+import { Binary as BinaryOoui } from "@gisce/ooui";
+import Config from "@/Config";
+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 requiredClass =
+    required && !readOnly ? Config.requiredClass : 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);
+
+    downloadLink.href = linkSource;
+    downloadLink.download = fileName;
+    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}
+          className={requiredClass}
+          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

@@ -0,0 +1,44 @@
+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 Config from "@/Config";
+
+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: ${Config.requiredColor};
+  }
+
+  .ant-checkbox-checked .ant-checkbox-inner {
+    background-color: #089cff;
+  }
+`;

package/src/widgets/base/Button.tsx

@@ -0,0 +1,77 @@
+import React, { useContext, useState } from "react";
+import Field from "@/common/Field";
+import { Button as AntButton } from "antd";
+import { Button as ButtonOoui } 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 { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+type Props = {
+  ooui: ButtonOoui;
+};
+
+export const Button = (props: Props) => {
+  const { ooui } = props;
+  const {
+    id,
+    label,
+    activated,
+    buttonType,
+    confirmMessage,
+    icon,
+    context,
+    readOnly,
+  } = ooui;
+  const formContext = useContext(FormContext) as FormContextType;
+  const { executeButtonAction } = formContext || {};
+  const [isRunning, setIsRunning] = useState<boolean>(false);
+  const { lang } = useContext(LocaleContext) as LocaleContextType;
+
+  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);
+      return Icon && <Icon />;
+    }
+    return undefined;
+  }
+
+  return (
+    <Field ooui={ooui}>
+      <AntButton
+        block
+        disabled={!activated || readOnly}
+        onClick={onClick}
+        icon={getButtonIcon()}
+        type={ooui.primary ? "primary" : "default"}
+        danger={ooui.danger}
+        style={{ whiteSpace: "normal", height: "auto" }}
+      >
+        {label}
+      </AntButton>
+    </Field>
+  );
+};

package/src/widgets/base/Char.tsx

@@ -0,0 +1,155 @@
+import React, { useContext, useState } from "react";
+import { Col, Input, Row } from "antd";
+import Field from "@/common/Field";
+import { Char as CharOoui } from "@gisce/ooui";
+import { WidgetProps } from "@/types";
+import Config from "@/Config";
+import { TranslationModal } from "../modals/TranslationModal";
+import { FormContext, FormContextType } from "@/context/FormContext";
+import ButtonWithTooltip from "@/common/ButtonWithTooltip";
+import { TranslationOutlined } from "@ant-design/icons";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import showInfo from "@/ui/InfoDialog";
+
+type CharProps = WidgetProps & {
+  isSearchField?: boolean;
+};
+
+export const Char = (props: CharProps) => {
+  const { ooui, isSearchField = false } = props;
+  const { id, readOnly, isPassword, required, translatable } = ooui as CharOoui;
+  const requiredClass =
+    required && !readOnly ? Config.requiredClass : undefined;
+  const formContext = useContext(FormContext) as FormContextType;
+  const { elementHasLostFocus } = formContext || {};
+
+  let input = (
+    <Input
+      disabled={readOnly || (translatable && !isSearchField)}
+      id={id}
+      className={requiredClass}
+      maxLength={(ooui as CharOoui).size}
+      onBlur={elementHasLostFocus}
+    />
+  );
+
+  if (isPassword) {
+    input = (
+      <Input.Password
+        disabled={readOnly}
+        id={id}
+        onBlur={elementHasLostFocus}
+      />
+    );
+  }
+
+  if (translatable && !readOnly && !isSearchField) {
+    input = <TranslatableChar field={id} requiredClass={requiredClass} />;
+  }
+
+  return (
+    <Field required={required} {...props}>
+      {input}
+    </Field>
+  );
+};
+
+const TranslatableChar = ({
+  value,
+  field,
+  requiredClass,
+  onChange,
+}: {
+  value?: string;
+  field: string;
+  requiredClass: string | undefined;
+  onChange?: (value: string) => void;
+}) => {
+  const formContext = useContext(FormContext) as FormContextType;
+  const {
+    activeId,
+    activeModel,
+    fetchValues,
+    formHasChanges,
+    elementHasLostFocus,
+  } = formContext || {};
+  const [translationModalVisible, setTranslationModalVisible] = useState(false);
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+
+  if (!activeId) {
+    return (
+      <>
+        <Row gutter={8} wrap={false}>
+          <Col flex="auto">
+            <Input
+              value={value}
+              id={field}
+              className={requiredClass}
+              onChange={(event: any) => {
+                onChange?.(event.target.value);
+              }}
+              onBlur={elementHasLostFocus}
+            />
+          </Col>
+          <Col flex="32px">
+            <ButtonWithTooltip
+              tooltip={t("translate")}
+              icon={<TranslationOutlined />}
+              onClick={async () => {
+                if (formHasChanges?.()) {
+                  showInfo(t("saveBeforeTranslate"));
+                } else {
+                  showInfo(t("enterTextBeforeTranslate"));
+                }
+              }}
+            >
+              {t("translate")}
+            </ButtonWithTooltip>
+          </Col>
+        </Row>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div
+        onClick={() => {
+          if (formHasChanges?.()) {
+            showInfo(t("saveBeforeTranslate"));
+            return;
+          }
+
+          if (!translationModalVisible) {
+            setTranslationModalVisible(true);
+          }
+        }}
+      >
+        <Input
+          value={value}
+          disabled={true}
+          id={field}
+          className={requiredClass}
+          onChange={(event: any) => {
+            onChange?.(event.target.value);
+          }}
+          onBlur={elementHasLostFocus}
+          style={{ cursor: "pointer" }}
+        />
+      </div>
+      <TranslationModal
+        id={activeId!}
+        model={activeModel}
+        field={field}
+        visible={translationModalVisible}
+        onCloseModal={() => {
+          setTranslationModalVisible(false);
+        }}
+        onSubmitSucceed={() => {
+          setTranslationModalVisible(false);
+          fetchValues?.();
+        }}
+      />
+    </>
+  );
+};

package/src/widgets/base/Date.tsx

@@ -0,0 +1,12 @@
+import DatePicker from "@/common/DatePicker";
+
+import React from "react";
+import { WidgetProps } from "@/types";
+
+const Date = (props: WidgetProps) => {
+  const { ooui } = props;
+
+  return <DatePicker ooui={ooui} />;
+};
+
+export default Date;

package/src/widgets/base/DateTime.tsx

@@ -0,0 +1,12 @@
+import DatePicker from "@/common/DatePicker";
+
+import React from "react";
+import { WidgetProps } from "@/types";
+
+const DateTime = (props: WidgetProps) => {
+  const { ooui } = props;
+
+  return <DatePicker ooui={ooui} showTime />;
+};
+
+export default DateTime;

package/src/widgets/base/Email.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import isEmail from "validator/lib/isEmail";
+import Field from "@/common/Field";
+
+import { WidgetProps } from "@/types";
+import { LinkInput } from "./LinkInput";
+import { Char as CharOoui } from "@gisce/ooui";
+
+export const Email = (props: WidgetProps) => {
+  const { ooui } = props;
+  const { required } = ooui as CharOoui;
+
+  return (
+    <Field required={required} {...props}>
+      <LinkInput
+        ooui={ooui as CharOoui}
+        linkPrefix={"mailto:"}
+        valueValidator={(value) => {
+          if (!value) {
+            return false;
+          }
+          return isEmail(value);
+        }}
+      />
+    </Field>
+  );
+};

package/src/widgets/base/Float.tsx

@@ -0,0 +1,33 @@
+import React, { useContext } from "react";
+import { InputNumber } from "antd";
+import Field from "@/common/Field";
+import { Float as FloatOoui } from "@gisce/ooui";
+import { WidgetProps } from "@/types";
+import Config from "@/Config";
+import { FormContext, FormContextType } from "@/context/FormContext";
+
+export const Float = (props: WidgetProps) => {
+  const { ooui } = props;
+  const { id, decimalDigits, readOnly, required } = ooui as FloatOoui;
+  const requiredClass =
+    required && !readOnly ? Config.requiredClass : undefined;
+  const formContext = useContext(FormContext) as FormContextType;
+  const { elementHasLostFocus } = formContext || {};
+
+  return (
+    <Field required={required} type={"number"} {...props}>
+      <InputNumber
+        disabled={readOnly}
+        className={"w-full " + requiredClass}
+        id={id}
+        precision={decimalDigits}
+        formatter={(value) => {
+          return `${value}`.replace(/[^0-9\.\-]+/g, "");
+        }}
+        defaultValue={0}
+        decimalSeparator={"."}
+        onBlur={elementHasLostFocus}
+      />
+    </Field>
+  );
+};

package/src/widgets/base/FloatTime.tsx

@@ -0,0 +1,69 @@
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { Input } from "antd";
+import Field from "@/common/Field";
+import { Float as FloatOoui } from "@gisce/ooui";
+import { WidgetProps } from "@/types";
+import Config from "@/Config";
+import { parseFloatToString, parseStringToFloat } from "@/helpers/timeHelper";
+import { FormContext, FormContextType } from "@/context/FormContext";
+
+export const FloatTime = (props: WidgetProps) => {
+  const { ooui } = props;
+  const { required } = ooui as FloatOoui;
+
+  return (
+    <Field required={required} type={"number"} {...props}>
+      <FloatTimeInput ooui={ooui as FloatOoui} />
+    </Field>
+  );
+};
+
+interface FloatTimeInputProps {
+  ooui: FloatOoui;
+  value?: number;
+  onChange?: (value?: number) => void;
+}
+
+export const FloatTimeInput: React.FC<FloatTimeInputProps> = (
+  props: FloatTimeInputProps
+) => {
+  const { ooui, value, onChange } = props;
+  const { id, readOnly, required } = ooui as FloatOoui;
+  const requiredClass =
+    required && !readOnly ? Config.requiredClass : undefined;
+  const inputTextRef = useRef<string>();
+  const [inputText, setInputText] = useState<string>();
+  const formContext = useContext(FormContext) as FormContextType;
+  const { elementHasLostFocus } = formContext || {};
+
+  useEffect(() => {
+    setInputText(parseFloatToString(value!));
+  }, [value]);
+
+  const triggerChange = (changedValue?: number) => {
+    onChange?.(changedValue);
+  };
+
+  function onValueStringChange(e: React.ChangeEvent<HTMLInputElement>) {
+    inputTextRef.current = e.target.value;
+    setInputText(e.target.value);
+  }
+
+  async function onElementLostFocus() {
+    triggerChange(parseStringToFloat(inputText));
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    elementHasLostFocus?.();
+  }
+
+  return (
+    <Input
+      value={inputText}
+      disabled={readOnly}
+      className={"w-full " + requiredClass}
+      id={id}
+      placeholder={"00:00"}
+      onChange={onValueStringChange}
+      onBlur={onElementLostFocus}
+    />
+  );
+};