Skip to content

Commit 870a6e6

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1308 from lowcoder-org/doc/existing_components
Added examples for Existing Components - Demo
2 parents d09cae7 + 6d3f013 commit 870a6e6

File tree

17 files changed

+365
-47
lines changed

17 files changed

+365
-47
lines changed

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/Button.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export default function ButtonExample() {
2929
compFactory={ButtonComp}
3030
/>
3131
</ExampleGroup>
32+
3233
<ExampleGroup title={trans("componentDoc.style")}>
3334
<Example
3435
title={trans("componentDoc.danger")}

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/DropDownButton.tsx

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -43,18 +43,6 @@ export default function DropdownExample() {
4343
blackListConfig={blackListConfig}
4444
compFactory={DropdownComp}
4545
/>
46-
<Example
47-
title={trans("componentDoc.loading")}
48-
width={120}
49-
config={{
50-
type: "default",
51-
text: trans("componentDoc.menu"),
52-
loading: true,
53-
options: options,
54-
}}
55-
blackListConfig={blackListConfig}
56-
compFactory={DropdownComp}
57-
/>
5846
<Example
5947
title={trans("componentDoc.disabled")}
6048
width={120}
@@ -68,31 +56,8 @@ export default function DropdownExample() {
6856
compFactory={DropdownComp}
6957
/>
7058
</ExampleGroup>
59+
7160
<ExampleGroup title={trans("componentDoc.style")}>
72-
<Example
73-
title={trans("componentDoc.danger")}
74-
width={120}
75-
config={{
76-
style: { backgroundColor: "#CD574C", borderColor: "#AC3A32", color: "#e0ecf6" },
77-
}}
78-
compFactory={DropdownComp}
79-
/>
80-
<Example
81-
title={trans("componentDoc.warning")}
82-
width={120}
83-
config={{
84-
style: { backgroundColor: "#F4A125", borderColor: "#DA7D16", color: "#000000" },
85-
}}
86-
compFactory={DropdownComp}
87-
/>
88-
<Example
89-
title={trans("componentDoc.success")}
90-
width={120}
91-
config={{
92-
style: { backgroundColor: "#5E8D6E", borderColor: "#40694E", color: "#e0ecf6" },
93-
}}
94-
compFactory={DropdownComp}
95-
/>
9661
<Example
9762
title={trans("componentDoc.onlyMenu")}
9863
width={120}

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Date.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export default function DateExample() {
2929
config={{
3030
value: trans("componentDoc.noValue"),
3131
format: "YYYY-MM-DD",
32+
placeholder: "Select Date",
3233
disabled: false,
3334
label: {
3435
text: trans("componentDoc.date"),
@@ -51,6 +52,7 @@ export default function DateExample() {
5152
compFactory={DatePickerComp}
5253
/>
5354
</ExampleGroup>
55+
5456
<ExampleGroup title={trans("componentDoc.labelText")} description="">
5557
<Example
5658
title={trans("componentDoc.leftLeftAlign")}
@@ -101,6 +103,7 @@ export default function DateExample() {
101103
compFactory={DatePickerComp}
102104
/>
103105
</ExampleGroup>
106+
104107
<ExampleGroup title={trans("componentDoc.validation")}>
105108
<Example
106109
title={trans("componentDoc.required")}

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/DateRange.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ export default function DateRangeExample() {
7272
compFactory={DateRangeComp}
7373
/>
7474
</ExampleGroup>
75+
7576
<ExampleGroup title={trans("componentDoc.labelText")} description="">
7677
<Example
7778
title={trans("componentDoc.leftLeftAlign")}
@@ -132,6 +133,7 @@ export default function DateRangeExample() {
132133
compFactory={DateRangeComp}
133134
/>
134135
</ExampleGroup>
136+
135137
<ExampleGroup title={trans("componentDoc.validation")}>
136138
<Example
137139
title={trans("componentDoc.required")}
@@ -164,6 +166,37 @@ export default function DateRangeExample() {
164166
blackListConfig={blackListConfig.slice(0, 3)}
165167
compFactory={DateRangeComp}
166168
/>
169+
<Example
170+
title="Show Time"
171+
config={{
172+
required: true,
173+
showTime: true,
174+
label: {
175+
text: trans("componentDoc.date"),
176+
position: "column",
177+
align: "left",
178+
},
179+
}}
180+
nameMap={nameMap}
181+
blackListConfig={blackListConfig.slice(0, 3)}
182+
compFactory={DateRangeComp}
183+
/>
184+
<Example
185+
title="Show Time ( 12 hours format )"
186+
config={{
187+
required: true,
188+
showTime: true,
189+
use12Hours: true,
190+
label: {
191+
text: trans("componentDoc.date"),
192+
position: "column",
193+
align: "left",
194+
},
195+
}}
196+
nameMap={nameMap}
197+
blackListConfig={blackListConfig.slice(0, 3)}
198+
compFactory={DateRangeComp}
199+
/>
167200
</ExampleGroup>
168201
</>
169202
);

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Time.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export default function TimeExample() {
2929
config={{
3030
value: trans("componentDoc.noValue"),
3131
format: "hh:mm:ss",
32+
placeholder: "Select Time",
3233
disabled: false,
3334
label: {
3435
text: trans("componentDoc.time"),
@@ -51,6 +52,7 @@ export default function TimeExample() {
5152
compFactory={TimePickerComp}
5253
/>
5354
</ExampleGroup>
55+
5456
<ExampleGroup title={trans("componentDoc.labelText")} description="">
5557
<Example
5658
title={trans("componentDoc.leftLeftAlign")}
@@ -101,6 +103,7 @@ export default function TimeExample() {
101103
compFactory={TimePickerComp}
102104
/>
103105
</ExampleGroup>
106+
104107
<ExampleGroup title={trans("componentDoc.validation")}>
105108
<Example
106109
title={trans("componentDoc.required")}
@@ -126,6 +129,35 @@ export default function TimeExample() {
126129
blackListConfig={blackListConfig}
127130
compFactory={TimePickerComp}
128131
/>
132+
<Example
133+
title="Time Steps"
134+
config={{
135+
required: true,
136+
hourStep: "2",
137+
minuteStep: "10",
138+
secondStep: "30",
139+
label: {
140+
text: trans("componentDoc.time"),
141+
},
142+
}}
143+
blackListConfig={blackListConfig}
144+
compFactory={TimePickerComp}
145+
/>
146+
<Example
147+
title= "Show Time ( 12 Hours format )"
148+
config={{
149+
required: true,
150+
hourStep: "2",
151+
minuteStep: "10",
152+
secondStep: "30",
153+
use12Hours: true,
154+
label: {
155+
text: trans("componentDoc.time"),
156+
},
157+
}}
158+
blackListConfig={blackListConfig}
159+
compFactory={TimePickerComp}
160+
/>
129161
</ExampleGroup>
130162
</>
131163
);

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/TimeRange.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export default function TimeRangeExample() {
3737
title={trans("componentDoc.noDefaultValue")}
3838
config={{
3939
format: "hh:mm:ss",
40+
placeholder: "Select Time",
4041
disabled: false,
4142
label: {
4243
text: trans("componentDoc.time"),
@@ -64,6 +65,7 @@ export default function TimeRangeExample() {
6465
compFactory={TimeRangeComp}
6566
/>
6667
</ExampleGroup>
68+
6769
<ExampleGroup title={trans("componentDoc.labelText")} description="">
6870
<Example
6971
title={trans("componentDoc.leftLeftAlign")}
@@ -120,6 +122,7 @@ export default function TimeRangeExample() {
120122
compFactory={TimeRangeComp}
121123
/>
122124
</ExampleGroup>
125+
123126
<ExampleGroup title={trans("componentDoc.validation")}>
124127
<Example
125128
title={trans("componentDoc.required")}
@@ -150,6 +153,29 @@ export default function TimeRangeExample() {
150153
blackListConfig={blackListConfig}
151154
compFactory={TimeRangeComp}
152155
/>
156+
<Example
157+
title="Time Steps"
158+
config={{
159+
required: true,
160+
hourStep: "2",
161+
minuteStep: "5",
162+
secondStep: "15",
163+
}}
164+
blackListConfig={blackListConfig}
165+
compFactory={TimeRangeComp}
166+
/>
167+
<Example
168+
title="Show Time ( 12 hours format )"
169+
config={{
170+
required: true,
171+
hourStep: "2",
172+
minuteStep: "5",
173+
secondStep: "15",
174+
use12Hours: true,
175+
}}
176+
blackListConfig={blackListConfig}
177+
compFactory={TimeRangeComp}
178+
/>
153179
</ExampleGroup>
154180
</>
155181
);

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/NumberInput.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export default function NumberInputExample() {
5454
compFactory={NumberInputComp}
5555
/>
5656
</ExampleGroup>
57+
5758
<ExampleGroup title={trans("componentDoc.format")} description="">
5859
<Example
5960
title={trans("componentDoc.percent")}
@@ -79,7 +80,25 @@ export default function NumberInputExample() {
7980
}}
8081
compFactory={NumberInputComp}
8182
/>
83+
<Example
84+
title="Step"
85+
config={{
86+
value: "1",
87+
step: "10",
88+
}}
89+
compFactory={NumberInputComp}
90+
/>
91+
<Example
92+
title="Hide Increment/Decrement buttons"
93+
config={{
94+
value: "1",
95+
step: "10",
96+
controls: false,
97+
}}
98+
compFactory={NumberInputComp}
99+
/>
82100
</ExampleGroup>
101+
83102
<ExampleGroup title={trans("componentDoc.validation")}>
84103
<Example
85104
title={trans("componentDoc.mostValue")}

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,20 @@ export default function RangeSliderExample() {
3636
}}
3737
compFactory={RangeSliderComp}
3838
/>
39+
<Example
40+
title={trans("componentDoc.default")}
41+
config={{
42+
value: "60",
43+
disabled: "false",
44+
start: "10",
45+
end: "70",
46+
min: "0",
47+
max: "100",
48+
step: "10",
49+
vertical: true,
50+
}}
51+
compFactory={RangeSliderComp}
52+
/>
3953
</ExampleGroup>
4054

4155
<ExampleGroup title={trans("componentDoc.labelText")} description="">

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Rating.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function RatingExample() {
1616
<Example
1717
title={trans("componentDoc.default")}
1818
config={{
19-
value: "4",
19+
defaultValue: "4",
2020
disabled: "false",
2121
}}
2222
compFactory={RatingComp}
@@ -25,15 +25,15 @@ export default function RatingExample() {
2525
title={trans("componentDoc.notSelect")}
2626
config={{
2727
disabled: "false",
28-
value: "0",
28+
defaultValue: "0",
2929
}}
3030
compFactory={RatingComp}
3131
/>
3232
<Example
3333
title={trans("componentDoc.disabled")}
3434
config={{
3535
disabled: "true",
36-
value: "4",
36+
defaultValue: "2",
3737
}}
3838
compFactory={RatingComp}
3939
/>
@@ -48,7 +48,7 @@ export default function RatingExample() {
4848
position: "row",
4949
align: "left",
5050
},
51-
value: "4",
51+
defaultValue: "4",
5252
}}
5353
compFactory={RatingComp}
5454
/>
@@ -60,7 +60,7 @@ export default function RatingExample() {
6060
position: "row",
6161
align: "right",
6262
},
63-
value: "4",
63+
defaultValue: "4",
6464
}}
6565
compFactory={RatingComp}
6666
/>
@@ -72,7 +72,7 @@ export default function RatingExample() {
7272
position: "column",
7373
align: "left",
7474
},
75-
value: "4",
75+
defaultValue: "4",
7676
}}
7777
compFactory={RatingComp}
7878
/>
@@ -84,16 +84,17 @@ export default function RatingExample() {
8484
position: "column",
8585
align: "right",
8686
},
87-
value: "4",
87+
defaultValue: "4",
8888
}}
8989
compFactory={RatingComp}
9090
/>
9191
</ExampleGroup>
92+
9293
<ExampleGroup title={trans("componentDoc.style")}>
9394
<Example
9495
title={trans("componentDoc.maxRating")}
9596
config={{
96-
value: "4",
97+
defaultValue: "4",
9798
max: "6",
9899
}}
99100
nameMap={nameMap}
@@ -102,7 +103,8 @@ export default function RatingExample() {
102103
<Example
103104
title={trans("componentDoc.halfSelect")}
104105
config={{
105-
value: "4.5",
106+
max: "6",
107+
defaultValue: "3.5",
106108
allowHalf: "true",
107109
}}
108110
compFactory={RatingComp}

0 commit comments

Comments
 (0)