Skip to content

Commit 59bca1e

Browse files
raheeliftikhar5raheeliftikhar5
committed
added switch for normal/summary column settings
1 parent 65aeca5 commit 59bca1e

File tree

8 files changed

+323
-652
lines changed

8 files changed

+323
-652
lines changed

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

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { clickEvent, eventHandlerControl, refreshEvent } from "../controls/event
1212
import styled from "styled-components";
1313
import { useContext, ReactElement, useEffect } from "react";
1414
import { MultiCompBuilder, stateComp, withDefault } from "../generators";
15-
import { CompNameContext, EditorContext } from "comps/editorState";
15+
import { EditorContext } from "comps/editorState";
1616
import { IconControl } from "../controls/iconControl";
1717
import { ColorControl } from "../controls/colorControl";
1818
import { optionsControl } from "../controls/optionsControl";
@@ -105,30 +105,6 @@ const childrenMap = {
105105
};
106106

107107
const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & { dispatch: (action: CompAction) => void; }) => {
108-
const comp = useContext(EditorContext).getUICompByName(useContext(CompNameContext));
109-
110-
const updateAvatars = () => {
111-
debugger;
112-
if (!comp) return;
113-
// comp?.children.comp.children?.avatars?.children.manual.dispatchChangeValueAction({
114-
// initOptions: [
115-
// { src: "https://api.dicebear.com/7.x/miniavs/svg?seed=1", label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
116-
// // { AvatarIcon: "/icon:antd/startwotone" },
117-
// // { label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
118-
// // { label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
119-
// ],
120-
// });
121-
// comp?.children.comp.children?.avatars.children.manual.children.manual.dispatch([
122-
// { src: "https://api.dicebear.com/7.x/miniavs/svg?seed=1", label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) }
123-
// ])
124-
comp?.children.comp.children?.avatars.children.manual.children.manual.dispatch(
125-
comp?.children.comp.children?.avatars.children.manual.children.manual.setChildrensAction([
126-
{ src: "https://api.dicebear.com/7.x/miniavs/svg?seed=1", label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) }
127-
])
128-
);
129-
}
130-
131-
132108
return (
133109
<Container
134110
$style={props.style}
@@ -151,7 +127,6 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
151127
onClick={() => {
152128
props.onEvent("click")
153129
props.dispatch(changeChildAction("currentAvatar", item as JSONObject, false));
154-
updateAvatars();
155130
}}
156131
>
157132
{item.label}

‎client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx

Lines changed: 121 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,11 @@ import styled from "styled-components";
2929
import { TextOverflowControl } from "comps/controls/textOverflowControl";
3030
import { default as Divider } from "antd/es/divider";
3131
import { ColumnValueTooltip } from "./simpleColumnTypeComps";
32+
import { SummaryColumnComp } from "./tableSummaryColumnComp";
3233
export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
3334
export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
3435

36+
3537
const columnWidthOptions = [
3638
{
3739
label: trans("table.auto"),
@@ -145,6 +147,7 @@ export const columnChildrenMap = {
145147
linkColor: withDefault(ColorControl, "#3377ff"),
146148
linkHoverColor: withDefault(ColorControl, ""),
147149
linkActiveColor: withDefault(ColorControl, ""),
150+
summary: SummaryColumnComp,
148151
};
149152

150153
const StyledBorderRadiusIcon = styled(IconRadius)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
@@ -230,7 +233,7 @@ export class ColumnComp extends ColumnInitComp {
230233
});
231234
}
232235

233-
propertyView(key: string) {
236+
propertyView(key: string, viewMode: string) {
234237
const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
235238
const initialColumns = this.children.render.getSelectedComp().getParams()?.initialColumns as OptionType[] || [];
236239
const column = this.children.render.getSelectedComp().getComp().toJsonValue();
@@ -243,127 +246,134 @@ export class ColumnComp extends ColumnInitComp {
243246

244247
return (
245248
<>
246-
{this.children.title.propertyView({
247-
label: trans("table.columnTitle"),
248-
placeholder: this.children.dataIndex.getView(),
249-
})}
250-
{this.children.titleTooltip.propertyView({
251-
label: trans("table.columnTitleTooltip"),
252-
})}
253-
{this.children.cellTooltip.getPropertyView()}
254-
<Dropdown
255-
showSearch={true}
256-
defaultValue={columnValue}
257-
options={initialColumns}
258-
label={trans("table.dataMapping")}
259-
onChange={(value) => {
260-
// Keep the previous text value, some components do not have text, the default value is currentCell
261-
const compType = columnType;
262-
let comp: Record<string, string> = { text: value};
263-
if(columnType === 'image') {
264-
comp = { src: value };
265-
}
266-
this.children.render.dispatchChangeValueAction({
267-
compType,
268-
comp,
269-
} as any);
270-
}}
271-
/>
272-
{/* FIXME: cast type currently, return type of withContext should be corrected later */}
273-
{this.children.render.getPropertyView()}
274-
{this.children.showTitle.propertyView({
275-
label: trans("table.showTitle"),
276-
tooltip: trans("table.showTitleTooltip"),
277-
})}
278-
{ColumnTypeCompMap[columnType].canBeEditable() &&
279-
this.children.editable.propertyView({ label: trans("table.editable") })}
280-
{this.children.sortable.propertyView({
281-
label: trans("table.sortable"),
282-
})}
283-
{this.children.hide.propertyView({
284-
label: trans("prop.hide"),
285-
})}
286-
{this.children.align.propertyView({
287-
label: trans("table.align"),
288-
radioButton: true,
289-
})}
290-
{this.children.fixed.propertyView({
291-
label: trans("table.fixedColumn"),
292-
radioButton: true,
293-
})}
294-
{this.children.autoWidth.propertyView({
295-
label: trans("table.autoWidth"),
296-
radioButton: true,
297-
})}
298-
{this.children.autoWidth.getView() === "fixed" &&
299-
this.children.width.propertyView({ label: trans("prop.width") })}
300-
301-
{(columnType === 'link' || columnType === 'links') && (
249+
{viewMode === 'summary' && (
250+
this.children.summary.propertyView('')
251+
)}
252+
{viewMode === 'normal' && (
302253
<>
254+
{this.children.title.propertyView({
255+
label: trans("table.columnTitle"),
256+
placeholder: this.children.dataIndex.getView(),
257+
})}
258+
{this.children.titleTooltip.propertyView({
259+
label: trans("table.columnTitleTooltip"),
260+
})}
261+
{this.children.cellTooltip.getPropertyView()}
262+
<Dropdown
263+
showSearch={true}
264+
defaultValue={columnValue}
265+
options={initialColumns}
266+
label={trans("table.dataMapping")}
267+
onChange={(value) => {
268+
// Keep the previous text value, some components do not have text, the default value is currentCell
269+
const compType = columnType;
270+
let comp: Record<string, string> = { text: value};
271+
if(columnType === 'image') {
272+
comp = { src: value };
273+
}
274+
this.children.render.dispatchChangeValueAction({
275+
compType,
276+
comp,
277+
} as any);
278+
}}
279+
/>
280+
{/* FIXME: cast type currently, return type of withContext should be corrected later */}
281+
{this.children.render.getPropertyView()}
282+
{this.children.showTitle.propertyView({
283+
label: trans("table.showTitle"),
284+
tooltip: trans("table.showTitleTooltip"),
285+
})}
286+
{ColumnTypeCompMap[columnType].canBeEditable() &&
287+
this.children.editable.propertyView({ label: trans("table.editable") })}
288+
{this.children.sortable.propertyView({
289+
label: trans("table.sortable"),
290+
})}
291+
{this.children.hide.propertyView({
292+
label: trans("prop.hide"),
293+
})}
294+
{this.children.align.propertyView({
295+
label: trans("table.align"),
296+
radioButton: true,
297+
})}
298+
{this.children.fixed.propertyView({
299+
label: trans("table.fixedColumn"),
300+
radioButton: true,
301+
})}
302+
{this.children.autoWidth.propertyView({
303+
label: trans("table.autoWidth"),
304+
radioButton: true,
305+
})}
306+
{this.children.autoWidth.getView() === "fixed" &&
307+
this.children.width.propertyView({ label: trans("prop.width") })}
308+
309+
{(columnType === 'link' || columnType === 'links') && (
310+
<>
311+
<Divider style={{ margin: '12px 0' }} />
312+
{controlItem({}, (
313+
<div>
314+
<b>{"Link Style"}</b>
315+
</div>
316+
))}
317+
{this.children.linkColor.propertyView({
318+
label: trans('text') // trans('style.background'),
319+
})}
320+
{this.children.linkHoverColor.propertyView({
321+
label: "Hover text", // trans('style.background'),
322+
})}
323+
{this.children.linkActiveColor.propertyView({
324+
label: "Active text", // trans('style.background'),
325+
})}
326+
</>
327+
)}
303328
<Divider style={{ margin: '12px 0' }} />
304329
{controlItem({}, (
305330
<div>
306-
<b>{"Link Style"}</b>
331+
<b>{"Column Style"}</b>
307332
</div>
308333
))}
309-
{this.children.linkColor.propertyView({
310-
label: trans('text') // trans('style.background'),
334+
{this.children.background.propertyView({
335+
label: trans('style.background'),
336+
})}
337+
{columnType !== 'link' && this.children.text.propertyView({
338+
label: trans('text'),
339+
})}
340+
{this.children.border.propertyView({
341+
label: trans('style.border')
342+
})}
343+
{this.children.borderWidth.propertyView({
344+
label: trans('style.borderWidth'),
345+
preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
346+
placeholder: '1px',
347+
})}
348+
{this.children.radius.propertyView({
349+
label: trans('style.borderRadius'),
350+
preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
351+
placeholder: '3px',
352+
})}
353+
{this.children.textSize.propertyView({
354+
label: trans('style.textSize'),
355+
preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,
356+
placeholder: '14px',
357+
})}
358+
{this.children.textWeight.propertyView({
359+
label: trans('style.textWeight'),
360+
preInputNode: <StyledTextWeightIcon as={TextWeightIcon} title="" />,
361+
placeholder: 'normal',
311362
})}
312-
{this.children.linkHoverColor.propertyView({
313-
label: "Hover text", // trans('style.background'),
363+
{this.children.fontFamily.propertyView({
364+
label: trans('style.fontFamily'),
365+
preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
366+
placeholder: 'sans-serif',
314367
})}
315-
{this.children.linkActiveColor.propertyView({
316-
label: "Active text", // trans('style.background'),
368+
{this.children.fontStyle.propertyView({
369+
label: trans('style.fontStyle'),
370+
preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
371+
placeholder: 'normal'
317372
})}
373+
{this.children.textOverflow.getPropertyView()}
374+
{this.children.cellColor.getPropertyView()}
318375
</>
319376
)}
320-
<Divider style={{ margin: '12px 0' }} />
321-
{controlItem({}, (
322-
<div>
323-
<b>{"Column Style"}</b>
324-
</div>
325-
))}
326-
{this.children.background.propertyView({
327-
label: trans('style.background'),
328-
})}
329-
{columnType !== 'link' && this.children.text.propertyView({
330-
label: trans('text'),
331-
})}
332-
{this.children.border.propertyView({
333-
label: trans('style.border')
334-
})}
335-
{this.children.borderWidth.propertyView({
336-
label: trans('style.borderWidth'),
337-
preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
338-
placeholder: '1px',
339-
})}
340-
{this.children.radius.propertyView({
341-
label: trans('style.borderRadius'),
342-
preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
343-
placeholder: '3px',
344-
})}
345-
{this.children.textSize.propertyView({
346-
label: trans('style.textSize'),
347-
preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,
348-
placeholder: '14px',
349-
})}
350-
{this.children.textWeight.propertyView({
351-
label: trans('style.textWeight'),
352-
preInputNode: <StyledTextWeightIcon as={TextWeightIcon} title="" />,
353-
placeholder: 'normal',
354-
})}
355-
{this.children.fontFamily.propertyView({
356-
label: trans('style.fontFamily'),
357-
preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
358-
placeholder: 'sans-serif',
359-
})}
360-
{this.children.fontStyle.propertyView({
361-
label: trans('style.fontStyle'),
362-
preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
363-
placeholder: 'normal'
364-
})}
365-
{this.children.textOverflow.getPropertyView()}
366-
{this.children.cellColor.getPropertyView()}
367377
</>
368378
);
369379
}

0 commit comments

Comments
 (0)