Skip to content

Commit 9ee508e

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #517 from raheeliftikhar5/table-updates
Table style updates
2 parents ff95aab + b19a0b3 commit 9ee508e

File tree

12 files changed

+385
-133
lines changed

12 files changed

+385
-133
lines changed

‎client/packages/lowcoder-design/src/icons/icon-text-size.svg

Lines changed: 1 addition & 0 deletions
Loading

‎client/packages/lowcoder-design/src/icons/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -296,4 +296,5 @@ export { ReactComponent as CommentIcon } from "icons/icon-comment-comp.svg";
296296
export { ReactComponent as MentionIcon } from "icons/icon-mention-comp.svg";
297297
export { ReactComponent as AutoCompleteCompIcon } from "icons/icon-autocomplete-comp.svg";
298298
export { ReactComponent as WidthIcon } from "icons/icon-width.svg";
299-
export { ReactComponent as ResponsiveLayoutCompIcon } from "icons/icon-responsive-layout-comp.svg";
299+
export { ReactComponent as ResponsiveLayoutCompIcon } from "icons/icon-responsive-layout-comp.svg";
300+
export { ReactComponent as TextSizeIcon } from "./icon-text-size.svg";

‎client/packages/lowcoder/src/api/commonSettingApi.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export interface ThemeDetail {
4747
margin?: string;
4848
padding?: string;
4949
gridColumns?: string; //Added By Aqib Mirza
50+
textSize?: string;
5051
}
5152

5253
export function getThemeDetailName(key: keyof ThemeDetail) {
@@ -70,6 +71,8 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
7071
//Added By Aqib Mirza
7172
case "gridColumns":
7273
return trans("themeDetail.gridColumns");
74+
case "textSize":
75+
return trans("style.textSize");
7376
}
7477
return "";
7578
}
@@ -84,6 +87,7 @@ export function isThemeColorKey(key: string) {
8487
case "margin":
8588
case "padding":
8689
case "gridColumns": //Added By Aqib Mirza
90+
case "textSize":
8791
return true;
8892
}
8993
return false;

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

Lines changed: 89 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { BoolControl } from "comps/controls/boolControl";
2-
import { NumberControl, StringControl } from "comps/controls/codeControl";
2+
import { ColorOrBoolCodeControl, NumberControl, RadiusControl, StringControl } from "comps/controls/codeControl";
33
import { dropdownControl, HorizontalAlignmentControl } from "comps/controls/dropdownControl";
4-
import { MultiCompBuilder, stateComp, valueComp } from "comps/generators";
4+
import { MultiCompBuilder, stateComp, valueComp, withContext, withDefault } from "comps/generators";
55
import { withSelectedMultiContext } from "comps/generators/withSelectedMultiContext";
66
import { genRandomKey } from "comps/utils/idGenerator";
77
import { trans } from "i18n";
88
import _ from "lodash";
99
import {
1010
changeChildAction,
1111
changeValueAction,
12+
CompAction,
13+
CompActionTypes,
1214
ConstructorToComp,
1315
ConstructorToDataType,
1416
ConstructorToNodeType,
@@ -19,8 +21,11 @@ import {
1921
withFunction,
2022
wrapChildAction,
2123
} from "lowcoder-core";
22-
import { AlignClose, AlignLeft, AlignRight } from "lowcoder-design";
24+
import { AlignClose, AlignLeft, AlignRight, IconRadius, TextSizeIcon, controlItem } from "lowcoder-design";
2325
import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
26+
import { ColorControl } from "comps/controls/colorControl";
27+
import { JSONValue } from "util/jsonTypes";
28+
import styled from "styled-components";
2429

2530
export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
2631
export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
@@ -51,6 +56,31 @@ const columnFixOptions = [
5156
},
5257
] as const;
5358

59+
const cellColorLabel = trans("table.cellColor");
60+
const CellColorTempComp = withContext(
61+
new MultiCompBuilder({ color: ColorOrBoolCodeControl }, (props) => props.color)
62+
.setPropertyViewFn((children) =>
63+
children.color.propertyView({
64+
label: cellColorLabel,
65+
tooltip: trans("table.cellColorDesc"),
66+
})
67+
)
68+
.build(),
69+
["currentCell"] as const
70+
);
71+
72+
// @ts-ignore
73+
export class CellColorComp extends CellColorTempComp {
74+
override getPropertyView() {
75+
return controlItem({ filterText: cellColorLabel }, super.getPropertyView());
76+
}
77+
}
78+
79+
// fixme, should be infer from RowColorComp, but withContext type incorrect
80+
export type CellColorViewType = (param: {
81+
currentCell: JSONValue | undefined; //number | string;
82+
}) => string;
83+
5484
export const columnChildrenMap = {
5585
// column title
5686
title: StringControl,
@@ -67,8 +97,19 @@ export const columnChildrenMap = {
6797
tempHide: stateComp<boolean>(false),
6898
fixed: dropdownControl(columnFixOptions, "close"),
6999
editable: BoolControl,
100+
background: withDefault(ColorControl, ""),
101+
text: withDefault(ColorControl, ""),
102+
border: withDefault(ColorControl, ""),
103+
borderWidth: withDefault(RadiusControl, ""),
104+
radius: withDefault(RadiusControl, ""),
105+
textSize: withDefault(RadiusControl, ""),
106+
cellColor: CellColorComp,
70107
};
71108

109+
const StyledIcon = styled.span`
110+
margin: 0 4px 0 14px;
111+
`;
112+
72113
/**
73114
* export for test.
74115
* Put it here temporarily to avoid circular dependencies
@@ -90,6 +131,21 @@ const ColumnInitComp = new MultiCompBuilder(columnChildrenMap, (props, dispatch)
90131
.build();
91132

92133
export class ColumnComp extends ColumnInitComp {
134+
override reduce(action: CompAction) {
135+
let comp = super.reduce(action);
136+
if (action.type === CompActionTypes.UPDATE_NODES_V2) {
137+
comp = comp.setChild(
138+
"cellColor",
139+
comp.children.cellColor.reduce(
140+
CellColorComp.changeContextDataAction({
141+
currentCell: undefined,
142+
})
143+
)
144+
);
145+
}
146+
return comp;
147+
}
148+
93149
override getView() {
94150
const superView = super.getView();
95151
const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
@@ -143,6 +199,36 @@ export class ColumnComp extends ColumnInitComp {
143199
})}
144200
{this.children.autoWidth.getView() === "fixed" &&
145201
this.children.width.propertyView({ label: trans("prop.width") })}
202+
{controlItem({}, (
203+
<div style={{marginTop: '8px'}}>
204+
<b>{"Style"}</b>
205+
</div>
206+
))}
207+
{this.children.background.propertyView({
208+
label: trans('style.background'),
209+
})}
210+
{this.children.text.propertyView({
211+
label: trans('text'),
212+
})}
213+
{this.children.border.propertyView({
214+
label: trans('style.border')
215+
})}
216+
{this.children.borderWidth.propertyView({
217+
label: trans('style.borderWidth'),
218+
preInputNode: <StyledIcon as={IconRadius} title="" />,
219+
placeholder: '1px',
220+
})}
221+
{this.children.radius.propertyView({
222+
label: trans('style.borderRadius'),
223+
preInputNode: <StyledIcon as={IconRadius} title="" />,
224+
placeholder: '3px',
225+
})}
226+
{this.children.textSize.propertyView({
227+
label: trans('style.textSize'),
228+
preInputNode: <StyledIcon as={TextSizeIcon} title="" />,
229+
placeholder: '14px',
230+
})}
231+
{this.children.cellColor.getPropertyView()}
146232
</>
147233
);
148234
}

0 commit comments

Comments
 (0)