Merge pull request #1026 from MenamAfzal/fix/divider-style

Fix/divider style

Author: raheeliftikhar5

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

@@ -17,19 +17,18 @@ import { AutoHeightControl } from "comps/controls/autoHeightControl";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 type IProps = DividerProps & {
   $style: DividerStyleType;
-  dashed: boolean;
   $animationStyle:AnimationStyleType;
+  type?: 'vertical' | 'horizontal';
 };
 
-// TODO: enable type "vertical" https://ant.design/components/divider
-
 const StyledDivider = styled(Divider)<IProps>`
+ 
   margin-top: 3.5px;
-  rotate: ${(props) => props.$style.rotation};
-  
+  rotate: ${(props) => props.type === 'vertical' ? '0deg' : props.$style.rotation};
   .ant-divider-inner-text {
     height: 32px;
     display: flex;
@@ -56,7 +55,6 @@ const StyledDivider = styled(Divider)<IProps>`
   .ant-divider-inner-text::before,
   .ant-divider-inner-text::after {
     border-block-start: ${(props) => props.$style.borderWidth && props.$style.borderWidth !== "0px" ? props.$style.borderWidth : "1px"} 
-                      ${(props) => props.dashed ? "dashed" : "solid"} 
                       ${(props) => props.$style.border} !important;
     border-block-start-color: inherit;
     border-block-end: 0;
@@ -77,15 +75,22 @@ const StyledDivider = styled(Divider)<IProps>`
                ${(props) => props.$style.borderStyle} 
                ${(props) => props.$style.border};
   }
+  &.ant-divider-vertical {
+    height:  ${(props) =>  props.type === 'vertical' && '200px'}; 
+    border-left: ${(props) => props.$style.borderWidth && props.$style.borderWidth !== "0px" ? props.$style.borderWidth : "1px"} 
+                ${(props) => props.$style.borderStyle} 
+                ${(props) => props.$style.border};
+    border-top: none;
+  }
 `;
 
 const childrenMap = {
   title: StringControl,
-  dashed: BoolControl,
   align: alignControl(),
-  autoHeight: withDefault(AutoHeightControl, "fixed"),
-  style: styleControl(DividerStyle),
-  animationStyle: styleControl(AnimationStyle),
+  type: BoolControl,
+  autoHeight: withDefault(AutoHeightControl, "auto"),
+  style: styleControl(DividerStyle , 'style'),
+  animationStyle: styleControl(AnimationStyle ,'animationStyle'),
 };
 
 function fixOldStyleData(oldData: any) {
@@ -105,25 +110,29 @@ function fixOldStyleData(oldData: any) {
 
 // Compatible with historical style data 2022-8-26
 const DividerTempComp = migrateOldData(
-  new UICompBuilder(childrenMap, (props) => {
+  new UICompBuilder(childrenMap, (props , dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
+    const dividerType = props.type ? 'vertical' : 'horizontal'; 
+
     return (
       <StyledDivider
         orientation={props.align}
-        dashed={props.dashed}
+        type={dividerType}
         $style={props.style}
         $animationStyle={props.animationStyle}
       >
-        {props.title}
+      {dividerType === 'horizontal' && props.title} 
       </StyledDivider>
     );
   })
     .setPropertyViewFn((children) => {
       return (
         <>
-          <Section name={sectionNames.basic}>
-            {children.title.propertyView({ label: trans("divider.title") })}
-          </Section>
-
+        {!children?.type?.getView() && 
+         <Section name={sectionNames.basic}>
+         {children.title.propertyView({ label: trans("divider.title") })}
+         </Section>}
+        
           {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
             <Section name={sectionNames.interaction}>
               {hiddenPropertyView(children)}
@@ -141,7 +150,7 @@ const DividerTempComp = migrateOldData(
                 {children.autoHeight.getPropertyView()}
               </Section>
               <Section name={sectionNames.style}>
-                {children.dashed.propertyView({ label: trans("divider.dashed") })}
+                {children.type.propertyView({ label: trans("divider.type")})}
                 {children.style.getPropertyView()}
               </Section>
               <Section name={sectionNames.animationStyle}hasTooltip={true}>
@@ -153,7 +162,6 @@ const DividerTempComp = migrateOldData(
       );
     })
     .setExposeStateConfigs([
-      new NameConfig("dashed", trans("divider.dashedDesc")),
       new NameConfig("title", trans("divider.titleDesc")),
       new NameConfig("align", trans("divider.alignDesc")),
       NameConfigHidden,
@@ -166,4 +174,4 @@ export const DividerComp = class extends DividerTempComp {
   override autoHeight(): boolean {
     return this.children.autoHeight.getView();
   }
-};
+};

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

@@ -95,6 +95,11 @@ const qrCode  = {
   }
 };
 
+const divider  = {
+  style: {
+    radius: "0px"
+  }
+};
 
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
@@ -130,6 +135,7 @@ export const defaultTheme: ThemeDetail = {
     qrCode,
     treeSelect,
     pageLayout,
+    divider,
     password: input,
     numberInput: input,
     textArea: input,

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

@@ -2006,6 +2006,7 @@ export const en = {
     "title": "Title",
     "align": "Alignment",
     "dashed": "Dashed",
+    "type": "Vertical type",
     "dashedDesc": "Whether to Use Dashed Line",
     "titleDesc": "Divider Title",
     "alignDesc": "Divider Title Alignment"