useUiModificationsApi

useUiModificationsApi 用于修改team表单的值，需要配合proxima:uiModifications模块使用

用法

useUiModificationsApi方法，其中有onInit，onChange，onFocus三种方法。

onInit

如下代码，当初次加载事项新建/编辑弹窗或者事项查看页面时，如果界面包含了优先级字段，则会执行onInit中的回调代码，将标题进行修改。

import React, { useEffect } from "react";
import { useUiModificationsApi } from "@giteeteam/plugin-sdk";

const Demo = (props) => {
  const { onInit } = useUiModificationsApi();

  useEffect(() => {
    onInit(
      async ({ api, context, formData }) => {
        const nameField = api.getFieldByKey("name");
        if (nameField) {
          console.log("name", nameField.getValue());
          nameField.setValue(`这是一个随机的标题：${Date.now()}`);
        }
      },
      () => {
        return {
          fields: ["priority"], // 监听优先级字段
        };
      }
    );
  }, [])

  return <div></div>;
};

export default Demo;

onChange

如下代码，在修改优先级字段的时候，会执行onChange中的回调代码，对标题进行修改。

import React, { useEffect } from "react";
import { useUiModificationsApi } from "@giteeteam/plugin-sdk";

const Demo = (props) => {
  const { onChange } = useUiModificationsApi();

  useEffect(() => {
    onChange(
      async ({ api, context, change }) => {
        const nameField = api.getFieldByKey("name");
        if (nameField) {
          console.log("name", nameField.getValue());
          nameField.setValue(`这是一个随机的标题：${Date.now()},，优先级改成了${change.value}`);
        }
      },
      () => {
        return {
          fields: ["priority"], // 监听优先级字段
        };
      }
    );
  }, [])

  return <div></div>;
};

export default Demo;

onFocus

如下代码，会在字段获得焦点的时候触发，从而设置选项的数据

import React, { useEffect } from "react";
import { useUiModificationsApi } from "@giteeteam/plugin-sdk";

const Demo = (props) => {
  const { onFocus } = useUiModificationsApi();

  useEffect(() => {
    onFocus(
      async ({ api, context, formData, focus }) => {
        const searchData = api.getSearchData() ?? {}; // 获取搜索的keyword
        const data = await fetch(); // 可以根据第三方接口获取数据
        const field = api.getFieldByKey(focus.fieldKey);
        field?.setFieldOptions(data);
      },
      () => {
        return {
          fields: ["priority"], // 监听优先级字段
        };
      }
    );
  }, [])

  return <div></div>;
};

export default Demo;

useUiModificationsApi参数

useUiModificationsApi 中包含onInit，onChange，onFocus。

interface UIMFieldApi {
  getKey: () => string;
  getType: () => string;
  setValue: (value: any) => UIMFieldApi;
  getValue: () => any;
}

interface UIMApi {
  getFieldByKey: (fieldKey: string) => UIMFieldApi | undefined;
  getFields: () => UIMFieldApi[];
}

interface UIMContext {
  itemType: string;
  mode: string;
  workspaceKey: string;
}

// OnInit的回调函数
type UIMOnInitCallback = (params: {
  api: UIMApi;
  context: UIMContext;
  formData: Record<string, any>;
}) => Promise<void> | void;

// OnChange的回调函数
type UIMOnChangeCallback = (params: {
  api: UIMApi;
  context: UIMContext;
  formData: Record<string, any>;
  change: { fieldKey: string; fieldType: string; value: any };
}) => Promise<void> | void;

// onFocus的回调函数
type UIMOnFocusCallback = (params: {
  api: UIMApi;
  context: UIMContext;
  formData: Record<string, any>;
  focus: { fieldKey: string; fieldType: string; value: any };
}) => Promise<void> | void;

interface UIMDeclared {
  fields?: string[];
}
// 声明的依赖字段，返回一个函数
type UIMDeclaredCallback = () => UIMDeclared;

// onInit方法参数
type OnInit = (initCallback: UIMOnInitCallback, declaredCallback: UIMDeclaredCallback) => void

// onChange方法参数
type onChange = (changeCallback: UIMOnChangeCallback, declaredCallback: UIMDeclaredCallback) => void

// onFocus方法参数
type onFocus = (onFocusCallback: UIMOnFocusCallback, registerOnFocusDeclaredCallback: UIMDeclaredCallback) => void