diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json index 7a31785b7..5da1fff1f 100644 --- a/client/packages/lowcoder-comps/package.json +++ b/client/packages/lowcoder-comps/package.json @@ -34,30 +34,6 @@ "lowcoder": { "description": "", "comps": { - "meetingController": { - "name": "Agora Meeting Controller", - "icon": "./icons/icon-comp-calendar.svg", - "layoutInfo": { - "w": 1, - "h": 1 - } - }, - "meetingSharing": { - "name": "Agora Meeting Sharing", - "icon": "./icons/icon-comp-calendar.svg", - "layoutInfo": { - "w": 6, - "h": 40 - } - }, - "meetingStream": { - "name": "Video Stream", - "icon": "./icons/icon-comp-calendar.svg", - "layoutInfo": { - "w": 6, - "h": 40 - } - }, "calendar": { "name": "Calendar", "icon": "./icons/icon-comp-calendar.svg", @@ -193,6 +169,30 @@ "w": 19, "h": 60 } + }, + "meetingController": { + "name": "Agora Meeting Controller", + "icon": "./icons/icon-comp-calendar.svg", + "layoutInfo": { + "w": 1, + "h": 1 + } + }, + "meetingSharing": { + "name": "Agora Meeting Sharing", + "icon": "./icons/icon-comp-calendar.svg", + "layoutInfo": { + "w": 6, + "h": 40 + } + }, + "meetingStream": { + "name": "Video Stream", + "icon": "./icons/icon-comp-calendar.svg", + "layoutInfo": { + "w": 6, + "h": 40 + } } } }, diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx index e2eb34577..e2a162810 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx @@ -25,7 +25,8 @@ import { ThemeContext, chartColorPalette, getPromiseAfterDispatch, - dropdownControl + dropdownControl, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -73,6 +74,8 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -123,7 +126,8 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx index d43134234..a216e5a49 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx @@ -251,11 +251,11 @@ export const chartUiModeChildren = { const chartJsonModeChildren = { echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption), - echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")), + echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - style: styleControl(EchartsStyle), + style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts index 57b908be5..8bb44e041 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts @@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { let opt={ "title": { @@ -136,9 +140,9 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":"center" }, - "backgroundColor": props?.style?.background, - "color": props.echartsOption.data?.map(data => data.color), - "tooltip": props.tooltip&&{ + "backgroundColor": props?.style?.background || theme?.style?.background, + "color": props.echartsOption.data?.map(data => data.color), + "tooltip": props.tooltip && { "trigger": "item", "formatter": "{a}
{b} : {c}%" }, diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index b6d1b912a..2b512507c 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -42,7 +42,8 @@ import { CustomModal, jsonValueExposingStateControl, CalendarDeleteIcon, - Tooltip + Tooltip, + useMergeCompStyles, } from "lowcoder-sdk"; import { @@ -87,7 +88,7 @@ const childrenMap = { firstDay: dropdownControl(FirstDayOptions, "1"), dayMaxEvents: withDefault(NumberControl, 2), eventMaxStack: withDefault(NumberControl, 0), - style: styleControl(CalendarStyle), + style: styleControl(CalendarStyle, 'style'), licenseKey: withDefault( StringControl, "" ), currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"), currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"), @@ -114,7 +115,7 @@ let CalendarBasicComp = (function () { licensed?: boolean; currentFreeView?: string; currentPremiumView?: string; - }) => { + }, dispatch: any) => { const theme = useContext(ThemeContext); const ref = createRef(); @@ -123,6 +124,8 @@ let CalendarBasicComp = (function () { const [left, setLeft] = useState(undefined); const [licensed, setLicensed] = useState(props.licenseKey !== ""); + useMergeCompStyles(props, dispatch); + useEffect(() => { setLicensed(props.licenseKey !== ""); }, [props.licenseKey]); @@ -130,8 +133,6 @@ let CalendarBasicComp = (function () { let currentView = licensed ? props.currentPremiumView : props.currentFreeView; let currentEvents = currentView == "resourceTimelineDay" || currentView == "resourceTimeGridDay" ? props.resourcesEvents : props.events; - console.log("currentEvents", currentEvents); - // we use one central stack of events for all views let events = Array.isArray(currentEvents.value) ? currentEvents.value.map((item: EventType) => { return { diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx index 3d1750d9c..2e02f78ce 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx @@ -24,7 +24,8 @@ import { ThemeContext, chartColorPalette, getPromiseAfterDispatch, - dropdownControl + dropdownControl, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -63,7 +64,6 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => { color: chartColorPalette, backgroundColor: "#fff", }; - let themeConfig = defaultChartTheme; try { themeConfig = theme?.theme.chart ? JSON.parse(theme?.theme.chart) : defaultChartTheme; @@ -71,6 +71,8 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -144,7 +146,8 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index 1de9ffdb3..cee782aab 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx @@ -253,7 +253,7 @@ const chartJsonModeChildren = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - style: styleControl(EchartsStyle), + style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index 00dcb0d2d..8d94c105f 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -12,6 +12,7 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; +import { useContext } from "react"; export function transformData( originData: JSONObject[], @@ -128,7 +129,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { let opt={ "title": { @@ -136,7 +141,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":"center" }, - "backgroundColor": props?.style?.background, + "backgroundColor": props?.style?.background || theme?.style?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "axis", diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts index 5b652ef94..d71dd7f56 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts @@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { return props.echartsOption ? props.echartsOption : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx index 2fa1ddf7e..88da3b89c 100644 --- a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx @@ -25,7 +25,8 @@ import { ThemeContext, chartColorPalette, getPromiseAfterDispatch, - dropdownControl + dropdownControl, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/basicChartComp/chartConfigs/lineChartConfig"; @@ -82,6 +83,8 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -119,7 +122,8 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx index f26078335..afa7ae13d 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx @@ -24,7 +24,8 @@ import { ThemeContext, chartColorPalette, getPromiseAfterDispatch, - dropdownControl + dropdownControl, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -71,6 +72,8 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -144,7 +147,8 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index 36e55cf52..e668de39a 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -255,7 +255,7 @@ const chartJsonModeChildren = { echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, echartsTitleConfig:EchartsTitleConfig, - style: styleControl(EchartsStyle), + style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), label: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 2f2b33505..2f2b814cc 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { let opt={ "title": { @@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":props.echartsTitleConfig.top }, - "backgroundColor": props?.style?.background, + "backgroundColor": props?.style?.background || theme?.style?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx index 3823dd888..1793dd634 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx @@ -25,7 +25,8 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - JSONObject + JSONObject, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -72,6 +73,8 @@ GaugeChartTmpComp = withViewFn(GaugeChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -145,7 +148,8 @@ GaugeChartTmpComp = withViewFn(GaugeChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 5f128faec..23f14ce77 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -255,7 +255,7 @@ const chartJsonModeChildren = { echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, echartsTitleConfig:EchartsTitleConfig, - style: styleControl(EchartsStyle), + style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), label: withDefault(BoolControl, true), diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 4babbe7c7..eb16f1a86 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { let opt={ "title": { @@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":props.echartsTitleConfig.top }, - "backgroundColor": props?.style?.background, + "backgroundColor": props?.style?.background || theme?.style?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx index 7b395901c..5f68c050c 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx @@ -25,7 +25,8 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - JSONObject + JSONObject, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -72,6 +73,8 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -145,7 +148,8 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx index a3c5c0095..a643affc4 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx @@ -253,7 +253,7 @@ const chartJsonModeChildren = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - style: styleControl(EchartsStyle), + style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts index df231bd0d..a75b6a8c2 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts @@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { let opt={ "title": { @@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":"center" }, - "backgroundColor": props?.style?.background, + "backgroundColor": props?.style?.background || theme?.style?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&& { "trigger": "item" diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx index 760b79dca..80b3da4ab 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx @@ -24,7 +24,8 @@ import { ThemeContext, chartColorPalette, getPromiseAfterDispatch, - dropdownControl + dropdownControl, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -71,6 +72,8 @@ HeatmapChartTmpComp = withViewFn(HeatmapChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -144,7 +147,8 @@ HeatmapChartTmpComp = withViewFn(HeatmapChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx index d4a8a9a29..2ecfd3091 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx @@ -253,7 +253,7 @@ const chartJsonModeChildren = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - style: styleControl(EchartsStyle), + style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts index 6d9c0bef9..43bd48e03 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts @@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { let opt={ "title": { @@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":"center" }, - "backgroundColor": props?.style?.background, + "backgroundColor": props?.style?.background || theme?.style?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "position": "top" diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx index b9a9af5be..950f5cad2 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx @@ -24,7 +24,8 @@ import { ThemeContext, chartColorPalette, getPromiseAfterDispatch, - dropdownControl + dropdownControl, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -71,6 +72,8 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -144,7 +147,8 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx index a96f7a36d..be9ed1ec1 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx @@ -253,7 +253,7 @@ const chartJsonModeChildren = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - style: styleControl(EchartsStyle), + style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts index 3ce2d0f7b..904910a35 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts @@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { let opt={ "title": { @@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":"center" }, - "backgroundColor": props?.style?.background, + "backgroundColor": props?.style?.background || theme?.style?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": { "trigger": "axis", diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx index 680f47771..45b751926 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx @@ -24,7 +24,8 @@ import { ThemeContext, chartColorPalette, getPromiseAfterDispatch, - dropdownControl + dropdownControl, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -71,6 +72,8 @@ SankeyChartTmpComp = withViewFn(SankeyChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -144,7 +147,8 @@ SankeyChartTmpComp = withViewFn(SankeyChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx index bc106cebe..7d834e9d7 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx @@ -253,7 +253,7 @@ const chartJsonModeChildren = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - style: styleControl(EchartsStyle), + style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts index 819fa4e67..16b3679a1 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts @@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { let opt={ "title": { @@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":"center" }, - "backgroundColor": props?.style?.background, + "backgroundColor": props?.style?.background || theme?.style?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx index a136b12b6..6cfa5a90c 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx @@ -24,7 +24,8 @@ import { ThemeContext, chartColorPalette, getPromiseAfterDispatch, - dropdownControl + dropdownControl, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -71,6 +72,8 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -144,7 +147,8 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx index c4e7aa539..51aa6ae0e 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx @@ -253,7 +253,7 @@ const chartJsonModeChildren = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - style: styleControl(EchartsStyle), + style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts index 85bbb9676..dda543eaa 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts @@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { let opt={ "title": { @@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":"center" }, - "backgroundColor": props?.style?.background, + "backgroundColor": props?.style?.background || theme?.style?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx index 225c65cc6..143286741 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx @@ -24,7 +24,8 @@ import { ThemeContext, chartColorPalette, getPromiseAfterDispatch, - dropdownControl + dropdownControl, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -71,6 +72,8 @@ ThemeriverChartTmpComp = withViewFn(ThemeriverChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -144,7 +147,8 @@ ThemeriverChartTmpComp = withViewFn(ThemeriverChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx index 589634148..e2f973ea2 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx @@ -253,7 +253,7 @@ const chartJsonModeChildren = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - style: styleControl(EchartsStyle), + style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts index 5d9195e3c..8eb9f8629 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts @@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { let opt={ "title": { @@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":"center" }, - "backgroundColor": props.style.background, + "backgroundColor": props?.style?.background || theme?.style?.background, "tooltip": props.tooltip&&{ "trigger": "axis", "axisPointer": { diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx index 573cc03db..8dfe7f49c 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx @@ -253,7 +253,7 @@ const chartJsonModeChildren = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - style: styleControl(EchartsStyle), + style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts index c7719fdb7..35490fcb1 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts @@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { let opt={ "title": { @@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":"center" }, - "backgroundColor": props?.style?.background, + "backgroundColor": props?.style?.background || theme?.style?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx index 91bb602e8..193e055ee 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx @@ -24,7 +24,8 @@ import { ThemeContext, chartColorPalette, getPromiseAfterDispatch, - dropdownControl + dropdownControl, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -71,6 +72,8 @@ TreeChartTmpComp = withViewFn(TreeChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -144,7 +147,8 @@ TreeChartTmpComp = withViewFn(TreeChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx index fa0d6f078..460a538f8 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx @@ -24,7 +24,8 @@ import { ThemeContext, chartColorPalette, getPromiseAfterDispatch, - dropdownControl + dropdownControl, + useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -71,6 +72,8 @@ TreemapChartTmpComp = withViewFn(TreemapChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -144,7 +147,8 @@ TreemapChartTmpComp = withViewFn(TreemapChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + theme?.theme?.components?.candleStickChart || {}, ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx index a5c302b2b..45ff3ad5d 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx @@ -253,7 +253,7 @@ const chartJsonModeChildren = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - style: styleControl(EchartsStyle), + style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts index 81f033597..a323e2803 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts @@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) { } // https://echarts.apache.org/en/option.html -export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap { +export function getEchartsConfig( + props: EchartsConfigProps, + chartSize?: ChartSize, + theme?: any, +): EChartsOptionWithMap { if (props.mode === "json") { let opt={ "title": { @@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":"center" }, - "backgroundColor": props?.style?.background, + "backgroundColor": props?.style?.background || theme?.style?.background, "color": [], "tooltip": props.tooltip&&{ "trigger": "item", diff --git a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx index 7249ff330..24c091256 100644 --- a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx +++ b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx @@ -29,7 +29,7 @@ export const ColorSelect = (props: ColorSelectProps) => { dispatch && dispatch(changeValueAction(toHex(rgbaColor), true)); changeColor && changeColor(toHex(rgbaColor)); }, 200), - [dispatch] + [dispatch,changeColor] ); return ( ; } export function getThemeDetailName(key: keyof ThemeDetail) { switch (key) { - case "primary": - return trans("themeDetail.primary"); - case "textDark": - return trans("themeDetail.textDark"); - case "textLight": - return trans("themeDetail.textLight"); - case "canvas": - return trans("themeDetail.canvas"); - case "primarySurface": - return trans("themeDetail.primarySurface"); - case "borderRadius": - return trans("themeDetail.borderRadius"); - case "margin": - return trans("style.margin"); - case "padding": - return trans("style.padding"); - //Added By Aqib Mirza - case "gridColumns": - return trans("themeDetail.gridColumns"); - case "textSize": - return trans("style.textSize"); + case "primary": return trans("themeDetail.primary"); + case "textDark": return trans("themeDetail.textDark"); + case "textLight": return trans("themeDetail.textLight"); + case "canvas": return trans("themeDetail.canvas"); + case "primarySurface": return trans("themeDetail.primarySurface"); + case "radius": return trans("themeDetail.borderRadius"); + case "border": return trans("themeDetail.borderColor"); + case "borderWidth": return trans("themeDetail.borderWidth"); + case "borderStyle": return trans("themeDetail.borderStyle"); + case "fontFamily": return trans("themeDetail.fontFamily"); + case "margin": return trans("style.margin"); + case "padding": return trans("style.padding"); + case "gridColumns": return trans("themeDetail.gridColumns"); + case "textSize": return trans("style.textSize"); } return ""; } @@ -91,9 +93,16 @@ export function isThemeColorKey(key: string) { case "textLight": case "canvas": case "primarySurface": + case "borderRadius": + case "borderColor": + case "radius": + case "border": + case "borderWidth": + case "borderStyle": + case "fontFamily": case "margin": case "padding": - case "gridColumns": //Added By Aqib Mirza + case "gridColumns": case "textSize": return true; } diff --git a/client/packages/lowcoder/src/components/ColorPicker.tsx b/client/packages/lowcoder/src/components/ColorPicker.tsx deleted file mode 100644 index b461672e2..000000000 --- a/client/packages/lowcoder/src/components/ColorPicker.tsx +++ /dev/null @@ -1,254 +0,0 @@ -import _ from "lodash"; -import { useEffect, useState } from "react"; -import { ConfigItem, Radius, Margin, Padding, GridColumns } from "../pages/setting/theme/styledComponents"; -import { isValidColor, toHex } from "components/colorSelect/colorUtils"; -import { ColorSelect } from "components/colorSelect"; -import { TacoInput } from "components/tacoInput"; -import { TableCellsIcon as GridIcon } from "lowcoder-design/src/icons"; //Added By Aqib Mirza - -import { ExpandIcon, CompressIcon } from "lowcoder-design/src/icons"; - -export type configChangeParams = { - colorKey: string; - color?: string; - radius?: string; - chart?: string; - margin?: string; - padding?: string; - gridColumns?: string; //Added By Aqib Mirza -}; - -type ColorConfigProps = { - className?: string; - colorKey: string; - name?: string; - desc?: string; - color?: string; - radius?: string; - configChange: (params: configChangeParams) => void; - showVarName?: boolean; - margin?: string; - padding?: string; - gridColumns?: string; //Added By Aqib Mirza -}; - -export default function ColorPicker(props: ColorConfigProps) { - const { - colorKey, - name, - desc, - color: defaultColor, - radius: defaultRadius, - configChange, - showVarName = true, - margin: defaultMargin, - padding: defaultPadding, - gridColumns: defaultGridColumns, //Added By Aqib Mirza - } = props; - const configChangeWithDebounce = _.debounce(configChange, 0); - const [color, setColor] = useState(defaultColor); - const [radius, setRadius] = useState(defaultRadius); - - const [margin, setMargin] = useState(defaultMargin); - const [padding, setPadding] = useState(defaultPadding); - const [gridColumns, setGridColumns] = useState(defaultGridColumns); //Added By Aqib Mirza - - const varName = `(${colorKey})`; - - const colorInputBlur = () => { - if (!color || !isValidColor(color)) { - setColor(defaultColor); - } else { - setColor(toHex(color)); - configChange({ colorKey, color: toHex(color) }); - } - }; - - const radiusInputBlur = (radius: string) => { - let result = ""; - if (!radius || Number(radius) === 0) { - result = "0"; - } else if (/^[0-9]+$/.test(radius)) { - result = Number(radius) + "px"; - } else if (/^[0-9]+(px|%)$/.test(radius)) { - result = radius; - } else { - result = "0"; - } - setRadius(result); - configChange({ colorKey, radius: result }); - }; - - const marginInputBlur = (margin: string) => { - let result = ""; - if (!margin || Number(margin) === 0) { - result = "0"; - } else if (/^[0-9]+$/.test(margin)) { - result = Number(margin) + "px"; - } else if (/^[0-9]+(px|%)$/.test(margin)) { - result = margin; - } else { - result = "3px"; - } - setMargin(result); - configChange({ colorKey, margin: result }); - }; - const paddingInputBlur = (padding: string) => { - let result = ""; - if (!padding || Number(padding) === 0) { - result = "0"; - } else if (/^[0-9]+$/.test(padding)) { - result = Number(padding) + "px"; - } else if (/^[0-9]+(px|%)$/.test(padding)) { - result = padding; - } else { - result = "3px"; - } - setPadding(result); - configChange({ colorKey, padding: result }); - }; - - //Added By Aqib Mirza - - const gridColumnsInputBlur = (gridColumns: string) => { - let result = ""; - if (!gridColumns) { - result = "0"; - } else { - result = gridColumns; - } - setGridColumns(result); - configChange({ colorKey, gridColumns: result }); - }; - - ///////////////////// - - useEffect(() => { - if (color && isValidColor(color)) { - configChangeWithDebounce({ colorKey, color }); - } - }, [color]); - - // reset - useEffect(() => { - setColor(defaultColor); - }, [defaultColor]); - - useEffect(() => { - setRadius(defaultRadius); - }, [defaultRadius]); - - useEffect(() => { - setMargin(defaultMargin); - }, [defaultMargin]); - - useEffect(() => { - setPadding(defaultPadding); - }, [defaultPadding]); - // Added By Aqib Mirza - useEffect(() => { - setGridColumns(defaultGridColumns); - }, [defaultGridColumns]); - ////////////////////// - - return ( - -
-
- {name} {showVarName && {varName}} -
-
{desc}
-
- {colorKey !== "borderRadius" && - colorKey !== "margin" && - colorKey !== "padding" && - colorKey !== "gridColumns" && ( -
- - setColor(e.target.value)} - onBlur={colorInputBlur} - onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()} - /> -
- )} - {colorKey === "borderRadius" && ( -
- -
-
-
- - setRadius(e.target.value)} - onBlur={(e) => radiusInputBlur(e.target.value)} - onKeyUp={(e) => e.nativeEvent.key === "Enter" && radiusInputBlur(e.currentTarget.value)} - /> -
- )} - {colorKey === "margin" && ( -
- -
- -
- - setMargin(e.target.value)} - onBlur={(e) => marginInputBlur(e.target.value)} - onKeyUp={(e) => - e.nativeEvent.key === "Enter" && - marginInputBlur(e.currentTarget.value) - } - /> -
- )} - {colorKey === "padding" && ( -
- -
- -
- - setPadding(e.target.value)} - onBlur={(e) => paddingInputBlur(e.target.value)} - onKeyUp={(e) => - e.nativeEvent.key === "Enter" && - paddingInputBlur(e.currentTarget.value) - } - /> -
- )} - {colorKey === "gridColumns" && ( -
- -
- -
- - setGridColumns(e.target.value)} - onBlur={(e) => gridColumnsInputBlur(e.target.value)} - onKeyUp={(e) => - e.nativeEvent.key === "Enter" && - gridColumnsInputBlur(e.currentTarget.value) - } - /> -
- )} - - ); -} diff --git a/client/packages/lowcoder/src/components/PreviewApp.tsx b/client/packages/lowcoder/src/components/PreviewApp.tsx index df700f75d..1f5a71f0a 100644 --- a/client/packages/lowcoder/src/components/PreviewApp.tsx +++ b/client/packages/lowcoder/src/components/PreviewApp.tsx @@ -56,7 +56,9 @@ export default function PreviewApp(props: { return ( - {view} + + {view} + ); } diff --git a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx new file mode 100644 index 000000000..9f2b0abe5 --- /dev/null +++ b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx @@ -0,0 +1,450 @@ +import { useEffect, useMemo, useState } from "react"; +import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderStyle } from "../pages/setting/theme/styledComponents"; +import { isValidColor, toHex } from "components/colorSelect/colorUtils"; +import { ColorSelect } from "components/colorSelect"; +import { TacoInput } from "components/tacoInput"; +import { Slider } from "antd"; +import { + ExpandIcon, + CompressIcon, + BorderRadiusIcon, + BorderWidthIcon, + BorderStyleIcon, + TableCellsIcon, + RefreshLineIcon, + OpacityIcon, + ShadowIcon, + StarSmileIcon, + TimerFlashIcon, + Timer2Icon, + TextSizeIcon, + TextWeightIcon, + FontFamilyIcon, + TextTransformationIcon, + TextDecorationIcon, + TextStyleIcon, + ImageCompIconSmall, + RotationIcon, + } from "lowcoder-design/src/icons"; +import { trans } from "i18n"; +import { debounce } from "lodash"; + +export type configChangeParams = { + themeSettingKey: string; + color?: string; + radius?: string; + chart?: string; + margin?: string; + padding?: string; + gridColumns?: string; // Added By Aqib Mirza + borderStyle?: string; + borderColor?: string; + borderWidth?: string; + fontFamily?: string; +}; + +type ColorConfigProps = { + className?: string; + themeSettingKey: string; + name?: string; + desc?: string; + color?: string; + + configChange: (params: configChangeParams) => void; + showVarName?: boolean; + radius?: string; + borderStyle?: string; + borderWidth?: string; + borderColor?: string; + fontFamily?: string; + margin?: string; + padding?: string; + gridColumns?: string; // Added By Aqib Mirza +}; + +const isColorStyle = (styleKey: string) => { + return styleKey !== 'radius' && + styleKey !== 'borderWidth' && + styleKey !== 'boxShadow' && + styleKey !== 'animationIterationCount' && + styleKey !== 'opacity' && + styleKey !== 'animation' && + styleKey !== 'animationDelay' && + styleKey !== 'animationDuration' && + styleKey !== 'rotation' && + styleKey !== 'cardRadius' && + styleKey !== 'textSize' && + styleKey !== 'textWeight' && + styleKey !== 'textTransform' && + styleKey !== 'textDecoration' && + styleKey !== 'fontFamily' && + styleKey !== 'borderStyle' && + styleKey !== 'fontStyle' && + styleKey !== 'backgroundImage' && + styleKey !== 'backgroundImageRepeat' && + styleKey !== 'backgroundImageSize' && + styleKey !== 'backgroundImagePosition' && + styleKey !== 'backgroundImageOrigin' && + styleKey !== 'headerBackgroundImage' && + styleKey !== 'headerBackgroundImageRepeat' && + styleKey !== 'headerBackgroundImageSize' && + styleKey !== 'headerBackgroundImagePosition' && + styleKey !== 'headerBackgroundImageOrigin' && + styleKey !== 'footerBackgroundImage' && + styleKey !== 'footerBackgroundImageRepeat' && + styleKey !== 'footerBackgroundImageSize' && + styleKey !== 'footerBackgroundImagePosition' && + styleKey !== 'footerBackgroundImageOrigin' && + styleKey !== 'margin' && + styleKey !== 'padding' && + styleKey !== 'containerHeaderPadding' && + styleKey !== 'containerSiderPadding' && + styleKey !== 'containerFooterPadding' && + styleKey !== 'containerBodyPadding'; +} + + +type CompStyleProps = { + styleOptions: string[]; + defaultStyle: Record; + configChange: (params: any) => void; +} + +export default function ThemeSettingsCompStyles(props: CompStyleProps) { + const { defaultStyle, styleOptions, configChange } = props; + const [compStyle, setCompStyle] = useState({...defaultStyle}); + + const updateThemeWithDebounce = useMemo(() => { + return debounce((updateStyles) => { + configChange(updateStyles); + }, 500); + }, [configChange]); + + const handleChange = (styleKey: string, styleValue: string) => { + const updateStyles = { + ...compStyle, + [styleKey]: styleValue, + }; + setCompStyle(updateStyles); + updateThemeWithDebounce(updateStyles); + } + + const getLabelByStyle = (styleKey: string) => { + let label = styleKey; + switch(styleKey) { + case 'radius': + case 'cardRadius': + case 'gap': { + label = trans("style.borderRadius"); + break; + } + // case 'borderWidth': + // case 'borderStyle': + // case 'margin': + // case 'padding': + // case 'containerHeaderPadding': + // case 'containerSiderPadding': + // case 'containerFooterPadding': + // case 'containerBodyPadding': + // case 'opacity': + // case 'boxShadowColor': + // case 'boxShadow': + // case 'animationIterationCount': + // case 'animation': + // case 'animationDelay': + // case 'animationDuration': + // case 'textSize': + // case 'textWeight': + // case 'fontFamily': + // case 'textDecoration': + // case 'textTransform': + // case 'fontStyle': + // case 'backgroundImage': + // case 'headerBackgroundImage': + // case 'footerBackgroundImage': + // case 'backgroundImageRepeat': + // case 'headerBackgroundImageRepeat': + // case 'footerBackgroundImageRepeat': + // case 'rotation': { + // label = trans(`style.${styleKey}`); + // break; + // } + default: { + label = trans(`style.${styleKey}`); + break; + } + } + return label; + } + + const getPlaceholderByStyle = (styleKey: string) => { + let placeholder = ''; + switch(styleKey) { + case 'radius': + case 'cardRadius': + case 'gap': { + placeholder = '2px'; + break; + } + case 'borderWidth': { + placeholder = '1px'; + break; + } + case 'borderStyle': { + placeholder = 'solid'; + break; + } + case 'margin': { + placeholder = '3px'; + break; + } + case 'padding': + case 'containerHeaderPadding': + case 'containerSiderPadding': + case 'containerFooterPadding': + case 'containerBodyPadding': { + placeholder = '3px'; + break; + } + case 'opacity': { + placeholder = '1'; + break; + } + case 'boxShadowColor': { + placeholder = '#FFFFFF'; + break; + } + case 'boxShadow': { + placeholder = '0px 0px 0px'; + break; + } + case 'animationIterationCount': { + placeholder = '0'; + break; + } + case 'animation': { + placeholder = 'none'; + break; + } + case 'animationDelay': { + placeholder = '0s'; + break; + } + case 'animationDuration': { + placeholder = '0s'; + break; + } + case 'textSize': { + placeholder = '14px'; + break; + } + case 'textWeight': { + placeholder = 'normal'; + break; + } + case 'fontFamily': { + placeholder = 'sans-serif'; + break; + } + case 'textDecoration': { + placeholder = 'none'; + break; + } + case 'textTransform': { + placeholder = 'none'; + break; + } + case 'fontStyle': { + placeholder = 'normal'; + break; + } + case 'backgroundImage': + case 'headerBackgroundImage': + case 'footerBackgroundImage': { + placeholder = ''; + break; + } + case 'backgroundImageRepeat': + case 'headerBackgroundImageRepeat': + case 'footerBackgroundImageRepeat': { + placeholder = 'no-repeat'; + break; + } + case 'rotation': { + placeholder = '0deg'; + break; + } + } + return placeholder; + } + + const getIconByStyle = (styleKey: string) => { + let icon = null; + switch(styleKey) { + case 'radius': + case 'cardRadius': + case 'gap': { + icon = ; + break; + } + case 'borderWidth': { + icon = ; + break; + } + case 'borderStyle': { + icon = ; + break; + } + case 'margin': { + icon = ; + break; + } + case 'padding': + case 'containerHeaderPadding': + case 'containerSiderPadding': + case 'containerFooterPadding': + case 'containerBodyPadding': { + icon = ; + break; + } + case 'opacity': { + icon = ; + break; + } + case 'boxShadowColor': { + icon = ; + break; + } + case 'boxShadow': { + icon = ; + break; + } + case 'animationIterationCount': { + icon = ; + break; + } + case 'animation': { + icon = ; + break; + } + case 'animationDelay': { + icon = ; + break; + } + case 'animationDuration': { + icon = ; + break; + } + case 'textSize': { + icon = ; + break; + } + case 'textWeight': { + icon = ; + break; + } + case 'fontFamily': { + icon = ; + break; + } + case 'textDecoration': { + icon = ; + break; + } + case 'textTransform': { + icon = ; + break; + } + case 'fontStyle': { + icon = ; + break; + } + case 'backgroundImage': + case 'headerBackgroundImage': + case 'footerBackgroundImage': { + icon = ; + break; + } + case 'backgroundImageRepeat': + case 'headerBackgroundImageRepeat': + case 'footerBackgroundImageRepeat': { + icon = ; + break; + } + case 'rotation': { + icon = ; + break; + } + } + return icon; + } + + return ( +
+ {styleOptions.map((styleKey: string) => ( + +
+
+ { getLabelByStyle(styleKey) } +
+
+ { isColorStyle(styleKey) ? ( +
+ handleChange(styleKey, value)} + color={compStyle[styleKey]!} + trigger="hover" + /> + handleChange(styleKey, e.target.value)} + // onChange={(e) => setColor(e.target.value)} + // onBlur={colorInputBlur} + // onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()} + /> +
+ ): ( +
+ {/* */} +
+ {getIconByStyle(styleKey)} +
+ {/* */} + handleChange(styleKey, e.target.value)} + // onBlur={(e) => radiusInputBlur(e.target.value)} + // onKeyUp={(e) => e.nativeEvent.key === "Enter" && radiusInputBlur(e.currentTarget.value)} + /> +
+ )} + + ))} +
+ ) +} diff --git a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx new file mode 100644 index 000000000..4ac7cbd3f --- /dev/null +++ b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx @@ -0,0 +1,403 @@ +import _ from "lodash"; +import { useEffect, useState } from "react"; +import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderStyle } from "../pages/setting/theme/styledComponents"; +import { isValidColor, toHex } from "components/colorSelect/colorUtils"; +import { ColorSelect } from "components/colorSelect"; +import { TacoInput } from "components/tacoInput"; +import { Slider } from "antd"; +import { + ExpandIcon, + CompressIcon, + BorderRadiusIcon, + BorderWidthIcon, + BorderStyleIcon, + TableCellsIcon, + } from "lowcoder-design/src/icons"; + +export type configChangeParams = { + themeSettingKey: string; + color?: string; + radius?: string; + chart?: string; + margin?: string; + padding?: string; + gridColumns?: string; // Added By Aqib Mirza + borderStyle?: string; + borderColor?: string; + borderWidth?: string; + fontFamily?: string; + components?: Record, +}; + +type ColorConfigProps = { + className?: string; + themeSettingKey: string; + name?: string; + desc?: string; + color?: string; + + configChange: (params: configChangeParams) => void; + showVarName?: boolean; + radius?: string; + borderStyle?: string; + borderWidth?: string; + borderColor?: string; + fontFamily?: string; + margin?: string; + padding?: string; + gridColumns?: string; // Added By Aqib Mirza +}; + +export default function ThemeSettingsSelector(props: ColorConfigProps) { + const { + themeSettingKey, + name, + desc, + color: defaultColor, + radius: defaultRadius, + configChange, + showVarName = true, + margin: defaultMargin, + padding: defaultPadding, + gridColumns: defaultGridColumns, + borderStyle: defaultBorderStyle, + borderWidth: defaultBorderWidth, + borderColor: defaultBorderColor, + fontFamily: defaultFontFamily + } = props; + + const configChangeWithDebounce = _.debounce(configChange, 0); + const [color, setColor] = useState(defaultColor); + const [radius, setRadius] = useState(defaultRadius); + const [margin, setMargin] = useState(defaultMargin); + const [padding, setPadding] = useState(defaultPadding); + const [gridColumns, setGridColumns] = useState(defaultGridColumns); + const [borderStyle, setBorderStyle] = useState(defaultBorderStyle); + const [borderWidth, setBorderWidth] = useState(defaultBorderWidth); + const [borderColor, setBorderColor] = useState(defaultBorderColor); + const [fontFamily, setFontFamily] = useState(defaultFontFamily); + + const varName = `(${themeSettingKey})`; + + const colorInputBlur = () => { + if (!color || !isValidColor(color)) { + setColor(defaultColor); + } else { + setColor(toHex(color)); + configChange({ themeSettingKey, color: toHex(color) }); + } + }; + + const radiusInputBlur = (radius: string) => { + let result = ""; + if (!radius || Number(radius) === 0) { + result = "0"; + } else if (/^[0-9]+$/.test(radius)) { + result = Number(radius) + "px"; + } else if (/^[0-9]+(px|%)$/.test(radius)) { + result = radius; + } else { + result = "0"; + } + setRadius(result); + configChange({ themeSettingKey, radius: result }); + }; + + const marginInputBlur = (margin: string) => { + let result = ""; + if (!margin || Number(margin) === 0) { + result = "0"; + } else if (/^[0-9]+$/.test(margin)) { + result = Number(margin) + "px"; + } else if (/^[0-9]+(px|%)$/.test(margin)) { + result = margin; + } else { + result = "3px"; + } + setMargin(result); + configChange({ themeSettingKey, margin: result }); + }; + + const paddingInputBlur = (padding: string) => { + let result = ""; + if (!padding || Number(padding) === 0) { + result = "0"; + } else if (/^[0-9]+$/.test(padding)) { + result = Number(padding) + "px"; + } else if (/^[0-9]+(px|%)$/.test(padding)) { + result = padding; + } else { + result = "3px"; + } + setPadding(result); + configChange({ themeSettingKey, padding: result }); + }; + + const gridColumnsInputBlur = (gridColumns: string) => { + let result = ""; + if (!gridColumns) { + result = "24"; + } else { + result = gridColumns; + } + setGridColumns(result); + configChange({ themeSettingKey, gridColumns: result }); + }; + + const borderStyleInputBlur = (borderStyle: string) => { + let result = ""; + if (!borderStyle) { + result = "solid"; + } else { + result = borderStyle; + } + setBorderStyle(result); + configChange({ themeSettingKey, borderStyle: result }); + }; + + const borderWidthInputBlur = (borderWidth: string) => { + let result = ""; + if (!borderWidth || Number(borderWidth) === 0) { + result = "0"; + } else if (/^[0-9]+$/.test(borderWidth)) { + result = Number(borderWidth) + "px"; + } else if (/^[0-9]+(px|%)$/.test(borderWidth)) { + result = borderWidth; + } else { + result = "1px"; + } + setBorderWidth(borderWidth); + configChange({ themeSettingKey, borderWidth: result }); + }; + + const borderColorInputBlur = (borderColor: string) => { + setBorderColor(borderColor); + configChange({ themeSettingKey, borderColor }); + }; + + const fontFamilyInputBlur = (fontFamily: string) => { + let result = ""; + if (!fontFamily) { + result = "Roboto, sans-serif"; + } else { + result = fontFamily; + } + setFontFamily(result); + configChange({ themeSettingKey, fontFamily: result }); + }; + + + useEffect(() => { + if (color && isValidColor(color)) { + configChangeWithDebounce({ themeSettingKey, color }); + } + }, [color]); + + useEffect(() => { + setColor(defaultColor); + }, [defaultColor]); + + useEffect(() => { + setRadius(defaultRadius); + }, [defaultRadius]); + + useEffect(() => { + setMargin(defaultMargin); + }, [defaultMargin]); + + useEffect(() => { + setPadding(defaultPadding); + }, [defaultPadding]); + + useEffect(() => { + setGridColumns(defaultGridColumns); + }, [defaultGridColumns]); + + useEffect(() => { + setBorderStyle(defaultBorderStyle); + }, [defaultBorderStyle]); + + useEffect(() => { + setBorderWidth(defaultBorderWidth); + }, [defaultBorderWidth]); + + useEffect(() => { + setBorderColor(defaultBorderColor); + }, [defaultBorderColor]); + + useEffect(() => { + setFontFamily(defaultFontFamily); + }, [defaultFontFamily]); + + return ( + +
+
+ {name} {showVarName && {varName}} +
+
{desc}
+
+ + {themeSettingKey !== "borderRadius" && + themeSettingKey !== "margin" && + themeSettingKey !== "padding" && + themeSettingKey !== "gridColumns" && + themeSettingKey !== "borderStyle" && + themeSettingKey !== "borderWidth" && + themeSettingKey !== "fontFamily" && ( +
+ + setColor(e.target.value)} + onBlur={colorInputBlur} + onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()} + /> +
+ )} + + {/* // border Styles */} + + {/* {themeSettingKey === "borderColor" && ( +
+ + setBorderColor(e.target.value)} + onBlur={(e) => borderColorInputBlur(e.target.value)} + onKeyUp={(e) => e.nativeEvent.key === "Enter" && borderColorInputBlur(e.currentTarget.value)} + /> +
+ )} */} + {themeSettingKey === "borderRadius" && ( +
+ +
+ +
+ + setRadius(e.target.value)} + onBlur={(e) => radiusInputBlur(e.target.value)} + onKeyUp={(e) => e.nativeEvent.key === "Enter" && radiusInputBlur(e.currentTarget.value)} + /> +
+ )} + {themeSettingKey === "borderStyle" && ( +
+ +
+ +
+ + setBorderStyle(e.target.value)} + onBlur={(e) => borderStyleInputBlur(e.target.value)} + onKeyUp={(e) => e.nativeEvent.key === "Enter" && borderStyleInputBlur(e.currentTarget.value)} + /> +
+ )} + {themeSettingKey === "borderWidth" && ( +
+ +
+ +
+ + setBorderWidth(e.target.value)} + onBlur={(e) => borderWidthInputBlur(e.target.value)} + onKeyUp={(e) => e.nativeEvent.key === "Enter" && borderWidthInputBlur(e.currentTarget.value)} + /> +
+ )} + + {themeSettingKey === "margin" && ( +
+ +
+ +
+ + setMargin(e.target.value)} + onBlur={(e) => marginInputBlur(e.target.value)} + onKeyUp={(e) => + e.nativeEvent.key === "Enter" && + marginInputBlur(e.currentTarget.value) + } + /> +
+ )} + + {themeSettingKey === "padding" && ( +
+ +
+ +
+ + setPadding(e.target.value)} + onBlur={(e) => paddingInputBlur(e.target.value)} + onKeyUp={(e) => + e.nativeEvent.key === "Enter" && + paddingInputBlur(e.currentTarget.value) + } + /> +
+ )} + + {themeSettingKey === "gridColumns" && ( +
+ +
+ +
+ + + setGridColumns(value.toString())} + onAfterChange={(value) => gridColumnsInputBlur(value.toString())} + /> +
+ )} + + + + {themeSettingKey === "fontFamily" && ( +
+ setFontFamily(e.target.value)} + onBlur={(e) => fontFamilyInputBlur(e.target.value)} + onKeyUp={(e) => e.nativeEvent.key === "Enter" && fontFamilyInputBlur(e.currentTarget.value)} + /> +
+ )} + + ); +} diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx index f30a951ea..b77c619ef 100644 --- a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx @@ -186,6 +186,7 @@ const childrenMap = { showHeaderInPublic: withDefault(BoolControl, true), maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"), themeId: valueComp(DEFAULT_THEMEID), + preventAppStylesOverwriting: withDefault(BoolControl, false), customShortcuts: CustomShortcutsComp, disableCollision: valueComp(false), }; @@ -205,6 +206,7 @@ function AppSettingsModal(props: ChildrenInstance) { icon, category, showHeaderInPublic, + preventAppStylesOverwriting, } = props; const THEME_OPTIONS = themeList?.map((theme) => ({ label: theme.name, @@ -300,6 +302,11 @@ function AppSettingsModal(props: ChildrenInstance) { ); }} /> +
+ {preventAppStylesOverwriting.propertyView({ + label: trans("prop.preventOverwriting"), + })} +
{props.customShortcuts.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index c310f9d19..207de58d1 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { Input, Section, sectionNames } from "lowcoder-design"; import { BoolControl } from "comps/controls/boolControl"; import { styleControl } from "comps/controls/styleControl"; @@ -55,7 +55,7 @@ import { autocompleteIconColor, componentSize, } from "./autoCompleteConstants"; - +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>` @@ -76,8 +76,8 @@ const childrenMap = { ...textInputChildren, viewRef: RefControl, allowClear: BoolControl.DEFAULT_TRUE, - style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}), - labelStyle:styleControl(LabelStyle), + style: styleControl(InputFieldStyle , 'style'), + labelStyle: styleControl(LabelStyle , 'labelStyle'), prefixIcon: IconControl, suffixIcon: IconControl, items: jsonControl(convertAutoCompleteData, autoCompleteDate), @@ -90,8 +90,8 @@ const childrenMap = { autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"), componentSize: dropdownControl(componentSize, "small"), valueInItems: booleanExposingStateControl("valueInItems"), - inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth:'1px'}), - animationStyle: styleControl(AnimationStyle), + inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), }; const getValidate = (value: any): "" | "warning" | "error" | undefined => { @@ -104,7 +104,9 @@ const getValidate = (value: any): "" | "warning" | "error" | undefined => { }; let AutoCompleteCompBase = (function () { - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const { items, onEvent, diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx index d97e3fed9..4643e9c5e 100644 --- a/client/packages/lowcoder/src/comps/comps/avatar.tsx +++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx @@ -32,8 +32,9 @@ import { stringExposingStateControl } from "../controls/codeStateControl"; import { BoolControl } from "../controls/boolControl"; import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants"; import { DropdownOptionControl } from "../controls/optionsControl"; -import { ReactElement, useContext } from "react"; +import { ReactElement, useContext, useEffect } from "react"; import { CompNameContext, EditorContext } from "../editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const AvatarWrapper = styled(Avatar) ` background: ${(props) => props.$style.background}; @@ -118,10 +119,10 @@ const sideOptions = [ ] as const; const childrenMap = { - style: styleControl(avatarContainerStyle), - avatarStyle: styleControl(AvatarStyle), - labelStyle: styleControl(avatarLabelStyle), - captionStyle: styleControl(avatarLabelStyle), + style: styleControl(avatarContainerStyle , 'style'), + avatarStyle: styleControl(AvatarStyle , 'avatarStyle'), + labelStyle: styleControl(avatarLabelStyle , 'labelStyle'), + captionStyle: styleControl(avatarLabelStyle , 'captionStyle'), icon: withDefault(IconControl, "/icon:solid/user"), iconSize: withDefault(NumberControl, 40), onEvent: eventHandlerControl(EventOptions), @@ -197,7 +198,10 @@ const AvatarView = (props: RecordConstructorToView) => { }; let AvatarBasicComp = (function () { - return new UICompBuilder(childrenMap, (props) => ) + return new UICompBuilder(childrenMap, (props , dispatch) => { + useMergeCompStyles(props as Record, dispatch); + + return()}) .setPropertyViewFn((children) => ( <>
diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx index 3e2e5d258..5f3a57d88 100644 --- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx +++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx @@ -10,7 +10,7 @@ import { NumberControl, StringControl } from "comps/controls/codeControl"; import { Avatar, Tooltip } from "antd"; import { clickEvent, eventHandlerControl, refreshEvent } from "../controls/eventHandlerControl"; import styled from "styled-components"; -import { useContext, ReactElement } from "react"; +import { useContext, ReactElement, useEffect } from "react"; import { MultiCompBuilder, stateComp, withDefault } from "../generators"; import { EditorContext } from "comps/editorState"; import { IconControl } from "../controls/iconControl"; @@ -19,6 +19,7 @@ import { optionsControl } from "../controls/optionsControl"; import { BoolControl } from "../controls/boolControl"; import { dropdownControl } from "../controls/dropdownControl"; import { JSONObject } from "util/jsonTypes"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const MacaroneList = [ '#fde68a', @@ -86,8 +87,8 @@ export const alignOptions = [ ] as const; const childrenMap = { - avatar: styleControl(avatarGroupStyle), - style: styleControl(avatarContainerStyle), + avatar: styleControl(avatarGroupStyle , 'avatar'), + style: styleControl(avatarContainerStyle , 'style'), maxCount: withDefault(NumberControl, 3), avatarSize: withDefault(NumberControl, 40), alignment: dropdownControl(alignOptions, "center"), @@ -142,7 +143,11 @@ const AvatarGroupView = (props: RecordConstructorToView & { }; let AvatarGroupBasicComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => ) + return new UICompBuilder(childrenMap, (props, dispatch) =>{ + useMergeCompStyles(props as Record, dispatch); + + return( +)}) .setPropertyViewFn((children) => ( <> {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx index 044b0be05..9807f27e7 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx @@ -24,9 +24,10 @@ import { } from "./buttonCompConstants"; import { RefControl } from "comps/controls/refControl"; -import React, { useContext } from "react"; +import React, { useContext, useEffect } from "react"; import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants"; import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const FormLabel = styled(CommonBlueLabel)` font-size: 13px; @@ -131,35 +132,39 @@ const ButtonTmpComp = (function () { prefixIcon: IconControl, suffixIcon: IconControl, style: ButtonStyleControl, - animationStyle:styleControl(AnimationStyle), + animationStyle: styleControl(AnimationStyle, 'animationStyle'), viewRef: RefControl, }; - return new UICompBuilder(childrenMap, (props) => ( - - - {(editorState) => ( - - isDefault(props.type) ? props.onEvent("click") : submitForm(editorState, props.form) - } - > - {props.prefixIcon && {props.prefixIcon}} - { - props.text || (props.prefixIcon || props.suffixIcon ? undefined : " ") // Avoid button disappearing - } - {props.suffixIcon && {props.suffixIcon}} - - )} - - - )) + return new UICompBuilder(childrenMap, (props , dispatch) => { + useMergeCompStyles(props as Record, dispatch); + + return( + + + {(editorState) => ( + + isDefault(props.type) ? props.onEvent("click") : submitForm(editorState, props.form) + } + > + {props.prefixIcon && {props.prefixIcon}} + { + props.text || (props.prefixIcon || props.suffixIcon ? undefined : " ") // Avoid button disappearing + } + {props.suffixIcon && {props.suffixIcon}} + + )} + + + ); + }) .setPropertyViewFn((children) => ( <>
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx index c509aeaa9..1fe2f3270 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx @@ -97,7 +97,7 @@ function fixOldData(oldData: any) { } return oldData; } -const ButtonTmpStyleControl = styleControl(ButtonStyle); +const ButtonTmpStyleControl = styleControl(ButtonStyle, 'style'); export const ButtonStyleControl = migrateOldData(ButtonTmpStyleControl, fixOldData); export const buttonRefMethods = refMethods([ diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx index 6ef87e091..dc6d5e51d 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx @@ -9,7 +9,7 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; import { Section, sectionNames } from "lowcoder-design"; import { trans } from "i18n"; -import React, { ReactElement, useContext } from "react"; +import React, { ReactElement, useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; import styled from "styled-components"; import { ButtonEventHandlerControl } from "../../controls/eventHandlerControl"; @@ -22,7 +22,7 @@ import { getButtonStyle, } from "./buttonCompConstants"; import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; - +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const StyledDropdownButton = styled(DropdownButton)` width: 100%; @@ -86,9 +86,11 @@ const DropdownTmpComp = (function () { options: DropdownOptionControl, disabled: BoolCodeControl, onEvent: ButtonEventHandlerControl, - style: styleControl(DropdownStyle), + style: styleControl(DropdownStyle, 'style'), }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const hasIcon = props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1; const items = props.options diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx index 1797dd070..1445edef1 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx @@ -16,6 +16,8 @@ import { IconControl } from "comps/controls/iconControl"; import styled from "styled-components"; import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl"; import { manualOptionsControl } from "comps/controls/optionsControl"; +import { useContext, useEffect } from "react"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const StyledFloatButton = styled(FloatButton)<{ $animationStyle: AnimationStyleType; @@ -83,8 +85,8 @@ const childrenMap = { image: StringControl, icon: withDefault(IconControl, '/icon:antd/questioncircleoutlined'), badgeStyle: styleControl(BadgeStyle), - style: styleControl(FloatButtonStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(FloatButtonStyle , 'style'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), buttons: manualOptionsControl(buttonGroupOption, { initOptions: [ { id: 0, label: trans("optionsControl.optionI", { i: '1' }), icon: "/icon:antd/filetextoutlined", badge: '1' }, @@ -131,9 +133,11 @@ const FloatButtonView = (props: RecordConstructorToView) => }; let FloatButtonBasicComp = (function () { - return new UICompBuilder(childrenMap, (props) => ( - - )) + return new UICompBuilder(childrenMap, (props , dispatch) => { + useMergeCompStyles(props, dispatch); + return( + + )}) .setPropertyViewFn((children) => ( <>
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index bd3765681..95ec1a5df 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx @@ -21,7 +21,8 @@ import { hasIcon } from "comps/utils"; import { RefControl } from "comps/controls/refControl"; import { EditorContext } from "comps/editorState"; -import React, { useContext } from "react"; +import React, { useContext, useEffect } from "react"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Link = styled(Button)<{ $style: LinkStyleType; @@ -85,13 +86,16 @@ const LinkTmpComp = (function () { onEvent: ButtonEventHandlerControl, disabled: BoolCodeControl, loading: BoolCodeControl, - style: migrateOldData(styleControl(LinkStyle), fixOldData), - animationStyle:styleControl(AnimationStyle), + style: migrateOldData(styleControl(LinkStyle, 'style'), fixOldData), + animationStyle: styleControl(AnimationStyle, 'animationStyle'), prefixIcon: IconControl, suffixIcon: IconControl, viewRef: RefControl, }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + + // chrome86 bug: button children should not contain only empty span const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon); return ( diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx index 4f497fb68..97c5124f5 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx @@ -24,6 +24,7 @@ import { BoolControl } from "comps/controls/boolControl"; import type { ItemType } from "antd/es/menu/hooks/useItems"; import { RefControl } from "comps/controls/refControl"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Error = styled.div` color: #f5222d; @@ -70,10 +71,12 @@ const ScannerTmpComp = (function () { maskClosable: withDefault(BoolControl, true), onEvent: ScannerEventHandlerControl, disabled: BoolCodeControl, - style: styleControl(DropdownStyle), + style: styleControl(DropdownStyle, 'style'), viewRef: RefControl, }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const [showModal, setShowModal] = useState(false); const [errMessage, setErrMessage] = useState(""); const [videoConstraints, setVideoConstraints] = useState({ diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index e8238e4c2..c8df0e3e6 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -23,8 +23,9 @@ import { import { styleControl } from "comps/controls/styleControl"; import { BoolControl } from "comps/controls/boolControl"; import { RefControl } from "comps/controls/refControl"; -import React, { useContext } from "react"; +import React, { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const IconWrapper = styled.div` display: flex; @@ -60,15 +61,17 @@ const ToggleTmpComp = (function () { falseIcon: withDefault(IconControl, "/icon:solid/AngleDown"), iconPosition: LeftRightControl, alignment: AlignWithStretchControl, - style: styleControl(ToggleButtonStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(ToggleButtonStyle , 'style'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), showBorder: withDefault(BoolControl, true), viewRef: RefControl, }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { const text = props.showText ? (props.value.value ? props.trueText : props.falseText) || undefined : undefined; + useMergeCompStyles(props as Record, dispatch); + return ( { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const containerRef = useRef(null); const [height, setHeight] = useState(0); const onResize = () => { diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx index 2302d31e5..4db9ab4cf 100644 --- a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx @@ -35,11 +35,12 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances" import { BoolControl } from "comps/controls/boolControl"; import { BoolCodeControl, NumberControl, StringControl } from "comps/controls/codeControl"; -import { useContext } from "react"; +import { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; import { DisabledContext } from "comps/generators/uiCompBuilder"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const ContainWrapper = styled.div<{ $style: ContainerStyleType & { @@ -95,8 +96,8 @@ const childrenMap = { rowGap: withDefault(StringControl, "20px"), templateColumns: withDefault(StringControl, "1fr 1fr"), columnGap: withDefault(StringControl, "20px"), - style: withDefault(styleControl(ContainerStyle), {}), - columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle),{borderWidth:'1px'}) + style: styleControl(ContainerStyle, 'style'), + columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle') }; type ViewProps = RecordConstructorToView; @@ -178,6 +179,8 @@ const ColumnLayout = (props: ColumnLayoutProps) => { export const ResponsiveLayoutBaseComp = (function () { return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return ( ); diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx index d927b6795..2c37ba6dd 100644 --- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx @@ -66,6 +66,10 @@ import dayjs from "dayjs"; // import "dayjs/locale/zh-cn"; import { getInitialsAndColorCode } from "util/stringUtils"; import { default as CloseOutlined } from "@ant-design/icons/CloseOutlined"; + +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; + + dayjs.extend(relativeTime); // dayjs.locale("zh-cn"); @@ -100,8 +104,8 @@ const childrenMap = { "#": ["123", "456", "789"], }), onEvent: eventHandlerControl(EventOptions), - style: styleControl(CommentStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(CommentStyle , 'style'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), commentList: jsonValueExposingStateControl("commentList", []), deletedItem: jsonValueExposingStateControl("deletedItem", []), submitedItem: jsonValueExposingStateControl("submitedItem", []), @@ -370,9 +374,12 @@ const CommentCompBase = ( }; let CommentBasicComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => ( + return new UICompBuilder(childrenMap, (props, dispatch) =>{ + useMergeCompStyles(props as Record, dispatch); + + return ( - )) + )}) .setPropertyViewFn((children) => ( <>
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index 7c8bea425..5791d09fa 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -20,6 +20,7 @@ import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refresh import { optionsControl } from "comps/controls/optionsControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { styleControl } from "comps/controls/styleControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const { Meta } = Card; const Wrapper = styled.div<{ @@ -186,13 +187,15 @@ export const ContainerBaseComp = (function () { actionOptions: ActionOptionControl, onEvent: CardEventHandlerControl, - style: styleControl(CardStyle), - headerStyle: styleControl(CardHeaderStyle), - bodyStyle: styleControl(CardHeaderStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(CardStyle , 'style'), + headerStyle: styleControl(CardHeaderStyle , 'headerStyle'), + bodyStyle: styleControl(CardHeaderStyle , 'bodyStyle'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), }; return new ContainerCompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + props.container.showHeader = false; // 注入容器参数 props.container.style = Object.assign(props.container.style, { diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx index 3c316e38c..63d074053 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -16,8 +16,8 @@ import { BoolCodeControl } from "comps/controls/codeControl"; import { DisabledContext } from "comps/generators/uiCompBuilder"; import React, { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants"; +import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; export const ContainerBaseComp = (function () { const childrenMap = { diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx index 3d9d45f93..39d71c630 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx @@ -60,7 +60,7 @@ import { ExternalEditorContext } from "util/context/ExternalEditorContext"; import { selectCompModifierKeyPressed } from "util/keyUtils"; import { defaultLayout, GridItemComp, GridItemDataType } from "../gridItemComp"; import { ThemeContext } from "comps/utils/themeContext"; -import { defaultTheme } from "comps/controls/styleControlConstants"; +import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; const childrenMap = { layout: valueComp({}), @@ -293,9 +293,10 @@ const getExtraLayout = ( const autoHeight = item.autoHeight; const name = item.name; const compType = item.compType; + const comp = item.comp; const isSelected = selectedCompNames.has(name) || dragSelectedNames?.has?.(name); const hidden = item.hidden; - return { autoHeight, isSelected, name, hidden, compType }; + return { autoHeight, isSelected, name, hidden, compType, comp }; }); }; diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx index 5dce4e4d5..71bb7b83d 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx @@ -6,8 +6,8 @@ import { CompSelectionWrapper } from "layout/compSelectionWrapper"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; import { ThemeContext } from "comps/utils/themeContext"; -import { defaultTheme } from "comps/controls/styleControlConstants"; import styled from "styled-components"; +import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; const FlowContainerWrapper = styled.div<{ $bgColor: string; $maxWidth?: number; $minHeight: string }>` background-color: ${(props) => props.$bgColor}; diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx index ed3bc954a..369a5ecfe 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx @@ -18,18 +18,20 @@ import { ContainerCompBuilder, } from "../pageLayoutComp/pageLayoutCompBuilder"; import { PageLayout } from "../pageLayoutComp/pageLayout"; -import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants"; +import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; export const ContainerBaseComp = (function () { const childrenMap = { disabled: BoolCodeControl, - animationStyle: styleControl(AnimationStyle), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), }; return new ContainerCompBuilder(childrenMap, (props, dispatch) => { const [siderCollapsed, setSiderCollapsed] = useState(false); + useMergeCompStyles(props as Record, dispatch); return ( diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx index 23858d1a2..362b1d1eb 100644 --- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx @@ -14,6 +14,7 @@ import { trans } from "i18n"; import { EditorContext } from "comps/editorState"; import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; // TODO: eventually to embedd in container so we have styling? // TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc) @@ -219,11 +220,13 @@ function InnerCustomComponent(props: IProps) { const childrenMap = { model: jsonObjectStateControl(defaultModel), code: withDefault(StringControl, defaultCode), - style:styleControl(CustomStyle), - animationStyle:styleControl(AnimationStyle), + style: styleControl(CustomStyle , 'style'), + animationStyle:styleControl(AnimationStyle , 'animationStyle'), }; const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const { code, model } = props; return ( ['accent', 'validate'].includes(style.name) === false)), + style: styleControl(InputFieldStyle, 'style'), + animationStyle: styleControl(AnimationStyle, 'animationStyle'), + labelStyle: styleControl( + LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false), + 'labelStyle', + ), suffixIcon: withDefault(IconControl, "/icon:regular/calendar"), ...validationChildren, viewRef: RefControl, - inputFieldStyle: withDefault(styleControl(DateTimeStyle), defaultStyle), + inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'), }; type CommonChildrenType = RecordConstructorToComp; @@ -165,7 +168,9 @@ export type DateCompViewProps = Pick< placeholder?: string | [string, string]; }; -export const datePickerControl = new UICompBuilder(childrenMap, (props) => { +export const datePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + let time = null; if (props.value.value !== '') { time = dayjs(props.value.value, DateParser); @@ -284,7 +289,9 @@ export const dateRangeControl = (function () { ...commonChildren, }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + let start = null; let end = null; if (props.start.value !== '') { diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx index e2c36b659..28875e798 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx @@ -25,7 +25,7 @@ import { } from "../../generators/withExposing"; import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; import { styleControl } from "comps/controls/styleControl"; -import { DateTimeStyle, DateTimeStyleType } from "comps/controls/styleControlConstants"; +import { AnimationStyle, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; import { withMethodExposing } from "../../generators/withMethodExposing"; import { disabledPropertyView, @@ -40,7 +40,7 @@ import { } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { TIME_FORMAT, TimeParser } from "util/dateTimeUtils"; -import React, { ReactNode, useContext } from "react"; +import React, { ReactNode, useContext, useEffect } from "react"; import { IconControl } from "comps/controls/iconControl"; import { hasIcon } from "comps/utils"; import { Section, sectionNames } from "components/Section"; @@ -52,6 +52,7 @@ import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interfac import { TimePickerProps } from "antd/es/time-picker"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const EventOptions = [changeEvent, focusEvent, blurEvent] as const; @@ -73,7 +74,13 @@ const commonChildren = { hourStep: RangeControl.closed(1, 24, 1), minuteStep: RangeControl.closed(1, 60, 1), secondStep: RangeControl.closed(1, 60, 1), - style: withDefault(styleControl(DateTimeStyle),{background:'transparent',borderWidth:'1px'}), + style: styleControl(InputFieldStyle, 'style'), + animationStyle: styleControl(AnimationStyle, 'animationStyle'), + labelStyle: styleControl( + LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false), + 'labelStyle', + ), + inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'), suffixIcon: withDefault(IconControl, "/icon:regular/clock"), viewRef: RefControl, ...validationChildren, @@ -136,7 +143,9 @@ export type TimeCompViewProps = Pick< placeholder?: string | [string, string]; }; -export const timePickerControl = new UICompBuilder(childrenMap, (props) => { +export const timePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + let time = null; if(props.value.value !== '') { time = dayjs(props.value.value, TimeParser); @@ -145,10 +154,13 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => { return props.label({ required: props.required, style: props.style, + labelStyle: props.labelStyle, + inputFieldStyle:props.inputFieldStyle, + animationStyle:props.animationStyle, children: ( disabledTime(props.minTime, props.maxTime)} @@ -215,9 +227,20 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => { )} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( -
- {children.style.getPropertyView()} -
+ <> +
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+
+ {children.inputFieldStyle.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
+ )} )) @@ -231,7 +254,9 @@ export const timeRangeControl = (function () { ...commonChildren, }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + let start = null; if(props.start.value !== '') { start = dayjs(props.start.value, TimeParser); @@ -244,7 +269,7 @@ export const timeRangeControl = (function () { const children = ( - {children.style.getPropertyView()} -
+ <> +
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+
+ {children.inputFieldStyle.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
+ )} )) diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx index a44895642..005edaefc 100644 --- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx @@ -42,6 +42,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances" import React, { useContext } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const FileSizeControl = codeControl((value) => { if (typeof value === "number") { @@ -100,8 +101,8 @@ const commonChildren = { showUploadList: BoolControl.DEFAULT_TRUE, disabled: BoolCodeControl, onEvent: eventHandlerControl(EventOptions), - style: styleControl(FileStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(FileStyle , 'style'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), parseFiles: BoolPureControl, parsedValue: stateComp>([]), prefixIcon: withDefault(IconControl, "/icon:solid/arrow-up-from-bracket"), @@ -379,9 +380,11 @@ const childrenMap = { ...formDataChildren, }; -let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => ( - -)) +let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props, dispatch); + return( + + )}) .setPropertyViewFn((children) => ( <>
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx index 5f4ada67a..b04238f1b 100644 --- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx @@ -1,7 +1,7 @@ import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, AnimationStyleType, FileViewerStyle, FileViewerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { isEmpty } from "lodash"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { DocumentViewer } from "react-documents"; import styled, { css } from "styled-components"; import { Section, sectionNames } from "lowcoder-design"; @@ -13,6 +13,7 @@ import { trans } from "i18n"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const getStyle = (style: FileViewerStyleType) => { return css` @@ -67,10 +68,12 @@ const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,an let FileViewerBasicComp = (function () { const childrenMap = { src: StringControl, - style: styleControl(FileViewerStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(FileViewerStyle , 'style'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + if (isEmpty(props.src)) { return ( ( (type) => { const compInfo = parseCompType(type); - if (compInfo.isRemote) { return remoteComp(compInfo); } diff --git a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx index 1a15ba9d3..35f56dca4 100644 --- a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx +++ b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx @@ -15,11 +15,11 @@ import { ExternalEditorContext } from "util/context/ExternalEditorContext"; import { AppTypeEnum } from "constants/applicationConstants"; import { EditorContainerPadding, TopHeaderHeight } from "constants/style"; import { ThemeContext } from "comps/utils/themeContext"; -import { defaultTheme } from "comps/controls/styleControlConstants"; import { checkIsMobile } from "util/commonUtils"; import { CanvasContainerID } from "constants/domLocators"; import { CNRootContainer } from "constants/styleSelectors"; import { ScrollBar } from "lowcoder-design"; +import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; // min-height: 100vh; diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx index d0ea40cf5..63b8855a2 100644 --- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx @@ -30,6 +30,7 @@ import { } from "../controls/eventHandlerControl"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Container = styled.div<{ $style: IconStyleType | undefined; @@ -62,8 +63,8 @@ ${props=>props.$animationStyle} const EventOptions = [clickEvent] as const; const childrenMap = { - style: styleControl(IconStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(IconStyle,'style'), + animationStyle: styleControl(AnimationStyle,'animationStyle'), icon: withDefault(IconControl, "/icon:antd/homefilled"), autoHeight: withDefault(AutoHeightControl, "auto"), iconSize: withDefault(NumberControl, 20), @@ -112,7 +113,10 @@ const IconView = (props: RecordConstructorToView) => { }; let IconBasicComp = (function () { - return new UICompBuilder(childrenMap, (props) => ) + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + + return()}) .setPropertyViewFn((children) => ( <>
diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx index db65a1057..187edd993 100644 --- a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx @@ -12,6 +12,7 @@ import log from "loglevel"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Wrapper = styled.div<{$style: IframeStyleType; $animationStyle:AnimationStyleType}>` width: 100%; @@ -45,10 +46,12 @@ let IFrameCompBase = new UICompBuilder( allowMicrophone: BoolControl, allowCamera: BoolControl, allowPopup: BoolControl, - style: styleControl(IframeStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(IframeStyle , 'style'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), }, - (props) => { + (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const sandbox = ["allow-scripts", "allow-same-origin"]; props.allowSubmitForm && sandbox.push("allow-forms"); props.allowDownload && sandbox.push("allow-downloads"); diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx index 4b571764c..e4a8b8b69 100644 --- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx @@ -34,6 +34,7 @@ import { DEFAULT_IMG_URL } from "util/stringUtils"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; import { StringControl } from "../controls/codeControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>` height: 100%; @@ -166,14 +167,16 @@ const ContainerImg = (props: RecordConstructorToView) => { const childrenMap = { src: withDefault(StringStateControl, "https://temp.im/350x400"), onEvent: eventHandlerControl(EventOptions), - style: styleControl(ImageStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(ImageStyle , 'style'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), autoHeight: withDefault(AutoHeightControl, "fixed"), supportPreview: BoolControl, restrictPaddingOnRotation:withDefault(StringControl, 'image') }; -let ImageBasicComp = new UICompBuilder(childrenMap, (props) => { +let ImageBasicComp = new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return ; }) .setPropertyViewFn((children) => { diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 9583c449a..b6f3c4a26 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -20,6 +20,7 @@ import { } from "base/codeEditor/codeMirror"; import { useExtensions } from "base/codeEditor/extensions"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; /** * JsonEditor Comp @@ -65,14 +66,15 @@ const childrenMap = { value: jsonValueExposingStateControl("value", defaultData), onEvent: ChangeEventHandlerControl, label: withDefault(LabelControl, { position: "column" }), - style: styleControl(JsonEditorStyle), - animationStyle: styleControl(AnimationStyle), - + style: styleControl(JsonEditorStyle, 'style'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), ...formDataChildren, }; let JsonEditorTmpComp = (function () { - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const wrapperRef = useRef(null); const view = useRef(null); const editContent = useRef(); diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index 05e95eb5b..ceb6adff2 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -10,9 +10,10 @@ import { ArrayOrJSONObjectControl, NumberControl } from "comps/controls/codeCont import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { EditorContext } from "comps/editorState"; -import { useContext } from "react"; -import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; +import { useContext, useEffect } from "react"; import { AnimationStyle, AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; +import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; /** * JsonExplorer Comp @@ -55,23 +56,27 @@ let JsonExplorerTmpComp = (function () { indent: withDefault(NumberControl, 4), expandToggle: BoolControl.DEFAULT_TRUE, theme: dropdownControl(themeOptions, 'shapeshifter:inverted'), - animationStyle:styleControl(AnimationStyle), + animationStyle:styleControl(AnimationStyle, 'animationStyle'), }; - return new UICompBuilder(childrenMap, (props) => ( - - - - )) + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + + return ( + + + + ) + }) .setPropertyViewFn((children) => { return ( <> diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx index 078228642..6e35d7716 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx @@ -9,7 +9,7 @@ import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, LottieStyle } from "comps/controls/styleControlConstants"; import { trans } from "i18n"; import { Section, sectionNames } from "lowcoder-design"; -import { useContext, lazy } from "react"; +import { useContext, lazy, useEffect } from "react"; import { UICompBuilder, withDefault } from "../../generators"; import { NameConfig, @@ -18,6 +18,7 @@ import { } from "../../generators/withExposing"; import { defaultLottie } from "./jsonConstants"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Player = lazy( () => import('@lottiefiles/react-lottie-player') @@ -93,13 +94,15 @@ let JsonLottieTmpComp = (function () { speed: dropdownControl(speedOptions, "1"), width: withDefault(NumberControl, 100), height: withDefault(NumberControl, 100), - container: styleControl(LottieStyle), - animationStyle: styleControl(AnimationStyle), + container: styleControl(LottieStyle , 'container'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), animationStart: dropdownControl(animationStartOptions, "auto"), loop: dropdownControl(loopOptions, "single"), keepLastFrame: BoolControl.DEFAULT_TRUE, }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return (
{ + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + // rjsf 4.20 supports ui:submitButtonOptions, but if the button is customized, it will not take effect. Here we implement it ourselves const buttonOptions = props?.uiSchema?.[ "ui:submitButtonOptions" diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx index 25b93966b..e76ef8c0b 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -20,7 +20,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { dropdownControl } from "@lowcoder-ee/comps/controls/dropdownControl"; import { DataOption, DataOptionType, ModeOptions, menuItemStyleOptions, mobileNavJsonMenuItems } from "./navLayoutConstants"; import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; -import { NavLayoutItemActiveStyle, NavLayoutItemActiveStyleType, NavLayoutItemHoverStyle, NavLayoutItemHoverStyleType, NavLayoutItemStyle, NavLayoutItemStyleType, NavLayoutStyle, NavLayoutStyleType, defaultTheme } from "@lowcoder-ee/comps/controls/styleControlConstants"; +import { NavLayoutItemActiveStyle, NavLayoutItemActiveStyleType, NavLayoutItemHoverStyle, NavLayoutItemHoverStyleType, NavLayoutItemStyle, NavLayoutItemStyleType, NavLayoutStyle, NavLayoutStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; import Segmented from "antd/es/segmented"; import { controlItem } from "components/control"; import { check } from "@lowcoder-ee/util/convertUtils"; @@ -31,7 +31,8 @@ import { AlignCenter } from "lowcoder-design"; import { AlignLeft } from "lowcoder-design"; import { AlignRight } from "lowcoder-design"; import { LayoutActionComp } from "./layoutActionComp"; -import { clickEvent, eventHandlerControl } from "@lowcoder-ee/index.sdk"; +import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; +import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl"; const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar")); const TabBarItem = React.lazy(() => diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx index 9000cf528..c40870c1f 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx @@ -40,7 +40,7 @@ import { jsonMenuItems, menuItemStyleOptions } from "./navLayoutConstants"; -import { clickEvent, eventHandlerControl } from "@lowcoder-ee/index.sdk"; +import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl"; const { Header } = Layout; diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx index d2341d262..e4ce05d00 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx @@ -4,7 +4,7 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; import _ from "lodash"; import { ConstructorToView, deferAction } from "lowcoder-core"; import { HintPlaceHolder, ScrollBar, pageItemRender } from "lowcoder-design"; -import { RefObject, useContext, createContext, useMemo, useRef } from "react"; +import { RefObject, useContext, createContext, useMemo, useRef, useEffect } from "react"; import ReactResizeDetector from "react-resize-detector"; import styled from "styled-components"; import { checkIsMobile } from "util/commonUtils"; @@ -18,6 +18,8 @@ import { import { ContextContainerComp } from "./contextContainerComp"; import { ListViewImplComp } from "./listViewComp"; import { getCurrentItemParams, getData } from "./listViewUtils"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; +import { childrenToProps } from "@lowcoder-ee/comps/generators/multi"; import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animationStyle:AnimationStyleType }>` @@ -274,6 +276,11 @@ export function ListView(props: Props) { const maxWidth = editorState.getAppSettings().maxWidth; const isMobile = checkIsMobile(maxWidth); const paddingWidth = isMobile ? "4px" : "16px"; + + const childrenProps = childrenToProps(comp.children); + + useMergeCompStyles(childrenProps, comp.dispatch); + // log.debug("renders: ", renders); return ( diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx index 055e1a113..b018bcbdd 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx @@ -52,8 +52,8 @@ const childrenMap = { scrollbars: withDefault(BoolControl, false), showBorder: BoolControl, pagination: withDefault(PaginationControl, { pageSize: "6" }), - style: styleControl(ListViewStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(ListViewStyle, 'style'), + animationStyle: styleControl(AnimationStyle, 'animationStyle'), horizontal: withDefault(BoolControl, false), minHorizontalWidth: withDefault(RadiusControl, '100px'), }; diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx index 9ed308493..eb725ff44 100644 --- a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx @@ -13,8 +13,9 @@ import { withDefault } from "../../generators/simpleGenerators"; import { trans } from "i18n"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { mediaCommonChildren, mediaMethods } from "./mediaUtils"; -import { useContext } from "react"; +import { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Container = styled.div<{ $style: any; $animationStyle: AnimationStyleType }>` ${props => props.$style}; @@ -66,15 +67,17 @@ const ContainerAudio = (props: RecordConstructorToView) => { const childrenMap = { src: withDefault(StringStateControl, trans("audio.defaultSrcUrl")), onEvent: eventHandlerControl(EventOptions), - style: styleControl(AudioStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(AudioStyle , 'style'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), autoPlay: BoolControl, loop: BoolControl, ...mediaCommonChildren, }; let AudioBasicComp = (function () { - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return ; }) .setPropertyViewFn((children) => { diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx index cbe6cf749..80b1218d1 100644 --- a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx @@ -16,6 +16,7 @@ import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerCon import { jsonObjectExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { ArrayOrJSONObjectControl } from "comps/controls/codeControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; export function getStyle(style: ColorPickerStyleType) { return css` @@ -60,7 +61,7 @@ export const colorPickerEvent = eventHandlerControl([ const childrenMap = { ...textInputChildren, value: stringExposingStateControl('value', '#3377ff'), - style: styleControl(ColorPickerStyle), + style: styleControl(ColorPickerStyle , 'style'), color: jsonObjectExposingStateControl('color', {}), trigger: dropdownControl(colorPickerTriggerOption, 'click'), disabledAlpha: BoolControl, @@ -69,7 +70,9 @@ const childrenMap = { presets: withDefault(ArrayOrJSONObjectControl, JSON.stringify(presets, null, 2)), }; -export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => { +export const ColorPickerComp = new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return props.label({ children: ( { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return ; }) .setPropertyViewFn((children) => { @@ -176,9 +179,9 @@ let VideoBasicComp = (function () {
{children.style.getPropertyView()}
-
+ {/*
{children.animationStyle.getPropertyView()} -
+
*/} )} diff --git a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx index f89cf5cf3..e3dfac6ad 100644 --- a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx @@ -1,4 +1,3 @@ -import { defaultTheme } from "comps/controls/styleControlConstants"; import { ThemeContext } from "comps/utils/themeContext"; import { BorderColor } from "constants/style"; import { HintPlaceHolder } from "lowcoder-design"; @@ -13,6 +12,7 @@ import { gridItemCompToGridItems, InnerGrid, } from "../containerComp/containerView"; +import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; const StyledInnerGrid = styled(InnerGrid)` border: ${(props) => (!props.$bordered ? "0px" : `1px solid ${BorderColor}`)}; diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index 44a97bd02..ee736cfd2 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -54,6 +54,7 @@ import { useContext } from "react"; import { EditorContext } from "comps/editorState"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const getStyle = (style: InputLikeStyleType) => { return css` @@ -259,13 +260,12 @@ const childrenMap = { allowNull: BoolControl, onEvent: InputEventHandlerControl, viewRef: RefControl, - style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , - labelStyle:styleControl(LabelStyle), + style: styleControl(InputFieldStyle , 'style') , + labelStyle: styleControl(LabelStyle , 'labelStyle'), prefixText : stringExposingStateControl("defaultValue"), - animationStyle: styleControl(AnimationStyle), - + animationStyle: styleControl(AnimationStyle , 'animationStyle'), prefixIcon: IconControl, - inputFieldStyle: withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}) , + inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), // validation required: BoolControl, min: UndefinedNumberControl, @@ -381,7 +381,9 @@ const CustomInputNumber = (props: RecordConstructorToView) = }; let NumberInputTmpComp = (function () { - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return props.label({ required: props.required, children: , diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx index a73b39a47..142290acd 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx @@ -7,6 +7,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants"; import { hasIcon } from "comps/utils"; import { BoolControl } from "comps/controls/boolControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const SliderBasicComp = (function () { /** @@ -18,7 +19,9 @@ const SliderBasicComp = (function () { vertical: BoolControl, ...formDataChildren, }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return props.label({ style: props.style, labelStyle: props.labelStyle, diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx index 41bc79f6b..90e827919 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx @@ -71,12 +71,15 @@ export const SliderChildren = { label: LabelControl, disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, - style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , - labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)), + style: styleControl(InputFieldStyle, 'style'), + labelStyle: styleControl( + LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false), + 'labelStyle', + ), prefixIcon: IconControl, suffixIcon: IconControl, - inputFieldStyle:styleControl(SliderStyle), - animationStyle:styleControl(AnimationStyle) + inputFieldStyle: styleControl(SliderStyle, 'inputFieldStyle'), + animationStyle: styleControl(AnimationStyle, 'animationStyle') }; export const SliderPropertyView = ( diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx index dbe0e6111..3df89b524 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx @@ -28,6 +28,7 @@ import { ContainerBodyChildComp } from "./containerBodyChildComp"; import { trans } from "i18n"; import { ControlNode } from "lowcoder-design"; import { StringControl } from "comps/controls/codeControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const childrenMap = { header: SimpleContainerComp, @@ -51,16 +52,18 @@ const childrenMap = { autoHeight: AutoHeightControl, siderScrollbars: withDefault(BoolControl, false), contentScrollbars: withDefault(BoolControl, false), - style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}), - headerStyle: styleControl(ContainerHeaderStyle), - siderStyle: styleControl(ContainerSiderStyle), - bodyStyle: styleControl(ContainerBodyStyle), - footerStyle: styleControl(ContainerFooterStyle), + style: styleControl(ContainerStyle , 'style'), + headerStyle: styleControl(ContainerHeaderStyle , 'headerStyle'), + siderStyle: styleControl(ContainerSiderStyle , 'siderStyle'), + bodyStyle: styleControl(ContainerBodyStyle , 'bodyStyle'), + footerStyle: styleControl(ContainerFooterStyle , 'footerStyle'), }; // Compatible with old style data 2022-8-15 const layoutBaseComp = migrateOldData( new MultiCompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props, dispatch); + return { ...props, dispatch }; }).build(), fixOldStyleData diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx index a001c7bd2..207feb6c5 100644 --- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx @@ -9,8 +9,9 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; -import { useContext } from "react"; +import { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; // TODO: after Update of ANTd, introduce Size attribute to ProgressCircle @@ -69,10 +70,12 @@ let ProgressCircleTmpComp = (function () { const childrenMap = { value: numberExposingStateControl("value", 60), // borderRadius property hidden as it's not valid for progress circle - style: styleControl(CircleProgressStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(CircleProgressStyle, 'style'), + animationStyle: styleControl(AnimationStyle, 'animationStyle'), }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return ( { return css` @@ -53,10 +54,12 @@ const ProgressBasicComp = (function () { const childrenMap = { value: numberExposingStateControl('value', 60), showInfo: BoolControl, - style: styleControl(ProgressStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(ProgressStyle, 'style'), + animationStyle: styleControl(AnimationStyle, 'animationStyle'), }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return ( ) => { }; let QRCodeBasicComp = (function () { - return new UICompBuilder(childrenMap, (props) => ) + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + + return( )}) .setPropertyViewFn((children) => ( <>
diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx index 793cf67c2..75a4e2b84 100644 --- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx @@ -17,6 +17,8 @@ import { trans } from "i18n"; import { useContext, useEffect, useRef } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; + const EventOptions = [changeEvent] as const; @@ -43,20 +45,22 @@ const RatingBasicComp = (function () { allowHalf: BoolControl, disabled: BoolCodeControl, onEvent: eventHandlerControl(EventOptions), - style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , - animationStyle: styleControl(AnimationStyle), + style: styleControl(InputFieldStyle, 'style') , + animationStyle: styleControl(AnimationStyle, 'animationStyle'), labelStyle: styleControl( LabelStyle.filter( (style) => ['accent', 'validate'].includes(style.name) === false - ) + ), + 'labelStyle', ), - inputFieldStyle: migrateOldData(styleControl(RatingStyle), fixOldData), + inputFieldStyle: migrateOldData(styleControl(RatingStyle, 'inputFieldStyle'), fixOldData), ...formDataChildren, }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { const defaultValue = { ...props.defaultValue }.value; const value = { ...props.value }.value; - const changeRef = useRef(false) + const changeRef = useRef(false); + useMergeCompStyles(props as Record, dispatch); useEffect(() => { props.value.onChange(defaultValue); diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx index fe3509aba..451f47365 100644 --- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx @@ -21,7 +21,7 @@ import { NameGenerator } from "comps/utils"; import { Section, controlItem, sectionNames } from "lowcoder-design"; import { HintPlaceHolder } from "lowcoder-design"; import _ from "lodash"; -import React from "react"; +import React, { useEffect } from "react"; import styled from "styled-components"; import { IContainer } from "../containerBase/iContainer"; import { SimpleContainerComp } from "../containerBase/simpleContainerComp"; @@ -42,6 +42,7 @@ import { EditorContext } from "comps/editorState"; import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; import { DisabledContext } from "comps/generators/uiCompBuilder"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const RowWrapper = styled(Row)<{ $style: ResponsiveLayoutRowStyleType; @@ -91,9 +92,9 @@ const childrenMap = { autoHeight: AutoHeightControl, rowBreak: withDefault(BoolControl, false), matchColumnsHeight: withDefault(BoolControl, true), - style: withDefault(styleControl(ResponsiveLayoutRowStyle), {}), - columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle), {}), - animationStyle:styleControl(AnimationStyle), + style: styleControl(ResponsiveLayoutRowStyle , 'style'), + columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle'), + animationStyle:styleControl(AnimationStyle , 'animationStyle'), columnPerRowLG: withDefault(NumberControl, 4), columnPerRowMD: withDefault(NumberControl, 2), columnPerRowSM: withDefault(NumberControl, 1), @@ -185,6 +186,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => { export const ResponsiveLayoutBaseComp = (function () { return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); return ( ); diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx index f6e040314..92acbe340 100644 --- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx @@ -26,6 +26,7 @@ import { RichTextEditorStyle, RichTextEditorStyleType } from "comps/controls/sty import { useContext } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const localizeStyle = css` & .ql-snow { @@ -172,7 +173,7 @@ const childrenMap = { placeholder: withDefault(StringControl, trans("richTextEditor.placeholder")), toolbar: withDefault(StringControl, JSON.stringify(toolbarOptions)), onEvent: ChangeEventHandlerControl, - style: styleControl(RichTextEditorStyle), + style: styleControl(RichTextEditorStyle , 'style'), ...formDataChildren, }; @@ -290,7 +291,10 @@ function RichTextEditor(props: IProps) { ); } -const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => { +const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + + const handleChange = (v: string) => { props.value.onChange(v); props.onEvent("change"); diff --git a/client/packages/lowcoder/src/comps/comps/rootComp.tsx b/client/packages/lowcoder/src/comps/comps/rootComp.tsx index b0db715ee..4ed578d3b 100644 --- a/client/packages/lowcoder/src/comps/comps/rootComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/rootComp.tsx @@ -17,7 +17,7 @@ import { TransformerListComp } from "./transformerListComp"; import UIComp from "./uiComp"; import { ThemeContext } from "comps/utils/themeContext"; import { ModuleLayoutCompName } from "constants/compConstants"; -import { defaultTheme as localDefaultTheme } from "comps/controls/styleControlConstants"; +import { defaultTheme as localDefaultTheme } from "constants/themeConstants"; import { ModuleLoading } from "components/ModuleLoading"; import EditorSkeletonView from "pages/editor/editorSkeletonView"; import { getGlobalSettings } from "comps/utils/globalSettings"; @@ -65,11 +65,16 @@ function RootView(props: RootViewProps) { const appThemeId = comp.children.settings.getView().themeId; const { orgCommonSettings } = getGlobalSettings(); const themeList = orgCommonSettings?.themeList || []; + const selectedTheme = getCurrentTheme(themeList, appThemeId); const theme = previewTheme?.previewTheme || - getCurrentTheme(themeList, appThemeId)?.theme || + selectedTheme?.theme || localDefaultTheme; + + const themeId = selectedTheme ? selectedTheme.id : ( + previewTheme ? "" : 'default-theme-id' + ); useEffect(() => { const newEditorState = new EditorState(comp, (changeEditorStateFn) => { @@ -90,6 +95,7 @@ function RootView(props: RootViewProps) { const themeContextValue = useMemo( () => ({ theme, + themeId, }), [theme] ); diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx index 095e85f74..366264b44 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx @@ -7,6 +7,7 @@ import { UICompBuilder, withDefault } from "../../generators"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; import { CascaderChildren, CascaderPropertyView, defaultDataSource } from "./cascaderContants"; import { refMethods } from "comps/generators/withMethodExposing"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType,$childrenInputFieldStyle:ChildrenMultiSelectStyleType }>` width: 100%; @@ -37,7 +38,9 @@ const DropdownRenderStyle = styled.div<{ $childrenInputFieldStyle: ChildrenMulti let CascaderBasicComp = (function () { const childrenMap = CascaderChildren; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props , dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return props.label({ style: props.style, labelStyle: props.labelStyle, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx index d0327419c..db101e6d9 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx @@ -34,15 +34,15 @@ export const CascaderChildren = { onEvent: SelectEventHandlerControl, allowClear: BoolControl, options: JSONObjectArrayControl, - style: styleControl(InputFieldStyle), - labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), + style: styleControl(InputFieldStyle , 'style'), + labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false), 'labelStyle'), showSearch: BoolControl.DEFAULT_TRUE, viewRef: RefControl, margin: MarginControl, padding: PaddingControl, - inputFieldStyle:styleControl(CascaderStyle), + inputFieldStyle:styleControl(CascaderStyle , 'inputFieldStyle'), childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle), - animationStyle:styleControl(AnimationStyle) + animationStyle:styleControl(AnimationStyle ,'animationStyle') }; export const CascaderPropertyView = ( diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx index 985d4dc30..30137c366 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx @@ -24,6 +24,7 @@ import { trans } from "i18n"; import { RefControl } from "comps/controls/refControl"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; export const getStyle = (style: CheckboxStyleType) => { return css` @@ -146,16 +147,21 @@ let CheckboxBasicComp = (function () { disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, options: SelectInputOptionControl, - style: styleControl(InputFieldStyle), - labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), + style: styleControl(InputFieldStyle , 'style'), + labelStyle: styleControl( + LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false), + 'labelStyle', + ), layout: dropdownControl(RadioLayoutOptions, "horizontal"), viewRef: RefControl, - inputFieldStyle:styleControl(CheckboxStyle), - animationStyle:styleControl(AnimationStyle), + inputFieldStyle: styleControl(CheckboxStyle , 'inputFieldStyle'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), ...SelectInputValidationChildren, ...formDataChildren, }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const [ validateState, handleChange, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx index cba0023b9..b71750320 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx @@ -16,20 +16,24 @@ import { PaddingControl } from "../../controls/paddingControl"; import { MarginControl } from "../../controls/marginControl"; import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; +import { useContext, useEffect } from "react"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; let MultiSelectBasicComp = (function () { const childrenMap = { ...SelectChildrenMap, defaultValue: arrayStringExposingStateControl("defaultValue", ["1", "2"]), value: arrayStringExposingStateControl("value"), - style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}), - labelStyle:styleControl(LabelStyle), - inputFieldStyle:withDefault(styleControl(MultiSelectStyle),{borderWidth:'1px'}), + style: styleControl(InputFieldStyle , 'style'), + labelStyle:styleControl(LabelStyle , 'labelStyle'), + inputFieldStyle:styleControl(MultiSelectStyle , 'inputFieldStyle'), childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle), margin: MarginControl, padding: PaddingControl, }; return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const valueSet = new Set(props.options.map((o) => o.value)); // Filter illegal default values entered by the user const [ validateState, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx index d1a2a2daa..5c24ebe3f 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx @@ -13,6 +13,7 @@ import { EllipsisTextCss, ValueFromOption } from "lowcoder-design"; import { trans } from "i18n"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; import { migrateOldData } from "comps/generators/simpleGenerators"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => { return css` @@ -97,7 +98,9 @@ const Radio = styled(AntdRadioGroup)<{ `; let RadioBasicComp = (function () { - return new UICompBuilder(RadioChildrenMap, (props) => { + return new UICompBuilder(RadioChildrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const [ validateState, handleChange, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx index 6e1c27b1b..ca740c6db 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx @@ -22,7 +22,7 @@ import { RefControl } from "comps/controls/refControl"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { withDefault } from "@lowcoder-ee/comps/generators/simpleGenerators"; +import { withDefault } from "@lowcoder-ee/comps/generators"; export const RadioLayoutOptions = [ { label: trans("radio.horizontal"), value: "horizontal" }, @@ -37,12 +37,12 @@ export const RadioChildrenMap = { disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, options: SelectInputOptionControl, - style: styleControl(InputFieldStyle), - labelStyle:styleControl(LabelStyle), + style: styleControl(InputFieldStyle , 'style'), + labelStyle:styleControl(LabelStyle , 'labelStyle'), layout: dropdownControl(RadioLayoutOptions, "horizontal"), viewRef: RefControl, - inputFieldStyle:withDefault(styleControl(RadioStyle),{borderWidth: '1px'}), - animationStyle: styleControl(AnimationStyle), + inputFieldStyle:styleControl(RadioStyle ,'inputFieldStyle' ), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), ...SelectInputValidationChildren, ...formDataChildren, }; diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx index c8309f4a5..c1061cc66 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx @@ -23,10 +23,11 @@ import { trans } from "i18n"; import { hasIcon } from "comps/utils"; import { RefControl } from "comps/controls/refControl"; -import { useContext } from "react"; +import { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const getStyle = (style: SegmentStyleType) => { @@ -77,8 +78,8 @@ const SegmentChildrenMap = { disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, options: SelectOptionControl, - style: withDefault(styleControl(SegmentStyle), { borderWidth: '1px' }), - animationStyle:styleControl(AnimationStyle), + style: styleControl(SegmentStyle, 'style'), + animationStyle: styleControl(AnimationStyle, 'animationStyle'), viewRef: RefControl, ...SelectInputValidationChildren, @@ -86,7 +87,9 @@ const SegmentChildrenMap = { }; let SegmentedControlBasicComp = (function () { - return new UICompBuilder(SegmentChildrenMap, (props) => { + return new UICompBuilder(SegmentChildrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const [ validateState, handleChange, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx index 73625895e..cbb772fb1 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx @@ -15,22 +15,25 @@ import { SelectInputInvalidConfig, useSelectInputValidate, } from "./selectInputConstants"; -import { useRef } from "react"; +import { useContext, useEffect, useRef } from "react"; import { RecordConstructorToView } from "lowcoder-core"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; let SelectBasicComp = (function () { const childrenMap = { ...SelectChildrenMap, defaultValue: stringExposingStateControl("defaultValue"), value: stringExposingStateControl("value"), - style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}), - labelStyle: styleControl(LabelStyle), - inputFieldStyle: withDefault(styleControl(SelectStyle),{borderWidth:'1px'}), - childrenInputFieldStyle: withDefault(styleControl(ChildrenMultiSelectStyle),{text:'#000'}) + style: styleControl(InputFieldStyle , 'style'), + labelStyle: styleControl(LabelStyle , 'labelStyle'), + inputFieldStyle: styleControl(SelectStyle , 'inputFieldStyle'), + childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle') }; return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const [ validateState, handleChange, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx index ab3a3e95c..72e0f4f2e 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx @@ -18,7 +18,7 @@ import { RefControl } from "comps/controls/refControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { useContext, useState, useEffect } from "react"; import { EditorContext } from "comps/editorState"; - +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const sizeOptions = [ { @@ -91,13 +91,15 @@ const StepsChildrenMap = { disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, options: StepOptionControl, - style: withDefault( styleControl(StepsStyle), {text:'#D7D9E0'}), + style: styleControl(StepsStyle , 'style'), viewRef: RefControl, - animationStyle: styleControl(AnimationStyle) + animationStyle: styleControl(AnimationStyle ,'animationStyle' ) }; let StepControlBasicComp = (function () { - return new UICompBuilder(StepsChildrenMap, (props) => { + return new UICompBuilder(StepsChildrenMap, (props , dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>` ${props=>props.$animationStyle} diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx index ed7a87dea..b5b3c5131 100644 --- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx @@ -19,7 +19,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { changeValueAction, multiChangeAction } from "lowcoder-core"; import { Section, sectionNames, UndoIcon } from "lowcoder-design"; -import React, { Suspense, useState } from "react"; +import React, { Suspense, useEffect, useState } from "react"; import ReactResizeDetector from "react-resize-detector"; import type SignatureCanvasType from "react-signature-canvas"; import styled from "styled-components"; @@ -29,6 +29,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst import { useContext } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Wrapper = styled.div<{ $style: SignatureStyleType; $isEmpty: boolean }>` height: 100%; @@ -99,12 +100,12 @@ const childrenMap = { tips: withDefault(StringControl, trans('signature.signHere')), onEvent: ChangeEventHandlerControl, label: withDefault(LabelControl, {position: 'column', text: ''}), - style: styleControl(SignatureContainerStyle), - labelStyle: styleControl(LabelStyle), + style: styleControl(SignatureContainerStyle , 'style'), + labelStyle: styleControl(LabelStyle , 'labelStyle'), showUndo: withDefault(BoolControl, true), showClear: withDefault(BoolControl, true), value: stateComp(''), - inputFieldStyle: styleControl(SignatureStyle), + inputFieldStyle: styleControl(SignatureStyle , 'inputFieldStyle'), ...formDataChildren, }; @@ -112,6 +113,8 @@ const SignatureCanvas = React.lazy(() => import("react-signature-canvas")); let SignatureTmpComp = (function () { return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + let canvas: SignatureCanvasType | null = null; const [isBegin, setIsBegin] = useState(false); const [canvasSize, setCanvasSize] = useState([0, 0]); diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx index 687cde5c0..120d4ca25 100644 --- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx @@ -17,8 +17,9 @@ import { RefControl } from "comps/controls/refControl"; import { refMethods } from "comps/generators/withMethodExposing"; import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils"; -import { useContext } from "react"; +import { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const EventOptions = [ changeEvent, @@ -89,18 +90,21 @@ let SwitchTmpComp = (function () { label: LabelControl, onEvent: eventHandlerControl(EventOptions), disabled: BoolCodeControl, - style: styleControl(InputFieldStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(InputFieldStyle , 'style'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), labelStyle: styleControl( LabelStyle.filter( (style) => ['accent', 'validate'].includes(style.name) === false - ) + ), + 'labelStyle' ), viewRef: RefControl, - inputFieldStyle:migrateOldData(styleControl(SwitchStyle), fixOldData), + inputFieldStyle: migrateOldData(styleControl(SwitchStyle, 'inputFieldStyle'), fixOldData), ...formDataChildren, }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return props.label({ style: props.style, labelStyle: props.labelStyle, diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx index 82f261a14..59ff4668a 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx @@ -10,13 +10,14 @@ import { AlignCenter, AlignLeft, AlignRight } from "lowcoder-design"; import { NumberControl } from "comps/controls/codeControl"; import { Avatar, Tooltip } from "antd"; import { clickEvent, eventHandlerControl, refreshEvent } from "comps/controls/eventHandlerControl"; -import { ReactElement } from "react"; +import { ReactElement, useContext, useEffect } from "react"; import { IconControl } from "comps/controls/iconControl"; import { ColorControl } from "comps/controls/colorControl"; import { optionsControl } from "comps/controls/optionsControl"; import { BoolControl } from "comps/controls/boolControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { JSONObject } from "util/jsonTypes"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const MenuLinkWrapper = styled.div` > a { @@ -88,7 +89,7 @@ export const alignOptions = [ export const ColumnAvatarsComp = (function () { const childrenMap = { - style: styleControl(avatarGroupStyle), + style: styleControl(avatarGroupStyle , 'style'), maxCount: withDefault(NumberControl, 3), avatarSize: withDefault(NumberControl, 40), alignment: dropdownControl(alignOptions, "center"), @@ -107,7 +108,10 @@ export const ColumnAvatarsComp = (function () { return new ColumnTypeCompBuilder( childrenMap, - (props) => { + (props , dispatch) => { + + useMergeCompStyles(props, dispatch); + return ( props.$background} !important; border-color: ${(props) => props.$style.border} !important; border-radius: ${(props) => props.$style.radius}; - padding: 0 !important; > div { @@ -775,6 +776,10 @@ export function TableCompView(props: { }; }, [pagination, data]); + const childrenProps = childrenToProps(comp.children); + + useMergeCompStyles(childrenProps, comp.dispatch) + const handleChangeEvent = useCallback( (eventName: TableEventOptionValues) => { if (eventName === "saveChanges" && !compChildren.onEvent.isBind(eventName)) { diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx index ee68b9b1b..742734052 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx @@ -7,7 +7,7 @@ import { TableOnEventView } from "comps/comps/tableComp/tableTypes"; import { BoolControl } from "comps/controls/boolControl"; import { StringControl } from "comps/controls/codeControl"; import { dropdownControl } from "comps/controls/dropdownControl"; -import { defaultTheme, TableToolbarStyleType } from "comps/controls/styleControlConstants"; +import { TableToolbarStyleType } from "comps/controls/styleControlConstants"; import { stateComp } from "comps/generators"; import { genRandomKey } from "comps/utils/idGenerator"; import { ThemeContext } from "comps/utils/themeContext"; @@ -38,6 +38,7 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from "react"; import styled, { css } from "styled-components"; import { JSONValue } from "util/jsonTypes"; import { ControlNodeCompBuilder } from "comps/generators/controlCompBuilder"; +import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; const SaveChangeButtons = styled.div` display: flex; diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx index 78347b271..bc59934db 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx @@ -205,12 +205,12 @@ const tableChildrenMap = { pagination: PaginationControl, sort: valueComp>([]), toolbar: TableToolbarComp, - style: withDefault(styleControl(TableStyle), {borderWidth: '1px'}), - rowStyle: withDefault(styleControl(TableRowStyle),{ borderWidth: '1px'}), - toolbarStyle: styleControl(TableToolbarStyle), - headerStyle:withDefault(styleControl(TableHeaderStyle), {borderWidth: '1px'}), + style: styleControl(TableStyle, 'style'), + rowStyle: styleControl(TableRowStyle, 'rowStyle'), + toolbarStyle: styleControl(TableToolbarStyle, 'toolbarStyle'), + headerStyle: styleControl(TableHeaderStyle, 'headerStyle'), searchText: StringControl, - columnsStyle: withDefault(styleControl(TableColumnStyle), {radius:'0px'}), + columnsStyle: styleControl(TableColumnStyle, 'columnsStyle'), viewModeResizable: BoolControl, visibleResizables: BoolControl, // sample data for regenerating columns diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index 613032f90..9d77152cb 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -15,7 +15,7 @@ import { NameGenerator } from "comps/utils"; import { ScrollBar, Section, sectionNames } from "lowcoder-design"; import { HintPlaceHolder } from "lowcoder-design"; import _ from "lodash"; -import React, { useCallback, useContext } from "react"; +import React, { useCallback, useContext, useEffect } from "react"; import styled, { css } from "styled-components"; import { IContainer } from "../containerBase/iContainer"; import { SimpleContainerComp } from "../containerBase/simpleContainerComp"; @@ -35,6 +35,7 @@ import { checkIsMobile } from "util/commonUtils"; import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"; import { BoolControl } from "comps/controls/boolControl"; import { PositionControl } from "comps/controls/dropdownControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const EVENT_OPTIONS = [ { @@ -57,10 +58,10 @@ const childrenMap = { onEvent: eventHandlerControl(EVENT_OPTIONS), disabled: BoolCodeControl, showHeader: withDefault(BoolControl, true), - style: withDefault(styleControl(TabContainerStyle),{borderWidth:'1px'}), - headerStyle: styleControl(ContainerHeaderStyle), - bodyStyle: styleControl(TabBodyStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(TabContainerStyle , 'style'), + headerStyle: styleControl(ContainerHeaderStyle , 'headerStyle'), + bodyStyle: styleControl(TabBodyStyle , 'bodyStyle'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), tabsGutter: withDefault(NumberControl, 32), tabsCentered: withDefault(BoolControl, false), }; @@ -288,6 +289,8 @@ const TabbedContainer = (props: TabbedContainerProps) => { export const TabbedContainerBaseComp = (function () { return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + return ( diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index 21220e7d2..f5ea00949 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -6,7 +6,7 @@ import styled, { css } from "styled-components"; import { AlignCenter } from "lowcoder-design"; import { AlignLeft } from "lowcoder-design"; import { AlignRight } from "lowcoder-design"; -import { UICompBuilder } from "../generators"; +import { UICompBuilder, withDefault } from "../generators"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; import { markdownCompCss, TacoMarkDown } from "lowcoder-design"; import { styleControl } from "comps/controls/styleControl"; @@ -18,9 +18,10 @@ import { alignWithJustifyControl } from "comps/controls/alignControl"; import { MarginControl } from "../controls/marginControl"; import { PaddingControl } from "../controls/paddingControl"; -import React, { useContext } from "react"; +import React, { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const EventOptions = [clickEvent] as const; @@ -115,15 +116,14 @@ const typeOptions = [ value: "text", }, ] as const; + const VerticalAlignmentOptions = [ { label: , value: "flex-start" }, { label: , value: "center" }, { label: , value: "flex-end" }, ] as const; - let TextTmpComp = (function () { - const childrenMap = { text: stringExposingStateControl( "text", @@ -134,13 +134,19 @@ let TextTmpComp = (function () { type: dropdownControl(typeOptions, "markdown"), horizontalAlignment: alignWithJustifyControl(), verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"), - style: styleControl(TextStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(TextStyle, 'style'), + animationStyle: styleControl(AnimationStyle, 'animationStyle'), margin: MarginControl, padding: PaddingControl, }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { const value = props.text.value; + + useMergeCompStyles( + props as Record, + dispatch + ); + return ( , showCount: BoolControl, allowClear: BoolControl, - style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , - labelStyle:styleControl(LabelStyle), + style: styleControl(InputFieldStyle, 'style'), + labelStyle:styleControl(LabelStyle, 'labelStyle'), prefixIcon: IconControl, suffixIcon: IconControl, - inputFieldStyle:withDefault(styleControl(InputLikeStyle),{borderWidth: '1px'}) , - animationStyle: styleControl(AnimationStyle), + inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle') , + animationStyle: styleControl(AnimationStyle, 'animationStyle'), }; -let InputBasicComp = new UICompBuilder(childrenMap, (props) => { +let InputBasicComp = new UICompBuilder(childrenMap, (props, dispatch) => { const [inputProps, validateState] = useTextInputProps(props); + useMergeCompStyles(props as Record, dispatch); + return props.label({ required: props.required, children: ( diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx index 18972f975..4796961b9 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx @@ -57,6 +57,7 @@ import { import React, { useContext } from "react"; import { EditorContext } from "comps/editorState"; import { migrateOldData } from "comps/generators/simpleGenerators"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Wrapper = styled.div<{ $style: InputLikeStyleType; @@ -96,8 +97,8 @@ let MentionTmpComp = (function () { viewRef: RefControl, allowClear: BoolControl, autoHeight: AutoHeightControl, - style: styleControl(InputLikeStyle), - animationStyle: styleControl(AnimationStyle), + style: styleControl(InputLikeStyle , 'style'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), mentionList: jsonControl(checkMentionListData, { "@": ["Li Lei", "Han Meimei"], "#": ["123", "456", "789"], @@ -106,7 +107,9 @@ let MentionTmpComp = (function () { invalid: booleanExposingStateControl("invalid"), }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props , dispatch) => { + useMergeCompStyles(props as Record, dispatch); + const { mentionList } = props; const [validateState, setvalidateState] = useState({}); const [activationFlag, setActivationFlag] = useState(false); diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index 127039ab0..238f1e7ec 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -39,9 +39,10 @@ import { trans } from "i18n"; import { IconControl } from "comps/controls/iconControl"; import { hasIcon } from "comps/utils"; import { RefControl } from "comps/controls/refControl"; -import React, { useContext } from "react"; +import React, { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; import { migrateOldData } from "comps/generators/simpleGenerators"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const PasswordStyle = styled(InputPassword)<{ $style: InputLikeStyleType; @@ -59,13 +60,15 @@ let PasswordTmpComp = (function () { validationType: dropdownControl(TextInputValidationOptions, "Regex"), visibilityToggle: BoolControl.DEFAULT_TRUE, prefixIcon: IconControl, - style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , - labelStyle: styleControl(LabelStyle), - inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth: '1px'}), - animationStyle: styleControl(AnimationStyle), + style: styleControl(InputFieldStyle ,'style' ) , + labelStyle: styleControl(LabelStyle,'labelStyle'), + inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), + animationStyle: styleControl(AnimationStyle , 'animationStyle'), }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { const [inputProps, validateState] = useTextInputProps(props); + useMergeCompStyles(props as Record, dispatch); + return props.label({ required: props.required, children: ( diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index ba2dd3438..75028b40c 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -34,9 +34,10 @@ import { RefControl } from "comps/controls/refControl"; import { TextAreaRef } from "antd/es/input/TextArea"; import { blurMethod, focusWithOptions } from "comps/utils/methodUtils"; -import React, { useContext } from "react"; +import React, { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; import { migrateOldData } from "comps/generators/simpleGenerators"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const TextAreaStyled = styled(TextArea)<{ $style: InputLikeStyleType; @@ -73,13 +74,15 @@ let TextAreaTmpComp = (function () { viewRef: RefControl, allowClear: BoolControl, autoHeight: withDefault(AutoHeightControl, "fixed"), - style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , - labelStyle: styleControl(LabelStyle), - inputFieldStyle: withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}), - animationStyle: styleControl(AnimationStyle) + style: styleControl(InputFieldStyle, 'style') , + labelStyle: styleControl(LabelStyle ,'labelStyle' ), + inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), + animationStyle: styleControl(AnimationStyle, 'animationStyle') }; - return new UICompBuilder(childrenMap, (props) => { + return new UICompBuilder(childrenMap, (props, dispatch) => { const [inputProps, validateState] = useTextInputProps(props); + useMergeCompStyles(props as Record, dispatch); + return props.label({ required: props.required, inputFieldStyle:props.inputFieldStyle, diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx index 40e9b0f3f..8f24b2cf8 100644 --- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx @@ -47,6 +47,7 @@ import { timelineDate, timelineNode, TimelineDataTooltip } from "./timelineConst import { convertTimeLineData } from "./timelineUtils"; import { default as Timeline } from "antd/es/timeline"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const EventOptions = [ clickEvent, @@ -64,7 +65,7 @@ const childrenMap = { reverse: BoolControl, pending: withDefault(StringControl, trans("timeLine.defaultPending")), onEvent: eventHandlerControl(EventOptions), - style: styleControl(TimeLineStyle), + style: styleControl(TimeLineStyle, 'style'), clickedObject: valueComp({ title: "" }), clickedIndex: valueComp(0), }; @@ -89,6 +90,7 @@ const TimelineComp = ( ) => { const { value, dispatch, style, mode, reverse, onEvent } = props; const [icons, setIcons] = useState([]); + useMergeCompStyles(props as Record, dispatch); useEffect(() => { const loadIcons = async () => { diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx index 1edaff06e..d124e8410 100644 --- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx @@ -13,11 +13,10 @@ import { Transfer } from "antd"; import ReactResizeDetector from "react-resize-detector"; import { changeEvent, eventHandlerControl, searchEvent, selectedChangeEvent } from "../controls/eventHandlerControl"; import styled, { css } from "styled-components"; -import { useEffect, useRef, useState } from "react"; +import { useContext, useEffect, useRef, useState } from "react"; import { valueComp, withDefault } from "../generators"; import type { TransferDirection } from 'antd/es/transfer'; -import { _ } from "core-js"; - +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Container = styled.div<{ $style: TransferStyleType }>` height: 100%; @@ -57,7 +56,7 @@ const defaultItems = [ const EventOptions = [changeEvent, searchEvent, selectedChangeEvent] as const; const childrenMap = { - style: styleControl(TransferStyle), + style: styleControl(TransferStyle , 'style'), onEvent: eventHandlerControl(EventOptions), sourceTitle: withDefault(StringControl, trans('transfer.sourceTitle')), targetTitle: withDefault(StringControl, trans('transfer.targetTitle')), @@ -140,7 +139,11 @@ const TransferView = (props: RecordConstructorToView & { }; let TransferBasicComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => ) + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + + return ( + )}) .setPropertyViewFn((children) => ( <>
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx index d6063652f..4e3419ffe 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx @@ -33,6 +33,7 @@ import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl"; import { trans } from "i18n"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; type TreeStyleType = StyleConfigType; @@ -76,9 +77,9 @@ const childrenMap = { label: withDefault(LabelControl, { position: "column" }), // TODO: more event onEvent: SelectEventHandlerControl, - style: styleControl(InputFieldStyle), - labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), - inputFieldStyle:styleControl(TreeStyle) + style: styleControl(InputFieldStyle , 'style'), + labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false), 'labelStyle'), + inputFieldStyle:styleControl(TreeStyle, 'inputFieldStyle') }; const TreeCompView = (props: RecordConstructorToView) => { @@ -150,7 +151,11 @@ const TreeCompView = (props: RecordConstructorToView) => { }; let TreeBasicComp = (function () { - return new UICompBuilder(childrenMap, (props) => ) + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + + return()} +) .setPropertyViewFn((children) => ( <>
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx index a9036be7c..5eb322d0a 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx @@ -36,6 +36,7 @@ import { BaseSelectRef } from "rc-select"; import { RefControl } from "comps/controls/refControl"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const StyledTreeSelect = styled(TreeSelect)<{ $style: TreeSelectStyleType }>` width: 100%; @@ -65,9 +66,9 @@ const childrenMap = { allowClear: BoolControl, showSearch: BoolControl.DEFAULT_TRUE, inputValue: stateComp(""), // search value - style:styleControl(InputFieldStyle), - labelStyle:styleControl(LabelStyle), - inputFieldStyle: withDefault(styleControl(TreeSelectStyle), {borderWidth: '1px'}), + style:styleControl(InputFieldStyle , 'style'), + labelStyle:styleControl(LabelStyle , 'labelStyle'), + inputFieldStyle: styleControl(TreeSelectStyle, 'inputFieldStyle'), viewRef: RefControl, }; @@ -145,9 +146,12 @@ const TreeCompView = ( }; let TreeBasicComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => ( + return new UICompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props as Record, dispatch); + + return( - )) + )}) .setPropertyViewFn((children) => ( <>
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index 4f78b5079..f982b2d53 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -36,11 +36,21 @@ const Wrapper = styled.div<{$style: ContainerStyleType; $animationStyle?:Animati `; const HeaderInnerGrid = styled(InnerGrid)<{ - $backgroundColor: string + $backgroundColor: string, + $headerBackgroundImage: string; + $headerBackgroundImageRepeat: string; + $headerBackgroundImageSize: string; + $headerBackgroundImagePosition: string; + $headerBackgroundImageOrigin: string; }>` overflow: visible; ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; + ${(props) => props.$headerBackgroundImage && `background-image: url(${props.$headerBackgroundImage});`} + ${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`} + ${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`} + ${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`} + ${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`} `; const BodyInnerGrid = styled(InnerGrid)<{ @@ -48,11 +58,21 @@ const BodyInnerGrid = styled(InnerGrid)<{ $backgroundColor: string; $borderColor: string; $borderWidth: string; + $backgroundImage: string; + $backgroundImageRepeat: string; + $backgroundImageSize: string; + $backgroundImagePosition: string; + $backgroundImageOrigin: string; }>` border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; flex: 1; ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; + ${(props) => props.$backgroundImage && `background-image: url(${props.$backgroundImage});`} + ${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`} + ${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`} + ${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`} + ${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`} `; const FooterInnerGrid = styled(InnerGrid)<{ @@ -118,6 +138,11 @@ export function TriContainer(props: TriContainerProps) { containerPadding={[paddingWidth, 3]} showName={{ bottom: showBody || showFooter ? 20 : 0 }} $backgroundColor={headerStyle?.headerBackground || 'transparent'} + $headerBackgroundImage={headerStyle?.headerBackgroundImage} + $headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat} + $headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize} + $headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition} + $headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin} style={{padding: headerStyle.containerHeaderPadding}} /> @@ -140,6 +165,11 @@ export function TriContainer(props: TriContainerProps) { $backgroundColor={bodyStyle?.background || 'transparent'} $borderColor={style?.border} $borderWidth={style?.borderWidth} + $backgroundImage={bodyStyle?.backgroundImage} + $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat} + $backgroundImageSize={bodyStyle?.backgroundImageSize} + $backgroundImagePosition={bodyStyle?.backgroundImagePosition} + $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin} style={{padding: bodyStyle.containerBodyPadding}} /> diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx index b93e018b4..50e62055a 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx @@ -11,10 +11,10 @@ import { import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { NameGenerator } from "comps/utils"; -import { fromRecord, Node } from "lowcoder-core"; +import { changeValueAction, fromRecord, multiChangeAction, Node } from "lowcoder-core"; import { nodeIsRecord } from "lowcoder-core"; import _ from "lodash"; -import { ReactNode } from "react"; +import { ReactNode, useContext, useEffect } from "react"; import { lastValueIfEqual } from "util/objectUtils"; import { CompTree, @@ -27,6 +27,7 @@ import { SimpleContainerComp } from "../containerBase/simpleContainerComp"; import { ContainerBodyChildComp } from "./containerBodyChildComp"; import { trans } from "i18n"; import { ControlNode } from "lowcoder-design"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const childrenMap = { header: SimpleContainerComp, @@ -40,15 +41,17 @@ const childrenMap = { showFooter: BoolControl, autoHeight: AutoHeightControl, scrollbars: withDefault(BoolControl, false), - style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}), - headerStyle: styleControl(ContainerHeaderStyle), - bodyStyle: styleControl(ContainerBodyStyle), - footerStyle: styleControl(ContainerFooterStyle), + style: withDefault(styleControl(ContainerStyle, 'style'),{borderWidth:'1px'}), + headerStyle: styleControl(ContainerHeaderStyle, 'headerStyle'), + bodyStyle: styleControl(ContainerBodyStyle, 'bodyStyle'), + footerStyle: styleControl(ContainerFooterStyle, 'footerStyle'), }; // Compatible with old style data 2022-8-15 const TriContainerBaseComp = migrateOldData( new MultiCompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props, dispatch); + return { ...props, dispatch }; }).build(), fixOldStyleData diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index fd10c7486..0d03f8bd5 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -5,7 +5,7 @@ import { childrenToProps, ToConstructor } from "comps/generators/multi"; import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; import { ThemeContext } from "comps/utils/themeContext"; import { trans } from "i18n"; -import _ from "lodash"; +import _, { values } from "lodash"; import { controlItem, IconReset, @@ -36,7 +36,6 @@ import { useIsMobile } from "util/hooks"; import { CSSCodeControl, ObjectControl, RadiusControl, StringControl } from "./codeControl"; import { ColorControl } from "./colorControl"; import { - defaultTheme, DepColorConfig, DEP_TYPE, RadiusConfig, @@ -80,6 +79,11 @@ import { } from "./styleControlConstants"; import { faTextWidth } from "@fortawesome/free-solid-svg-icons"; import appSelectControl from "./appSelectControl"; +import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes"; +import { CompTypeContext } from "../utils/compTypeContext"; +import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; +import { CompContext } from "../utils/compContext"; +import { EditorContext } from "../editorState"; function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig { return config.hasOwnProperty("color"); @@ -350,9 +354,16 @@ function calcColors>( props: ColorMap, colorConfigs: readonly SingleColorConfig[], theme?: ThemeDetail, - bgColor?: string + bgColor?: string, + compTheme?: Record, ) { - const themeWithDefault = (theme || defaultTheme) as unknown as Record; + // let themeWithDefault = (theme || defaultTheme) as unknown as Record; + let themeWithDefault = { + // ...defaultTheme, + ...(theme || {}), + ...(compTheme || {}), + } as unknown as Record; + // Cover what is not there for the first pass let res: Record = {}; colorConfigs.forEach((config) => { @@ -515,55 +526,55 @@ function calcColors>( res[name] = themeWithDefault[config.radius]; } if (isBorderWidthConfig(config)) { - res[name] = '0px'; + res[name] = themeWithDefault[config.borderWidth] || '0px'; } if (isRotationConfig(config)) { - res[name] = '0deg'; + res[name] = themeWithDefault[config.rotation] || '0deg'; } if (isBackgroundImageConfig(config)) { - res[name] = ''; + res[name] = themeWithDefault[config.backgroundImage] || ''; } if (isBackgroundImageRepeatConfig(config)) { - res[name] = 'no-repeat'; + res[name] = themeWithDefault[config.backgroundImageRepeat] || 'no-repeat'; } if (isBackgroundImageSizeConfig(config)) { - res[name] = 'cover'; + res[name] = themeWithDefault[config.backgroundImageSize] || 'cover'; } if (isBackgroundImagePositionConfig(config)) { - res[name] = 'center'; + res[name] = themeWithDefault[config.backgroundImagePosition] || 'center'; } if (isBackgroundImageOriginConfig(config)) { - res[name] = 'padding-box'; + res[name] = themeWithDefault[config.backgroundImageOrigin] || 'padding-box'; } if (isHeaderBackgroundImageConfig(config)) { - res[name] = ''; + res[name] = themeWithDefault[config.headerBackgroundImage] || ''; } if (isHeaderBackgroundImageRepeatConfig(config)) { - res[name] = 'no-repeat'; + res[name] = themeWithDefault[config.headerBackgroundImageRepeat] || 'no-repeat'; } if (isHeaderBackgroundImageSizeConfig(config)) { - res[name] = 'cover'; + res[name] = themeWithDefault[config.headerBackgroundImageSize] || 'cover'; } if (isHeaderBackgroundImagePositionConfig(config)) { - res[name] = 'center'; + res[name] = themeWithDefault[config.headerBackgroundImagePosition] || 'center'; } if (isHeaderBackgroundImageOriginConfig(config)) { - res[name] = 'padding-box'; + res[name] = themeWithDefault[config.headerBackgroundImageOrigin] || 'padding-box'; } if (isFooterBackgroundImageConfig(config)) { - res[name] = ''; + res[name] = themeWithDefault[config.footerBackgroundImage] || ''; } if (isFooterBackgroundImageRepeatConfig(config)) { - res[name] = 'no-repeat'; + res[name] = themeWithDefault[config.footerBackgroundImageRepeat] || 'no-repeat'; } if (isFooterBackgroundImageSizeConfig(config)) { - res[name] = 'cover'; + res[name] = themeWithDefault[config.footerBackgroundImageSize] || 'cover'; } if (isFooterBackgroundImagePositionConfig(config)) { - res[name] = 'center'; + res[name] = themeWithDefault[config.footerBackgroundImagePosition] || 'center'; } if (isFooterBackgroundImageOriginConfig(config)) { - res[name] = 'padding-box'; + res[name] = themeWithDefault[config.footerBackgroundImageOrigin] || 'padding-box'; } if (isTextSizeConfig(config)) { // TODO: remove default textSize after added in theme in backend. @@ -624,6 +635,10 @@ function calcColors>( } if (isDepColorConfig(config)) { if (config.depType && config.depType === DEP_TYPE.CONTRAST_TEXT) { + if (compTheme?.[name]) { + res[name] = compTheme[name]; + return; + } // bgColor is the background color of the container component, equivalent to canvas let depKey = config.depName ? res[config.depName] : themeWithDefault[config.depTheme!]; if (bgColor && config.depTheme === "canvas") { @@ -636,12 +651,16 @@ function calcColors>( ); } else if (config?.depType === DEP_TYPE.SELF && config.depTheme === "canvas" && bgColor) { res[name] = bgColor; + } else if ((config?.depType || config?.depName) && compTheme?.[name]) { + res[name] = compTheme[name]; } else { const rest = []; config.depName && rest.push(res[config.depName]); config.depTheme && rest.push(themeWithDefault[config.depTheme]); res[name] = config.transformer(rest[0], rest[1]); } + } else { + res[name] = themeWithDefault[config.name] } }); return res as ColorMap; @@ -781,7 +800,10 @@ const ResetIcon = styled(IconReset)` } `; -export function styleControl(colorConfigs: T) { +export function styleControl( + colorConfigs: T, + styleKey: string = '', +) { type ColorMap = { [K in Names]: string }; const childrenMap: any = {}; colorConfigs.map((config) => { @@ -836,23 +858,54 @@ export function styleControl(colorConfig return new ControlItemCompBuilder( childrenMap as ToConstructor<{ [K in Names]: ColorControl }>, (props) => { - // const x = useContext(CompNameContext); + // const compType = useContext(CompTypeContext); + const editorState = useContext(EditorContext); + const {comp, compType} = useContext(CompContext); const theme = useContext(ThemeContext); const bgColor = useContext(BackgroundColorContext); - return calcColors(props as ColorMap, colorConfigs, theme?.theme, bgColor); + + const appSettingsComp = editorState?.getAppSettingsComp(); + const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting; + const { themeId } = theme || {}; + const { appliedThemeId, preventStyleOverwriting } = comp?.comp || {}; + const appTheme = !preventStyleOverwriting && !preventAppStylesOverwriting + ? theme?.theme + : undefined; + const compTheme = compType && !preventStyleOverwriting && !preventAppStylesOverwriting + ? { + ...(theme?.theme?.components?.[compType]?.[styleKey] || {}) as unknown as Record + } + : undefined; + const styleProps = preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId + ? props as ColorMap + : {} as ColorMap; + + + return calcColors( + styleProps, + colorConfigs, + appTheme, + bgColor, + compTheme as Record | undefined, + ); } ) .setControlItemData({ filterText: label, searchChild: true }) .setPropertyViewFn((children) => { const theme = useContext(ThemeContext); + const compType = useContext(CompTypeContext); const bgColor = useContext(BackgroundColorContext); const isMobile = useIsMobile(); + const compTheme = compType + ? theme?.theme?.components?.[compType]?.[styleKey] + : undefined; const props = calcColors( childrenToProps(children) as ColorMap, colorConfigs, theme?.theme, - bgColor + bgColor, + compTheme as Record | undefined, ); const showReset = Object.values(childrenToProps(children)).findIndex((item) => item) > -1; return ( diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 7d7a71e2b..e32d45ec8 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -2,6 +2,7 @@ import {ThemeDetail} from "api/commonSettingApi"; import {darkenColor, isDarkColor, lightenColor, toHex} from "lowcoder-design"; import {trans} from "i18n"; import {StyleConfigType} from "./styleControl"; +import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; type SupportPlatform = "pc" | "mobile"; @@ -225,26 +226,6 @@ export type SingleColorConfig = | BoxShadowColorConfig | AnimationIterationCountConfig; -export const defaultTheme: ThemeDetail = { - primary: "#3377FF", - textDark: "#222222", - textLight: "#FFFFFF", - canvas: "#F5F5F6", - primarySurface: "#FFFFFF", - borderRadius: "4px", - margin: "3px", - padding: "3px", - gridColumns: "24", - textSize: "14px", - animation: "", - animationDelay: "", - animationDuration: "", - opacity: "1", - boxShadow: "", - boxShadowColor: "", - animationIterationCount: "", -}; - export const SURFACE_COLOR = "#FFFFFF"; const SECOND_SURFACE_COLOR = "#D7D9E0"; const ERROR_COLOR = "#F5222D"; @@ -260,7 +241,7 @@ export function contrastText( textDark: string, textLight: string ) { - return isDarkColor(color) && color !== "#00000000" ? textLight : textDark; + return color && isDarkColor(color) && color !== "#00000000" ? textLight : textDark; } // return similar background color @@ -496,7 +477,7 @@ const BORDER = { const RADIUS = { name: "radius", label: trans("style.borderRadius"), - radius: "borderRadius", + radius: "radius", } as const; const BORDER_WIDTH = { diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx index 64be29b6e..559f93945 100644 --- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx +++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx @@ -24,12 +24,15 @@ import { } from "./withMethodExposing"; import { Section } from "lowcoder-design"; import { trans } from "i18n"; +import { BoolControl } from "../controls/boolControl"; +import { valueComp, withDefault } from "./simpleGenerators"; export type NewChildren>> = ChildrenCompMap & { hidden: InstanceType; className: InstanceType; dataTestId: InstanceType; + preventStyleOverwriting: InstanceType; }; export function HidableView(props: { @@ -67,6 +70,7 @@ export function ExtendedPropertyView<
{props.childrenMap.className?.propertyView({ label: trans("prop.className") })} {props.childrenMap.dataTestId?.propertyView({ label: trans("prop.dataTestId") })} + {props.childrenMap.preventStyleOverwriting?.propertyView({ label: trans("prop.preventOverwriting") })}
); @@ -81,7 +85,9 @@ export function uiChildren< ...childrenMap, hidden: BoolCodeControl, className: StringControl, - dataTestId: StringControl + dataTestId: StringControl, + preventStyleOverwriting: withDefault(BoolControl, false), + appliedThemeId: valueComp(''), } as any; } @@ -149,7 +155,7 @@ export class UICompBuilder< } build() { - const reservedProps = ["hidden", "className", "dataTestId"]; + const reservedProps = ["hidden", "className", "dataTestId", "preventStyleOverwriting", "appliedThemeId"]; for (const reservedProp of reservedProps) { if (this.childrenMap.hasOwnProperty(reservedProp)) { throw new Error(`Property »${reservedProp}« is reserved and must not be implemented in components!`); @@ -235,6 +241,7 @@ function UIView(props: { } //END ADD BY FRED + // render condition for modal and drawer as we are not getting compType here if (comp.children.hasOwnProperty('showMask') && comp.children.hasOwnProperty('maskClosable')) { return (