Skip to content

Commit 3f78a0a

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1435 from lowcoder-org/doc/existing_components
Doc/existing components
2 parents 84393c8 + e04598d commit 3f78a0a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+10689
-207
lines changed

‎client/packages/lowcoder/src/comps/comps/iconComp.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ const Container = styled.div<{
4141
${(props) =>
4242
props.$style &&
4343
css`
44-
height: calc(100% - ${props.$style.margin});
45-
width: calc(100% - ${props.$style.margin});
46-
padding: ${props.$style.padding};
44+
height: calc(100% - ${props.$style.margin ?? '0px'});
45+
width: calc(100% - ${props.$style.margin ?? '0px'});
46+
padding: ${props.$style.padding ?? '0px'};
4747
margin: ${props.$style.margin};
4848
border: ${props.$style.borderWidth} solid ${props.$style.border};
4949
border-radius: ${props.$style.radius};

‎client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
1+
import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
2+
import { ButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
3+
import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
4+
import { refMethods } from "@lowcoder-ee/comps/generators/withMethodExposing";
5+
import { blurMethod, clickMethod, focusWithOptions } from "@lowcoder-ee/comps/utils/methodUtils";
16
import { default as Button } from "antd/es/button";
2-
import {
3-
styleControl,
4-
ButtonStyleType,
5-
ButtonStyle,
6-
migrateOldData,
7-
refMethods,
8-
blurMethod,
9-
clickMethod,
10-
focusWithOptions,
11-
genActiveColor,
12-
genHoverColor,
13-
} from "lowcoder-sdk";
7+
import { genActiveColor, genHoverColor } from "components/colorSelect/colorUtils";
148
import styled, { css } from "styled-components";
159
// import { genActiveColor, genHoverColor } from "lowcoder-design";
1610

1711
export function getButtonStyle(buttonStyle: any) {
18-
const hoverColor = genHoverColor(buttonStyle.background);
19-
const activeColor = genActiveColor(buttonStyle.background);
12+
const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
13+
const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
2014
return css`
2115
&&& {
2216
border-radius: ${buttonStyle.radius};

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

Lines changed: 49 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,72 @@ import { trans } from "i18n";
33
import Example from "../../common/Example";
44
import ExampleGroup from "../../common/ExampleGroup";
55

6+
const buttons = {
7+
"manual": [
8+
{
9+
"id": 0,
10+
"label": "Option 1",
11+
"badge": "1",
12+
"description": "",
13+
"icon": "/icon:antd/filetextoutlined"
14+
},
15+
{
16+
"id": 1,
17+
"label": "Option 2",
18+
"badge": "0",
19+
"description": "",
20+
"icon": "/icon:antd/filetextoutlined"
21+
}
22+
]
23+
};
24+
625
export default function FloatButtonExample() {
726
return (
827
<>
928
<ExampleGroup
1029
title={trans("componentDoc.basicUsage")}
11-
description={trans("componentDoc.basicDemoDescription")}
30+
description="The Following Examples Show the Basic Usage of the Float Button Component."
1231
>
1332
<Example
14-
title={trans("componentDoc.default")}
33+
title="A Simple Float Button"
1534
config={{
16-
icon: "/icon:antd/questioncircleoutlined",
17-
value: "",
18-
shape: "circle",
19-
manual: [
20-
{
21-
badge: "1",
22-
description: "",
23-
icon: "/icon:antd/filetextoutlined",
24-
id: 0,
25-
label: "Option 1"
26-
},
27-
{
28-
badge: "1",
29-
description: "",
30-
icon: "/icon:antd/filetextoutlined",
31-
id: 1,
32-
label: "Option 2"
33-
}
34-
]
35-
35+
buttons: buttons,
36+
}}
37+
compFactory={FloatButtonComp}
38+
/>
39+
<Example
40+
title="Hiding the Float Button"
41+
config={{
42+
buttons: buttons,
43+
hidden: true,
3644
}}
3745
compFactory={FloatButtonComp}
3846
/>
3947
<Example
40-
title={trans("componentDoc.loading")}
41-
width={120}
48+
title="Different Icon on Float Button"
4249
config={{
43-
text: trans("componentDoc.submit"),
44-
loading: true
50+
buttons: buttons,
51+
icon: "/icon:solid/align-justify",
4552
}}
4653
compFactory={FloatButtonComp}
4754
/>
4855
<Example
49-
title={trans("componentDoc.disabled")}
50-
width={120}
51-
config={{
52-
text: trans("componentDoc.submit"),
53-
disabled: true
56+
title="Button Theme - Default"
57+
config={{
58+
buttons: buttons,
59+
buttonTheme: "default",
60+
icon: "/icon:solid/align-justify",
61+
includeMargin: true,
62+
preventStyleOverwriting: false,
63+
value: "",
64+
}}
65+
compFactory={FloatButtonComp}
66+
/>
67+
<Example
68+
title="Button Shape - Square"
69+
config={{
70+
buttons: buttons,
71+
shape: "square",
5472
}}
5573
compFactory={FloatButtonComp}
5674
/>

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

Lines changed: 72 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IconComp } from "comps/comps/iconComp";
1+
import { ControlButton } from "comps/comps/meetingComp/controlButton";
22
import { trans } from "i18n";
33
import Example from "../../common/Example";
44
import ExampleGroup from "../../common/ExampleGroup";
@@ -8,59 +8,110 @@ export default function IconButtonExample() {
88
<>
99
<ExampleGroup
1010
title={trans("componentDoc.basicUsage")}
11-
description={trans("componentDoc.basicDemoDescription")}
11+
description="The Following Examples Show the Basic Usage of the Icon Button Component."
1212
>
1313
<Example
14-
title={trans("componentDoc.default")}
15-
width={20}
14+
title="A Simple Icon button"
15+
width={120}
1616
config={{
17-
form: "",
18-
type: "",
1917
prefixIcon: "/icon:solid/align-justify",
20-
iconSize: "30px",
21-
aspectRatio: "1 / 1",
22-
autoHeight: "fixed",
2318
}}
24-
compFactory={IconComp}
19+
compFactory={ControlButton}
2520
/>
2621
<Example
2722
title={trans("componentDoc.loading")}
2823
width={120}
29-
config={{ type: "default", text: trans("componentDoc.submit"), loading: true }}
30-
compFactory={IconComp}
24+
config={{
25+
prefixIcon: "/icon:solid/align-justify",
26+
loading: true,
27+
}}
28+
compFactory={ControlButton}
3129
/>
3230
<Example
3331
title={trans("componentDoc.disabled")}
3432
width={120}
35-
config={{ type: "default", text: trans("componentDoc.submit"), disabled: true }}
36-
compFactory={IconComp}
33+
config={{
34+
disabled: true,
35+
prefixIcon: "/icon:solid/align-justify",
36+
}}
37+
compFactory={ControlButton}
38+
/>
39+
<Example
40+
title="Hiding the Icon Button"
41+
width={120}
42+
config={{
43+
hidden: true,
44+
prefixIcon: "/icon:solid/align-justify",
45+
}}
46+
compFactory={ControlButton}
3747
/>
3848
</ExampleGroup>
3949

40-
<ExampleGroup title={trans("componentDoc.style")}>
50+
<ExampleGroup
51+
title="Layout & Style"
52+
description="The Following Examples Show the Layout & Style options on Float Button Component."
53+
>
4154
<Example
4255
title={trans("componentDoc.danger")}
4356
width={120}
4457
config={{
45-
style: { backgroundColor: "#CD574C", borderColor: "#AC3A32", color: "#E0ECF6" },
58+
prefixIcon: "/icon:solid/ellipsis-vertical",
59+
style: {
60+
backgroundColor: "#CD574C",
61+
borderColor: "#AC3A32",
62+
color: "#E0ECF6" },
4663
}}
47-
compFactory={IconComp}
64+
compFactory={ControlButton}
4865
/>
4966
<Example
5067
title={trans("componentDoc.warning")}
5168
width={120}
5269
config={{
53-
style: { backgroundColor: "#F4A125", borderColor: "#DA7D16", color: "#000000" },
70+
prefixIcon: "/icon:solid/square-caret-right",
71+
style: {
72+
backgroundColor: "#F4A125",
73+
borderColor: "#DA7D16",
74+
color: "#000000" },
5475
}}
55-
compFactory={IconComp}
76+
compFactory={ControlButton}
5677
/>
5778
<Example
5879
title={trans("componentDoc.success")}
5980
width={120}
6081
config={{
61-
style: { backgroundColor: "#5E8D6E", borderColor: "#40694E", color: "#E0ECF6" },
82+
prefixIcon: "/icon:antd/audiofilled",
83+
style: {
84+
backgroundColor: "#5E8D6E",
85+
borderColor: "#40694E",
86+
color: "#E0ECF6" },
87+
}}
88+
compFactory={ControlButton}
89+
/>
90+
<Example
91+
title="Icon Size - 30px"
92+
width={120}
93+
config={{
94+
prefixIcon: "/icon:antd/audiofilled",
95+
iconSize: "30px",
96+
style: {
97+
backgroundColor: "#5E8D6E",
98+
borderColor: "#40694E",
99+
color: "#E0ECF6" },
100+
}}
101+
compFactory={ControlButton}
102+
/>
103+
<Example
104+
title="Icon Size - 40px"
105+
width={120}
106+
config={{
107+
prefixIcon: "/icon:antd/audiofilled",
108+
iconSize: "40px",
109+
style: {
110+
backgroundColor: "#5E8D6E",
111+
borderColor: "#40694E",
112+
color: "#E0ECF6" },
62113
}}
63-
compFactory={IconComp}
114+
compFactory={ControlButton}
64115
/>
65116
</ExampleGroup>
66117
</>

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { uiCompRegistry } from "comps/uiCompRegistry";
2+
import { trans } from "i18n";
3+
import { chartColorPalette } from "lowcoder-design";
4+
import Example from "../../common/Example";
5+
import ExampleGroup from "../../common/ExampleGroup";
6+
7+
const ChartCompWithDefault = uiCompRegistry["calendar"].comp;
8+
9+
export default function CalendarExample() {
10+
return (
11+
<>
12+
<ExampleGroup
13+
title={trans("componentDoc.basicUsage")}
14+
description={trans("componentDoc.basicDemoDescription")}
15+
>
16+
<Example
17+
title={trans("componentDoc.default")}
18+
config={{
19+
}}
20+
compFactory={ChartCompWithDefault}
21+
/>
22+
</ExampleGroup>
23+
</>
24+
);
25+
}

0 commit comments

Comments
 (0)