@gisce/react-ooui 0.1.0

package/src/widgets/base/Image.tsx

@@ -0,0 +1,120 @@
+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);
+
+  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

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

package/src/widgets/base/Label.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Tooltip } from "antd";
+import { WidgetProps } from "@/types";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import { Label as LabelOoui } from "@gisce/ooui";
+
+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 } = 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";
+
+  return (
+    <div
+      className={`flex flex-row items-center pb-1 pt-1 ${alignClass[labelAlgin]}`}
+    >
+      {tooltip && (
+        <Tooltip title={tooltip}>
+          <QuestionCircleOutlined className="text-xs text-blue-400 pr-1" />
+        </Tooltip>
+      )}
+      <span className="pr-2">{labelText}</span>
+    </div>
+  );
+};
+
+export default Label;

package/src/widgets/base/LinkInput.tsx

@@ -0,0 +1,96 @@
+import React, { useContext, useEffect, useState } from "react";
+import { Input, Button, Row, Col } from "antd";
+import { Char as CharOoui } from "@gisce/ooui";
+import Config from "@/Config";
+import { EditOutlined, CheckOutlined } from "@ant-design/icons";
+import { FormContext, FormContextType } from "@/context/FormContext";
+
+interface LinkInputProps {
+  ooui: CharOoui;
+  value?: string;
+  onChange?: (value: string) => void;
+  valueValidator: (value?: string) => boolean;
+  linkPrefix?: string;
+}
+
+export const LinkInput = (props: LinkInputProps) => {
+  const { ooui, value, onChange, valueValidator, linkPrefix = "" } = props;
+  const { id, readOnly, required } = ooui as CharOoui;
+  const requiredClass =
+    required && !readOnly ? Config.requiredClass : undefined;
+  const formContext = useContext(FormContext) as FormContextType;
+  const { elementHasLostFocus } = formContext || {};
+
+  const [editMode, setEditMode] = useState(false);
+  const [showInput, setShowInput] = useState(false);
+
+  useEffect(() => {
+    if (readOnly && !editMode) {
+      setShowInput(false);
+    }
+
+    if (!value && !readOnly) {
+      setEditMode(true);
+      setShowInput(true);
+    }
+  }, [editMode, readOnly]);
+
+  const onValueStringChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e.target.value);
+  };
+
+  return (
+    <Row gutter={8} wrap={false} align="middle">
+      {!readOnly ? (
+        <Col flex="32px">
+          {editMode ? (
+            <Button
+              icon={<CheckOutlined />}
+              onClick={() => {
+                if (valueValidator(value)) {
+                  setEditMode(false);
+                  setShowInput(false);
+                }
+              }}
+              tabIndex={-1}
+            />
+          ) : (
+            <Button
+              icon={<EditOutlined />}
+              onClick={() => {
+                setEditMode(true);
+                setShowInput(true);
+              }}
+              tabIndex={-1}
+            />
+          )}
+        </Col>
+      ) : null}
+      <Col flex="auto">
+        {showInput ? (
+          <Input
+            id={id}
+            onChange={onValueStringChange}
+            className={requiredClass}
+            value={value}
+            onBlur={() => {
+              if (valueValidator(value)) {
+                setEditMode(false);
+                setShowInput(false);
+                elementHasLostFocus?.();
+              }
+            }}
+          />
+        ) : (
+          <a
+            href={`${linkPrefix}${value}`}
+            style={{ color: "#1890ff", paddingRight: 15 }}
+            target="_blank"
+          >
+            {value}
+          </a>
+        )}
+      </Col>
+    </Row>
+  );
+};

package/src/widgets/base/MultiSelection.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { Select } from "antd";
+import styled from "styled-components";
+
+import Field from "@/common/Field";
+import { Selection as SelectionOoui } from "@gisce/ooui";
+import { WidgetProps } from "@/types";
+import Config from "@/Config";
+
+const { Option } = Select;
+
+export const MultiSelection = (props: WidgetProps) => {
+  const { ooui } = props;
+  const { required } = ooui;
+
+  return (
+    <Field required={required} type={"any"} {...props}>
+      <MultiSelectionInput {...props} />
+    </Field>
+  );
+};
+
+type SelectionInputProps = WidgetProps & {
+  onChange?: (value: any) => void;
+  value?: string[];
+};
+
+export const MultiSelectionInput = (props: SelectionInputProps) => {
+  const { ooui, onChange, value } = props;
+  const { selectionValues, readOnly, required } = ooui as SelectionOoui;
+
+  const values = Array.from(selectionValues.entries());
+
+  const options =
+    values &&
+    values.length &&
+    values
+      .filter((optionValueKeyPair) => {
+        const [optionKey] = optionValueKeyPair;
+        if (!value) {
+          return true;
+        }
+        return !value.includes(optionKey);
+      })
+      .map((entry: string[]) => {
+        const [key, value] = entry;
+        return (
+          <Option key={key} value={value}>
+            {value}
+          </Option>
+        );
+      });
+
+  const CustomSelect: any = required && !readOnly ? RequiredSelect : Select;
+
+  function handleChange(changedValues: string[]) {
+    const keysForChangedValues = changedValues.map((changedValue) => {
+      const entry = values.find(([key, value]) => changedValue === value);
+      return entry && entry[0];
+    });
+
+    onChange?.(keysForChangedValues);
+  }
+
+  return (
+    <CustomSelect
+      disabled={readOnly}
+      onChange={handleChange}
+      value={value?.map((key) => selectionValues.get(key))}
+      mode="multiple"
+      showArrow={true}
+    >
+      {options}
+    </CustomSelect>
+  );
+};
+
+const RequiredSelect = styled(Select)`
+  &.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    background-color: ${Config.requiredColor};
+  }
+`;

package/src/widgets/base/ProgressBar.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Progress } from "antd";
+import Field from "@/common/Field";
+import { WidgetProps } from "@/types";
+import styled from "styled-components";
+
+export const ProgressBar = (props: WidgetProps) => {
+  return (
+    <Field {...props}>
+      <ProgressBarInput />
+    </Field>
+  );
+};
+
+export const ProgressBarInput = ({ value }: { value?: number }) => {
+  const textValue = `${(value || 0).toLocaleString("en-US", {
+    minimumIntegerDigits: 1,
+    maximumFractionDigits: 4,
+    useGrouping: false,
+  })}%`;
+
+  return (
+    <div style={{ flex: 1, display: "flex", alignItems: "center" }}>
+      <StyledProgress percent={value} />
+      <div style={{ flexGrow: 1, paddingLeft: 10 }}>{textValue}</div>
+    </div>
+  );
+};
+
+const StyledProgress = styled(Progress)`
+  .ant-progress-outer {
+    margin-right: 0px;
+    padding-right: 0px;
+  }
+  .ant-progress-text {
+    display: none;
+  }
+`;

package/src/widgets/base/Reference.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+import { Row, Col } from "antd";
+import {
+  Reference as ReferenceOoui,
+  Selection as SelectionOoui,
+  Many2one as Many2oneOoui,
+} from "@gisce/ooui";
+import Field from "@/common/Field";
+import { Many2oneInput } from "./many2one/Many2one";
+import { SelectionInput } from "./Selection";
+
+type Props = {
+  ooui: ReferenceOoui;
+  onOpenDetailClick?:
+    | ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void)
+    | undefined;
+  onSearchClick?:
+    | ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void)
+    | undefined;
+};
+
+export const Reference = (props: Props) => {
+  const { ooui } = props;
+  const { required } = ooui;
+
+  return (
+    <Field required={required} {...props}>
+      <ReferenceInput ooui={ooui} />
+    </Field>
+  );
+};
+
+interface ReferenceInputProps {
+  ooui: ReferenceOoui;
+  value?: string;
+  onChange?: (value: string | undefined) => void;
+}
+
+export const ReferenceInput: React.FC<ReferenceInputProps> = (
+  props: ReferenceInputProps
+) => {
+  const { value, onChange, ooui } = props;
+  const { required, selectionValues, readOnly } = ooui;
+
+  const splittedValue = value?.split(",");
+
+  const [many2oneValue, setMany2oneValue] = useState<any[]>([]);
+  const [selectionValue, setSelectionValue] = useState<string>();
+
+  useEffect(() => {
+    if (!value) {
+      return;
+    }
+
+    const model = value && splittedValue && splittedValue[0];
+    const id =
+      value && splittedValue && splittedValue[1] && parseInt(splittedValue[1]);
+    setMany2oneValue([id, undefined]);
+    setSelectionValue(model!);
+  }, [value]);
+
+  return (
+    <Row gutter={8} wrap={false}>
+      <Col flex="1">
+        <SelectionInput
+          ooui={
+            new SelectionOoui({
+              name: "model_selection",
+              selection: selectionValues,
+              readOnly,
+              required,
+            })
+          }
+          onChange={(changedValue: string) => {
+            setSelectionValue(changedValue);
+            setMany2oneValue([]);
+            onChange?.(undefined);
+          }}
+          value={selectionValue}
+        />
+      </Col>
+      <Col flex="3">
+        <Many2oneInput
+          ooui={
+            new Many2oneOoui({
+              name: "object_value",
+              relation: selectionValue,
+              readOnly,
+              required,
+            })
+          }
+          value={many2oneValue}
+          onChange={(changedValue: any[]) => {
+            setMany2oneValue(changedValue);
+            const referenceValue = `${selectionValue},${changedValue[0]}`;
+            if (referenceValue === value) {
+              return;
+            }
+            onChange?.(referenceValue);
+          }}
+        />
+      </Col>
+    </Row>
+  );
+};

package/src/widgets/base/Selection.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Select } from "antd";
+import styled from "styled-components";
+
+import Field from "@/common/Field";
+import { Selection as SelectionOoui } from "@gisce/ooui";
+import { WidgetProps } from "@/types";
+import Config from "@/Config";
+
+const { Option } = Select;
+
+export const Selection = (props: WidgetProps) => {
+  const { ooui } = props;
+  const { required } = ooui;
+
+  return (
+    <Field required={required} type={"any"} {...props}>
+      <SelectionInput {...props} />
+    </Field>
+  );
+};
+
+type SelectionInputProps = WidgetProps & {
+  onChange?: (value: any) => void;
+  value?: string;
+};
+
+export const SelectionInput = (props: SelectionInputProps) => {
+  const { ooui, onChange, value } = props;
+  const { selectionValues, readOnly, required } = ooui as SelectionOoui;
+
+  const values = Array.from(selectionValues.entries());
+
+  const options =
+    values &&
+    values.length &&
+    values.map((entry: string[]) => {
+      const [key, value] = entry;
+      return (
+        <Option key={key} value={key}>
+          {value}
+        </Option>
+      );
+    });
+
+  const CustomSelect: any = required && !readOnly ? RequiredSelect : Select;
+
+  return (
+    <CustomSelect disabled={readOnly} onChange={onChange} value={value} optionFilterProp="children" filterOption={
+      (input: string, option: any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    } showSearch>
+      {options}
+    </CustomSelect>
+  );
+};
+
+const RequiredSelect = styled(Select)`
+  &.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    background-color: ${Config.requiredColor};
+  }
+`;

package/src/widgets/base/Separator.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Divider } from "antd";
+import { Separator as SeparatorOoui } from "@gisce/ooui";
+
+type Props = {
+  ooui: SeparatorOoui;
+};
+
+export const Separator = (props: Props) => {
+  const { ooui } = props;
+  const { label } = ooui;
+
+  return (
+    <Divider orientation="left" className="text-sm">
+      {label}
+    </Divider>
+  );
+};