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

package/src/widgets/custom/FiberGrid.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import Field from "@/common/Field";
-import { Char as CharOoui } from "@gisce/ooui";
-import { WidgetProps } from "@/types";
-import { GridUi } from "@gisce/fiber-diagram";
-
-export const FiberGrid = (props: WidgetProps) => {
-  const { ooui } = props;
-  const { required } = ooui as CharOoui;
-
-  return (
-    <Field required={required} {...props}>
-      <FiberGridInput />
-    </Field>
-  );
-};
-
-interface FiberGridInputProps {
-  value?: string;
-  onChange?: (value: string) => void;
-}
-
-export const FiberGridInput = (props: FiberGridInputProps) => {
-  const { value, onChange } = props;
-
-  if (!value) {
-    return null;
-  }
-
-  // Validate string json
-  try {
-    JSON.parse(value);
-  } catch (e) {
-    console.log(e);
-    return null;
-  }
-
-  return (
-    <GridUi
-      inputJson={value}
-      onChange={(newValue) => {
-        if (onChange) {
-          onChange(newValue);
-        }
-      }}
-    />
-  );
-};

package/src/widgets/custom/Indicator.tsx

@@ -1,67 +0,0 @@
-import React from "react";
-import { Tooltip, theme } from "antd";
-import { Statistic, Card } from "antd";
-import { Indicator as IndicatorOoui } from "@gisce/ooui";
-import { WidgetProps } from "@/types";
-import Field from "@/common/Field";
-import { QuestionCircleOutlined } from "@ant-design/icons";
-import iconMapper from "@/helpers/iconMapper";
-const { useToken } = theme;
-
-type IndicatorProps = WidgetProps & {
-  ooui: IndicatorOoui;
-  value?: number;
-};
-
-export const Indicator = (props: IndicatorProps) => {
-  const { ooui } = props;
-
-  return (
-    <Field ooui={ooui}>
-      <IndicatorInput ooui={ooui} />
-    </Field>
-  );
-};
-
-type IndicatorInputProps = {
-  ooui: IndicatorOoui;
-  value?: any;
-};
-
-const IndicatorInput = (props: IndicatorInputProps) => {
-  const { token } = useToken();
-  const { ooui, value } = props;
-  const title = (
-    <>
-      <span>{ooui.label} </span>
-      {ooui.tooltip && (
-        <Tooltip title={ooui.tooltip}>
-          <QuestionCircleOutlined
-            className="pr-1 text-xs"
-            style={{ color: token.colorPrimaryBg }}
-          />
-        </Tooltip>
-      )}
-    </>
-  );
-  const Icon: React.ElementType = iconMapper(ooui.icon) as any;
-  let formattedValue = value;
-  if (ooui.selectionValues.size) {
-    formattedValue = ooui.selectionValues.get(value);
-  } else if (Array.isArray(value)) {
-    formattedValue = value[1];
-  }
-  const field = (
-    <Statistic
-      title={title}
-      prefix={Icon && <Icon />}
-      suffix={ooui.suffix}
-      value={formattedValue}
-    />
-  );
-  if (ooui.card) {
-    return <Card>{field}</Card>;
-  } else {
-    return field;
-  }
-};

package/src/widgets/custom/Markdown.tsx

@@ -1,22 +0,0 @@
-import Field from "@/common/Field";
-import ReactMarkdown from "react-markdown";
-import React from "react";
-import {WidgetProps} from "@/types";
-
-export  const Markdown = (props: WidgetProps) => {
-  return (
-    <Field {...props}>
-      <MarkdownInput {...props} />
-    </Field>
-  );
-};
-
-export const MarkdownInput = (props: any) => {
-  const {value, ooui} = props;
-  return (
-    <div style={{height: ooui.height ? ooui.height + 'px' : '100%', overflow: 'auto'}}>
-      <ReactMarkdown children={value} className="ant-typography"/>
-    </div>
-
-  )
-}

