Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit155fbae

Browse files
dynamice populate columns for data mapping
1 parent5c225cc commit155fbae

File tree

8 files changed

+52
-80
lines changed

8 files changed

+52
-80
lines changed

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

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import{CellProps}from"components/table/EditableCell";
22
import{DateTimeComp}from"comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp";
33
import{ButtonComp}from"comps/comps/tableComp/column/simpleColumnTypeComps";
4-
import{MultiCompBuilder,withDefault,withType}from"comps/generators";
4+
import{withType}from"comps/generators";
55
import{trans}from"i18n";
66
import{Dropdown}from"lowcoder-design";
77
import{BooleanComp}from"./columnTypeComps/columnBooleanComp";
@@ -17,31 +17,6 @@ import { ColumnTagsComp } from "./columnTypeComps/columnTagsComp";
1717
import{ColumnSelectComp}from"./columnTypeComps/columnSelectComp";
1818
import{SimpleTextComp}from"./columnTypeComps/simpleTextComp";
1919
import{ColumnNumberComp}from"./columnTypeComps/ColumnNumberComp";
20-
import{useState}from"react";
21-
import{dropdownControl}from"@lowcoder-ee/index.sdk";
22-
23-
constcolumnValueOptions=[
24-
{
25-
label:"ID",
26-
value:"{{currentRow.id}}",
27-
},
28-
{
29-
label:"Name",
30-
value:"{{currentRow.name}}",
31-
},
32-
{
33-
label:"Department",
34-
value:"{{currentRow.department}}",
35-
},
36-
{
37-
label:"Date",
38-
value:"{{currentRow.date}}",
39-
},
40-
{
41-
label:"Other",
42-
value:"",
43-
},
44-
]asconst;
4520

