From c1061804a1a83d3dddaa87e1a7c51c0be0966792 Mon Sep 17 00:00:00 2001
From: MenamAfzal <meenamafzal1@gmail.com>
Date: Tue, 9 Jul 2024 04:17:25 +0500
Subject: [PATCH 1/3] applied theme hook for styling

---
 .../lowcoder/src/comps/comps/dividerComp.tsx  | 30 +++++++++----------
 .../lowcoder/src/constants/themeConstants.ts  |  6 ++++
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
index a01cf9ec4..efce74429 100644
--- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
@@ -17,10 +17,10 @@ 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;
 };
 
@@ -56,7 +56,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;
@@ -81,11 +80,10 @@ const StyledDivider = styled(Divider)<IProps>`
 
 const childrenMap = {
   title: StringControl,
-  dashed: BoolControl,
   align: alignControl(),
   autoHeight: withDefault(AutoHeightControl, "fixed"),
-  style: styleControl(DividerStyle),
-  animationStyle: styleControl(AnimationStyle),
+  style: styleControl(DividerStyle , 'style'),
+  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
 };
 
 function fixOldStyleData(oldData: any) {
@@ -104,12 +102,13 @@ function fixOldStyleData(oldData: any) {
 
 
 // Compatible with historical style data 2022-8-26
-const DividerTempComp = migrateOldData(
-  new UICompBuilder(childrenMap, (props) => {
+export const DividerComp = migrateOldData(
+  new UICompBuilder(childrenMap, (props , dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
+
     return (
       <StyledDivider
         orientation={props.align}
-        dashed={props.dashed}
         $style={props.style}
         $animationStyle={props.animationStyle}
       >
@@ -138,10 +137,9 @@ const DividerTempComp = migrateOldData(
                     label: trans("divider.align"),
                     radioButton: true,
                   })}
-                {children.autoHeight.getPropertyView()}
+                {/* {children.autoHeight.getPropertyView()} */}
               </Section>
               <Section name={sectionNames.style}>
-                {children.dashed.propertyView({ label: trans("divider.dashed") })}
                 {children.style.getPropertyView()}
               </Section>
               <Section name={sectionNames.animationStyle}hasTooltip={true}>
@@ -153,7 +151,6 @@ const DividerTempComp = migrateOldData(
       );
     })
     .setExposeStateConfigs([
-      new NameConfig("dashed", trans("divider.dashedDesc")),
       new NameConfig("title", trans("divider.titleDesc")),
       new NameConfig("align", trans("divider.alignDesc")),
       NameConfigHidden,
@@ -162,8 +159,9 @@ const DividerTempComp = migrateOldData(
   fixOldStyleData
 );
 
-export const DividerComp = class extends DividerTempComp {
-  override autoHeight(): boolean {
-    return this.children.autoHeight.getView();
-  }
-};
\ No newline at end of file
+// export const DividerComp 
+// = class extends DividerTempComp {
+//   override autoHeight(): boolean {
+//     return this.children.autoHeight.getView();
+//   }
+// };
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
index 45fd7a01e..5f3f5c6b6 100644
--- a/client/packages/lowcoder/src/constants/themeConstants.ts
+++ b/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,

From e26a9f330717441f2cef2b647f3f13998e5b5d09 Mon Sep 17 00:00:00 2001
From: MenamAfzal <meenamafzal1@gmail.com>
Date: Tue, 9 Jul 2024 07:21:49 +0500
Subject: [PATCH 2/3] applied vertical type

---
 .../lowcoder/src/comps/comps/dividerComp.tsx  | 48 +++++++++++--------
 .../packages/lowcoder/src/i18n/locales/en.ts  |  1 +
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
index efce74429..a97c76bed 100644
--- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
@@ -22,14 +22,13 @@ import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 type IProps = DividerProps & {
   $style: DividerStyleType;
   $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;
@@ -76,14 +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,
   align: alignControl(),
-  autoHeight: withDefault(AutoHeightControl, "fixed"),
+  type: BoolControl,
+  autoHeight: withDefault(AutoHeightControl, "auto"),
   style: styleControl(DividerStyle , 'style'),
-  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
+  animationStyle: styleControl(AnimationStyle ,'animationStyle'),
 };
 
 function fixOldStyleData(oldData: any) {
@@ -102,27 +109,30 @@ function fixOldStyleData(oldData: any) {
 
 
 // Compatible with historical style data 2022-8-26
-export const DividerComp = migrateOldData(
+const DividerTempComp = migrateOldData(
   new UICompBuilder(childrenMap, (props , dispatch) => {
     useMergeCompStyles(props as Record<string, any>, dispatch);    
+    const dividerType = props.type ? 'vertical' : 'horizontal'; 
 
     return (
       <StyledDivider
         orientation={props.align}
+        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)}
@@ -137,9 +147,10 @@ export const DividerComp = migrateOldData(
                     label: trans("divider.align"),
                     radioButton: true,
                   })}
-                {/* {children.autoHeight.getPropertyView()} */}
+                {children.autoHeight.getPropertyView()}
               </Section>
               <Section name={sectionNames.style}>
+                {children.type.propertyView({ label: trans("divider.type")})}
                 {children.style.getPropertyView()}
               </Section>
               <Section name={sectionNames.animationStyle}hasTooltip={true}>
@@ -159,9 +170,8 @@ export const DividerComp = migrateOldData(
   fixOldStyleData
 );
 
-// export const DividerComp 
-// = class extends DividerTempComp {
-//   override autoHeight(): boolean {
-//     return this.children.autoHeight.getView();
-//   }
-// };
\ No newline at end of file
+export const DividerComp = class extends DividerTempComp {
+  override autoHeight(): boolean {
+    return this.children.autoHeight.getView();
+  }
+};
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 3fb351f91..a40417486 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2002,6 +2002,7 @@ export const en = {
     "title": "Title",
     "align": "Alignment",
     "dashed": "Dashed",
+    "type": "Type",
     "dashedDesc": "Whether to Use Dashed Line",
     "titleDesc": "Divider Title",
     "alignDesc": "Divider Title Alignment"

From eb7515cf9b73dcda5ecb0a05b56552b284f3face Mon Sep 17 00:00:00 2001
From: MenamAfzal <meenamafzal1@gmail.com>
Date: Tue, 9 Jul 2024 07:37:09 +0500
Subject: [PATCH 3/3] type text changed

---
 client/packages/lowcoder/src/i18n/locales/en.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index b855382d8..15bed4897 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2006,7 +2006,7 @@ export const en = {
     "title": "Title",
     "align": "Alignment",
     "dashed": "Dashed",
-    "type": "Type",
+    "type": "Vertical type",
     "dashedDesc": "Whether to Use Dashed Line",
     "titleDesc": "Divider Title",
     "alignDesc": "Divider Title Alignment"