fix inner grid usage in component playground

Author: raheeliftikhar5

client/packages/lowcoder-sdk/package.json

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

client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx

@@ -40,7 +40,7 @@ import { EditorContext } from "comps/editorState";
 
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
-import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
+import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
 
 const ContainWrapper = styled.div<{

client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

@@ -326,7 +326,7 @@ const GridItemWrapper = React.memo(React.forwardRef(
     const editorState = useContext(EditorContext);
     const { children, ...divProps } = props;
     return (
-      <ItemWrapper ref={ref} $disableInteract={editorState.disableInteract} {...divProps}>
+      <ItemWrapper ref={ref} $disableInteract={editorState?.disableInteract} {...divProps}>
         {props.children}
       </ItemWrapper>
     );
@@ -350,9 +350,9 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
   const [currentRowHeight, setRowHeight] = useState(positionParams.rowHeight || DEFAULT_ROW_HEIGHT);
   const editorState = useContext(EditorContext);
   const { readOnly } = useContext(ExternalEditorContext);
-  const appSettingsComp = editorState.getAppSettingsComp().getView();
+  const appSettingsComp = editorState?.getAppSettingsComp().getView();
 
-  const maxWidth = useMemo(() => appSettingsComp.maxWidth, [appSettingsComp.maxWidth]);
+  const maxWidth = useMemo(() => appSettingsComp?.maxWidth, [appSettingsComp?.maxWidth]);
 
   // Falk: TODO: Here we can define the inner grid columns dynamically
   const defaultGrid = useMemo(() => {
@@ -372,10 +372,10 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
       getExtraLayout(
         props.items,
         props.layout,
-        editorState.selectedCompNames,
+        editorState?.selectedCompNames,
         props.dragSelectedComps
       ),
-    [props.items, props.layout, editorState.selectedCompNames, props.dragSelectedComps]
+    [props.items, props.layout, editorState?.selectedCompNames, props.dragSelectedComps]
   );
 
   const [containerSelectNames, setContainerSelectNames] = useState<Set<string>>(new Set([]));
@@ -392,8 +392,8 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
   }, [extraLayout, containerSelectNames]);
 
   const canAddSelect = useMemo(
-    () => _.size(containerSelectNames) === _.size(editorState.selectedCompNames),
-    [containerSelectNames, editorState.selectedCompNames]
+    () => _.size(containerSelectNames) === _.size(editorState?.selectedCompNames),
+    [containerSelectNames, editorState?.selectedCompNames]
   );
 
   const dispatchPositionParamsTimerRef = useRef(0);
@@ -446,9 +446,9 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
   );
   const setSelectedNames = useCallback(
     (names: Set<string>) => {
-      editorState.setSelectedCompNames(names);
+      editorState?.setSelectedCompNames(names);
     },
-    [editorState.setSelectedCompNames]
+    [editorState?.setSelectedCompNames]
   );
 
   const { width, ref } = useResizeDetector({
@@ -502,7 +502,7 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
       style={props.style}
       scrollContainerRef={props.scrollContainerRef}
       width={width ?? 0}
-      showGridLines={editorState.showGridLines() && (isDroppable || enableGridLines)}
+      showGridLines={editorState?.showGridLines() && (isDroppable || enableGridLines)}
       isRowCountLocked={isRowCountLocked}
       isDraggable={isDraggable}
       isResizable={isResizable}
@@ -519,7 +519,7 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
             : defaultLayout(compType);
           return {
             size: compLayout ?? defaultSize,
-            positionParams: editorState.canvasPositionParams(),
+            positionParams: editorState?.canvasPositionParams(),
           };
         }
       }}
@@ -535,18 +535,18 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
         const items = _.pick(props.items, Object.keys(layoutItems));
         draggingUtils.setData("sourceDispatch", props.dispatch);
         draggingUtils.setData<Record<string, GridItem>>("items", items);
-        editorState.setDragging(true);
+        editorState?.setDragging(true);
         const names = Object.values(items).map((item) => item.name);
-        editorState.setSelectedCompNames(new Set(names));
+        editorState?.setSelectedCompNames(new Set(names));
       }}
       onFlyDrop={(layout, items) => {
         onFlyDrop(layout, items, props.dispatch);
       }}
       onResizeStart={(_a, _b, _c, _d, event) => {
         event.stopPropagation();
-        editorState.setDragging(true);
+        editorState?.setDragging(true);
       }}
-      onResizeStop={() => editorState.setDragging(false)}
+      onResizeStop={() => editorState?.setDragging(false)}
       margin={[0, 0]}
       containerPadding={props.containerPadding}
       fixedRowCount={props.emptyRows !== DEFAULT_ROW_COUNT}
@@ -560,12 +560,12 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
       minHeight={props.minHeight}
       bgColor={props.bgColor}
       radius={props.radius}
-      hintPlaceholder={!editorState.isDragging && !readOnly && props.hintPlaceholder}
+      hintPlaceholder={!editorState?.isDragging && !readOnly && props.hintPlaceholder}
       selectedSize={_.size(containerSelectNames)}
       clickItem={clickItem}
       isCanvas={props.isCanvas}
       showName={props.showName}
-      disableDirectionKey={editorState.isDragging || readOnly}
+      disableDirectionKey={editorState?.isDragging || readOnly}
     >
       {itemViews}
     </ReactGridLayout>

client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx

@@ -39,7 +39,7 @@ import { ListView } from "./listView";
 import { listPropertyView } from "./listViewPropertyView";
 import { getData } from "./listViewUtils";
 import { withMethodExposing } from "comps/generators/withMethodExposing";
-import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
+import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
 
 const childrenMap = {
   noOfRows: withIsLoadingMethod(NumberOrJSONObjectArrayControl), // FIXME: migrate "noOfRows" to "data"

client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx

@@ -28,7 +28,7 @@ import { ContainerBodyChildComp } from "./containerBodyChildComp";
 import { trans } from "i18n";
 import { ControlNode } from "lowcoder-design";
 import { StringControl } from "comps/controls/codeControl";
-import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
+import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
 import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const childrenMap = {

client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx

@@ -42,7 +42,7 @@ import { EditorContext } from "comps/editorState";
 
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
-import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
+import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
 import { useScreenInfo } from "../../hooks/screenInfoComp";
 

client/packages/lowcoder/src/comps/comps/splitLayout/splitLayout.tsx

@@ -28,7 +28,7 @@ import { NameGenerator } from "comps/utils";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
-import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
+import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
 import _ from "lodash";
 

client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

@@ -35,7 +35,7 @@ import { checkIsMobile } from "util/commonUtils";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { BoolControl } from "comps/controls/boolControl";
 import { PositionControl } from "comps/controls/dropdownControl";
-import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
+import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
 
 const EVENT_OPTIONS = [

client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx

@@ -27,7 +27,7 @@ import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
 import { ContainerBodyChildComp } from "./containerBodyChildComp";
 import { trans } from "i18n";
 import { ControlNode } from "lowcoder-design";
-import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
+import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
 import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const childrenMap = {

client/packages/lowcoder/src/comps/controls/sliderControl.tsx

@@ -31,4 +31,4 @@ class SliderControl extends SimpleComp<number> {
   }
 }
 
-export default SliderControl;
+export { SliderControl };