@gisce/react-ooui 2.0.0-alpha.61 → 2.0.0-alpha.63

package/src/widgets/custom/Comments.tsx

@@ -1,147 +0,0 @@
-import { Fragment, useContext } from "react";
-import Field from "@/common/Field";
-import { WidgetProps } from "@/types";
-import {
-  Card,
-  Space,
-  Typography,
-  Avatar,
-  Tag,
-  Timeline,
-  TimelineItemProps,
-} from "antd";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-
-import dayjs from "@/helpers/dayjs";
-import md5 from "md5";
-
-const { Meta } = Card;
-const { Text } = Typography;
-
-type GravatarProps = {
-  email: string;
-  size?: number;
-  theme: string;
-};
-
-type CommentDataType = {
-  id: number;
-  isSender: boolean;
-  isAuthor: boolean;
-  text: string;
-  email: string;
-  date: string;
-  author: string;
-};
-
-type CommentProps = {
-  data: CommentDataType;
-  style?: any;
-};
-
-type CommentsTypeProps = {
-  data: CommentDataType[];
-};
-
-type CommentsTimelineProps = {
-  value?: EventsType[];
-};
-
-type EventActionType = {
-  date: string;
-  action: string;
-};
-
-export type EventsType = {
-  type: "action" | "comment";
-  event: EventActionType | CommentDataType;
-};
-
-const Gravatar = ({ email, size = 40, theme = "" }: GravatarProps) => {
-  // Genera el enlace de Gravatar utilizando el email
-  const gravatarUrl = `https://www.gravatar.com/avatar/${md5(
-    email,
-  )}?s=${size}&d=${theme}`;
-
-  return <Avatar src={gravatarUrl} size={size} />;
-};
-
-function TextWithNewlines({ text }: { text: string }) {
-  const textParts = text.split("\n");
-
-  return (
-    <div>
-      {textParts.map((part, index) => (
-        <Fragment key={index}>
-          {part}
-          {index !== textParts.length - 1 && <br />}
-        </Fragment>
-      ))}
-    </div>
-  );
-}
-
-export const Comment = (props: CommentProps) => {
-  const { data, style } = props;
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-  return (
-    <Card key={data.id} style={{ ...style, ...{ textAlign: "start" } }}>
-      <Meta
-        avatar={<Gravatar email={data.email} theme="mp" />}
-        title={data.author}
-        description={
-          <Space direction="horizontal">
-            <span title={data.date}>{dayjs(data.date).fromNow()}</span>
-            {data.isAuthor && <Tag color="blue">{t("author")}</Tag>}
-          </Space>
-        }
-        style={{ marginBottom: "5px" }}
-      />
-      <Text>
-        <TextWithNewlines text={data.text} />
-      </Text>
-    </Card>
-  );
-};
-
-export const Comments = (props: CommentsTypeProps) => {
-  const { data = [] } = props;
-  const comments = data.map((c) => {
-    const style = { float: c.isSender ? "right" : "left", width: "60%" };
-    return <Comment data={c} style={style} />;
-  });
-  return (
-    <div>
-      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
-        {comments}
-      </Space>
-    </div>
-  );
-};
-
-export const CommentsTimeline = (props: CommentsTimelineProps) => {
-  const { value } = props;
-  const items = (value || []).map((i) => {
-    if (i.type === "action") {
-      return {
-        children: `${i.event.date} - ${(i.event as EventActionType).action}`,
-      };
-    } else if (i.type === "comment") {
-      return {
-        color: "gray",
-        position: (i.event as CommentDataType).isSender ? "left" : "right",
-        label: i.event.date,
-        children: <Comment data={i.event as CommentDataType} />,
-      };
-    }
-  });
-  return <Timeline mode="alternate" items={items as TimelineItemProps[]} />;
-};
-
-export const CommentsTimelineField = (props: WidgetProps) => {
-  return (
-    <Field {...props}>
-      <CommentsTimeline />
-    </Field>
-  );
-};

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,66 +0,0 @@
-import React from "react";
-import { Tooltip, theme, 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,32 +0,0 @@
-import Field from "@/common/Field";
-import ReactMarkdown from "react-markdown";
-import React from "react";
-import { WidgetProps } from "@/types";
-import remarkGfm from "remark-gfm";
-
-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
-        remarkPlugins={[remarkGfm]}
-        className="markdown-typography"
-      >
-        {value}
-      </ReactMarkdown>
-    </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: 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,
-        fieldsToRetrieve: [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,47 +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,56 +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,26 +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,53 +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,
-      borderColor: color,
-      borderStyle: "solid",
-      borderWidth: "1px",
-    };
-    color = `${color}20`;
-  }
-  return (
-    <AntdTag {...props} style={style} color={color}>
-      {props.children}
-    </AntdTag>
-  );
-};