Skip to content

Commit b0a63f7

Browse files
adnanqaopsadnanqaops
committed
Changes on Existing Components
1 parent 503296e commit b0a63f7

File tree

5 files changed

+248
-0
lines changed

5 files changed

+248
-0
lines changed

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { FloatButtonComp } from "comps/comps/buttonComp/floatButtonComp"
2+
import { trans } from "i18n";
3+
import Example from "../../common/Example";
4+
import ExampleGroup from "../../common/ExampleGroup";
5+
6+
export default function FloatButtonExample() {
7+
return (
8+
<>
9+
<ExampleGroup
10+
title={trans("componentDoc.basicUsage")}
11+
description={trans("componentDoc.basicDemoDescription")}
12+
>
13+
<Example
14+
title={trans("componentDoc.default")}
15+
width={120}
16+
config={{
17+
text: trans("componentDoc.submit")
18+
}}
19+
compFactory={FloatButtonComp}
20+
/>
21+
<Example
22+
title={trans("componentDoc.loading")}
23+
width={120}
24+
config={{
25+
text: trans("componentDoc.submit"),
26+
loading: true
27+
}}
28+
compFactory={FloatButtonComp}
29+
/>
30+
<Example
31+
title={trans("componentDoc.disabled")}
32+
width={120}
33+
config={{
34+
text: trans("componentDoc.submit"),
35+
disabled: true
36+
}}
37+
compFactory={FloatButtonComp}
38+
/>
39+
</ExampleGroup>
40+
41+
</>
42+
);
43+
}

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { IconComp } from "comps/comps/iconComp";
2+
import { trans } from "i18n";
3+
import Example from "../../common/Example";
4+
import ExampleGroup from "../../common/ExampleGroup";
5+
6+
export default function IconButtonExample() {
7+
return (
8+
<>
9+
<ExampleGroup
10+
title={trans("componentDoc.basicUsage")}
11+
description={trans("componentDoc.basicDemoDescription")}
12+
>
13+
<Example
14+
title={trans("componentDoc.default")}
15+
width={20}
16+
config={{
17+
form: "",
18+
type: "",
19+
prefixIcon: "/icon:solid/align-justify",
20+
iconSize: "30px",
21+
aspectRatio: "1 / 1",
22+
autoHeight: "fixed",
23+
}}
24+
compFactory={IconComp}
25+
/>
26+
<Example
27+
title={trans("componentDoc.loading")}
28+
width={120}
29+
config={{ type: "default", text: trans("componentDoc.submit"), loading: true }}
30+
compFactory={IconComp}
31+
/>
32+
<Example
33+
title={trans("componentDoc.disabled")}
34+
width={120}
35+
config={{ type: "default", text: trans("componentDoc.submit"), disabled: true }}
36+
compFactory={IconComp}
37+
/>
38+
</ExampleGroup>
39+
40+
<ExampleGroup title={trans("componentDoc.style")}>
41+
<Example
42+
title={trans("componentDoc.danger")}
43+
width={120}
44+
config={{
45+
style: { backgroundColor: "#CD574C", borderColor: "#AC3A32", color: "#E0ECF6" },
46+
}}
47+
compFactory={IconComp}
48+
/>
49+
<Example
50+
title={trans("componentDoc.warning")}
51+
width={120}
52+
config={{
53+
style: { backgroundColor: "#F4A125", borderColor: "#DA7D16", color: "#000000" },
54+
}}
55+
compFactory={IconComp}
56+
/>
57+
<Example
58+
title={trans("componentDoc.success")}
59+
width={120}
60+
config={{
61+
style: { backgroundColor: "#5E8D6E", borderColor: "#40694E", color: "#E0ECF6" },
62+
}}
63+
compFactory={IconComp}
64+
/>
65+
</ExampleGroup>
66+
</>
67+
);
68+
}

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import { ToggleButtonComp } from "comps/comps/buttonComp/toggleButtonComp"
2+
import { trans } from "i18n";
3+
import Example from "../../common/Example";
4+
import ExampleGroup from "../../common/ExampleGroup";
5+
6+
export default function ToggleButtonExample() {
7+
return (
8+
<>
9+
<ExampleGroup
10+
title={trans("componentDoc.basicUsage")}
11+
description={trans("componentDoc.basicDemoDescription")}
12+
>
13+
<Example
14+
title={trans("componentDoc.default")}
15+
width={120}
16+
config={{
17+
text: trans("componentDoc.submit")
18+
}}
19+
compFactory={ToggleButtonComp}
20+
/>
21+
<Example
22+
title={trans("componentDoc.loading")}
23+
width={120}
24+
config={{
25+
text: trans("componentDoc.submit"),
26+
loading: true
27+
}}
28+
compFactory={ToggleButtonComp}
29+
/>
30+
<Example
31+
title={trans("componentDoc.disabled")}
32+
width={120}
33+
config={{
34+
text: trans("componentDoc.submit"),
35+
disabled: true
36+
}}
37+
compFactory={ToggleButtonComp}
38+
/>
39+
</ExampleGroup>
40+
41+
<ExampleGroup title="Advanced">
42+
<Example
43+
title="Hide Text"
44+
width={120}
45+
config={{
46+
text: trans("componentDoc.submit"),
47+
showText: false,
48+
}}
49+
compFactory={ToggleButtonComp}
50+
/>
51+
<Example
52+
title="Text for True & False"
53+
width={120}
54+
config={{
55+
text: trans("componentDoc.submit"),
56+
showText: true,
57+
trueText: "True",
58+
falseText: "False",
59+
}}
60+
compFactory={ToggleButtonComp}
61+
/>
62+
<Example
63+
title="Icon Position"
64+
width={120}
65+
config={{
66+
text: trans("componentDoc.submit"),
67+
iconPosition: "left",
68+
}}
69+
compFactory={ToggleButtonComp}
70+
/>
71+
<Example
72+
title="Content Alignment - Left"
73+
width={180}
74+
config={{
75+
text: trans("componentDoc.submit"),
76+
alignment: "left",
77+
}}
78+
compFactory={ToggleButtonComp}
79+
/>
80+
<Example
81+
title="Content Alignment - Right"
82+
width={180}
83+
config={{
84+
text: trans("componentDoc.submit"),
85+
alignment: "right",
86+
}}
87+
compFactory={ToggleButtonComp}
88+
/>
89+
<Example
90+
title="Content Alignment - Center"
91+
width={180}
92+
config={{
93+
text: trans("componentDoc.submit"),
94+
alignment: "center",
95+
}}
96+
compFactory={ToggleButtonComp}
97+
/>
98+
<Example
99+
title="Content Alignment - Justified"
100+
width={180}
101+
config={{
102+
text: trans("componentDoc.submit"),
103+
alignment: "stretch",
104+
}}
105+
compFactory={ToggleButtonComp}
106+
/>
107+
</ExampleGroup>
108+
</>
109+
);
110+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { UICompType } from "comps/uiCompRegistry";
22
import ButtonExample from "./ButtonComp/Button";
3+
import IconButtonExample from "./ButtonComp/IconButton";
4+
import ToggleButtonExample from "./ButtonComp/ToggleButton";
35
import InputExample from "./textInputComp/Input";
46
import PasswordExample from "./textInputComp/Password";
57
import TextAreaExample from "./textInputComp/TextArea";
@@ -36,6 +38,8 @@ import IFrameExample from "./IFrame";
3638

3739
const examples: { [key in UICompType]?: React.FunctionComponent } = {
3840
button: ButtonExample,
41+
controlButton: IconButtonExample,
42+
toggleButton: ToggleButtonExample,
3943
input: InputExample,
4044
textArea: TextAreaExample,
4145
password: PasswordExample,

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ export default function ChartExample() {
171171
compFactory={ChartCompWithDefault}
172172
/>
173173
</ExampleGroup>
174+
174175
<ExampleGroup title={trans("componentDoc.line")}>
175176
<Example
176177
title={trans("componentDoc.basicLine")}
@@ -221,6 +222,7 @@ export default function ChartExample() {
221222
compFactory={ChartCompWithDefault}
222223
/>
223224
</ExampleGroup>
225+
224226
<ExampleGroup title={trans("componentDoc.scatter")}>
225227
<Example
226228
title={trans("componentDoc.circle")}
@@ -316,6 +318,7 @@ export default function ChartExample() {
316318
compFactory={ChartCompWithDefault}
317319
/>
318320
</ExampleGroup>
321+
319322
<ExampleGroup title={trans("componentDoc.pie")}>
320323
<Example
321324
title={trans("componentDoc.basicPie")}
@@ -363,6 +366,26 @@ export default function ChartExample() {
363366
compFactory={ChartCompWithDefault}
364367
/>
365368
</ExampleGroup>
369+
370+
<ExampleGroup title={trans("componentDoc.pie")}>
371+
<Example
372+
title={trans("componentDoc.basicPie")}
373+
width={500}
374+
height={300}
375+
nameMap={{ "chartConfig.comp.type": trans("componentDoc.pieChatType") }}
376+
blackListConfig={blackListConfig}
377+
config={{
378+
mode: "map",
379+
data: data,
380+
series: series,
381+
chartConfig: {
382+
compType: "bar",
383+
comp: { type: "basicBar" },
384+
},
385+
}}
386+
compFactory={ChartCompWithDefault}
387+
/>
388+
</ExampleGroup>
366389
</>
367390
);
368391
}

0 commit comments

Comments
 (0)