Skip to content

Commit 4ac855d

Browse files
freddysundownerfreddysundowner
committed
added grid too shapes comp and lables to shapes lists
1 parent a78fbe1 commit 4ac855d

File tree

2 files changed

+309
-155
lines changed

2 files changed

+309
-155
lines changed

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

Lines changed: 141 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,173 +1,159 @@
1-
import { useEffect, useRef, useState } from "react";
2-
import styled, { css } from "styled-components";
3-
import { RecordConstructorToView } from "lowcoder-core";
4-
import { styleControl } from "comps/controls/styleControl";
5-
import _ from "lodash";
6-
import {
7-
IconStyle,
8-
IconStyleType,
9-
heightCalculator,
10-
widthCalculator,
11-
} from "comps/controls/styleControlConstants";
12-
import { UICompBuilder } from "comps/generators/uiCompBuilder";
13-
import { withDefault } from "../../generators";
1+
import { CompParams } from "lowcoder-core";
2+
import { ToDataType } from "comps/generators/multi";
143
import {
154
NameConfigHidden,
165
withExposingConfigs,
176
} from "comps/generators/withExposing";
7+
import { NameGenerator } from "comps/utils/nameGenerator";
188
import { Section, sectionNames } from "lowcoder-design";
19-
import { hiddenPropertyView } from "comps/utils/propertyUtils";
20-
import { trans } from "i18n";
21-
import { NumberControl } from "comps/controls/codeControl";
9+
import { oldContainerParamsToNew } from "../containerBase";
10+
import { toSimpleContainerData } from "../containerBase/simpleContainerComp";
11+
import { ShapeTriContainer } from "./shapeTriContainer";
2212
import { ShapeControl } from "comps/controls/shapeControl";
23-
import ReactResizeDetector from "react-resize-detector";
24-
import { AutoHeightControl } from "../../controls/autoHeightControl";
13+
import { withDefault } from "../../generators";
2514
import {
26-
clickEvent,
27-
eventHandlerControl,
28-
} from "../../controls/eventHandlerControl";
29-
import { useContext } from "react";
15+
ContainerChildren,
16+
ContainerCompBuilder,
17+
} from "../triContainerComp/triContainerCompBuilder";
18+
import {
19+
disabledPropertyView,
20+
hiddenPropertyView,
21+
} from "comps/utils/propertyUtils";
22+
import { trans } from "i18n";
23+
import { BoolCodeControl } from "comps/controls/codeControl";
24+
import { DisabledContext } from "comps/generators/uiCompBuilder";
25+
import React, { useContext, useEffect, useState } from "react";
3026
import { EditorContext } from "comps/editorState";
31-
import { Coolshape } from "coolshapes-react";
32-
33-
const Container = styled.div<{ $style: IconStyleType | undefined }>`
34-
display: flex;
35-
align-items: center;
36-
justify-content: center;
3727

38-
${(props) =>
39-
props.$style &&
40-
css`
41-
height: calc(100% - ${props.$style.margin});
42-
width: calc(100% - ${props.$style.margin});
43-
padding: ${props.$style.padding};
44-
margin: ${props.$style.margin};
45-
background: ${props.$style.background};
46-
svg {
47-
max-width: ${widthCalculator(props.$style.margin)};
48-
max-height: ${heightCalculator(props.$style.margin)};
49-
color: ${props.$style.fill};
50-
object-fit: contain;
51-
pointer-events: auto;
52-
}
53-
`}
54-
`;
55-
56-
const EventOptions = [clickEvent] as const;
57-
58-
const childrenMap = {
59-
style: styleControl(IconStyle),
60-
icon: withDefault(ShapeControl, ""),
61-
autoHeight: withDefault(AutoHeightControl, "auto"),
62-
iconSize: withDefault(NumberControl, 20),
63-
onEvent: eventHandlerControl(EventOptions),
64-
};
65-
66-
const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
67-
const conRef = useRef<HTMLDivElement>(null);
68-
const [width, setWidth] = useState(0);
69-
const [height, setHeight] = useState(0);
70-
71-
useEffect(() => {
72-
if (height && width) {
73-
onResize();
74-
}
75-
}, [height, width]);
76-
77-
const onResize = () => {
78-
const container = conRef.current;
79-
setWidth(container?.clientWidth ?? 0);
80-
setHeight(container?.clientHeight ?? 0);
28+
export const ContainerBaseComp = (function () {
29+
const childrenMap = {
30+
disabled: BoolCodeControl,
31+
icon: withDefault(ShapeControl, ""),
8132
};
82-
let [shape, setShape] = useState({ value: "star", index: 0 });
83-
useEffect(() => {
84-
if (props.icon) {
85-
let shapeDetails = Object.values(props?.icon)[4]?.value;
86-
setShape({
87-
index: parseInt(shapeDetails?.split("_")[0]),
88-
value: shapeDetails?.split("_")[1],
89-
});
90-
}
91-
}, [props.icon]);
33+
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
9234

93-
return (
94-
<ReactResizeDetector onResize={onResize}>
95-
<Container
96-
ref={conRef}
97-
$style={props.style}
98-
style={{
99-
fontSize: props.autoHeight
100-
? `${height < width ? height : width}px`
101-
: props.iconSize,
102-
}}
103-
onClick={() => {
104-
console.log("click");
105-
}}
106-
>
107-
<Coolshape
108-
type={shape.value as any}
109-
index={shape.index}
110-
noise={false}
111-
style={{
112-
border: `${props.style.borderWidth} solid ${props.style.border}`,
113-
borderRadius: props.style.radius,
114-
color: props.style.background,
115-
}}
116-
/>
117-
</Container>
118-
</ReactResizeDetector>
119-
);
120-
};
121-
122-
let ShapeBasicComp = (function () {
123-
return new UICompBuilder(childrenMap, (props) => <IconView {...props} />)
124-
.setPropertyViewFn((children) => (
125-
<>
126-
<Section name={sectionNames.basic}>
127-
{children.icon.propertyView({
128-
label: trans("iconComp.icon"),
129-
IconType: "All",
130-
})}
131-
</Section>
132-
133-
{["logic", "both"].includes(
134-
useContext(EditorContext).editorModeStatus
135-
) && (
136-
<Section name={sectionNames.interaction}>
137-
{children.onEvent.getPropertyView()}
138-
{hiddenPropertyView(children)}
35+
36+
return (
37+
<DisabledContext.Provider value={props.disabled}>
38+
<ShapeTriContainer {...props} />
39+
</DisabledContext.Provider>
40+
);
41+
})
42+
.setPropertyViewFn((children) => {
43+
return (
44+
<>
45+
<Section name={sectionNames.basic}>
46+
{children.icon.propertyView({
47+
label: trans("iconComp.icon"),
48+
IconType: "All",
49+
})}
13950
</Section>
140-
)}
141-
142-
{["layout", "both"].includes(
143-
useContext(EditorContext).editorModeStatus
144-
) && (
145-
<>
146-
<Section name={sectionNames.layout}>
147-
{children.autoHeight.propertyView({
148-
label: trans("iconComp.autoSize"),
149-
})}
150-
{!children.autoHeight.getView() &&
151-
children.iconSize.propertyView({
152-
label: trans("iconComp.iconSize"),
153-
})}
154-
</Section>
155-
<Section name={sectionNames.style}>
156-
{children.style.getPropertyView()}
51+
{(useContext(EditorContext).editorModeStatus === "logic" ||
52+
useContext(EditorContext).editorModeStatus === "both") && (
53+
<Section name={sectionNames.interaction}>
54+
{disabledPropertyView(children)}
55+
{hiddenPropertyView(children)}
15756
</Section>
158-
</>
159-
)}
160-
</>
161-
))
57+
)}
58+
59+
{(useContext(EditorContext).editorModeStatus === "layout" ||
60+
useContext(EditorContext).editorModeStatus === "both") && (
61+
<>
62+
<Section name={sectionNames.layout}>
63+
{children.container.getPropertyView()}
64+
</Section>
65+
<Section name={sectionNames.style}>
66+
{children.container.stylePropertyView()}
67+
</Section>
68+
{children.container.children.showHeader.getView() && (
69+
<Section name={"Header Style"}>
70+
{children.container.headerStylePropertyView()}
71+
</Section>
72+
)}
73+
{children.container.children.showBody.getView() && (
74+
<Section name={"Body Style"}>
75+
{children.container.bodyStylePropertyView()}
76+
</Section>
77+
)}
78+
{children.container.children.showFooter.getView() && (
79+
<Section name={"Footer Style"}>
80+
{children.container.footerStylePropertyView()}
81+
</Section>
82+
)}
83+
</>
84+
)}
85+
</>
86+
);
87+
})
16288
.build();
16389
})();
16490

