nowrapper-json/lib/antd/repeater.d.ts

nowrapper

import React from "react";
import FormCore, { FormConfig } from "noform-json/lib/core/form";
import { FormProps } from "noform-json/lib/component/Form";
import React from "react";
import { ModalProps } from "antd/lib/modal";
import RepeaterCore from "noform-json/lib/repeater/repeaterCore";
import { TableProps, ColumnProps } from "antd/lib/table";
import { Status } from "noform-json/lib/component/FormItem";
import Core from "noform-json/lib/core/form";

interface FormStyleConfig {
  name: string;
  label: string;
  prefix: string;
  suffix: string;
  multiple: boolean;
  renderCell: () => any;
  style: React.CSSProperties;
  status: Status;
  className: string;
}

/**
 * 更新触发器的类型
 */
type AsyncHandler = (
  values: { [key: string]: any },
  core: FormCore,
  index: number,
  repeaterCore: RepeaterCore
) => Promise<
  | boolean
  | { success: boolean; values?: any[] }
  | { success: boolean; item?: any }
>;
/**
 * 更新触发器的类型，增、更新、保存、删除时触发
 */
interface IAsyncHandler {
  add?: AsyncHandler;
  update?: AsyncHandler;
  save?: AsyncHandler;
  remove?: AsyncHandler;
}

interface RepeaterProps {
  /** 自定义校验 */
  validate?: (cb?: any, opts?: any) => Promise<string | null>;
  /**
   * 自定义渲染视图
   */
  view?: (
    formCoreList: Array<{
      value: { core: FormCore };
    }>,
    repeaterCore: InlineRepeater
  ) => React.ReactNode;
  /**
   * 底部
   */
  top?: () => React.ReactNode;
  /**
   * 底部
   */
  bottom?: () => React.ReactNode;
  /**
   * 自定义操作按钮渲染
   */
  renderOper?: (
    btnList: {
      saveBtn: React.ReactNode;
      cancelBtn: React.ReactNode;
      updateBtn: React.ReactNode;
      deleteBtn: React.ReactNode;
    },
    core: FormCore
  ) => React.ReactNode;
  /**
   * 是否有增加按钮
   */
  hasAdd?: boolean;
  /**
   * 是否有更新按钮
   */
  hasUpdate?: boolean;
  /**
   * 是否有删除按钮
   */
  hasDelete?: boolean;
  /**
   * 是否有头部
   */
  hasHeader?: boolean;
  /**
   * 删除是否要确认
   */
  hasDeleteConfirm?: boolean;
  /**
   * 添加按钮的位置，顶部或底部
   */
  addPosition?: "top" | "bottom";
  /**
   * multiple 模式
   */
  multiple?: boolean;
  /** 增加行不触发校验 */
  silent?: boolean;
  /**
   * 最大添加多少个
   */
  maxLength?: number;
  /**
   * 文本样式
   */
  itemAlign?: "left" | "center" | "right";
  /**
   * 增加按钮的文案
   */
  addText?: string | React.ReactNode;
  /**
   * 更新按钮的文案
   */
  updateText?: string | React.ReactNode;
  /**
   * 保存按钮的文案
   */
  saveText?: string | React.ReactNode;
  /**
   * 取消按钮的文案
   */
  cancelText?: string | React.ReactNode;
  /**
   * 删除按钮的文案
   */
  deleteText?: string | React.ReactNode;
  /**
   * 操作按钮的文案
   */
  operateText?: string | React.ReactNode;
  /**
   * 更新触发器
   */
  asyncHandler?: IAsyncHandler;
  /**
   * 弹窗配置
   */
  dialogConfig?: FormProps & {
    custom: (
      core: FormCore,
      type: "add" | "remove" | "delete" | "update",
      props: { [key: string]: any }
    ) => ModalProps;
  };
  /**
   * 内部每一行的 FormCore 的配置
   */
  formConfig?: FormConfig;
  /**
   * repeater挂在时触发
   */
  onMount?: (repeaterCore: RepeaterCore) => void;
  /**
   * 语言
   */
  locale?: "zh" | "en";
  /**
   * Selectify 模式适用：
   */
  /**
   * 单选模式、多选模式
   */
  selectMode?: "single" | "multiple";
  /**
   * Selectify 模式适用：
   */
  /**
   * 每行的key
   */
  selectKey?: string;
  /**
   * InlineRepeater 的 onChange
   */
  onChange?: (val: any[], opts?: any) => void;
  /** 每行 Form 的 props */
  formProps?: FormProps & { core: never };
  /** 新增项的位置 */
  addFrom?: "start" | "end";
}
export class InlineRepeater extends React.Component<RepeaterProps, any> {
  /** 获取Form的样式相关配置 */
  getItemsConfig: (rowIndex?: number) => FormStyleConfig;
  /** 获取每行的表单值 */
  getDataSource: () => Array<{ [key: string]: any }>;
  /** 获取每行的FormCore */
  getCoreList: () => Array<FormCore>;
}
export class TableRepeater extends React.Component<RepeaterProps, any> {
  /** 获取Form的样式相关配置 */
  getItemsConfig: (rowIndex?: number) => FormStyleConfig;
  /** 获取每行的表单值 */
  getDataSource: () => Array<{ [key: string]: any }>;
  /** 获取每行的FormCore */
  getCoreList: () => Array<FormCore>;
}
export const Selectify: (
  repeater: typeof InlineRepeater | typeof TableRepeater
) => typeof InlineRepeater | typeof TableRepeater;

interface ActionButtonProps {
  /**
   * 当前行的 FormCore
   */
  core: FormCore;
  /**
   * 按钮类型
   */
  type:
    | "add"
    | "update"
    | "delete"
    | "remove"
    | "save"
    | "addInline"
    | "addMultipleInline"
    | "updateInline"
    | "cancel";
}
export class ActionButton extends React.Component<ActionButtonProps, any> {}

interface AntRepeaterProps extends RepeaterProps {
  /** 获取校验方法 */
  getValidate?: (
    validate: (cb?: any, opts?: any) => Promise<string | null>
  ) => void;
  /** 用于不依赖Repeater内部值确定显示或隐藏以及增加其他配置 */
  columnsMap?: (columns: Array<ColumnProps<any>>) => Array<ColumnProps<any>>;
  /** antd Table 组件 props */
  tableProps?: TableProps<any>;
  /** 覆盖 FormItem 的 errorRender，antd Table 当row的高度发生变化时（如：校验错误信息出现时），fixed定位的列高度无法自适应，此BUG在antd 4.0得到解决，但不向下兼容，TableRepeater暂时通过errorRender解决，也可以用此属性覆盖，自己处理 */
  errorRender?: (err: any) => React.ReactNode;
  children?: React.ReactNode;
  status?: Status;
  onChange?: (val: any) => void;
}

export class AntRepeater extends React.Component<AntRepeaterProps> {}