diff --git a/src/components/detail/detailInfo/index.tsx b/src/components/detail/detailInfo/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..912c6640d2c13aad5d32aa17360c354cfb765119 --- /dev/null +++ b/src/components/detail/detailInfo/index.tsx @@ -0,0 +1,85 @@ +import React from 'react' +import { DetailField, DetailFieldConfig, DetailFieldError, IDetailField } from '../common' +import StatementHelper, { StatementConfig } from '../../../util/statement' +import marked from 'marked' + +export interface InfoDetailConfig extends DetailFieldConfig { + type: 'detail_info' + description?: { + descType: 'text' | 'tooltip' | 'modal' + label?: StatementConfig + mode: 'plain' | 'markdown' | 'html' + content?: StatementConfig + showIcon: boolean + }, +} + +export interface IInfoProps { + description?: { + descType: 'text' | 'tooltip' | 'modal' + label: string | undefined + content: React.ReactNode + showIcon: boolean + } +} + +export default class InfoDetail extends DetailField implements IDetailField { + renderComponent = (props: IInfoProps) => { + return + 您当前使用的UI版本没有实现InfoDetail组件。 + + } + + render = () => { + const props: IInfoProps = {} + const { + config: { + description + } + } = this.props + if(description) { + if(description.descType === 'text') { + props.description = { + descType: 'text', + label: StatementHelper(description.label, { data: this.props.data, step: this.props.step }), + content: description.content, + showIcon: description.showIcon + } + } else if (description.descType === 'tooltip') { + props.description = { + descType: 'tooltip', + label: StatementHelper(description.label, { data: this.props.data, step: this.props.step }), + content: description.content, + showIcon: description.showIcon + } + } else { + props.description = { + descType: 'modal', + label: StatementHelper(description.label, { data: this.props.data, step: this.props.step }), + content: description.content, + showIcon: description.showIcon + } + } + if(description.content !== undefined) { + const descriptionType = description.mode + switch (descriptionType) { + case 'plain': + props.description && (props.description.content = StatementHelper(description.content, { data: this.props.data, step: this.props.step })) + break + case 'markdown': + props.description && (props.description.content =
) + break + case 'html': + props.description && (props.description.content =
) + break + } + } + } + + return ( + + {this.renderComponent(props)} + + ) + } +} diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx index 0d661f1373e0ac14ef5c69fcfdb4f8c65a98e2c2..57b07d5a56216fcb73ea5a0e31c349b4bbff0809 100644 --- a/src/components/detail/index.tsx +++ b/src/components/detail/index.tsx @@ -5,6 +5,7 @@ import StatementDetail, { StatementDetailConfig } from './statement' import CustomDetail, { CustomDetailConfig } from './custom' import GroupField, { GroupFieldConfig } from './group' import ImportSubformField, { ImportSubformFieldConfig } from './importSubform' +import InfoDetail, { InfoDetailConfig } from './detailInfo' /** * 详情步骤内详情项配置文件格式定义 - 枚举 @@ -15,6 +16,7 @@ export type DetailFieldConfigs = StatementDetailConfig | GroupFieldConfig | ImportSubformFieldConfig | + InfoDetailConfig | CustomDetailConfig export type componentType = @@ -23,6 +25,7 @@ export type componentType = 'detail_enum' | 'statement' | 'import_subform' | + 'detail_info' | 'custom' export default { @@ -31,5 +34,6 @@ export default { import_subform: ImportSubformField, detail_enum: EnumDetail, statement: StatementDetail, + detail_info: InfoDetail, custom: CustomDetail } diff --git a/src/index.tsx b/src/index.tsx index 5e8ec9d484c33000384fbafafe0123fef90dbc5d..e798c482729382ca735c31e3a5acadd323837063 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -58,6 +58,7 @@ export { default as DetailEunmField } from './components/detail/enum' export { default as DetailStatementField } from './components/detail/statement' export { default as DetailTextField } from './components/detail/text' export { default as DetailImportSubformField } from './components/detail/importSubform' +export { default as DetailInfoField } from './components/detail/detailInfo' export { default as CustomDetail } from './components/detail/custom' export { default as HeaderStep } from './steps/header'