From 03404c272816424081cb7da3e6511060ae210502 Mon Sep 17 00:00:00 2001
From: cuiwenlong7 <cuiwenlong7@jd.com>
Date: Wed, 17 Nov 2021 20:32:35 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E8=A1=A8=E5=8D=95=E9=A1=B9list?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8F=AF=E6=B7=BB=E5=8A=A0=E3=80=81=E5=8F=AF?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E3=80=81=E5=8F=AF=E6=8E=92=E5=BA=8F=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/formFields/form/index.tsx | 32 +++++++++++++++++-------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/formFields/form/index.tsx b/src/components/formFields/form/index.tsx
index 9b0ac4d..7417c28 100644
--- a/src/components/formFields/form/index.tsx
+++ b/src/components/formFields/form/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { FormField } from 'ccms'
-import { Form, Button, Divider, Space } from 'antd'
-import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons'
+import { Form, Button, Divider, Space, Row, Col } from 'antd'
+import { PlusOutlined, MinusCircleOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'
 import { IFormField, IFormFieldItem, IFormFieldItemField } from 'ccms/dist/src/components/formFields/form'
 import getALLComponents from '../'
 import { formItemLayout } from '../common'
@@ -35,19 +35,33 @@ export default class FormFieldComponent extends FormField {
 
   renderItemComponent = (props: IFormFieldItem) => {
     const {
+      index,
+      isLastIndex, 
       removeText,
       onRemove,
+      onSort,
       children
     } = props
 
     return (
       <div>
         {children}
-        {
-          removeText && <Form.Item wrapperCol={{ span: 4, offset: 14 }}>
-            <Button block danger type='dashed' icon={<MinusCircleOutlined />} onClick={() => onRemove()}>{removeText}</Button>
-          </Form.Item>
-        }
+        <Form.Item wrapperCol={{ span: 18}}>
+          <Row wrap={true} justify={'end'}>
+          {onSort? 
+            <React.Fragment>
+              {index === 0? null: <Col span={3} offset={1}>
+                  <Button  type="dashed" block  icon={<ArrowUpOutlined />} onClick={() => onSort('up')}>{'向上移动'}</Button>
+              </Col>}
+             {isLastIndex === false ?<Col span={3} offset={1}>
+                  <Button  type="dashed" block  icon={<ArrowDownOutlined />} onClick={() => onSort('down')}>{'向下移动'}</Button>
+              </Col>: null}
+            </React.Fragment>: null}
+            {onRemove? <Col  span={6} offset={1}>
+                <Button block danger type='dashed' icon={<MinusCircleOutlined />} onClick={() => onRemove()}>{removeText}</Button>
+            </Col>: null}
+          </Row>
+        </Form.Item>
       </div>
     )
   }
@@ -67,9 +81,9 @@ export default class FormFieldComponent extends FormField {
           split={<Divider style={{ margin: 0 }} />}
         >
           {children}
-          <Form.Item wrapperCol={{ span: 18 }}>
+          {onInsert? <Form.Item wrapperCol={{ span: 18 }}>
             <Button block type='dashed' icon={<PlusOutlined />} onClick={() => onInsert()}>{insertText}</Button>
-          </Form.Item>
+          </Form.Item>: null}
         </Space>
       </React.Fragment>
     )
-- 
Gitee


From 74d01b61ec786aef0d7cead2659ab74b870372c2 Mon Sep 17 00:00:00 2001
From: cuiwenlong7 <cuiwenlong7@jd.com>
Date: Fri, 19 Nov 2021 12:17:58 +0800
Subject: [PATCH 2/4] =?UTF-8?q?style:=20=E9=A2=84=E8=A7=88=E5=8C=BA?=
 =?UTF-8?q?=E5=90=91drip=E5=90=8C=E6=AD=A5=E6=94=B9=E4=B8=BA=E7=AB=96?=
 =?UTF-8?q?=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/steps/form/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/steps/form/index.tsx b/src/steps/form/index.tsx
index f8cd7eb..3451dde 100644
--- a/src/steps/form/index.tsx
+++ b/src/steps/form/index.tsx
@@ -34,7 +34,8 @@ export default class FormStepComponent extends FormStep {
     return (
       <Form
         {...formItemLayout}
-        layout={layout}
+        // layout={layout}
+        layout="vertical" // 和drip同步 改为竖排
         className={newstyles['content']}
       >
         {children}
-- 
Gitee


From 87e3e58da35e79b8030ac0d2a3f86ad4fe0067d4 Mon Sep 17 00:00:00 2001
From: cuiwenlong7 <cuiwenlong7@jd.com>
Date: Fri, 19 Nov 2021 12:20:20 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20preview=E5=8C=BA=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E9=A1=B9list=E6=94=AF=E6=8C=81=E6=8A=98=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/formFields/form/index.tsx | 66 ++++++++++++++++--------
 1 file changed, 45 insertions(+), 21 deletions(-)

diff --git a/src/components/formFields/form/index.tsx b/src/components/formFields/form/index.tsx
index 7417c28..628fff3 100644
--- a/src/components/formFields/form/index.tsx
+++ b/src/components/formFields/form/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { FormField } from 'ccms'
-import { Form, Button, Divider, Space, Row, Col } from 'antd'
-import { PlusOutlined, MinusCircleOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'
+import { Form, Button, Divider, Collapse, Space, Row, Col } from 'antd'
+import { PlusOutlined, MinusCircleOutlined, ArrowUpOutlined, ArrowDownOutlined, DeleteOutlined } from '@ant-design/icons'
 import { IFormField, IFormFieldItem, IFormFieldItemField } from 'ccms/dist/src/components/formFields/form'
 import getALLComponents from '../'
 import { formItemLayout } from '../common'
@@ -35,34 +35,50 @@ export default class FormFieldComponent extends FormField {
 
   renderItemComponent = (props: IFormFieldItem) => {
     const {
+      title,
       index,
       isLastIndex, 
       removeText,
       onRemove,
       onSort,
+      canCollapse,
       children
     } = props
 
     return (
-      <div>
+      <Collapse.Panel
+        header={canCollapse? title: ''}
+        key={index}
+        forceRender={false}
+        showArrow = {canCollapse}
+        extra={(
+          <Space>
+            {onSort
+              ? <React.Fragment>
+                {index === 0
+                  ? null
+                  : <ArrowUpOutlined onClick={(e) => {
+                    e.stopPropagation()
+                    onSort('up')
+                  }} />}
+                {isLastIndex === false
+                  ? <ArrowDownOutlined onClick={(e) => {
+                    e.stopPropagation()
+                    onSort('down')
+                  }} />
+                  : null}
+              </React.Fragment>
+              : null}
+            {onRemove
+              ? <DeleteOutlined onClick={(e) => {
+                e.stopPropagation()
+                onRemove()
+              }} />
+              : null}
+        </Space>)}
+      >
         {children}
-        <Form.Item wrapperCol={{ span: 18}}>
-          <Row wrap={true} justify={'end'}>
-          {onSort? 
-            <React.Fragment>
-              {index === 0? null: <Col span={3} offset={1}>
-                  <Button  type="dashed" block  icon={<ArrowUpOutlined />} onClick={() => onSort('up')}>{'向上移动'}</Button>
-              </Col>}
-             {isLastIndex === false ?<Col span={3} offset={1}>
-                  <Button  type="dashed" block  icon={<ArrowDownOutlined />} onClick={() => onSort('down')}>{'向下移动'}</Button>
-              </Col>: null}
-            </React.Fragment>: null}
-            {onRemove? <Col  span={6} offset={1}>
-                <Button block danger type='dashed' icon={<MinusCircleOutlined />} onClick={() => onRemove()}>{removeText}</Button>
-            </Col>: null}
-          </Row>
-        </Form.Item>
-      </div>
+    </Collapse.Panel>
     )
   }
 
@@ -70,9 +86,17 @@ export default class FormFieldComponent extends FormField {
     const {
       insertText,
       onInsert,
+      canCollapse,
       children
     } = props
 
+    const collapsePaneldDefaultActiveKeys = Array.from(Array(children.length), (v,k) =>k)
+    const CollapseProps = canCollapse? {
+      accordion: true
+    }: {
+      activeKey: collapsePaneldDefaultActiveKeys
+    }
+
     return (
       <React.Fragment>
         <Space
@@ -80,7 +104,7 @@ export default class FormFieldComponent extends FormField {
           direction="vertical"
           split={<Divider style={{ margin: 0 }} />}
         >
-          {children}
+          <Collapse bordered={false} style={{marginBottom: '24px'}} {...CollapseProps} >{children}</Collapse>
           {onInsert? <Form.Item wrapperCol={{ span: 18 }}>
             <Button block type='dashed' icon={<PlusOutlined />} onClick={() => onInsert()}>{insertText}</Button>
           </Form.Item>: null}
-- 
Gitee


From 035eb93839cfc37f3a52a656a3c5ac459fef588f Mon Sep 17 00:00:00 2001
From: niuxiaoguang <niuxiaoguang@jd.com>
Date: Tue, 23 Nov 2021 19:35:35 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E4=BA=A4=E4=BA=92=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/formFields/form/index.tsx | 33 +++++++++++++++---------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/formFields/form/index.tsx b/src/components/formFields/form/index.tsx
index 628fff3..6863343 100644
--- a/src/components/formFields/form/index.tsx
+++ b/src/components/formFields/form/index.tsx
@@ -47,26 +47,35 @@ export default class FormFieldComponent extends FormField {
 
     return (
       <Collapse.Panel
-        header={canCollapse? title: ''}
+        header={<div style={{ display: 'inline-block', width: 'calc(100% - 60px)' }}>{title}</div>}
         key={index}
         forceRender={false}
-        showArrow = {canCollapse}
+        showArrow={!!canCollapse}
+        collapsible={'header'}
         extra={(
           <Space>
             {onSort
               ? <React.Fragment>
-                {index === 0
-                  ? null
-                  : <ArrowUpOutlined onClick={(e) => {
+                <ArrowUpOutlined
+                  onClick={(e) => {
                     e.stopPropagation()
-                    onSort('up')
-                  }} />}
-                {isLastIndex === false
-                  ? <ArrowDownOutlined onClick={(e) => {
+                    index > 0 && onSort('up')
+                  }}
+                  style={{
+                    opacity: index === 0 ? 0.5 : 1,
+                    cursor: index === 0 ? 'not-allowed' : 'pointer'
+                  }}
+                />
+                <ArrowDownOutlined
+                  onClick={(e) => {
                     e.stopPropagation()
-                    onSort('down')
-                  }} />
-                  : null}
+                    !isLastIndex && onSort('down')
+                  }}
+                  style={{
+                    opacity: isLastIndex ? 0.5 : 1,
+                    cursor: isLastIndex ? 'not-allowed' : 'pointer'
+                  }}
+                />
               </React.Fragment>
               : null}
             {onRemove
-- 
Gitee