From a77672d8d893b7e594bc6476bb5f6e3b5a187cff Mon Sep 17 00:00:00 2001
From: "ext.pangzhaoqun1" <zhaoqun1004@163.com>
Date: Thu, 27 Jan 2022 16:47:15 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E8=AF=A6=E6=83=85=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/detail/detailInfo/index.tsx | 85 ++++++++++++++++++++++
 src/components/detail/index.tsx            | 11 ++-
 src/index.tsx                              |  1 +
 3 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 src/components/detail/detailInfo/index.tsx

diff --git a/src/components/detail/detailInfo/index.tsx b/src/components/detail/detailInfo/index.tsx
new file mode 100644
index 0000000..912c664
--- /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<InfoDetailConfig, IInfoProps, string> implements IDetailField<string> {
+  renderComponent = (props: IInfoProps) => {
+    return <React.Fragment>
+      您当前使用的UI版本没有实现InfoDetail组件。
+    </React.Fragment>
+  }
+
+  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 = <div dangerouslySetInnerHTML={{ __html: marked(StatementHelper(description.content, { data: this.props.data, step: this.props.step })) }}></div>)
+            break
+          case 'html':
+            props.description && (props.description.content = <div dangerouslySetInnerHTML={{ __html: StatementHelper(description.content, { data: this.props.data, step: this.props.step })}}></div>) 
+            break
+        }
+      }
+    }
+
+    return (
+      <React.Fragment>
+        {this.renderComponent(props)}
+      </React.Fragment>
+    )
+  }
+}
diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx
index 24ae057..a6b7057 100644
--- a/src/components/detail/index.tsx
+++ b/src/components/detail/index.tsx
@@ -5,6 +5,7 @@ import StatementDetail, { StatementDetailConfig } from './statement'
 
 import GroupField, { GroupFieldConfig } from './group'
 import ImportSubformField, { ImportSubformFieldConfig } from './importSubform'
+import InfoDetail, { InfoDetailConfig } from './detailInfo'
 
 /**
  * 详情步骤内详情项配置文件格式定义 - 枚举
@@ -14,19 +15,23 @@ export type DetailFieldConfigs =
     EnumDetailConfig |
     StatementDetailConfig |
     GroupFieldConfig |
-    ImportSubformFieldConfig
+    ImportSubformFieldConfig |
+    InfoDetailConfig
+
 
 export type componentType =
     'text' |
     'group' |
     'detail_enum' |
     'statement' |
-    'import_subform'
+    'import_subform' |
+    'detail_info'
 
 export default {
   group: GroupField,
   text: TextField,
   import_subform: ImportSubformField,
   detail_enum: EnumDetail,
-  statement: StatementDetail
+  statement: StatementDetail,
+  detail_info: InfoDetail
 }
diff --git a/src/index.tsx b/src/index.tsx
index b193a05..297d872 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 HeaderStep } from './steps/header'
 
-- 
Gitee