@@ -17,19 +17,18 @@ import { AutoHeightControl } from "comps/controls/autoHeightControl";
17
17
18
18
import { useContext } from "react" ;
19
19
import { EditorContext } from "comps/editorState" ;
20
+ import { useMergeCompStyles } from "@lowcoder-ee/index.sdk" ;
20
21
21
22
type IProps = DividerProps & {
22
23
$style : DividerStyleType ;
23
- dashed : boolean ;
24
24
$animationStyle :AnimationStyleType ;
25
+ type ?: 'vertical' | 'horizontal' ;
25
26
} ;
26
27
27
- // TODO: enable type "vertical" https://ant.design/components/divider
28
-
29
28
const StyledDivider = styled ( Divider ) < IProps > `
29
+
30
30
margin-top: 3.5px;
31
- rotate: ${ ( props ) => props . $style . rotation } ;
32
-
31
+ rotate: ${ ( props ) => props . type === 'vertical' ? '0deg' : props . $style . rotation } ;
33
32
.ant-divider-inner-text {
34
33
height: 32px;
35
34
display: flex;
@@ -56,7 +55,6 @@ const StyledDivider = styled(Divider)<IProps>`
56
55
.ant-divider-inner-text::before,
57
56
.ant-divider-inner-text::after {
58
57
border-block-start: ${ ( props ) => props . $style . borderWidth && props . $style . borderWidth !== "0px" ? props . $style . borderWidth : "1px" }
59
- ${ ( props ) => props . dashed ? "dashed" : "solid" }
60
58
${ ( props ) => props . $style . border } !important;
61
59
border-block-start-color: inherit;
62
60
border-block-end: 0;
@@ -77,15 +75,22 @@ const StyledDivider = styled(Divider)<IProps>`
77
75
${ ( props ) => props . $style . borderStyle }
78
76
${ ( props ) => props . $style . border } ;
79
77
}
78
+ &.ant-divider-vertical {
79
+ height: ${ ( props ) => props . type === 'vertical' && '200px' } ;
80
+ border-left: ${ ( props ) => props . $style . borderWidth && props . $style . borderWidth !== "0px" ? props . $style . borderWidth : "1px" }
81
+ ${ ( props ) => props . $style . borderStyle }
82
+ ${ ( props ) => props . $style . border } ;
83
+ border-top: none;
84
+ }
80
85
` ;
81
86
82
87
const childrenMap = {
83
88
title : StringControl ,
84
- dashed : BoolControl ,
85
89
align : alignControl ( ) ,
86
- autoHeight : withDefault ( AutoHeightControl , "fixed" ) ,
87
- style : styleControl ( DividerStyle ) ,
88
- animationStyle : styleControl ( AnimationStyle ) ,
90
+ type : BoolControl ,
91
+ autoHeight : withDefault ( AutoHeightControl , "auto" ) ,
92
+ style : styleControl ( DividerStyle , 'style' ) ,
93
+ animationStyle : styleControl ( AnimationStyle , 'animationStyle' ) ,
89
94
} ;
90
95
91
96
function fixOldStyleData ( oldData : any ) {
@@ -105,25 +110,29 @@ function fixOldStyleData(oldData: any) {
105
110
106
111
// Compatible with historical style data 2022-8-26
107
112
const DividerTempComp = migrateOldData (
108
- new UICompBuilder ( childrenMap , ( props ) => {
113
+ new UICompBuilder ( childrenMap , ( props , dispatch ) => {
114
+ useMergeCompStyles ( props as Record < string , any > , dispatch ) ;
115
+ const dividerType = props . type ? 'vertical' : 'horizontal' ;
116
+
109
117
return (
110
118
< StyledDivider
111
119
orientation = { props . align }
112
- dashed = { props . dashed }
120
+ type = { dividerType }
113
121
$style = { props . style }
114
122
$animationStyle = { props . animationStyle }
115
123
>
116
- { props . title }
124
+ { dividerType === 'horizontal' && props . title }
117
125
</ StyledDivider >
118
126
) ;
119
127
} )
120
128
. setPropertyViewFn ( ( children ) => {
121
129
return (
122
130
< >
123
- < Section name = { sectionNames . basic } >
124
- { children . title . propertyView ( { label : trans ( "divider.title" ) } ) }
125
- </ Section >
126
-
131
+ { ! children ?. type ?. getView ( ) &&
132
+ < Section name = { sectionNames . basic } >
133
+ { children . title . propertyView ( { label : trans ( "divider.title" ) } ) }
134
+ </ Section > }
135
+
127
136
{ [ "logic" , "both" ] . includes ( useContext ( EditorContext ) . editorModeStatus ) && (
128
137
< Section name = { sectionNames . interaction } >
129
138
{ hiddenPropertyView ( children ) }
@@ -141,7 +150,7 @@ const DividerTempComp = migrateOldData(
141
150
{ children . autoHeight . getPropertyView ( ) }
142
151
</ Section >
143
152
< Section name = { sectionNames . style } >
144
- { children . dashed . propertyView ( { label : trans ( "divider.dashed" ) } ) }
153
+ { children . type . propertyView ( { label : trans ( "divider.type" ) } ) }
145
154
{ children . style . getPropertyView ( ) }
146
155
</ Section >
147
156
< Section name = { sectionNames . animationStyle } hasTooltip = { true } >
@@ -153,7 +162,6 @@ const DividerTempComp = migrateOldData(
153
162
) ;
154
163
} )
155
164
. setExposeStateConfigs ( [
156
- new NameConfig ( "dashed" , trans ( "divider.dashedDesc" ) ) ,
157
165
new NameConfig ( "title" , trans ( "divider.titleDesc" ) ) ,
158
166
new NameConfig ( "align" , trans ( "divider.alignDesc" ) ) ,
159
167
NameConfigHidden ,
@@ -166,4 +174,4 @@ export const DividerComp = class extends DividerTempComp {
166
174
override autoHeight ( ) : boolean {
167
175
return this . children . autoHeight . getView ( ) ;
168
176
}
169
- } ;
177
+ } ;
0 commit comments