Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9f32f30

Browse files
Merge pull request#1026 from MenamAfzal/fix/divider-style
Fix/divider style
2 parentsbca5fe4 +eb7515c commit9f32f30

File tree

3 files changed

+35
-20
lines changed

3 files changed

+35
-20
lines changed

‎client/packages/lowcoder/src/comps/comps/dividerComp.tsx‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,18 @@ import { AutoHeightControl } from "comps/controls/autoHeightControl";
1717

1818
import{useContext}from"react";
1919
import{EditorContext}from"comps/editorState";
20+
import{useMergeCompStyles}from"@lowcoder-ee/index.sdk";
2021

2122
typeIProps=DividerProps&{
2223
$style:DividerStyleType;
23-
dashed:boolean;
2424
$animationStyle:AnimationStyleType;
25+
type?:'vertical'|'horizontal';
2526
};
2627

27-
// TODO: enable type "vertical" https://ant.design/components/divider
28-
2928
constStyledDivider=styled(Divider)<IProps>`
29+
3030
margin-top: 3.5px;
31-
rotate:${(props)=>props.$style.rotation};
32-
31+
rotate:${(props)=>props.type==='vertical' ?'0deg' :props.$style.rotation};
3332
.ant-divider-inner-text {
3433
height: 32px;
3534
display: flex;
@@ -56,7 +55,6 @@ const StyledDivider = styled(Divider)<IProps>`
5655
.ant-divider-inner-text::before,
5756
.ant-divider-inner-text::after {
5857
border-block-start:${(props)=>props.$style.borderWidth&&props.$style.borderWidth!=="0px" ?props.$style.borderWidth :"1px"}
59-
${(props)=>props.dashed ?"dashed" :"solid"}
6058
${(props)=>props.$style.border} !important;
6159
border-block-start-color: inherit;
6260
border-block-end: 0;
@@ -77,15 +75,22 @@ const StyledDivider = styled(Divider)<IProps>`
7775
${(props)=>props.$style.borderStyle}
7876
${(props)=>props.$style.border};
7977
}
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+
}
8085
`;
8186

8287
constchildrenMap={
8388
title:StringControl,
84-
dashed:BoolControl,
8589
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'),
8994
};
9095

9196
functionfixOldStyleData(oldData:any){
@@ -105,25 +110,29 @@ function fixOldStyleData(oldData: any) {
105110

106111
// Compatible with historical style data 2022-8-26
107112
constDividerTempComp=migrateOldData(
108-
newUICompBuilder(childrenMap,(props)=>{
113+
newUICompBuilder(childrenMap,(props,dispatch)=>{
114+
useMergeCompStyles(propsasRecord<string,any>,dispatch);
115+
constdividerType=props.type ?'vertical' :'horizontal';
116+
109117
return(
110118
<StyledDivider
111119
orientation={props.align}
112-
dashed={props.dashed}
120+
type={dividerType}
113121
$style={props.style}
114122
$animationStyle={props.animationStyle}
115123
>
116-
{props.title}
124+
{dividerType==='horizontal'&&props.title}
117125
</StyledDivider>
118126
);
119127
})
120128
.setPropertyViewFn((children)=>{
121129
return(
122130
<>
123-
<Sectionname={sectionNames.basic}>
124-
{children.title.propertyView({label:trans("divider.title")})}
125-
</Section>
126-
131+
{!children?.type?.getView()&&
132+
<Sectionname={sectionNames.basic}>
133+
{children.title.propertyView({label:trans("divider.title")})}
134+
</Section>}
135+
127136
{["logic","both"].includes(useContext(EditorContext).editorModeStatus)&&(
128137
<Sectionname={sectionNames.interaction}>
129138
{hiddenPropertyView(children)}
@@ -141,7 +150,7 @@ const DividerTempComp = migrateOldData(
141150
{children.autoHeight.getPropertyView()}
142151
</Section>
143152
<Sectionname={sectionNames.style}>
144-
{children.dashed.propertyView({label:trans("divider.dashed")})}
153+
{children.type.propertyView({label:trans("divider.type")})}
145154
{children.style.getPropertyView()}
146155
</Section>
147156
<Sectionname={sectionNames.animationStyle}hasTooltip={true}>
@@ -153,7 +162,6 @@ const DividerTempComp = migrateOldData(
153162
);
154163
})
155164
.setExposeStateConfigs([
156-
newNameConfig("dashed",trans("divider.dashedDesc")),
157165
newNameConfig("title",trans("divider.titleDesc")),
158166
newNameConfig("align",trans("divider.alignDesc")),
159167
NameConfigHidden,
@@ -166,4 +174,4 @@ export const DividerComp = class extends DividerTempComp {
166174
overrideautoHeight():boolean{
167175
returnthis.children.autoHeight.getView();
168176
}
169-
};
177+
};

‎client/packages/lowcoder/src/constants/themeConstants.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,11 @@ const qrCode = {
9595
}
9696
};
9797

98+
constdivider={
99+
style:{
100+
radius:"0px"
101+
}
102+
};
98103

99104
exportconstdefaultTheme:ThemeDetail={
100105
primary:"#3377FF",
@@ -130,6 +135,7 @@ export const defaultTheme: ThemeDetail = {
130135
qrCode,
131136
treeSelect,
132137
pageLayout,
138+
divider,
133139
password:input,
134140
numberInput:input,
135141
textArea:input,

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2006,6 +2006,7 @@ export const en = {
20062006
"title":"Title",
20072007
"align":"Alignment",
20082008
"dashed":"Dashed",
2009+
"type":"Vertical type",
20092010
"dashedDesc":"Whether to Use Dashed Line",
20102011
"titleDesc":"Divider Title",
20112012
"alignDesc":"Divider Title Alignment"

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp