Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit ad12095

Browse files
adnanqaopsadnanqaops
committedFeb 24, 2025·
added changes to table and other components
1 parent 0c3c98a commit ad12095

File tree

8 files changed

+511
-11
lines changed

8 files changed

+511
-11
lines changed
 

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export default function GeoMapChartExample() {
3232
width={500}
3333
height={300}
3434
config={{
35+
mapZoomLevel: "1",
3536
}}
3637
compFactory={ChartCompWithDefault}
3738
/>
@@ -40,6 +41,7 @@ export default function GeoMapChartExample() {
4041
width={500}
4142
height={300}
4243
config={{
44+
mapZoomLevel: "3",
4345
}}
4446
compFactory={ChartCompWithDefault}
4547
/>
@@ -48,30 +50,43 @@ export default function GeoMapChartExample() {
4850
width={500}
4951
height={300}
5052
config={{
53+
mapZoomLevel: "5",
5154
}}
5255
compFactory={ChartCompWithDefault}
5356
/>
5457
<Example
55-
title="Center Position ( Lat, Lon) - Spain"
56-
width={500}
58+
title="Center Position ( Lat, Long) - Spain"
59+
width={700}
5760
height={300}
61+
hideSettings={true}
5862
config={{
63+
mapCenterLng: "-0.5033",
64+
mapCenterLat: "40.5235",
65+
mapZoomLevel: "5",
5966
}}
6067
compFactory={ChartCompWithDefault}
6168
/>
6269
<Example
6370
title="Center Position ( Lat, Lon) - USA"
64-
width={500}
71+
width={700}
6572
height={300}
73+
hideSettings={true}
6674
config={{
75+
mapCenterLng: "-97.5348",
76+
mapCenterLat: "38.7946",
77+
mapZoomLevel: "5",
6778
}}
6879
compFactory={ChartCompWithDefault}
6980
/>
7081
<Example
7182
title="Center Position ( Lat, Lon) - Turkey"
72-
width={500}
83+
width={700}
7384
height={300}
85+
hideSettings={true}
7486
config={{
87+
mapCenterLng: "38.5348",
88+
mapCenterLat: "38.7946",
89+
mapZoomLevel: "5",
7590
}}
7691
compFactory={ChartCompWithDefault}
7792
/>

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function MermaidChartExample() {
2626
width={500}
2727
height={300}
2828
config={{
29-
code: "graph LR\n Planning --> Defining --> Designing --> Building --> Testing --> Deployment --> Planning",
29+
code: "graph LR\n Planning --> Defining --> Designing --> Building --> Testing --> Deployment --> Planning",
3030
}}
3131
compFactory={ChartCompWithDefault}
3232
/>

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,42 @@ export default function OpenLayersGeoMapChartExample() {
2121
}}
2222
compFactory={ChartCompWithDefault}
2323
/>
24+
<Example
25+
title="Center Position - USA"
26+
width={500}
27+
height={300}
28+
config={{
29+
center: "[-92.5348,38.7946]",
30+
}}
31+
compFactory={ChartCompWithDefault}
32+
/>
33+
<Example
34+
title="Zoom Level - 3"
35+
width={500}
36+
height={300}
37+
config={{
38+
zoom: "3",
39+
}}
40+
compFactory={ChartCompWithDefault}
41+
/>
42+
<Example
43+
title="Zoom Level - 7"
44+
width={500}
45+
height={300}
46+
config={{
47+
zoom: "7",
48+
}}
49+
compFactory={ChartCompWithDefault}
50+
/>
51+
<Example
52+
title="Zoom Level - 10"
53+
width={500}
54+
height={300}
55+
config={{
56+
zoom: "10",
57+
}}
58+
compFactory={ChartCompWithDefault}
59+
/>
2460
</ExampleGroup>
2561
</>
2662
);

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
import { SplitLayoutComp } from "comps/comps/splitLayout/splitLayout";
2+
import Example from "../../common/Example";
3+
import ExampleGroup from "../../common/ExampleGroup";
4+
5+
const columns= {
6+
"manual": [
7+
{
8+
"id": 0,
9+
"label": "Area 1",
10+
"key": "Area1",
11+
"minWidth": "10%",
12+
"maxWidth": "90%",
13+
"width": "50%",
14+
"collapsible": false,
15+
"background": "",
16+
"backgroundImage": "",
17+
"padding": ""
18+
},
19+
{
20+
"id": 1,
21+
"label": "Area 2",
22+
"key": "Area2",
23+
"minWidth": "10%",
24+
"maxWidth": "90%",
25+
"width": "50%",
26+
"collapsible": true,
27+
"background": "",
28+
"backgroundImage": "",
29+
"padding": ""
30+
},
31+
{
32+
"id": 2,
33+
"label": "Option 1",
34+
"key": "Option 1",
35+
"minWidth": "10%",
36+
"maxWidth": "90%",
37+
"width": "50%",
38+
"collapsible": false,
39+
"background": "",
40+
"backgroundImage": "",
41+
"padding": ""
42+
}
43+
]
44+
};
45+
46+
const bodyStyle= {
47+
background: "#FFFFFF",
48+
border: "#222222",
49+
};
50+
51+
const columnStyle= {
52+
background: "#FFFFFF",
53+
border: "#222222",
54+
margin: "10px",
55+
};
56+
57+
export default function SplitLayoutExample() {
58+
return (
59+
<>
60+
<ExampleGroup
61+
title="Basic Usage"
62+
description="The Following Examples Show the Basic Usage of the Split Layout Component."
63+
>
64+
<Example
65+
title="Default Component"
66+
hideSettings={true}
67+
width={1000}
68+
config={{
69+
bodyStyle: bodyStyle,
70+
columnStyle: columnStyle,
71+
}}
72+
compFactory={SplitLayoutComp}
73+
/>
74+
<Example
75+
title="Multiple Split Layout containers ( Click on the icon at the center on right side ) "
76+
hideSettings={true}
77+
width={1000}
78+
config={{
79+
columns: columns,
80+
bodyStyle: bodyStyle,
81+
columnStyle: columnStyle,
82+
}}
83+
compFactory={SplitLayoutComp}
84+
/>
85+
<Example
86+
title="Setting Minimum Width - 30%"
87+
hideSettings={true}
88+
width={1000}
89+
config={{
90+
columns: {
91+
"manual": [
92+
{
93+
"id": 0,
94+
"label": "Area 1",
95+
"key": "Area1",
96+
"minWidth": "30%",
97+
"maxWidth": "90%",
98+
"width": "50%",
99+
"collapsible": false,
100+
"background": "",
101+
"backgroundImage": "",
102+
"padding": ""
103+
},
104+
{
105+
"id": 1,
106+
"label": "Area 2",
107+
"key": "Area2",
108+
"minWidth": "30%",
109+
"maxWidth": "90%",
110+
"width": "50%",
111+
"collapsible": true,
112+
"background": "",
113+
"backgroundImage": "",
114+
"padding": ""
115+
},
116+
{
117+
"id": 2,
118+
"label": "Option 1",
119+
"key": "Option 1",
120+
"minWidth": "30%",
121+
"maxWidth": "90%",
122+
"width": "50%",
123+
"collapsible": false,
124+
"background": "",
125+
"backgroundImage": "",
126+
"padding": ""
127+
}
128+
]
129+
},
130+
bodyStyle: bodyStyle,
131+
columnStyle: columnStyle,
132+
}}
133+
compFactory={SplitLayoutComp}
134+
/>
135+
<Example
136+
title="Setting Minimum Width - 10%"
137+
hideSettings={true}
138+
width={1000}
139+
config={{
140+
columns: columns,
141+
bodyStyle: bodyStyle,
142+
columnStyle: columnStyle,
143+
}}
144+
compFactory={SplitLayoutComp}
145+
/>
146+
</ExampleGroup>
147+
148+
<ExampleGroup
149+
title="Layout"
150+
description="The Following Examples Show the different layouts of the Split Layout Component."
151+
>
152+
<Example
153+
title="Split Layout Orientation - Vertical"
154+
hideSettings={true}
155+
width={1000}
156+
config={{
157+
bodyStyle: bodyStyle,
158+
columnStyle: columnStyle,
159+
orientation: "vertical",
160+
}}
161+
compFactory={SplitLayoutComp}
162+
/>
163+
<Example
164+
title="Split Layout Orientation - Horizontal"
165+
hideSettings={true}
166+
width={1000}
167+
config={{
168+
bodyStyle: bodyStyle,
169+
columnStyle: columnStyle,
170+
orientation: "horizontal",
171+
}}
172+
compFactory={SplitLayoutComp}
173+
/>
174+
</ExampleGroup>
175+
176+
<ExampleGroup
177+
title="Styling Properties"
178+
description="The Following Examples Show the different Styling properties on the Split Layout Component."
179+
>
180+
<Example
181+
title="Body Styling - Background Color, Border, Padding"
182+
hideSettings={true}
183+
width={1000}
184+
config={{
185+
bodyStyle: {
186+
"background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
187+
"border": "#222222",
188+
"borderWidth": "2px",
189+
"padding": "10px",
190+
},
191+
columnStyle: columnStyle,
192+
}}
193+
compFactory={SplitLayoutComp}
194+
/>
195+
<Example
196+
title="Column Styling - Background Color, Border, Margin"
197+
hideSettings={true}
198+
width={1000}
199+
config={{
200+
bodyStyle: bodyStyle,
201+
columnStyle: {
202+
"background": "linear-gradient(0deg, #f43b47 0%, #453a94 100%)",
203+
"border": "#222222",
204+
"borderWidth": "2px",
205+
"borderStyle": "solid",
206+
"margin": "10px",
207+
},
208+
}}
209+
compFactory={SplitLayoutComp}
210+
/>
211+
</ExampleGroup>
212+
</>
213+
);
214+
}

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx

Lines changed: 60 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,72 @@ export default function BPMNEditorExample() {
1010
return (
1111
<>
1212
<ExampleGroup
13-
title={trans("componentDoc.basicUsage")}
14-
description={trans("componentDoc.basicDemoDescription")}
13+
title="Basic Usage"
14+
description="The Following Examples Show the Basic Usage of the BPMN Editor Component."
1515
>
1616
<Example
17-
title={trans("componentDoc.default")}
17+
title="Default Component"
18+
height={400}
19+
width={1000}
20+
hideSettings={true}
1821
config={{
1922
}}
2023
compFactory={ChartCompWithDefault}
2124
/>
25+
<Example
26+
title="Designer Mode"
27+
height={400}
28+
width={1000}
29+
hideSettings={true}
30+
config={{
31+
designer: true,
32+
}}
33+
compFactory={ChartCompWithDefault}
34+
/>
35+
<Example
36+
title="Hiding the Logo"
37+
height={400}
38+
width={1000}
39+
hideSettings={true}
40+
config={{
41+
showLogo: false,
42+
designer: true,
43+
}}
44+
compFactory={ChartCompWithDefault}
45+
/>
46+
<Example
47+
title="Allowing to Download the Image"
48+
height={400}
49+
width={1000}
50+
hideSettings={true}
51+
config={{
52+
designer: true,
53+
svgDownload: true,
54+
}}
55+
compFactory={ChartCompWithDefault}
56+
/>
57+
</ExampleGroup>
58+
59+
<ExampleGroup
60+
title="Styling Properties"
61+
description="The Following Examples Show the Styling properties of the BPMN Editor Component."
62+
>
63+
<Example
64+
title="Body - Background Color, Border, Text Size and Margins"
65+
height={400}
66+
width={1000}
67+
hideSettings={true}
68+
config={{
69+
designer: true,
70+
styles: {
71+
"margin": "10px",
72+
"textSize": "30px",
73+
"backgroundColor": "#D7D9E0",
74+
"border": "#222222"
75+
},
76+
}}
77+
compFactory={ChartCompWithDefault}
78+
/>
2279
</ExampleGroup>
2380
</>
2481
);

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx

Lines changed: 107 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,119 @@ export default function MentionCompExample() {
88
<>
99
<ExampleGroup
1010
title={trans("componentDoc.basicUsage")}
11-
description={trans("componentDoc.basicDemoDescription")}
11+
description="The Following Examples Show the Basic Usage of the Mention Component."
1212
>
1313
<Example
14-
title={trans("componentDoc.value")}
14+
title="Default Component"
1515
config={{
1616
}}
1717
compFactory={MentionComp}
1818
/>
19+
<Example
20+
title="Placeholder Value"
21+
config={{
22+
placeholder: "Type @ to see the data",
23+
}}
24+
compFactory={MentionComp}
25+
/>
26+
<Example
27+
title="Default Value"
28+
config={{
29+
value: "John Doe",
30+
}}
31+
compFactory={MentionComp}
32+
/>
33+
</ExampleGroup>
34+
35+
<ExampleGroup
36+
title="Styling Properties"
37+
description="The Following Examples Show the Styling Properties of the Mention Component."
38+
>
39+
<Example
40+
title="Label Name"
41+
config={{
42+
label: {
43+
"text": "Mention Component",
44+
},
45+
}}
46+
compFactory={MentionComp}
47+
/>
48+
<Example
49+
title="Label Tooltip"
50+
config={{
51+
label: {
52+
"text": "Mention Component",
53+
"tooltip": "This is a Mention Component"
54+
},
55+
}}
56+
compFactory={MentionComp}
57+
/>
58+
<Example
59+
title="Label Position & Alignment - Left & Left"
60+
config={{
61+
label: {
62+
"text": "Mention Component",
63+
"position": "row",
64+
"align": "left"
65+
},
66+
}}
67+
compFactory={MentionComp}
68+
/>
69+
<Example
70+
title="Label Position & Alignment - Left & Right"
71+
config={{
72+
label: {
73+
"text": "Mention Component",
74+
"position": "row",
75+
"align": "right"
76+
},
77+
}}
78+
compFactory={MentionComp}
79+
/>
80+
<Example
81+
title="Label Position & Alignment - Top & Left"
82+
config={{
83+
label: {
84+
"text": "Mention Component",
85+
"position": "column",
86+
"align": "left"
87+
},
88+
}}
89+
compFactory={MentionComp}
90+
/>
91+
<Example
92+
title="Label Position & Alignment - Top & Right"
93+
config={{
94+
label: {
95+
"text": "Mention Component",
96+
"position": "column",
97+
"align": "right"
98+
},
99+
}}
100+
compFactory={MentionComp}
101+
/>
102+
<Example
103+
title="Label Width - 10%"
104+
config={{
105+
label: {
106+
"text": "Mention Component",
107+
"width": "10",
108+
"widthUnit": "%",
109+
},
110+
}}
111+
compFactory={MentionComp}
112+
/>
113+
<Example
114+
title="Label Width - 30%"
115+
config={{
116+
label: {
117+
"text": "Mention Component",
118+
"width": "47",
119+
"widthUnit": "%",
120+
},
121+
}}
122+
compFactory={MentionComp}
123+
/>
19124
</ExampleGroup>
20125
</>
21126
);

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ import ImageEditorExample from "./presentationComp/imageEditor";
9696
import DrawerExample from "./ChartsComp/Drawer";
9797
import CollapsibleContainerExample from "./ContainersComp/CollapsibleContainer";
9898
import FloatTextContainerExample from "./ContainersComp/FloatTextContainer";
99+
import SplitLayoutExample from "./ContainersComp/SplitLayout";
99100

100101
const examples: { [key in UICompType]?: React.FunctionComponent } = {
101102
button: ButtonExample,
@@ -195,6 +196,7 @@ const examples: { [key in UICompType]?: React.FunctionComponent } = {
195196
drawer: DrawerExample,
196197
collapsibleContainer: CollapsibleContainerExample,
197198
floatTextContainer: FloatTextContainerExample,
199+
splitLayout: SplitLayoutExample,
198200
};
199201

200202
export default examples;

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/table.tsx

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,21 @@ export default function TableExample() {
5151
/>
5252
</ExampleGroup>
5353

54-
<ExampleGroup title={trans("componentDoc.style")}>
54+
<ExampleGroup title="Layout">
5555
<Example
5656
title={trans("componentDoc.hideHeader")}
5757
width={400}
5858
config={{ data: data, hideHeader: true }}
5959
blackListConfig={blackListConfig}
6060
compFactory={TableComp}
6161
/>
62+
<Example
63+
title="Hide Footer"
64+
width={400}
65+
config={{ data: data, hideToolbar: true }}
66+
blackListConfig={blackListConfig}
67+
compFactory={TableComp}
68+
/>
6269
<Example
6370
title={trans("componentDoc.hideBordered")}
6471
width={400}
@@ -90,6 +97,30 @@ export default function TableExample() {
9097
blackListConfig={blackListConfig}
9198
compFactory={TableComp}
9299
/>
100+
<Example
101+
title="Showing Loading bars"
102+
width={400}
103+
config={{
104+
data: data,
105+
hideBordered: true,
106+
loading: true,
107+
}}
108+
blackListConfig={blackListConfig}
109+
compFactory={TableComp}
110+
/>
111+
</ExampleGroup>
112+
113+
<ExampleGroup title="Editable Table & Edit modes">
114+
<Example
115+
title="Editable Table"
116+
width={400}
117+
config={{
118+
data: data,
119+
hideHeader: true,
120+
}}
121+
blackListConfig={blackListConfig}
122+
compFactory={TableComp}
123+
/>
93124
</ExampleGroup>
94125

95126
<ExampleGroup title={trans("componentDoc.paginationSetting")}>
@@ -154,6 +185,46 @@ export default function TableExample() {
154185
blackListConfig={blackListConfig}
155186
compFactory={TableComp}
156187
/>
188+
<Example
189+
title="Hiding Filter icon"
190+
width={400}
191+
config={{
192+
data: data,
193+
toolbar:{position:"below", showFilter:false, showDownload:true,showRefresh:true,columnSetting:true},
194+
}}
195+
blackListConfig={blackListConfig}
196+
compFactory={TableComp}
197+
/>
198+
<Example
199+
title="Hiding Download Icon"
200+
width={400}
201+
config={{
202+
data: data,
203+
toolbar:{position:"below", showFilter:true, showDownload:false,showRefresh:true,columnSetting:true},
204+
}}
205+
blackListConfig={blackListConfig}
206+
compFactory={TableComp}
207+
/>
208+
<Example
209+
title="Hiding Refresh Icon"
210+
width={400}
211+
config={{
212+
data: data,
213+
toolbar:{position:"below", showFilter:true, showDownload:true,showRefresh:false,columnSetting:true},
214+
}}
215+
blackListConfig={blackListConfig}
216+
compFactory={TableComp}
217+
/>
218+
<Example
219+
title="Hiding Column Visibility Icon"
220+
width={400}
221+
config={{
222+
data: data,
223+
toolbar:{position:"below", showFilter:true, showDownload:true,showRefresh:true,columnSetting:false},
224+
}}
225+
blackListConfig={blackListConfig}
226+
compFactory={TableComp}
227+
/>
157228
</ExampleGroup>
158229

159230
<ExampleGroup title="Summary and Inline Rows">

0 commit comments

Comments
 (0)
Please sign in to comment.