@sinoform/app-context
v1.18.11
Published
智能表单应用使用到的上下文。
Downloads
101
Keywords
Readme
@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>
}