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

package/src/widgets/base/Button.tsx

@@ -1,77 +0,0 @@
-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) as any;
-      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

@@ -1,157 +0,0 @@
-import React, { CSSProperties, useContext, useState } from "react";
-import { Col, Input, Row, theme } from "antd";
-import Field from "@/common/Field";
-import { Char as CharOoui } from "@gisce/ooui";
-import { WidgetProps } from "@/types";
-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";
-const { useToken } = theme;
-
-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 { token } = useToken();
-  const requiredStyle =
-    required && !readOnly
-      ? { backgroundColor: token.colorPrimaryBg }
-      : undefined;
-  const formContext = useContext(FormContext) as FormContextType;
-  const { elementHasLostFocus } = formContext || {};
-
-  let input = (
-    <Input
-      disabled={readOnly || (translatable && !isSearchField)}
-      id={id}
-      style={requiredStyle}
-      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} requiredStyle={requiredStyle} />;
-  }
-
-  return (
-    <Field required={required} {...props}>
-      {input}
-    </Field>
-  );
-};
-
-const TranslatableChar = ({
-  value,
-  field,
-  requiredStyle,
-  onChange,
-}: {
-  value?: string;
-  field: string;
-  requiredStyle: CSSProperties | 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}
-              style={requiredStyle}
-              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}
-          onChange={(event: any) => {
-            onChange?.(event.target.value);
-          }}
-          onBlur={elementHasLostFocus}
-          style={{ cursor: "pointer", pointerEvents: "none", ...requiredStyle }}
-        />
-      </div>
-      <TranslationModal
-        id={activeId!}
-        model={activeModel}
-        field={field}
-        visible={translationModalVisible}
-        onCloseModal={() => {
-          setTranslationModalVisible(false);
-        }}
-        onSubmitSucceed={() => {
-          setTranslationModalVisible(false);
-          fetchValues?.();
-        }}
-      />
-    </>
-  );
-};

package/src/widgets/base/Date.tsx

@@ -1,12 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

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

package/src/widgets/base/FloatTime.tsx

@@ -1,73 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
-import { Input, theme } from "antd";
-import Field from "@/common/Field";
-import { Float as FloatOoui } from "@gisce/ooui";
-import { WidgetProps } from "@/types";
-import { parseFloatToString, parseStringToFloat } from "@/helpers/timeHelper";
-import { FormContext, FormContextType } from "@/context/FormContext";
-const { useToken } = theme;
-
-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 { token } = useToken();
-  const requiredStyle =
-    required && !readOnly
-      ? { backgroundColor: token.colorPrimaryBg }
-      : 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"}
-      style={requiredStyle}
-      id={id}
-      placeholder={"00:00"}
-      onChange={onValueStringChange}
-      onBlur={onElementLostFocus}
-    />
-  );
-};

package/src/widgets/base/Image.tsx

@@ -1,120 +0,0 @@
-import React, { useContext, useRef } from "react";
-import { Row, Space } from "antd";
-import Field from "@/common/Field";
-import { Image as ImageOoui } from "@gisce/ooui";
-import ButtonWithTooltip from "@/common/ButtonWithTooltip";
-import {
-  FolderOpenOutlined,
-  DownloadOutlined,
-  ClearOutlined,
-} from "@ant-design/icons";
-
-import { toBase64, getMimeType } from "@/helpers/filesHelper";
-import iconMapper from "@/helpers/iconMapper";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-
-type Props = {
-  ooui: ImageOoui;
-};
-
-export const Image = (props: Props) => {
-  const { ooui } = props;
-  const { required, id } = ooui;
-
-  const Icon: React.ElementType = iconMapper(id) as any;
-
-  if (Icon) {
-    return <Icon />;
-  }
-
-  return (
-    <Field required={required} {...props}>
-      <ImageInput ooui={ooui} />
-    </Field>
-  );
-};
-
-interface ImageInputProps {
-  ooui: ImageOoui;
-  value?: string;
-  onChange?: (value: string | undefined) => void;
-}
-
-export const ImageInput = (props: ImageInputProps) => {
-  const { ooui, value, onChange } = props;
-  const { readOnly } = ooui as ImageOoui;
-  const inputFile = useRef(null);
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-
-  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");
-
-    downloadLink.href = linkSource;
-    downloadLink.download = `image.${fileType?.ext}`;
-    downloadLink.click();
-  }
-
-  async function onChangeFile(event: any) {
-    event.stopPropagation();
-    event.preventDefault();
-    const file = event.target.files[0];
-    const b64: string = await toBase64(file);
-    triggerChange(b64);
-  }
-
-  function clearFile() {
-    triggerChange(undefined);
-  }
-
-  return (
-    <>
-      <Row gutter={8} wrap={false} justify="center">
-        {value && (
-          <img
-            src={`data:image/*;base64,${value}`}
-            style={{ maxWidth: "100px" }}
-          />
-        )}
-        <input
-          type="file"
-          id="file"
-          ref={inputFile}
-          accept="image/*"
-          style={{ display: "none" }}
-          onChange={onChangeFile}
-        />
-      </Row>
-      <Row gutter={8} wrap={false} justify="center" className="pt-5">
-        <Space>
-          <ButtonWithTooltip
-            tooltip={t("uploadNewImage")}
-            icon={<FolderOpenOutlined />}
-            disabled={readOnly}
-            onClick={() => {
-              const fileUploadField = inputFile.current as any;
-              fileUploadField.click();
-            }}
-          />
-          <ButtonWithTooltip
-            tooltip={t("download")}
-            disabled={!value}
-            onClick={downloadFile}
-            icon={<DownloadOutlined />}
-          />
-          <ButtonWithTooltip
-            tooltip={t("clear")}
-            disabled={readOnly || !value}
-            onClick={clearFile}
-            icon={<ClearOutlined />}
-          />
-        </Space>
-      </Row>
-    </>
-  );
-};

