Switch Column Type - WIP

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx

@@ -5,6 +5,7 @@ import { withType } from "comps/generators";
 import { trans } from "i18n";
 import { Dropdown } from "lowcoder-design/src/components/Dropdown";
 import { BooleanComp } from "./columnTypeComps/columnBooleanComp";
+import { SwitchComp } from "./columnTypeComps/columnSwitchComp";
 import { DateComp } from "./columnTypeComps/columnDateComp";
 import { ImageComp } from "./columnTypeComps/columnImgComp";
 import { LinkComp } from "./columnTypeComps/columnLinkComp";
@@ -77,6 +78,10 @@ const actionOptions = [
     label: trans("table.boolean"),
     value: "boolean",
   },
+  {
+    label: trans("table.switch"),
+    value: "switch",
+  },
   {
     label: trans("table.rating"),
     value: "rating",
@@ -101,6 +106,7 @@ export const ColumnTypeCompMap = {
   markdown: ColumnMarkdownComp,
   dateTime: DateTimeComp,
   boolean: BooleanComp,
+  switch: SwitchComp,
   rating: RatingComp,
   progress: ProgressComp,
   date: DateComp,

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSwitchComp.tsx

@@ -0,0 +1,127 @@
+import { BoolCodeControl } from "comps/controls/codeControl";
+import { trans } from "i18n";
+import { default as Checkbox } from "antd/es/checkbox";
+import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
+import { ColumnValueTooltip } from "../simpleColumnTypeComps";
+import { SwitchStyle, SwitchStyleType, LabelStyle,  InputFieldStyle } from "comps/controls/styleControlConstants";
+import styled, { css } from "styled-components";
+import { CheckboxStyle } from "comps/controls/styleControlConstants";
+import { useStyle } from "comps/controls/styleControl";
+import { default as Switch } from "antd/es/switch";
+import { styleControl } from "comps/controls/styleControl";
+import { RefControl } from "comps/controls/refControl";
+import { booleanExposingStateControl } from "comps/controls/codeStateControl";
+import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
+
+interface SwitchWrapperProps {
+  disabled: boolean;
+  $style?: SwitchStyleType; 
+}
+
+const EventOptions = [
+  changeEvent,
+  {
+    label: trans("switchComp.open"),
+    value: "true",
+    description: trans("switchComp.openDesc"),
+  },
+  {
+    label: trans("switchComp.close"),
+    value: "false",
+    description: trans("switchComp.closeDesc"),
+  },
+] as const;
+
+const getStyle = (style: SwitchStyleType) => {
+  return css`
+    .ant-switch-handle::before {
+      background-color: ${style.handle};
+    }
+    button {
+      background-image: none;
+      background-color: ${style.unchecked};
+      &.ant-switch-checked {
+        background-color: ${style.checked};
+      }
+    }
+  `;
+};
+
+const SwitchWrapper = styled.div<{ disabled: boolean }>`
+  display: flex;
+  align-items: center;
+  // Can respond to drag & select events when disabled
+  ${(props) =>
+    props.disabled &&
+    `
+    cursor: not-allowed;
+    >button:disabled {
+      pointer-events: none;
+    }
+  `};
+`;
+
+const childrenMap = {
+  value: booleanExposingStateControl("value"),
+  switchState: BoolCodeControl,
+  onEvent: eventHandlerControl(EventOptions),
+  disabled: BoolCodeControl,
+  style: styleControl(InputFieldStyle),
+  labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
+  viewRef: RefControl<HTMLElement>,
+};
+
+const getBaseValue: ColumnTypeViewFn<typeof childrenMap, boolean, boolean> = (props) => props.switchState;
+
+export const SwitchComp = (function () {
+  return new ColumnTypeCompBuilder(
+    childrenMap,
+    (props, dispatch) => {
+      const value = props.changeValue ?? getBaseValue(props, dispatch);
+      const CheckBoxComp = () => {
+        return (
+          <SwitchWrapper disabled={props.disabled}>
+            <Switch 
+              checked={props.value.value || true}
+              disabled={props.disabled}
+              ref={props.viewRef}
+              onChange={(checked) => {
+                props.value.onChange(checked);
+                props.onEvent("change");
+                props.onEvent(checked ? "true" : "false");
+              }}
+            />
+          </SwitchWrapper>
+        );
+      };
+      return <CheckBoxComp />;
+    },
+    (nodeValue) => nodeValue.switchState.value,
+    getBaseValue
+  )
+    .setEditViewFn((props) => {
+      return (
+        <Switch 
+          checked={props.value}
+          disabled={false}
+          onChange={(checked) => {
+            props.onChange(checked);
+            // props.onEvent("change");
+            // props.onEvent(checked ? "true" : "false");
+          }}
+      />
+      );
+    })
+    .setPropertyViewFn((children) => {
+      return (
+        <>
+          {children.switchState.propertyView({
+            label: trans("table.columnValue"),
+            tooltip: ColumnValueTooltip,
+          })}
+          
+        </>
+      );
+    })
+    .build();
+})();

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1888,6 +1888,7 @@ export const en = {
     "button": "Button",
     "image": "Image",
     "boolean": "Boolean",
+    "switch": "Switch",
     "rating": "Rating",
     "progress": "Progress",
     "option": "Operation",