Skip to content

Commit 0ccbd38

Browse files
Merge branch 'dev' of https://github.com/lowcoder-org/lowcoder into dev
2 parents 1a7cfec + dea9f65 commit 0ccbd38

File tree

64 files changed

+301
-2229
lines changed

Some content is hidden

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

64 files changed

+301
-2229
lines changed

client/packages/lowcoder-comps/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lowcoder-comps",
3-
"version": "2.4.5",
3+
"version": "2.4.6",
44
"type": "module",
55
"license": "MIT",
66
"dependencies": {

client/packages/lowcoder-design/src/components/Section.tsx

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import styled from "styled-components";
44
import { ReactComponent as Packup } from "icons/icon-Pack-up.svg";
55
import { labelCss } from "./Label";
66
import { controlItem, ControlNode } from "./control";
7+
import { Tooltip } from "./toolTip";
78

89
const SectionItem = styled.div<{ $width?: number }>`
910
width: ${(props) => (props.$width ? props.$width : 312)}px;
@@ -73,6 +74,12 @@ const ShowChildren = styled.div<{ $show?: string; $noMargin?: boolean }>`
7374
padding-right: ${(props) => (props.$noMargin ? 0 : "16px")};
7475
`;
7576

77+
const TooltipWrapper = styled.span`
78+
word-wrap: break-word;
79+
word-break: break-word;
80+
white-space: pre-wrap;
81+
color:#fff;
82+
`;
7683
interface ISectionConfig<T> {
7784
name?: string;
7885
open?: boolean;
@@ -81,6 +88,7 @@ interface ISectionConfig<T> {
8188
style?: React.CSSProperties;
8289
children: T;
8390
additionalButton?: React.ReactNode;
91+
hasTooltip?: boolean;
8492
}
8593

8694
export interface PropertySectionState {
@@ -102,7 +110,7 @@ export const PropertySectionContext = React.createContext<PropertySectionContext
102110
});
103111

104112
export const BaseSection = (props: ISectionConfig<ReactNode>) => {
105-
const { name } = props;
113+
const { name,hasTooltip } = props;
106114
const { compName, state, toggle } = useContext(PropertySectionContext);
107115
const open = props.open !== undefined ? props.open : name ? state[compName]?.[name] !== false : true;
108116

@@ -118,17 +126,35 @@ export const BaseSection = (props: ISectionConfig<ReactNode>) => {
118126
return (
119127
<SectionItem $width={props.width} style={props.style}>
120128
{props.name && (
121-
<SectionLabelDiv onClick={handleToggle} className={"section-header"}>
129+
<SectionLabelDiv onClick={handleToggle} className={'section-header'}>
122130
<SectionLabel>{props.name}</SectionLabel>
123-
<div style={{ display: "flex" }}>
131+
<div style={{display: 'flex'}}>
124132
{open && props.additionalButton}
125-
<PackupIcon deg={open ? "rotate(0deg)" : "rotate(180deg)"} />
133+
<PackupIcon deg={open ? 'rotate(0deg)' : 'rotate(180deg)'} />
126134
</div>
127135
</SectionLabelDiv>
128136
)}
129-
<ShowChildren $show={open ? "flex" : "none"} $noMargin={props.noMargin}>
130-
{props.children}
131-
</ShowChildren>
137+
<Tooltip
138+
title={
139+
hasTooltip && (
140+
<TooltipWrapper>
141+
Here you can enter the animation type codes. Like bounce, swing or
142+
tada. Read more about all possible codes at:{" "}
143+
<a href="https://animate.style">https://animate.style</a>
144+
</TooltipWrapper>
145+
)
146+
}
147+
arrow={{
148+
pointAtCenter: true,
149+
}}
150+
placement="top"
151+
color="#2c2c2c"
152+
getPopupContainer={(node: any) => node.closest('.react-grid-item')}
153+
>
154+
<ShowChildren $show={open ? 'flex' : 'none'} $noMargin={props.noMargin}>
155+
{props.children}
156+
</ShowChildren>
157+
</Tooltip>
132158
</SectionItem>
133159
);
134160
};

client/packages/lowcoder/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
"@rjsf/core": "^5.15.1",
3030
"@rjsf/utils": "^5.15.1",
3131
"@rjsf/validator-ajv8": "^5.15.1",
32-
"@stoplight/elements": "^8.1.3",
3332
"@types/lodash": "^4.14.194",
3433
"@types/node": "^16.7.13",
3534
"@types/react": "^18.2.45",

client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
withExposingConfigs,
1717
} from "comps/generators/withExposing";
1818
import styled, { css } from "styled-components";
19-
import { UICompBuilder } from "../../generators";
19+
import { UICompBuilder, withDefault } from "../../generators";
2020
import { FormDataPropertyView } from "../formComp/formDataConstants";
2121
import { jsonControl } from "comps/controls/codeControl";
2222
import { dropdownControl } from "comps/controls/dropdownControl";
@@ -58,7 +58,8 @@ import {
5858

5959

6060

61-
const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
61+
const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
62+
box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
6263
${(props) => css`
6364
${getStyle(props.$style)}
6465
input {
@@ -75,7 +76,7 @@ const childrenMap = {
7576
...textInputChildren,
7677
viewRef: RefControl<InputRef>,
7778
allowClear: BoolControl.DEFAULT_TRUE,
78-
style: styleControl(InputFieldStyle),
79+
style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
7980
labelStyle:styleControl(LabelStyle),
8081
prefixIcon: IconControl,
8182
suffixIcon: IconControl,
@@ -89,7 +90,7 @@ const childrenMap = {
8990
autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
9091
componentSize: dropdownControl(componentSize, "small"),
9192
valueInItems: booleanExposingStateControl("valueInItems"),
92-
inputFieldStyle: styleControl(InputLikeStyle),
93+
inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth:'1px'}),
9394
animationStyle: styleControl(AnimationStyle),
9495
};
9596

@@ -293,38 +294,38 @@ let AutoCompleteCompBase = (function () {
293294
return (
294295
<>
295296
<Section>
296-
{children.autoCompleteType.getView() === "normal" &&
297+
{children.autoCompleteType.getView() === 'normal' &&
297298
children.prefixIcon.propertyView({
298-
label: trans("button.prefixIcon"),
299+
label: trans('button.prefixIcon'),
299300
})}
300-
{children.autoCompleteType.getView() === "normal" &&
301+
{children.autoCompleteType.getView() === 'normal' &&
301302
children.suffixIcon.propertyView({
302-
label: trans("button.suffixIcon"),
303+
label: trans('button.suffixIcon'),
303304
})}
304-
{allowClearPropertyView(children)}
305+
{allowClearPropertyView(children)}
305306
</Section>
306-
<Section name={trans("autoComplete.SectionDataName")}>
307+
<Section name={trans('autoComplete.SectionDataName')}>
307308
{children.items.propertyView({
308-
label: trans("autoComplete.value"),
309+
label: trans('autoComplete.value'),
309310
tooltip: itemsDataTooltip,
310-
placeholder: "[]",
311+
placeholder: '[]',
311312
})}
312-
{getDayJSLocale() === "zh-cn" &&
313+
{getDayJSLocale() === 'zh-cn' &&
313314
children.searchFirstPY.propertyView({
314-
label: trans("autoComplete.searchFirstPY"),
315+
label: trans('autoComplete.searchFirstPY'),
315316
})}
316-
{getDayJSLocale() === "zh-cn" &&
317+
{getDayJSLocale() === 'zh-cn' &&
317318
children.searchCompletePY.propertyView({
318-
label: trans("autoComplete.searchCompletePY"),
319+
label: trans('autoComplete.searchCompletePY'),
319320
})}
320321
{children.searchLabelOnly.propertyView({
321-
label: trans("autoComplete.searchLabelOnly"),
322+
label: trans('autoComplete.searchLabelOnly'),
322323
})}
323324
{children.ignoreCase.propertyView({
324-
label: trans("autoComplete.ignoreCase"),
325+
label: trans('autoComplete.ignoreCase'),
325326
})}
326327
{children.valueOrLabel.propertyView({
327-
label: trans("autoComplete.checkedValueFrom"),
328+
label: trans('autoComplete.checkedValueFrom'),
328329
radioButton: true,
329330
})}
330331
</Section>
@@ -350,7 +351,10 @@ let AutoCompleteCompBase = (function () {
350351
<Section name={sectionNames.inputFieldStyle}>
351352
{children.inputFieldStyle.getPropertyView()}
352353
</Section>
353-
<Section name={sectionNames.animationStyle}>
354+
<Section
355+
name={sectionNames.animationStyle}
356+
hasTooltip={true}
357+
>
354358
{children.animationStyle.getPropertyView()}
355359
</Section>
356360
</>

client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ let FloatButtonBasicComp = (function () {
150150
<Section name={sectionNames.style}>
151151
{children.style.getPropertyView()}
152152
</Section>
153-
<Section name={sectionNames.animationStyle}>
153+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
154154
{children.animationStyle.getPropertyView()}
155155
</Section>
156156
</>

client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ const LinkTmpComp = (function () {
139139
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
140140
<>
141141
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
142-
<Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
142+
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
143143
</>
144144
)}
145145
</>

client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ const ToggleTmpComp = (function () {
139139
})}
140140
{children.style.getPropertyView()}
141141
</Section>
142-
<Section name={sectionNames.animationStyle}>
142+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
143143
{children.animationStyle.getPropertyView()}
144144
</Section>
145145
</>

client/packages/lowcoder/src/comps/comps/carouselComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ let CarouselBasicComp = (function () {
105105
<Section name={sectionNames.style}>
106106
{children.style.getPropertyView()}
107107
</Section>
108-
<Section name={sectionNames.animationStyle}>
108+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
109109
{children.animationStyle.getPropertyView()}
110110
</Section>
111111
</>

client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -424,7 +424,7 @@ let CommentBasicComp = (function () {
424424
<Section name={sectionNames.style}>
425425
{children.style.getPropertyView()}
426426
</Section>
427-
<Section name={sectionNames.animationStyle}>
427+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
428428
{children.animationStyle.getPropertyView()}
429429
</Section></>
430430
)}

client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,7 @@ export const ContainerBaseComp = (function () {
333333
<Section name={sectionNames.bodyStyle}>
334334
{children.bodyStyle.getPropertyView()}
335335
</Section>
336-
<Section name={sectionNames.animationStyle}>
336+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
337337
{children.animationStyle.getPropertyView()}
338338
</Section>
339339
</>

client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const ContainerBaseComp = (function () {
5454
<Section name={sectionNames.style}>
5555
{ children.container.stylePropertyView() }
5656
</Section>
57-
<Section name={sectionNames.animationStyle}>
57+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
5858
{children.animationStyle.getPropertyView()}
5959
</Section>
6060
{children.container.children.showHeader.getView() && (

client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const ContainerBaseComp = (function () {
9696
<Section name={"Floating Text Style"}>
9797
{children.style.getPropertyView()}
9898
</Section>
99-
<Section name={sectionNames.animationStyle}>
99+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
100100
{children.animationStyle.getPropertyView()}
101101
</Section>
102102
<Section name={"Container Style"}>

client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
247247
<Section name={sectionNames.style}>
248248
{children.style.getPropertyView()}
249249
</Section>
250-
<Section name={sectionNames.animationStyle}>
250+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
251251
{children.animationStyle.getPropertyView()}
252252
</Section>
253253
</>

client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
266266
<Section name={sectionNames.inputFieldStyle}>
267267
{children.inputFieldStyle.getPropertyView()}
268268
</Section>
269-
<Section name={sectionNames.animationStyle}>
269+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
270270
{children.animationStyle.getPropertyView()}
271271
</Section>
272272
</>

client/packages/lowcoder/src/comps/comps/dividerComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export const DividerComp = migrateOldData(
129129
{children.dashed.propertyView({ label: trans("divider.dashed") })}
130130
{children.style.getPropertyView()}
131131
</Section>
132-
<Section name={sectionNames.animationStyle}>
132+
<Section name={sectionNames.animationStyle}hasTooltip={true}>
133133
{children.animationStyle.getPropertyView()}
134134
</Section>
135135
</>

client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -427,7 +427,7 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => (
427427
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
428428
<>
429429
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
430-
<Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
430+
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
431431
</>
432432
)}
433433
</>

client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ let FileViewerBasicComp = (function () {
106106
<Section name={sectionNames.style}>
107107
{children.style.getPropertyView()}
108108
</Section>
109-
<Section name={sectionNames.animationStyle}>
109+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
110110
{children.animationStyle.getPropertyView()}
111111
</Section>
112112
</>

client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ const FormBaseComp = (function () {
237237
<Section name={sectionNames.style}>
238238
{children.container.stylePropertyView()}
239239
</Section>
240-
<Section name={sectionNames.animationStyle}>
240+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
241241
{children.animationStyle.getPropertyView()}
242242
</Section>
243243
{children.container.children.showHeader.getView() && (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ let IconBasicComp = (function () {
143143
<Section name={sectionNames.style}>
144144
{children.style.getPropertyView()}
145145
</Section>
146-
<Section name={sectionNames.animationStyle}>
146+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
147147
{children.animationStyle.getPropertyView()}
148148
</Section>
149149
</>

client/packages/lowcoder/src/comps/comps/iframeComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ let IFrameCompBase = new UICompBuilder(
8787
<Section name={sectionNames.style}>
8888
{children.style.getPropertyView()}
8989
</Section>
90-
<Section name={sectionNames.animationStyle}>
90+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
9191
{children.animationStyle.getPropertyView()}
9292
</Section>
9393
</>

client/packages/lowcoder/src/comps/comps/imageComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
204204
<Section name={sectionNames.style}>
205205
{children.style.getPropertyView()}
206206
</Section>
207-
<Section name={sectionNames.animationStyle}>
207+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
208208
{children.animationStyle.getPropertyView()}
209209
</Section>
210210
</>

client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ let JsonEditorTmpComp = (function () {
142142
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
143143
<>
144144
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
145-
<Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
145+
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
146146
</>
147147
)}
148148

client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ let JsonExplorerTmpComp = (function () {
9999
label: trans('jsonExplorer.theme'),
100100
})}
101101
</Section>
102-
<Section name={sectionNames.animationStyle}>
102+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
103103
{children.animationStyle.getPropertyView()}
104104
</Section>
105105
</>

client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ let JsonLottieTmpComp = (function () {
166166
<Section name={sectionNames.style}>
167167
{children.container.getPropertyView()}
168168
</Section>
169-
<Section name={sectionNames.animationStyle}>
169+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
170170
{children.animationStyle.getPropertyView()}
171171
</Section>
172172
</>

client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,7 @@ let FormBasicComp = (function () {
328328
<Section name={sectionNames.style}>
329329
{children.style.getPropertyView()}
330330
</Section>
331-
<Section name={sectionNames.animationStyle}>
331+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
332332
{children.animationStyle.getPropertyView()}
333333
</Section>
334334
</>

client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export function listPropertyView(compType: ListCompType) {
8080
<Section name={sectionNames.style}>
8181
{children.style.getPropertyView()}
8282
</Section>
83-
<Section name={sectionNames.animationStyle}>
83+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
8484
{children.animationStyle.getPropertyView()}
8585
</Section></>
8686
)}

0 commit comments

Comments
 (0)