4621
constactionOptions=[
4722
{
@@ -129,15 +104,6 @@ export type ColumnTypeKeys = keyof ColumnTypeMapType;
129104

130105
constTypedColumnTypeComp=withType(ColumnTypeCompMap,"text");
131106

132-
constchildrenMap={
133-
comp:TypedColumnTypeComp,
134-
valueMap:dropdownControl(columnValueOptions,"")
135-
};
136-
137-
constTmpColumnTypeComp=newMultiCompBuilder(childrenMap,(props)=>{
138-
returnprops;
139-
}).build();
140-
141107
exportclassColumnTypeCompextendsTypedColumnTypeComp{
142108
overridegetView(){
143109
constchildView=this.children.comp.getView();

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ const Wrapper = styled.div`
1919
padding: 0 8px;
2020
`;
2121

22-
constIconWrapper=styled.div<{$style:CheckboxStyleType;ifChecked:boolean}>`
22+
constIconWrapper=styled.div<{$style:CheckboxStyleType;$ifChecked:boolean}>`
2323
height: 22px;
2424
svg {
2525
width: 14px;
2626
height: 22px;
2727
g {
28-
stroke:${(props)=>props.ifChecked&&props.$style.checkedBackground} !important;
28+
stroke:${(props)=>props.$ifChecked&&props.$style.checkedBackground} !important;
2929
}
3030
}
3131
`;
@@ -87,7 +87,7 @@ export const BooleanComp = (function () {
8787
constCheckBoxComp=()=>{
8888
conststyle=useStyle(CheckboxStyle);
8989
return(
90-
<IconWrapper$style={style}ifChecked={value}>
90+
<IconWrapper$style={style}$ifChecked={value}>
9191
{value ?(
9292
<TableCheckedIcon/>
9393
) :props.falseValues==="x" ?(

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

Lines changed: 27 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
withFunction,
2222
wrapChildAction,
2323
}from"lowcoder-core";
24-
import{AlignClose,AlignLeft,AlignRight,IconRadius,BorderWidthIcon,TextSizeIcon,FontFamilyIcon,TextWeigthIcon,ImageCompIcon,controlItem}from"lowcoder-design";
24+
import{AlignClose,AlignLeft,AlignRight,IconRadius,BorderWidthIcon,TextSizeIcon,FontFamilyIcon,TextWeigthIcon,ImageCompIcon,controlItem,Dropdown,OptionType}from"lowcoder-design";
2525
import{ColumnTypeComp,ColumnTypeCompMap}from"./columnTypeComp";
2626
import{ColorControl}from"comps/controls/colorControl";
2727
import{JSONValue}from"util/jsonTypes";
@@ -57,29 +57,6 @@ const columnFixOptions = [
5757
},
5858
]asconst;
5959

60-
constcolumnValueOptions=[
61-
{
62-
label:"ID",
63-
value:"{{currentRow.id}}",
64-
},
65-
{
66-
label:"Name",
67-
value:"{{currentRow.name}}",
68-
},
69-
{
70-
label:"Department",
71-
value:"{{currentRow.department}}",
72-
},
73-
{
74-
label:"Date",
75-
value:"{{currentRow.date}}",
76-
},
77-
{
78-
label:"Other",
79-
value:"",
80-
},
81-
]asconst;
82-
8360
constcellColorLabel=trans("table.cellColor");
8461
constCellColorTempComp=withContext(
8562
newMultiCompBuilder({color:ColorOrBoolCodeControl},(props)=>props.color)
@@ -113,11 +90,11 @@ export const columnChildrenMap = {
11390
isCustom:valueComp<boolean>(false),
11491
// If it is a data column, it must be the name of the column and cannot be duplicated as a react key
11592
dataIndex:valueComp<string>(""),
93+
columnsList:valueComp<Array<JSONValue>>([]),
11694
hide:BoolControl,
11795
sortable:BoolControl,
11896
width:NumberControl,
11997
autoWidth:dropdownControl(columnWidthOptions,"auto"),
120-
columnMapping:dropdownControl(columnValueOptions,""),
12198
render:RenderComp,
12299
align:HorizontalAlignmentControl,
123100
tempHide:stateComp<boolean>(false),
@@ -213,27 +190,39 @@ export class ColumnComp extends ColumnInitComp {
213190

214191
propertyView(key:string){
215192
constcolumnType=this.children.render.getSelectedComp().getComp().children.compType.getView();
193+
constinitialColumns=this.children.render.getSelectedComp().getParams()?.initialColumnsasOptionType[]||[];
194+
constcolumn=this.children.render.getSelectedComp().getComp().toJsonValue();
195+
letcolumnValue='{{currentCell}}';
196+
if(column.comp?.hasOwnProperty('src')){
197+
columnValue=(column.compasany).src;
198+
}elseif(column.comp?.hasOwnProperty('text')){
199+
columnValue=(column.compasany).text;
200+
}
201+
216202
return(
217203
<>
218204
{this.children.title.propertyView({
219205
label:trans("table.columnTitle"),
220206
placeholder:this.children.dataIndex.getView(),
221207
})}
222-
{this.children.columnMapping.propertyView({
223-
label:"Data Mapping",
224-
onChange:(value)=>{
225-
console.log(value)
226-
constcomp=this.children.render.getSelectedComp().getComp();
227-
// let textRawData = "{{currentCell}}";
228-
// if (comp.children.hasOwnProperty("text")) {
229-
// textRawData = (comp.children as any).text.toJsonValue();
230-
// }
208+
<Dropdown
209+
showSearch={true}
210+
value={columnValue}
211+
options={initialColumns}
212+
label={trans("table.dataMapping")}
213+
onChange={(value)=>{
214+
// Keep the previous text value, some components do not have text, the default value is currentCell
215+
constcompType=columnType;
216+
letcomp:Record<string,string>={text:value};
217+
if(columnType==='image'){
218+
comp={src:value};
219+
}
231220
this.children.render.dispatchChangeValueAction({
232-
compType:columnType,
233-
comp:{text:value},
221+
compType,
222+
comp,
234223
}asany);
235-
}
236-
})}
224+
}}
225+
/>
237226
{/* FIXME: cast type currently, return type of withContext should be corrected later */}
238227
{this.children.render.getPropertyView()}
239228
{this.children.showTitle.propertyView({

‎client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,18 @@ function renderTitle(props: { title: string; editable: boolean }) {
250250
);
251251
}
252252

253+
functiongetInitialColumns(columnsAggrData:ColumnsAggrData){
254+
constinitialColumns=Object.keys(columnsAggrData).map(column=>({
255+
label:<spanstyle={{textTransform:'capitalize'}}>{column}</span>,
256+
value:`{{currentRow.${column}}}`
257+
}))
258+
initialColumns.push({
259+
label:<span>Select with handlebars</span>,
260+
value:'{{currentCell}}',
261+
})
262+
returninitialColumns;
263+
}
264+
253265
exporttypeCustomColumnType<RecordType>=ColumnType<RecordType>&{
254266
onWidthResize?:(width:number)=>void;
255267
titleText:string;
@@ -271,7 +283,7 @@ export function columnsToAntdFormat(
271283
columnsAggrData:ColumnsAggrData,
272284
onTableEvent:(eventName:any)=>void,
273285
):Array<CustomColumnType<RecordType>>{
274-
console.log(columnsAggrData);
286+
constinitialColumns=getInitialColumns(columnsAggrData);
275287
constsortMap:Map<string|undefined,SortOrder>=newMap(
276288
sort.map((s)=>[s.column,s.desc ?"descend" :"ascend"])
277289
);
@@ -345,6 +357,7 @@ export function columnsToAntdFormat(
345357
currentRow:_.omit(record,OB_ROW_ORI_INDEX),
346358
currentIndex:index,
347359
currentOriginalIndex:tryToNumber(record[OB_ROW_ORI_INDEX]),
360+
initialColumns,
348361
},
349362
String(record[OB_ROW_ORI_INDEX])
350363
)

‎client/packages/lowcoder/src/i18n/locales/de.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1135,6 +1135,7 @@ export const de = {
11351135
"auto":"Auto",
11361136
"fixed":"Festgelegt",
11371137
"columnType":"Säule Typ",
1138+
"dataMapping":"Datenzuordnung",
11381139
"numberStep":"Schritt",
11391140
"numberStepTooltip":"Die Zahl, auf die der aktuelle Wert erhöht oder verringert wird. Es kann eine ganze Zahl oder eine Dezimalzahl sein",
11401141
"precision":"Präzision",
@@ -2375,7 +2376,7 @@ export const de = {
23752376
"selectBackground":"Ausgewählter Hintergrund"
23762377
},
23772378
"componentDocExtra":{
2378-
"table":"Zusätzliche Dokumentation für die Tabellenkomponente"
2379+
"table":table,
23792380
},
23802381
"idSource":{
23812382
"title":"OAuth-Anbieter",

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1258,6 +1258,7 @@ export const en = {
12581258
"auto":"Auto",
12591259
"fixed":"Fixed",
12601260
"columnType":"Column Type",
1261+
"dataMapping":"Data Mapping",
12611262
"numberStep":"Step",
12621263
"numberStepTooltip":"The number to which the current value is increased or decreased. It can be an integer or decimal",
12631264
"precision":"Precision",
@@ -2573,7 +2574,7 @@ export const en = {
25732574
"selectBackground":"Selected Background"
25742575
},
25752576
"componentDocExtra":{
2576-
table,
2577+
"table":table,
25772578
},
25782579
"idSource":{
25792580
"title":"OAuth Providers",

‎client/packages/lowcoder/src/i18n/locales/translation_files/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
{
23
"productName":"Lowcoder",
34
"productDesc":"Create software applications for your company and customers with minimal coding experience. Lowcoder is an excellent alternative to Retool, Appsmith, and Tooljet.",

‎client/packages/lowcoder/src/i18n/locales/zh.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1221,6 +1221,7 @@ table: {
12211221
imageSrc:"图片链接",
12221222
imageSize:"图片尺寸",
12231223
columnTitle:"标题",
1224+
dataMapping:"数据映射",
12241225
showTitle:"显示标题",
12251226
showTitleTooltip:"显示/隐藏表标题中的列标题",
12261227
sortable:"可排序",
@@ -2521,7 +2522,7 @@ calendar: {
25212522
selectBackground:"选中背景",
25222523
},
25232524
componentDocExtra:{
2524-
table,
2525+
table:table,
25252526
},
25262527
idSource:{
25272528
title:"OAuth 提供商",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp