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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy