@sinoform/app-context v1.18.11

@sinoform/app-context

智能表单应用使用到的上下文。

权限

PermissionContext

创建权限上下文：

import { PermissionContext } from '@sinoform/app-context';
import type { Permission } from '@sinoform/types';
import { usePermissionHelper } from '@sinoform/helper-permission';

function FormPage() {
  const { formData,  formState } = useDetailPage();
  const permission = usePermissionHelper(formData,formState);

  return <PermissionContext.Provider value={permission}>
    <Form>
      ...
    </Form>
    <Buttons />
  </PermissionContext>;
}

usePermission

使用权限上下文：

import type { ButtonConfig } from '@sinoform/types';
import { usePermission } from '@sinoform/app-context';

function Buttons() {
  const buttons: ButtonConfig = ...; // 获取到的按钮数据
  const permission = usePermission(); // 从权限上下文中取权限数据

    const renderButton = (button: ButtonConfig) => {
      return <Button {...button}/>
    };

  return <>
    {buttons
      .filter(button => !permission.isHidden(button.name))
      .map(button => renderButton(button))
    }
  </>
}

表单数据

FormDataContext

创建表单数据上下文

import { FormDataContext } from '@sinoform/app-context';

function DetailPage() {
    const formDataContext = ...;// 表单数据上下文中的value
  return <FormDataContext.Provider value={formDataContext}>
          <MainFormPanel/>
         </FormDataContext.Provider>
}

使用表单数据

使用表单数据上下文

import { useFormData } from '@sinoform/app-context';

const FlowChartPanel: React.SFC = () => {
  const { formData, formState, formHelpers, workItemId } = useFormData();

  return <div>...</div>;
};

二次开发

FormAppSettingContext

创建二次开发上下文

import { FormAppSettingContext } from '@sinoform/app-context';
import FlowConfigBuilder from '@sinoform/flow-config-builder-new';
import flowConfigBase from '@sinoform/flow-config-base';
import FormConfigBuilder from '@sinoform/form-config-builder-new';
import formConfigBase from '@sinoform/form-config-base';

function App() {
  const newFlowConfig = FlowConfigBuilder.from(base)
  .updateButton('save', {
    name: '修改保存按钮名称',
  })
  .addButton('auditFailed', '审核不通过', AuditFailedButton, {
    enabled: true,
    hidden: false,
  })
  .removeButton('send')
  .build();

  const newFormConfig = ...;

  return <FormAppSettingContext.Provider value={{
          flowConfig: newFlowConfig,
          formConfig: newFormConfig
        }}>
          <MainFormPanel/>
         </FormAppSettingContext.Provider>
}