package/src/widgets/custom/MultiCheckbox.tsx

@@ -1,165 +0,0 @@
-import React, { useContext, useState } from "react";
-import { MultiCheckbox as MultiCheckboxOoui } from "@gisce/ooui";
-import Field from "@/common/Field";
-import { One2manyItem, One2manyValue } from "../base/one2many/One2manyInput";
-import useDeepCompareEffect from "use-deep-compare-effect";
-import { FormContext, FormContextType } from "@/context/FormContext";
-import { Alert, Checkbox, Spin, Col, Row, Button, Space } from "antd";
-import ConnectionProvider from "@/ConnectionProvider";
-import { transformPlainMany2Ones } from "@/helpers/formHelper";
-
-type MultiCheckboxProps = {
-  ooui: MultiCheckboxOoui;
-};
-
-type MultiCheckboxInputProps = MultiCheckboxProps & {
-  value?: One2manyValue;
-  onChange?: (value: One2manyValue) => void;
-};
-
-export const MultiCheckbox = (props: MultiCheckboxProps) => {
-  const { ooui } = props;
-
-  return (
-    <Field type={"array"} {...props}>
-      <MultiCheckboxInput ooui={ooui} />
-    </Field>
-  );
-};
-
-export const MultiCheckboxInput = (props: MultiCheckboxInputProps) => {
-  const { value, ooui, onChange } = props;
-  const { items = [] } = value || {};
-  const itemsToShow = items
-    .filter((item) => item.operation !== "pendingRemove")
-    .map((item) => item.id) as number[];
-
-  const [options, setOptions] = useState<any[]>([]);
-  const [error, setError] = useState<string>();
-  const [isLoadingOptions, setIsLoadingOptions] = useState<boolean>(false);
-  const { relation, context, readOnly, field, columns } = ooui;
-
-  const formContext = useContext(FormContext) as FormContextType;
-  const { getContext } = formContext || {};
-
-  useDeepCompareEffect(() => {
-    fetchOptions();
-  }, [items]);
-
-  const triggerChange = (changedValue: Array<One2manyItem>) => {
-    onChange?.({
-      items: changedValue,
-    });
-  };
-
-  async function fetchOptions() {
-    setIsLoadingOptions(true);
-    let params: any = [];
-    if (ooui.domain) {
-      const evaluatedDomain = await ConnectionProvider.getHandler().evalDomain({
-        domain: ooui.domain,
-        values: transformPlainMany2Ones({
-          fields: formContext?.getFields(),
-          values: formContext.getPlainValues(),
-        }),
-        fields: formContext?.getFields(),
-        context: formContext.getContext(),
-      });
-      params = [...params, ...evaluatedDomain];
-    }
-    try {
-      const optionsRead = await ConnectionProvider.getHandler().search({
-        model: relation,
-        params: params,
-        fields: [field],
-        context: { ...getContext?.(), ...context },
-      });
-      const options = optionsRead.map((item: any) => {
-        const value = item[field];
-        let formattedValue = value;
-        if (Array.isArray(value)) {
-          formattedValue = value[1];
-        }
-        return { label: formattedValue, value: item.id };
-      });
-      setOptions(options);
-    } catch (err) {
-      setError(err as any);
-    } finally {
-      setIsLoadingOptions(false);
-    }
-    if (error) {
-      return <Alert className="mt-10" message={error} type="error" banner />;
-    }
-  }
-
-  const checkAll = () => {
-    onChangeSelected(options.map((option) => option.value));
-  };
-
-  const uncheckAll = () => {
-    onChangeSelected([]);
-  };
-
-  const onChangeSelected = (ids: any[]) => {
-    const newItems: One2manyItem[] = items.map((item) => {
-      if (ids.includes(item.id as number)) {
-        if (item.operation == "pendingRemove") {
-          return {
-            ...item,
-            operation: "original",
-          };
-        } else {
-          return item;
-        }
-      } else {
-        return { id: item.id, operation: "pendingRemove" };
-      }
-    });
-    const currentIds = newItems.map((item) => item.id);
-    ids
-      .filter((id) => !currentIds.includes(id))
-      .map((id) => {
-        newItems.push({ id, operation: "pendingLink" });
-      });
-    triggerChange(newItems);
-  };
-
-  if (isLoadingOptions && options.length === 0) {
-    return <Spin />;
-  }
-
-  return (
-    <>
-      <div className="flex flex-row">
-        <Checkbox.Group
-          value={options.length ? itemsToShow : []}
-          disabled={readOnly}
-          onChange={onChangeSelected}
-          style={{ width: "100%" }}
-        >
-          <Row>
-            {options.map((option) => (
-              <Col span={Math.floor(24 / columns)}>
-                <Checkbox value={option.value}>{option.label}</Checkbox>
-              </Col>
-            ))}
-          </Row>
-        </Checkbox.Group>
-        {!readOnly && (
-          <Space>
-            <Button
-              onClick={checkAll}
-              disabled={itemsToShow.length == options.length}
-            >
-              Check all
-            </Button>
-            <Button onClick={uncheckAll} disabled={itemsToShow.length === 0}>
-              Uncheck all
-            </Button>
-          </Space>
-        )}
-      </div>
-    </>
-  );
-};

package/src/widgets/custom/Radio.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import { Radio as RadioAnt, Space } from "antd";
-
-import Field from "@/common/Field";
-import { Radio as RadioOoui } from "@gisce/ooui";
-import { WidgetProps } from "@/types";
-
-export const Radio = (props: WidgetProps) => {
-  const { ooui } = props;
-  const { required } = ooui;
-
-  return (
-    <Field required={required} type={"any"} {...props}>
-      <SelectionInput {...props} />
-    </Field>
-  );
-};
-
-type RadioInputProps = WidgetProps & {
-  onChange?: (value: any) => void;
-  value?: string;
-};
-
-export const SelectionInput = (props: RadioInputProps) => {
-  const { ooui, onChange, value } = props;
-  const { selectionValues, readOnly, direction } = ooui as RadioOoui;
-
-  const values = Array.from(selectionValues.entries());
-
-  const options =
-    values &&
-    values.length &&
-    values.map((entry: string[]) => {
-      const [key, value] = entry;
-      return (
-        <RadioAnt key={key} value={key}>
-          {value}
-        </RadioAnt>
-      );
-    });
-
-  return (
-    <RadioAnt.Group disabled={readOnly} onChange={onChange} value={value}>
-      <Space direction={direction}>
-        {options}
-      </Space>
-    </RadioAnt.Group>
-  );
-};

package/src/widgets/custom/Steps.tsx

@@ -1,55 +0,0 @@
-import React, { useContext } from "react";
-import { Steps as AntdSteps } from "antd";
-import { FormContext, FormContextType } from "@/context/FormContext";
-import Field from "@/common/Field";
-import { Steps as StepsOoui } from "@gisce/ooui";
-
-type StepsProps = {
-  ooui: StepsOoui;
-  value: any,
-}
-
-type StatusType = 'wait' | 'process' | 'finish' | 'error';
-
-
-export const Steps = (props: StepsProps) => {
-  const { ooui } = props;
-  const { required } = ooui;
-
-  return (
-    <Field required={required} type={"any"} {...props}>
-      <StepsInput {...props} />
-    </Field>
-  );
-};
-
-type StepsInputProps = StepsProps & {
-  value?: any;
-};
-
-export const StepsInput = (props: StepsInputProps) => {
-  const { ooui, value } = props;
-  const { selectionValues, errorField } = ooui as StepsOoui;
-  const formContext = useContext(FormContext) as FormContextType;
-
-  const values = Array.from(selectionValues.entries());
-  const current = values.map(val => val[0]).indexOf(value);
-  let status: StatusType = "process";
-  let error = "";
-  
-  if (errorField) {
-    error = formContext.getFieldValue(errorField);
-    if (error) {
-      status = "error";
-    }
-  }
-
-
-  return (
-    <AntdSteps current={current} status={status}>
-      {values.map((val, idx) => (
-        <AntdSteps.Step title={val[1]} description={idx === current && status === "error" ? error : null}/>
-      ))}
-    </AntdSteps>
-  );
-};

