11import { BoolControl } from "comps/controls/boolControl" ;
2- import { NumberControl , StringControl } from "comps/controls/codeControl" ;
2+ import { ColorOrBoolCodeControl , NumberControl , RadiusControl , StringControl } from "comps/controls/codeControl" ;
33import { dropdownControl , HorizontalAlignmentControl } from "comps/controls/dropdownControl" ;
4- import { MultiCompBuilder , stateComp , valueComp } from "comps/generators" ;
4+ import { MultiCompBuilder , stateComp , valueComp , withContext , withDefault } from "comps/generators" ;
55import { withSelectedMultiContext } from "comps/generators/withSelectedMultiContext" ;
66import { genRandomKey } from "comps/utils/idGenerator" ;
77import { trans } from "i18n" ;
88import _ from "lodash" ;
99import {
1010changeChildAction ,
1111changeValueAction ,
12+ CompAction ,
13+ CompActionTypes ,
1214ConstructorToComp ,
1315ConstructorToDataType ,
1416ConstructorToNodeType ,
@@ -19,8 +21,11 @@ import {
1921withFunction ,
2022wrapChildAction ,
2123} from "lowcoder-core" ;
22- import { AlignClose , AlignLeft , AlignRight } from "lowcoder-design" ;
24+ import { AlignClose , AlignLeft , AlignRight , IconRadius , TextSizeIcon , controlItem } from "lowcoder-design" ;
2325import { ColumnTypeComp , ColumnTypeCompMap } from "./columnTypeComp" ;
26+ import { ColorControl } from "comps/controls/colorControl" ;
27+ import { JSONValue } from "util/jsonTypes" ;
28+ import styled from "styled-components" ;
2429
2530export type Render = ReturnType < ConstructorToComp < typeof RenderComp > [ "getOriginalComp" ] > ;
2631export 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+
5484export const columnChildrenMap = {
5585// column title
5686title :StringControl ,
@@ -67,8 +97,19 @@ export const columnChildrenMap = {
6797tempHide :stateComp < boolean > ( false ) ,
6898fixed :dropdownControl ( columnFixOptions , "close" ) ,
6999editable :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
92133export 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+
93149override getView ( ) {
94150const superView = super . getView ( ) ;
95151const 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" &&
145201this . 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}