Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 10d27dc

Browse files
initial shape component
1 parent ccfa3eb commit 10d27dc

File tree

4 files changed

+154
-71
lines changed

4 files changed

+154
-71
lines changed

‎client/packages/lowcoder/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"buffer": "^6.0.3",
4242
"clsx": "^2.0.0",
4343
"cnchar": "^3.2.4",
44+
"coolshapes-react": "^0.1.1-beta.0",
4445
"copy-to-clipboard": "^3.3.3",
4546
"core-js": "^3.25.2",
4647
"echarts": "^5.4.3",
Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
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";
14+
import {
15+
NameConfigHidden,
16+
withExposingConfigs,
17+
} from "comps/generators/withExposing";
18+
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";
22+
import { IconControl } from "comps/controls/iconControl";
23+
import ReactResizeDetector from "react-resize-detector";
24+
import { AutoHeightControl } from "../../controls/autoHeightControl";
25+
import {
26+
clickEvent,
27+
eventHandlerControl,
28+
} from "../../controls/eventHandlerControl";
29+
import { useContext } from "react";
30+
import { EditorContext } from "comps/editorState";
31+
32+
const Container = styled.div<{ $style: IconStyleType | undefined }>`
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
37+
${(props) =>
38+
props.$style &&
39+
css`
40+
height: calc(100% - ${props.$style.margin});
41+
width: calc(100% - ${props.$style.margin});
42+
padding: ${props.$style.padding};
43+
margin: ${props.$style.margin};
44+
border: ${props.$style.borderWidth} solid ${props.$style.border};
45+
border-radius: ${props.$style.radius};
46+
background: ${props.$style.background};
47+
svg {
48+
max-width: ${widthCalculator(props.$style.margin)};
49+
max-height: ${heightCalculator(props.$style.margin)};
50+
color: ${props.$style.fill};
51+
object-fit: contain;
52+
pointer-events: auto;
53+
}
54+
`}
55+
`;
56+
57+
const EventOptions = [clickEvent] as const;
58+
59+
const childrenMap = {
60+
style: styleControl(IconStyle),
61+
icon: withDefault(IconControl, "/icon:antd/homefilled"),
62+
autoHeight: withDefault(AutoHeightControl, "auto"),
63+
iconSize: withDefault(NumberControl, 20),
64+
onEvent: eventHandlerControl(EventOptions),
65+
};
66+
67+
const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
68+
const conRef = useRef<HTMLDivElement>(null);
69+
const [width, setWidth] = useState(0);
70+
const [height, setHeight] = useState(0);
71+
72+
useEffect(() => {
73+
if (height && width) {
74+
onResize();
75+
}
76+
}, [height, width]);
77+
78+
const onResize = () => {
79+
const container = conRef.current;
80+
setWidth(container?.clientWidth ?? 0);
81+
setHeight(container?.clientHeight ?? 0);
82+
};
83+
84+
return (
85+
<ReactResizeDetector onResize={onResize}>
86+
<Container
87+
ref={conRef}
88+
$style={props.style}
89+
style={{
90+
fontSize: props.autoHeight
91+
? `${height < width ? height : width}px`
92+
: props.iconSize,
93+
background: props.style.background,
94+
}}
95+
onClick={() => props.onEvent("click")}
96+
>
97+
{props.icon}
98+
</Container>
99+
</ReactResizeDetector>
100+
);
101+
};
102+
103+
let ShapeBasicComp = (function () {
104+
return new UICompBuilder(childrenMap, (props) => <IconView {...props} />)
105+
.setPropertyViewFn((children) => (
106+
<>
107+
<Section name={sectionNames.basic}>
108+
{children.icon.propertyView({
109+
label: trans("iconComp.icon"),
110+
IconType: "All",
111+
})}
112+
</Section>
113+
114+
{["logic", "both"].includes(
115+
useContext(EditorContext).editorModeStatus
116+
) && (
117+
<Section name={sectionNames.interaction}>
118+
{children.onEvent.getPropertyView()}
119+
{hiddenPropertyView(children)}
120+
</Section>
121+
)}
122+
123+
{["layout", "both"].includes(
124+
useContext(EditorContext).editorModeStatus
125+
) && (
126+
<>
127+
<Section name={sectionNames.layout}>
128+
{children.autoHeight.propertyView({
129+
label: trans("iconComp.autoSize"),
130+
})}
131+
{!children.autoHeight.getView() &&
132+
children.iconSize.propertyView({
133+
label: trans("iconComp.iconSize"),
134+
})}
135+
</Section>
136+
<Section name={sectionNames.style}>
137+
{children.style.getPropertyView()}
138+
</Section>
139+
</>
140+
)}
141+
</>
142+
))
143+
.build();
144+
})();
145+
146+
ShapeBasicComp = class extends ShapeBasicComp {
147+
override autoHeight(): boolean {
148+
return false;
149+
}
150+
};
151+
152+
export const ShapeComp = withExposingConfigs(ShapeBasicComp, [NameConfigHidden]);

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

