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

package/src/widgets/base/LinkInput.tsx

@@ -1,101 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import { Input, Button, Row, Col, theme } from "antd";
-import { Char as CharOoui } from "@gisce/ooui";
-import { EditOutlined, CheckOutlined } from "@ant-design/icons";
-import { FormContext, FormContextType } from "@/context/FormContext";
-const { useToken } = theme;
-
-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 { token } = useToken();
-  const requiredStyle =
-    required && !readOnly
-      ? { backgroundColor: token.colorPrimaryBg }
-      : 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);
-                }
-              }}
-              style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
-              tabIndex={-1}
-            />
-          ) : (
-            <Button
-              icon={<EditOutlined />}
-              onClick={() => {
-                setEditMode(true);
-                setShowInput(true);
-              }}
-              style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
-              tabIndex={-1}
-            />
-          )}
-        </Col>
-      ) : null}
-      <Col flex="auto">
-        {showInput ? (
-          <Input
-            style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, ...requiredStyle }}
-            id={id}
-            onChange={onValueStringChange}
-            value={value}
-            onBlur={() => {
-              if (valueValidator(value)) {
-                setEditMode(false);
-                setShowInput(false);
-                elementHasLostFocus?.();
-              }
-            }}
-          />
-        ) : (
-          <a
-            href={`${linkPrefix}${value}`}
-            style={{ color: token.colorPrimary, paddingRight: 15 }}
-            target="_blank"
-          >
-            {value}
-          </a>
-        )}
-      </Col>
-    </Row>
-  );
-};

package/src/widgets/base/MultiSelection.tsx

@@ -1,91 +0,0 @@
-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 { theme } from "antd";
-
-const { defaultAlgorithm, defaultSeed } = theme;
-
-const mapToken = defaultAlgorithm(defaultSeed);
-
-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];
-    });
-
-    if (keysForChangedValues.length === 0) {
-      onChange?.(undefined);
-      return;
-    }
-
-    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: ${mapToken.colorPrimaryBg};
-  }
-`;

package/src/widgets/base/ProgressBar.tsx

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

@@ -1,115 +0,0 @@
-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) {
-      setSelectionValue(undefined);
-      setMany2oneValue([]);
-      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: readOnly,
-              required,
-            })
-          }
-          onChange={(changedValue: string) => {
-            setSelectionValue(changedValue);
-            let m2oValue = many2oneValue[0] || 0;
-            if (changedValue !== selectionValue) {
-              setMany2oneValue([]);
-              m2oValue = 0;
-            }
-            const referenceValue = `${changedValue},${m2oValue}`;
-            if (referenceValue === value) {
-              return;
-            }
-            onChange?.(referenceValue);
-          }}
-          value={selectionValue}
-        />
-      </Col>
-      <Col flex="3">
-        <Many2oneInput
-          ooui={
-            new Many2oneOoui({
-              name: "object_value",
-              relation: selectionValue,
-              readonly: readOnly,
-              required,
-            })
-          }
-          value={many2oneValue}
-          onChange={(changedValue: any[]) => {
-            setMany2oneValue(changedValue);
-            const referenceValue = `${selectionValue},${changedValue[0] || 0}`;
-            if (referenceValue === value) {
-              return;
-            }
-            onChange?.(referenceValue);
-          }}
-        />
-      </Col>
-    </Row>
-  );
-};

package/src/widgets/base/ReferenceTree.tsx

@@ -1,62 +0,0 @@
-import ConnectionProvider from "@/ConnectionProvider";
-import { Space } from "antd";
-import React, { useCallback, useEffect, useState } from "react";
-import { Many2oneSuffix } from "./many2one/Many2oneSuffix";
-import { LoadingOutlined } from "@ant-design/icons";
-
-export type ReferenceTreeProps = {
-  value: string;
-  context?: any;
-  selectionValues?: any;
-};
-
-export const ReferenceTree = (
-  props: ReferenceTreeProps
-): React.ReactElement => {
-  const { value, context, selectionValues } = props;
-  const [name, setName] = useState();
-  const [loading, setLoading] = useState(false);
-
-  const [model, id] = value ? value.split(",") : [];
-  const intId = parseInt(id);
-
-  const fetchName = useCallback(async () => {
-    if (!value) {
-      return;
-    }
-    if (value && name) {
-      return;
-    }
-    setLoading(true);
-    const nameResponse = await ConnectionProvider.getHandler().execute({
-      action: "name_get",
-      payload: [intId],
-      model,
-      context,
-    });
-    setName(nameResponse[0][1]);
-    setLoading(false);
-  }, [value, name]);
-
-  useEffect(() => {
-    fetchName();
-  }, [value]);
-
-  if (!value && !loading) {
-    return <></>;
-  }
-
-  if (loading) {
-    return <LoadingOutlined />;
-  }
-
-  const selectionDescription = selectionValues.get(model);
-
-  return (
-    <Space>
-      <>{`${selectionDescription}:`}</>
-      <>{name}</>
-      <Many2oneSuffix id={intId} model={model} />
-    </Space>
-  );
-};

package/src/widgets/base/Selection.tsx

@@ -1,65 +0,0 @@
-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 { theme } from "antd";
-
-const { defaultAlgorithm, defaultSeed } = theme;
-
-const mapToken = defaultAlgorithm(defaultSeed);
-
-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: ${mapToken.colorPrimaryBg};
-  }
-`;

package/src/widgets/base/Separator.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { Divider, Space } from "antd";
-import { Separator as SeparatorOoui } from "@gisce/ooui";
-import iconMapper from "@/helpers/iconMapper";
-
-type Props = {
-  ooui: SeparatorOoui;
-};
-
-export const Separator = (props: Props) => {
-  const { ooui } = props;
-  const { label, icon } = ooui;
-  const Icon : React.ElementType | undefined = iconMapper(icon || "");
-
-
-  return (
-    <Divider orientation="left" className="text-sm">
-      { (Icon || label) &&
-        <Space>
-          {Icon ? <Icon /> : null}
-          {label}
-        </Space>
-      }
-    </Divider>
-  );
-};

package/src/widgets/base/Text.tsx

@@ -1,162 +0,0 @@
-import React, { CSSProperties, useContext, useState } from "react";
-import { Input, Row, theme } from "antd";
-import Field from "@/common/Field";
-import { Text as TextOoui } from "@gisce/ooui";
-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;
-
-const { TextArea } = Input;
-
-type Props = {
-  ooui: TextOoui;
-};
-
-const Text = (props: Props) => {
-  const { ooui } = props;
-  const { id, readOnly, required, height, translatable } = 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} {...props}>
-      {translatable ? (
-        <TranslatableText
-          field={id}
-          height={height}
-          requiredStyle={requiredStyle}
-        />
-      ) : (
-        <TextArea
-          disabled={readOnly || translatable}
-          style={{
-            minHeight: height ? height + "px" : "100%",
-            ...requiredStyle,
-          }}
-          rows={4}
-          onBlur={elementHasLostFocus}
-        />
-      )}
-    </Field>
-  );
-};
-
-const TranslatableText = ({
-  value,
-  field,
-  requiredStyle,
-  onChange,
-  height,
-}: {
-  value?: string;
-  field: string;
-  requiredStyle: CSSProperties | undefined;
-  height: number | 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}>
-          <TextArea
-            value={value}
-            onChange={(event: any) => {
-              onChange?.(event.target.value);
-            }}
-            style={{
-              height: height ? height + "px" : "100%",
-              ...requiredStyle,
-            }}
-            id={field}
-            rows={4}
-            onBlur={elementHasLostFocus}
-          />
-        </Row>
-        <Row justify="end" style={{ paddingTop: 5 }}>
-          <ButtonWithTooltip
-            tooltip={t("translate")}
-            icon={<TranslationOutlined />}
-            onClick={async () => {
-              if (formHasChanges?.()) {
-                showInfo(t("saveBeforeTranslate"));
-              } else {
-                showInfo(t("enterTextBeforeTranslate"));
-              }
-            }}
-          >
-            {t("translate")}
-          </ButtonWithTooltip>
-        </Row>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <div
-        onClick={() => {
-          if (formHasChanges?.()) {
-            showInfo(t("saveBeforeTranslate"));
-            return;
-          }
-
-          if (!translationModalVisible) {
-            setTranslationModalVisible(true);
-          }
-        }}
-      >
-        <TextArea
-          value={value}
-          onChange={(event: any) => {
-            onChange?.(event.target.value);
-          }}
-          style={{
-            height: height ? height + "px" : "100%",
-            cursor: "pointer",
-            pointerEvents: "none",
-            ...requiredStyle,
-          }}
-          id={field}
-          disabled={true}
-          rows={4}
-          onBlur={elementHasLostFocus}
-        />
-      </div>
-      <TranslationModal
-        id={activeId!}
-        model={activeModel}
-        field={field}
-        visible={translationModalVisible}
-        onCloseModal={() => {
-          setTranslationModalVisible(false);
-        }}
-        onSubmitSucceed={() => {
-          setTranslationModalVisible(false);
-          fetchValues?.();
-        }}
-      />
-    </>
-  );
-};
-
-export default Text;

package/src/widgets/base/Time.tsx

@@ -1,41 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
-import { TimePicker, theme } from "antd";
-import Field from "@/common/Field";
-import { Time as TimeOoui } from "@gisce/ooui";
-import { WidgetProps } from "@/types";
-import dayjs from "dayjs";
-import { Dayjs } from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat'
-
-
-dayjs.extend(customParseFormat)
-
-const Time = (props: WidgetProps) => {
-  const { ooui } = props;
-
-  return (
-    <Field {...props}>
-      <TimeInput ooui={ooui as TimeOoui} />
-    </Field>
-  );
-};
-
-type TimeInputProps = {
-  ooui: TimeOoui;
-  value?: string;
-  onChange?: (value?: string) => void;
-}
-
-export const TimeInput = (props: TimeInputProps) => {
-
-  const onChange = (time: Dayjs | null, timestring: string) => {
-    if (props.onChange) {
-      props.onChange(timestring)
-    }
-  }
-
-  return <TimePicker onChange={onChange} value={props.value ? dayjs(props.value, 'HH:mm:ss') : undefined} />
-
-}
-
-export default Time;