package/src/widgets/base/Integer.tsx

@@ -1,56 +0,0 @@
-import React, { useContext } from "react";
-import { InputNumber, theme } from "antd";
-import Field from "@/common/Field";
-import { WidgetProps } from "@/types";
-import { FormContext, FormContextType } from "@/context/FormContext";
-const { useToken } = theme;
-
-type IntegerProps = WidgetProps & {
-  onChange?: (newValue: number) => void;
-};
-
-export const Integer = (props: IntegerProps) => {
-  const { ooui, onChange } = props;
-  const { id, readOnly, required } = ooui;
-  const { token } = useToken();
-  const requiredStyle =
-    required && !readOnly
-      ? { backgroundColor: token.colorPrimaryBg }
-      : undefined;
-  const formContext = useContext(FormContext) as FormContextType;
-  const { elementHasLostFocus } = formContext || {};
-
-  return (
-    <Field required={required} type={"number"} {...props}>
-      <InputNumber
-        id={id}
-        className={"w-full "}
-        disabled={readOnly}
-        formatter={(value) => {
-          // Check if value is not undefined and is a valid number
-          if (value === undefined) {
-            return "";
-          }
-
-          if (typeof value === "string" && !isNaN(parseFloat(value))) {
-            let truncatedValue = Math.trunc(parseFloat(value));
-            return `${truncatedValue}`.replace(/[^0-9\-]+/g, "");
-          } else if (typeof value === "number") {
-            let truncatedValue = Math.trunc(value);
-            return `${truncatedValue}`.replace(/[^0-9\-]+/g, "");
-          }
-
-          return "";
-        }}
-        onChange={(newValue: any) => {
-          const newNumber = newValue as number;
-          onChange?.(newNumber);
-        }}
-        defaultValue={0}
-        onBlur={elementHasLostFocus}
-        precision={0}
-        style={requiredStyle}
-      />
-    </Field>
-  );
-};

package/src/widgets/base/Label.tsx

@@ -1,56 +0,0 @@
-import React from "react";
-import { Tooltip, Typography, theme } from "antd";
-import { WidgetProps } from "@/types";
-import { QuestionCircleOutlined } from "@ant-design/icons";
-import { Label as LabelOoui } from "@gisce/ooui";
-import { Interweave } from "interweave";
-const { Text, Title } = Typography;
-const { useToken } = theme;
-
-type Props = WidgetProps & {
-  align?: "left" | "center" | "right";
-  responsiveBehaviour?: boolean;
-};
-
-const alignClass = {
-  left: "justify-start",
-  center: "justify-center",
-  right: "justify-end",
-};
-
-const Label = (props: Props) => {
-  const { ooui, align, responsiveBehaviour } = props;
-  const { label, tooltip, fieldForLabel, labelSize, labelType } =
-    ooui as LabelOoui;
-  const addColon = fieldForLabel !== null ? true : false;
-  const labelText = addColon && label.length > 1 ? label + " :" : label;
-  const responsiveAlign = responsiveBehaviour ? "left" : "right";
-  const labelAlgin = align ? align : fieldForLabel ? responsiveAlign : "left";
-  const { token } = useToken();
-
-  const TextType = labelSize === undefined ? Text : Title;
-
-  return (
-    <div
-      className={`flex flex-row items-center pb-1 pt-1 ${alignClass[labelAlgin]}`}
-    >
-      {tooltip && (
-        <Tooltip title={tooltip}>
-          <QuestionCircleOutlined className="pr-1 text-xs" style={{
-            color: token.colorPrimary
-          }} />
-        </Tooltip>
-      )}
-      <span className="pr-2">
-        <TextType
-          level={labelSize}
-          type={labelType as any}
-        >
-          <Interweave content={labelText} />
-        </TextType>
-      </span>
-    </div>
-  );
-};
-
-export default Label;