package/src/widgets/custom/Switch.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { Switch as AntdSwitch } from "antd";
-
-import Field from "@/common/Field";
-import { WidgetProps } from "@/types";
-
-export const Switch = (props: WidgetProps) => {
-  const { ooui } = props;
-  const { id, readOnly, required } = ooui;
-
-  return (
-    <Field
-      {...props}
-      valuePropName="checked"
-    >
-      <SwitchInput id={id} readOnly={readOnly} required={required} />
-    </Field>
-  );
-};
-
-const SwitchInput = (props: any) => {
-  const { required, readOnly, ...restProps } = props;
-
-
-  return (
-    <div className="flex flex-row">
-      <AntdSwitch disabled={readOnly} {...restProps} />
-    </div>
-  );
-};

package/src/widgets/custom/Tag.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import Field from "@/common/Field";
-import { WidgetProps } from "@/types";
-import { Tag as AntdTag, TagProps } from 'antd';
-import { isPresetStatusColor, isPresetColor } from 'antd/lib/_util/colors'
-import { colorFromString } from "@/helpers/formHelper";
-
-export const Tag = (props: WidgetProps) => {
-  return (
-    <Field {...props}>
-      <TagInput {...props}/>
-    </Field>
-  );
-};
-
-export const TagInput = (props: any) => {
-  const {ooui, value} = props;
-  let formattedValue = value;
-  let colorValue = value;
-  if (ooui.selectionValues.size) {
-    formattedValue = ooui.selectionValues.get(value);
-  } else if (Array.isArray(value)) {
-    colorValue = value[0];
-    formattedValue = value[1];
-  }
-  if (!value) {
-    return null
-  }
-  const color = ooui.colors === "auto" ? colorFromString(colorValue) : ooui.colors[colorValue] || colorFromString(colorValue);
-  return (
-    <CustomTag color={color}>{formattedValue}</CustomTag>
-  );
-}
-
-
-export const CustomTag = (props: TagProps) => {
-  let { color } = props;
-  let style = {}
-  if (!isPresetStatusColor(props.color) && !isPresetColor(props.color)) {
-    style = {
-      color: color,
-      borderColor: color,
-      borderStyle: "solid",
-      borderWidth: "1px",
-    }
-    color = `${color}20`;
-  }
-  return <AntdTag {...props} style={style} color={color}>{props.children}</AntdTag>
-}

package/src/widgets/custom/Tags.tsx

