diff --git a/.gitignore b/.gitignore index 6efa61305..6f7f99e37 100644 --- a/.gitignore +++ b/.gitignore @@ -10,8 +10,8 @@ client/packages/lowcoder-plugin-demo/.yarn/install-state.gz client/packages/lowcoder-plugin-demo/yarn.lock client/packages/lowcoder-plugin-demo/.yarn/cache/@types-node-npm-16.18.68-56f72825c0-094ae9ed80.zip application-dev.yml -server/api-service/lowcoder-server/src/main/resources/application-lowcoder.yml -server/api-service/lowcoder-server/src/main/resources/application-debug.yaml +application-lowcoder.yml +application-debug.yaml +application-dev-localhost.yaml .vscode/settings.json -.vscode/launch.json -server/api-service/lowcoder-server/src/main/resources/application-dev-localhost.yaml +.vscode/launch.json \ No newline at end of file diff --git a/client/VERSION b/client/VERSION index 58073ef8d..acdc3f1b0 100644 --- a/client/VERSION +++ b/client/VERSION @@ -1 +1 @@ -2.4.1 \ No newline at end of file +2.4.2 \ No newline at end of file diff --git a/client/package.json b/client/package.json index 44087ce6a..39da5a410 100644 --- a/client/package.json +++ b/client/package.json @@ -80,6 +80,7 @@ "chalk": "4", "flag-icons": "^7.2.1", "number-precision": "^1.6.0", + "posthog-js": "^1.144.2", "react-countup": "^6.5.3", "react-player": "^2.11.0", "resize-observer-polyfill": "^1.5.1", 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-core/lib/index.cjs b/client/packages/lowcoder-core/lib/index.cjs index 610615a10..d25c8d830 100644 --- a/client/packages/lowcoder-core/lib/index.cjs +++ b/client/packages/lowcoder-core/lib/index.cjs @@ -1,5 +1,3 @@ -// this is used in Node.js ?? - 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); @@ -11,118 +9,118 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau var ___default = /*#__PURE__*/_interopDefaultLegacy(_); -/****************************************************************************** -Copyright (c) Microsoft Corporation. - -Permission to use, copy, modify, and/or distribute this software for any -purpose with or without fee is hereby granted. - -THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH -REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY -AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, -INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM -LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR -OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR -PERFORMANCE OF THIS SOFTWARE. -***************************************************************************** */ -/* global Reflect, Promise, SuppressedError, Symbol */ - -var extendStatics = function(d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; - return extendStatics(d, b); -}; - -function __extends(d, b) { - if (typeof b !== "function" && b !== null) - throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); -} - -var __assign = function() { - __assign = Object.assign || function __assign(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; - -function __rest(s, e) { - var t = {}; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) - t[p] = s[p]; - if (s != null && typeof Object.getOwnPropertySymbols === "function") - for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { - if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) - t[p[i]] = s[p[i]]; - } - return t; -} - -function __decorate(decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -} - -function __awaiter(thisArg, _arguments, P, generator) { - function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } - return new (P || (P = Promise))(function (resolve, reject) { - function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } - function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } - function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } - step((generator = generator.apply(thisArg, _arguments || [])).next()); - }); -} - -function __generator(thisArg, body) { - var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; - return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; - function verb(n) { return function (v) { return step([n, v]); }; } - function step(op) { - if (f) throw new TypeError("Generator is already executing."); - while (g && (g = 0, op[0] && (_ = 0)), _) try { - if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; - if (y = 0, t) op = [op[0] & 2, t.value]; - switch (op[0]) { - case 0: case 1: t = op; break; - case 4: _.label++; return { value: op[1], done: false }; - case 5: _.label++; y = op[1]; op = [0]; continue; - case 7: op = _.ops.pop(); _.trys.pop(); continue; - default: - if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } - if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } - if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } - if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } - if (t[2]) _.ops.pop(); - _.trys.pop(); continue; - } - op = body.call(thisArg, _); - } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } - if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; - } -} - -function __spreadArray(to, from, pack) { - if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { - if (ar || !(i in from)) { - if (!ar) ar = Array.prototype.slice.call(from, 0, i); - ar[i] = from[i]; - } - } - return to.concat(ar || Array.prototype.slice.call(from)); -} - -typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { - var e = new Error(message); - return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; +/****************************************************************************** +Copyright (c) Microsoft Corporation. + +Permission to use, copy, modify, and/or distribute this software for any +purpose with or without fee is hereby granted. + +THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH +REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY +AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, +INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM +LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR +OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR +PERFORMANCE OF THIS SOFTWARE. +***************************************************************************** */ +/* global Reflect, Promise, SuppressedError, Symbol */ + +var extendStatics = function(d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; + return extendStatics(d, b); +}; + +function __extends(d, b) { + if (typeof b !== "function" && b !== null) + throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +} + +var __assign = function() { + __assign = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; + +function __rest(s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +} + +function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +} + +function __awaiter(thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +} + +function __generator(thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +} + +function __spreadArray(to, from, pack) { + if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { + if (ar || !(i in from)) { + if (!ar) ar = Array.prototype.slice.call(from, 0, i); + ar[i] = from[i]; + } + } + return to.concat(ar || Array.prototype.slice.call(from)); +} + +typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { + var e = new Error(message); + return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; }; function isEqualArgs(args, cacheArgs, equals) { @@ -801,6 +799,9 @@ var loglevel = { "error" ]; + var _loggersByName = {}; + var defaultLogger = null; + // Cross-browser bind equivalent that works at least back to IE6 function bindMethod(obj, methodName) { var method = obj[methodName]; @@ -853,25 +854,33 @@ var loglevel = { // These private functions always need `this` to be set properly - function replaceLoggingMethods(level, loggerName) { + function replaceLoggingMethods() { /*jshint validthis:true */ + var level = this.getLevel(); + + // Replace the actual methods. for (var i = 0; i < logMethods.length; i++) { var methodName = logMethods[i]; this[methodName] = (i < level) ? noop : - this.methodFactory(methodName, level, loggerName); + this.methodFactory(methodName, level, this.name); } // Define log.log as an alias for log.debug this.log = this.debug; + + // Return any important warnings. + if (typeof console === undefinedType && level < this.levels.SILENT) { + return "No console available for logging"; + } } // In old IE versions, the console isn't present until you first open it. // We build realMethod() replacements here that regenerate logging methods - function enableLoggingWhenConsoleArrives(methodName, level, loggerName) { + function enableLoggingWhenConsoleArrives(methodName) { return function () { if (typeof console !== undefinedType) { - replaceLoggingMethods.call(this, level, loggerName); + replaceLoggingMethods.call(this); this[methodName].apply(this, arguments); } }; @@ -879,16 +888,36 @@ var loglevel = { // By default, we use closely bound real methods wherever possible, and // otherwise we wait for a console to appear, and then try again. - function defaultMethodFactory(methodName, level, loggerName) { + function defaultMethodFactory(methodName, _level, _loggerName) { /*jshint validthis:true */ return realMethod(methodName) || enableLoggingWhenConsoleArrives.apply(this, arguments); } - function Logger(name, defaultLevel, factory) { + function Logger(name, factory) { + // Private instance variables. var self = this; - var currentLevel; - defaultLevel = defaultLevel == null ? "WARN" : defaultLevel; + /** + * The level inherited from a parent logger (or a global default). We + * cache this here rather than delegating to the parent so that it stays + * in sync with the actual logging methods that we have installed (the + * parent could change levels but we might not have rebuilt the loggers + * in this child yet). + * @type {number} + */ + var inheritedLevel; + /** + * The default level for this logger, if any. If set, this overrides + * `inheritedLevel`. + * @type {number|null} + */ + var defaultLevel; + /** + * A user-specific level for this logger. If set, this overrides + * `defaultLevel`. + * @type {number|null} + */ + var userLevel; var storageKey = "loglevel"; if (typeof name === "string") { @@ -928,10 +957,12 @@ var loglevel = { if (typeof storedLevel === undefinedType) { try { var cookie = window.document.cookie; - var location = cookie.indexOf( - encodeURIComponent(storageKey) + "="); + var cookieName = encodeURIComponent(storageKey); + var location = cookie.indexOf(cookieName + "="); if (location !== -1) { - storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1]; + storedLevel = /^([^;]+)/.exec( + cookie.slice(location + cookieName.length + 1) + )[1]; } } catch (ignore) {} } @@ -950,7 +981,6 @@ var loglevel = { // Use localStorage if available try { window.localStorage.removeItem(storageKey); - return; } catch (ignore) {} // Use session cookie as fallback @@ -960,6 +990,18 @@ var loglevel = { } catch (ignore) {} } + function normalizeLevel(input) { + var level = input; + if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) { + level = self.levels[level.toUpperCase()]; + } + if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) { + return level; + } else { + throw new TypeError("log.setLevel() called with invalid level: " + input); + } + } + /* * * Public logger API - see https://github.com/pimterry/loglevel for details @@ -974,37 +1016,36 @@ var loglevel = { self.methodFactory = factory || defaultMethodFactory; self.getLevel = function () { - return currentLevel; + if (userLevel != null) { + return userLevel; + } else if (defaultLevel != null) { + return defaultLevel; + } else { + return inheritedLevel; + } }; self.setLevel = function (level, persist) { - if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) { - level = self.levels[level.toUpperCase()]; - } - if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) { - currentLevel = level; - if (persist !== false) { // defaults to true - persistLevelIfPossible(level); - } - replaceLoggingMethods.call(self, level, name); - if (typeof console === undefinedType && level < self.levels.SILENT) { - return "No console available for logging"; - } - } else { - throw "log.setLevel() called with invalid level: " + level; + userLevel = normalizeLevel(level); + if (persist !== false) { // defaults to true + persistLevelIfPossible(userLevel); } + + // NOTE: in v2, this should call rebuild(), which updates children. + return replaceLoggingMethods.call(self); }; self.setDefaultLevel = function (level) { - defaultLevel = level; + defaultLevel = normalizeLevel(level); if (!getPersistedLevel()) { self.setLevel(level, false); } }; self.resetLevel = function () { - self.setLevel(defaultLevel, false); + userLevel = null; clearPersistedLevel(); + replaceLoggingMethods.call(self); }; self.enableAll = function(persist) { @@ -1015,12 +1056,28 @@ var loglevel = { self.setLevel(self.levels.SILENT, persist); }; - // Initialize with the right level + self.rebuild = function () { + if (defaultLogger !== self) { + inheritedLevel = normalizeLevel(defaultLogger.getLevel()); + } + replaceLoggingMethods.call(self); + + if (defaultLogger === self) { + for (var childName in _loggersByName) { + _loggersByName[childName].rebuild(); + } + } + }; + + // Initialize all the internal levels. + inheritedLevel = normalizeLevel( + defaultLogger ? defaultLogger.getLevel() : "WARN" + ); var initialLevel = getPersistedLevel(); - if (initialLevel == null) { - initialLevel = defaultLevel; + if (initialLevel != null) { + userLevel = normalizeLevel(initialLevel); } - self.setLevel(initialLevel, false); + replaceLoggingMethods.call(self); } /* @@ -1029,18 +1086,19 @@ var loglevel = { * */ - var defaultLogger = new Logger(); + defaultLogger = new Logger(); - var _loggersByName = {}; defaultLogger.getLogger = function getLogger(name) { if ((typeof name !== "symbol" && typeof name !== "string") || name === "") { - throw new TypeError("You must supply a name when creating a logger."); + throw new TypeError("You must supply a name when creating a logger."); } var logger = _loggersByName[name]; if (!logger) { - logger = _loggersByName[name] = new Logger( - name, defaultLogger.getLevel(), defaultLogger.methodFactory); + logger = _loggersByName[name] = new Logger( + name, + defaultLogger.methodFactory + ); } return logger; }; @@ -3269,15 +3327,16 @@ function transformWrapper(transformFn, defaultValue) { function styleNamespace(id) { return "style-for-".concat(id); } -function evalStyle(id, css) { +function evalStyle(id, css, globalStyle) { var _a; var styleId = styleNamespace(id); + var prefixId = globalStyle ? id : "#".concat(id); var compiledCSS = ""; css.forEach(function (i) { if (!i.trim()) { return; } - compiledCSS += stylis.serialize(stylis.compile("#".concat(id, "{").concat(i, "}")), stylis.middleware([stylis.prefixer, stylis.stringify])); + compiledCSS += stylis.serialize(stylis.compile("".concat(prefixId, "{").concat(i, "}")), stylis.middleware([stylis.prefixer, stylis.stringify])); }); var styleNode = document.querySelector("#".concat(styleId)); if (!styleNode) { @@ -3847,104 +3906,6 @@ var jsxRuntime = { var reactJsxRuntime_production_min = {}; -/* -object-assign -(c) Sindre Sorhus -@license MIT -*/ - -var objectAssign; -var hasRequiredObjectAssign; - -function requireObjectAssign () { - if (hasRequiredObjectAssign) return objectAssign; - hasRequiredObjectAssign = 1; - /* eslint-disable no-unused-vars */ - var getOwnPropertySymbols = Object.getOwnPropertySymbols; - var hasOwnProperty = Object.prototype.hasOwnProperty; - var propIsEnumerable = Object.prototype.propertyIsEnumerable; - - function toObject(val) { - if (val === null || val === undefined) { - throw new TypeError('Object.assign cannot be called with null or undefined'); - } - - return Object(val); - } - - function shouldUseNative() { - try { - if (!Object.assign) { - return false; - } - - // Detect buggy property enumeration order in older V8 versions. - - // https://bugs.chromium.org/p/v8/issues/detail?id=4118 - var test1 = new String('abc'); // eslint-disable-line no-new-wrappers - test1[5] = 'de'; - if (Object.getOwnPropertyNames(test1)[0] === '5') { - return false; - } - - // https://bugs.chromium.org/p/v8/issues/detail?id=3056 - var test2 = {}; - for (var i = 0; i < 10; i++) { - test2['_' + String.fromCharCode(i)] = i; - } - var order2 = Object.getOwnPropertyNames(test2).map(function (n) { - return test2[n]; - }); - if (order2.join('') !== '0123456789') { - return false; - } - - // https://bugs.chromium.org/p/v8/issues/detail?id=3056 - var test3 = {}; - 'abcdefghijklmnopqrst'.split('').forEach(function (letter) { - test3[letter] = letter; - }); - if (Object.keys(Object.assign({}, test3)).join('') !== - 'abcdefghijklmnopqrst') { - return false; - } - - return true; - } catch (err) { - // We don't expect any of the above to throw, but better to be safe. - return false; - } - } - - objectAssign = shouldUseNative() ? Object.assign : function (target, source) { - var from; - var to = toObject(target); - var symbols; - - for (var s = 1; s < arguments.length; s++) { - from = Object(arguments[s]); - - for (var key in from) { - if (hasOwnProperty.call(from, key)) { - to[key] = from[key]; - } - } - - if (getOwnPropertySymbols) { - symbols = getOwnPropertySymbols(from); - for (var i = 0; i < symbols.length; i++) { - if (propIsEnumerable.call(from, symbols[i])) { - to[symbols[i]] = from[symbols[i]]; - } - } - } - } - - return to; - }; - return objectAssign; -} - var reactExports = {}; var react = { get exports(){ return reactExports; }, @@ -3953,7 +3914,8 @@ var react = { var react_production_min = {}; -/** @license React v17.0.2 +/** + * @license React * react.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. @@ -3967,27 +3929,34 @@ var hasRequiredReact_production_min; function requireReact_production_min () { if (hasRequiredReact_production_min) return react_production_min; hasRequiredReact_production_min = 1; -var l=requireObjectAssign(),n=60103,p=60106;react_production_min.Fragment=60107;react_production_min.StrictMode=60108;react_production_min.Profiler=60114;var q=60109,r=60110,t=60112;react_production_min.Suspense=60113;var u=60115,v=60116; - if("function"===typeof Symbol&&Symbol.for){var w=Symbol.for;n=w("react.element");p=w("react.portal");react_production_min.Fragment=w("react.fragment");react_production_min.StrictMode=w("react.strict_mode");react_production_min.Profiler=w("react.profiler");q=w("react.provider");r=w("react.context");t=w("react.forward_ref");react_production_min.Suspense=w("react.suspense");u=w("react.memo");v=w("react.lazy");}var x="function"===typeof Symbol&&Symbol.iterator; - function y(a){if(null===a||"object"!==typeof a)return null;a=x&&a[x]||a["@@iterator"];return "function"===typeof a?a:null}function z(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } + { + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } - printWarning('warn', format, args); + printWarning('warn', format, args); + } } } function error(format) { { - for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { - args[_key2 - 1] = arguments[_key2]; - } + { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } - printWarning('error', format, args); + printWarning('error', format, args); + } } } @@ -4197,10 +4155,11 @@ function requireReact_development () { if (stack !== '') { format += '%s'; args = args.concat([stack]); - } + } // eslint-disable-next-line react-internal/safe-string-coercion + var argsWithFormat = args.map(function (item) { - return '' + item; + return String(item); }); // Careful: RN currently depends on this prefix argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it @@ -4298,6 +4257,8 @@ function requireReact_development () { } }; + var assign = Object.assign; + var emptyObject = {}; { @@ -4346,10 +4307,8 @@ function requireReact_development () { */ Component.prototype.setState = function (partialState, callback) { - if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) { - { - throw Error( "setState(...): takes an object of state variables to update or a function which returns an object of state variables." ); - } + if (typeof partialState !== 'object' && typeof partialState !== 'function' && partialState != null) { + throw new Error('setState(...): takes an object of state variables to update or a ' + 'function which returns an object of state variables.'); } this.updater.enqueueSetState(this, partialState, callback, 'setState'); @@ -4421,8 +4380,7 @@ function requireReact_development () { var pureComponentPrototype = PureComponent.prototype = new ComponentDummy(); pureComponentPrototype.constructor = PureComponent; // Avoid an extra prototype jump for these methods. - _assign(pureComponentPrototype, Component.prototype); - + assign(pureComponentPrototype, Component.prototype); pureComponentPrototype.isPureReactComponent = true; // an immutable object with a single mutable value @@ -4438,16 +4396,97 @@ function requireReact_development () { return refObject; } + var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare + + function isArray(a) { + return isArrayImpl(a); + } + + /* + * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol + * and Temporal.* types. See https://github.com/facebook/react/pull/22064. + * + * The functions in this module will throw an easier-to-understand, + * easier-to-debug exception with a clear errors message message explaining the + * problem. (Instead of a confusing exception thrown inside the implementation + * of the `value` object). + */ + // $FlowFixMe only called in DEV, so void return is not possible. + function typeName(value) { + { + // toStringTag is needed for namespaced types like Temporal.Instant + var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag; + var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object'; + return type; + } + } // $FlowFixMe only called in DEV, so void return is not possible. + + + function willCoercionThrow(value) { + { + try { + testStringCoercion(value); + return false; + } catch (e) { + return true; + } + } + } + + function testStringCoercion(value) { + // If you ended up here by following an exception call stack, here's what's + // happened: you supplied an object or symbol value to React (as a prop, key, + // DOM attribute, CSS property, string ref, etc.) and when React tried to + // coerce it to a string using `'' + value`, an exception was thrown. + // + // The most common types that will cause this exception are `Symbol` instances + // and Temporal objects like `Temporal.Instant`. But any object that has a + // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this + // exception. (Library authors do this to prevent users from using built-in + // numeric operators like `+` or comparison operators like `>=` because custom + // methods are needed to perform accurate arithmetic or comparison.) + // + // To fix the problem, coerce this object or symbol value to a string before + // passing it to React. The most reliable way is usually `String(value)`. + // + // To find which value is throwing, check the browser or debugger console. + // Before this exception was thrown, there should be `console.error` output + // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the + // problem and how that type was used: key, atrribute, input value prop, etc. + // In most cases, this console output also shows the component and its + // ancestor components where the exception happened. + // + // eslint-disable-next-line react-internal/safe-string-coercion + return '' + value; + } + function checkKeyStringCoercion(value) { + { + if (willCoercionThrow(value)) { + error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value)); + + return testStringCoercion(value); // throw (to help callers find troubleshooting comments) + } + } + } + function getWrappedName(outerType, innerType, wrapperName) { + var displayName = outerType.displayName; + + if (displayName) { + return displayName; + } + var functionName = innerType.displayName || innerType.name || ''; - return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName); - } + return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName; + } // Keep in sync with react-reconciler/getComponentNameFromFiber + function getContextName(type) { return type.displayName || 'Context'; - } + } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead. + - function getComponentName(type) { + function getComponentNameFromType(type) { if (type == null) { // Host root, text node or just invalid type. return null; @@ -4455,7 +4494,7 @@ function requireReact_development () { { if (typeof type.tag === 'number') { - error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.'); + error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.'); } } @@ -4468,23 +4507,24 @@ function requireReact_development () { } switch (type) { - case exports.Fragment: + case REACT_FRAGMENT_TYPE: return 'Fragment'; case REACT_PORTAL_TYPE: return 'Portal'; - case exports.Profiler: + case REACT_PROFILER_TYPE: return 'Profiler'; - case exports.StrictMode: + case REACT_STRICT_MODE_TYPE: return 'StrictMode'; - case exports.Suspense: + case REACT_SUSPENSE_TYPE: return 'Suspense'; case REACT_SUSPENSE_LIST_TYPE: return 'SuspenseList'; + } if (typeof type === 'object') { @@ -4501,10 +4541,13 @@ function requireReact_development () { return getWrappedName(type, type.render, 'ForwardRef'); case REACT_MEMO_TYPE: - return getComponentName(type.type); + var outerName = type.displayName || null; + + if (outerName !== null) { + return outerName; + } - case REACT_BLOCK_TYPE: - return getComponentName(type._render); + return getComponentNameFromType(type.type) || 'Memo'; case REACT_LAZY_TYPE: { @@ -4513,11 +4556,13 @@ function requireReact_development () { var init = lazyComponent._init; try { - return getComponentName(init(payload)); + return getComponentNameFromType(init(payload)); } catch (x) { return null; } } + + // eslint-disable-next-line no-fallthrough } } @@ -4525,6 +4570,7 @@ function requireReact_development () { } var hasOwnProperty = Object.prototype.hasOwnProperty; + var RESERVED_PROPS = { key: true, ref: true, @@ -4604,7 +4650,7 @@ function requireReact_development () { function warnIfStringRefCannotBeAutoConverted(config) { { if (typeof config.ref === 'string' && ReactCurrentOwner.current && config.__self && ReactCurrentOwner.current.stateNode !== config.__self) { - var componentName = getComponentName(ReactCurrentOwner.current.type); + var componentName = getComponentNameFromType(ReactCurrentOwner.current.type); if (!didWarnAboutStringRefs[componentName]) { error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', componentName, config.ref); @@ -4713,6 +4759,10 @@ function requireReact_development () { } if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } + key = '' + config.key; } @@ -4785,16 +4835,13 @@ function requireReact_development () { */ function cloneElement(element, config, children) { - if (!!(element === null || element === undefined)) { - { - throw Error( "React.cloneElement(...): The argument must be a React element, but you passed " + element + "." ); - } + if (element === null || element === undefined) { + throw new Error("React.cloneElement(...): The argument must be a React element, but you passed " + element + "."); } var propName; // Original props are copied - var props = _assign({}, element.props); // Reserved names are extracted - + var props = assign({}, element.props); // Reserved names are extracted var key = element.key; var ref = element.ref; // Self is preserved since the owner is preserved. @@ -4815,6 +4862,10 @@ function requireReact_development () { } if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } + key = '' + config.key; } // Remaining properties override existing props @@ -4913,6 +4964,10 @@ function requireReact_development () { // that we don't block potential future ES APIs. if (typeof element === 'object' && element !== null && element.key != null) { // Explicit key + { + checkKeyStringCoercion(element.key); + } + return escape('' + element.key); } // Implicit key determined by the index in the set @@ -4956,7 +5011,7 @@ function requireReact_development () { var childKey = nameSoFar === '' ? SEPARATOR + getElementKey(_child, 0) : nameSoFar; - if (Array.isArray(mappedChild)) { + if (isArray(mappedChild)) { var escapedChildKey = ''; if (childKey != null) { @@ -4968,10 +5023,20 @@ function requireReact_development () { }); } else if (mappedChild != null) { if (isValidElement(mappedChild)) { + { + // The `if` statement here prevents auto-disabling of the safe + // coercion ESLint rule, so we must manually disable it below. + // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key + if (mappedChild.key && (!_child || _child.key !== mappedChild.key)) { + checkKeyStringCoercion(mappedChild.key); + } + } + mappedChild = cloneAndReplaceKey(mappedChild, // Keep both the (mapped) and old keys if they differ, just as // traverseAllChildren used to do for objects as children escapedPrefix + ( // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key mappedChild.key && (!_child || _child.key !== mappedChild.key) ? // $FlowFixMe Flow incorrectly thinks existing element's key can be a number + // eslint-disable-next-line react-internal/safe-string-coercion escapeUserProvidedKey('' + mappedChild.key) + '/' : '') + childKey); } @@ -4987,7 +5052,7 @@ function requireReact_development () { var nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR; - if (Array.isArray(children)) { + if (isArray(children)) { for (var i = 0; i < children.length; i++) { child = children[i]; nextName = nextNamePrefix + getElementKey(child, i); @@ -5020,13 +5085,9 @@ function requireReact_development () { subtreeCount += mapIntoArray(child, array, escapedPrefix, nextName, callback); } } else if (type === 'object') { - var childrenString = '' + children; - - { - { - throw Error( "Objects are not valid as a React child (found: " + (childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString) + "). If you meant to render a collection of children, use an array instead." ); - } - } + // eslint-disable-next-line react-internal/safe-string-coercion + var childrenString = String(children); + throw new Error("Objects are not valid as a React child (found: " + (childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString) + "). " + 'If you meant to render a collection of children, use an array ' + 'instead.'); } } @@ -5125,28 +5186,17 @@ function requireReact_development () { function onlyChild(children) { if (!isValidElement(children)) { - { - throw Error( "React.Children.only expected to receive a single React element child." ); - } + throw new Error('React.Children.only expected to receive a single React element child.'); } return children; } - function createContext(defaultValue, calculateChangedBits) { - if (calculateChangedBits === undefined) { - calculateChangedBits = null; - } else { - { - if (calculateChangedBits !== null && typeof calculateChangedBits !== 'function') { - error('createContext: Expected the optional second argument to be a ' + 'function. Instead received: %s', calculateChangedBits); - } - } - } - + function createContext(defaultValue) { + // TODO: Second argument used to be an optional `calculateChangedBits` + // function. Warn to reserve for future use? var context = { $$typeof: REACT_CONTEXT_TYPE, - _calculateChangedBits: calculateChangedBits, // As a workaround to support multiple concurrent renderers, we categorize // some renderers as primary and others as secondary. We only expect // there to be two concurrent renderers at most: React Native (primary) and @@ -5159,7 +5209,10 @@ function requireReact_development () { _threadCount: 0, // These are circular Provider: null, - Consumer: null + Consumer: null, + // Add these to use same hidden class in VM as ServerContext + _defaultValue: null, + _globalName: null }; context.Provider = { $$typeof: REACT_PROVIDER_TYPE, @@ -5175,8 +5228,7 @@ function requireReact_development () { // warn for the incorrect usage of Context as a Consumer. var Consumer = { $$typeof: REACT_CONTEXT_TYPE, - _context: context, - _calculateChangedBits: context._calculateChangedBits + _context: context }; // $FlowFixMe: Flow complains about not setting a value, which is intentional here Object.defineProperties(Consumer, { @@ -5263,38 +5315,54 @@ function requireReact_development () { if (payload._status === Uninitialized) { var ctor = payload._result; var thenable = ctor(); // Transition to the next state. + // This might throw either because it's missing or throws. If so, we treat it + // as still uninitialized and try again next time. Which is the same as what + // happens if the ctor or any wrappers processing the ctor throws. This might + // end up fixing it if the resolution was a concurrency bug. - var pending = payload; - pending._status = Pending; - pending._result = thenable; thenable.then(function (moduleObject) { - if (payload._status === Pending) { - var defaultExport = moduleObject.default; - - { - if (defaultExport === undefined) { - error('lazy: Expected the result of a dynamic import() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + // Break up imports to avoid accidentally parsing them as dependencies. - 'const MyComponent = lazy(() => imp' + "ort('./MyComponent'))", moduleObject); - } - } // Transition to the next state. - - + if (payload._status === Pending || payload._status === Uninitialized) { + // Transition to the next state. var resolved = payload; resolved._status = Resolved; - resolved._result = defaultExport; + resolved._result = moduleObject; } }, function (error) { - if (payload._status === Pending) { + if (payload._status === Pending || payload._status === Uninitialized) { // Transition to the next state. var rejected = payload; rejected._status = Rejected; rejected._result = error; } }); + + if (payload._status === Uninitialized) { + // In case, we're still uninitialized, then we're waiting for the thenable + // to resolve. Set it as pending in the meantime. + var pending = payload; + pending._status = Pending; + pending._result = thenable; + } } if (payload._status === Resolved) { - return payload._result; + var moduleObject = payload._result; + + { + if (moduleObject === undefined) { + error('lazy: Expected the result of a dynamic imp' + 'ort() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + // Break up imports to avoid accidentally parsing them as dependencies. + 'const MyComponent = lazy(() => imp' + "ort('./MyComponent'))\n\n" + 'Did you accidentally put curly braces around the import?', moduleObject); + } + } + + { + if (!('default' in moduleObject)) { + error('lazy: Expected the result of a dynamic imp' + 'ort() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + // Break up imports to avoid accidentally parsing them as dependencies. + 'const MyComponent = lazy(() => imp' + "ort('./MyComponent'))", moduleObject); + } + } + + return moduleObject.default; } else { throw payload._result; } @@ -5303,7 +5371,7 @@ function requireReact_development () { function lazy(ctor) { var payload = { // We use these fields to store the result. - _status: -1, + _status: Uninitialized, _result: ctor }; var lazyType = { @@ -5389,9 +5457,15 @@ function requireReact_development () { return ownName; }, set: function (name) { - ownName = name; - - if (render.displayName == null) { + ownName = name; // The inner component shouldn't inherit this display name in most cases, + // because the component may be used elsewhere. + // But it's nice for anonymous functions to inherit the name, + // so that our component-stack generation logic will display their frames. + // An anonymous function generally suggests a pattern like: + // React.forwardRef((props, ref) => {...}); + // This kind of inner function is not used elsewhere so the side effect is okay. + + if (!render.name && !render.displayName) { render.displayName = name; } } @@ -5401,9 +5475,11 @@ function requireReact_development () { return elementType; } - // Filter certain DOM attributes (e.g. src, href) if their values are empty strings. + var REACT_MODULE_REFERENCE; - var enableScopeAPI = false; // Experimental Create Event Handle API. + { + REACT_MODULE_REFERENCE = Symbol.for('react.module.reference'); + } function isValidElementType(type) { if (typeof type === 'string' || typeof type === 'function') { @@ -5411,12 +5487,16 @@ function requireReact_development () { } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill). - if (type === exports.Fragment || type === exports.Profiler || type === REACT_DEBUG_TRACING_MODE_TYPE || type === exports.StrictMode || type === exports.Suspense || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) { + if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing ) { return true; } if (typeof type === 'object' && type !== null) { - if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) { + if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object + // types supported by any Flight configuration anywhere since + // we don't know which Flight build this will end up being used + // with. + type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) { return true; } } @@ -5446,9 +5526,15 @@ function requireReact_development () { return ownName; }, set: function (name) { - ownName = name; - - if (type.displayName == null) { + ownName = name; // The inner component shouldn't inherit this display name in most cases, + // because the component may be used elsewhere. + // But it's nice for anonymous functions to inherit the name, + // so that our component-stack generation logic will display their frames. + // An anonymous function generally suggests a pattern like: + // React.memo((props) => {...}); + // This kind of inner function is not used elsewhere so the side effect is okay. + + if (!type.name && !type.displayName) { type.displayName = name; } } @@ -5461,24 +5547,22 @@ function requireReact_development () { function resolveDispatcher() { var dispatcher = ReactCurrentDispatcher.current; - if (!(dispatcher !== null)) { - { - throw Error( "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." ); + { + if (dispatcher === null) { + error('Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' + ' one of the following reasons:\n' + '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' + '2. You might be breaking the Rules of Hooks\n' + '3. You might have more than one copy of React in the same app\n' + 'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.'); } - } + } // Will result in a null access error if accessed outside render phase. We + // intentionally don't throw our own error because this is in a hot path. + // Also helps ensure this is inlined. + return dispatcher; } - - function useContext(Context, unstable_observedBits) { + function useContext(Context) { var dispatcher = resolveDispatcher(); { - if (unstable_observedBits !== undefined) { - error('useContext() second argument is reserved for future ' + 'use in React. Passing it is not supported. ' + 'You passed: %s.%s', unstable_observedBits, typeof unstable_observedBits === 'number' && Array.isArray(arguments[2]) ? '\n\nDid you call array.map(useContext)? ' + 'Calling Hooks inside a loop is not supported. ' + 'Learn more at https://reactjs.org/link/rules-of-hooks' : ''); - } // TODO: add a more generic warning for invalid values. - - + // TODO: add a more generic warning for invalid values. if (Context._context !== undefined) { var realContext = Context._context; // Don't deduplicate because this legitimately causes bugs // and nobody should be using this in existing code. @@ -5491,7 +5575,7 @@ function requireReact_development () { } } - return dispatcher.useContext(Context, unstable_observedBits); + return dispatcher.useContext(Context); } function useState(initialState) { var dispatcher = resolveDispatcher(); @@ -5509,6 +5593,10 @@ function requireReact_development () { var dispatcher = resolveDispatcher(); return dispatcher.useEffect(create, deps); } + function useInsertionEffect(create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useInsertionEffect(create, deps); + } function useLayoutEffect(create, deps) { var dispatcher = resolveDispatcher(); return dispatcher.useLayoutEffect(create, deps); @@ -5531,6 +5619,22 @@ function requireReact_development () { return dispatcher.useDebugValue(value, formatterFn); } } + function useTransition() { + var dispatcher = resolveDispatcher(); + return dispatcher.useTransition(); + } + function useDeferredValue(value) { + var dispatcher = resolveDispatcher(); + return dispatcher.useDeferredValue(value); + } + function useId() { + var dispatcher = resolveDispatcher(); + return dispatcher.useId(); + } + function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) { + var dispatcher = resolveDispatcher(); + return dispatcher.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); + } // Helpers to patch console.logs to avoid logging during side-effect free // replaying on render function. This currently only patches the object @@ -5595,25 +5699,25 @@ function requireReact_development () { }; // $FlowFixMe Flow thinks console is immutable. Object.defineProperties(console, { - log: _assign({}, props, { + log: assign({}, props, { value: prevLog }), - info: _assign({}, props, { + info: assign({}, props, { value: prevInfo }), - warn: _assign({}, props, { + warn: assign({}, props, { value: prevWarn }), - error: _assign({}, props, { + error: assign({}, props, { value: prevError }), - group: _assign({}, props, { + group: assign({}, props, { value: prevGroup }), - groupCollapsed: _assign({}, props, { + groupCollapsed: assign({}, props, { value: prevGroupCollapsed }), - groupEnd: _assign({}, props, { + groupEnd: assign({}, props, { value: prevGroupEnd }) }); @@ -5654,7 +5758,7 @@ function requireReact_development () { function describeNativeComponentFrame(fn, construct) { // If something asked for a stack inside a fake render, it should get ignored. - if (!fn || reentry) { + if ( !fn || reentry) { return ''; } @@ -5763,7 +5867,14 @@ function requireReact_development () { if (c < 0 || sampleLines[s] !== controlLines[c]) { // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. - var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); + var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "" + // but we have a user-provided "displayName" + // splice it in to make the stack more readable. + + + if (fn.displayName && _frame.includes('')) { + _frame = _frame.replace('', fn.displayName); + } { if (typeof fn === 'function') { @@ -5832,7 +5943,7 @@ function requireReact_development () { } switch (type) { - case exports.Suspense: + case REACT_SUSPENSE_TYPE: return describeBuiltInComponentFrame('Suspense'); case REACT_SUSPENSE_LIST_TYPE: @@ -5848,9 +5959,6 @@ function requireReact_development () { // Memo may contain any component type so we recursively resolve it. return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn); - case REACT_BLOCK_TYPE: - return describeFunctionComponentFrame(type._render); - case REACT_LAZY_TYPE: { var lazyComponent = type; @@ -5886,7 +5994,7 @@ function requireReact_development () { function checkPropTypes(typeSpecs, values, location, componentName, element) { { // $FlowFixMe This is okay but Flow doesn't know it. - var has = Function.call.bind(Object.prototype.hasOwnProperty); + var has = Function.call.bind(hasOwnProperty); for (var typeSpecName in typeSpecs) { if (has(typeSpecs, typeSpecName)) { @@ -5898,6 +6006,7 @@ function requireReact_development () { // This is intentionally an invariant that gets caught. It's the same // behavior as without this statement except with a better message. if (typeof typeSpecs[typeSpecName] !== 'function') { + // eslint-disable-next-line react-internal/prod-error-codes var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'); err.name = 'Invariant Violation'; throw err; @@ -5951,7 +6060,7 @@ function requireReact_development () { function getDeclarationErrorAddendum() { if (ReactCurrentOwner.current) { - var name = getComponentName(ReactCurrentOwner.current.type); + var name = getComponentNameFromType(ReactCurrentOwner.current.type); if (name) { return '\n\nCheck the render method of `' + name + '`.'; @@ -6033,7 +6142,7 @@ function requireReact_development () { if (element && element._owner && element._owner !== ReactCurrentOwner.current) { // Give the component that originally created this child. - childOwner = " It was passed a child from " + getComponentName(element._owner.type) + "."; + childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + "."; } { @@ -6060,7 +6169,7 @@ function requireReact_development () { return; } - if (Array.isArray(node)) { + if (isArray(node)) { for (var i = 0; i < node.length; i++) { var child = node[i]; @@ -6122,12 +6231,12 @@ function requireReact_development () { if (propTypes) { // Intentionally inside to avoid triggering lazy initializers: - var name = getComponentName(type); + var name = getComponentNameFromType(type); checkPropTypes(propTypes, element.props, 'prop', name, element); } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) { propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: - var _name = getComponentName(type); + var _name = getComponentNameFromType(type); error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown'); } @@ -6192,10 +6301,10 @@ function requireReact_development () { if (type === null) { typeString = 'null'; - } else if (Array.isArray(type)) { + } else if (isArray(type)) { typeString = 'array'; } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) { - typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />"; + typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />"; info = ' Did you accidentally export a JSX literal instead of a component?'; } else { typeString = typeof type; @@ -6224,7 +6333,7 @@ function requireReact_development () { } } - if (type === exports.Fragment) { + if (type === REACT_FRAGMENT_TYPE) { validateFragmentProps(element); } else { validatePropTypes(element); @@ -6271,58 +6380,326 @@ function requireReact_development () { return newElement; } - { + function startTransition(scope, options) { + var prevTransition = ReactCurrentBatchConfig.transition; + ReactCurrentBatchConfig.transition = {}; + var currentTransition = ReactCurrentBatchConfig.transition; + + { + ReactCurrentBatchConfig.transition._updatedFibers = new Set(); + } try { - var frozenObject = Object.freeze({}); - /* eslint-disable no-new */ + scope(); + } finally { + ReactCurrentBatchConfig.transition = prevTransition; + + { + if (prevTransition === null && currentTransition._updatedFibers) { + var updatedFibersCount = currentTransition._updatedFibers.size; + + if (updatedFibersCount > 10) { + warn('Detected a large number of updates inside startTransition. ' + 'If this is due to a subscription please re-write it to use React provided hooks. ' + 'Otherwise concurrent mode guarantees are off the table.'); + } - new Map([[frozenObject, null]]); - new Set([frozenObject]); - /* eslint-enable no-new */ - } catch (e) { + currentTransition._updatedFibers.clear(); + } + } } } - var createElement$1 = createElementWithValidation ; - var cloneElement$1 = cloneElementWithValidation ; - var createFactory = createFactoryWithValidation ; - var Children = { - map: mapChildren, - forEach: forEachChildren, - count: countChildren, - toArray: toArray, - only: onlyChild - }; + var didWarnAboutMessageChannel = false; + var enqueueTaskImpl = null; + function enqueueTask(task) { + if (enqueueTaskImpl === null) { + try { + // read require off the module object to get around the bundlers. + // we don't want them to detect a require and bundle a Node polyfill. + var requireString = ('require' + Math.random()).slice(0, 7); + var nodeRequire = module && module[requireString]; // assuming we're in node, let's try to get node's + // version of setImmediate, bypassing fake timers if any. + + enqueueTaskImpl = nodeRequire.call(module, 'timers').setImmediate; + } catch (_err) { + // we're in a browser + // we can't use regular timers because they may still be faked + // so we try MessageChannel+postMessage instead + enqueueTaskImpl = function (callback) { + { + if (didWarnAboutMessageChannel === false) { + didWarnAboutMessageChannel = true; - exports.Children = Children; - exports.Component = Component; - exports.PureComponent = PureComponent; - exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals; - exports.cloneElement = cloneElement$1; - exports.createContext = createContext; - exports.createElement = createElement$1; - exports.createFactory = createFactory; - exports.createRef = createRef; - exports.forwardRef = forwardRef; - exports.isValidElement = isValidElement; - exports.lazy = lazy; - exports.memo = memo; - exports.useCallback = useCallback; - exports.useContext = useContext; - exports.useDebugValue = useDebugValue; + if (typeof MessageChannel === 'undefined') { + error('This browser does not have a MessageChannel implementation, ' + 'so enqueuing tasks via await act(async () => ...) will fail. ' + 'Please file an issue at https://github.com/facebook/react/issues ' + 'if you encounter this warning.'); + } + } + } + + var channel = new MessageChannel(); + channel.port1.onmessage = callback; + channel.port2.postMessage(undefined); + }; + } + } + + return enqueueTaskImpl(task); + } + + var actScopeDepth = 0; + var didWarnNoAwaitAct = false; + function act(callback) { + { + // `act` calls can be nested, so we track the depth. This represents the + // number of `act` scopes on the stack. + var prevActScopeDepth = actScopeDepth; + actScopeDepth++; + + if (ReactCurrentActQueue.current === null) { + // This is the outermost `act` scope. Initialize the queue. The reconciler + // will detect the queue and use it instead of Scheduler. + ReactCurrentActQueue.current = []; + } + + var prevIsBatchingLegacy = ReactCurrentActQueue.isBatchingLegacy; + var result; + + try { + // Used to reproduce behavior of `batchedUpdates` in legacy mode. Only + // set to `true` while the given callback is executed, not for updates + // triggered during an async event, because this is how the legacy + // implementation of `act` behaved. + ReactCurrentActQueue.isBatchingLegacy = true; + result = callback(); // Replicate behavior of original `act` implementation in legacy mode, + // which flushed updates immediately after the scope function exits, even + // if it's an async function. + + if (!prevIsBatchingLegacy && ReactCurrentActQueue.didScheduleLegacyUpdate) { + var queue = ReactCurrentActQueue.current; + + if (queue !== null) { + ReactCurrentActQueue.didScheduleLegacyUpdate = false; + flushActQueue(queue); + } + } + } catch (error) { + popActScope(prevActScopeDepth); + throw error; + } finally { + ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy; + } + + if (result !== null && typeof result === 'object' && typeof result.then === 'function') { + var thenableResult = result; // The callback is an async function (i.e. returned a promise). Wait + // for it to resolve before exiting the current scope. + + var wasAwaited = false; + var thenable = { + then: function (resolve, reject) { + wasAwaited = true; + thenableResult.then(function (returnValue) { + popActScope(prevActScopeDepth); + + if (actScopeDepth === 0) { + // We've exited the outermost act scope. Recursively flush the + // queue until there's no remaining work. + recursivelyFlushAsyncActWork(returnValue, resolve, reject); + } else { + resolve(returnValue); + } + }, function (error) { + // The callback threw an error. + popActScope(prevActScopeDepth); + reject(error); + }); + } + }; + + { + if (!didWarnNoAwaitAct && typeof Promise !== 'undefined') { + // eslint-disable-next-line no-undef + Promise.resolve().then(function () {}).then(function () { + if (!wasAwaited) { + didWarnNoAwaitAct = true; + + error('You called act(async () => ...) without await. ' + 'This could lead to unexpected testing behaviour, ' + 'interleaving multiple act calls and mixing their ' + 'scopes. ' + 'You should - await act(async () => ...);'); + } + }); + } + } + + return thenable; + } else { + var returnValue = result; // The callback is not an async function. Exit the current scope + // immediately, without awaiting. + + popActScope(prevActScopeDepth); + + if (actScopeDepth === 0) { + // Exiting the outermost act scope. Flush the queue. + var _queue = ReactCurrentActQueue.current; + + if (_queue !== null) { + flushActQueue(_queue); + ReactCurrentActQueue.current = null; + } // Return a thenable. If the user awaits it, we'll flush again in + // case additional work was scheduled by a microtask. + + + var _thenable = { + then: function (resolve, reject) { + // Confirm we haven't re-entered another `act` scope, in case + // the user does something weird like await the thenable + // multiple times. + if (ReactCurrentActQueue.current === null) { + // Recursively flush the queue until there's no remaining work. + ReactCurrentActQueue.current = []; + recursivelyFlushAsyncActWork(returnValue, resolve, reject); + } else { + resolve(returnValue); + } + } + }; + return _thenable; + } else { + // Since we're inside a nested `act` scope, the returned thenable + // immediately resolves. The outer scope will flush the queue. + var _thenable2 = { + then: function (resolve, reject) { + resolve(returnValue); + } + }; + return _thenable2; + } + } + } + } + + function popActScope(prevActScopeDepth) { + { + if (prevActScopeDepth !== actScopeDepth - 1) { + error('You seem to have overlapping act() calls, this is not supported. ' + 'Be sure to await previous act() calls before making a new one. '); + } + + actScopeDepth = prevActScopeDepth; + } + } + + function recursivelyFlushAsyncActWork(returnValue, resolve, reject) { + { + var queue = ReactCurrentActQueue.current; + + if (queue !== null) { + try { + flushActQueue(queue); + enqueueTask(function () { + if (queue.length === 0) { + // No additional work was scheduled. Finish. + ReactCurrentActQueue.current = null; + resolve(returnValue); + } else { + // Keep flushing work until there's none left. + recursivelyFlushAsyncActWork(returnValue, resolve, reject); + } + }); + } catch (error) { + reject(error); + } + } else { + resolve(returnValue); + } + } + } + + var isFlushing = false; + + function flushActQueue(queue) { + { + if (!isFlushing) { + // Prevent re-entrance. + isFlushing = true; + var i = 0; + + try { + for (; i < queue.length; i++) { + var callback = queue[i]; + + do { + callback = callback(true); + } while (callback !== null); + } + + queue.length = 0; + } catch (error) { + // If something throws, leave the remaining callbacks on the queue. + queue = queue.slice(i + 1); + throw error; + } finally { + isFlushing = false; + } + } + } + } + + var createElement$1 = createElementWithValidation ; + var cloneElement$1 = cloneElementWithValidation ; + var createFactory = createFactoryWithValidation ; + var Children = { + map: mapChildren, + forEach: forEachChildren, + count: countChildren, + toArray: toArray, + only: onlyChild + }; + + exports.Children = Children; + exports.Component = Component; + exports.Fragment = REACT_FRAGMENT_TYPE; + exports.Profiler = REACT_PROFILER_TYPE; + exports.PureComponent = PureComponent; + exports.StrictMode = REACT_STRICT_MODE_TYPE; + exports.Suspense = REACT_SUSPENSE_TYPE; + exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals; + exports.act = act; + exports.cloneElement = cloneElement$1; + exports.createContext = createContext; + exports.createElement = createElement$1; + exports.createFactory = createFactory; + exports.createRef = createRef; + exports.forwardRef = forwardRef; + exports.isValidElement = isValidElement; + exports.lazy = lazy; + exports.memo = memo; + exports.startTransition = startTransition; + exports.unstable_act = act; + exports.useCallback = useCallback; + exports.useContext = useContext; + exports.useDebugValue = useDebugValue; + exports.useDeferredValue = useDeferredValue; exports.useEffect = useEffect; + exports.useId = useId; exports.useImperativeHandle = useImperativeHandle; + exports.useInsertionEffect = useInsertionEffect; exports.useLayoutEffect = useLayoutEffect; exports.useMemo = useMemo; exports.useReducer = useReducer; exports.useRef = useRef; exports.useState = useState; + exports.useSyncExternalStore = useSyncExternalStore; + exports.useTransition = useTransition; exports.version = ReactVersion; + /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ + if ( + typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && + typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === + 'function' + ) { + __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error()); + } + })(); } -} (react_development)); - return react_development; +} (react_development, react_developmentExports)); + return react_developmentExports; } (function (module) { @@ -6334,7 +6711,8 @@ function requireReact_development () { } } (react)); -/** @license React v17.0.2 +/** + * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. @@ -6348,14 +6726,15 @@ var hasRequiredReactJsxRuntime_production_min; function requireReactJsxRuntime_production_min () { if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min; hasRequiredReactJsxRuntime_production_min = 1; -requireObjectAssign();var f=reactExports,g=60103;reactJsxRuntime_production_min.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");reactJsxRuntime_production_min.Fragment=h("react.fragment");}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0}; - function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q; +var f=reactExports,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0}; + function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q; return reactJsxRuntime_production_min; } var reactJsxRuntime_development = {}; -/** @license React v17.0.2 +/** + * @license React * react-jsx-runtime.development.js * * Copyright (c) Facebook, Inc. and its affiliates. @@ -6369,1215 +6748,1327 @@ var hasRequiredReactJsxRuntime_development; function requireReactJsxRuntime_development () { if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development; hasRequiredReactJsxRuntime_development = 1; - (function (exports) { - if (process.env.NODE_ENV !== "production") { - (function() { + if (process.env.NODE_ENV !== "production") { + (function() { + + var React = reactExports; + + // ATTENTION + // When adding new symbols to this file, + // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols' + // The Symbol used to tag the ReactElement-like types. + var REACT_ELEMENT_TYPE = Symbol.for('react.element'); + var REACT_PORTAL_TYPE = Symbol.for('react.portal'); + var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment'); + var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode'); + var REACT_PROFILER_TYPE = Symbol.for('react.profiler'); + var REACT_PROVIDER_TYPE = Symbol.for('react.provider'); + var REACT_CONTEXT_TYPE = Symbol.for('react.context'); + var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref'); + var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense'); + var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list'); + var REACT_MEMO_TYPE = Symbol.for('react.memo'); + var REACT_LAZY_TYPE = Symbol.for('react.lazy'); + var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen'); + var MAYBE_ITERATOR_SYMBOL = Symbol.iterator; + var FAUX_ITERATOR_SYMBOL = '@@iterator'; + function getIteratorFn(maybeIterable) { + if (maybeIterable === null || typeof maybeIterable !== 'object') { + return null; + } + + var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]; + + if (typeof maybeIterator === 'function') { + return maybeIterator; + } + + return null; + } - var React = reactExports; - var _assign = requireObjectAssign(); + var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; - // ATTENTION - // When adding new symbols to this file, - // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols' - // The Symbol used to tag the ReactElement-like types. If there is no native Symbol - // nor polyfill, then a plain number is used for performance. - var REACT_ELEMENT_TYPE = 0xeac7; - var REACT_PORTAL_TYPE = 0xeaca; - exports.Fragment = 0xeacb; - var REACT_STRICT_MODE_TYPE = 0xeacc; - var REACT_PROFILER_TYPE = 0xead2; - var REACT_PROVIDER_TYPE = 0xeacd; - var REACT_CONTEXT_TYPE = 0xeace; - var REACT_FORWARD_REF_TYPE = 0xead0; - var REACT_SUSPENSE_TYPE = 0xead1; - var REACT_SUSPENSE_LIST_TYPE = 0xead8; - var REACT_MEMO_TYPE = 0xead3; - var REACT_LAZY_TYPE = 0xead4; - var REACT_BLOCK_TYPE = 0xead9; - var REACT_SERVER_BLOCK_TYPE = 0xeada; - var REACT_FUNDAMENTAL_TYPE = 0xead5; - var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1; - var REACT_LEGACY_HIDDEN_TYPE = 0xeae3; - - if (typeof Symbol === 'function' && Symbol.for) { - var symbolFor = Symbol.for; - REACT_ELEMENT_TYPE = symbolFor('react.element'); - REACT_PORTAL_TYPE = symbolFor('react.portal'); - exports.Fragment = symbolFor('react.fragment'); - REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode'); - REACT_PROFILER_TYPE = symbolFor('react.profiler'); - REACT_PROVIDER_TYPE = symbolFor('react.provider'); - REACT_CONTEXT_TYPE = symbolFor('react.context'); - REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref'); - REACT_SUSPENSE_TYPE = symbolFor('react.suspense'); - REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list'); - REACT_MEMO_TYPE = symbolFor('react.memo'); - REACT_LAZY_TYPE = symbolFor('react.lazy'); - REACT_BLOCK_TYPE = symbolFor('react.block'); - REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block'); - REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental'); - symbolFor('react.scope'); - symbolFor('react.opaque.id'); - REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode'); - symbolFor('react.offscreen'); - REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden'); - } + function error(format) { + { + { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } - var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator; - var FAUX_ITERATOR_SYMBOL = '@@iterator'; - function getIteratorFn(maybeIterable) { - if (maybeIterable === null || typeof maybeIterable !== 'object') { - return null; - } + printWarning('error', format, args); + } + } + } - var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]; + function printWarning(level, format, args) { + // When changing this logic, you might want to also + // update consoleWithStackDev.www.js as well. + { + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + var stack = ReactDebugCurrentFrame.getStackAddendum(); - if (typeof maybeIterator === 'function') { - return maybeIterator; - } + if (stack !== '') { + format += '%s'; + args = args.concat([stack]); + } // eslint-disable-next-line react-internal/safe-string-coercion - return null; - } - var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; + var argsWithFormat = args.map(function (item) { + return String(item); + }); // Careful: RN currently depends on this prefix - function error(format) { - { - for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { - args[_key2 - 1] = arguments[_key2]; - } + argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it + // breaks IE9: https://github.com/facebook/react/issues/13610 + // eslint-disable-next-line react-internal/no-production-logging - printWarning('error', format, args); - } - } + Function.prototype.apply.call(console[level], console, argsWithFormat); + } + } - function printWarning(level, format, args) { - // When changing this logic, you might want to also - // update consoleWithStackDev.www.js as well. - { - var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; - var stack = ReactDebugCurrentFrame.getStackAddendum(); + // ----------------------------------------------------------------------------- - if (stack !== '') { - format += '%s'; - args = args.concat([stack]); - } + var enableScopeAPI = false; // Experimental Create Event Handle API. + var enableCacheElement = false; + var enableTransitionTracing = false; // No known bugs, but needs performance testing - var argsWithFormat = args.map(function (item) { - return '' + item; - }); // Careful: RN currently depends on this prefix + var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber + // stuff. Intended to enable React core members to more easily debug scheduling + // issues in DEV builds. - argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it - // breaks IE9: https://github.com/facebook/react/issues/13610 - // eslint-disable-next-line react-internal/no-production-logging + var enableDebugTracing = false; // Track which Fiber(s) schedule render work. - Function.prototype.apply.call(console[level], console, argsWithFormat); - } - } + var REACT_MODULE_REFERENCE; - // Filter certain DOM attributes (e.g. src, href) if their values are empty strings. + { + REACT_MODULE_REFERENCE = Symbol.for('react.module.reference'); + } - var enableScopeAPI = false; // Experimental Create Event Handle API. + function isValidElementType(type) { + if (typeof type === 'string' || typeof type === 'function') { + return true; + } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill). - function isValidElementType(type) { - if (typeof type === 'string' || typeof type === 'function') { - return true; - } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill). + if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing ) { + return true; + } - if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) { - return true; - } + if (typeof type === 'object' && type !== null) { + if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object + // types supported by any Flight configuration anywhere since + // we don't know which Flight build this will end up being used + // with. + type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) { + return true; + } + } - if (typeof type === 'object' && type !== null) { - if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) { - return true; - } - } + return false; + } - return false; - } + function getWrappedName(outerType, innerType, wrapperName) { + var displayName = outerType.displayName; - function getWrappedName(outerType, innerType, wrapperName) { - var functionName = innerType.displayName || innerType.name || ''; - return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName); - } + if (displayName) { + return displayName; + } - function getContextName(type) { - return type.displayName || 'Context'; - } + var functionName = innerType.displayName || innerType.name || ''; + return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName; + } // Keep in sync with react-reconciler/getComponentNameFromFiber - function getComponentName(type) { - if (type == null) { - // Host root, text node or just invalid type. - return null; - } - { - if (typeof type.tag === 'number') { - error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.'); - } - } + function getContextName(type) { + return type.displayName || 'Context'; + } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead. - if (typeof type === 'function') { - return type.displayName || type.name || null; - } - if (typeof type === 'string') { - return type; - } + function getComponentNameFromType(type) { + if (type == null) { + // Host root, text node or just invalid type. + return null; + } - switch (type) { - case exports.Fragment: - return 'Fragment'; + { + if (typeof type.tag === 'number') { + error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.'); + } + } - case REACT_PORTAL_TYPE: - return 'Portal'; + if (typeof type === 'function') { + return type.displayName || type.name || null; + } - case REACT_PROFILER_TYPE: - return 'Profiler'; + if (typeof type === 'string') { + return type; + } - case REACT_STRICT_MODE_TYPE: - return 'StrictMode'; + switch (type) { + case REACT_FRAGMENT_TYPE: + return 'Fragment'; - case REACT_SUSPENSE_TYPE: - return 'Suspense'; + case REACT_PORTAL_TYPE: + return 'Portal'; - case REACT_SUSPENSE_LIST_TYPE: - return 'SuspenseList'; - } + case REACT_PROFILER_TYPE: + return 'Profiler'; - if (typeof type === 'object') { - switch (type.$$typeof) { - case REACT_CONTEXT_TYPE: - var context = type; - return getContextName(context) + '.Consumer'; + case REACT_STRICT_MODE_TYPE: + return 'StrictMode'; - case REACT_PROVIDER_TYPE: - var provider = type; - return getContextName(provider._context) + '.Provider'; + case REACT_SUSPENSE_TYPE: + return 'Suspense'; - case REACT_FORWARD_REF_TYPE: - return getWrappedName(type, type.render, 'ForwardRef'); + case REACT_SUSPENSE_LIST_TYPE: + return 'SuspenseList'; - case REACT_MEMO_TYPE: - return getComponentName(type.type); + } - case REACT_BLOCK_TYPE: - return getComponentName(type._render); + if (typeof type === 'object') { + switch (type.$$typeof) { + case REACT_CONTEXT_TYPE: + var context = type; + return getContextName(context) + '.Consumer'; - case REACT_LAZY_TYPE: - { - var lazyComponent = type; - var payload = lazyComponent._payload; - var init = lazyComponent._init; + case REACT_PROVIDER_TYPE: + var provider = type; + return getContextName(provider._context) + '.Provider'; - try { - return getComponentName(init(payload)); - } catch (x) { - return null; - } - } - } - } + case REACT_FORWARD_REF_TYPE: + return getWrappedName(type, type.render, 'ForwardRef'); - return null; - } + case REACT_MEMO_TYPE: + var outerName = type.displayName || null; - // Helpers to patch console.logs to avoid logging during side-effect free - // replaying on render function. This currently only patches the object - // lazily which won't cover if the log function was extracted eagerly. - // We could also eagerly patch the method. - var disabledDepth = 0; - var prevLog; - var prevInfo; - var prevWarn; - var prevError; - var prevGroup; - var prevGroupCollapsed; - var prevGroupEnd; + if (outerName !== null) { + return outerName; + } - function disabledLog() {} + return getComponentNameFromType(type.type) || 'Memo'; - disabledLog.__reactDisabledLog = true; - function disableLogs() { - { - if (disabledDepth === 0) { - /* eslint-disable react-internal/no-production-logging */ - prevLog = console.log; - prevInfo = console.info; - prevWarn = console.warn; - prevError = console.error; - prevGroup = console.group; - prevGroupCollapsed = console.groupCollapsed; - prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099 + case REACT_LAZY_TYPE: + { + var lazyComponent = type; + var payload = lazyComponent._payload; + var init = lazyComponent._init; - var props = { - configurable: true, - enumerable: true, - value: disabledLog, - writable: true - }; // $FlowFixMe Flow thinks console is immutable. + try { + return getComponentNameFromType(init(payload)); + } catch (x) { + return null; + } + } - Object.defineProperties(console, { - info: props, - log: props, - warn: props, - error: props, - group: props, - groupCollapsed: props, - groupEnd: props - }); - /* eslint-enable react-internal/no-production-logging */ - } - - disabledDepth++; - } - } - function reenableLogs() { - { - disabledDepth--; - - if (disabledDepth === 0) { - /* eslint-disable react-internal/no-production-logging */ - var props = { - configurable: true, - enumerable: true, - writable: true - }; // $FlowFixMe Flow thinks console is immutable. - - Object.defineProperties(console, { - log: _assign({}, props, { - value: prevLog - }), - info: _assign({}, props, { - value: prevInfo - }), - warn: _assign({}, props, { - value: prevWarn - }), - error: _assign({}, props, { - value: prevError - }), - group: _assign({}, props, { - value: prevGroup - }), - groupCollapsed: _assign({}, props, { - value: prevGroupCollapsed - }), - groupEnd: _assign({}, props, { - value: prevGroupEnd - }) - }); - /* eslint-enable react-internal/no-production-logging */ - } - - if (disabledDepth < 0) { - error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.'); - } - } - } - - var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; - var prefix; - function describeBuiltInComponentFrame(name, source, ownerFn) { - { - if (prefix === undefined) { - // Extract the VM specific prefix used by each line. - try { - throw Error(); - } catch (x) { - var match = x.stack.trim().match(/\n( *(at )?)/); - prefix = match && match[1] || ''; - } - } // We use the prefix to ensure our stacks line up with native stack frames. - - - return '\n' + prefix + name; - } - } - var reentry = false; - var componentFrameCache; - - { - var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map; - componentFrameCache = new PossiblyWeakMap(); - } - - function describeNativeComponentFrame(fn, construct) { - // If something asked for a stack inside a fake render, it should get ignored. - if (!fn || reentry) { - return ''; - } - - { - var frame = componentFrameCache.get(fn); - - if (frame !== undefined) { - return frame; - } - } - - var control; - reentry = true; - var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined. - - Error.prepareStackTrace = undefined; - var previousDispatcher; - - { - previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function - // for warnings. - - ReactCurrentDispatcher.current = null; - disableLogs(); - } - - try { - // This should throw. - if (construct) { - // Something should be setting the props in the constructor. - var Fake = function () { - throw Error(); - }; // $FlowFixMe - - - Object.defineProperty(Fake.prototype, 'props', { - set: function () { - // We use a throwing setter instead of frozen or non-writable props - // because that won't throw in a non-strict mode function. - throw Error(); - } - }); - - if (typeof Reflect === 'object' && Reflect.construct) { - // We construct a different control for this case to include any extra - // frames added by the construct call. - try { - Reflect.construct(Fake, []); - } catch (x) { - control = x; - } + // eslint-disable-next-line no-fallthrough + } + } - Reflect.construct(fn, [], Fake); - } else { - try { - Fake.call(); - } catch (x) { - control = x; - } + return null; + } - fn.call(Fake.prototype); - } - } else { - try { - throw Error(); - } catch (x) { - control = x; - } + var assign = Object.assign; + + // Helpers to patch console.logs to avoid logging during side-effect free + // replaying on render function. This currently only patches the object + // lazily which won't cover if the log function was extracted eagerly. + // We could also eagerly patch the method. + var disabledDepth = 0; + var prevLog; + var prevInfo; + var prevWarn; + var prevError; + var prevGroup; + var prevGroupCollapsed; + var prevGroupEnd; + + function disabledLog() {} + + disabledLog.__reactDisabledLog = true; + function disableLogs() { + { + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + prevLog = console.log; + prevInfo = console.info; + prevWarn = console.warn; + prevError = console.error; + prevGroup = console.group; + prevGroupCollapsed = console.groupCollapsed; + prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099 + + var props = { + configurable: true, + enumerable: true, + value: disabledLog, + writable: true + }; // $FlowFixMe Flow thinks console is immutable. + + Object.defineProperties(console, { + info: props, + log: props, + warn: props, + error: props, + group: props, + groupCollapsed: props, + groupEnd: props + }); + /* eslint-enable react-internal/no-production-logging */ + } - fn(); - } - } catch (sample) { - // This is inlined manually because closure doesn't do it for us. - if (sample && control && typeof sample.stack === 'string') { - // This extracts the first frame from the sample that isn't also in the control. - // Skipping one frame that we assume is the frame that calls the two. - var sampleLines = sample.stack.split('\n'); - var controlLines = control.stack.split('\n'); - var s = sampleLines.length - 1; - var c = controlLines.length - 1; + disabledDepth++; + } + } + function reenableLogs() { + { + disabledDepth--; + + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + var props = { + configurable: true, + enumerable: true, + writable: true + }; // $FlowFixMe Flow thinks console is immutable. + + Object.defineProperties(console, { + log: assign({}, props, { + value: prevLog + }), + info: assign({}, props, { + value: prevInfo + }), + warn: assign({}, props, { + value: prevWarn + }), + error: assign({}, props, { + value: prevError + }), + group: assign({}, props, { + value: prevGroup + }), + groupCollapsed: assign({}, props, { + value: prevGroupCollapsed + }), + groupEnd: assign({}, props, { + value: prevGroupEnd + }) + }); + /* eslint-enable react-internal/no-production-logging */ + } - while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) { - // We expect at least one stack frame to be shared. - // Typically this will be the root most one. However, stack frames may be - // cut off due to maximum stack limits. In this case, one maybe cut off - // earlier than the other. We assume that the sample is longer or the same - // and there for cut off earlier. So we should find the root most frame in - // the sample somewhere in the control. - c--; - } + if (disabledDepth < 0) { + error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.'); + } + } + } - for (; s >= 1 && c >= 0; s--, c--) { - // Next we find the first one that isn't the same which should be the - // frame that called our sample function and the control. - if (sampleLines[s] !== controlLines[c]) { - // In V8, the first line is describing the message but other VMs don't. - // If we're about to return the first line, and the control is also on the same - // line, that's a pretty good indicator that our sample threw at same line as - // the control. I.e. before we entered the sample frame. So we ignore this result. - // This can happen if you passed a class to function component, or non-function. - if (s !== 1 || c !== 1) { - do { - s--; - c--; // We may still have similar intermediate frames from the construct call. - // The next one that isn't the same should be our match though. + var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; + var prefix; + function describeBuiltInComponentFrame(name, source, ownerFn) { + { + if (prefix === undefined) { + // Extract the VM specific prefix used by each line. + try { + throw Error(); + } catch (x) { + var match = x.stack.trim().match(/\n( *(at )?)/); + prefix = match && match[1] || ''; + } + } // We use the prefix to ensure our stacks line up with native stack frames. - if (c < 0 || sampleLines[s] !== controlLines[c]) { - // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. - var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); - { - if (typeof fn === 'function') { - componentFrameCache.set(fn, _frame); - } - } // Return the line we found. + return '\n' + prefix + name; + } + } + var reentry = false; + var componentFrameCache; + { + var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map; + componentFrameCache = new PossiblyWeakMap(); + } - return _frame; - } - } while (s >= 1 && c >= 0); - } + function describeNativeComponentFrame(fn, construct) { + // If something asked for a stack inside a fake render, it should get ignored. + if ( !fn || reentry) { + return ''; + } - break; - } - } - } - } finally { - reentry = false; + { + var frame = componentFrameCache.get(fn); - { - ReactCurrentDispatcher.current = previousDispatcher; - reenableLogs(); - } + if (frame !== undefined) { + return frame; + } + } - Error.prepareStackTrace = previousPrepareStackTrace; - } // Fallback to just using the name if we couldn't make it throw. + var control; + reentry = true; + var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined. + Error.prepareStackTrace = undefined; + var previousDispatcher; - var name = fn ? fn.displayName || fn.name : ''; - var syntheticFrame = name ? describeBuiltInComponentFrame(name) : ''; + { + previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function + // for warnings. - { - if (typeof fn === 'function') { - componentFrameCache.set(fn, syntheticFrame); - } - } + ReactCurrentDispatcher.current = null; + disableLogs(); + } - return syntheticFrame; - } - function describeFunctionComponentFrame(fn, source, ownerFn) { - { - return describeNativeComponentFrame(fn, false); - } - } + try { + // This should throw. + if (construct) { + // Something should be setting the props in the constructor. + var Fake = function () { + throw Error(); + }; // $FlowFixMe - function shouldConstruct(Component) { - var prototype = Component.prototype; - return !!(prototype && prototype.isReactComponent); - } - function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) { + Object.defineProperty(Fake.prototype, 'props', { + set: function () { + // We use a throwing setter instead of frozen or non-writable props + // because that won't throw in a non-strict mode function. + throw Error(); + } + }); + + if (typeof Reflect === 'object' && Reflect.construct) { + // We construct a different control for this case to include any extra + // frames added by the construct call. + try { + Reflect.construct(Fake, []); + } catch (x) { + control = x; + } - if (type == null) { - return ''; - } + Reflect.construct(fn, [], Fake); + } else { + try { + Fake.call(); + } catch (x) { + control = x; + } - if (typeof type === 'function') { - { - return describeNativeComponentFrame(type, shouldConstruct(type)); - } - } + fn.call(Fake.prototype); + } + } else { + try { + throw Error(); + } catch (x) { + control = x; + } - if (typeof type === 'string') { - return describeBuiltInComponentFrame(type); - } + fn(); + } + } catch (sample) { + // This is inlined manually because closure doesn't do it for us. + if (sample && control && typeof sample.stack === 'string') { + // This extracts the first frame from the sample that isn't also in the control. + // Skipping one frame that we assume is the frame that calls the two. + var sampleLines = sample.stack.split('\n'); + var controlLines = control.stack.split('\n'); + var s = sampleLines.length - 1; + var c = controlLines.length - 1; + + while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) { + // We expect at least one stack frame to be shared. + // Typically this will be the root most one. However, stack frames may be + // cut off due to maximum stack limits. In this case, one maybe cut off + // earlier than the other. We assume that the sample is longer or the same + // and there for cut off earlier. So we should find the root most frame in + // the sample somewhere in the control. + c--; + } - switch (type) { - case REACT_SUSPENSE_TYPE: - return describeBuiltInComponentFrame('Suspense'); + for (; s >= 1 && c >= 0; s--, c--) { + // Next we find the first one that isn't the same which should be the + // frame that called our sample function and the control. + if (sampleLines[s] !== controlLines[c]) { + // In V8, the first line is describing the message but other VMs don't. + // If we're about to return the first line, and the control is also on the same + // line, that's a pretty good indicator that our sample threw at same line as + // the control. I.e. before we entered the sample frame. So we ignore this result. + // This can happen if you passed a class to function component, or non-function. + if (s !== 1 || c !== 1) { + do { + s--; + c--; // We may still have similar intermediate frames from the construct call. + // The next one that isn't the same should be our match though. + + if (c < 0 || sampleLines[s] !== controlLines[c]) { + // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. + var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "" + // but we have a user-provided "displayName" + // splice it in to make the stack more readable. + + + if (fn.displayName && _frame.includes('')) { + _frame = _frame.replace('', fn.displayName); + } + + { + if (typeof fn === 'function') { + componentFrameCache.set(fn, _frame); + } + } // Return the line we found. - case REACT_SUSPENSE_LIST_TYPE: - return describeBuiltInComponentFrame('SuspenseList'); - } - if (typeof type === 'object') { - switch (type.$$typeof) { - case REACT_FORWARD_REF_TYPE: - return describeFunctionComponentFrame(type.render); + return _frame; + } + } while (s >= 1 && c >= 0); + } - case REACT_MEMO_TYPE: - // Memo may contain any component type so we recursively resolve it. - return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn); + break; + } + } + } + } finally { + reentry = false; - case REACT_BLOCK_TYPE: - return describeFunctionComponentFrame(type._render); + { + ReactCurrentDispatcher.current = previousDispatcher; + reenableLogs(); + } - case REACT_LAZY_TYPE: - { - var lazyComponent = type; - var payload = lazyComponent._payload; - var init = lazyComponent._init; + Error.prepareStackTrace = previousPrepareStackTrace; + } // Fallback to just using the name if we couldn't make it throw. - try { - // Lazy may contain any component type so we recursively resolve it. - return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn); - } catch (x) {} - } - } - } - return ''; - } + var name = fn ? fn.displayName || fn.name : ''; + var syntheticFrame = name ? describeBuiltInComponentFrame(name) : ''; - var loggedTypeFailures = {}; - var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + { + if (typeof fn === 'function') { + componentFrameCache.set(fn, syntheticFrame); + } + } - function setCurrentlyValidatingElement(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null); - ReactDebugCurrentFrame.setExtraStackFrame(stack); - } else { - ReactDebugCurrentFrame.setExtraStackFrame(null); - } - } - } + return syntheticFrame; + } + function describeFunctionComponentFrame(fn, source, ownerFn) { + { + return describeNativeComponentFrame(fn, false); + } + } - function checkPropTypes(typeSpecs, values, location, componentName, element) { - { - // $FlowFixMe This is okay but Flow doesn't know it. - var has = Function.call.bind(Object.prototype.hasOwnProperty); + function shouldConstruct(Component) { + var prototype = Component.prototype; + return !!(prototype && prototype.isReactComponent); + } - for (var typeSpecName in typeSpecs) { - if (has(typeSpecs, typeSpecName)) { - var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to - // fail the render phase where it didn't fail before. So we log it. - // After these have been cleaned up, we'll let them throw. + function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) { - try { - // This is intentionally an invariant that gets caught. It's the same - // behavior as without this statement except with a better message. - if (typeof typeSpecs[typeSpecName] !== 'function') { - var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'); - err.name = 'Invariant Violation'; - throw err; - } + if (type == null) { + return ''; + } - error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'); - } catch (ex) { - error$1 = ex; - } + if (typeof type === 'function') { + { + return describeNativeComponentFrame(type, shouldConstruct(type)); + } + } - if (error$1 && !(error$1 instanceof Error)) { - setCurrentlyValidatingElement(element); + if (typeof type === 'string') { + return describeBuiltInComponentFrame(type); + } - error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1); + switch (type) { + case REACT_SUSPENSE_TYPE: + return describeBuiltInComponentFrame('Suspense'); - setCurrentlyValidatingElement(null); - } + case REACT_SUSPENSE_LIST_TYPE: + return describeBuiltInComponentFrame('SuspenseList'); + } - if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) { - // Only monitor this failure once because there tends to be a lot of the - // same error. - loggedTypeFailures[error$1.message] = true; - setCurrentlyValidatingElement(element); + if (typeof type === 'object') { + switch (type.$$typeof) { + case REACT_FORWARD_REF_TYPE: + return describeFunctionComponentFrame(type.render); - error('Failed %s type: %s', location, error$1.message); + case REACT_MEMO_TYPE: + // Memo may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn); - setCurrentlyValidatingElement(null); - } - } - } - } - } + case REACT_LAZY_TYPE: + { + var lazyComponent = type; + var payload = lazyComponent._payload; + var init = lazyComponent._init; - var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; - var hasOwnProperty = Object.prototype.hasOwnProperty; - var RESERVED_PROPS = { - key: true, - ref: true, - __self: true, - __source: true - }; - var specialPropKeyWarningShown; - var specialPropRefWarningShown; - var didWarnAboutStringRefs; + try { + // Lazy may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn); + } catch (x) {} + } + } + } - { - didWarnAboutStringRefs = {}; - } + return ''; + } - function hasValidRef(config) { - { - if (hasOwnProperty.call(config, 'ref')) { - var getter = Object.getOwnPropertyDescriptor(config, 'ref').get; + var hasOwnProperty = Object.prototype.hasOwnProperty; - if (getter && getter.isReactWarning) { - return false; - } - } - } + var loggedTypeFailures = {}; + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; - return config.ref !== undefined; - } + function setCurrentlyValidatingElement(element) { + { + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null); + ReactDebugCurrentFrame.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame.setExtraStackFrame(null); + } + } + } - function hasValidKey(config) { - { - if (hasOwnProperty.call(config, 'key')) { - var getter = Object.getOwnPropertyDescriptor(config, 'key').get; + function checkPropTypes(typeSpecs, values, location, componentName, element) { + { + // $FlowFixMe This is okay but Flow doesn't know it. + var has = Function.call.bind(hasOwnProperty); + + for (var typeSpecName in typeSpecs) { + if (has(typeSpecs, typeSpecName)) { + var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to + // fail the render phase where it didn't fail before. So we log it. + // After these have been cleaned up, we'll let them throw. + + try { + // This is intentionally an invariant that gets caught. It's the same + // behavior as without this statement except with a better message. + if (typeof typeSpecs[typeSpecName] !== 'function') { + // eslint-disable-next-line react-internal/prod-error-codes + var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'); + err.name = 'Invariant Violation'; + throw err; + } - if (getter && getter.isReactWarning) { - return false; - } - } - } + error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'); + } catch (ex) { + error$1 = ex; + } - return config.key !== undefined; - } + if (error$1 && !(error$1 instanceof Error)) { + setCurrentlyValidatingElement(element); - function warnIfStringRefCannotBeAutoConverted(config, self) { - { - if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) { - var componentName = getComponentName(ReactCurrentOwner.current.type); + error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1); - if (!didWarnAboutStringRefs[componentName]) { - error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentName(ReactCurrentOwner.current.type), config.ref); + setCurrentlyValidatingElement(null); + } - didWarnAboutStringRefs[componentName] = true; - } - } - } - } + if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) { + // Only monitor this failure once because there tends to be a lot of the + // same error. + loggedTypeFailures[error$1.message] = true; + setCurrentlyValidatingElement(element); - function defineKeyPropWarningGetter(props, displayName) { - { - var warnAboutAccessingKey = function () { - if (!specialPropKeyWarningShown) { - specialPropKeyWarningShown = true; + error('Failed %s type: %s', location, error$1.message); - error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName); - } - }; + setCurrentlyValidatingElement(null); + } + } + } + } + } - warnAboutAccessingKey.isReactWarning = true; - Object.defineProperty(props, 'key', { - get: warnAboutAccessingKey, - configurable: true - }); - } - } + var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare - function defineRefPropWarningGetter(props, displayName) { - { - var warnAboutAccessingRef = function () { - if (!specialPropRefWarningShown) { - specialPropRefWarningShown = true; + function isArray(a) { + return isArrayImpl(a); + } - error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName); - } - }; + /* + * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol + * and Temporal.* types. See https://github.com/facebook/react/pull/22064. + * + * The functions in this module will throw an easier-to-understand, + * easier-to-debug exception with a clear errors message message explaining the + * problem. (Instead of a confusing exception thrown inside the implementation + * of the `value` object). + */ + // $FlowFixMe only called in DEV, so void return is not possible. + function typeName(value) { + { + // toStringTag is needed for namespaced types like Temporal.Instant + var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag; + var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object'; + return type; + } + } // $FlowFixMe only called in DEV, so void return is not possible. + + + function willCoercionThrow(value) { + { + try { + testStringCoercion(value); + return false; + } catch (e) { + return true; + } + } + } - warnAboutAccessingRef.isReactWarning = true; - Object.defineProperty(props, 'ref', { - get: warnAboutAccessingRef, - configurable: true - }); - } - } - /** - * Factory method to create a new React element. This no longer adheres to - * the class pattern, so do not use new to call it. Also, instanceof check - * will not work. Instead test $$typeof field against Symbol.for('react.element') to check - * if something is a React Element. - * - * @param {*} type - * @param {*} props - * @param {*} key - * @param {string|object} ref - * @param {*} owner - * @param {*} self A *temporary* helper to detect places where `this` is - * different from the `owner` when React.createElement is called, so that we - * can warn. We want to get rid of owner and replace string `ref`s with arrow - * functions, and as long as `this` and owner are the same, there will be no - * change in behavior. - * @param {*} source An annotation object (added by a transpiler or otherwise) - * indicating filename, line number, and/or other information. - * @internal - */ + function testStringCoercion(value) { + // If you ended up here by following an exception call stack, here's what's + // happened: you supplied an object or symbol value to React (as a prop, key, + // DOM attribute, CSS property, string ref, etc.) and when React tried to + // coerce it to a string using `'' + value`, an exception was thrown. + // + // The most common types that will cause this exception are `Symbol` instances + // and Temporal objects like `Temporal.Instant`. But any object that has a + // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this + // exception. (Library authors do this to prevent users from using built-in + // numeric operators like `+` or comparison operators like `>=` because custom + // methods are needed to perform accurate arithmetic or comparison.) + // + // To fix the problem, coerce this object or symbol value to a string before + // passing it to React. The most reliable way is usually `String(value)`. + // + // To find which value is throwing, check the browser or debugger console. + // Before this exception was thrown, there should be `console.error` output + // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the + // problem and how that type was used: key, atrribute, input value prop, etc. + // In most cases, this console output also shows the component and its + // ancestor components where the exception happened. + // + // eslint-disable-next-line react-internal/safe-string-coercion + return '' + value; + } + function checkKeyStringCoercion(value) { + { + if (willCoercionThrow(value)) { + error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value)); + return testStringCoercion(value); // throw (to help callers find troubleshooting comments) + } + } + } - var ReactElement = function (type, key, ref, self, source, owner, props) { - var element = { - // This tag allows us to uniquely identify this as a React Element - $$typeof: REACT_ELEMENT_TYPE, - // Built-in properties that belong on the element - type: type, - key: key, - ref: ref, - props: props, - // Record the component responsible for creating this element. - _owner: owner - }; + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; + var RESERVED_PROPS = { + key: true, + ref: true, + __self: true, + __source: true + }; + var specialPropKeyWarningShown; + var specialPropRefWarningShown; + var didWarnAboutStringRefs; - { - // The validation flag is currently mutative. We put it on - // an external backing store so that we can freeze the whole object. - // This can be replaced with a WeakMap once they are implemented in - // commonly used development environments. - element._store = {}; // To make comparing ReactElements easier for testing purposes, we make - // the validation flag non-enumerable (where possible, which should - // include every environment we run tests in), so the test framework - // ignores it. + { + didWarnAboutStringRefs = {}; + } - Object.defineProperty(element._store, 'validated', { - configurable: false, - enumerable: false, - writable: true, - value: false - }); // self and source are DEV only properties. + function hasValidRef(config) { + { + if (hasOwnProperty.call(config, 'ref')) { + var getter = Object.getOwnPropertyDescriptor(config, 'ref').get; - Object.defineProperty(element, '_self', { - configurable: false, - enumerable: false, - writable: false, - value: self - }); // Two elements created in two different places should be considered - // equal for testing purposes and therefore we hide it from enumeration. + if (getter && getter.isReactWarning) { + return false; + } + } + } - Object.defineProperty(element, '_source', { - configurable: false, - enumerable: false, - writable: false, - value: source - }); + return config.ref !== undefined; + } - if (Object.freeze) { - Object.freeze(element.props); - Object.freeze(element); - } - } + function hasValidKey(config) { + { + if (hasOwnProperty.call(config, 'key')) { + var getter = Object.getOwnPropertyDescriptor(config, 'key').get; - return element; - }; - /** - * https://github.com/reactjs/rfcs/pull/107 - * @param {*} type - * @param {object} props - * @param {string} key - */ + if (getter && getter.isReactWarning) { + return false; + } + } + } - function jsxDEV(type, config, maybeKey, source, self) { - { - var propName; // Reserved names are extracted - - var props = {}; - var key = null; - var ref = null; // Currently, key can be spread in as a prop. This causes a potential - // issue if key is also explicitly declared (ie.
- // or
). We want to deprecate key spread, - // but as an intermediary step, we will use jsxDEV for everything except - //
, because we aren't currently able to tell if - // key is explicitly declared to be undefined or not. - - if (maybeKey !== undefined) { - key = '' + maybeKey; - } + return config.key !== undefined; + } - if (hasValidKey(config)) { - key = '' + config.key; - } + function warnIfStringRefCannotBeAutoConverted(config, self) { + { + if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) { + var componentName = getComponentNameFromType(ReactCurrentOwner.current.type); - if (hasValidRef(config)) { - ref = config.ref; - warnIfStringRefCannotBeAutoConverted(config, self); - } // Remaining properties are added to a new props object + if (!didWarnAboutStringRefs[componentName]) { + error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentNameFromType(ReactCurrentOwner.current.type), config.ref); + didWarnAboutStringRefs[componentName] = true; + } + } + } + } - for (propName in config) { - if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) { - props[propName] = config[propName]; - } - } // Resolve default props + function defineKeyPropWarningGetter(props, displayName) { + { + var warnAboutAccessingKey = function () { + if (!specialPropKeyWarningShown) { + specialPropKeyWarningShown = true; + error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName); + } + }; - if (type && type.defaultProps) { - var defaultProps = type.defaultProps; + warnAboutAccessingKey.isReactWarning = true; + Object.defineProperty(props, 'key', { + get: warnAboutAccessingKey, + configurable: true + }); + } + } - for (propName in defaultProps) { - if (props[propName] === undefined) { - props[propName] = defaultProps[propName]; - } - } - } + function defineRefPropWarningGetter(props, displayName) { + { + var warnAboutAccessingRef = function () { + if (!specialPropRefWarningShown) { + specialPropRefWarningShown = true; - if (key || ref) { - var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type; + error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName); + } + }; - if (key) { - defineKeyPropWarningGetter(props, displayName); - } + warnAboutAccessingRef.isReactWarning = true; + Object.defineProperty(props, 'ref', { + get: warnAboutAccessingRef, + configurable: true + }); + } + } + /** + * Factory method to create a new React element. This no longer adheres to + * the class pattern, so do not use new to call it. Also, instanceof check + * will not work. Instead test $$typeof field against Symbol.for('react.element') to check + * if something is a React Element. + * + * @param {*} type + * @param {*} props + * @param {*} key + * @param {string|object} ref + * @param {*} owner + * @param {*} self A *temporary* helper to detect places where `this` is + * different from the `owner` when React.createElement is called, so that we + * can warn. We want to get rid of owner and replace string `ref`s with arrow + * functions, and as long as `this` and owner are the same, there will be no + * change in behavior. + * @param {*} source An annotation object (added by a transpiler or otherwise) + * indicating filename, line number, and/or other information. + * @internal + */ + + + var ReactElement = function (type, key, ref, self, source, owner, props) { + var element = { + // This tag allows us to uniquely identify this as a React Element + $$typeof: REACT_ELEMENT_TYPE, + // Built-in properties that belong on the element + type: type, + key: key, + ref: ref, + props: props, + // Record the component responsible for creating this element. + _owner: owner + }; + + { + // The validation flag is currently mutative. We put it on + // an external backing store so that we can freeze the whole object. + // This can be replaced with a WeakMap once they are implemented in + // commonly used development environments. + element._store = {}; // To make comparing ReactElements easier for testing purposes, we make + // the validation flag non-enumerable (where possible, which should + // include every environment we run tests in), so the test framework + // ignores it. + + Object.defineProperty(element._store, 'validated', { + configurable: false, + enumerable: false, + writable: true, + value: false + }); // self and source are DEV only properties. + + Object.defineProperty(element, '_self', { + configurable: false, + enumerable: false, + writable: false, + value: self + }); // Two elements created in two different places should be considered + // equal for testing purposes and therefore we hide it from enumeration. + + Object.defineProperty(element, '_source', { + configurable: false, + enumerable: false, + writable: false, + value: source + }); + + if (Object.freeze) { + Object.freeze(element.props); + Object.freeze(element); + } + } - if (ref) { - defineRefPropWarningGetter(props, displayName); - } - } + return element; + }; + /** + * https://github.com/reactjs/rfcs/pull/107 + * @param {*} type + * @param {object} props + * @param {string} key + */ + + function jsxDEV(type, config, maybeKey, source, self) { + { + var propName; // Reserved names are extracted + + var props = {}; + var key = null; + var ref = null; // Currently, key can be spread in as a prop. This causes a potential + // issue if key is also explicitly declared (ie.
+ // or
). We want to deprecate key spread, + // but as an intermediary step, we will use jsxDEV for everything except + //
, because we aren't currently able to tell if + // key is explicitly declared to be undefined or not. + + if (maybeKey !== undefined) { + { + checkKeyStringCoercion(maybeKey); + } - return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props); - } - } + key = '' + maybeKey; + } - var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner; - var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame; + if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } - function setCurrentlyValidatingElement$1(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null); - ReactDebugCurrentFrame$1.setExtraStackFrame(stack); - } else { - ReactDebugCurrentFrame$1.setExtraStackFrame(null); - } - } - } + key = '' + config.key; + } + + if (hasValidRef(config)) { + ref = config.ref; + warnIfStringRefCannotBeAutoConverted(config, self); + } // Remaining properties are added to a new props object + + + for (propName in config) { + if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) { + props[propName] = config[propName]; + } + } // Resolve default props + + + if (type && type.defaultProps) { + var defaultProps = type.defaultProps; + + for (propName in defaultProps) { + if (props[propName] === undefined) { + props[propName] = defaultProps[propName]; + } + } + } - var propTypesMisspellWarningShown; + if (key || ref) { + var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type; - { - propTypesMisspellWarningShown = false; - } - /** - * Verifies the object is a ReactElement. - * See https://reactjs.org/docs/react-api.html#isvalidelement - * @param {?object} object - * @return {boolean} True if `object` is a ReactElement. - * @final - */ + if (key) { + defineKeyPropWarningGetter(props, displayName); + } - function isValidElement(object) { - { - return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE; - } - } + if (ref) { + defineRefPropWarningGetter(props, displayName); + } + } - function getDeclarationErrorAddendum() { - { - if (ReactCurrentOwner$1.current) { - var name = getComponentName(ReactCurrentOwner$1.current.type); + return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props); + } + } - if (name) { - return '\n\nCheck the render method of `' + name + '`.'; - } - } + var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner; + var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame; - return ''; - } - } + function setCurrentlyValidatingElement$1(element) { + { + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null); + ReactDebugCurrentFrame$1.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame$1.setExtraStackFrame(null); + } + } + } - function getSourceInfoErrorAddendum(source) { - { - if (source !== undefined) { - var fileName = source.fileName.replace(/^.*[\\\/]/, ''); - var lineNumber = source.lineNumber; - return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.'; - } + var propTypesMisspellWarningShown; - return ''; - } - } - /** - * Warn if there's no key explicitly set on dynamic arrays of children or - * object keys are not valid. This allows us to keep track of children between - * updates. - */ + { + propTypesMisspellWarningShown = false; + } + /** + * Verifies the object is a ReactElement. + * See https://reactjs.org/docs/react-api.html#isvalidelement + * @param {?object} object + * @return {boolean} True if `object` is a ReactElement. + * @final + */ + + + function isValidElement(object) { + { + return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE; + } + } + function getDeclarationErrorAddendum() { + { + if (ReactCurrentOwner$1.current) { + var name = getComponentNameFromType(ReactCurrentOwner$1.current.type); - var ownerHasKeyUseWarning = {}; + if (name) { + return '\n\nCheck the render method of `' + name + '`.'; + } + } - function getCurrentComponentErrorInfo(parentType) { - { - var info = getDeclarationErrorAddendum(); + return ''; + } + } - if (!info) { - var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name; + function getSourceInfoErrorAddendum(source) { + { + if (source !== undefined) { + var fileName = source.fileName.replace(/^.*[\\\/]/, ''); + var lineNumber = source.lineNumber; + return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.'; + } - if (parentName) { - info = "\n\nCheck the top-level render call using <" + parentName + ">."; - } - } + return ''; + } + } + /** + * Warn if there's no key explicitly set on dynamic arrays of children or + * object keys are not valid. This allows us to keep track of children between + * updates. + */ - return info; - } - } - /** - * Warn if the element doesn't have an explicit key assigned to it. - * This element is in an array. The array could grow and shrink or be - * reordered. All children that haven't already been validated are required to - * have a "key" property assigned to it. Error statuses are cached so a warning - * will only be shown once. - * - * @internal - * @param {ReactElement} element Element that requires a key. - * @param {*} parentType element's parent's type. - */ + var ownerHasKeyUseWarning = {}; - function validateExplicitKey(element, parentType) { - { - if (!element._store || element._store.validated || element.key != null) { - return; - } + function getCurrentComponentErrorInfo(parentType) { + { + var info = getDeclarationErrorAddendum(); - element._store.validated = true; - var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType); + if (!info) { + var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name; - if (ownerHasKeyUseWarning[currentComponentErrorInfo]) { - return; - } + if (parentName) { + info = "\n\nCheck the top-level render call using <" + parentName + ">."; + } + } - ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a - // property, it may be the creator of the child that's responsible for - // assigning it a key. + return info; + } + } + /** + * Warn if the element doesn't have an explicit key assigned to it. + * This element is in an array. The array could grow and shrink or be + * reordered. All children that haven't already been validated are required to + * have a "key" property assigned to it. Error statuses are cached so a warning + * will only be shown once. + * + * @internal + * @param {ReactElement} element Element that requires a key. + * @param {*} parentType element's parent's type. + */ + + + function validateExplicitKey(element, parentType) { + { + if (!element._store || element._store.validated || element.key != null) { + return; + } - var childOwner = ''; + element._store.validated = true; + var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType); - if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) { - // Give the component that originally created this child. - childOwner = " It was passed a child from " + getComponentName(element._owner.type) + "."; - } + if (ownerHasKeyUseWarning[currentComponentErrorInfo]) { + return; + } - setCurrentlyValidatingElement$1(element); + ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a + // property, it may be the creator of the child that's responsible for + // assigning it a key. - error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner); + var childOwner = ''; - setCurrentlyValidatingElement$1(null); - } - } - /** - * Ensure that every element either is passed in a static location, in an - * array with an explicit keys property defined, or in an object literal - * with valid key property. - * - * @internal - * @param {ReactNode} node Statically passed child of any type. - * @param {*} parentType node's parent's type. - */ + if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) { + // Give the component that originally created this child. + childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + "."; + } + setCurrentlyValidatingElement$1(element); - function validateChildKeys(node, parentType) { - { - if (typeof node !== 'object') { - return; - } + error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner); - if (Array.isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + setCurrentlyValidatingElement$1(null); + } + } + /** + * Ensure that every element either is passed in a static location, in an + * array with an explicit keys property defined, or in an object literal + * with valid key property. + * + * @internal + * @param {ReactNode} node Statically passed child of any type. + * @param {*} parentType node's parent's type. + */ + + + function validateChildKeys(node, parentType) { + { + if (typeof node !== 'object') { + return; + } - if (isValidElement(child)) { - validateExplicitKey(child, parentType); - } - } - } else if (isValidElement(node)) { - // This element was passed in a valid location. - if (node._store) { - node._store.validated = true; - } - } else if (node) { - var iteratorFn = getIteratorFn(node); - - if (typeof iteratorFn === 'function') { - // Entry iterators used to provide implicit keys, - // but now we print a separate warning for them later. - if (iteratorFn !== node.entries) { - var iterator = iteratorFn.call(node); - var step; - - while (!(step = iterator.next()).done) { - if (isValidElement(step.value)) { - validateExplicitKey(step.value, parentType); - } - } - } - } - } - } - } - /** - * Given an element, validate that its props follow the propTypes definition, - * provided by the type. - * - * @param {ReactElement} element - */ + if (isArray(node)) { + for (var i = 0; i < node.length; i++) { + var child = node[i]; + if (isValidElement(child)) { + validateExplicitKey(child, parentType); + } + } + } else if (isValidElement(node)) { + // This element was passed in a valid location. + if (node._store) { + node._store.validated = true; + } + } else if (node) { + var iteratorFn = getIteratorFn(node); + + if (typeof iteratorFn === 'function') { + // Entry iterators used to provide implicit keys, + // but now we print a separate warning for them later. + if (iteratorFn !== node.entries) { + var iterator = iteratorFn.call(node); + var step; + + while (!(step = iterator.next()).done) { + if (isValidElement(step.value)) { + validateExplicitKey(step.value, parentType); + } + } + } + } + } + } + } + /** + * Given an element, validate that its props follow the propTypes definition, + * provided by the type. + * + * @param {ReactElement} element + */ - function validatePropTypes(element) { - { - var type = element.type; - if (type === null || type === undefined || typeof type === 'string') { - return; - } + function validatePropTypes(element) { + { + var type = element.type; - var propTypes; + if (type === null || type === undefined || typeof type === 'string') { + return; + } - if (typeof type === 'function') { - propTypes = type.propTypes; - } else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. - // Inner props are checked in the reconciler. - type.$$typeof === REACT_MEMO_TYPE)) { - propTypes = type.propTypes; - } else { - return; - } + var propTypes; - if (propTypes) { - // Intentionally inside to avoid triggering lazy initializers: - var name = getComponentName(type); - checkPropTypes(propTypes, element.props, 'prop', name, element); - } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) { - propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: + if (typeof type === 'function') { + propTypes = type.propTypes; + } else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. + // Inner props are checked in the reconciler. + type.$$typeof === REACT_MEMO_TYPE)) { + propTypes = type.propTypes; + } else { + return; + } - var _name = getComponentName(type); + if (propTypes) { + // Intentionally inside to avoid triggering lazy initializers: + var name = getComponentNameFromType(type); + checkPropTypes(propTypes, element.props, 'prop', name, element); + } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) { + propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: - error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown'); - } + var _name = getComponentNameFromType(type); - if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) { - error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.'); - } - } - } - /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment - */ + error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown'); + } + if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) { + error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.'); + } + } + } + /** + * Given a fragment, validate that it can only be provided with fragment props + * @param {ReactElement} fragment + */ - function validateFragmentProps(fragment) { - { - var keys = Object.keys(fragment.props); - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; + function validateFragmentProps(fragment) { + { + var keys = Object.keys(fragment.props); - if (key !== 'children' && key !== 'key') { - setCurrentlyValidatingElement$1(fragment); + for (var i = 0; i < keys.length; i++) { + var key = keys[i]; - error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key); + if (key !== 'children' && key !== 'key') { + setCurrentlyValidatingElement$1(fragment); - setCurrentlyValidatingElement$1(null); - break; - } - } + error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key); - if (fragment.ref !== null) { - setCurrentlyValidatingElement$1(fragment); + setCurrentlyValidatingElement$1(null); + break; + } + } - error('Invalid attribute `ref` supplied to `React.Fragment`.'); + if (fragment.ref !== null) { + setCurrentlyValidatingElement$1(fragment); - setCurrentlyValidatingElement$1(null); - } - } - } + error('Invalid attribute `ref` supplied to `React.Fragment`.'); - function jsxWithValidation(type, props, key, isStaticChildren, source, self) { - { - var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to - // succeed and there will likely be errors in render. + setCurrentlyValidatingElement$1(null); + } + } + } - if (!validType) { - var info = ''; + var didWarnAboutKeySpread = {}; + function jsxWithValidation(type, props, key, isStaticChildren, source, self) { + { + var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to + // succeed and there will likely be errors in render. - if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) { - info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports."; - } + if (!validType) { + var info = ''; - var sourceInfo = getSourceInfoErrorAddendum(source); + if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) { + info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports."; + } - if (sourceInfo) { - info += sourceInfo; - } else { - info += getDeclarationErrorAddendum(); - } + var sourceInfo = getSourceInfoErrorAddendum(source); + + if (sourceInfo) { + info += sourceInfo; + } else { + info += getDeclarationErrorAddendum(); + } - var typeString; + var typeString; + + if (type === null) { + typeString = 'null'; + } else if (isArray(type)) { + typeString = 'array'; + } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) { + typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />"; + info = ' Did you accidentally export a JSX literal instead of a component?'; + } else { + typeString = typeof type; + } - if (type === null) { - typeString = 'null'; - } else if (Array.isArray(type)) { - typeString = 'array'; - } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) { - typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />"; - info = ' Did you accidentally export a JSX literal instead of a component?'; - } else { - typeString = typeof type; - } + error('React.jsx: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info); + } - error('React.jsx: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info); - } + var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used. + // TODO: Drop this when these are no longer allowed as the type argument. - var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used. - // TODO: Drop this when these are no longer allowed as the type argument. + if (element == null) { + return element; + } // Skip key warning if the type isn't valid since our key validation logic + // doesn't expect a non-string/function type and can throw confusing errors. + // We don't want exception behavior to differ between dev and prod. + // (Rendering will throw with a helpful message and as soon as the type is + // fixed, the key warnings will appear.) - if (element == null) { - return element; - } // Skip key warning if the type isn't valid since our key validation logic - // doesn't expect a non-string/function type and can throw confusing errors. - // We don't want exception behavior to differ between dev and prod. - // (Rendering will throw with a helpful message and as soon as the type is - // fixed, the key warnings will appear.) + if (validType) { + var children = props.children; - if (validType) { - var children = props.children; + if (children !== undefined) { + if (isStaticChildren) { + if (isArray(children)) { + for (var i = 0; i < children.length; i++) { + validateChildKeys(children[i], type); + } - if (children !== undefined) { - if (isStaticChildren) { - if (Array.isArray(children)) { - for (var i = 0; i < children.length; i++) { - validateChildKeys(children[i], type); - } + if (Object.freeze) { + Object.freeze(children); + } + } else { + error('React.jsx: Static children should always be an array. ' + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + 'Use the Babel transform instead.'); + } + } else { + validateChildKeys(children, type); + } + } + } - if (Object.freeze) { - Object.freeze(children); - } - } else { - error('React.jsx: Static children should always be an array. ' + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + 'Use the Babel transform instead.'); - } - } else { - validateChildKeys(children, type); - } - } - } + { + if (hasOwnProperty.call(props, 'key')) { + var componentName = getComponentNameFromType(type); + var keys = Object.keys(props).filter(function (k) { + return k !== 'key'; + }); + var beforeExample = keys.length > 0 ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' : '{key: someKey}'; - if (type === exports.Fragment) { - validateFragmentProps(element); - } else { - validatePropTypes(element); - } + if (!didWarnAboutKeySpread[componentName + beforeExample]) { + var afterExample = keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}'; - return element; - } - } // These two functions exist to still get child warnings in dev - // even with the prod transform. This means that jsxDEV is purely - // opt-in behavior for better messages but that we won't stop - // giving you warnings if you use production apis. + error('A props object containing a "key" prop is being spread into JSX:\n' + ' let props = %s;\n' + ' <%s {...props} />\n' + 'React keys must be passed directly to JSX without using spread:\n' + ' let props = %s;\n' + ' <%s key={someKey} {...props} />', beforeExample, componentName, afterExample, componentName); - function jsxWithValidationStatic(type, props, key) { - { - return jsxWithValidation(type, props, key, true); - } - } - function jsxWithValidationDynamic(type, props, key) { - { - return jsxWithValidation(type, props, key, false); - } - } + didWarnAboutKeySpread[componentName + beforeExample] = true; + } + } + } - var jsx = jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children. - // for now we can ship identical prod functions + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); + } else { + validatePropTypes(element); + } - var jsxs = jsxWithValidationStatic ; + return element; + } + } // These two functions exist to still get child warnings in dev + // even with the prod transform. This means that jsxDEV is purely + // opt-in behavior for better messages but that we won't stop + // giving you warnings if you use production apis. + + function jsxWithValidationStatic(type, props, key) { + { + return jsxWithValidation(type, props, key, true); + } + } + function jsxWithValidationDynamic(type, props, key) { + { + return jsxWithValidation(type, props, key, false); + } + } - exports.jsx = jsx; - exports.jsxs = jsxs; - })(); - } -} (reactJsxRuntime_development)); + var jsx = jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children. + // for now we can ship identical prod functions + + var jsxs = jsxWithValidationStatic ; + + reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE; + reactJsxRuntime_development.jsx = jsx; + reactJsxRuntime_development.jsxs = jsxs; + })(); + } return reactJsxRuntime_development; } @@ -7591,30 +8082,11 @@ function requireReactJsxRuntime_development () { } (jsxRuntime)); var en = {}; + var zh = {}; + var de = {}; -var fr = {}; -var es = {}; -var it = {}; -var ar = {}; -var th = {}; -var vi = {}; -var ms = {}; -var id = {}; -var hi = {}; -var ta = {}; -var kn = {}; -var ml = {}; -var ru = {}; -var pl = {}; -var cs = {}; -var uk = {}; -var bg = {}; -var sr = {}; -var hr = {}; -var sk = {}; -var sl = {}; -var mk = {}; + var pt = {}; // file examples: en, enGB, zh, zhHK @@ -7624,28 +8096,6 @@ var localeData = /*#__PURE__*/Object.freeze({ en: en, zh: zh, de: de, - fr: fr, - es: es, - it: it, - ar: ar, - th: th, - vi: vi, - ms: ms, - id: id, - hi: hi, - ta: ta, - kn: kn, - ml: ml, - ru: ru, - pl: pl, - cs: cs, - uk: uk, - bg: bg, - sr: sr, - hr: hr, - sk: sk, - sl: sl, - mk: mk, pt: pt }); @@ -8139,6 +8589,27 @@ function parseNumberSkeleton(tokens) { case 'scale': result.scale = parseFloat(token.options[0]); continue; + case 'rounding-mode-floor': + result.roundingMode = 'floor'; + continue; + case 'rounding-mode-ceiling': + result.roundingMode = 'ceil'; + continue; + case 'rounding-mode-down': + result.roundingMode = 'trunc'; + continue; + case 'rounding-mode-up': + result.roundingMode = 'expand'; + continue; + case 'rounding-mode-half-even': + result.roundingMode = 'halfEven'; + continue; + case 'rounding-mode-half-down': + result.roundingMode = 'halfTrunc'; + continue; + case 'rounding-mode-half-up': + result.roundingMode = 'halfExpand'; + continue; // https://unicode-org.github.io/icu/userguide/format_parse/numbers/skeletons.html#integer-width case 'integer-width': if (token.options.length > 1) { @@ -11205,14 +11676,8 @@ originalMessage) { } var varName = el.value; // Enforce that all required values are provided by the caller. - var value = ""; if (!(values && varName in values)) { - // throw new MissingValueError(varName, originalMessage); - console.log("No value provided for the variable \"" + varName + "\". " + originalMessage); - value = varName; - } - else { - value = values[varName]; + throw new MissingValueError(varName, originalMessage); } var value = values[varName]; if (isArgumentElement(el)) { @@ -11463,8 +11928,7 @@ var IntlMessageFormat$1 = /** @class */ (function () { this.ast = message; } if (!Array.isArray(this.ast)) { - // throw new TypeError('A message must be provided as a String or AST.'); - console.log('Translator: A message must be provided as a String or AST.', this.ast); + throw new TypeError('A message must be provided as a String or AST.'); } // Creates a new object with the specified `formats` merged with the default // formats. @@ -11567,17 +12031,16 @@ See the accompanying LICENSE file for terms. */ var IntlMessageFormat = IntlMessageFormat$1; -var defaultLocale = "en"; +// this is a copy of the translator from ../../lib/index.js +// TODO: check if this file is used at all +var defaultLocale = "en"; var locales = [defaultLocale]; - // Falk - Adapted the central translator to check if a localStorage key is existing. - -const uiLanguage = localStorage.getItem('lowcoder_uiLanguage'); - +var uiLanguage = localStorage.getItem('lowcoder_uiLanguage'); if (globalThis.navigator) { - if (uiLanguage) { - locales = [uiLanguage]; - } + if (uiLanguage) { + locales = [uiLanguage]; + } else if (navigator.languages && navigator.languages.length > 0) { locales = __spreadArray([], navigator.languages, true); } @@ -11585,7 +12048,6 @@ if (globalThis.navigator) { locales = [navigator.language || navigator.userLanguage || defaultLocale]; } } - function parseLocale(s) { var locale = s.trim(); if (!locale) { @@ -11646,8 +12108,9 @@ function getDataByLocale(fileData, suffix, filterLocales, targetLocales) { } } console.error("Not found ".concat(names)); - // better to continue the app without crashing - // throw new Error("Not found ".concat(names)); + // return fallback data for en language + return { data: fileData['en'], language: 'en' }; + // throw new Error(`Not found ${names}`); } var globalMessageKeyPrefix = "@"; var globalMessages = Object.fromEntries(Object.entries(getDataByLocale(localeData, "").data).map(function (_a) { @@ -11677,11 +12140,19 @@ var Translator = /** @class */ (function () { return node; }; Translator.prototype.getMessage = function (key) { - var value = this.messages[key]; - if (value !== undefined) { - return value; + var message = this.getNestedMessage(this.messages, key); + // Fallback to English if the message is not found + if (message === undefined) { + message = this.getNestedMessage(en, key); // Assuming localeData.en contains English translations + } + // If still not found, return a default message or the key itself + if (message === undefined) { + console.warn("Translation missing for key: ".concat(key)); + message = "oups! ".concat(key); } - var obj = this.messages; + return message; + }; + Translator.prototype.getNestedMessage = function (obj, key) { for (var _i = 0, _a = key.split("."); _i < _a.length; _i++) { var k = _a[_i]; if (obj !== undefined) { @@ -11693,7 +12164,8 @@ var Translator = /** @class */ (function () { return Translator; }()); function getI18nObjects(fileData, filterLocales) { - return getDataByLocale(fileData, "Obj", filterLocales)?.data; + var _a; + return (_a = getDataByLocale(fileData, "Obj", filterLocales)) === null || _a === void 0 ? void 0 : _a.data; } exports.AbstractComp = AbstractComp; diff --git a/client/packages/lowcoder-core/lib/index.d.ts b/client/packages/lowcoder-core/lib/index.d.ts index ea81c29e7..368672adb 100644 --- a/client/packages/lowcoder-core/lib/index.d.ts +++ b/client/packages/lowcoder-core/lib/index.d.ts @@ -1,7 +1,7 @@ -// this is the tpyes file next to index.js - /// -import React, { ReactNode } from 'react'; +import * as react from 'react'; +import { ReactNode } from 'react'; +import * as react_jsx_runtime from 'react/jsx-runtime'; type EvalMethods = Record>; type CodeType = undefined | "JSON" | "Function" | "PureJSON"; @@ -337,7 +337,7 @@ interface SandBoxOption { declare function evalScript(script: string, context: any, methods?: EvalMethods): any; declare function evalFunc(functionBody: string, context: any, methods?: EvalMethods, options?: SandBoxOption, isAsync?: boolean): any; -declare function evalStyle(id: string, css: string[]): void; +declare function evalStyle(id: string, css: string[], globalStyle?: boolean): void; declare function clearStyleEval(id?: string): void; declare class DefaultParser { @@ -456,7 +456,7 @@ declare enum CompActionTypes { * broadcast other actions in comp tree structure. * used for encapsulate MultiBaseComp */ - BROADCAST = "BROADCAST", + BROADCAST = "BROADCAST" } type ExtraActionType = "layout" | "delete" | "add" | "modify" | "rename" | "recover" | "upgrade"; type ActionExtraInfo = { @@ -650,9 +650,7 @@ declare const i18n: { region?: string | undefined; locales: string[]; }; - declare function getValueByLocale(defaultValue: T, func: (info: LocaleInfo) => T | undefined): T; - type AddDot = T extends "" ? "" : `.${T}`; type ValidKey = Exclude; type NestedKey = (T extends object ? { @@ -662,18 +660,17 @@ type AddPrefix = { [K in keyof T as K extends string ? `${P}${K}` : never]: T[K]; }; declare const globalMessages: AddPrefix<{}, "@">; - type GlobalMessageKey = NestedKey; type VariableValue = string | number | boolean | Date | React.ReactNode; - declare class Translator { private readonly messages; readonly language: string; constructor(fileData: object, filterLocales?: string, locales?: string[]); trans(key: NestedKey | GlobalMessageKey, variables?: Record): string; - transToNode(key: NestedKey | GlobalMessageKey, variables?: Record): ReactNode; + transToNode(key: NestedKey | GlobalMessageKey, variables?: Record): string | react.ReactElement> | Iterable | react_jsx_runtime.JSX.Element[]; private getMessage; + private getNestedMessage; } -declare function getI18nObjects(fileData: object, filterLocales?: string): I18nObjects; +declare function getI18nObjects(fileData: object, filterLocales?: string): any; export { AbstractComp, AbstractNode, ActionContextType, ActionExtraInfo, ActionPriority, BroadcastAction, CachedNode, ChangeValueAction, CodeFunction, CodeNode, CodeNodeOptions, CodeType, Comp, CompAction, CompActionTypes, CompConstructor, CompParams, ConstructorToComp, ConstructorToDataType, ConstructorToNodeType, ConstructorToView, CustomAction, DispatchType, EvalMethods, ExecuteQueryAction, ExtraActionType, ExtraNodeType, FetchCheckNode, FetchInfo, FetchInfoOptions, FunctionNode, MultiBaseComp, MultiChangeAction, MultiCompConstructor, Node, NodeToValue, OptionalComp, OptionalNodeType, RecordConstructorToComp, RecordConstructorToView, RecordNode, RecordNodeToValue, RecordOptionalNodeToValue, RelaxedJsonParser, RenameAction, ReplaceCompAction, RouteByNameAction, SimpleAbstractComp, SimpleComp, SimpleCompAction, SimpleNode, Translator, TriggerModuleEventAction, UpdateActionContextAction, UpdateNodesV2Action, ValueAndMsg, WrapContextFn, WrapContextNodeV2, WrapNode, changeChildAction, changeDependName, changeEditDSLAction, changeValueAction, clearMockWindow, clearStyleEval, customAction, deferAction, deleteCompAction, dependingNodeMapEquals, evalFunc, evalFunctionResult, evalNodeOrMinor, evalPerfUtil, evalScript, evalStyle, executeQueryAction, fromRecord, fromUnevaledValue, fromValue, fromValueWithCache, getDynamicStringSegments, getI18nObjects, getValueByLocale, i18n, isBroadcastAction, isChildAction, isCustomAction, isDynamicSegment, isFetching, isMyCustomAction, mergeExtra, multiChangeAction, nodeIsRecord, onlyEvalAction, relaxedJSONToJSON, renameAction, replaceCompAction, routeByNameAction, transformWrapper, triggerModuleEventAction, unwrapChildAction, updateActionContextAction, updateNodesV2Action, withFunction, wrapActionExtraInfo, wrapChildAction, wrapContext, wrapDispatch }; diff --git a/client/packages/lowcoder-core/lib/index.js b/client/packages/lowcoder-core/lib/index.js index f2b298d74..942911d32 100644 --- a/client/packages/lowcoder-core/lib/index.js +++ b/client/packages/lowcoder-core/lib/index.js @@ -1,118 +1,118 @@ import _ from 'lodash'; import { serialize, compile, middleware, prefixer, stringify } from 'stylis'; -/****************************************************************************** -Copyright (c) Microsoft Corporation. - -Permission to use, copy, modify, and/or distribute this software for any -purpose with or without fee is hereby granted. - -THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH -REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY -AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, -INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM -LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR -OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR -PERFORMANCE OF THIS SOFTWARE. -***************************************************************************** */ -/* global Reflect, Promise, SuppressedError, Symbol */ - -var extendStatics = function(d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; - return extendStatics(d, b); -}; - -function __extends(d, b) { - if (typeof b !== "function" && b !== null) - throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); -} - -var __assign = function() { - __assign = Object.assign || function __assign(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; - -function __rest(s, e) { - var t = {}; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) - t[p] = s[p]; - if (s != null && typeof Object.getOwnPropertySymbols === "function") - for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { - if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) - t[p[i]] = s[p[i]]; - } - return t; -} - -function __decorate(decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -} - -function __awaiter(thisArg, _arguments, P, generator) { - function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } - return new (P || (P = Promise))(function (resolve, reject) { - function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } - function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } - function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } - step((generator = generator.apply(thisArg, _arguments || [])).next()); - }); -} - -function __generator(thisArg, body) { - var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; - return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; - function verb(n) { return function (v) { return step([n, v]); }; } - function step(op) { - if (f) throw new TypeError("Generator is already executing."); - while (g && (g = 0, op[0] && (_ = 0)), _) try { - if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; - if (y = 0, t) op = [op[0] & 2, t.value]; - switch (op[0]) { - case 0: case 1: t = op; break; - case 4: _.label++; return { value: op[1], done: false }; - case 5: _.label++; y = op[1]; op = [0]; continue; - case 7: op = _.ops.pop(); _.trys.pop(); continue; - default: - if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } - if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } - if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } - if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } - if (t[2]) _.ops.pop(); - _.trys.pop(); continue; - } - op = body.call(thisArg, _); - } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } - if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; - } -} - -function __spreadArray(to, from, pack) { - if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { - if (ar || !(i in from)) { - if (!ar) ar = Array.prototype.slice.call(from, 0, i); - ar[i] = from[i]; - } - } - return to.concat(ar || Array.prototype.slice.call(from)); -} - -typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { - var e = new Error(message); - return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; +/****************************************************************************** +Copyright (c) Microsoft Corporation. + +Permission to use, copy, modify, and/or distribute this software for any +purpose with or without fee is hereby granted. + +THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH +REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY +AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, +INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM +LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR +OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR +PERFORMANCE OF THIS SOFTWARE. +***************************************************************************** */ +/* global Reflect, Promise, SuppressedError, Symbol */ + +var extendStatics = function(d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; + return extendStatics(d, b); +}; + +function __extends(d, b) { + if (typeof b !== "function" && b !== null) + throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +} + +var __assign = function() { + __assign = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; + +function __rest(s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +} + +function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +} + +function __awaiter(thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +} + +function __generator(thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +} + +function __spreadArray(to, from, pack) { + if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { + if (ar || !(i in from)) { + if (!ar) ar = Array.prototype.slice.call(from, 0, i); + ar[i] = from[i]; + } + } + return to.concat(ar || Array.prototype.slice.call(from)); +} + +typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { + var e = new Error(message); + return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; }; function isEqualArgs(args, cacheArgs, equals) { @@ -791,6 +791,9 @@ var loglevel = { "error" ]; + var _loggersByName = {}; + var defaultLogger = null; + // Cross-browser bind equivalent that works at least back to IE6 function bindMethod(obj, methodName) { var method = obj[methodName]; @@ -843,25 +846,33 @@ var loglevel = { // These private functions always need `this` to be set properly - function replaceLoggingMethods(level, loggerName) { + function replaceLoggingMethods() { /*jshint validthis:true */ + var level = this.getLevel(); + + // Replace the actual methods. for (var i = 0; i < logMethods.length; i++) { var methodName = logMethods[i]; this[methodName] = (i < level) ? noop : - this.methodFactory(methodName, level, loggerName); + this.methodFactory(methodName, level, this.name); } // Define log.log as an alias for log.debug this.log = this.debug; + + // Return any important warnings. + if (typeof console === undefinedType && level < this.levels.SILENT) { + return "No console available for logging"; + } } // In old IE versions, the console isn't present until you first open it. // We build realMethod() replacements here that regenerate logging methods - function enableLoggingWhenConsoleArrives(methodName, level, loggerName) { + function enableLoggingWhenConsoleArrives(methodName) { return function () { if (typeof console !== undefinedType) { - replaceLoggingMethods.call(this, level, loggerName); + replaceLoggingMethods.call(this); this[methodName].apply(this, arguments); } }; @@ -869,16 +880,36 @@ var loglevel = { // By default, we use closely bound real methods wherever possible, and // otherwise we wait for a console to appear, and then try again. - function defaultMethodFactory(methodName, level, loggerName) { + function defaultMethodFactory(methodName, _level, _loggerName) { /*jshint validthis:true */ return realMethod(methodName) || enableLoggingWhenConsoleArrives.apply(this, arguments); } - function Logger(name, defaultLevel, factory) { + function Logger(name, factory) { + // Private instance variables. var self = this; - var currentLevel; - defaultLevel = defaultLevel == null ? "WARN" : defaultLevel; + /** + * The level inherited from a parent logger (or a global default). We + * cache this here rather than delegating to the parent so that it stays + * in sync with the actual logging methods that we have installed (the + * parent could change levels but we might not have rebuilt the loggers + * in this child yet). + * @type {number} + */ + var inheritedLevel; + /** + * The default level for this logger, if any. If set, this overrides + * `inheritedLevel`. + * @type {number|null} + */ + var defaultLevel; + /** + * A user-specific level for this logger. If set, this overrides + * `defaultLevel`. + * @type {number|null} + */ + var userLevel; var storageKey = "loglevel"; if (typeof name === "string") { @@ -918,10 +949,12 @@ var loglevel = { if (typeof storedLevel === undefinedType) { try { var cookie = window.document.cookie; - var location = cookie.indexOf( - encodeURIComponent(storageKey) + "="); + var cookieName = encodeURIComponent(storageKey); + var location = cookie.indexOf(cookieName + "="); if (location !== -1) { - storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1]; + storedLevel = /^([^;]+)/.exec( + cookie.slice(location + cookieName.length + 1) + )[1]; } } catch (ignore) {} } @@ -940,7 +973,6 @@ var loglevel = { // Use localStorage if available try { window.localStorage.removeItem(storageKey); - return; } catch (ignore) {} // Use session cookie as fallback @@ -950,6 +982,18 @@ var loglevel = { } catch (ignore) {} } + function normalizeLevel(input) { + var level = input; + if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) { + level = self.levels[level.toUpperCase()]; + } + if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) { + return level; + } else { + throw new TypeError("log.setLevel() called with invalid level: " + input); + } + } + /* * * Public logger API - see https://github.com/pimterry/loglevel for details @@ -964,37 +1008,36 @@ var loglevel = { self.methodFactory = factory || defaultMethodFactory; self.getLevel = function () { - return currentLevel; + if (userLevel != null) { + return userLevel; + } else if (defaultLevel != null) { + return defaultLevel; + } else { + return inheritedLevel; + } }; self.setLevel = function (level, persist) { - if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) { - level = self.levels[level.toUpperCase()]; - } - if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) { - currentLevel = level; - if (persist !== false) { // defaults to true - persistLevelIfPossible(level); - } - replaceLoggingMethods.call(self, level, name); - if (typeof console === undefinedType && level < self.levels.SILENT) { - return "No console available for logging"; - } - } else { - throw "log.setLevel() called with invalid level: " + level; + userLevel = normalizeLevel(level); + if (persist !== false) { // defaults to true + persistLevelIfPossible(userLevel); } + + // NOTE: in v2, this should call rebuild(), which updates children. + return replaceLoggingMethods.call(self); }; self.setDefaultLevel = function (level) { - defaultLevel = level; + defaultLevel = normalizeLevel(level); if (!getPersistedLevel()) { self.setLevel(level, false); } }; self.resetLevel = function () { - self.setLevel(defaultLevel, false); + userLevel = null; clearPersistedLevel(); + replaceLoggingMethods.call(self); }; self.enableAll = function(persist) { @@ -1005,12 +1048,28 @@ var loglevel = { self.setLevel(self.levels.SILENT, persist); }; - // Initialize with the right level + self.rebuild = function () { + if (defaultLogger !== self) { + inheritedLevel = normalizeLevel(defaultLogger.getLevel()); + } + replaceLoggingMethods.call(self); + + if (defaultLogger === self) { + for (var childName in _loggersByName) { + _loggersByName[childName].rebuild(); + } + } + }; + + // Initialize all the internal levels. + inheritedLevel = normalizeLevel( + defaultLogger ? defaultLogger.getLevel() : "WARN" + ); var initialLevel = getPersistedLevel(); - if (initialLevel == null) { - initialLevel = defaultLevel; + if (initialLevel != null) { + userLevel = normalizeLevel(initialLevel); } - self.setLevel(initialLevel, false); + replaceLoggingMethods.call(self); } /* @@ -1019,18 +1078,19 @@ var loglevel = { * */ - var defaultLogger = new Logger(); + defaultLogger = new Logger(); - var _loggersByName = {}; defaultLogger.getLogger = function getLogger(name) { if ((typeof name !== "symbol" && typeof name !== "string") || name === "") { - throw new TypeError("You must supply a name when creating a logger."); + throw new TypeError("You must supply a name when creating a logger."); } var logger = _loggersByName[name]; if (!logger) { - logger = _loggersByName[name] = new Logger( - name, defaultLogger.getLevel(), defaultLogger.methodFactory); + logger = _loggersByName[name] = new Logger( + name, + defaultLogger.methodFactory + ); } return logger; }; @@ -3259,15 +3319,16 @@ function transformWrapper(transformFn, defaultValue) { function styleNamespace(id) { return "style-for-".concat(id); } -function evalStyle(id, css) { +function evalStyle(id, css, globalStyle) { var _a; var styleId = styleNamespace(id); + var prefixId = globalStyle ? id : "#".concat(id); var compiledCSS = ""; css.forEach(function (i) { if (!i.trim()) { return; } - compiledCSS += serialize(compile("#".concat(id, "{").concat(i, "}")), middleware([prefixer, stringify])); + compiledCSS += serialize(compile("".concat(prefixId, "{").concat(i, "}")), middleware([prefixer, stringify])); }); var styleNode = document.querySelector("#".concat(styleId)); if (!styleNode) { @@ -3837,104 +3898,6 @@ var jsxRuntime = { var reactJsxRuntime_production_min = {}; -/* -object-assign -(c) Sindre Sorhus -@license MIT -*/ - -var objectAssign; -var hasRequiredObjectAssign; - -function requireObjectAssign () { - if (hasRequiredObjectAssign) return objectAssign; - hasRequiredObjectAssign = 1; - /* eslint-disable no-unused-vars */ - var getOwnPropertySymbols = Object.getOwnPropertySymbols; - var hasOwnProperty = Object.prototype.hasOwnProperty; - var propIsEnumerable = Object.prototype.propertyIsEnumerable; - - function toObject(val) { - if (val === null || val === undefined) { - throw new TypeError('Object.assign cannot be called with null or undefined'); - } - - return Object(val); - } - - function shouldUseNative() { - try { - if (!Object.assign) { - return false; - } - - // Detect buggy property enumeration order in older V8 versions. - - // https://bugs.chromium.org/p/v8/issues/detail?id=4118 - var test1 = new String('abc'); // eslint-disable-line no-new-wrappers - test1[5] = 'de'; - if (Object.getOwnPropertyNames(test1)[0] === '5') { - return false; - } - - // https://bugs.chromium.org/p/v8/issues/detail?id=3056 - var test2 = {}; - for (var i = 0; i < 10; i++) { - test2['_' + String.fromCharCode(i)] = i; - } - var order2 = Object.getOwnPropertyNames(test2).map(function (n) { - return test2[n]; - }); - if (order2.join('') !== '0123456789') { - return false; - } - - // https://bugs.chromium.org/p/v8/issues/detail?id=3056 - var test3 = {}; - 'abcdefghijklmnopqrst'.split('').forEach(function (letter) { - test3[letter] = letter; - }); - if (Object.keys(Object.assign({}, test3)).join('') !== - 'abcdefghijklmnopqrst') { - return false; - } - - return true; - } catch (err) { - // We don't expect any of the above to throw, but better to be safe. - return false; - } - } - - objectAssign = shouldUseNative() ? Object.assign : function (target, source) { - var from; - var to = toObject(target); - var symbols; - - for (var s = 1; s < arguments.length; s++) { - from = Object(arguments[s]); - - for (var key in from) { - if (hasOwnProperty.call(from, key)) { - to[key] = from[key]; - } - } - - if (getOwnPropertySymbols) { - symbols = getOwnPropertySymbols(from); - for (var i = 0; i < symbols.length; i++) { - if (propIsEnumerable.call(from, symbols[i])) { - to[symbols[i]] = from[symbols[i]]; - } - } - } - } - - return to; - }; - return objectAssign; -} - var reactExports = {}; var react = { get exports(){ return reactExports; }, @@ -3943,7 +3906,8 @@ var react = { var react_production_min = {}; -/** @license React v17.0.2 +/** + * @license React * react.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. @@ -3957,27 +3921,34 @@ var hasRequiredReact_production_min; function requireReact_production_min () { if (hasRequiredReact_production_min) return react_production_min; hasRequiredReact_production_min = 1; -var l=requireObjectAssign(),n=60103,p=60106;react_production_min.Fragment=60107;react_production_min.StrictMode=60108;react_production_min.Profiler=60114;var q=60109,r=60110,t=60112;react_production_min.Suspense=60113;var u=60115,v=60116; - if("function"===typeof Symbol&&Symbol.for){var w=Symbol.for;n=w("react.element");p=w("react.portal");react_production_min.Fragment=w("react.fragment");react_production_min.StrictMode=w("react.strict_mode");react_production_min.Profiler=w("react.profiler");q=w("react.provider");r=w("react.context");t=w("react.forward_ref");react_production_min.Suspense=w("react.suspense");u=w("react.memo");v=w("react.lazy");}var x="function"===typeof Symbol&&Symbol.iterator; - function y(a){if(null===a||"object"!==typeof a)return null;a=x&&a[x]||a["@@iterator"];return "function"===typeof a?a:null}function z(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } + { + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } - printWarning('warn', format, args); + printWarning('warn', format, args); + } } } function error(format) { { - for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { - args[_key2 - 1] = arguments[_key2]; - } + { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } - printWarning('error', format, args); + printWarning('error', format, args); + } } } @@ -4187,10 +4147,11 @@ function requireReact_development () { if (stack !== '') { format += '%s'; args = args.concat([stack]); - } + } // eslint-disable-next-line react-internal/safe-string-coercion + var argsWithFormat = args.map(function (item) { - return '' + item; + return String(item); }); // Careful: RN currently depends on this prefix argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it @@ -4288,6 +4249,8 @@ function requireReact_development () { } }; + var assign = Object.assign; + var emptyObject = {}; { @@ -4336,10 +4299,8 @@ function requireReact_development () { */ Component.prototype.setState = function (partialState, callback) { - if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) { - { - throw Error( "setState(...): takes an object of state variables to update or a function which returns an object of state variables." ); - } + if (typeof partialState !== 'object' && typeof partialState !== 'function' && partialState != null) { + throw new Error('setState(...): takes an object of state variables to update or a ' + 'function which returns an object of state variables.'); } this.updater.enqueueSetState(this, partialState, callback, 'setState'); @@ -4411,8 +4372,7 @@ function requireReact_development () { var pureComponentPrototype = PureComponent.prototype = new ComponentDummy(); pureComponentPrototype.constructor = PureComponent; // Avoid an extra prototype jump for these methods. - _assign(pureComponentPrototype, Component.prototype); - + assign(pureComponentPrototype, Component.prototype); pureComponentPrototype.isPureReactComponent = true; // an immutable object with a single mutable value @@ -4428,16 +4388,97 @@ function requireReact_development () { return refObject; } + var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare + + function isArray(a) { + return isArrayImpl(a); + } + + /* + * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol + * and Temporal.* types. See https://github.com/facebook/react/pull/22064. + * + * The functions in this module will throw an easier-to-understand, + * easier-to-debug exception with a clear errors message message explaining the + * problem. (Instead of a confusing exception thrown inside the implementation + * of the `value` object). + */ + // $FlowFixMe only called in DEV, so void return is not possible. + function typeName(value) { + { + // toStringTag is needed for namespaced types like Temporal.Instant + var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag; + var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object'; + return type; + } + } // $FlowFixMe only called in DEV, so void return is not possible. + + + function willCoercionThrow(value) { + { + try { + testStringCoercion(value); + return false; + } catch (e) { + return true; + } + } + } + + function testStringCoercion(value) { + // If you ended up here by following an exception call stack, here's what's + // happened: you supplied an object or symbol value to React (as a prop, key, + // DOM attribute, CSS property, string ref, etc.) and when React tried to + // coerce it to a string using `'' + value`, an exception was thrown. + // + // The most common types that will cause this exception are `Symbol` instances + // and Temporal objects like `Temporal.Instant`. But any object that has a + // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this + // exception. (Library authors do this to prevent users from using built-in + // numeric operators like `+` or comparison operators like `>=` because custom + // methods are needed to perform accurate arithmetic or comparison.) + // + // To fix the problem, coerce this object or symbol value to a string before + // passing it to React. The most reliable way is usually `String(value)`. + // + // To find which value is throwing, check the browser or debugger console. + // Before this exception was thrown, there should be `console.error` output + // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the + // problem and how that type was used: key, atrribute, input value prop, etc. + // In most cases, this console output also shows the component and its + // ancestor components where the exception happened. + // + // eslint-disable-next-line react-internal/safe-string-coercion + return '' + value; + } + function checkKeyStringCoercion(value) { + { + if (willCoercionThrow(value)) { + error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value)); + + return testStringCoercion(value); // throw (to help callers find troubleshooting comments) + } + } + } + function getWrappedName(outerType, innerType, wrapperName) { + var displayName = outerType.displayName; + + if (displayName) { + return displayName; + } + var functionName = innerType.displayName || innerType.name || ''; - return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName); - } + return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName; + } // Keep in sync with react-reconciler/getComponentNameFromFiber + function getContextName(type) { return type.displayName || 'Context'; - } + } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead. - function getComponentName(type) { + + function getComponentNameFromType(type) { if (type == null) { // Host root, text node or just invalid type. return null; @@ -4445,7 +4486,7 @@ function requireReact_development () { { if (typeof type.tag === 'number') { - error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.'); + error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.'); } } @@ -4458,23 +4499,24 @@ function requireReact_development () { } switch (type) { - case exports.Fragment: + case REACT_FRAGMENT_TYPE: return 'Fragment'; case REACT_PORTAL_TYPE: return 'Portal'; - case exports.Profiler: + case REACT_PROFILER_TYPE: return 'Profiler'; - case exports.StrictMode: + case REACT_STRICT_MODE_TYPE: return 'StrictMode'; - case exports.Suspense: + case REACT_SUSPENSE_TYPE: return 'Suspense'; case REACT_SUSPENSE_LIST_TYPE: return 'SuspenseList'; + } if (typeof type === 'object') { @@ -4491,10 +4533,13 @@ function requireReact_development () { return getWrappedName(type, type.render, 'ForwardRef'); case REACT_MEMO_TYPE: - return getComponentName(type.type); + var outerName = type.displayName || null; + + if (outerName !== null) { + return outerName; + } - case REACT_BLOCK_TYPE: - return getComponentName(type._render); + return getComponentNameFromType(type.type) || 'Memo'; case REACT_LAZY_TYPE: { @@ -4503,11 +4548,13 @@ function requireReact_development () { var init = lazyComponent._init; try { - return getComponentName(init(payload)); + return getComponentNameFromType(init(payload)); } catch (x) { return null; } } + + // eslint-disable-next-line no-fallthrough } } @@ -4515,6 +4562,7 @@ function requireReact_development () { } var hasOwnProperty = Object.prototype.hasOwnProperty; + var RESERVED_PROPS = { key: true, ref: true, @@ -4594,7 +4642,7 @@ function requireReact_development () { function warnIfStringRefCannotBeAutoConverted(config) { { if (typeof config.ref === 'string' && ReactCurrentOwner.current && config.__self && ReactCurrentOwner.current.stateNode !== config.__self) { - var componentName = getComponentName(ReactCurrentOwner.current.type); + var componentName = getComponentNameFromType(ReactCurrentOwner.current.type); if (!didWarnAboutStringRefs[componentName]) { error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', componentName, config.ref); @@ -4703,6 +4751,10 @@ function requireReact_development () { } if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } + key = '' + config.key; } @@ -4775,16 +4827,13 @@ function requireReact_development () { */ function cloneElement(element, config, children) { - if (!!(element === null || element === undefined)) { - { - throw Error( "React.cloneElement(...): The argument must be a React element, but you passed " + element + "." ); - } + if (element === null || element === undefined) { + throw new Error("React.cloneElement(...): The argument must be a React element, but you passed " + element + "."); } var propName; // Original props are copied - var props = _assign({}, element.props); // Reserved names are extracted - + var props = assign({}, element.props); // Reserved names are extracted var key = element.key; var ref = element.ref; // Self is preserved since the owner is preserved. @@ -4805,6 +4854,10 @@ function requireReact_development () { } if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } + key = '' + config.key; } // Remaining properties override existing props @@ -4903,6 +4956,10 @@ function requireReact_development () { // that we don't block potential future ES APIs. if (typeof element === 'object' && element !== null && element.key != null) { // Explicit key + { + checkKeyStringCoercion(element.key); + } + return escape('' + element.key); } // Implicit key determined by the index in the set @@ -4946,7 +5003,7 @@ function requireReact_development () { var childKey = nameSoFar === '' ? SEPARATOR + getElementKey(_child, 0) : nameSoFar; - if (Array.isArray(mappedChild)) { + if (isArray(mappedChild)) { var escapedChildKey = ''; if (childKey != null) { @@ -4958,10 +5015,20 @@ function requireReact_development () { }); } else if (mappedChild != null) { if (isValidElement(mappedChild)) { + { + // The `if` statement here prevents auto-disabling of the safe + // coercion ESLint rule, so we must manually disable it below. + // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key + if (mappedChild.key && (!_child || _child.key !== mappedChild.key)) { + checkKeyStringCoercion(mappedChild.key); + } + } + mappedChild = cloneAndReplaceKey(mappedChild, // Keep both the (mapped) and old keys if they differ, just as // traverseAllChildren used to do for objects as children escapedPrefix + ( // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key mappedChild.key && (!_child || _child.key !== mappedChild.key) ? // $FlowFixMe Flow incorrectly thinks existing element's key can be a number + // eslint-disable-next-line react-internal/safe-string-coercion escapeUserProvidedKey('' + mappedChild.key) + '/' : '') + childKey); } @@ -4977,7 +5044,7 @@ function requireReact_development () { var nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR; - if (Array.isArray(children)) { + if (isArray(children)) { for (var i = 0; i < children.length; i++) { child = children[i]; nextName = nextNamePrefix + getElementKey(child, i); @@ -5010,13 +5077,9 @@ function requireReact_development () { subtreeCount += mapIntoArray(child, array, escapedPrefix, nextName, callback); } } else if (type === 'object') { - var childrenString = '' + children; - - { - { - throw Error( "Objects are not valid as a React child (found: " + (childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString) + "). If you meant to render a collection of children, use an array instead." ); - } - } + // eslint-disable-next-line react-internal/safe-string-coercion + var childrenString = String(children); + throw new Error("Objects are not valid as a React child (found: " + (childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString) + "). " + 'If you meant to render a collection of children, use an array ' + 'instead.'); } } @@ -5115,28 +5178,17 @@ function requireReact_development () { function onlyChild(children) { if (!isValidElement(children)) { - { - throw Error( "React.Children.only expected to receive a single React element child." ); - } + throw new Error('React.Children.only expected to receive a single React element child.'); } return children; } - function createContext(defaultValue, calculateChangedBits) { - if (calculateChangedBits === undefined) { - calculateChangedBits = null; - } else { - { - if (calculateChangedBits !== null && typeof calculateChangedBits !== 'function') { - error('createContext: Expected the optional second argument to be a ' + 'function. Instead received: %s', calculateChangedBits); - } - } - } - + function createContext(defaultValue) { + // TODO: Second argument used to be an optional `calculateChangedBits` + // function. Warn to reserve for future use? var context = { $$typeof: REACT_CONTEXT_TYPE, - _calculateChangedBits: calculateChangedBits, // As a workaround to support multiple concurrent renderers, we categorize // some renderers as primary and others as secondary. We only expect // there to be two concurrent renderers at most: React Native (primary) and @@ -5149,7 +5201,10 @@ function requireReact_development () { _threadCount: 0, // These are circular Provider: null, - Consumer: null + Consumer: null, + // Add these to use same hidden class in VM as ServerContext + _defaultValue: null, + _globalName: null }; context.Provider = { $$typeof: REACT_PROVIDER_TYPE, @@ -5165,8 +5220,7 @@ function requireReact_development () { // warn for the incorrect usage of Context as a Consumer. var Consumer = { $$typeof: REACT_CONTEXT_TYPE, - _context: context, - _calculateChangedBits: context._calculateChangedBits + _context: context }; // $FlowFixMe: Flow complains about not setting a value, which is intentional here Object.defineProperties(Consumer, { @@ -5253,38 +5307,54 @@ function requireReact_development () { if (payload._status === Uninitialized) { var ctor = payload._result; var thenable = ctor(); // Transition to the next state. + // This might throw either because it's missing or throws. If so, we treat it + // as still uninitialized and try again next time. Which is the same as what + // happens if the ctor or any wrappers processing the ctor throws. This might + // end up fixing it if the resolution was a concurrency bug. - var pending = payload; - pending._status = Pending; - pending._result = thenable; thenable.then(function (moduleObject) { - if (payload._status === Pending) { - var defaultExport = moduleObject.default; - - { - if (defaultExport === undefined) { - error('lazy: Expected the result of a dynamic import() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + // Break up imports to avoid accidentally parsing them as dependencies. - 'const MyComponent = lazy(() => imp' + "ort('./MyComponent'))", moduleObject); - } - } // Transition to the next state. - - + if (payload._status === Pending || payload._status === Uninitialized) { + // Transition to the next state. var resolved = payload; resolved._status = Resolved; - resolved._result = defaultExport; + resolved._result = moduleObject; } }, function (error) { - if (payload._status === Pending) { + if (payload._status === Pending || payload._status === Uninitialized) { // Transition to the next state. var rejected = payload; rejected._status = Rejected; rejected._result = error; } }); + + if (payload._status === Uninitialized) { + // In case, we're still uninitialized, then we're waiting for the thenable + // to resolve. Set it as pending in the meantime. + var pending = payload; + pending._status = Pending; + pending._result = thenable; + } } if (payload._status === Resolved) { - return payload._result; + var moduleObject = payload._result; + + { + if (moduleObject === undefined) { + error('lazy: Expected the result of a dynamic imp' + 'ort() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + // Break up imports to avoid accidentally parsing them as dependencies. + 'const MyComponent = lazy(() => imp' + "ort('./MyComponent'))\n\n" + 'Did you accidentally put curly braces around the import?', moduleObject); + } + } + + { + if (!('default' in moduleObject)) { + error('lazy: Expected the result of a dynamic imp' + 'ort() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + // Break up imports to avoid accidentally parsing them as dependencies. + 'const MyComponent = lazy(() => imp' + "ort('./MyComponent'))", moduleObject); + } + } + + return moduleObject.default; } else { throw payload._result; } @@ -5293,7 +5363,7 @@ function requireReact_development () { function lazy(ctor) { var payload = { // We use these fields to store the result. - _status: -1, + _status: Uninitialized, _result: ctor }; var lazyType = { @@ -5379,9 +5449,15 @@ function requireReact_development () { return ownName; }, set: function (name) { - ownName = name; - - if (render.displayName == null) { + ownName = name; // The inner component shouldn't inherit this display name in most cases, + // because the component may be used elsewhere. + // But it's nice for anonymous functions to inherit the name, + // so that our component-stack generation logic will display their frames. + // An anonymous function generally suggests a pattern like: + // React.forwardRef((props, ref) => {...}); + // This kind of inner function is not used elsewhere so the side effect is okay. + + if (!render.name && !render.displayName) { render.displayName = name; } } @@ -5391,9 +5467,11 @@ function requireReact_development () { return elementType; } - // Filter certain DOM attributes (e.g. src, href) if their values are empty strings. + var REACT_MODULE_REFERENCE; - var enableScopeAPI = false; // Experimental Create Event Handle API. + { + REACT_MODULE_REFERENCE = Symbol.for('react.module.reference'); + } function isValidElementType(type) { if (typeof type === 'string' || typeof type === 'function') { @@ -5401,12 +5479,16 @@ function requireReact_development () { } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill). - if (type === exports.Fragment || type === exports.Profiler || type === REACT_DEBUG_TRACING_MODE_TYPE || type === exports.StrictMode || type === exports.Suspense || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) { + if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing ) { return true; } if (typeof type === 'object' && type !== null) { - if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) { + if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object + // types supported by any Flight configuration anywhere since + // we don't know which Flight build this will end up being used + // with. + type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) { return true; } } @@ -5436,9 +5518,15 @@ function requireReact_development () { return ownName; }, set: function (name) { - ownName = name; - - if (type.displayName == null) { + ownName = name; // The inner component shouldn't inherit this display name in most cases, + // because the component may be used elsewhere. + // But it's nice for anonymous functions to inherit the name, + // so that our component-stack generation logic will display their frames. + // An anonymous function generally suggests a pattern like: + // React.memo((props) => {...}); + // This kind of inner function is not used elsewhere so the side effect is okay. + + if (!type.name && !type.displayName) { type.displayName = name; } } @@ -5451,24 +5539,22 @@ function requireReact_development () { function resolveDispatcher() { var dispatcher = ReactCurrentDispatcher.current; - if (!(dispatcher !== null)) { - { - throw Error( "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." ); + { + if (dispatcher === null) { + error('Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' + ' one of the following reasons:\n' + '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' + '2. You might be breaking the Rules of Hooks\n' + '3. You might have more than one copy of React in the same app\n' + 'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.'); } - } + } // Will result in a null access error if accessed outside render phase. We + // intentionally don't throw our own error because this is in a hot path. + // Also helps ensure this is inlined. + return dispatcher; } - - function useContext(Context, unstable_observedBits) { + function useContext(Context) { var dispatcher = resolveDispatcher(); { - if (unstable_observedBits !== undefined) { - error('useContext() second argument is reserved for future ' + 'use in React. Passing it is not supported. ' + 'You passed: %s.%s', unstable_observedBits, typeof unstable_observedBits === 'number' && Array.isArray(arguments[2]) ? '\n\nDid you call array.map(useContext)? ' + 'Calling Hooks inside a loop is not supported. ' + 'Learn more at https://reactjs.org/link/rules-of-hooks' : ''); - } // TODO: add a more generic warning for invalid values. - - + // TODO: add a more generic warning for invalid values. if (Context._context !== undefined) { var realContext = Context._context; // Don't deduplicate because this legitimately causes bugs // and nobody should be using this in existing code. @@ -5481,7 +5567,7 @@ function requireReact_development () { } } - return dispatcher.useContext(Context, unstable_observedBits); + return dispatcher.useContext(Context); } function useState(initialState) { var dispatcher = resolveDispatcher(); @@ -5499,6 +5585,10 @@ function requireReact_development () { var dispatcher = resolveDispatcher(); return dispatcher.useEffect(create, deps); } + function useInsertionEffect(create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useInsertionEffect(create, deps); + } function useLayoutEffect(create, deps) { var dispatcher = resolveDispatcher(); return dispatcher.useLayoutEffect(create, deps); @@ -5521,6 +5611,22 @@ function requireReact_development () { return dispatcher.useDebugValue(value, formatterFn); } } + function useTransition() { + var dispatcher = resolveDispatcher(); + return dispatcher.useTransition(); + } + function useDeferredValue(value) { + var dispatcher = resolveDispatcher(); + return dispatcher.useDeferredValue(value); + } + function useId() { + var dispatcher = resolveDispatcher(); + return dispatcher.useId(); + } + function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) { + var dispatcher = resolveDispatcher(); + return dispatcher.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); + } // Helpers to patch console.logs to avoid logging during side-effect free // replaying on render function. This currently only patches the object @@ -5585,25 +5691,25 @@ function requireReact_development () { }; // $FlowFixMe Flow thinks console is immutable. Object.defineProperties(console, { - log: _assign({}, props, { + log: assign({}, props, { value: prevLog }), - info: _assign({}, props, { + info: assign({}, props, { value: prevInfo }), - warn: _assign({}, props, { + warn: assign({}, props, { value: prevWarn }), - error: _assign({}, props, { + error: assign({}, props, { value: prevError }), - group: _assign({}, props, { + group: assign({}, props, { value: prevGroup }), - groupCollapsed: _assign({}, props, { + groupCollapsed: assign({}, props, { value: prevGroupCollapsed }), - groupEnd: _assign({}, props, { + groupEnd: assign({}, props, { value: prevGroupEnd }) }); @@ -5644,7 +5750,7 @@ function requireReact_development () { function describeNativeComponentFrame(fn, construct) { // If something asked for a stack inside a fake render, it should get ignored. - if (!fn || reentry) { + if ( !fn || reentry) { return ''; } @@ -5753,7 +5859,14 @@ function requireReact_development () { if (c < 0 || sampleLines[s] !== controlLines[c]) { // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. - var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); + var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "" + // but we have a user-provided "displayName" + // splice it in to make the stack more readable. + + + if (fn.displayName && _frame.includes('')) { + _frame = _frame.replace('', fn.displayName); + } { if (typeof fn === 'function') { @@ -5822,7 +5935,7 @@ function requireReact_development () { } switch (type) { - case exports.Suspense: + case REACT_SUSPENSE_TYPE: return describeBuiltInComponentFrame('Suspense'); case REACT_SUSPENSE_LIST_TYPE: @@ -5838,9 +5951,6 @@ function requireReact_development () { // Memo may contain any component type so we recursively resolve it. return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn); - case REACT_BLOCK_TYPE: - return describeFunctionComponentFrame(type._render); - case REACT_LAZY_TYPE: { var lazyComponent = type; @@ -5876,7 +5986,7 @@ function requireReact_development () { function checkPropTypes(typeSpecs, values, location, componentName, element) { { // $FlowFixMe This is okay but Flow doesn't know it. - var has = Function.call.bind(Object.prototype.hasOwnProperty); + var has = Function.call.bind(hasOwnProperty); for (var typeSpecName in typeSpecs) { if (has(typeSpecs, typeSpecName)) { @@ -5888,6 +5998,7 @@ function requireReact_development () { // This is intentionally an invariant that gets caught. It's the same // behavior as without this statement except with a better message. if (typeof typeSpecs[typeSpecName] !== 'function') { + // eslint-disable-next-line react-internal/prod-error-codes var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'); err.name = 'Invariant Violation'; throw err; @@ -5941,7 +6052,7 @@ function requireReact_development () { function getDeclarationErrorAddendum() { if (ReactCurrentOwner.current) { - var name = getComponentName(ReactCurrentOwner.current.type); + var name = getComponentNameFromType(ReactCurrentOwner.current.type); if (name) { return '\n\nCheck the render method of `' + name + '`.'; @@ -6023,7 +6134,7 @@ function requireReact_development () { if (element && element._owner && element._owner !== ReactCurrentOwner.current) { // Give the component that originally created this child. - childOwner = " It was passed a child from " + getComponentName(element._owner.type) + "."; + childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + "."; } { @@ -6050,7 +6161,7 @@ function requireReact_development () { return; } - if (Array.isArray(node)) { + if (isArray(node)) { for (var i = 0; i < node.length; i++) { var child = node[i]; @@ -6112,12 +6223,12 @@ function requireReact_development () { if (propTypes) { // Intentionally inside to avoid triggering lazy initializers: - var name = getComponentName(type); + var name = getComponentNameFromType(type); checkPropTypes(propTypes, element.props, 'prop', name, element); } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) { propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: - var _name = getComponentName(type); + var _name = getComponentNameFromType(type); error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown'); } @@ -6182,10 +6293,10 @@ function requireReact_development () { if (type === null) { typeString = 'null'; - } else if (Array.isArray(type)) { + } else if (isArray(type)) { typeString = 'array'; } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) { - typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />"; + typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />"; info = ' Did you accidentally export a JSX literal instead of a component?'; } else { typeString = typeof type; @@ -6214,7 +6325,7 @@ function requireReact_development () { } } - if (type === exports.Fragment) { + if (type === REACT_FRAGMENT_TYPE) { validateFragmentProps(element); } else { validatePropTypes(element); @@ -6261,58 +6372,326 @@ function requireReact_development () { return newElement; } - { + function startTransition(scope, options) { + var prevTransition = ReactCurrentBatchConfig.transition; + ReactCurrentBatchConfig.transition = {}; + var currentTransition = ReactCurrentBatchConfig.transition; + + { + ReactCurrentBatchConfig.transition._updatedFibers = new Set(); + } try { - var frozenObject = Object.freeze({}); - /* eslint-disable no-new */ + scope(); + } finally { + ReactCurrentBatchConfig.transition = prevTransition; + + { + if (prevTransition === null && currentTransition._updatedFibers) { + var updatedFibersCount = currentTransition._updatedFibers.size; - new Map([[frozenObject, null]]); - new Set([frozenObject]); - /* eslint-enable no-new */ - } catch (e) { + if (updatedFibersCount > 10) { + warn('Detected a large number of updates inside startTransition. ' + 'If this is due to a subscription please re-write it to use React provided hooks. ' + 'Otherwise concurrent mode guarantees are off the table.'); + } + + currentTransition._updatedFibers.clear(); + } + } } } - var createElement$1 = createElementWithValidation ; - var cloneElement$1 = cloneElementWithValidation ; - var createFactory = createFactoryWithValidation ; - var Children = { - map: mapChildren, - forEach: forEachChildren, - count: countChildren, - toArray: toArray, - only: onlyChild - }; + var didWarnAboutMessageChannel = false; + var enqueueTaskImpl = null; + function enqueueTask(task) { + if (enqueueTaskImpl === null) { + try { + // read require off the module object to get around the bundlers. + // we don't want them to detect a require and bundle a Node polyfill. + var requireString = ('require' + Math.random()).slice(0, 7); + var nodeRequire = module && module[requireString]; // assuming we're in node, let's try to get node's + // version of setImmediate, bypassing fake timers if any. + + enqueueTaskImpl = nodeRequire.call(module, 'timers').setImmediate; + } catch (_err) { + // we're in a browser + // we can't use regular timers because they may still be faked + // so we try MessageChannel+postMessage instead + enqueueTaskImpl = function (callback) { + { + if (didWarnAboutMessageChannel === false) { + didWarnAboutMessageChannel = true; - exports.Children = Children; - exports.Component = Component; - exports.PureComponent = PureComponent; - exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals; - exports.cloneElement = cloneElement$1; - exports.createContext = createContext; - exports.createElement = createElement$1; - exports.createFactory = createFactory; - exports.createRef = createRef; - exports.forwardRef = forwardRef; - exports.isValidElement = isValidElement; - exports.lazy = lazy; - exports.memo = memo; - exports.useCallback = useCallback; - exports.useContext = useContext; - exports.useDebugValue = useDebugValue; - exports.useEffect = useEffect; + if (typeof MessageChannel === 'undefined') { + error('This browser does not have a MessageChannel implementation, ' + 'so enqueuing tasks via await act(async () => ...) will fail. ' + 'Please file an issue at https://github.com/facebook/react/issues ' + 'if you encounter this warning.'); + } + } + } + + var channel = new MessageChannel(); + channel.port1.onmessage = callback; + channel.port2.postMessage(undefined); + }; + } + } + + return enqueueTaskImpl(task); + } + + var actScopeDepth = 0; + var didWarnNoAwaitAct = false; + function act(callback) { + { + // `act` calls can be nested, so we track the depth. This represents the + // number of `act` scopes on the stack. + var prevActScopeDepth = actScopeDepth; + actScopeDepth++; + + if (ReactCurrentActQueue.current === null) { + // This is the outermost `act` scope. Initialize the queue. The reconciler + // will detect the queue and use it instead of Scheduler. + ReactCurrentActQueue.current = []; + } + + var prevIsBatchingLegacy = ReactCurrentActQueue.isBatchingLegacy; + var result; + + try { + // Used to reproduce behavior of `batchedUpdates` in legacy mode. Only + // set to `true` while the given callback is executed, not for updates + // triggered during an async event, because this is how the legacy + // implementation of `act` behaved. + ReactCurrentActQueue.isBatchingLegacy = true; + result = callback(); // Replicate behavior of original `act` implementation in legacy mode, + // which flushed updates immediately after the scope function exits, even + // if it's an async function. + + if (!prevIsBatchingLegacy && ReactCurrentActQueue.didScheduleLegacyUpdate) { + var queue = ReactCurrentActQueue.current; + + if (queue !== null) { + ReactCurrentActQueue.didScheduleLegacyUpdate = false; + flushActQueue(queue); + } + } + } catch (error) { + popActScope(prevActScopeDepth); + throw error; + } finally { + ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy; + } + + if (result !== null && typeof result === 'object' && typeof result.then === 'function') { + var thenableResult = result; // The callback is an async function (i.e. returned a promise). Wait + // for it to resolve before exiting the current scope. + + var wasAwaited = false; + var thenable = { + then: function (resolve, reject) { + wasAwaited = true; + thenableResult.then(function (returnValue) { + popActScope(prevActScopeDepth); + + if (actScopeDepth === 0) { + // We've exited the outermost act scope. Recursively flush the + // queue until there's no remaining work. + recursivelyFlushAsyncActWork(returnValue, resolve, reject); + } else { + resolve(returnValue); + } + }, function (error) { + // The callback threw an error. + popActScope(prevActScopeDepth); + reject(error); + }); + } + }; + + { + if (!didWarnNoAwaitAct && typeof Promise !== 'undefined') { + // eslint-disable-next-line no-undef + Promise.resolve().then(function () {}).then(function () { + if (!wasAwaited) { + didWarnNoAwaitAct = true; + + error('You called act(async () => ...) without await. ' + 'This could lead to unexpected testing behaviour, ' + 'interleaving multiple act calls and mixing their ' + 'scopes. ' + 'You should - await act(async () => ...);'); + } + }); + } + } + + return thenable; + } else { + var returnValue = result; // The callback is not an async function. Exit the current scope + // immediately, without awaiting. + + popActScope(prevActScopeDepth); + + if (actScopeDepth === 0) { + // Exiting the outermost act scope. Flush the queue. + var _queue = ReactCurrentActQueue.current; + + if (_queue !== null) { + flushActQueue(_queue); + ReactCurrentActQueue.current = null; + } // Return a thenable. If the user awaits it, we'll flush again in + // case additional work was scheduled by a microtask. + + + var _thenable = { + then: function (resolve, reject) { + // Confirm we haven't re-entered another `act` scope, in case + // the user does something weird like await the thenable + // multiple times. + if (ReactCurrentActQueue.current === null) { + // Recursively flush the queue until there's no remaining work. + ReactCurrentActQueue.current = []; + recursivelyFlushAsyncActWork(returnValue, resolve, reject); + } else { + resolve(returnValue); + } + } + }; + return _thenable; + } else { + // Since we're inside a nested `act` scope, the returned thenable + // immediately resolves. The outer scope will flush the queue. + var _thenable2 = { + then: function (resolve, reject) { + resolve(returnValue); + } + }; + return _thenable2; + } + } + } + } + + function popActScope(prevActScopeDepth) { + { + if (prevActScopeDepth !== actScopeDepth - 1) { + error('You seem to have overlapping act() calls, this is not supported. ' + 'Be sure to await previous act() calls before making a new one. '); + } + + actScopeDepth = prevActScopeDepth; + } + } + + function recursivelyFlushAsyncActWork(returnValue, resolve, reject) { + { + var queue = ReactCurrentActQueue.current; + + if (queue !== null) { + try { + flushActQueue(queue); + enqueueTask(function () { + if (queue.length === 0) { + // No additional work was scheduled. Finish. + ReactCurrentActQueue.current = null; + resolve(returnValue); + } else { + // Keep flushing work until there's none left. + recursivelyFlushAsyncActWork(returnValue, resolve, reject); + } + }); + } catch (error) { + reject(error); + } + } else { + resolve(returnValue); + } + } + } + + var isFlushing = false; + + function flushActQueue(queue) { + { + if (!isFlushing) { + // Prevent re-entrance. + isFlushing = true; + var i = 0; + + try { + for (; i < queue.length; i++) { + var callback = queue[i]; + + do { + callback = callback(true); + } while (callback !== null); + } + + queue.length = 0; + } catch (error) { + // If something throws, leave the remaining callbacks on the queue. + queue = queue.slice(i + 1); + throw error; + } finally { + isFlushing = false; + } + } + } + } + + var createElement$1 = createElementWithValidation ; + var cloneElement$1 = cloneElementWithValidation ; + var createFactory = createFactoryWithValidation ; + var Children = { + map: mapChildren, + forEach: forEachChildren, + count: countChildren, + toArray: toArray, + only: onlyChild + }; + + exports.Children = Children; + exports.Component = Component; + exports.Fragment = REACT_FRAGMENT_TYPE; + exports.Profiler = REACT_PROFILER_TYPE; + exports.PureComponent = PureComponent; + exports.StrictMode = REACT_STRICT_MODE_TYPE; + exports.Suspense = REACT_SUSPENSE_TYPE; + exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals; + exports.act = act; + exports.cloneElement = cloneElement$1; + exports.createContext = createContext; + exports.createElement = createElement$1; + exports.createFactory = createFactory; + exports.createRef = createRef; + exports.forwardRef = forwardRef; + exports.isValidElement = isValidElement; + exports.lazy = lazy; + exports.memo = memo; + exports.startTransition = startTransition; + exports.unstable_act = act; + exports.useCallback = useCallback; + exports.useContext = useContext; + exports.useDebugValue = useDebugValue; + exports.useDeferredValue = useDeferredValue; + exports.useEffect = useEffect; + exports.useId = useId; exports.useImperativeHandle = useImperativeHandle; + exports.useInsertionEffect = useInsertionEffect; exports.useLayoutEffect = useLayoutEffect; exports.useMemo = useMemo; exports.useReducer = useReducer; exports.useRef = useRef; exports.useState = useState; + exports.useSyncExternalStore = useSyncExternalStore; + exports.useTransition = useTransition; exports.version = ReactVersion; + /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ + if ( + typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && + typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === + 'function' + ) { + __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error()); + } + })(); } -} (react_development)); - return react_development; +} (react_development, react_developmentExports)); + return react_developmentExports; } (function (module) { @@ -6324,7 +6703,8 @@ function requireReact_development () { } } (react)); -/** @license React v17.0.2 +/** + * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. @@ -6338,14 +6718,15 @@ var hasRequiredReactJsxRuntime_production_min; function requireReactJsxRuntime_production_min () { if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min; hasRequiredReactJsxRuntime_production_min = 1; -requireObjectAssign();var f=reactExports,g=60103;reactJsxRuntime_production_min.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");reactJsxRuntime_production_min.Fragment=h("react.fragment");}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0}; - function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q; +var f=reactExports,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0}; + function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q; return reactJsxRuntime_production_min; } var reactJsxRuntime_development = {}; -/** @license React v17.0.2 +/** + * @license React * react-jsx-runtime.development.js * * Copyright (c) Facebook, Inc. and its affiliates. @@ -6359,1215 +6740,1327 @@ var hasRequiredReactJsxRuntime_development; function requireReactJsxRuntime_development () { if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development; hasRequiredReactJsxRuntime_development = 1; - (function (exports) { - if (process.env.NODE_ENV !== "production") { - (function() { + if (process.env.NODE_ENV !== "production") { + (function() { + + var React = reactExports; + + // ATTENTION + // When adding new symbols to this file, + // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols' + // The Symbol used to tag the ReactElement-like types. + var REACT_ELEMENT_TYPE = Symbol.for('react.element'); + var REACT_PORTAL_TYPE = Symbol.for('react.portal'); + var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment'); + var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode'); + var REACT_PROFILER_TYPE = Symbol.for('react.profiler'); + var REACT_PROVIDER_TYPE = Symbol.for('react.provider'); + var REACT_CONTEXT_TYPE = Symbol.for('react.context'); + var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref'); + var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense'); + var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list'); + var REACT_MEMO_TYPE = Symbol.for('react.memo'); + var REACT_LAZY_TYPE = Symbol.for('react.lazy'); + var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen'); + var MAYBE_ITERATOR_SYMBOL = Symbol.iterator; + var FAUX_ITERATOR_SYMBOL = '@@iterator'; + function getIteratorFn(maybeIterable) { + if (maybeIterable === null || typeof maybeIterable !== 'object') { + return null; + } + + var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]; + + if (typeof maybeIterator === 'function') { + return maybeIterator; + } + + return null; + } - var React = reactExports; - var _assign = requireObjectAssign(); + var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; - // ATTENTION - // When adding new symbols to this file, - // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols' - // The Symbol used to tag the ReactElement-like types. If there is no native Symbol - // nor polyfill, then a plain number is used for performance. - var REACT_ELEMENT_TYPE = 0xeac7; - var REACT_PORTAL_TYPE = 0xeaca; - exports.Fragment = 0xeacb; - var REACT_STRICT_MODE_TYPE = 0xeacc; - var REACT_PROFILER_TYPE = 0xead2; - var REACT_PROVIDER_TYPE = 0xeacd; - var REACT_CONTEXT_TYPE = 0xeace; - var REACT_FORWARD_REF_TYPE = 0xead0; - var REACT_SUSPENSE_TYPE = 0xead1; - var REACT_SUSPENSE_LIST_TYPE = 0xead8; - var REACT_MEMO_TYPE = 0xead3; - var REACT_LAZY_TYPE = 0xead4; - var REACT_BLOCK_TYPE = 0xead9; - var REACT_SERVER_BLOCK_TYPE = 0xeada; - var REACT_FUNDAMENTAL_TYPE = 0xead5; - var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1; - var REACT_LEGACY_HIDDEN_TYPE = 0xeae3; - - if (typeof Symbol === 'function' && Symbol.for) { - var symbolFor = Symbol.for; - REACT_ELEMENT_TYPE = symbolFor('react.element'); - REACT_PORTAL_TYPE = symbolFor('react.portal'); - exports.Fragment = symbolFor('react.fragment'); - REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode'); - REACT_PROFILER_TYPE = symbolFor('react.profiler'); - REACT_PROVIDER_TYPE = symbolFor('react.provider'); - REACT_CONTEXT_TYPE = symbolFor('react.context'); - REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref'); - REACT_SUSPENSE_TYPE = symbolFor('react.suspense'); - REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list'); - REACT_MEMO_TYPE = symbolFor('react.memo'); - REACT_LAZY_TYPE = symbolFor('react.lazy'); - REACT_BLOCK_TYPE = symbolFor('react.block'); - REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block'); - REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental'); - symbolFor('react.scope'); - symbolFor('react.opaque.id'); - REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode'); - symbolFor('react.offscreen'); - REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden'); - } + function error(format) { + { + { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } - var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator; - var FAUX_ITERATOR_SYMBOL = '@@iterator'; - function getIteratorFn(maybeIterable) { - if (maybeIterable === null || typeof maybeIterable !== 'object') { - return null; - } + printWarning('error', format, args); + } + } + } - var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]; + function printWarning(level, format, args) { + // When changing this logic, you might want to also + // update consoleWithStackDev.www.js as well. + { + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + var stack = ReactDebugCurrentFrame.getStackAddendum(); - if (typeof maybeIterator === 'function') { - return maybeIterator; - } + if (stack !== '') { + format += '%s'; + args = args.concat([stack]); + } // eslint-disable-next-line react-internal/safe-string-coercion - return null; - } - var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; + var argsWithFormat = args.map(function (item) { + return String(item); + }); // Careful: RN currently depends on this prefix - function error(format) { - { - for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { - args[_key2 - 1] = arguments[_key2]; - } + argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it + // breaks IE9: https://github.com/facebook/react/issues/13610 + // eslint-disable-next-line react-internal/no-production-logging - printWarning('error', format, args); - } - } + Function.prototype.apply.call(console[level], console, argsWithFormat); + } + } - function printWarning(level, format, args) { - // When changing this logic, you might want to also - // update consoleWithStackDev.www.js as well. - { - var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; - var stack = ReactDebugCurrentFrame.getStackAddendum(); + // ----------------------------------------------------------------------------- - if (stack !== '') { - format += '%s'; - args = args.concat([stack]); - } + var enableScopeAPI = false; // Experimental Create Event Handle API. + var enableCacheElement = false; + var enableTransitionTracing = false; // No known bugs, but needs performance testing - var argsWithFormat = args.map(function (item) { - return '' + item; - }); // Careful: RN currently depends on this prefix + var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber + // stuff. Intended to enable React core members to more easily debug scheduling + // issues in DEV builds. - argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it - // breaks IE9: https://github.com/facebook/react/issues/13610 - // eslint-disable-next-line react-internal/no-production-logging + var enableDebugTracing = false; // Track which Fiber(s) schedule render work. - Function.prototype.apply.call(console[level], console, argsWithFormat); - } - } + var REACT_MODULE_REFERENCE; - // Filter certain DOM attributes (e.g. src, href) if their values are empty strings. + { + REACT_MODULE_REFERENCE = Symbol.for('react.module.reference'); + } - var enableScopeAPI = false; // Experimental Create Event Handle API. + function isValidElementType(type) { + if (typeof type === 'string' || typeof type === 'function') { + return true; + } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill). - function isValidElementType(type) { - if (typeof type === 'string' || typeof type === 'function') { - return true; - } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill). + if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing ) { + return true; + } - if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) { - return true; - } + if (typeof type === 'object' && type !== null) { + if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object + // types supported by any Flight configuration anywhere since + // we don't know which Flight build this will end up being used + // with. + type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) { + return true; + } + } - if (typeof type === 'object' && type !== null) { - if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) { - return true; - } - } + return false; + } - return false; - } + function getWrappedName(outerType, innerType, wrapperName) { + var displayName = outerType.displayName; - function getWrappedName(outerType, innerType, wrapperName) { - var functionName = innerType.displayName || innerType.name || ''; - return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName); - } + if (displayName) { + return displayName; + } - function getContextName(type) { - return type.displayName || 'Context'; - } + var functionName = innerType.displayName || innerType.name || ''; + return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName; + } // Keep in sync with react-reconciler/getComponentNameFromFiber - function getComponentName(type) { - if (type == null) { - // Host root, text node or just invalid type. - return null; - } - { - if (typeof type.tag === 'number') { - error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.'); - } - } + function getContextName(type) { + return type.displayName || 'Context'; + } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead. - if (typeof type === 'function') { - return type.displayName || type.name || null; - } - if (typeof type === 'string') { - return type; - } + function getComponentNameFromType(type) { + if (type == null) { + // Host root, text node or just invalid type. + return null; + } - switch (type) { - case exports.Fragment: - return 'Fragment'; + { + if (typeof type.tag === 'number') { + error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.'); + } + } - case REACT_PORTAL_TYPE: - return 'Portal'; + if (typeof type === 'function') { + return type.displayName || type.name || null; + } - case REACT_PROFILER_TYPE: - return 'Profiler'; + if (typeof type === 'string') { + return type; + } - case REACT_STRICT_MODE_TYPE: - return 'StrictMode'; + switch (type) { + case REACT_FRAGMENT_TYPE: + return 'Fragment'; - case REACT_SUSPENSE_TYPE: - return 'Suspense'; + case REACT_PORTAL_TYPE: + return 'Portal'; - case REACT_SUSPENSE_LIST_TYPE: - return 'SuspenseList'; - } + case REACT_PROFILER_TYPE: + return 'Profiler'; - if (typeof type === 'object') { - switch (type.$$typeof) { - case REACT_CONTEXT_TYPE: - var context = type; - return getContextName(context) + '.Consumer'; + case REACT_STRICT_MODE_TYPE: + return 'StrictMode'; - case REACT_PROVIDER_TYPE: - var provider = type; - return getContextName(provider._context) + '.Provider'; + case REACT_SUSPENSE_TYPE: + return 'Suspense'; - case REACT_FORWARD_REF_TYPE: - return getWrappedName(type, type.render, 'ForwardRef'); + case REACT_SUSPENSE_LIST_TYPE: + return 'SuspenseList'; - case REACT_MEMO_TYPE: - return getComponentName(type.type); + } - case REACT_BLOCK_TYPE: - return getComponentName(type._render); + if (typeof type === 'object') { + switch (type.$$typeof) { + case REACT_CONTEXT_TYPE: + var context = type; + return getContextName(context) + '.Consumer'; - case REACT_LAZY_TYPE: - { - var lazyComponent = type; - var payload = lazyComponent._payload; - var init = lazyComponent._init; + case REACT_PROVIDER_TYPE: + var provider = type; + return getContextName(provider._context) + '.Provider'; - try { - return getComponentName(init(payload)); - } catch (x) { - return null; - } - } - } - } + case REACT_FORWARD_REF_TYPE: + return getWrappedName(type, type.render, 'ForwardRef'); - return null; - } + case REACT_MEMO_TYPE: + var outerName = type.displayName || null; - // Helpers to patch console.logs to avoid logging during side-effect free - // replaying on render function. This currently only patches the object - // lazily which won't cover if the log function was extracted eagerly. - // We could also eagerly patch the method. - var disabledDepth = 0; - var prevLog; - var prevInfo; - var prevWarn; - var prevError; - var prevGroup; - var prevGroupCollapsed; - var prevGroupEnd; + if (outerName !== null) { + return outerName; + } - function disabledLog() {} + return getComponentNameFromType(type.type) || 'Memo'; - disabledLog.__reactDisabledLog = true; - function disableLogs() { - { - if (disabledDepth === 0) { - /* eslint-disable react-internal/no-production-logging */ - prevLog = console.log; - prevInfo = console.info; - prevWarn = console.warn; - prevError = console.error; - prevGroup = console.group; - prevGroupCollapsed = console.groupCollapsed; - prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099 + case REACT_LAZY_TYPE: + { + var lazyComponent = type; + var payload = lazyComponent._payload; + var init = lazyComponent._init; - var props = { - configurable: true, - enumerable: true, - value: disabledLog, - writable: true - }; // $FlowFixMe Flow thinks console is immutable. + try { + return getComponentNameFromType(init(payload)); + } catch (x) { + return null; + } + } - Object.defineProperties(console, { - info: props, - log: props, - warn: props, - error: props, - group: props, - groupCollapsed: props, - groupEnd: props - }); - /* eslint-enable react-internal/no-production-logging */ - } - - disabledDepth++; - } - } - function reenableLogs() { - { - disabledDepth--; - - if (disabledDepth === 0) { - /* eslint-disable react-internal/no-production-logging */ - var props = { - configurable: true, - enumerable: true, - writable: true - }; // $FlowFixMe Flow thinks console is immutable. - - Object.defineProperties(console, { - log: _assign({}, props, { - value: prevLog - }), - info: _assign({}, props, { - value: prevInfo - }), - warn: _assign({}, props, { - value: prevWarn - }), - error: _assign({}, props, { - value: prevError - }), - group: _assign({}, props, { - value: prevGroup - }), - groupCollapsed: _assign({}, props, { - value: prevGroupCollapsed - }), - groupEnd: _assign({}, props, { - value: prevGroupEnd - }) - }); - /* eslint-enable react-internal/no-production-logging */ - } - - if (disabledDepth < 0) { - error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.'); - } - } - } - - var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; - var prefix; - function describeBuiltInComponentFrame(name, source, ownerFn) { - { - if (prefix === undefined) { - // Extract the VM specific prefix used by each line. - try { - throw Error(); - } catch (x) { - var match = x.stack.trim().match(/\n( *(at )?)/); - prefix = match && match[1] || ''; - } - } // We use the prefix to ensure our stacks line up with native stack frames. - - - return '\n' + prefix + name; - } - } - var reentry = false; - var componentFrameCache; - - { - var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map; - componentFrameCache = new PossiblyWeakMap(); - } - - function describeNativeComponentFrame(fn, construct) { - // If something asked for a stack inside a fake render, it should get ignored. - if (!fn || reentry) { - return ''; - } - - { - var frame = componentFrameCache.get(fn); - - if (frame !== undefined) { - return frame; - } - } - - var control; - reentry = true; - var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined. - - Error.prepareStackTrace = undefined; - var previousDispatcher; - - { - previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function - // for warnings. - - ReactCurrentDispatcher.current = null; - disableLogs(); - } + // eslint-disable-next-line no-fallthrough + } + } - try { - // This should throw. - if (construct) { - // Something should be setting the props in the constructor. - var Fake = function () { - throw Error(); - }; // $FlowFixMe + return null; + } + var assign = Object.assign; + + // Helpers to patch console.logs to avoid logging during side-effect free + // replaying on render function. This currently only patches the object + // lazily which won't cover if the log function was extracted eagerly. + // We could also eagerly patch the method. + var disabledDepth = 0; + var prevLog; + var prevInfo; + var prevWarn; + var prevError; + var prevGroup; + var prevGroupCollapsed; + var prevGroupEnd; + + function disabledLog() {} + + disabledLog.__reactDisabledLog = true; + function disableLogs() { + { + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + prevLog = console.log; + prevInfo = console.info; + prevWarn = console.warn; + prevError = console.error; + prevGroup = console.group; + prevGroupCollapsed = console.groupCollapsed; + prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099 + + var props = { + configurable: true, + enumerable: true, + value: disabledLog, + writable: true + }; // $FlowFixMe Flow thinks console is immutable. + + Object.defineProperties(console, { + info: props, + log: props, + warn: props, + error: props, + group: props, + groupCollapsed: props, + groupEnd: props + }); + /* eslint-enable react-internal/no-production-logging */ + } - Object.defineProperty(Fake.prototype, 'props', { - set: function () { - // We use a throwing setter instead of frozen or non-writable props - // because that won't throw in a non-strict mode function. - throw Error(); - } - }); + disabledDepth++; + } + } + function reenableLogs() { + { + disabledDepth--; + + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + var props = { + configurable: true, + enumerable: true, + writable: true + }; // $FlowFixMe Flow thinks console is immutable. + + Object.defineProperties(console, { + log: assign({}, props, { + value: prevLog + }), + info: assign({}, props, { + value: prevInfo + }), + warn: assign({}, props, { + value: prevWarn + }), + error: assign({}, props, { + value: prevError + }), + group: assign({}, props, { + value: prevGroup + }), + groupCollapsed: assign({}, props, { + value: prevGroupCollapsed + }), + groupEnd: assign({}, props, { + value: prevGroupEnd + }) + }); + /* eslint-enable react-internal/no-production-logging */ + } - if (typeof Reflect === 'object' && Reflect.construct) { - // We construct a different control for this case to include any extra - // frames added by the construct call. - try { - Reflect.construct(Fake, []); - } catch (x) { - control = x; - } + if (disabledDepth < 0) { + error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.'); + } + } + } - Reflect.construct(fn, [], Fake); - } else { - try { - Fake.call(); - } catch (x) { - control = x; - } + var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; + var prefix; + function describeBuiltInComponentFrame(name, source, ownerFn) { + { + if (prefix === undefined) { + // Extract the VM specific prefix used by each line. + try { + throw Error(); + } catch (x) { + var match = x.stack.trim().match(/\n( *(at )?)/); + prefix = match && match[1] || ''; + } + } // We use the prefix to ensure our stacks line up with native stack frames. - fn.call(Fake.prototype); - } - } else { - try { - throw Error(); - } catch (x) { - control = x; - } - fn(); - } - } catch (sample) { - // This is inlined manually because closure doesn't do it for us. - if (sample && control && typeof sample.stack === 'string') { - // This extracts the first frame from the sample that isn't also in the control. - // Skipping one frame that we assume is the frame that calls the two. - var sampleLines = sample.stack.split('\n'); - var controlLines = control.stack.split('\n'); - var s = sampleLines.length - 1; - var c = controlLines.length - 1; + return '\n' + prefix + name; + } + } + var reentry = false; + var componentFrameCache; - while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) { - // We expect at least one stack frame to be shared. - // Typically this will be the root most one. However, stack frames may be - // cut off due to maximum stack limits. In this case, one maybe cut off - // earlier than the other. We assume that the sample is longer or the same - // and there for cut off earlier. So we should find the root most frame in - // the sample somewhere in the control. - c--; - } + { + var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map; + componentFrameCache = new PossiblyWeakMap(); + } - for (; s >= 1 && c >= 0; s--, c--) { - // Next we find the first one that isn't the same which should be the - // frame that called our sample function and the control. - if (sampleLines[s] !== controlLines[c]) { - // In V8, the first line is describing the message but other VMs don't. - // If we're about to return the first line, and the control is also on the same - // line, that's a pretty good indicator that our sample threw at same line as - // the control. I.e. before we entered the sample frame. So we ignore this result. - // This can happen if you passed a class to function component, or non-function. - if (s !== 1 || c !== 1) { - do { - s--; - c--; // We may still have similar intermediate frames from the construct call. - // The next one that isn't the same should be our match though. + function describeNativeComponentFrame(fn, construct) { + // If something asked for a stack inside a fake render, it should get ignored. + if ( !fn || reentry) { + return ''; + } - if (c < 0 || sampleLines[s] !== controlLines[c]) { - // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. - var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); + { + var frame = componentFrameCache.get(fn); - { - if (typeof fn === 'function') { - componentFrameCache.set(fn, _frame); - } - } // Return the line we found. + if (frame !== undefined) { + return frame; + } + } + var control; + reentry = true; + var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined. - return _frame; - } - } while (s >= 1 && c >= 0); - } + Error.prepareStackTrace = undefined; + var previousDispatcher; - break; - } - } - } - } finally { - reentry = false; + { + previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function + // for warnings. - { - ReactCurrentDispatcher.current = previousDispatcher; - reenableLogs(); - } + ReactCurrentDispatcher.current = null; + disableLogs(); + } - Error.prepareStackTrace = previousPrepareStackTrace; - } // Fallback to just using the name if we couldn't make it throw. + try { + // This should throw. + if (construct) { + // Something should be setting the props in the constructor. + var Fake = function () { + throw Error(); + }; // $FlowFixMe - var name = fn ? fn.displayName || fn.name : ''; - var syntheticFrame = name ? describeBuiltInComponentFrame(name) : ''; - - { - if (typeof fn === 'function') { - componentFrameCache.set(fn, syntheticFrame); - } - } + Object.defineProperty(Fake.prototype, 'props', { + set: function () { + // We use a throwing setter instead of frozen or non-writable props + // because that won't throw in a non-strict mode function. + throw Error(); + } + }); + + if (typeof Reflect === 'object' && Reflect.construct) { + // We construct a different control for this case to include any extra + // frames added by the construct call. + try { + Reflect.construct(Fake, []); + } catch (x) { + control = x; + } - return syntheticFrame; - } - function describeFunctionComponentFrame(fn, source, ownerFn) { - { - return describeNativeComponentFrame(fn, false); - } - } + Reflect.construct(fn, [], Fake); + } else { + try { + Fake.call(); + } catch (x) { + control = x; + } - function shouldConstruct(Component) { - var prototype = Component.prototype; - return !!(prototype && prototype.isReactComponent); - } + fn.call(Fake.prototype); + } + } else { + try { + throw Error(); + } catch (x) { + control = x; + } - function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) { + fn(); + } + } catch (sample) { + // This is inlined manually because closure doesn't do it for us. + if (sample && control && typeof sample.stack === 'string') { + // This extracts the first frame from the sample that isn't also in the control. + // Skipping one frame that we assume is the frame that calls the two. + var sampleLines = sample.stack.split('\n'); + var controlLines = control.stack.split('\n'); + var s = sampleLines.length - 1; + var c = controlLines.length - 1; + + while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) { + // We expect at least one stack frame to be shared. + // Typically this will be the root most one. However, stack frames may be + // cut off due to maximum stack limits. In this case, one maybe cut off + // earlier than the other. We assume that the sample is longer or the same + // and there for cut off earlier. So we should find the root most frame in + // the sample somewhere in the control. + c--; + } - if (type == null) { - return ''; - } + for (; s >= 1 && c >= 0; s--, c--) { + // Next we find the first one that isn't the same which should be the + // frame that called our sample function and the control. + if (sampleLines[s] !== controlLines[c]) { + // In V8, the first line is describing the message but other VMs don't. + // If we're about to return the first line, and the control is also on the same + // line, that's a pretty good indicator that our sample threw at same line as + // the control. I.e. before we entered the sample frame. So we ignore this result. + // This can happen if you passed a class to function component, or non-function. + if (s !== 1 || c !== 1) { + do { + s--; + c--; // We may still have similar intermediate frames from the construct call. + // The next one that isn't the same should be our match though. + + if (c < 0 || sampleLines[s] !== controlLines[c]) { + // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. + var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "" + // but we have a user-provided "displayName" + // splice it in to make the stack more readable. + + + if (fn.displayName && _frame.includes('')) { + _frame = _frame.replace('', fn.displayName); + } + + { + if (typeof fn === 'function') { + componentFrameCache.set(fn, _frame); + } + } // Return the line we found. - if (typeof type === 'function') { - { - return describeNativeComponentFrame(type, shouldConstruct(type)); - } - } - if (typeof type === 'string') { - return describeBuiltInComponentFrame(type); - } + return _frame; + } + } while (s >= 1 && c >= 0); + } - switch (type) { - case REACT_SUSPENSE_TYPE: - return describeBuiltInComponentFrame('Suspense'); + break; + } + } + } + } finally { + reentry = false; - case REACT_SUSPENSE_LIST_TYPE: - return describeBuiltInComponentFrame('SuspenseList'); - } + { + ReactCurrentDispatcher.current = previousDispatcher; + reenableLogs(); + } - if (typeof type === 'object') { - switch (type.$$typeof) { - case REACT_FORWARD_REF_TYPE: - return describeFunctionComponentFrame(type.render); + Error.prepareStackTrace = previousPrepareStackTrace; + } // Fallback to just using the name if we couldn't make it throw. - case REACT_MEMO_TYPE: - // Memo may contain any component type so we recursively resolve it. - return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn); - case REACT_BLOCK_TYPE: - return describeFunctionComponentFrame(type._render); + var name = fn ? fn.displayName || fn.name : ''; + var syntheticFrame = name ? describeBuiltInComponentFrame(name) : ''; - case REACT_LAZY_TYPE: - { - var lazyComponent = type; - var payload = lazyComponent._payload; - var init = lazyComponent._init; + { + if (typeof fn === 'function') { + componentFrameCache.set(fn, syntheticFrame); + } + } - try { - // Lazy may contain any component type so we recursively resolve it. - return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn); - } catch (x) {} - } - } - } + return syntheticFrame; + } + function describeFunctionComponentFrame(fn, source, ownerFn) { + { + return describeNativeComponentFrame(fn, false); + } + } - return ''; - } + function shouldConstruct(Component) { + var prototype = Component.prototype; + return !!(prototype && prototype.isReactComponent); + } - var loggedTypeFailures = {}; - var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) { - function setCurrentlyValidatingElement(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null); - ReactDebugCurrentFrame.setExtraStackFrame(stack); - } else { - ReactDebugCurrentFrame.setExtraStackFrame(null); - } - } - } + if (type == null) { + return ''; + } - function checkPropTypes(typeSpecs, values, location, componentName, element) { - { - // $FlowFixMe This is okay but Flow doesn't know it. - var has = Function.call.bind(Object.prototype.hasOwnProperty); + if (typeof type === 'function') { + { + return describeNativeComponentFrame(type, shouldConstruct(type)); + } + } - for (var typeSpecName in typeSpecs) { - if (has(typeSpecs, typeSpecName)) { - var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to - // fail the render phase where it didn't fail before. So we log it. - // After these have been cleaned up, we'll let them throw. + if (typeof type === 'string') { + return describeBuiltInComponentFrame(type); + } - try { - // This is intentionally an invariant that gets caught. It's the same - // behavior as without this statement except with a better message. - if (typeof typeSpecs[typeSpecName] !== 'function') { - var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'); - err.name = 'Invariant Violation'; - throw err; - } + switch (type) { + case REACT_SUSPENSE_TYPE: + return describeBuiltInComponentFrame('Suspense'); - error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'); - } catch (ex) { - error$1 = ex; - } + case REACT_SUSPENSE_LIST_TYPE: + return describeBuiltInComponentFrame('SuspenseList'); + } - if (error$1 && !(error$1 instanceof Error)) { - setCurrentlyValidatingElement(element); + if (typeof type === 'object') { + switch (type.$$typeof) { + case REACT_FORWARD_REF_TYPE: + return describeFunctionComponentFrame(type.render); - error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1); + case REACT_MEMO_TYPE: + // Memo may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn); - setCurrentlyValidatingElement(null); - } + case REACT_LAZY_TYPE: + { + var lazyComponent = type; + var payload = lazyComponent._payload; + var init = lazyComponent._init; - if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) { - // Only monitor this failure once because there tends to be a lot of the - // same error. - loggedTypeFailures[error$1.message] = true; - setCurrentlyValidatingElement(element); + try { + // Lazy may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn); + } catch (x) {} + } + } + } - error('Failed %s type: %s', location, error$1.message); + return ''; + } - setCurrentlyValidatingElement(null); - } - } - } - } - } + var hasOwnProperty = Object.prototype.hasOwnProperty; - var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; - var hasOwnProperty = Object.prototype.hasOwnProperty; - var RESERVED_PROPS = { - key: true, - ref: true, - __self: true, - __source: true - }; - var specialPropKeyWarningShown; - var specialPropRefWarningShown; - var didWarnAboutStringRefs; + var loggedTypeFailures = {}; + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; - { - didWarnAboutStringRefs = {}; - } + function setCurrentlyValidatingElement(element) { + { + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null); + ReactDebugCurrentFrame.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame.setExtraStackFrame(null); + } + } + } - function hasValidRef(config) { - { - if (hasOwnProperty.call(config, 'ref')) { - var getter = Object.getOwnPropertyDescriptor(config, 'ref').get; + function checkPropTypes(typeSpecs, values, location, componentName, element) { + { + // $FlowFixMe This is okay but Flow doesn't know it. + var has = Function.call.bind(hasOwnProperty); + + for (var typeSpecName in typeSpecs) { + if (has(typeSpecs, typeSpecName)) { + var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to + // fail the render phase where it didn't fail before. So we log it. + // After these have been cleaned up, we'll let them throw. + + try { + // This is intentionally an invariant that gets caught. It's the same + // behavior as without this statement except with a better message. + if (typeof typeSpecs[typeSpecName] !== 'function') { + // eslint-disable-next-line react-internal/prod-error-codes + var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'); + err.name = 'Invariant Violation'; + throw err; + } - if (getter && getter.isReactWarning) { - return false; - } - } - } + error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'); + } catch (ex) { + error$1 = ex; + } - return config.ref !== undefined; - } + if (error$1 && !(error$1 instanceof Error)) { + setCurrentlyValidatingElement(element); - function hasValidKey(config) { - { - if (hasOwnProperty.call(config, 'key')) { - var getter = Object.getOwnPropertyDescriptor(config, 'key').get; + error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1); - if (getter && getter.isReactWarning) { - return false; - } - } - } + setCurrentlyValidatingElement(null); + } - return config.key !== undefined; - } + if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) { + // Only monitor this failure once because there tends to be a lot of the + // same error. + loggedTypeFailures[error$1.message] = true; + setCurrentlyValidatingElement(element); - function warnIfStringRefCannotBeAutoConverted(config, self) { - { - if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) { - var componentName = getComponentName(ReactCurrentOwner.current.type); + error('Failed %s type: %s', location, error$1.message); - if (!didWarnAboutStringRefs[componentName]) { - error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentName(ReactCurrentOwner.current.type), config.ref); + setCurrentlyValidatingElement(null); + } + } + } + } + } - didWarnAboutStringRefs[componentName] = true; - } - } - } - } + var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare - function defineKeyPropWarningGetter(props, displayName) { - { - var warnAboutAccessingKey = function () { - if (!specialPropKeyWarningShown) { - specialPropKeyWarningShown = true; + function isArray(a) { + return isArrayImpl(a); + } - error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName); - } - }; + /* + * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol + * and Temporal.* types. See https://github.com/facebook/react/pull/22064. + * + * The functions in this module will throw an easier-to-understand, + * easier-to-debug exception with a clear errors message message explaining the + * problem. (Instead of a confusing exception thrown inside the implementation + * of the `value` object). + */ + // $FlowFixMe only called in DEV, so void return is not possible. + function typeName(value) { + { + // toStringTag is needed for namespaced types like Temporal.Instant + var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag; + var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object'; + return type; + } + } // $FlowFixMe only called in DEV, so void return is not possible. + + + function willCoercionThrow(value) { + { + try { + testStringCoercion(value); + return false; + } catch (e) { + return true; + } + } + } - warnAboutAccessingKey.isReactWarning = true; - Object.defineProperty(props, 'key', { - get: warnAboutAccessingKey, - configurable: true - }); - } - } + function testStringCoercion(value) { + // If you ended up here by following an exception call stack, here's what's + // happened: you supplied an object or symbol value to React (as a prop, key, + // DOM attribute, CSS property, string ref, etc.) and when React tried to + // coerce it to a string using `'' + value`, an exception was thrown. + // + // The most common types that will cause this exception are `Symbol` instances + // and Temporal objects like `Temporal.Instant`. But any object that has a + // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this + // exception. (Library authors do this to prevent users from using built-in + // numeric operators like `+` or comparison operators like `>=` because custom + // methods are needed to perform accurate arithmetic or comparison.) + // + // To fix the problem, coerce this object or symbol value to a string before + // passing it to React. The most reliable way is usually `String(value)`. + // + // To find which value is throwing, check the browser or debugger console. + // Before this exception was thrown, there should be `console.error` output + // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the + // problem and how that type was used: key, atrribute, input value prop, etc. + // In most cases, this console output also shows the component and its + // ancestor components where the exception happened. + // + // eslint-disable-next-line react-internal/safe-string-coercion + return '' + value; + } + function checkKeyStringCoercion(value) { + { + if (willCoercionThrow(value)) { + error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value)); - function defineRefPropWarningGetter(props, displayName) { - { - var warnAboutAccessingRef = function () { - if (!specialPropRefWarningShown) { - specialPropRefWarningShown = true; + return testStringCoercion(value); // throw (to help callers find troubleshooting comments) + } + } + } - error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName); - } - }; + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; + var RESERVED_PROPS = { + key: true, + ref: true, + __self: true, + __source: true + }; + var specialPropKeyWarningShown; + var specialPropRefWarningShown; + var didWarnAboutStringRefs; - warnAboutAccessingRef.isReactWarning = true; - Object.defineProperty(props, 'ref', { - get: warnAboutAccessingRef, - configurable: true - }); - } - } - /** - * Factory method to create a new React element. This no longer adheres to - * the class pattern, so do not use new to call it. Also, instanceof check - * will not work. Instead test $$typeof field against Symbol.for('react.element') to check - * if something is a React Element. - * - * @param {*} type - * @param {*} props - * @param {*} key - * @param {string|object} ref - * @param {*} owner - * @param {*} self A *temporary* helper to detect places where `this` is - * different from the `owner` when React.createElement is called, so that we - * can warn. We want to get rid of owner and replace string `ref`s with arrow - * functions, and as long as `this` and owner are the same, there will be no - * change in behavior. - * @param {*} source An annotation object (added by a transpiler or otherwise) - * indicating filename, line number, and/or other information. - * @internal - */ + { + didWarnAboutStringRefs = {}; + } + function hasValidRef(config) { + { + if (hasOwnProperty.call(config, 'ref')) { + var getter = Object.getOwnPropertyDescriptor(config, 'ref').get; - var ReactElement = function (type, key, ref, self, source, owner, props) { - var element = { - // This tag allows us to uniquely identify this as a React Element - $$typeof: REACT_ELEMENT_TYPE, - // Built-in properties that belong on the element - type: type, - key: key, - ref: ref, - props: props, - // Record the component responsible for creating this element. - _owner: owner - }; + if (getter && getter.isReactWarning) { + return false; + } + } + } - { - // The validation flag is currently mutative. We put it on - // an external backing store so that we can freeze the whole object. - // This can be replaced with a WeakMap once they are implemented in - // commonly used development environments. - element._store = {}; // To make comparing ReactElements easier for testing purposes, we make - // the validation flag non-enumerable (where possible, which should - // include every environment we run tests in), so the test framework - // ignores it. + return config.ref !== undefined; + } - Object.defineProperty(element._store, 'validated', { - configurable: false, - enumerable: false, - writable: true, - value: false - }); // self and source are DEV only properties. + function hasValidKey(config) { + { + if (hasOwnProperty.call(config, 'key')) { + var getter = Object.getOwnPropertyDescriptor(config, 'key').get; - Object.defineProperty(element, '_self', { - configurable: false, - enumerable: false, - writable: false, - value: self - }); // Two elements created in two different places should be considered - // equal for testing purposes and therefore we hide it from enumeration. + if (getter && getter.isReactWarning) { + return false; + } + } + } - Object.defineProperty(element, '_source', { - configurable: false, - enumerable: false, - writable: false, - value: source - }); + return config.key !== undefined; + } - if (Object.freeze) { - Object.freeze(element.props); - Object.freeze(element); - } - } + function warnIfStringRefCannotBeAutoConverted(config, self) { + { + if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) { + var componentName = getComponentNameFromType(ReactCurrentOwner.current.type); - return element; - }; - /** - * https://github.com/reactjs/rfcs/pull/107 - * @param {*} type - * @param {object} props - * @param {string} key - */ + if (!didWarnAboutStringRefs[componentName]) { + error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentNameFromType(ReactCurrentOwner.current.type), config.ref); - function jsxDEV(type, config, maybeKey, source, self) { - { - var propName; // Reserved names are extracted - - var props = {}; - var key = null; - var ref = null; // Currently, key can be spread in as a prop. This causes a potential - // issue if key is also explicitly declared (ie.
- // or
). We want to deprecate key spread, - // but as an intermediary step, we will use jsxDEV for everything except - //
, because we aren't currently able to tell if - // key is explicitly declared to be undefined or not. - - if (maybeKey !== undefined) { - key = '' + maybeKey; - } + didWarnAboutStringRefs[componentName] = true; + } + } + } + } - if (hasValidKey(config)) { - key = '' + config.key; - } + function defineKeyPropWarningGetter(props, displayName) { + { + var warnAboutAccessingKey = function () { + if (!specialPropKeyWarningShown) { + specialPropKeyWarningShown = true; - if (hasValidRef(config)) { - ref = config.ref; - warnIfStringRefCannotBeAutoConverted(config, self); - } // Remaining properties are added to a new props object + error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName); + } + }; + warnAboutAccessingKey.isReactWarning = true; + Object.defineProperty(props, 'key', { + get: warnAboutAccessingKey, + configurable: true + }); + } + } - for (propName in config) { - if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) { - props[propName] = config[propName]; - } - } // Resolve default props + function defineRefPropWarningGetter(props, displayName) { + { + var warnAboutAccessingRef = function () { + if (!specialPropRefWarningShown) { + specialPropRefWarningShown = true; + error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName); + } + }; - if (type && type.defaultProps) { - var defaultProps = type.defaultProps; + warnAboutAccessingRef.isReactWarning = true; + Object.defineProperty(props, 'ref', { + get: warnAboutAccessingRef, + configurable: true + }); + } + } + /** + * Factory method to create a new React element. This no longer adheres to + * the class pattern, so do not use new to call it. Also, instanceof check + * will not work. Instead test $$typeof field against Symbol.for('react.element') to check + * if something is a React Element. + * + * @param {*} type + * @param {*} props + * @param {*} key + * @param {string|object} ref + * @param {*} owner + * @param {*} self A *temporary* helper to detect places where `this` is + * different from the `owner` when React.createElement is called, so that we + * can warn. We want to get rid of owner and replace string `ref`s with arrow + * functions, and as long as `this` and owner are the same, there will be no + * change in behavior. + * @param {*} source An annotation object (added by a transpiler or otherwise) + * indicating filename, line number, and/or other information. + * @internal + */ + + + var ReactElement = function (type, key, ref, self, source, owner, props) { + var element = { + // This tag allows us to uniquely identify this as a React Element + $$typeof: REACT_ELEMENT_TYPE, + // Built-in properties that belong on the element + type: type, + key: key, + ref: ref, + props: props, + // Record the component responsible for creating this element. + _owner: owner + }; + + { + // The validation flag is currently mutative. We put it on + // an external backing store so that we can freeze the whole object. + // This can be replaced with a WeakMap once they are implemented in + // commonly used development environments. + element._store = {}; // To make comparing ReactElements easier for testing purposes, we make + // the validation flag non-enumerable (where possible, which should + // include every environment we run tests in), so the test framework + // ignores it. + + Object.defineProperty(element._store, 'validated', { + configurable: false, + enumerable: false, + writable: true, + value: false + }); // self and source are DEV only properties. + + Object.defineProperty(element, '_self', { + configurable: false, + enumerable: false, + writable: false, + value: self + }); // Two elements created in two different places should be considered + // equal for testing purposes and therefore we hide it from enumeration. + + Object.defineProperty(element, '_source', { + configurable: false, + enumerable: false, + writable: false, + value: source + }); + + if (Object.freeze) { + Object.freeze(element.props); + Object.freeze(element); + } + } - for (propName in defaultProps) { - if (props[propName] === undefined) { - props[propName] = defaultProps[propName]; - } - } - } + return element; + }; + /** + * https://github.com/reactjs/rfcs/pull/107 + * @param {*} type + * @param {object} props + * @param {string} key + */ + + function jsxDEV(type, config, maybeKey, source, self) { + { + var propName; // Reserved names are extracted + + var props = {}; + var key = null; + var ref = null; // Currently, key can be spread in as a prop. This causes a potential + // issue if key is also explicitly declared (ie.
+ // or
). We want to deprecate key spread, + // but as an intermediary step, we will use jsxDEV for everything except + //
, because we aren't currently able to tell if + // key is explicitly declared to be undefined or not. + + if (maybeKey !== undefined) { + { + checkKeyStringCoercion(maybeKey); + } - if (key || ref) { - var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type; + key = '' + maybeKey; + } - if (key) { - defineKeyPropWarningGetter(props, displayName); - } + if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } - if (ref) { - defineRefPropWarningGetter(props, displayName); - } - } + key = '' + config.key; + } - return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props); - } - } + if (hasValidRef(config)) { + ref = config.ref; + warnIfStringRefCannotBeAutoConverted(config, self); + } // Remaining properties are added to a new props object - var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner; - var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame; - function setCurrentlyValidatingElement$1(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null); - ReactDebugCurrentFrame$1.setExtraStackFrame(stack); - } else { - ReactDebugCurrentFrame$1.setExtraStackFrame(null); - } - } - } + for (propName in config) { + if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) { + props[propName] = config[propName]; + } + } // Resolve default props - var propTypesMisspellWarningShown; - { - propTypesMisspellWarningShown = false; - } - /** - * Verifies the object is a ReactElement. - * See https://reactjs.org/docs/react-api.html#isvalidelement - * @param {?object} object - * @return {boolean} True if `object` is a ReactElement. - * @final - */ + if (type && type.defaultProps) { + var defaultProps = type.defaultProps; - function isValidElement(object) { - { - return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE; - } - } + for (propName in defaultProps) { + if (props[propName] === undefined) { + props[propName] = defaultProps[propName]; + } + } + } + + if (key || ref) { + var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type; + + if (key) { + defineKeyPropWarningGetter(props, displayName); + } + + if (ref) { + defineRefPropWarningGetter(props, displayName); + } + } + + return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props); + } + } - function getDeclarationErrorAddendum() { - { - if (ReactCurrentOwner$1.current) { - var name = getComponentName(ReactCurrentOwner$1.current.type); + var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner; + var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame; - if (name) { - return '\n\nCheck the render method of `' + name + '`.'; - } - } + function setCurrentlyValidatingElement$1(element) { + { + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null); + ReactDebugCurrentFrame$1.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame$1.setExtraStackFrame(null); + } + } + } - return ''; - } - } + var propTypesMisspellWarningShown; - function getSourceInfoErrorAddendum(source) { - { - if (source !== undefined) { - var fileName = source.fileName.replace(/^.*[\\\/]/, ''); - var lineNumber = source.lineNumber; - return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.'; - } + { + propTypesMisspellWarningShown = false; + } + /** + * Verifies the object is a ReactElement. + * See https://reactjs.org/docs/react-api.html#isvalidelement + * @param {?object} object + * @return {boolean} True if `object` is a ReactElement. + * @final + */ + + + function isValidElement(object) { + { + return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE; + } + } - return ''; - } - } - /** - * Warn if there's no key explicitly set on dynamic arrays of children or - * object keys are not valid. This allows us to keep track of children between - * updates. - */ + function getDeclarationErrorAddendum() { + { + if (ReactCurrentOwner$1.current) { + var name = getComponentNameFromType(ReactCurrentOwner$1.current.type); + if (name) { + return '\n\nCheck the render method of `' + name + '`.'; + } + } - var ownerHasKeyUseWarning = {}; + return ''; + } + } - function getCurrentComponentErrorInfo(parentType) { - { - var info = getDeclarationErrorAddendum(); + function getSourceInfoErrorAddendum(source) { + { + if (source !== undefined) { + var fileName = source.fileName.replace(/^.*[\\\/]/, ''); + var lineNumber = source.lineNumber; + return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.'; + } - if (!info) { - var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name; + return ''; + } + } + /** + * Warn if there's no key explicitly set on dynamic arrays of children or + * object keys are not valid. This allows us to keep track of children between + * updates. + */ - if (parentName) { - info = "\n\nCheck the top-level render call using <" + parentName + ">."; - } - } - return info; - } - } - /** - * Warn if the element doesn't have an explicit key assigned to it. - * This element is in an array. The array could grow and shrink or be - * reordered. All children that haven't already been validated are required to - * have a "key" property assigned to it. Error statuses are cached so a warning - * will only be shown once. - * - * @internal - * @param {ReactElement} element Element that requires a key. - * @param {*} parentType element's parent's type. - */ + var ownerHasKeyUseWarning = {}; + function getCurrentComponentErrorInfo(parentType) { + { + var info = getDeclarationErrorAddendum(); - function validateExplicitKey(element, parentType) { - { - if (!element._store || element._store.validated || element.key != null) { - return; - } + if (!info) { + var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name; - element._store.validated = true; - var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType); + if (parentName) { + info = "\n\nCheck the top-level render call using <" + parentName + ">."; + } + } - if (ownerHasKeyUseWarning[currentComponentErrorInfo]) { - return; - } + return info; + } + } + /** + * Warn if the element doesn't have an explicit key assigned to it. + * This element is in an array. The array could grow and shrink or be + * reordered. All children that haven't already been validated are required to + * have a "key" property assigned to it. Error statuses are cached so a warning + * will only be shown once. + * + * @internal + * @param {ReactElement} element Element that requires a key. + * @param {*} parentType element's parent's type. + */ + + + function validateExplicitKey(element, parentType) { + { + if (!element._store || element._store.validated || element.key != null) { + return; + } - ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a - // property, it may be the creator of the child that's responsible for - // assigning it a key. + element._store.validated = true; + var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType); - var childOwner = ''; + if (ownerHasKeyUseWarning[currentComponentErrorInfo]) { + return; + } - if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) { - // Give the component that originally created this child. - childOwner = " It was passed a child from " + getComponentName(element._owner.type) + "."; - } + ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a + // property, it may be the creator of the child that's responsible for + // assigning it a key. - setCurrentlyValidatingElement$1(element); + var childOwner = ''; - error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner); + if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) { + // Give the component that originally created this child. + childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + "."; + } - setCurrentlyValidatingElement$1(null); - } - } - /** - * Ensure that every element either is passed in a static location, in an - * array with an explicit keys property defined, or in an object literal - * with valid key property. - * - * @internal - * @param {ReactNode} node Statically passed child of any type. - * @param {*} parentType node's parent's type. - */ + setCurrentlyValidatingElement$1(element); + error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner); - function validateChildKeys(node, parentType) { - { - if (typeof node !== 'object') { - return; - } + setCurrentlyValidatingElement$1(null); + } + } + /** + * Ensure that every element either is passed in a static location, in an + * array with an explicit keys property defined, or in an object literal + * with valid key property. + * + * @internal + * @param {ReactNode} node Statically passed child of any type. + * @param {*} parentType node's parent's type. + */ + + + function validateChildKeys(node, parentType) { + { + if (typeof node !== 'object') { + return; + } - if (Array.isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + if (isArray(node)) { + for (var i = 0; i < node.length; i++) { + var child = node[i]; - if (isValidElement(child)) { - validateExplicitKey(child, parentType); - } - } - } else if (isValidElement(node)) { - // This element was passed in a valid location. - if (node._store) { - node._store.validated = true; - } - } else if (node) { - var iteratorFn = getIteratorFn(node); - - if (typeof iteratorFn === 'function') { - // Entry iterators used to provide implicit keys, - // but now we print a separate warning for them later. - if (iteratorFn !== node.entries) { - var iterator = iteratorFn.call(node); - var step; - - while (!(step = iterator.next()).done) { - if (isValidElement(step.value)) { - validateExplicitKey(step.value, parentType); - } - } - } - } - } - } - } - /** - * Given an element, validate that its props follow the propTypes definition, - * provided by the type. - * - * @param {ReactElement} element - */ + if (isValidElement(child)) { + validateExplicitKey(child, parentType); + } + } + } else if (isValidElement(node)) { + // This element was passed in a valid location. + if (node._store) { + node._store.validated = true; + } + } else if (node) { + var iteratorFn = getIteratorFn(node); + + if (typeof iteratorFn === 'function') { + // Entry iterators used to provide implicit keys, + // but now we print a separate warning for them later. + if (iteratorFn !== node.entries) { + var iterator = iteratorFn.call(node); + var step; + + while (!(step = iterator.next()).done) { + if (isValidElement(step.value)) { + validateExplicitKey(step.value, parentType); + } + } + } + } + } + } + } + /** + * Given an element, validate that its props follow the propTypes definition, + * provided by the type. + * + * @param {ReactElement} element + */ - function validatePropTypes(element) { - { - var type = element.type; + function validatePropTypes(element) { + { + var type = element.type; - if (type === null || type === undefined || typeof type === 'string') { - return; - } + if (type === null || type === undefined || typeof type === 'string') { + return; + } - var propTypes; + var propTypes; - if (typeof type === 'function') { - propTypes = type.propTypes; - } else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. - // Inner props are checked in the reconciler. - type.$$typeof === REACT_MEMO_TYPE)) { - propTypes = type.propTypes; - } else { - return; - } + if (typeof type === 'function') { + propTypes = type.propTypes; + } else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. + // Inner props are checked in the reconciler. + type.$$typeof === REACT_MEMO_TYPE)) { + propTypes = type.propTypes; + } else { + return; + } - if (propTypes) { - // Intentionally inside to avoid triggering lazy initializers: - var name = getComponentName(type); - checkPropTypes(propTypes, element.props, 'prop', name, element); - } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) { - propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: + if (propTypes) { + // Intentionally inside to avoid triggering lazy initializers: + var name = getComponentNameFromType(type); + checkPropTypes(propTypes, element.props, 'prop', name, element); + } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) { + propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: - var _name = getComponentName(type); + var _name = getComponentNameFromType(type); - error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown'); - } + error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown'); + } - if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) { - error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.'); - } - } - } - /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment - */ + if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) { + error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.'); + } + } + } + /** + * Given a fragment, validate that it can only be provided with fragment props + * @param {ReactElement} fragment + */ - function validateFragmentProps(fragment) { - { - var keys = Object.keys(fragment.props); + function validateFragmentProps(fragment) { + { + var keys = Object.keys(fragment.props); - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; + for (var i = 0; i < keys.length; i++) { + var key = keys[i]; - if (key !== 'children' && key !== 'key') { - setCurrentlyValidatingElement$1(fragment); + if (key !== 'children' && key !== 'key') { + setCurrentlyValidatingElement$1(fragment); - error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key); + error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key); - setCurrentlyValidatingElement$1(null); - break; - } - } + setCurrentlyValidatingElement$1(null); + break; + } + } - if (fragment.ref !== null) { - setCurrentlyValidatingElement$1(fragment); + if (fragment.ref !== null) { + setCurrentlyValidatingElement$1(fragment); - error('Invalid attribute `ref` supplied to `React.Fragment`.'); + error('Invalid attribute `ref` supplied to `React.Fragment`.'); - setCurrentlyValidatingElement$1(null); - } - } - } + setCurrentlyValidatingElement$1(null); + } + } + } - function jsxWithValidation(type, props, key, isStaticChildren, source, self) { - { - var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to - // succeed and there will likely be errors in render. + var didWarnAboutKeySpread = {}; + function jsxWithValidation(type, props, key, isStaticChildren, source, self) { + { + var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to + // succeed and there will likely be errors in render. - if (!validType) { - var info = ''; + if (!validType) { + var info = ''; - if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) { - info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports."; - } + if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) { + info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports."; + } - var sourceInfo = getSourceInfoErrorAddendum(source); + var sourceInfo = getSourceInfoErrorAddendum(source); - if (sourceInfo) { - info += sourceInfo; - } else { - info += getDeclarationErrorAddendum(); - } + if (sourceInfo) { + info += sourceInfo; + } else { + info += getDeclarationErrorAddendum(); + } - var typeString; + var typeString; + + if (type === null) { + typeString = 'null'; + } else if (isArray(type)) { + typeString = 'array'; + } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) { + typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />"; + info = ' Did you accidentally export a JSX literal instead of a component?'; + } else { + typeString = typeof type; + } - if (type === null) { - typeString = 'null'; - } else if (Array.isArray(type)) { - typeString = 'array'; - } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) { - typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />"; - info = ' Did you accidentally export a JSX literal instead of a component?'; - } else { - typeString = typeof type; - } + error('React.jsx: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info); + } - error('React.jsx: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info); - } + var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used. + // TODO: Drop this when these are no longer allowed as the type argument. - var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used. - // TODO: Drop this when these are no longer allowed as the type argument. + if (element == null) { + return element; + } // Skip key warning if the type isn't valid since our key validation logic + // doesn't expect a non-string/function type and can throw confusing errors. + // We don't want exception behavior to differ between dev and prod. + // (Rendering will throw with a helpful message and as soon as the type is + // fixed, the key warnings will appear.) - if (element == null) { - return element; - } // Skip key warning if the type isn't valid since our key validation logic - // doesn't expect a non-string/function type and can throw confusing errors. - // We don't want exception behavior to differ between dev and prod. - // (Rendering will throw with a helpful message and as soon as the type is - // fixed, the key warnings will appear.) + if (validType) { + var children = props.children; - if (validType) { - var children = props.children; + if (children !== undefined) { + if (isStaticChildren) { + if (isArray(children)) { + for (var i = 0; i < children.length; i++) { + validateChildKeys(children[i], type); + } - if (children !== undefined) { - if (isStaticChildren) { - if (Array.isArray(children)) { - for (var i = 0; i < children.length; i++) { - validateChildKeys(children[i], type); - } + if (Object.freeze) { + Object.freeze(children); + } + } else { + error('React.jsx: Static children should always be an array. ' + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + 'Use the Babel transform instead.'); + } + } else { + validateChildKeys(children, type); + } + } + } - if (Object.freeze) { - Object.freeze(children); - } - } else { - error('React.jsx: Static children should always be an array. ' + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + 'Use the Babel transform instead.'); - } - } else { - validateChildKeys(children, type); - } - } - } + { + if (hasOwnProperty.call(props, 'key')) { + var componentName = getComponentNameFromType(type); + var keys = Object.keys(props).filter(function (k) { + return k !== 'key'; + }); + var beforeExample = keys.length > 0 ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' : '{key: someKey}'; - if (type === exports.Fragment) { - validateFragmentProps(element); - } else { - validatePropTypes(element); - } + if (!didWarnAboutKeySpread[componentName + beforeExample]) { + var afterExample = keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}'; - return element; - } - } // These two functions exist to still get child warnings in dev - // even with the prod transform. This means that jsxDEV is purely - // opt-in behavior for better messages but that we won't stop - // giving you warnings if you use production apis. + error('A props object containing a "key" prop is being spread into JSX:\n' + ' let props = %s;\n' + ' <%s {...props} />\n' + 'React keys must be passed directly to JSX without using spread:\n' + ' let props = %s;\n' + ' <%s key={someKey} {...props} />', beforeExample, componentName, afterExample, componentName); - function jsxWithValidationStatic(type, props, key) { - { - return jsxWithValidation(type, props, key, true); - } - } - function jsxWithValidationDynamic(type, props, key) { - { - return jsxWithValidation(type, props, key, false); - } - } + didWarnAboutKeySpread[componentName + beforeExample] = true; + } + } + } + + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); + } else { + validatePropTypes(element); + } - var jsx = jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children. - // for now we can ship identical prod functions + return element; + } + } // These two functions exist to still get child warnings in dev + // even with the prod transform. This means that jsxDEV is purely + // opt-in behavior for better messages but that we won't stop + // giving you warnings if you use production apis. + + function jsxWithValidationStatic(type, props, key) { + { + return jsxWithValidation(type, props, key, true); + } + } + function jsxWithValidationDynamic(type, props, key) { + { + return jsxWithValidation(type, props, key, false); + } + } - var jsxs = jsxWithValidationStatic ; + var jsx = jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children. + // for now we can ship identical prod functions - exports.jsx = jsx; - exports.jsxs = jsxs; - })(); - } -} (reactJsxRuntime_development)); + var jsxs = jsxWithValidationStatic ; + + reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE; + reactJsxRuntime_development.jsx = jsx; + reactJsxRuntime_development.jsxs = jsxs; + })(); + } return reactJsxRuntime_development; } @@ -7581,30 +8074,11 @@ function requireReactJsxRuntime_development () { } (jsxRuntime)); var en = {}; + var zh = {}; + var de = {}; -var fr = {}; -var es = {}; -var it = {}; -var ar = {}; -var th = {}; -var vi = {}; -var ms = {}; -var id = {}; -var hi = {}; -var ta = {}; -var kn = {}; -var ml = {}; -var ru = {}; -var pl = {}; -var cs = {}; -var uk = {}; -var bg = {}; -var sr = {}; -var hr = {}; -var sk = {}; -var sl = {}; -var mk = {}; + var pt = {}; // file examples: en, enGB, zh, zhHK @@ -7614,28 +8088,6 @@ var localeData = /*#__PURE__*/Object.freeze({ en: en, zh: zh, de: de, - fr: fr, - es: es, - it: it, - ar: ar, - th: th, - vi: vi, - ms: ms, - id: id, - hi: hi, - ta: ta, - kn: kn, - ml: ml, - ru: ru, - pl: pl, - cs: cs, - uk: uk, - bg: bg, - sr: sr, - hr: hr, - sk: sk, - sl: sl, - mk: mk, pt: pt }); @@ -8129,6 +8581,27 @@ function parseNumberSkeleton(tokens) { case 'scale': result.scale = parseFloat(token.options[0]); continue; + case 'rounding-mode-floor': + result.roundingMode = 'floor'; + continue; + case 'rounding-mode-ceiling': + result.roundingMode = 'ceil'; + continue; + case 'rounding-mode-down': + result.roundingMode = 'trunc'; + continue; + case 'rounding-mode-up': + result.roundingMode = 'expand'; + continue; + case 'rounding-mode-half-even': + result.roundingMode = 'halfEven'; + continue; + case 'rounding-mode-half-down': + result.roundingMode = 'halfTrunc'; + continue; + case 'rounding-mode-half-up': + result.roundingMode = 'halfExpand'; + continue; // https://unicode-org.github.io/icu/userguide/format_parse/numbers/skeletons.html#integer-width case 'integer-width': if (token.options.length > 1) { @@ -11194,16 +11667,11 @@ originalMessage) { continue; } var varName = el.value; - var value = ""; // Enforce that all required values are provided by the caller. if (!(values && varName in values)) { - console.log("No value provided for the variable \"" + varName + "\". " + originalMessage); - // throw new MissingValueError(varName, originalMessage); - value = varName; - } - else { - value = values[varName]; + throw new MissingValueError(varName, originalMessage); } + var value = values[varName]; if (isArgumentElement(el)) { if (!value || typeof value === 'string' || typeof value === 'number') { value = @@ -11452,7 +11920,7 @@ var IntlMessageFormat$1 = /** @class */ (function () { this.ast = message; } if (!Array.isArray(this.ast)) { - throw new TypeError('A message must be provided as a String or AST. ' + this.ast); + throw new TypeError('A message must be provided as a String or AST.'); } // Creates a new object with the specified `formats` merged with the default // formats. @@ -11555,16 +12023,16 @@ See the accompanying LICENSE file for terms. */ var IntlMessageFormat = IntlMessageFormat$1; +// this is a copy of the translator from ../../lib/index.js +// TODO: check if this file is used at all var defaultLocale = "en"; var locales = [defaultLocale]; - // Falk - Adapted the central translator to check if a localStorage key is existing. - -const uiLanguage = localStorage.getItem('lowcoder_uiLanguage'); +var uiLanguage = localStorage.getItem('lowcoder_uiLanguage'); if (globalThis.navigator) { - if (uiLanguage) { + if (uiLanguage) { locales = [uiLanguage]; - } + } else if (navigator.languages && navigator.languages.length > 0) { locales = __spreadArray([], navigator.languages, true); } @@ -11572,7 +12040,6 @@ if (globalThis.navigator) { locales = [navigator.language || navigator.userLanguage || defaultLocale]; } } - function parseLocale(s) { var locale = s.trim(); if (!locale) { @@ -11632,13 +12099,12 @@ function getDataByLocale(fileData, suffix, filterLocales, targetLocales) { return { data: data, language: name_1.slice(0, 2) }; } } - // throw new Error("Not found ".concat(names)); - // better to continue the app without crashing console.error("Not found ".concat(names)); + // return fallback data for en language + return { data: fileData['en'], language: 'en' }; + // throw new Error(`Not found ${names}`); } - var globalMessageKeyPrefix = "@"; - var globalMessages = Object.fromEntries(Object.entries(getDataByLocale(localeData, "").data).map(function (_a) { var k = _a[0], v = _a[1]; return [ @@ -11647,59 +12113,51 @@ var globalMessages = Object.fromEntries(Object.entries(getDataByLocale(localeDat ]; })); var Translator = /** @class */ (function () { - function Translator(fileData, filterLocales, locales) { - var _a = getDataByLocale(fileData, "", filterLocales, locales), data = _a.data, language = _a.language; - this.messages = Object.assign({}, data, globalMessages); - this.language = language; - this.trans = this.trans.bind(this); - this.transToNode = this.transToNode.bind(this); - } - - Translator.prototype.trans = function (key, variables) { - return this.transToNode(key, variables).toString(); - }; - - Translator.prototype.transToNode = function (key, variables) { - var message = this.getMessage(key); - var node = new IntlMessageFormat(message, i18n.locale).format(variables); - if (Array.isArray(node)) { - return node.map(function (n, i) { return jsxRuntimeExports.jsx(reactExports.Fragment, { children: n }, i); }); - } - return node; - }; - - Translator.prototype.getMessage = function (key) { - var value = this.getNestedMessage(this.messages, key); - - // Fallback to English if the message is not found - if (value === undefined) { - value = this.getNestedMessage(localeData.en, key); // Assuming localeData.en contains English translations - } - - // If still not found, return a default message or the key itself - if (value === undefined) { - console.warn(`Translation missing for key: ${key}`); - return `oups! ${key}`; // or simply return the key - } - - return value; - }; - - Translator.prototype.getNestedMessage = function (obj, key) { - for (var _i = 0, _a = key.split("."); _i < _a.length; _i++) { - var k = _a[_i]; - if (obj !== undefined) { - obj = obj[k]; - } - } - return obj; - }; - - return Translator; + function Translator(fileData, filterLocales, locales) { + var _a = getDataByLocale(fileData, "", filterLocales, locales), data = _a.data, language = _a.language; + this.messages = Object.assign({}, data, globalMessages); + this.language = language; + this.trans = this.trans.bind(this); + this.transToNode = this.transToNode.bind(this); + } + Translator.prototype.trans = function (key, variables) { + return this.transToNode(key, variables).toString(); + }; + Translator.prototype.transToNode = function (key, variables) { + var message = this.getMessage(key); + var node = new IntlMessageFormat(message, i18n.locale).format(variables); + if (Array.isArray(node)) { + return node.map(function (n, i) { return jsxRuntimeExports.jsx(reactExports.Fragment, { children: n }, i); }); + } + return node; + }; + Translator.prototype.getMessage = function (key) { + var message = this.getNestedMessage(this.messages, key); + // Fallback to English if the message is not found + if (message === undefined) { + message = this.getNestedMessage(en, key); // Assuming localeData.en contains English translations + } + // If still not found, return a default message or the key itself + if (message === undefined) { + console.warn("Translation missing for key: ".concat(key)); + message = "oups! ".concat(key); + } + return message; + }; + Translator.prototype.getNestedMessage = function (obj, key) { + for (var _i = 0, _a = key.split("."); _i < _a.length; _i++) { + var k = _a[_i]; + if (obj !== undefined) { + obj = obj[k]; + } + } + return obj; + }; + return Translator; }()); - function getI18nObjects(fileData, filterLocales) { - return getDataByLocale(fileData, "Obj", filterLocales)?.data; + var _a; + return (_a = getDataByLocale(fileData, "Obj", filterLocales)) === null || _a === void 0 ? void 0 : _a.data; } export { AbstractComp, AbstractNode, CachedNode, CodeNode, CompActionTypes, FetchCheckNode, FunctionNode, MultiBaseComp, RecordNode, RelaxedJsonParser, SimpleAbstractComp, SimpleComp, SimpleNode, Translator, ValueAndMsg, WrapContextNodeV2, WrapNode, changeChildAction, changeDependName, changeEditDSLAction, changeValueAction, clearMockWindow, clearStyleEval, customAction, deferAction, deleteCompAction, dependingNodeMapEquals, evalFunc, evalFunctionResult, evalNodeOrMinor, evalPerfUtil, evalScript, evalStyle, executeQueryAction, fromRecord, fromUnevaledValue, fromValue, fromValueWithCache, getDynamicStringSegments, getI18nObjects, getValueByLocale, i18n, isBroadcastAction, isChildAction, isCustomAction, isDynamicSegment, isFetching, isMyCustomAction, mergeExtra, multiChangeAction, nodeIsRecord, onlyEvalAction, relaxedJSONToJSON, renameAction, replaceCompAction, routeByNameAction, transformWrapper, triggerModuleEventAction, unwrapChildAction, updateActionContextAction, updateNodesV2Action, withFunction, wrapActionExtraInfo, wrapChildAction, wrapContext, wrapDispatch }; diff --git a/client/packages/lowcoder-core/src/eval/utils/evalStyle.ts b/client/packages/lowcoder-core/src/eval/utils/evalStyle.ts index 55e5728fd..b54322727 100644 --- a/client/packages/lowcoder-core/src/eval/utils/evalStyle.ts +++ b/client/packages/lowcoder-core/src/eval/utils/evalStyle.ts @@ -4,15 +4,15 @@ function styleNamespace(id: string) { return `style-for-${id}`; } -export function evalStyle(id: string, css: string[]) { +export function evalStyle(id: string, css: string[], globalStyle?: boolean) { const styleId = styleNamespace(id); - + const prefixId = globalStyle ? id : `#${id}` let compiledCSS = ""; css.forEach((i) => { if (!i.trim()) { return; } - compiledCSS += serialize(compile(`#${id}{${i}}`), middleware([prefixer, stringify])); + compiledCSS += serialize(compile(`${prefixId}{${i}}`), middleware([prefixer, stringify])); }); let styleNode = document.querySelector(`#${styleId}`); diff --git a/client/packages/lowcoder-core/src/i18n/index.tsx b/client/packages/lowcoder-core/src/i18n/index.tsx index 553d25d8d..506370a23 100644 --- a/client/packages/lowcoder-core/src/i18n/index.tsx +++ b/client/packages/lowcoder-core/src/i18n/index.tsx @@ -105,7 +105,10 @@ function getDataByLocale( return { data: data as T, language: name.slice(0, 2) }; } } + console.error(`Not found ${names}`); + // return fallback data for en language + return { data: fileData['en'], language: 'en'}; // throw new Error(`Not found ${names}`); } @@ -178,7 +181,7 @@ export class Translator { // If still not found, return a default message or the key itself if (message === undefined) { console.warn(`Translation missing for key: ${key}`); - `oups! ${key}`; + message = `oups! ${key}`; } return message; diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 92fc4f3f3..61d794c6e 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -177,6 +177,7 @@ export const sectionNames = { meetings: trans("prop.meetings"), // added by Falk Wolsky field: trans("prop.field"), inputFieldStyle:trans("prop.inputFieldStyle"), + childrenInputFieldStyle:trans("prop.childrenInputFieldStyle"), avatarStyle:trans("prop.avatarStyle"), captionStyle:trans("prop.captionStyle"), startButtonStyle:trans("prop.startButtonStyle"), 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 +94,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/app.tsx b/client/packages/lowcoder/src/app.tsx index 1e9b5ebb1..cc0aeb95b 100644 --- a/client/packages/lowcoder/src/app.tsx +++ b/client/packages/lowcoder/src/app.tsx @@ -49,10 +49,13 @@ import { initApp } from "util/commonUtils"; import { favicon } from "assets/images"; import { hasQueryParam } from "util/urlUtils"; import { isFetchUserFinished } from "redux/selectors/usersSelectors"; // getCurrentUser, +import { getIsCommonSettingFetched } from "redux/selectors/commonSettingSelectors"; import { SystemWarning } from "./components/SystemWarning"; import { getBrandingConfig } from "./redux/selectors/configSelectors"; import { buildMaterialPreviewURL } from "./util/materialUtils"; import GlobalInstances from 'components/GlobalInstances'; +import posthog from 'posthog-js' +import { fetchHomeData } from "./redux/reduxActions/applicationActions"; const LazyUserAuthComp = React.lazy(() => import("pages/userAuth")); const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding")); @@ -78,10 +81,15 @@ const Wrapper = (props: { children: React.ReactNode, language: string }) => ( type AppIndexProps = { isFetchUserFinished: boolean; + getIsCommonSettingFetched: boolean; currentOrgId?: string; + currentUserId: string; + currentUserAnonymous: boolean; orgDev: boolean; defaultHomePage: string | null | undefined; + fetchHomeDataFinished: boolean; fetchConfig: (orgId?: string) => void; + fetchHomeData: (currentUserAnonymous?: boolean | undefined) => void; getCurrentUser: () => void; favicon: string; brandName: string; @@ -91,23 +99,36 @@ type AppIndexProps = { class AppIndex extends React.Component { componentDidMount() { this.props.getCurrentUser(); + // if (!this.props.currentUserAnonymous) { + // this.props.fetchHomeData(this.props.currentUserAnonymous); + // } } componentDidUpdate(prevProps: AppIndexProps) { - if(prevProps.currentOrgId !== this.props.currentOrgId && this.props.currentOrgId !== '') { + if ( + prevProps.currentOrgId !== this.props.currentOrgId && + this.props.currentOrgId !== '' + ) { this.props.fetchConfig(this.props.currentOrgId); + if (!this.props.currentUserAnonymous) { + this.props.fetchHomeData(this.props.currentUserAnonymous); + } } } - render() { - const isTemplate = hasQueryParam("template"); + const isTemplate = hasQueryParam('template'); const pathname = history.location.pathname; // we check if we are on the public cloud const isLowCoderDomain = window.location.hostname === 'app.lowcoder.cloud'; + const isLocalhost = window.location.hostname === 'localhost'; + + if (isLocalhost || isLowCoderDomain) { + posthog.init('phc_lD36OXeppUehLgI33YFhioTpXqThZ5QqR8IWeKvXP7f', { api_host: 'https://eu.i.posthog.com', person_profiles: 'always' }); + } // make sure all users in this app have checked login info - if (!this.props.isFetchUserFinished) { + if (!this.props.isFetchUserFinished || (this.props.currentUserId && !this.props.fetchHomeDataFinished)) { const hideLoadingHeader = isTemplate || isAuthUnRequired(pathname); return ; } @@ -115,124 +136,246 @@ class AppIndex extends React.Component { // persisting the language in local storage localStorage.setItem('lowcoder_uiLanguage', this.props.uiLanguage); - // console.log("this.props.defaultHomePage: ", this.props.defaultHomePage) - return ( {{this.props.brandName}} {} - - + + - - - - + + + - - - - + + + + - - + + - - - - - + + + + + - - - + + + {/* }, */} {isLowCoderDomain && [ // Adding Support for iframely to be able to embedd the component explorer in the docu - , - , + , + , - , - , - , + , + , + , // adding Clearbit Support for Analytics - + , ]} - - - - {/* - // we decided to show the org homepage in a own navigation page - {!this.props.orgDev && !!this.props.defaultHomePage ? ( - + + + + + + + + - ) : ( - - )} - {!this.props.orgDev && !!this.props.defaultHomePage && ( - - )} */} + + + + + {this.props.isFetchUserFinished && this.props.defaultHomePage? ( + !this.props.orgDev ? ( + + ) : ( + + ) + ) : ( + + )} - {!this.props.orgDev ? ( - - ) : ( - - )} - - - - - - - - - - - - - - {developEnv() && ( - <> - - - - - - )} - - + + + {developEnv() && ( + <> + + + + + + )} + + ); } @@ -240,9 +383,13 @@ class AppIndex extends React.Component { const mapStateToProps = (state: AppState) => ({ isFetchUserFinished: isFetchUserFinished(state), + getIsCommonSettingFetched: getIsCommonSettingFetched(state), orgDev: state.ui.users.user.orgDev, + currentUserId: state.ui.users.currentUser.id, + currentUserAnonymous: state.ui.users.currentUser.name === "ANONYMOUS", currentOrgId: state.ui.users.user.currentOrgId, defaultHomePage: state.ui.application.homeOrg?.commonSettings.defaultHomePage, + fetchHomeDataFinished: Boolean(state.ui.application.homeOrg?.commonSettings), favicon: getBrandingConfig(state)?.favicon ? buildMaterialPreviewURL(getBrandingConfig(state)?.favicon!) : favicon, @@ -255,6 +402,15 @@ const mapDispatchToProps = (dispatch: any) => ({ dispatch(fetchUserAction()); }, fetchConfig: (orgId?: string) => dispatch(fetchConfigAction(orgId)), + fetchHomeData: (currentUserAnonymous: boolean | undefined) => { + // the rule should be that if the user is not logged in and if he want to view an App, we should not fetch the home data + if (window.location.pathname == APP_EDITOR_URL && !currentUserAnonymous && !currentUserAnonymous === undefined) { + dispatch(fetchHomeData({})); + } + else { + dispatch(fetchHomeData({})); + } + } }); const AppIndexWithProps = connect(mapStateToProps, mapDispatchToProps)(AppIndex); @@ -267,7 +423,7 @@ export function bootstrap() { const root = createRoot(container!); root.render( - + ); } 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..504b37405 --- /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 !== "radius" && + 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 === "radius" && ( +
+ +
+ +
+ + 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/components/table/columnTypeView.tsx b/client/packages/lowcoder/src/components/table/columnTypeView.tsx index 264db7af8..434e71551 100644 --- a/client/packages/lowcoder/src/components/table/columnTypeView.tsx +++ b/client/packages/lowcoder/src/components/table/columnTypeView.tsx @@ -5,13 +5,19 @@ const ColumnTypeViewWrapper = styled.div<{ $textOverflow?: boolean }>` position: relative; - ${props => !props.$textOverflow && ` + ${props => props.$textOverflow == false && ` div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: keep-all; } + span { + display: inline-block; /* Change display to inline-block for span */ + white-space: nowrap; + text-overflow: ellipsis; + word-break: keep-all; + } `} `; @@ -71,6 +77,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode, textOverflow?: boolean, }) { + const wrapperRef = useRef(null); const hoverViewRef = useRef(null); const [isHover, setIsHover] = useState(false); 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 1511ec66d..9807f27e7 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx @@ -24,8 +24,10 @@ import { } from "./buttonCompConstants"; import { RefControl } from "comps/controls/refControl"; -import React, { useContext } from "react"; -import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk"; +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; @@ -130,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 150eec23a..8e99f5a4c 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"; @@ -21,8 +21,8 @@ import { ButtonStyleControl, getButtonStyle, } from "./buttonCompConstants"; -import { styleControl } from "@lowcoder-ee/index.sdk"; - +import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const StyledDropdownButton = styled(DropdownButton)` width: 100%; @@ -38,8 +38,8 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>` ${(props) => `margin: ${props.$buttonStyle.margin};`} margin-right: 0; .ant-btn span { - ${(props) => `text-decoration: ${props.$buttonStyle.textDecoration};`} - ${(props) => `font-family: ${props.$buttonStyle.fontFamily};`} + ${(props) => props.$buttonStyle.textDecoration !== undefined ? `text-decoration: ${props.$buttonStyle.textDecoration};` : ''} + ${(props) => props.$buttonStyle.fontFamily !== undefined ? `font-family: ${props.$buttonStyle.fontFamily};` : ''} } .ant-btn { @@ -48,6 +48,7 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>` height: 100%; &.ant-btn-default { margin: 0 !important; + ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`} ${(props) => `text-transform: ${props.$buttonStyle.textTransform};`} ${(props) => `font-weight: ${props.$buttonStyle.textWeight};`} @@ -86,9 +87,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 9005d7de2..63d074053 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -16,7 +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 { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk"; +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 0439d0848..0ca13d652 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx @@ -18,17 +18,18 @@ import { ContainerCompBuilder, } from "../pageLayoutComp/pageLayoutCompBuilder"; import { PageLayout } from "../pageLayoutComp/pageLayout"; -import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk"; +import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants"; +import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; 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); + const [siderCollapsed, setSiderCollapsed] = useState(false); return ( diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx index ee9d4c754..362b1d1eb 100644 --- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx @@ -12,7 +12,9 @@ import { EventData, EventTypeEnum } from "./types"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { EditorContext } from "comps/editorState"; -import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType, styleControl } from "@lowcoder-ee/index.sdk"; +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) @@ -218,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/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx index 53f5a3eb9..a01cf9ec4 100644 --- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx @@ -2,7 +2,7 @@ import { default as Divider, DividerProps } from "antd/es/divider"; import { StringControl } from "comps/controls/codeControl"; import { BoolControl } from "comps/controls/boolControl"; import { alignControl } from "comps/controls/alignControl"; -import { UICompBuilder } from "comps/generators"; +import { UICompBuilder, withDefault } from "comps/generators"; import { NameConfig, NameConfigHidden } from "comps/generators/withExposing"; import { Section, sectionNames } from "lowcoder-design"; import _ from "lodash"; @@ -12,6 +12,8 @@ import { AnimationStyle, AnimationStyleType, DividerStyle, DividerStyleType, hei import { migrateOldData } from "comps/generators/simpleGenerators"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; +import { AutoHeightControl } from "comps/controls/autoHeightControl"; + import { useContext } from "react"; import { EditorContext } from "comps/editorState"; @@ -22,12 +24,12 @@ type IProps = DividerProps & { $animationStyle:AnimationStyleType; }; -// TODO: find out how to set border style when text is active // TODO: enable type "vertical" https://ant.design/components/divider -const StyledDivider = styled(Divider) ` +const StyledDivider = styled(Divider)` margin-top: 3.5px; - rotate:${props=>props.$style.rotation}; + rotate: ${(props) => props.$style.rotation}; + .ant-divider-inner-text { height: 32px; display: flex; @@ -35,29 +37,30 @@ const StyledDivider = styled(Divider) ` font-size: ${(props) => props.$style.textSize}; font-weight: ${(props) => props.$style.textWeight}; font-family: ${(props) => props.$style.fontFamily}; - text-transform:${(props)=>props.$style.textTransform}; - text-decoration:${(props)=>props.$style.textDecoration}; - font-style:${(props) => props.$style.fontStyle} + text-transform: ${(props) => props.$style.textTransform}; + ${(props) => props.$style.textDecoration !== undefined ? `text-decoration: ${props.$style.textDecoration};` : ''} + font-style: ${(props) => props.$style.fontStyle}; } - ${props=>props.$animationStyle} - min-width: 0; - width: ${(props) => { - return widthCalculator(props.$style.margin); - }}; - min-height: ${(props) => { - return heightCalculator(props.$style.margin); - }}; - margin: ${(props) => { - return props.$style.margin; - }}; + + ${(props) => props.$animationStyle} + min-width: 1px; + width: ${(props) => widthCalculator(props.$style.margin)}; + min-height: ${(props) => heightCalculator(props.$style.margin)}; + margin: ${(props) => props.$style.margin}; padding: ${(props) => props.$style.padding}; - border-radius:${props=>props.$style.radius}; - border-top: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => props.$style.borderStyle} ${(props) => props.$style.border}; -"" - .ant-divider-inner-text::before, .ant-divider-inner-text::after { - border-block-start: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border} !important; + border-radius: ${(props) => props.$style.radius}; + border-top: ${(props) => props.$style.borderWidth && props.$style.borderWidth !== "0px" ? props.$style.borderWidth : "1px"} + ${(props) => props.$style.borderStyle} + ${(props) => props.$style.border}; + + .ant-divider-inner-text::before, + .ant-divider-inner-text::after { + border-block-start: ${(props) => props.$style.borderWidth && props.$style.borderWidth !== "0px" ? props.$style.borderWidth : "1px"} + ${(props) => props.dashed ? "dashed" : "solid"} + ${(props) => props.$style.border} !important; border-block-start-color: inherit; border-block-end: 0; + border-block-start-radius: inherit; } &.ant-divider-horizontal.ant-divider-with-text { @@ -65,12 +68,22 @@ const StyledDivider = styled(Divider) ` border-top-color: ${(props) => props.$style.color}; color: ${(props) => props.$style.text}; } + + &.ant-divider-horizontal.ant-divider-with-text::before, + &.ant-divider-horizontal.ant-divider-with-text::after { + border-top-color: ${(props) => props.$style.color}; + border-radius: ${(props) => props.$style.radius}; + border-top: ${(props) => props.$style.borderWidth && props.$style.borderWidth !== "0px" ? props.$style.borderWidth : "1px"} + ${(props) => props.$style.borderStyle} + ${(props) => props.$style.border}; + } `; const childrenMap = { title: StringControl, dashed: BoolControl, align: alignControl(), + autoHeight: withDefault(AutoHeightControl, "fixed"), style: styleControl(DividerStyle), animationStyle: styleControl(AnimationStyle), }; @@ -91,7 +104,7 @@ function fixOldStyleData(oldData: any) { // Compatible with historical style data 2022-8-26 -export const DividerComp = migrateOldData( +const DividerTempComp = migrateOldData( new UICompBuilder(childrenMap, (props) => { return (
{children.dashed.propertyView({ label: trans("divider.dashed") })} @@ -147,3 +161,9 @@ export const DividerComp = migrateOldData( .build(), fixOldStyleData ); + +export const DividerComp = class extends DividerTempComp { + override autoHeight(): boolean { + return this.children.autoHeight.getView(); + } +}; \ No newline at end of file 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 da9514c79..ceb6adff2 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -10,8 +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 { AnimationStyle, AnimationStyleType, styleControl } from "@lowcoder-ee/index.sdk"; +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 @@ -54,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 5d94b3d5e..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"; @@ -30,6 +30,9 @@ import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext"; import { AlignCenter } from "lowcoder-design"; import { AlignLeft } from "lowcoder-design"; import { AlignRight } from "lowcoder-design"; +import { LayoutActionComp } from "./layoutActionComp"; +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(() => @@ -37,6 +40,7 @@ const TabBarItem = React.lazy(() => default: module.TabBarItem, })) ); +const EventOptions = [clickEvent] as const; const AppViewContainer = styled.div` position: absolute; @@ -171,6 +175,7 @@ type JsonItemNode = { } type TabBarProps = { + onEvent:any; tabs: Array<{ title: string; icon?: React.ReactNode; @@ -224,6 +229,7 @@ function TabBarView(props: TabBarProps & { { if (key) { + props.onEvent('click') props.onChange(key); } }} @@ -250,6 +256,7 @@ const TabOptionComp = (function () { return new MultiCompBuilder( { app: AppSelectComp, + action: LayoutActionComp, label: StringControl, icon: IconControl, hidden: BoolCodeControl, @@ -261,12 +268,16 @@ const TabOptionComp = (function () { .setPropertyViewFn((children, dispatch) => { return ( <> - {children.app.propertyView({})} + {children.action.propertyView({ + onAppChange: (label:any) => { + label && children.label.dispatchChangeValueAction(label); + }, + })} {children.label.propertyView({ label: trans("label") })} {hiddenPropertyView(children)} {children.icon.propertyView({ - label: trans("icon"), - tooltip: trans("aggregation.iconTooltip"), + label: trans('icon'), + tooltip: trans('aggregation.iconTooltip'), })} ); @@ -276,8 +287,9 @@ const TabOptionComp = (function () { let MobileTabLayoutTmp = (function () { const childrenMap = { + onEvent: eventHandlerControl(EventOptions), dataOptionType: dropdownControl(DataOptionType, DataOption.Manual), - jsonItems: jsonControl(convertTreeData, mobileNavJsonMenuItems), + jsonItems: jsonControl(convertTreeData, mobileNavJsonMenuItems), tabs: manualOptionsControl(TabOptionComp, { initOptions: [ { @@ -328,6 +340,9 @@ let MobileTabLayoutTmp = (function () { }) }
+
+ { children.onEvent.getPropertyView() } +
{children.backgroundImage.propertyView({ label: `Background Image`, @@ -385,6 +400,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { const verticalAlignment = comp.children.verticalAlignment.getView(); const showSeparator = comp.children.showSeparator.getView(); const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas; + const onEvent = comp.children.onEvent.getView(); useEffect(() => { comp.children.jsonTabs.dispatchChangeValueAction({ @@ -428,6 +444,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { const tabBarView = ( ({ key: index, title: tab.children.label.getView(), diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx index 35d13862d..c40870c1f 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx @@ -17,7 +17,7 @@ import { EditorContainer, EmptyContent } from "pages/common/styledComponent"; import { useCallback, useEffect, useMemo, useState } from "react"; import styled from "styled-components"; import { isUserViewMode, useAppPathParam } from "util/hooks"; -import { StringControl, jsonControl } from "comps/controls/codeControl"; +import { BoolCodeControl, StringControl, jsonControl } from "comps/controls/codeControl"; import { styleControl } from "comps/controls/styleControl"; import { NavLayoutStyle, @@ -40,9 +40,13 @@ import { jsonMenuItems, menuItemStyleOptions } from "./navLayoutConstants"; +import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl"; + +const { Header } = Layout; const DEFAULT_WIDTH = 240; type MenuItemStyleOptionValue = "normal" | "hover" | "active"; +const EventOptions = [clickEvent] as const; const StyledSide = styled(LayoutSider)` max-height: calc(100vh - ${TopHeaderHeight}); @@ -99,10 +103,12 @@ const StyledMenu = styled(AntdMenu)<{ .ant-menu-submenu { margin: ${(props) => props.$navItemStyle?.margin}; width: ${(props) => props.$navItemStyle?.width}; + padding: 0; .ant-menu-submenu-title { width: 100%; height: auto !important; + max-height: 100%; background-color: ${(props) => props.$navItemStyle?.background}; color: ${(props) => props.$navItemStyle?.text}; border-radius: ${(props) => props.$navItemStyle?.radius} !important; @@ -179,6 +185,7 @@ function convertTreeData(data: any) { let NavTmpLayout = (function () { const childrenMap = { + onEvent: eventHandlerControl(EventOptions), dataOptionType: dropdownControl(DataOptionType, DataOption.Manual), items: withDefault(LayoutMenuItemListComp, [ { @@ -190,7 +197,8 @@ let NavTmpLayout = (function () { width: withDefault(StringControl, DEFAULT_WIDTH), backgroundImage: withDefault(StringControl, ""), mode: dropdownControl(ModeOptions, "inline"), - navStyle: withDefault(styleControl(NavLayoutStyle), defaultStyle), + collapse: BoolCodeControl, + navStyle: withDefault(styleControl(NavLayoutStyle), {...defaultStyle, padding: '1px'}), navItemStyle: withDefault(styleControl(NavLayoutItemStyle), defaultStyle), navItemHoverStyle: withDefault(styleControl(NavLayoutItemHoverStyle), {}), navItemActiveStyle: withDefault(styleControl(NavLayoutItemActiveStyle), {}), @@ -216,6 +224,9 @@ let NavTmpLayout = (function () { }) }
+
+ { children.onEvent.getPropertyView() } +
{ children.width.propertyView({ label: trans("navLayout.width"), @@ -226,6 +237,9 @@ let NavTmpLayout = (function () { label: trans("labelProp.position"), radioButton: true })} + { children.collapse.propertyView({ + label: trans("labelProp.collapse"), + })} {children.backgroundImage.propertyView({ label: `Background Image`, placeholder: 'https://temp.im/350x400', @@ -266,6 +280,7 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => { const items = comp.children.items.getView(); const navWidth = comp.children.width.getView(); const navMode = comp.children.mode.getView(); + const navCollapse = comp.children.collapse.getView(); const navStyle = comp.children.navStyle.getView(); const navItemStyle = comp.children.navItemStyle.getView(); const navItemHoverStyle = comp.children.navItemHoverStyle.getView(); @@ -273,7 +288,8 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => { const backgroundImage = comp.children.backgroundImage.getView(); const jsonItems = comp.children.jsonItems.getView(); const dataOptionType = comp.children.dataOptionType.getView(); - + const onEvent = comp.children.onEvent.getView(); + // filter out hidden. unauthorised items filtered by server const filterItem = useCallback((item: LayoutMenuItemComp): boolean => { return !item.children.hidden.getView(); @@ -310,7 +326,8 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => { return generateItemKeyRecord(items) }, [dataOptionType, jsonItems, items, generateItemKeyRecord]); - const onMenuItemClick = useCallback(({key}: {key: string}) => { + const onMenuItemClick = useCallback(({ key }: { key: string }) => { + onEvent('click') const itemComp = itemKeyRecord[key] const url = [ @@ -547,32 +564,45 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => { backgroundStyle = `center / cover url('${backgroundImage}') no-repeat, ${backgroundStyle}`; } + let navMenu = ( + + ); + let content = ( - - - + {navMode === 'horizontal' ? ( +
+ { navMenu } +
+ ) : ( + + {navMenu} + + )} {pageView} ); diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts b/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts index d102dfdb1..66043303a 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts +++ b/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts @@ -3,6 +3,7 @@ import { trans } from "i18n"; export const ModeOptions = [ { label: trans("navLayout.modeInline"), value: "inline" }, { label: trans("navLayout.modeVertical"), value: "vertical" }, + { label: trans("navLayout.modeHorizontal"), value: "horizontal" }, ] as const; export const DataOption = { diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx index 42ec653c7..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,7 +18,9 @@ import { import { ContextContainerComp } from "./contextContainerComp"; import { ListViewImplComp } from "./listViewComp"; import { getCurrentItemParams, getData } from "./listViewUtils"; -import { AnimationStyleType } from "@lowcoder-ee/index.sdk"; +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 }>` height: 100%; @@ -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/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx index 6b5df1cb0..28e318618 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx @@ -39,7 +39,6 @@ import { useEffect, useRef, useState } from "react"; import ReactResizeDetector from "react-resize-detector"; import { useContext } from "react"; -import { BoolControl } from "@lowcoder-ee/index.sdk"; const Container = styled.div<{ $style: any }>` height: 100%; 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/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx index 3d3e2aa72..58299f1f1 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx @@ -26,6 +26,7 @@ const getStyle = (style: ContainerStyleType) => { return css` border-color: ${style.border}; border-width: ${style.borderWidth}; + border-style: ${style.borderStyle}; border-radius: ${style.radius}; overflow: hidden; padding: ${style.padding}; diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx index dbe0e6111..271d8c1f3 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx @@ -10,7 +10,7 @@ import { ContainerFooterStyle, } from "comps/controls/styleControlConstants"; import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators"; -import { migrateOldData } from "comps/generators/simpleGenerators"; +import { migrateOldData, valueComp } from "comps/generators/simpleGenerators"; import { NameGenerator } from "comps/utils"; import { fromRecord, Node } from "lowcoder-core"; import { nodeIsRecord } from "lowcoder-core"; @@ -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,19 @@ 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'), + appliedThemeId: valueComp(''), }; // 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/preLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx index e8f4902c4..eef0ba0a8 100644 --- a/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx @@ -186,10 +186,31 @@ class CSSComp extends CodeTextControl implements RunAndClearable { } } +class GlobalCSSComp extends CodeTextControl implements RunAndClearable { + id = ""; + externalCSS: string = ""; + + async applyAllCSS() { + const css = this.getView(); + evalStyle(this.id, [this.externalCSS, css], true); + } + + async run(id: string, externalCSS: string = "") { + this.id = id; + this.externalCSS = externalCSS; + return this.applyAllCSS(); + } + + async clear() { + clearStyleEval(this.id); + } +} + const childrenMap = { libs: LibsComp, script: ScriptComp, css: CSSComp, + globalCSS: GlobalCSSComp, }; type ChildrenInstance = RecordConstructorToComp; @@ -215,7 +236,7 @@ function JavaScriptTabPane(props: { comp: ConstructorToComp } ); } -function CSSTabPane(props: { comp: CSSComp }) { +function CSSTabPane(props: { comp: CSSComp, isGlobal?: boolean }) { useEffect(() => { props.comp.applyAllCSS(); }, [props.comp]); @@ -238,6 +259,7 @@ function CSSTabPane(props: { comp: CSSComp }) { enum TabKey { JavaScript = "js", CSS = "css", + GLOBAL_CSS = "global_css", } function PreloadConfigModal(props: ChildrenInstance) { @@ -255,6 +277,11 @@ function PreloadConfigModal(props: ChildrenInstance) { label: 'CSS', children: }, + { + key: TabKey.GLOBAL_CSS, + label: 'Global CSS', + children: + }, ] return (