Merge branch 'private-npm-repositories' of https://github.com/goldants/lowcoder into private-npm-repositories

Author: Thomasr

README.md

@@ -90,7 +90,7 @@ And we mean it... Day by day!
 ## 💻 Deployment Options
 [![Deploy to AWS using Stitch](https://img.shields.io/badge/deploy_with-Stitch-%23E369F7?logo=amazonaws&color=%23E369F7)](https://deploy.stitch.tech/lowcoder/lowcoder)
 
-[![Deploy in minutes on Elest.io](https://raw.githubusercontent.com/elestio-examples/element/main/deploy-on-elestio.png)](https://elest.io/open-source/lowcoder)
+[![Deploy to Elestio](https://img.shields.io/badge/Deploy_to-Elestio-%23E369F7?color=orange)](https://elest.io/open-source/lowcoder)
 
 You can access Lowcoder from [cloud-hosted version](https://app.lowcoder.cloud/) at any time, or use the following resources for self-host Lowcoder on different platforms:
 - [Docker](https://docs.lowcoder.cloud/lowcoder-documentation/setup-and-run/self-hosting)
@@ -110,4 +110,4 @@ Like ...  [@Darkjamin](https://github.com/Darkjamin), [@spacegoats-io](https://g
 
 ## Intro Video
 
-[![Watch the video](https://i.ytimg.com/vi/s4ltAqS0hzM/maxresdefault.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGD0gSShyMA8=&rs=AOn4CLAlPOIFdtauythoBKNPXhi6XGwlDQ)](https://youtu.be/s4ltAqS0hzM?feature=shared)
+[![Watch the video](https://i.ytimg.com/vi/s4ltAqS0hzM/maxresdefault.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGD0gSShyMA8=&rs=AOn4CLAlPOIFdtauythoBKNPXhi6XGwlDQ)](https://youtu.be/s4ltAqS0hzM?feature=shared)

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

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<number | undefined>(undefined);
     const [licensed, setLicensed] = useState<boolean>(props.licenseKey !== "");
 
-    useMergeCompStyles?.(props, dispatch);
-
     useEffect(() => {
       setLicensed(props.licenseKey !== "");
     }, [props.licenseKey]);

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

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<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,

client/packages/lowcoder-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-sdk",
-  "version": "2.4.11",
+  "version": "2.4.12",
   "type": "module",
   "files": [
     "src",

client/packages/lowcoder/src/components/table/EditableCell.tsx

@@ -37,6 +37,7 @@ export interface CellProps {
   candidateStatus?: { text: string; status: StatusType }[];
   textOverflow?: boolean;
   cellTooltip?: string;
+  editMode?: string;
   onTableEvent?: (eventName: any) => void;
 }
 
@@ -94,17 +95,19 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
     candidateTags,
     // tagColors
     candidateStatus,
+    editMode,
     onTableEvent,
   } = props;
   const status = _.isNil(changeValue) ? "normal" : "toSave";
   const editable = editViewFn ? props.editable : false;
   const { isEditing, setIsEditing } = useContext(TableCellContext);
   const value = changeValue ?? baseValue!;
   const [tmpValue, setTmpValue] = useState<T | null>(value);
+  const singleClickEdit = editMode === 'single'; 
 
   useEffect(() => {
     setTmpValue(value);
-  }, [value]);
+  }, [JSON.stringify(value)]);
 
   const onChange = useCallback(
     (value: T) => {
@@ -125,21 +128,27 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
     if(!_.isEqual(tmpValue, value)) {
       onTableEvent?.('columnEdited');
     }
-  }, [dispatch, baseValue, tmpValue]);
+  }, [dispatch, JSON.stringify(baseValue), JSON.stringify(tmpValue)]);
+
   const editView = useMemo(
     () => editViewFn?.({ value, onChange, onChangeEnd }) ?? <></>,
-    [editViewFn, value, onChange, onChangeEnd]
+    [editViewFn, JSON.stringify(value), onChange, onChangeEnd]
   );
+
   const enterEditFn = useCallback(() => {
     if (editable) setIsEditing(true);
   }, [editable]);
 
   if (isEditing) {
     return (
       <>
-        <BorderDiv />
+        <BorderDiv className="editing-border" />
         <TagsContext.Provider value={candidateTags ?? []}>
-          <StatusContext.Provider value={candidateStatus ?? []}>{editView}</StatusContext.Provider>
+          <StatusContext.Provider value={candidateStatus ?? []}>
+            <div className="editing-wrapper">
+              {editView}
+            </div>
+          </StatusContext.Provider>
         </TagsContext.Provider>
       </>
     );
@@ -151,7 +160,12 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
       >
         {status === "toSave" && !isEditing && <EditableChip />}
         <CellWrapper tooltipTitle={props.cellTooltip}>
-          {normalView}
+          <div
+            tabIndex={editable ? 0 : -1 }
+            onFocus={enterEditFn}
+          >
+            {normalView}
+          </div>
         </CellWrapper>
         {/* overlay on normal view to handle double click for editing */}
         {editable && (
@@ -164,7 +178,8 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
                 width: '100%',
                 height: '100%',
               }}
-              onDoubleClick={enterEditFn}
+              onDoubleClick={!singleClickEdit ? enterEditFn : undefined}
+              onClick={singleClickEdit ? enterEditFn : undefined}
             >
             </div>
           </CellWrapper>

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<string, any>, dispatch);
-
+  return new UICompBuilder(childrenMap, (props) => {
     const {
       items,
       onEvent,

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) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
   background: ${(props) => props.$style.background};
@@ -198,9 +197,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 let AvatarBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props , dispatch) => { 
-    useMergeCompStyles(props as Record<string, any>, dispatch);    
-
+  return new UICompBuilder(childrenMap, (props) => {
     return(<AvatarView {...props} />)})
     .setPropertyViewFn((children) => (
       <>