@@ -1,164 +0,0 @@
-import React, { useContext, useState } from "react";
-import { Tags as TagsOoui } from "@gisce/ooui";
-import Field from "@/common/Field";
-import { WidgetProps } from "@/types";
-import { One2manyItem, One2manyValue } from "../base/one2many/One2manyInput";
-import useDeepCompareEffect from "use-deep-compare-effect";
-import { FormContext, FormContextType } from "@/context/FormContext";
-import { Alert, Select } from "antd";
-import { colorFromString, transformPlainMany2Ones } from "@/helpers/formHelper";
-import ConnectionProvider from "@/ConnectionProvider";
-import { CustomTag } from "@/widgets/custom/Tag";
-
-type TagsProps = WidgetProps & {
-  ooui: TagsOoui;
-};
-
-type TagsInputProps = TagsProps & {
-  value?: One2manyValue;
-  onChange?: (value: One2manyValue) => void;
-};
-
-export const Tags = (props: TagsProps) => {
-  const { ooui } = props;
-
-  return (
-    <Field type={"array"} {...props}>
-      <TagsInput ooui={ooui} />
-    </Field>
-  );
-};
-
-export const TagsInput = (props: TagsInputProps) => {
-  const { value, ooui, onChange } = props;
-  const { items = [] } = value || {};
-  const itemsToShow = items
-    .filter((item) => item.operation !== "pendingRemove")
-    .map((item) => item.id) as number[];
-
-  const [options, setOptions] = useState<any[]>([]);
-  const [error, setError] = useState<string>();
-  const [isLoadingOptions, setIsLoadingOptions] = useState<boolean>(false);
-  const { relation, context, readOnly, field } = ooui;
-
-  const formContext = useContext(FormContext) as FormContextType;
-  const { getContext } = formContext || {};
-
-  useDeepCompareEffect(() => {
-    fetchOptions();
-  }, [items]);
-
-  const triggerChange = (changedValue: Array<One2manyItem>) => {
-    onChange?.({
-      items: changedValue,
-    });
-  };
-
-  async function fetchOptions() {
-    setIsLoadingOptions(true);
-    let params: any[] = [];
-    try {
-      if (readOnly) {
-        params = [["id", "in", itemsToShow]];
-      }
-      if (ooui.domain) {
-        const evaluatedDomain =
-          await ConnectionProvider.getHandler().evalDomain({
-            domain: ooui.domain,
-            values: transformPlainMany2Ones({
-              fields: formContext?.getFields(),
-              values: formContext.getPlainValues(),
-            }),
-            fields: formContext?.getFields(),
-            context: formContext.getContext(),
-          });
-        params = [...params, ...evaluatedDomain];
-      }
-
-      const optionsRead = await ConnectionProvider.getHandler().search({
-        model: relation,
-        params: params,
-        fields: [field],
-        context: { ...getContext?.(), ...context },
-      });
-      const options = optionsRead.map((item: any) => {
-        const value = item[field];
-        let formattedValue = value;
-        if (Array.isArray(value)) {
-          formattedValue = value[1];
-        }
-        return { label: formattedValue, value: item.id };
-      });
-      setOptions(options);
-    } catch (err) {
-      setError(err as any);
-    } finally {
-      setIsLoadingOptions(false);
-    }
-  }
-
-  const onChangeSelected = (ids: number[]) => {
-    const newItems: One2manyItem[] = items.map((item) => {
-      if (ids.includes(item.id as number)) {
-        if (item.operation == "pendingRemove") {
-          return {
-            ...item,
-            operation: "pendingLink",
-          };
-        } else {
-          return item;
-        }
-      } else {
-        return { id: item.id, operation: "pendingRemove" };
-      }
-    });
-    const currentIds = newItems.map((item) => item.id);
-    ids
-      .filter((id) => !currentIds.includes(id))
-      .map((id) => {
-        newItems.push({ id, operation: "pendingLink" });
-      });
-    triggerChange(newItems);
-  };
-
-  const tagRender = (props: any) => {
-    const { label, closable, onClose } = props;
-    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    const color = colorFromString(label);
-    return (
-      <CustomTag
-        color={color}
-        onMouseDown={onPreventMouseDown}
-        closable={closable}
-        onClose={onClose}
-        closeIcon={<span style={{color}}>X</span>}
-      >
-        {label}
-      </CustomTag>
-    );
-  };
-
-  if (error) {
-    return <Alert className="mt-10" message={error} type="error" banner />;
-  }
-
-  return (
-    <>
-      <div className="flex flex-row">
-        <Select
-          mode="multiple"
-          value={options.length ? itemsToShow : []}
-          tagRender={tagRender}
-          bordered={!readOnly}
-          disabled={readOnly}
-          options={options}
-          onChange={onChangeSelected}
-          loading={isLoadingOptions}
-        ></Select>
-      </div>
-    </>
-  );
-};