From 2098b4492e9b0347ec4eed18b98b91d16dfd62b5 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Thu, 11 Jul 2024 15:37:51 +0500 Subject: [PATCH 1/3] stop overriding dynamic styles --- client/packages/lowcoder/src/comps/comps/textComp.tsx | 10 +++++----- .../lowcoder/src/comps/generators/uiCompBuilder.tsx | 7 +++++++ .../src/pages/setting/theme/ThemeCompPanel.tsx | 4 ++-- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index 49e24b741..ce978a1cb 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -150,11 +150,11 @@ let TextTmpComp = (function () { }; return new UICompBuilder(childrenMap, (props, dispatch) => { const value = props.text.value; - - useMergeCompStyles( - props as Record, - dispatch - ); + + // useMergeCompStyles( + // props as Record, + // dispatch + // ); return ( >> = ChildrenCompMap & { @@ -281,6 +282,7 @@ function UIView(props: { }) { const comp = props.comp; const childrenProps = childrenToProps(comp.children); + const childrenJsonProps = comp.toJsonValue(); const parentDisabled = useContext(DisabledContext); const disabled = childrenProps['disabled']; if (disabled !== undefined && typeof disabled === 'boolean') { @@ -296,6 +298,11 @@ function UIView(props: { } //END ADD BY FRED + useMergeCompStyles( + childrenJsonProps as Record, + comp.dispatch + ); + // render condition for modal and drawer as we are not getting compType here if (comp.children.hasOwnProperty('showMask') && comp.children.hasOwnProperty('maskClosable')) { return ( diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx index dd59fa900..351f0df8f 100644 --- a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx +++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx @@ -199,13 +199,13 @@ export const ThemeCompPanel = (props: any) => { if (newComp) { const compChildrens = newComp.children; - let styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style')); + let styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style' || 'styles')); let styleChildrens: Record = {}; styleChildrenKeys.forEach((childKey: string) => { styleChildrens[childKey] = compChildrens[childKey]; }) if (compChildrens.container) { - styleChildrenKeys = Object.keys(compChildrens.container.children).filter(child => child.toLowerCase().endsWith('style')); + styleChildrenKeys = Object.keys(compChildrens.container.children).filter(child => child.toLowerCase().endsWith('style' || 'styles')); styleChildrenKeys.forEach((childKey: string) => { styleChildrens[childKey] = compChildrens.container.children[childKey]; }) From 5f6c07a77e80d88d57878eef995609513fc70d5f Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Tue, 13 Aug 2024 00:18:44 +0500 Subject: [PATCH 2/3] remove useMergeCompStyles hook from comps --- .../comps/comps/autoCompleteComp/autoCompleteComp.tsx | 6 +----- client/packages/lowcoder/src/comps/comps/avatar.tsx | 5 +---- client/packages/lowcoder/src/comps/comps/avatarGroup.tsx | 5 +---- .../lowcoder/src/comps/comps/buttonComp/buttonComp.tsx | 5 +---- .../lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx | 5 +---- .../src/comps/comps/buttonComp/floatButtonComp.tsx | 4 +--- .../lowcoder/src/comps/comps/buttonComp/linkComp.tsx | 6 +----- .../lowcoder/src/comps/comps/buttonComp/scannerComp.tsx | 5 +---- .../src/comps/comps/buttonComp/toggleButtonComp.tsx | 4 +--- .../packages/lowcoder/src/comps/comps/carouselComp.tsx | 5 +---- .../src/comps/comps/columnLayout/columnLayout.tsx | 3 --- .../lowcoder/src/comps/comps/commentComp/commentComp.tsx | 7 +------ .../lowcoder/src/comps/comps/containerComp/cardComp.tsx | 6 ++---- .../lowcoder/src/comps/comps/customComp/customComp.tsx | 3 --- .../lowcoder/src/comps/comps/dateComp/dateComp.tsx | 9 ++------- .../lowcoder/src/comps/comps/dateComp/timeComp.tsx | 9 ++------- client/packages/lowcoder/src/comps/comps/dividerComp.tsx | 4 +--- .../lowcoder/src/comps/comps/fileComp/fileComp.tsx | 2 -- .../packages/lowcoder/src/comps/comps/fileViewerComp.tsx | 5 +---- client/packages/lowcoder/src/comps/comps/iconComp.tsx | 5 +---- client/packages/lowcoder/src/comps/comps/iframeComp.tsx | 5 +---- client/packages/lowcoder/src/comps/comps/imageComp.tsx | 5 +---- .../lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx | 5 +---- .../src/comps/comps/jsonComp/jsonExplorerComp.tsx | 5 +---- .../lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx | 5 +---- .../comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx | 5 +---- .../lowcoder/src/comps/comps/layout/mobileTabLayout.tsx | 3 --- .../lowcoder/src/comps/comps/layout/navLayout.tsx | 4 +--- .../lowcoder/src/comps/comps/listViewComp/listView.tsx | 3 --- .../lowcoder/src/comps/comps/mediaComp/audioComp.tsx | 5 +---- .../src/comps/comps/mediaComp/colorPickerComp.tsx | 5 +---- .../lowcoder/src/comps/comps/mediaComp/videoComp.tsx | 5 +---- .../lowcoder/src/comps/comps/navComp/navComp.tsx | 5 +---- .../src/comps/comps/numberInputComp/numberInputComp.tsx | 5 +---- .../src/comps/comps/numberInputComp/rangeSliderComp.tsx | 2 -- .../src/comps/comps/numberInputComp/sliderComp.tsx | 5 +---- .../src/comps/comps/pageLayoutComp/pageLayoutComp.tsx | 3 --- .../lowcoder/src/comps/comps/progressCircleComp.tsx | 7 ++----- .../packages/lowcoder/src/comps/comps/progressComp.tsx | 7 ++----- client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx | 5 +---- client/packages/lowcoder/src/comps/comps/ratingComp.tsx | 5 +---- .../comps/comps/responsiveLayout/responsiveLayout.tsx | 4 +--- .../lowcoder/src/comps/comps/richTextEditorComp.tsx | 6 +----- .../src/comps/comps/selectInputComp/cascaderComp.tsx | 5 +---- .../src/comps/comps/selectInputComp/checkboxComp.tsx | 5 +---- .../src/comps/comps/selectInputComp/multiSelectComp.tsx | 4 ---- .../src/comps/comps/selectInputComp/radioComp.tsx | 5 +---- .../src/comps/comps/selectInputComp/segmentedControl.tsx | 6 +----- .../src/comps/comps/selectInputComp/selectComp.tsx | 3 --- .../src/comps/comps/selectInputComp/stepControl.tsx | 6 +----- .../packages/lowcoder/src/comps/comps/signatureComp.tsx | 3 --- client/packages/lowcoder/src/comps/comps/switchComp.tsx | 5 +---- .../lowcoder/src/comps/comps/tableComp/tableCompView.tsx | 4 ---- .../src/comps/comps/tabs/tabbedContainerComp.tsx | 3 --- client/packages/lowcoder/src/comps/comps/textComp.tsx | 6 ------ .../lowcoder/src/comps/comps/textInputComp/inputComp.tsx | 5 +---- .../src/comps/comps/textInputComp/mentionComp.tsx | 5 +---- .../src/comps/comps/textInputComp/passwordComp.tsx | 2 -- .../src/comps/comps/textInputComp/textAreaComp.tsx | 4 +--- .../src/comps/comps/timelineComp/timelineComp.tsx | 3 --- .../packages/lowcoder/src/comps/comps/transferComp.tsx | 3 --- .../lowcoder/src/comps/comps/treeComp/treeComp.tsx | 5 +---- .../lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx | 3 --- .../comps/comps/triContainerComp/triContainerComp.tsx | 3 --- 64 files changed, 51 insertions(+), 249 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index 207de58d1..e97769184 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -55,8 +55,6 @@ import { autocompleteIconColor, componentSize, } from "./autoCompleteConstants"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; - const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>` box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`}; @@ -104,9 +102,7 @@ const getValidate = (value: any): "" | "warning" | "error" | undefined => { }; let AutoCompleteCompBase = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { const { items, onEvent, diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx index 4643e9c5e..356392405 100644 --- a/client/packages/lowcoder/src/comps/comps/avatar.tsx +++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx @@ -34,7 +34,6 @@ import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants"; import { DropdownOptionControl } from "../controls/optionsControl"; 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}; @@ -198,9 +197,7 @@ const AvatarView = (props: RecordConstructorToView) => { }; let AvatarBasicComp = (function () { - return new UICompBuilder(childrenMap, (props , dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return()}) .setPropertyViewFn((children) => ( <> diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx index 5f3a57d88..cba007ee1 100644 --- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx +++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx @@ -19,7 +19,6 @@ 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', @@ -143,9 +142,7 @@ const AvatarGroupView = (props: RecordConstructorToView & { }; let AvatarGroupBasicComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) =>{ - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props, dispatch) => { return( )}) .setPropertyViewFn((children) => ( diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx index 9807f27e7..d329ebee9 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx @@ -27,7 +27,6 @@ import { RefControl } from "comps/controls/refControl"; 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; @@ -135,9 +134,7 @@ const ButtonTmpComp = (function () { animationStyle: styleControl(AnimationStyle, 'animationStyle'), viewRef: RefControl, }; - return new UICompBuilder(childrenMap, (props , dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return( diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx index 1788b1143..11e9bd402 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx @@ -22,7 +22,6 @@ import { getButtonStyle, } from "./buttonCompConstants"; import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const StyledDropdownButton = styled(DropdownButton)` width: 100%; @@ -90,9 +89,7 @@ const DropdownTmpComp = (function () { onEvent: ButtonEventHandlerControl, style: styleControl(DropdownStyle, 'style'), }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { 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 1445edef1..3ae02259b 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx @@ -17,7 +17,6 @@ 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; @@ -133,8 +132,7 @@ const FloatButtonView = (props: RecordConstructorToView) => }; let FloatButtonBasicComp = (function () { - return new UICompBuilder(childrenMap, (props , dispatch) => { - useMergeCompStyles(props, dispatch); + return new UICompBuilder(childrenMap, (props) => { return( )}) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index 863a22081..a1f71169e 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx @@ -22,7 +22,6 @@ import { RefControl } from "comps/controls/refControl"; import { EditorContext } from "comps/editorState"; import React, { useContext, useEffect } from "react"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Link = styled(Button)<{ $style: LinkStyleType; @@ -92,10 +91,7 @@ const LinkTmpComp = (function () { suffixIcon: IconControl, viewRef: RefControl, }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - - + return new UICompBuilder(childrenMap, (props) => { // 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 2d853ecfe..aaf376e39 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx @@ -24,7 +24,6 @@ import { BoolControl } from "comps/controls/boolControl"; import type { ItemType } from "antd/es/menu/interface"; import { RefControl } from "comps/controls/refControl"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Error = styled.div` color: #f5222d; @@ -74,9 +73,7 @@ const ScannerTmpComp = (function () { style: styleControl(DropdownStyle, 'style'), viewRef: RefControl, }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { 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 c8df0e3e6..1dc943767 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -25,7 +25,6 @@ import { BoolControl } from "comps/controls/boolControl"; import { RefControl } from "comps/controls/refControl"; import React, { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const IconWrapper = styled.div` display: flex; @@ -66,11 +65,10 @@ const ToggleTmpComp = (function () { showBorder: withDefault(BoolControl, true), viewRef: RefControl, }; - return new UICompBuilder(childrenMap, (props, dispatch) => { + return new UICompBuilder(childrenMap, (props) => { const text = props.showText ? (props.value.value ? props.trueText : props.falseText) || undefined : undefined; - useMergeCompStyles(props as Record, dispatch); return ( { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { 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 59f3ffbdb..a271f3972 100644 --- a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx @@ -40,7 +40,6 @@ 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"; import SliderControl from "@lowcoder-ee/comps/controls/sliderControl"; const ContainWrapper = styled.div<{ @@ -183,8 +182,6 @@ 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 2c37ba6dd..d57ff2bba 100644 --- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx @@ -67,9 +67,6 @@ import dayjs from "dayjs"; 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"); @@ -374,9 +371,7 @@ const CommentCompBase = ( }; let CommentBasicComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) =>{ - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props, dispatch) => { return ( )}) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index 5791d09fa..9e03ccb36 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -20,7 +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<{ @@ -193,9 +193,7 @@ export const ContainerBaseComp = (function () { animationStyle: styleControl(AnimationStyle , 'animationStyle'), }; - return new ContainerCompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new ContainerCompBuilder(childrenMap, (props) => { props.container.showHeader = false; // 注入容器参数 props.container.style = Object.assign(props.container.style, { diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx index 362b1d1eb..b33d74ae6 100644 --- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx @@ -14,7 +14,6 @@ import { trans } from "i18n"; import { EditorContext } from "comps/editorState"; import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; // TODO: eventually to embedd in container so we have styling? // TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc) @@ -225,8 +224,6 @@ const childrenMap = { }; const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - const { code, model } = props; return ( { - useMergeCompStyles(props as Record, dispatch); - +export const datePickerControl = new UICompBuilder(childrenMap, (props) => { let time: dayjs.Dayjs | null = null; if (props.value.value !== '') { time = dayjs(props.value.value, DateParser); @@ -294,9 +291,7 @@ export const dateRangeControl = (function () { ...commonChildren, }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { let start: dayjs.Dayjs | null = null; if (props.start.value !== '') { start = dayjs(props.start.value, DateParser); diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx index 323099b15..c362e01b7 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx @@ -52,7 +52,6 @@ import { RefControl } from "comps/controls/refControl"; 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; @@ -143,9 +142,7 @@ export type TimeCompViewProps = Pick< placeholder?: string | [string, string]; }; -export const timePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - +export const timePickerControl = new UICompBuilder(childrenMap, (props) => { let time: dayjs.Dayjs | null = null; if(props.value.value !== '') { time = dayjs(props.value.value, TimeParser); @@ -263,9 +260,7 @@ export const timeRangeControl = (function () { ...commonChildren, }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { let start: dayjs.Dayjs | null = null; if(props.start.value !== '') { start = dayjs(props.start.value, TimeParser); diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx index 7c73fb04c..287b68409 100644 --- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx @@ -17,7 +17,6 @@ import { AutoHeightControl } from "comps/controls/autoHeightControl"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; type IProps = DividerProps & { $style: DividerStyleType; @@ -110,8 +109,7 @@ function fixOldStyleData(oldData: any) { // Compatible with historical style data 2022-8-26 const DividerTempComp = migrateOldData( - new UICompBuilder(childrenMap, (props , dispatch) => { - useMergeCompStyles(props as Record, dispatch); + new UICompBuilder(childrenMap, (props) => { const dividerType = props.type ? 'vertical' : 'horizontal'; return ( diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx index 005edaefc..908721570 100644 --- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx @@ -42,7 +42,6 @@ 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") { @@ -381,7 +380,6 @@ const childrenMap = { }; let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props, dispatch); return( )}) diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx index b04238f1b..cb0c689bc 100644 --- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx @@ -13,7 +13,6 @@ 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` @@ -71,9 +70,7 @@ let FileViewerBasicComp = (function () { style: styleControl(FileViewerStyle , 'style'), animationStyle: styleControl(AnimationStyle , 'animationStyle'), }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { if (isEmpty(props.src)) { return ( ) => { }; let IconBasicComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return()}) .setPropertyViewFn((children) => ( <> diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx index 187edd993..955ceb1e3 100644 --- a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx @@ -12,7 +12,6 @@ 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%; @@ -49,9 +48,7 @@ let IFrameCompBase = new UICompBuilder( style: styleControl(IframeStyle , 'style'), animationStyle: styleControl(AnimationStyle , 'animationStyle'), }, - (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + (props) => { 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 e4a8b8b69..aa0b4cc88 100644 --- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx @@ -34,7 +34,6 @@ 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%; @@ -174,9 +173,7 @@ const childrenMap = { restrictPaddingOnRotation:withDefault(StringControl, 'image') }; -let ImageBasicComp = new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - +let ImageBasicComp = new UICompBuilder(childrenMap, (props) => { 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 3faf487a6..50f09db3c 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -20,7 +20,6 @@ import { } from "base/codeEditor/codeMirror"; import { useExtensions } from "base/codeEditor/extensions"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; import { AutoHeightControl, BoolControl } from "@lowcoder-ee/index.sdk"; /** @@ -75,9 +74,7 @@ const childrenMap = { }; let JsonEditorTmpComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { const wrapperRef = useRef(null); const view = useRef(null); const initialized = useRef(false); diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index 775c9c932..a42bb6cdf 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -13,7 +13,6 @@ import { EditorContext } from "comps/editorState"; 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"; import { AutoHeightControl } from "@lowcoder-ee/index.sdk"; /** @@ -61,9 +60,7 @@ let JsonExplorerTmpComp = (function () { theme: dropdownControl(themeOptions, 'shapeshifter:inverted'), animationStyle:styleControl(AnimationStyle, 'animationStyle'), }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return ( import('@lottiefiles/react-lottie-player') @@ -100,9 +99,7 @@ let JsonLottieTmpComp = (function () { loop: dropdownControl(loopOptions, "single"), keepLastFrame: BoolControl.DEFAULT_TRUE, }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return (
{ - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { // 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 c159e39ad..c1a04c14e 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -33,7 +33,6 @@ 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"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; import { childrenToProps } from "@lowcoder-ee/comps/generators/multi"; const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar")); @@ -405,8 +404,6 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas; const onEvent = comp.children.onEvent.getView(); - useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); - useEffect(() => { comp.children.jsonTabs.dispatchChangeValueAction({ manual: jsonItems as unknown as Array> diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx index 26493046e..2f07839ca 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx @@ -16,7 +16,7 @@ import { trans } from "i18n"; import { EditorContainer, EmptyContent } from "pages/common/styledComponent"; import { useCallback, useEffect, useMemo, useState } from "react"; import styled from "styled-components"; -import { isUserViewMode, useAppPathParam, useMergeCompStyles } from "util/hooks"; +import { isUserViewMode, useAppPathParam } from "util/hooks"; import { BoolCodeControl, StringControl, jsonControl } from "comps/controls/codeControl"; import { styleControl } from "comps/controls/styleControl"; import { @@ -291,8 +291,6 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => { const dataOptionType = comp.children.dataOptionType.getView(); const onEvent = comp.children.onEvent.getView(); - useMergeCompStyles(childrenToProps(comp.children), comp.dispatch); - // filter out hidden. unauthorised items filtered by server const filterItem = useCallback((item: LayoutMenuItemComp): boolean => { return !item.children.hidden.getView(); diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx index 63759886a..937195f7d 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx @@ -18,7 +18,6 @@ import { import { ContextContainerComp } from "./contextContainerComp"; import { ListViewImplComp } from "./listViewComp"; import { getCurrentItemParams, getData } from "./listViewUtils"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; import { childrenToProps } from "@lowcoder-ee/comps/generators/multi"; import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; @@ -284,8 +283,6 @@ export function ListView(props: Props) { const childrenProps = childrenToProps(comp.children); - useMergeCompStyles(childrenProps, comp.dispatch); - // log.debug("renders: ", renders); return ( diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx index eb725ff44..47373e51b 100644 --- a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx @@ -15,7 +15,6 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { mediaCommonChildren, mediaMethods } from "./mediaUtils"; 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}; @@ -75,9 +74,7 @@ const childrenMap = { }; let AudioBasicComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { 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 66ee2fd4c..6ddab9be4 100644 --- a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx @@ -16,7 +16,6 @@ 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"; import { JSONObject } from "@lowcoder-ee/util/jsonTypes"; export function getStyle(style: ColorPickerStyleType) { @@ -71,9 +70,7 @@ const childrenMap = { presets: withDefault(ArrayOrJSONObjectControl, JSON.stringify(presets, null, 2)), }; -export const ColorPickerComp = new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - +export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => { return props.label({ children: ( { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return ; }) .setPropertyViewFn((children) => { diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 6b686b009..1f9e10dea 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -22,7 +22,6 @@ import { trans } from "i18n"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; type IProps = { $justify: boolean; @@ -145,9 +144,7 @@ const childrenMap = { ]), }; -const NavCompBase = new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props, dispatch); - +const NavCompBase = new UICompBuilder(childrenMap, (props) => { const data = props.items; const items = ( <> diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index 298e2e900..358235e56 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -54,7 +54,6 @@ 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` @@ -382,9 +381,7 @@ const CustomInputNumber = (props: RecordConstructorToView) = }; let NumberInputTmpComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return props.label({ required: props.required, children: , diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx index 83953144c..cac189864 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx @@ -6,7 +6,6 @@ import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generat 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 RangeSliderBasicComp = (function () { const childrenMap = { @@ -16,7 +15,6 @@ const RangeSliderBasicComp = (function () { vertical: BoolControl, }; 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/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx index 142290acd..a73b39a47 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx @@ -7,7 +7,6 @@ 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 () { /** @@ -19,9 +18,7 @@ const SliderBasicComp = (function () { vertical: BoolControl, ...formDataChildren, }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return props.label({ style: props.style, labelStyle: props.labelStyle, diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx index a92dea53c..b5593a40d 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx @@ -28,7 +28,6 @@ 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"; import SliderControl from "@lowcoder-ee/comps/controls/sliderControl"; const childrenMap = { @@ -65,8 +64,6 @@ const childrenMap = { // Compatible with old style data 2022-8-15 const layoutBaseComp = migrateOldData( new MultiCompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props, dispatch); - return { ...props, dispatch }; }).build(), fixOldStyleData diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx index 207feb6c5..b2070c7c2 100644 --- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx @@ -9,9 +9,8 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; -import { useContext, useEffect } from "react"; +import { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; // TODO: after Update of ANTd, introduce Size attribute to ProgressCircle @@ -73,9 +72,7 @@ let ProgressCircleTmpComp = (function () { style: styleControl(CircleProgressStyle, 'style'), animationStyle: styleControl(AnimationStyle, 'animationStyle'), }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return ( { return css` @@ -57,9 +56,7 @@ const ProgressBasicComp = (function () { style: styleControl(ProgressStyle, 'style'), animationStyle: styleControl(AnimationStyle, 'animationStyle'), }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return ( ) => { }; let QRCodeBasicComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return( )}) .setPropertyViewFn((children) => ( <> diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx index 75a4e2b84..6731200d4 100644 --- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx @@ -17,8 +17,6 @@ import { trans } from "i18n"; import { useContext, useEffect, useRef } from "react"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; - const EventOptions = [changeEvent] as const; @@ -56,11 +54,10 @@ const RatingBasicComp = (function () { inputFieldStyle: migrateOldData(styleControl(RatingStyle, 'inputFieldStyle'), fixOldData), ...formDataChildren, }; - return new UICompBuilder(childrenMap, (props, dispatch) => { + return new UICompBuilder(childrenMap, (props) => { const defaultValue = { ...props.defaultValue }.value; const value = { ...props.value }.value; const changeRef = useRef(false); - useMergeCompStyles(props as Record, dispatch); useEffect(() => { props.value.onChange(defaultValue); diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx index 521b19788..d52054f17 100644 --- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx @@ -42,7 +42,6 @@ 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"; import SliderControl from "@lowcoder-ee/comps/controls/sliderControl"; const RowWrapper = styled(Row)<{ @@ -189,8 +188,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => { }; export const ResponsiveLayoutBaseComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); + return new UICompBuilder(childrenMap, (props, dispatch) => { return ( ); diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx index 92acbe340..f8d73fc44 100644 --- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx @@ -26,7 +26,6 @@ import { RichTextEditorStyle, RichTextEditorStyleType } from "comps/controls/sty import { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const localizeStyle = css` & .ql-snow { @@ -291,10 +290,7 @@ function RichTextEditor(props: IProps) { ); } -const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - - +const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => { const handleChange = (v: string) => { props.value.onChange(v); props.onEvent("change"); diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx index 55b1dceaa..fad05e2f9 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx @@ -7,7 +7,6 @@ import { UICompBuilder, withDefault } from "../../generators"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; import { CascaderChildren, CascaderPropertyView, defaultDataSource } from "./cascaderContants"; import { refMethods } from "comps/generators/withMethodExposing"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType,$childrenInputFieldStyle:ChildrenMultiSelectStyleType }>` width: 100%; @@ -38,9 +37,7 @@ const DropdownRenderStyle = styled.div<{ $childrenInputFieldStyle: ChildrenMulti let CascaderBasicComp = (function () { const childrenMap = CascaderChildren; - return new UICompBuilder(childrenMap, (props , dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return props.label({ style: props.style, labelStyle: props.labelStyle, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx index 90f1fbf68..f69b69453 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx @@ -24,7 +24,6 @@ import { trans } from "i18n"; import { RefControl } from "comps/controls/refControl"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; export const getStyle = (style: CheckboxStyleType) => { return css` @@ -160,9 +159,7 @@ let CheckboxBasicComp = (function () { ...SelectInputValidationChildren, ...formDataChildren, }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { const [ validateState, handleChange, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx index 5dd6feb82..925e9d021 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx @@ -16,8 +16,6 @@ import { PaddingControl } from "../../controls/paddingControl"; import { MarginControl } from "../../controls/marginControl"; import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; -import { useContext, useEffect } from "react"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; let MultiSelectBasicComp = (function () { const childrenMap = { @@ -32,8 +30,6 @@ let MultiSelectBasicComp = (function () { padding: PaddingControl, }; return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - const valueSet = new Set(props.options.map((o) => o.value)); // Filter illegal default values entered by the user const [ validateState, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx index 112af7abe..6bc4805cd 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx @@ -13,7 +13,6 @@ import { EllipsisTextCss, ValueFromOption } from "lowcoder-design"; import { trans } from "i18n"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; import { migrateOldData } from "comps/generators/simpleGenerators"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => { return css` @@ -98,9 +97,7 @@ const Radio = styled(AntdRadioGroup)<{ `; let RadioBasicComp = (function () { - return new UICompBuilder(RadioChildrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(RadioChildrenMap, (props) => { const [ validateState, handleChange, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx index 053493a62..a1839f9cb 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx @@ -27,8 +27,6 @@ import { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; - const getStyle = (style: SegmentStyleType) => { return css` @@ -87,9 +85,7 @@ const SegmentChildrenMap = { }; let SegmentedControlBasicComp = (function () { - return new UICompBuilder(SegmentChildrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(SegmentChildrenMap, (props) => { const [ validateState, handleChange, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx index cbb772fb1..f20c66001 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx @@ -19,7 +19,6 @@ import { useContext, useEffect, useRef } from "react"; import { RecordConstructorToView } from "lowcoder-core"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; let SelectBasicComp = (function () { const childrenMap = { @@ -32,8 +31,6 @@ let SelectBasicComp = (function () { childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle') }; return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - const [ validateState, handleChange, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx index 72e0f4f2e..f06e5a231 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx @@ -18,7 +18,6 @@ import { RefControl } from "comps/controls/refControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { useContext, useState, useEffect } from "react"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const sizeOptions = [ { @@ -97,10 +96,7 @@ const StepsChildrenMap = { }; let StepControlBasicComp = (function () { - return new UICompBuilder(StepsChildrenMap, (props , dispatch) => { - useMergeCompStyles(props as Record, dispatch); - - + return new UICompBuilder(StepsChildrenMap, (props) => { const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>` ${props=>props.$animationStyle} min-height: 24px; diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx index b5b3c5131..7d681bc4a 100644 --- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx @@ -29,7 +29,6 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst import { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Wrapper = styled.div<{ $style: SignatureStyleType; $isEmpty: boolean }>` height: 100%; @@ -113,8 +112,6 @@ const SignatureCanvas = React.lazy(() => import("react-signature-canvas")); let SignatureTmpComp = (function () { return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - let canvas: SignatureCanvasType | null = null; const [isBegin, setIsBegin] = useState(false); const [canvasSize, setCanvasSize] = useState([0, 0]); diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx index c9b96bbb1..0d7b727b8 100644 --- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx @@ -19,7 +19,6 @@ import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUti import { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const EventOptions = [ changeEvent, @@ -105,9 +104,7 @@ let SwitchTmpComp = (function () { inputFieldStyle: migrateOldData(styleControl(SwitchStyle, 'inputFieldStyle'), fixOldData), ...formDataChildren, }; - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return props.label({ style: props.style, labelStyle: props.labelStyle, diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index a704fdee7..3bb8403e9 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -41,11 +41,9 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances" import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes"; import { CellColorViewType } from "./column/tableColumnComp"; import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; import { childrenToProps } from "@lowcoder-ee/comps/generators/multi"; import { getVerticalMargin } from "@lowcoder-ee/util/cssUtil"; - function genLinerGradient(color: string) { return `linear-gradient(${color}, ${color})`; } @@ -809,8 +807,6 @@ export function TableCompView(props: { }, [pagination, data]); const childrenProps = childrenToProps(comp.children); - - useMergeCompStyles(childrenProps, comp.dispatch) const handleChangeEvent = useCallback( (eventName: TableEventOptionValues) => { diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index 5f18b86b4..bfd495cd9 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -35,7 +35,6 @@ import { checkIsMobile } from "util/commonUtils"; import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"; import { BoolControl } from "comps/controls/boolControl"; import { PositionControl } from "comps/controls/dropdownControl"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; import SliderControl from "@lowcoder-ee/comps/controls/sliderControl"; const EVENT_OPTIONS = [ @@ -293,8 +292,6 @@ const TabbedContainer = (props: TabbedContainerProps) => { export const TabbedContainerBaseComp = (function () { return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - return ( diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index ce978a1cb..8dc56bad7 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -21,7 +21,6 @@ import { PaddingControl } from "../controls/paddingControl"; import React, { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const EventOptions = [clickEvent] as const; @@ -150,11 +149,6 @@ let TextTmpComp = (function () { }; return new UICompBuilder(childrenMap, (props, dispatch) => { const value = props.text.value; - - // useMergeCompStyles( - // props as Record, - // dispatch - // ); return ( { +let InputBasicComp = new UICompBuilder(childrenMap, (props) => { const [inputProps, validateState] = useTextInputProps(props); - useMergeCompStyles(props as Record, dispatch); - return props.label({ required: props.required, children: ( diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx index 4796961b9..83d4fdf8f 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx @@ -57,7 +57,6 @@ import { import React, { useContext } from "react"; import { EditorContext } from "comps/editorState"; import { migrateOldData } from "comps/generators/simpleGenerators"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Wrapper = styled.div<{ $style: InputLikeStyleType; @@ -107,9 +106,7 @@ let MentionTmpComp = (function () { invalid: booleanExposingStateControl("invalid"), }; - return new UICompBuilder(childrenMap, (props , dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { const { mentionList } = props; const [validateState, setvalidateState] = useState({}); const [activationFlag, setActivationFlag] = useState(false); diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index 238f1e7ec..151f4fc7f 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -42,7 +42,6 @@ import { RefControl } from "comps/controls/refControl"; import React, { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; import { migrateOldData } from "comps/generators/simpleGenerators"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const PasswordStyle = styled(InputPassword)<{ $style: InputLikeStyleType; @@ -67,7 +66,6 @@ let PasswordTmpComp = (function () { }; return new UICompBuilder(childrenMap, (props, dispatch) => { const [inputProps, validateState] = useTextInputProps(props); - useMergeCompStyles(props as Record, dispatch); return props.label({ required: props.required, diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index 75028b40c..4b34ba614 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -37,7 +37,6 @@ import { blurMethod, focusWithOptions } from "comps/utils/methodUtils"; import React, { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; import { migrateOldData } from "comps/generators/simpleGenerators"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const TextAreaStyled = styled(TextArea)<{ $style: InputLikeStyleType; @@ -79,9 +78,8 @@ let TextAreaTmpComp = (function () { inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), animationStyle: styleControl(AnimationStyle, 'animationStyle') }; - return new UICompBuilder(childrenMap, (props, dispatch) => { + return new UICompBuilder(childrenMap, (props) => { const [inputProps, validateState] = useTextInputProps(props); - useMergeCompStyles(props as Record, dispatch); return props.label({ required: props.required, diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx index 8f24b2cf8..f7c877c90 100644 --- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx @@ -47,7 +47,6 @@ import { timelineDate, timelineNode, TimelineDataTooltip } from "./timelineConst import { convertTimeLineData } from "./timelineUtils"; import { default as Timeline } from "antd/es/timeline"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const EventOptions = [ clickEvent, @@ -90,8 +89,6 @@ const TimelineComp = ( ) => { const { value, dispatch, style, mode, reverse, onEvent } = props; const [icons, setIcons] = useState([]); - useMergeCompStyles(props as Record, dispatch); - useEffect(() => { const loadIcons = async () => { const iconComponents = await Promise.all( diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx index 197b57673..b009cf5ac 100644 --- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx @@ -17,7 +17,6 @@ import styled, { css } from "styled-components"; import { useContext, useEffect, useRef, useState } from "react"; import { valueComp, withDefault } from "../generators"; import type { TransferDirection } from 'antd/es/transfer'; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const Container = styled.div<{ $style: TransferStyleType }>` height: 100%; @@ -141,8 +140,6 @@ const TransferView = (props: RecordConstructorToView & { let TransferBasicComp = (function () { return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - return ( )}) .setPropertyViewFn((children) => ( diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx index 4e3419ffe..b6ebf264c 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx @@ -33,7 +33,6 @@ import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl"; import { trans } from "i18n"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; type TreeStyleType = StyleConfigType; @@ -151,9 +150,7 @@ const TreeCompView = (props: RecordConstructorToView) => { }; let TreeBasicComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - + return new UICompBuilder(childrenMap, (props) => { return()} ) .setPropertyViewFn((children) => ( diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx index 5eb322d0a..dbbf931c5 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx @@ -36,7 +36,6 @@ import { BaseSelectRef } from "rc-select"; import { RefControl } from "comps/controls/refControl"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const StyledTreeSelect = styled(TreeSelect)<{ $style: TreeSelectStyleType }>` width: 100%; @@ -147,8 +146,6 @@ const TreeCompView = ( let TreeBasicComp = (function () { return new UICompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props as Record, dispatch); - return( )}) diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx index e368192de..8a09e3d9e 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx @@ -27,7 +27,6 @@ import { SimpleContainerComp } from "../containerBase/simpleContainerComp"; import { ContainerBodyChildComp } from "./containerBodyChildComp"; import { trans } from "i18n"; import { ControlNode } from "lowcoder-design"; -import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; import SliderControl from "@lowcoder-ee/comps/controls/sliderControl"; const childrenMap = { @@ -53,8 +52,6 @@ const childrenMap = { // Compatible with old style data 2022-8-15 const TriContainerBaseComp = migrateOldData( new MultiCompBuilder(childrenMap, (props, dispatch) => { - useMergeCompStyles(props, dispatch); - return { ...props, dispatch }; }).build(), fixOldStyleData From 7929e20815836d7030950d9da1b91b489e72d1ce Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Tue, 13 Aug 2024 12:03:25 +0500 Subject: [PATCH 3/3] remove useMergeCompStyles hook from charts --- .../lowcoder-comps/src/comps/basicChartComp/chartComp.tsx | 3 --- .../lowcoder-comps/src/comps/calendarComp/calendarComp.tsx | 3 --- .../src/comps/candleStickChartComp/candleStickChartComp.tsx | 3 --- .../src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx | 3 --- .../src/comps/funnelChartComp/funnelChartComp.tsx | 3 --- .../lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx | 3 --- .../lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx | 3 --- .../src/comps/heatmapChartComp/heatmapChartComp.tsx | 3 --- .../lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx | 3 --- .../src/comps/sankeyChartComp/sankeyChartComp.tsx | 3 --- .../src/comps/sunburstChartComp/sunburstChartComp.tsx | 3 --- .../src/comps/themeriverChartComp/themeriverChartComp.tsx | 3 --- .../lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx | 3 --- .../src/comps/treemapChartComp/treemapChartComp.tsx | 3 --- 14 files changed, 42 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx index a3522ed1e..bcb1c7aa4 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx @@ -26,7 +26,6 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -74,8 +73,6 @@ 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, diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index 069223758..cd94dc9b5 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -45,7 +45,6 @@ import { jsonValueExposingStateControl, CalendarDeleteIcon, Tooltip, - useMergeCompStyles, EditorContext, CompNameContext, } from 'lowcoder-sdk'; @@ -137,8 +136,6 @@ let CalendarBasicComp = (function () { const [left, setLeft] = useState(undefined); const [licensed, setLicensed] = useState(props.licenseKey !== ""); - useMergeCompStyles?.(props, dispatch); - useEffect(() => { setLicensed(props.licenseKey !== ""); }, [props.licenseKey]); diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx index 2e02f78ce..3f22b5c45 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx @@ -25,7 +25,6 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -71,8 +70,6 @@ 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, diff --git a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx index 88da3b89c..96bd52f0b 100644 --- a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx @@ -26,7 +26,6 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/basicChartComp/chartConfigs/lineChartConfig"; @@ -83,8 +82,6 @@ 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, diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx index afa7ae13d..0c95ed8ff 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx @@ -25,7 +25,6 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -72,8 +71,6 @@ 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, diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx index 1793dd634..7e2574c04 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx @@ -26,7 +26,6 @@ import { getPromiseAfterDispatch, dropdownControl, JSONObject, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -73,8 +72,6 @@ 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, diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx index 5f68c050c..bbacc0995 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx @@ -26,7 +26,6 @@ import { getPromiseAfterDispatch, dropdownControl, JSONObject, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -73,8 +72,6 @@ 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, diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx index 80b3da4ab..43fdfc045 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx @@ -25,7 +25,6 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -72,8 +71,6 @@ 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, diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx index 950f5cad2..949828a76 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx @@ -25,7 +25,6 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -72,8 +71,6 @@ 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, diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx index 45b751926..c171e6b95 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx @@ -25,7 +25,6 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -72,8 +71,6 @@ 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, diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx index 6cfa5a90c..a5714c8ac 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx @@ -25,7 +25,6 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -72,8 +71,6 @@ 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, diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx index 143286741..b55346bdd 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx @@ -25,7 +25,6 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -72,8 +71,6 @@ 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, diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx index 193e055ee..e0b375bec 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx @@ -25,7 +25,6 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -72,8 +71,6 @@ 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, diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx index 460a538f8..648ba9f58 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx @@ -25,7 +25,6 @@ import { chartColorPalette, getPromiseAfterDispatch, dropdownControl, - useMergeCompStyles, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -72,8 +71,6 @@ 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,