Lines changed: 0 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,21 @@
1-
// import "comps/comps/layout/navLayout";
2-
// import "comps/comps/layout/mobileTabLayout";
31
import cnchar from "cnchar";
4-
5-
import { ModalComp } from "comps/hooks/modalComp";
6-
import { ButtonComp } from "./comps/buttonComp/buttonComp";
7-
import { DropdownComp } from "./comps/buttonComp/dropdownComp";
8-
import { LinkComp } from "./comps/buttonComp/linkComp";
92
import {
10-
ContainerComp,
113
defaultContainerData,
124
} from "./comps/containerComp/containerComp";
13-
import { defaultCollapsibleContainerData } from "./comps/containerComp/collapsibleContainerComp";
145
import { ContainerComp as FloatTextContainerComp } from "./comps/containerComp/textContainerComp";
156
import {
167
PageLayoutComp,
178
defaultPageLayoutData,
189
} from "./comps/containerComp/pageLayoutComp";
19-
import { CustomComp } from "./comps/customComp/customComp";
20-
import { DatePickerComp, DateRangeComp } from "./comps/dateComp/dateComp";
21-
import { DividerComp } from "./comps/dividerComp";
22-
import { FileComp } from "./comps/fileComp/fileComp";
23-
import { FileViewerComp } from "./comps/fileViewerComp";
24-
import { ImageComp } from "./comps/imageComp";
25-
import { JsonSchemaFormComp } from "./comps/jsonSchemaFormComp/jsonSchemaFormComp";
26-
import { NumberInputComp } from "./comps/numberInputComp/numberInputComp";
27-
import { RangeSliderComp } from "./comps/numberInputComp/rangeSliderComp";
28-
import { SliderComp } from "./comps/numberInputComp/sliderComp";
29-
import { ProgressCircleComp } from "./comps/progressCircleComp";
30-
import { ProgressComp } from "./comps/progressComp";
31-
import { RatingComp } from "./comps/ratingComp";
32-
import { RichTextEditorComp } from "./comps/richTextEditorComp";
33-
import { CascaderWithDefault } from "./comps/selectInputComp/cascaderComp";
34-
import { CheckboxComp } from "./comps/selectInputComp/checkboxComp";
35-
import { MultiSelectComp } from "./comps/selectInputComp/multiSelectComp";
36-
import { RadioComp } from "./comps/selectInputComp/radioComp";
37-
import { SegmentedControlComp } from "./comps/selectInputComp/segmentedControl";
38-
import { StepComp } from "./comps/selectInputComp/stepControl";
39-
import { SelectComp } from "./comps/selectInputComp/selectComp";
40-
import { SwitchComp } from "./comps/switchComp";
41-
import { defaultTableData } from "./comps/tableComp/mockTableComp";
42-
import { TabbedContainerComp } from "./comps/tabs";
43-
import { TextComp } from "./comps/textComp";
44-
import { InputComp } from "./comps/textInputComp/inputComp";
45-
import { PasswordComp } from "./comps/textInputComp/passwordComp";
46-
import { TextAreaComp } from "./comps/textInputComp/textAreaComp";
47-
import { TimePickerComp, TimeRangeComp } from "./comps/dateComp/timeComp";
48-
import { defaultFormData, FormComp } from "./comps/formComp/formComp";
49-
import { IFrameComp } from "./comps/iframeComp";
50-
import {
51-
defaultGridData,
52-
defaultListViewData,
53-
GridComp,
54-
ListViewComp,
55-
} from "./comps/listViewComp";
56-
import { ModuleComp } from "./comps/moduleComp/moduleComp";
57-
import { NavComp } from "./comps/navComp/navComp";
58-
import { TableComp } from "./comps/tableComp";
59-
import { QRCodeComp } from "./comps/qrCodeComp";
60-
import { JsonExplorerComp } from "./comps/jsonComp/jsonExplorerComp";
61-
import { JsonEditorComp } from "./comps/jsonComp/jsonEditorComp";
62-
import { TreeComp } from "./comps/treeComp/treeComp";
63-
import { TreeSelectComp } from "./comps/treeComp/treeSelectComp";
6410
import { trans } from "i18n";
6511
import { remoteComp } from "./comps/remoteComp/remoteComp";
6612
import {
6713
registerComp,
6814
type UICompManifest,
6915
type UICompType,
7016
} from "./uiCompRegistry";
71-
import { AudioComp } from "./comps/mediaComp/audioComp";
72-
import { VideoComp } from "./comps/mediaComp/videoComp";
73-
import { DrawerComp } from "./hooks/drawerComp";
74-
import { CarouselComp } from "./comps/carouselComp";
75-
import { ToggleButtonComp } from "./comps/buttonComp/toggleButtonComp";
7617

7718
import { RemoteCompInfo } from "types/remoteComp";
78-
import { ScannerComp } from "./comps/buttonComp/scannerComp";
79-
import { SignatureComp } from "./comps/signatureComp";
80-
import { TimeLineComp } from "./comps/timelineComp/timelineComp";
81-
import { CommentComp } from "./comps/commentComp/commentComp";
82-
import { MentionComp } from "./comps/textInputComp/mentionComp";
83-
import { AutoCompleteComp } from "./comps/autoCompleteComp/autoCompleteComp";
84-
import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp";
85-
import { ResponsiveLayoutComp } from "./comps/responsiveLayout";
86-
import { VideoMeetingStreamComp } from "./comps/meetingComp/videoMeetingStreamComp";
87-
import { ControlButton } from "./comps/meetingComp/controlButton";
88-
import { VideoMeetingControllerComp } from "./comps/meetingComp/videoMeetingControllerComp";
89-
// import { VideoSharingStreamComp } from "./comps/meetingComp/videoSharingStreamComp";
9019
import { IconComp } from "./comps/iconComp";
9120

9221
import {

‎client/packages/lowcoder/src/comps/uiCompRegistry.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ export type UICompType =
114114
| "custom"
115115
| "jsonExplorer"
116116
| "jsonEditor"
117+
| "shapeComp"
117118
| "tree"
118119
| "treeSelect"
119120
| "audio"

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /