Table: set switch column editable on double click

raheeliftikhar5 · raheeliftikhar5 · commit 351dee0f504c · 2024-05-21T16:25:46.000+05:00
diff --git a/client/packages/lowcoder/src/components/table/EditableCell.tsx b/client/packages/lowcoder/src/components/table/EditableCell.tsx
@@ -84,12 +84,14 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
   useEffect(() => {
     setTmpValue(value);
   }, [value]);
+
   const onChange = useCallback(
     (value: T) => {
       setTmpValue(value);
     },
     [setTmpValue]
   );
+
   const onChangeEnd = useCallback(() => {
     setIsEditing(false);
     dispatch(
@@ -127,11 +129,18 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
       textOverflow={props.textOverflow}
     >
       {status === "toSave" && !isEditing && <EditableChip />}
+      {normalView}
+      {/* overlay on normal view to handle double click for editing */}
       <div
-        style={{minHeight: '24px'}}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+        }}
         onDoubleClick={enterEditFn}
       >
-        {normalView}
       </div>
     </ColumnTypeView>
   );
diff --git a/client/packages/lowcoder/src/components/table/columnTypeView.tsx b/client/packages/lowcoder/src/components/table/columnTypeView.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
 const ColumnTypeViewWrapper = styled.div<{
   $textOverflow?: boolean
 }>`
+  position: relative;
   ${props => !props.$textOverflow && `
     div {
       overflow: hidden;
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSwitchComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSwitchComp.tsx
@@ -78,7 +78,7 @@ export const SwitchComp = (function () {
         return (
           <Switch 
             checked={value}
-            disabled={props.disabled}
+            disabled={props.disabled || true}
             ref={props.viewRef}
             onChange={(checked) => {
               props.value.onChange(checked);
@@ -96,20 +96,18 @@ export const SwitchComp = (function () {
     .setEditViewFn((props) => {
       return (
         <Wrapper
-          onBlur={(e) => {
-            if (!e.currentTarget?.contains(e.relatedTarget)) {
-              props.onChangeEnd();
-            }
+          onBlur={() => {
+            props.onChangeEnd()
           }}
         >
           <Switch
+            autoFocus
             defaultChecked={props.value}
             disabled={false}
-            onChange={(checked) => {
+            onChange={(checked, e) => {
               props.onChange(checked);
             }}
           />
-
         </Wrapper>
       );
     })
diff --git a/client/packages/lowcoder/vite.config.mts b/client/packages/lowcoder/vite.config.mts
@@ -92,8 +92,8 @@ export const viteConfig: UserConfig = {
     },
   },
   optimizeDeps: {
-    entries: ['./src/**/*.{js,jsx,ts,tsx}']
-    // include: ['antd/es/*'],
+    entries: ['./src/**/*.{js,jsx,ts,tsx}'],
+    include: ['antd'],
     // include: ['antd/**/*'],
     // force: true,
   },
