Skip to content

Commit b0cecdc

Browse files
MenamAfzalMenamAfzal
committed
animation style added to container
1 parent 4e98bf6 commit b0cecdc

File tree

9 files changed

+672
-460
lines changed

9 files changed

+672
-460
lines changed

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

Lines changed: 231 additions & 161 deletions
Large diffs are not rendered by default.

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

Lines changed: 63 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,86 @@
1-
import { CompParams } from "lowcoder-core";
2-
import { ToDataType } from "comps/generators/multi";
3-
import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
4-
import { NameGenerator } from "comps/utils/nameGenerator";
5-
import { Section, sectionNames } from "lowcoder-design";
6-
import { oldContainerParamsToNew } from "../containerBase";
7-
import { toSimpleContainerData } from "../containerBase/simpleContainerComp";
8-
import { TriContainer } from "../triContainerComp/triContainer";
1+
import {CompParams} from 'lowcoder-core';
2+
import {ToDataType} from 'comps/generators/multi';
3+
import {
4+
NameConfigHidden,
5+
withExposingConfigs,
6+
} from 'comps/generators/withExposing';
7+
import {NameGenerator} from 'comps/utils/nameGenerator';
8+
import {Section, sectionNames} from 'lowcoder-design';
9+
import {oldContainerParamsToNew} from '../containerBase';
10+
import {toSimpleContainerData} from '../containerBase/simpleContainerComp';
11+
import {TriContainer} from '../triContainerComp/triContainer';
912
import {
1013
ContainerChildren,
1114
ContainerCompBuilder,
12-
} from "../triContainerComp/triContainerCompBuilder";
13-
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
14-
import { trans } from "i18n";
15-
import { BoolCodeControl } from "comps/controls/codeControl";
16-
import { DisabledContext } from "comps/generators/uiCompBuilder";
17-
import React, { useContext } from "react";
18-
import { EditorContext } from "comps/editorState";
15+
} from '../triContainerComp/triContainerCompBuilder';
16+
import {
17+
disabledPropertyView,
18+
hiddenPropertyView,
19+
} from 'comps/utils/propertyUtils';
20+
import {trans} from 'i18n';
21+
import {BoolCodeControl} from 'comps/controls/codeControl';
22+
import {DisabledContext} from 'comps/generators/uiCompBuilder';
23+
import React, {useContext} from 'react';
24+
import {EditorContext} from 'comps/editorState';
25+
import {AnimationStyle, styleControl} from '@lowcoder-ee/index.sdk';
1926

2027
export const ContainerBaseComp = (function () {
2128
const childrenMap = {
2229
disabled: BoolCodeControl,
30+
animationStyle: styleControl(AnimationStyle),
2331
};
2432
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
2533
return (
2634
<DisabledContext.Provider value={props.disabled}>
27-
<TriContainer {...props} />
35+
<TriContainer {...props} />
2836
</DisabledContext.Provider>
2937
);
3038
})
3139
.setPropertyViewFn((children) => {
3240
return (
3341
<>
34-
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
42+
{(useContext(EditorContext).editorModeStatus === 'logic' ||
43+
useContext(EditorContext).editorModeStatus === 'both') && (
3544
<Section name={sectionNames.interaction}>
3645
{disabledPropertyView(children)}
3746
{hiddenPropertyView(children)}
3847
</Section>
3948
)}
4049

41-
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
42-
<><Section name={sectionNames.layout}>
43-
{children.container.getPropertyView()}
44-
</Section>
45-
<Section name={sectionNames.style}>
46-
{ children.container.stylePropertyView() }
47-
</Section>
48-
{children.container.children.showHeader.getView() && (
49-
<Section name={"Header Style"}>
50-
{ children.container.headerStylePropertyView() }
50+
{(useContext(EditorContext).editorModeStatus === 'layout' ||
51+
useContext(EditorContext).editorModeStatus === 'both') && (
52+
<>
53+
<Section name={sectionNames.layout}>
54+
{children.container.getPropertyView()}
5155
</Section>
52-
)}
53-
{children.container.children.showBody.getView() && (
54-
<Section name={"Body Style"}>
55-
{ children.container.bodyStylePropertyView() }
56+
<Section name={sectionNames.style}>
57+
{children.container.stylePropertyView()}
5658
</Section>
57-
)}
58-
{children.container.children.showFooter.getView() && (
59-
<Section name={"Footer Style"}>
60-
{ children.container.footerStylePropertyView() }
59+
<Section name={sectionNames.animationStyle}>
60+
{children.animationStyle.getPropertyView()}
6161
</Section>
62-
)}
62+
{children.container.children.showHeader.getView() && (
63+
<Section name={'Header Style'}>
64+
{children.container.headerStylePropertyView()}
65+
</Section>
66+
)}
67+
{children.container.children.showBody.getView() && (
68+
<Section name={'Body Style'}>
69+
{children.container.bodyStylePropertyView()}
70+
</Section>
71+
)}
72+
{children.container.children.showFooter.getView() && (
73+
<Section name={'Footer Style'}>
74+
{children.container.footerStylePropertyView()}
75+
</Section>
76+
)}
6377
</>
6478
)}
6579
</>
6680
);
6781
})
6882
.build();
69-
})();
83+
})();
7084

7185
// Compatible with old data
7286
function convertOldContainerParams(params: CompParams<any>) {
@@ -76,15 +90,18 @@ function convertOldContainerParams(params: CompParams<any>) {
7690
if (tempParams.value) {
7791
const container = tempParams.value.container;
7892
// old params
79-
if (container && (container.hasOwnProperty("layout") || container.hasOwnProperty("items"))) {
93+
if (
94+
container &&
95+
(container.hasOwnProperty('layout') || container.hasOwnProperty('items'))
96+
) {
8097
const autoHeight = tempParams.value.autoHeight;
8198
const scrollbars = tempParams.value.scrollbars;
8299
return {
83100
...tempParams,
84101
value: {
85102
container: {
86103
showHeader: true,
87-
body: { 0: { view: container } },
104+
body: {0: {view: container}},
88105
showBody: true,
89106
showFooter: false,
90107
autoHeight: autoHeight,
@@ -103,7 +120,9 @@ class ContainerTmpComp extends ContainerBaseComp {
103120
}
104121
}
105122

106-
export const ContainerComp = withExposingConfigs(ContainerTmpComp, [NameConfigHidden]);
123+
export const ContainerComp = withExposingConfigs(ContainerTmpComp, [
124+
NameConfigHidden,
125+
]);
107126

108127
type ContainerDataType = ToDataType<ContainerChildren<{}>>;
109128

@@ -116,14 +135,14 @@ export function defaultContainerData(
116135
header: toSimpleContainerData([
117136
{
118137
item: {
119-
compType: "text",
120-
name: nameGenerator.genItemName("containerTitle"),
138+
compType: 'text',
139+
name: nameGenerator.genItemName('containerTitle'),
121140
comp: {
122-
text: "### " + trans("container.title"),
141+
text: '### ' + trans('container.title'),
123142
},
124143
},
125144
layoutItem: {
126-
i: "",
145+
i: '',
127146
h: 5,
128147
w: 24,
129148
x: 0,

0 commit comments

Comments
 (0)