frontend/src/modules/EditItemModal/components/EditForm/Control/Control.tsx - master - softailor/gridient

frontend/src/modules/EditItemModal/components/EditForm/Control/Control.tsx
190 строк5 KB
Jenkins
Auto add
18 фев 2026, 10:19
18 фев 2026, 10:191e6c4f8
import { FC } from "react";

import { Checkbox, DatePicker, Form, Input, InputNumber, Select } from "antd";
import "dayjs/locale/ru";

import { FieldType } from "consts";
import { Field, FormItem } from "models";
import { useGetLookupValuesQuery } from "services";
import { UsersSearch, UploadField } from "ui";

import { formatNumber } from "utils/formatters/formatNumber";

import { conditionCheck, getRules } from "../../../utils";

type ControlProps = {
  field: Field;
  fields: Field[];
  formData?: FormItem[];
  listId?: number;
  itemId?: number;
  handleChangeField: (field: Field, value: unknown) => void;
};

export const Control: FC<ControlProps> = (props) => {
  const { field, fields, formData, listId, itemId, handleChangeField } = props;

  const { data: lookupValues } = useGetLookupValuesQuery(
    { listId: listId!, fieldId: field.lookupFieldId },
    {
      skip: field.fieldType !== FieldType.Lookup || !listId,
    },
  );

  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === "Enter") {
      event.preventDefault();
    }
  };

  const choiceOptions = () => {
    if (field.options) {
      const options = field.options.split(";").map((option) => ({
        value: option,
        label: option,
      }));
      return !field.requiredCondition ? [{ label: "", value: "" }, ...options] : options;
    }
    return [];
  };

  const lookupOptions = () => {
    if (lookupValues) {
      const options = lookupValues
        .map((item) => ({
          label: item.value,
          value: item.id.toString(),
        }))
        .sort((a, b) => a.label.localeCompare(b.label));
      return !field.requiredCondition ? [{ label: "", value: "" }, ...options] : options;
    }
    return [];
  };

  const multiChoiceOptions = field.options
    ? field.options.split(";").map((item) => {
        return {
          label: item,
          value: item,
        };
      })
    : [];

  const renderComponentByType = () => {
    switch (field.fieldType) {
      case FieldType.Boolean:
        return <Checkbox onChange={(event) => handleChangeField(field, event.target.checked)} />;
      case FieldType.Choice:
        return (
          <Select options={choiceOptions()} onChange={(value) => handleChangeField(field, value)} />
        );
      case FieldType.Lookup:
        return (
          <Select options={lookupOptions()} onChange={(value) => handleChangeField(field, value)} />
        );
      case FieldType.Date:
        return (
          <DatePicker
            format={{
              format: field.options ?? "DD.MM.YYYY",
              type: "mask",
            }}
            showTime={
              field.options
                ? {
                    showHour: field.options.toLocaleLowerCase().includes("h"),
                    showMinute: field.options.includes("m"),
                    showSecond: field.options.includes("s"),
                  }
                : false
            }
            onChange={(value) => handleChangeField(field, value)}
          />
        );
      case FieldType.User:
        return (
          <UsersSearch
            mode="multiple"
            onChange={(value) => handleChangeField(field, value)}
            maxCount={field.options !== null ? Number(field.options) : undefined}
          />
        );
      case FieldType.File:
        return (
          <UploadField
            listId={listId}
            itemId={itemId}
            onChange={(value) => handleChangeField(field, value)}
          />
        );
      case FieldType.MultiChoice:
        return (
          <Checkbox.Group
            options={multiChoiceOptions}
            onChange={(value) => handleChangeField(field, value as string[])}
          />
        );
      case FieldType.Note:
        return (
          <Input.TextArea
            rows={4}
            onChange={(event) => handleChangeField(field, event.target.value)}
          />
        );
      case FieldType.Number:
        return (
          <InputNumber<number>
            style={{ width: 200 }}
            min={0}
            step={field.options === "Decimal" ? 0.01 : 1}
            disabled={!!field.calculatingCondition}
            onKeyDown={handleKeyDown}
            onChange={(value) => handleChangeField(field, value)}
            decimalSeparator=","
            controls={false}
            formatter={(value) => {
              if (value === undefined || value === null) return "";
              return formatNumber(value, field.options ?? undefined);
            }}
            parser={(value) => {
              if (!value) return 0;

              const cleanedValue = value
                .replace(/\s/g, "")
                .replace("₽", "")
                .replace("$", "")
                .replace("%", "")
                .replace(",", ".");

              return Number(cleanedValue);
            }}
          />
        );

      case FieldType.Text:
        return (
          <Input
            onKeyDown={handleKeyDown}
            onChange={(event) => handleChangeField(field, event.target.value)}
          />
        );
      default:
        return field.title;
    }
  };

  if (conditionCheck(field.visibleCondition, formData, fields)) {
    return (
      <Form.Item
        label={field.title}
        name={field.name}
        rules={getRules(field, formData, fields)}
        valuePropName={field.fieldType === FieldType.Boolean ? "checked" : undefined}
      >
        {renderComponentByType()}
      </Form.Item>
    );
  }

  return null;
};