165-
ShapeBasicComp = class extends ShapeBasicComp {
166-
override autoHeight(): boolean {
167-
return false;
91+
// Compatible with old data
92+
function convertOldContainerParams(params: CompParams<any>) {
93+
// convert older params to old params
94+
let tempParams = oldContainerParamsToNew(params);
95+
96+
if (tempParams.value) {
97+
const container = tempParams.value.container;
98+
// old params
99+
if (
100+
container &&
101+
(container.hasOwnProperty("layout") || container.hasOwnProperty("items"))
102+
) {
103+
const autoHeight = tempParams.value.autoHeight;
104+
const scrollbars = tempParams.value.scrollbars;
105+
return {
106+
...tempParams,
107+
value: {
108+
container: {
109+
showHeader: true,
110+
body: { 0: { view: container } },
111+
showBody: true,
112+
showFooter: false,
113+
autoHeight: autoHeight,
114+
scrollbars: scrollbars,
115+
},
116+
},
117+
};
118+
}
168119
}
169-
};
120+
return tempParams;
121+
}
170122

171-
export const ShapeComp = withExposingConfigs(ShapeBasicComp, [
172-
NameConfigHidden,
173-
]);
123+
class ContainerTmpComp extends ContainerBaseComp {
124+
constructor(params: CompParams<any>) {
125+
super(convertOldContainerParams(params));
126+
}
127+
}
128+
129+
export const ShapeComp = withExposingConfigs(ContainerTmpComp, [NameConfigHidden]);
130+
131+
type ContainerDataType = ToDataType<ContainerChildren<{}>>;
132+
133+
export function defaultContainerData(
134+
compName: string,
135+
nameGenerator: NameGenerator
136+
): ContainerDataType {
137+
return {
138+
container: {
139+
header: toSimpleContainerData([
140+
{
141+
item: {
142+
compType: "text",
143+
name: nameGenerator.genItemName("containerTitle"),
144+
comp: {
145+
text: "### " + trans("container.title"),
146+
},
147+
},
148+
layoutItem: {
149+
i: "",
150+
h: 5,
151+
w: 24,
152+
x: 0,
153+
y: 0,
154+
},
155+
},
156+
]),
157+
},
158+
};
159+
}

0 commit comments

Comments
 (0)