Skip to content

Commit 07ab330

Browse files
MenamAfzalMenamAfzal
committed
formating removed-90
1 parent 209d248 commit 07ab330

File tree

1 file changed

+110
-164
lines changed
  • client/packages/lowcoder/src/comps/comps/containerComp

1 file changed

+110
-164
lines changed

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

Lines changed: 110 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,34 @@
1-
import ReactResizeDetector from 'react-resize-detector';
1+
import ReactResizeDetector from "react-resize-detector";
2+
import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
3+
import { Section, sectionNames } from "lowcoder-design";
4+
import { TriContainer } from "../triContainerComp/triContainer";
25
import {
3-
NameConfigHidden,
4-
withExposingConfigs,
5-
} from 'comps/generators/withExposing';
6-
import {Section, sectionNames} from 'lowcoder-design';
7-
import {TriContainer} from '../triContainerComp/triContainer';
8-
import {ContainerCompBuilder} from '../triContainerComp/triContainerCompBuilder';
9-
import {
10-
disabledPropertyView,
11-
hiddenPropertyView,
12-
} from 'comps/utils/propertyUtils';
13-
import {trans} from 'i18n';
14-
import {BoolCodeControl, StringControl} from 'comps/controls/codeControl';
15-
import {BoolControl} from 'comps/controls/boolControl';
16-
import {useContext, useEffect, useRef, useState} from 'react';
17-
import {EditorContext} from 'comps/editorState';
18-
import {Card} from 'antd';
19-
import styled from 'styled-components';
20-
import {
21-
AnimationStyle,
22-
AnimationStyleType,
23-
CardHeaderStyle,
24-
CardHeaderStyleType,
25-
CardStyle,
26-
CardStyleType,
27-
} from 'comps/controls/styleControlConstants';
28-
import {MultiCompBuilder, withDefault} from 'comps/generators';
29-
import {IconControl} from 'comps/controls/iconControl';
30-
import {
31-
ButtonEventHandlerControl,
32-
CardEventHandlerControl,
33-
clickEvent,
34-
refreshEvent,
35-
} from 'comps/controls/eventHandlerControl';
36-
import {optionsControl} from 'comps/controls/optionsControl';
37-
import {dropdownControl} from 'comps/controls/dropdownControl';
38-
import {styleControl} from 'comps/controls/styleControl';
39-
const {Meta} = Card;
6+
ContainerCompBuilder,
7+
} from "../triContainerComp/triContainerCompBuilder";
8+
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
9+
import { trans } from "i18n";
10+
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
11+
import { BoolControl } from "comps/controls/boolControl";
12+
import { useContext, useEffect, useRef, useState } from "react";
13+
import { EditorContext } from "comps/editorState";
14+
import { Card } from "antd";
15+
import styled from "styled-components";
16+
import { AnimationStyle, AnimationStyleType, CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
17+
import { MultiCompBuilder, withDefault } from "comps/generators";
18+
import { IconControl } from "comps/controls/iconControl";
19+
import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl";
20+
import { optionsControl } from "comps/controls/optionsControl";
21+
import { dropdownControl } from "comps/controls/dropdownControl";
22+
import { styleControl } from "comps/controls/styleControl";
23+
const { Meta } = Card;
4024

4125
const Warpper = styled.div<{
4226
$style: CardStyleType | undefined;
4327
$showMate: boolean;
4428
$cardType: string;
4529
$headerStyle: CardHeaderStyleType;
4630
$bodyStyle: CardHeaderStyleType;
47-
$animationStyle: AnimationStyleType;
31+
$animationStyle:AnimationStyleType;
4832
}>`
4933
height: 100%;
5034
width: 100%;
@@ -93,7 +77,7 @@ const Warpper = styled.div<{
9377
border-style: ${(props) => props.$style?.borderStyle};
9478
border-radius: ${(props) => props.$style?.radius};
9579
border-width: ${(props) => props.$style?.borderWidth};
96-
${(props) => props.$animationStyle}
80+
${props=>props.$animationStyle}
9781
}
9882
.ant-card-body {
9983
display: ${(props) => (props.$showMate ? '' : 'none')};
@@ -122,39 +106,36 @@ const Warpper = styled.div<{
122106
const ContainWarpper = styled.div`
123107
height: 100%;
124108
width: 100%;
125-
`;
109+
`
126110

127-
const IconWarpper = styled.div<{
128-
$style: CardStyleType | undefined;
129-
disabled: boolean;
130-
}>`
131-
pointer-events: ${(props) => (props.disabled ? 'none' : '')};
111+
const IconWarpper = styled.div<{ $style: CardStyleType | undefined, disabled: boolean }>`
112+
pointer-events: ${props => props.disabled ? 'none' : ''};
132113
svg {
133-
color: ${(props) => (props.disabled ? '#d9d9d9' : props.$style?.IconColor)};
114+
color: ${props => props.disabled ? '#d9d9d9' : props.$style?.IconColor};
134115
}
135116
&:hover {
136117
svg {
137-
color: ${(props) => props.$style?.activateColor};
118+
color: ${props => props.$style?.activateColor};
138119
}
139-
}
140-
`;
120+
}
121+
`
141122

142123
const cardTypeOption = [
143-
{label: trans('card.common'), value: 'common'},
144-
{label: trans('card.custom'), value: 'custom'},
124+
{ label: trans("card.common"), value: "common" },
125+
{ label: trans("card.custom"), value: "custom" },
145126
] as const;
146127

147128
const sizeOptions = [
148-
{label: trans('card.default'), value: 'default'},
149-
{label: trans('card.small'), value: 'small'},
129+
{ label: trans("card.default"), value: "default" },
130+
{ label: trans("card.small"), value: "small" },
150131
] as const;
151132

152133
const EventOptions = [clickEvent, refreshEvent] as const;
153134

154135
const ActionIconOption = new MultiCompBuilder(
155136
{
156137
label: StringControl,
157-
icon: withDefault(IconControl, '/icon:antd/settingoutlined'),
138+
icon: withDefault(IconControl, "/icon:antd/settingoutlined"),
158139
disabled: BoolCodeControl,
159140
hidden: BoolCodeControl,
160141
onEvent: ButtonEventHandlerControl,
@@ -163,7 +144,7 @@ const ActionIconOption = new MultiCompBuilder(
163144
)
164145
.setPropertyViewFn((children) => (
165146
<>
166-
{children.icon.propertyView({label: trans('button.icon')})}
147+
{children.icon.propertyView({ label: trans("button.icon") })}
167148
{disabledPropertyView(children)}
168149
{hiddenPropertyView(children)}
169150
{children.onEvent.getPropertyView()}
@@ -173,18 +154,9 @@ const ActionIconOption = new MultiCompBuilder(
173154

174155
const ActionOptionControl = optionsControl(ActionIconOption, {
175156
initOptions: [
176-
{
177-
label: trans('optionsControl.optionI', {i: 1}),
178-
icon: '/icon:antd/settingoutlined',
179-
},
180-
{
181-
label: trans('optionsControl.optionI', {i: 2}),
182-
icon: '/icon:antd/editoutlined',
183-
},
184-
{
185-
label: trans('optionsControl.optionI', {i: 3}),
186-
icon: '/icon:antd/ellipsisoutlined',
187-
},
157+
{ label: trans("optionsControl.optionI", { i: 1 }), icon: "/icon:antd/settingoutlined" },
158+
{ label: trans("optionsControl.optionI", { i: 2 }), icon: "/icon:antd/editoutlined" },
159+
{ label: trans("optionsControl.optionI", { i: 3 }), icon: "/icon:antd/ellipsisoutlined" },
188160
],
189161
});
190162

@@ -222,7 +194,7 @@ export const ContainerBaseComp = (function () {
222194
CONTAINER_BODY_PADDING: props.style.containerBodyPadding,
223195
border: '#00000000',
224196
background: props.style.background,
225-
});
197+
})
226198
const conRef = useRef<HTMLDivElement>(null);
227199
const [width, setWidth] = useState(0);
228200
const [height, setHeight] = useState(0);
@@ -251,54 +223,34 @@ export const ContainerBaseComp = (function () {
251223
onMouseLeave={() => props.onEvent('blur')}
252224
onClick={() => props.onEvent('click')}
253225
>
254-
{
255-
<Card
256-
style={{width: width, height: '100%'}}
257-
size={props.size}
258-
hoverable={props.hoverable}
259-
// 标题设置
260-
title={props.showTitle && props.title}
261-
extra={
262-
props.showTitle && (
263-
<a href="#" onClick={() => props.onEvent('clickExtra')}>
264-
{props.extraTitle}
265-
</a>
266-
)
267-
}
268-
// 内容
269-
cover={
270-
props.cardType == 'common' &&
271-
props.CoverImg && (
272-
<img src={props.imgSrc} height={props.imgHeight} />
273-
)
274-
}
275-
actions={
276-
props.cardType == 'common' && props.showActionIcon
277-
? props.actionOptions
278-
.filter((item) => !item.hidden)
279-
.map((item) => {
280-
return (
281-
<IconWarpper
282-
onClick={() => item.onEvent('click')}
283-
disabled={item.disabled}
284-
$style={props.style}
285-
>
286-
{item.icon}
287-
</IconWarpper>
288-
);
289-
})
290-
: []
226+
{<Card
227+
style={{ width: width, height: '100%' }}
228+
size={props.size}
229+
hoverable={props.hoverable}
230+
// 标题设置
231+
title={props.showTitle && props.title}
232+
extra={props.showTitle && <a href="#" onClick={() => props.onEvent('clickExtra')}>{props.extraTitle}</a>}
233+
234+
// 内容
235+
cover={props.cardType == 'common' && props.CoverImg && <img src={props.imgSrc} height={props.imgHeight} />}
236+
actions={props.cardType == 'common' && props.showActionIcon ?
237+
props.actionOptions.filter(item => !item.hidden).map(item => {
238+
return (
239+
<IconWarpper
240+
onClick={() => item.onEvent('click')}
241+
disabled={item.disabled}
242+
$style={props.style}
243+
>
244+
{item.icon}
245+
</IconWarpper>)
291246
}
292-
>
293-
{props.cardType == 'common' && props.showMeta && (
294-
<Meta title={props.metaTitle} description={props.metaDesc} />
295-
)}
296-
{props.cardType == 'custom' && (
297-
<ContainWarpper>
298-
<TriContainer {...props} />
299-
</ContainWarpper>
300-
)}
301-
</Card>
247+
) : []
248+
}
249+
>
250+
{props.cardType == 'common' && props.showMeta && <Meta title={props.metaTitle} description={props.metaDesc} />}
251+
{props.cardType == 'custom' && <ContainWarpper>
252+
<TriContainer {...props} /></ContainWarpper>}
253+
</Card>
302254
}
303255
</Warpper>
304256
</ReactResizeDetector>
@@ -307,60 +259,56 @@ export const ContainerBaseComp = (function () {
307259
.setPropertyViewFn((children) => {
308260
return (
309261
<>
310-
{(useContext(EditorContext).editorModeStatus === 'logic' ||
311-
useContext(EditorContext).editorModeStatus === 'both') && (
262+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
312263
<>
313264
<Section name={sectionNames.basic}>
314265
{children.size.propertyView({
315-
label: trans('card.titleSize'),
266+
label: trans("card.titleSize"),
316267
radioButton: true,
317268
})}
318-
{children.showTitle.propertyView({
319-
label: trans('card.showTitle'),
320-
})}
321-
{children.showTitle.getView() &&
322-
children.title.propertyView({label: trans('card.title')})}
323-
{children.showTitle.getView() &&
324-
children.extraTitle.propertyView({
325-
label: trans('card.extraTitle'),
326-
})}
327-
{children.cardType.getView() == 'common' &&
328-
children.CoverImg.propertyView({
329-
label: trans('card.CoverImg'),
330-
})}
269+
{children.showTitle.propertyView({ label: trans('card.showTitle') })}
270+
{children.showTitle.getView() && children.title.propertyView({ label: trans('card.title') })}
271+
{children.showTitle.getView() && children.extraTitle.propertyView({ label: trans('card.extraTitle') })}
272+
{
273+
children.cardType.getView() == 'common' &&
274+
children.CoverImg.propertyView({ label: trans('card.CoverImg') })
275+
}
331276

332-
{children.cardType.getView() == 'common' &&
277+
{
278+
children.cardType.getView() == 'common' &&
333279
children.CoverImg.getView() &&
334-
children.imgSrc.propertyView({label: trans('card.imgSrc')})}
335-
{children.cardType.getView() == 'common' &&
280+
children.imgSrc.propertyView({ label: trans('card.imgSrc') })
281+
}
282+
{
283+
children.cardType.getView() == 'common' &&
336284
children.CoverImg.getView() &&
337-
children.imgHeight.propertyView({
338-
label: trans('card.imgHeight'),
339-
})}
340-
{children.cardType.getView() == 'common' &&
341-
children.showMeta.propertyView({
342-
label: trans('card.showMeta'),
343-
})}
344-
{children.cardType.getView() == 'common' &&
285+
children.imgHeight.propertyView({ label: trans('card.imgHeight') })
286+
}
287+
{
288+
children.cardType.getView() == 'common' &&
289+
children.showMeta.propertyView({ label: trans('card.showMeta') })
290+
}
291+
{
292+
children.cardType.getView() == 'common' &&
345293
children.showMeta.getView() &&
346-
children.metaTitle.propertyView({
347-
label: trans('card.metaTitle'),
348-
})}
349-
{children.cardType.getView() == 'common' &&
294+
children.metaTitle.propertyView({ label: trans('card.metaTitle') })
295+
}
296+
{
297+
children.cardType.getView() == 'common' &&
350298
children.showMeta.getView() &&
351-
children.metaDesc.propertyView({
352-
label: trans('card.metaDesc'),
353-
})}
299+
children.metaDesc.propertyView({ label: trans('card.metaDesc') })
300+
}
354301

355-
{children.cardType.getView() == 'common' &&
356-
children.showActionIcon.propertyView({
357-
label: trans('card.showActionIcon'),
358-
})}
359-
{children.cardType.getView() == 'common' &&
302+
{
303+
children.cardType.getView() == 'common' &&
304+
children.showActionIcon.propertyView({ label: trans('card.showActionIcon') })
305+
}
306+
{
307+
children.cardType.getView() == 'common' &&
360308
children.showActionIcon.getView() &&
361-
children.actionOptions.propertyView({
362-
title: trans('card.actionOptions'),
363-
})}
309+
children.actionOptions.propertyView({ title: trans('card.actionOptions') })
310+
}
311+
364312
</Section>
365313
<Section name={sectionNames.interaction}>
366314
{hiddenPropertyView(children)}
@@ -369,12 +317,11 @@ export const ContainerBaseComp = (function () {
369317
</>
370318
)}
371319

372-
{(useContext(EditorContext).editorModeStatus === 'layout' ||
373-
useContext(EditorContext).editorModeStatus === 'both') && (
320+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
374321
<>
375322
<Section name={sectionNames.layout}>
376323
{children.cardType.propertyView({
377-
label: trans('card.cardType'),
324+
label: trans("card.cardType"),
378325
radioButton: true,
379326
})}
380327
</Section>
@@ -398,6 +345,5 @@ export const ContainerBaseComp = (function () {
398345
.build();
399346
})();
400347

401-
export const CardComp = withExposingConfigs(ContainerBaseComp, [
402-
NameConfigHidden,
403-
]);
348+
export const CardComp = withExposingConfigs(ContainerBaseComp, [NameConfigHidden]);
349+

0 commit comments

Comments
 (0)