Merge pull request #2104 from lowcoder-org/dev

Dev => Prod - for Release v2.7.6

Author: FalkWolsky

client/VERSION

@@ -1 +1 @@
-2.7.5
+2.7.6

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-frontend",
-  "version": "2.7.5",
+  "version": "2.7.6",
   "type": "module",
   "private": true,
   "workspaces": [
@@ -81,6 +81,7 @@
     "@types/styled-components": "^5.1.34",
     "antd-mobile": "^5.34.0",
     "chalk": "4",
+    "dompurify": "^3.3.1",
     "flag-icons": "^7.2.1",
     "number-precision": "^1.6.0",
     "react-countup": "^6.5.3",

client/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "2.7.5",
+  "version": "2.7.6",
   "type": "module",
   "license": "MIT",
   "dependencies": {

client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx

@@ -75,6 +75,7 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+
   // Detect race mode changes and force chart recreation
   const currentRaceMode = comp.children.chartConfig?.children?.comp?.children?.race?.getView();
   useEffect(() => {
@@ -172,7 +173,6 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
   useResizeDetector({
     targetRef: containerRef,
     onResize: ({width, height}) => {
-      console.log('barChart - resize');
       if (width && height) {
         setChartSize({ w: width, h: height });
       }
@@ -194,6 +194,7 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
         notMerge={!currentRaceMode}
         lazyUpdate={!currentRaceMode}
         opts={{ locale: getEchartsLocale() }}
+        theme={themeConfig}
         option={option}
         mode={mode}
       />

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx

@@ -174,6 +174,7 @@ LineChartTmpComp = withViewFn(LineChartTmpComp, (comp) => {
         notMerge
         lazyUpdate
         opts={{ locale: getEchartsLocale() }}
+        theme={themeConfig}
         option={option}
         mode={mode}
       />

client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx

@@ -194,6 +194,7 @@ PieChartTmpComp = withViewFn(PieChartTmpComp, (comp) => {
         notMerge
         lazyUpdate
         opts={{ locale: getEchartsLocale() }}
+        theme={themeConfig}
         option={option}
         mode={mode}
       />
@@ -302,7 +303,7 @@ let PieChartComp = withExposingConfigs(PieChartTmpComp, [
 
 
 export const PieChartCompWithDefault = withDefault(PieChartComp, {
-  xAxisKey: "date",
+  xAxisKey: "name",
   series: [
     {
       dataIndex: genRandomKey(),

client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartComp.tsx

@@ -175,6 +175,7 @@ ScatterChartTmpComp = withViewFn(ScatterChartTmpComp, (comp) => {
         notMerge
         lazyUpdate
         opts={{ locale: getEchartsLocale() }}
+        theme={themeConfig}
         option={option}
         mode={mode}
       />

client/packages/lowcoder-design/src/components/Dropdown.tsx

@@ -159,16 +159,6 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
   const { placement = "right" } = props;
   const valueInfoMap = _.fromPairs(props.options.map((option) => [option.value, option]));
 
-  useEffect(() => {
-    const dropdownElems = document.querySelectorAll<HTMLElement>("div.ant-dropdown ul.ant-dropdown-menu");
-    for (let index = 0; index < dropdownElems.length; index++) {
-      const element = dropdownElems[index];
-      element.style.maxHeight = "300px";
-      element.style.overflowY = "scroll";
-      element.style.minWidth = "150px";
-      element.style.paddingRight = "10px";
-    }
-  }, []);
 
   return (
     <FlexDiv style={props.style} className={props.className}>

client/packages/lowcoder-design/src/components/Switch.tsx

@@ -52,6 +52,24 @@ const SwitchStyle: any = styled.input`
     border-radius: 20px;
     background-color: #ffffff;
   }
+
+  &:disabled {
+    background-color: #e0e0e0;
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &:disabled::before {
+    background-color: #cccccc;
+  }
+
+  &:disabled:checked {
+    background-color: #a0a0a0;
+  }
+
+  &:disabled:hover {
+    cursor: not-allowed;
+  }
 `;
 
 const SwitchDiv = styled.div<{
@@ -104,16 +122,18 @@ const JsIconGray = styled(jsIconGray)<Ishow>`
 interface SwitchProps extends Omit<React.HTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
   value: boolean;
   onChange: (value: boolean) => void;
+  disabled?: boolean;
 }
 
 export const Switch = (props: SwitchProps) => {
-  const { value, onChange, ...inputChanges } = props;
+  const { value, onChange, disabled, ...inputChanges } = props;
   return (
     <SwitchStyle
       type="checkbox"
-      checked={props.value}
-      onClick={() => props.onChange(!props.value)}
+      checked={value}
+      onClick={() => onChange(!value)}
       onChange={() => {}}
+      disabled={disabled}
       {...inputChanges}
     />
   );
@@ -154,15 +174,17 @@ export const SwitchWrapper = (props: {
 export function TacoSwitch(props: {
   label: string;
   checked: boolean;
-  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
 }) {
   return (
     <SwitchWrapper label={props.label}>
       <Switch
         onChange={(value) => {
-          props.onChange(value);
+          props.onChange ? props.onChange(value) : null;
         }}
         value={props.checked}
+        disabled={props.disabled}
       />
     </SwitchWrapper>
   );

client/packages/lowcoder-design/src/components/option.tsx

@@ -9,7 +9,7 @@ import { CSS } from "@dnd-kit/utilities";
 import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { ConstructorToComp, MultiCompConstructor } from "lowcoder-core";
 import { ReactComponent as WarnIcon } from "icons/v1/icon-warning-white.svg";
-import { DndContext } from "@dnd-kit/core";
+import { DndContext, DragEndEvent } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { ActiveTextColor, GreyTextColor } from "constants/style";
 import { trans } from "i18n/design";
@@ -225,12 +225,12 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
     }
     return -1;
   };
-  const handleDragEnd = (e: { active: { id: string }; over: { id: string } | null }) => {
+  const handleDragEnd = (e: DragEndEvent) => {
     if (!e.over) {
       return;
     }
-    const fromIndex = findIndex(e.active.id);
-    const toIndex = findIndex(e.over.id);
+    const fromIndex = findIndex(String(e.active.id));
+    const toIndex = findIndex(String(e.over.id));
     if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) {
       return;
     }