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

Commit e26a9f3

Browse files
applied vertical type
1 parent c106180 commit e26a9f3

File tree

2 files changed

+30
-19
lines changed

2 files changed

+30
-19
lines changed

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

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,13 @@ import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
2222
type IProps = DividerProps & {
2323
$style: DividerStyleType;
2424
$animationStyle:AnimationStyleType;
25+
type?: 'vertical' | 'horizontal';
2526
};
2627

27-
// TODO: enable type "vertical" https://ant.design/components/divider
28-
2928
const StyledDivider = 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;
@@ -76,14 +75,22 @@ const StyledDivider = styled(Divider)<IProps>`
7675
${(props) => props.$style.borderStyle}
7776
${(props) => props.$style.border};
7877
}
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+
}
7985
`;
8086

8187
const childrenMap = {
8288
title: StringControl,
8389
align: alignControl(),
84-
autoHeight: withDefault(AutoHeightControl, "fixed"),
90+
type: BoolControl,
91+
autoHeight: withDefault(AutoHeightControl, "auto"),
8592
style: styleControl(DividerStyle , 'style'),
86-
animationStyle: styleControl(AnimationStyle ,'animationStyle'),
93+
animationStyle: styleControl(AnimationStyle ,'animationStyle'),
8794
};
8895

8996
function fixOldStyleData(oldData: any) {
@@ -102,27 +109,30 @@ function fixOldStyleData(oldData: any) {
102109

103110

104111
// Compatible with historical style data 2022年8月26日
105-
exportconst DividerComp = migrateOldData(
112+
const DividerTempComp = migrateOldData(
106113
new UICompBuilder(childrenMap, (props , dispatch) => {
107114
useMergeCompStyles(props as Record<string, any>, dispatch);
115+
const dividerType = props.type ? 'vertical' : 'horizontal';
108116

109117
return (
110118
<StyledDivider
111119
orientation={props.align}
120+
type={dividerType}
112121
$style={props.style}
113122
$animationStyle={props.animationStyle}
114123
>
115-
{props.title}
124+
{dividerType==='horizontal'&&props.title}
116125
</StyledDivider>
117126
);
118127
})
119128
.setPropertyViewFn((children) => {
120129
return (
121130
<>
122-
<Section name={sectionNames.basic}>
123-
{children.title.propertyView({ label: trans("divider.title") })}
124-
</Section>
125-
131+
{!children?.type?.getView() &&
132+
<Section name={sectionNames.basic}>
133+
{children.title.propertyView({ label: trans("divider.title") })}
134+
</Section>}
135+
126136
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
127137
<Section name={sectionNames.interaction}>
128138
{hiddenPropertyView(children)}
@@ -137,9 +147,10 @@ export const DividerComp = migrateOldData(
137147
label: trans("divider.align"),
138148
radioButton: true,
139149
})}
140-
{/* {children.autoHeight.getPropertyView()} */}
150+
{children.autoHeight.getPropertyView()}
141151
</Section>
142152
<Section name={sectionNames.style}>
153+
{children.type.propertyView({ label: trans("divider.type")})}
143154
{children.style.getPropertyView()}
144155
</Section>
145156
<Section name={sectionNames.animationStyle}hasTooltip={true}>
@@ -159,9 +170,8 @@ export const DividerComp = migrateOldData(
159170
fixOldStyleData
160171
);
161172

162-
// export const DividerComp
163-
// = class extends DividerTempComp {
164-
// override autoHeight(): boolean {
165-
// return this.children.autoHeight.getView();
166-
// }
167-
// };
173+
export const DividerComp = class extends DividerTempComp {
174+
override autoHeight(): boolean {
175+
return this.children.autoHeight.getView();
176+
}
177+
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2002,6 +2002,7 @@ export const en = {
20022002
"title": "Title",
20032003
"align": "Alignment",
20042004
"dashed": "Dashed",
2005+
"type": "Type",
20052006
"dashedDesc": "Whether to Use Dashed Line",
20062007
"titleDesc": "Divider Title",
20072008
"alignDesc": "Divider Title Alignment"

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /