Merge branch 'dev' of github.com:lowcoder-org/lowcoder into fix/1758-tabbed

Author: iamfaran

client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts

@@ -172,15 +172,7 @@ export function getEchartsConfig(
       }
     },
     tooltip: props.tooltip && {
-      trigger: "axis",
-      axisPointer: {
-        type: "line",
-        lineStyle: {
-          color: "rgba(0,0,0,0.2)",
-          width: 2,
-          type: "solid"
-        }
-      }
+      trigger: "item",
     },
     grid: {
       ...gridPos,

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

@@ -209,9 +209,8 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
             {columns.map(column => {
               const id = String(column.id);
               const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
-              if(!containers[id]) return null
+              if(!containers[id] || column.hidden) return null
               const containerProps = containers[id].children;
-              const noOfColumns = columns.length;
               return (
                 <React.Fragment key={id}>
                 <BackgroundColorContext.Provider value={props.columnStyle.background}>

client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts

@@ -171,6 +171,9 @@ export const getMobileStyle = (style: DateTimeStyleType) =>
 
 export const dateRefMethods = refMethods<CommonPickerMethods>([focusMethod, blurMethod]);
 
+export const parseInputFormats = (inputFormat?: string): string | string[] => 
+  inputFormat?.includes(',') ? inputFormat.split(',').map(f => f.trim()) : inputFormat || '';
+
 export const StyledPickerPanel = styled.div<{
   $style: ChildrenMultiSelectStyleType
 }>`

client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx

@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 import type { DateCompViewProps } from "./dateComp";
-import { disabledDate, getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil";
+import { disabledDate, getStyle, StyledPickerPanel, parseInputFormats } from "comps/comps/dateComp/dateCompUtil";
 import { useUIView } from "../../utils/useUIView";
 import { checkIsMobile } from "util/commonUtils";
 import React, { useContext } from "react";
@@ -68,20 +68,15 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
 
 export const DateRangeUIView = (props: DateRangeUIViewProps) => {
   const editorState = useContext(EditorContext);
+  const placeholders: [string, string] = Array.isArray(props.placeholder) 
+    ? props.placeholder 
+    : [props.placeholder || 'Start Date', props.placeholder || 'End Date'];
 
-  // Extract or compute the placeholder values
-  let placeholders: [string, string];
-  if (Array.isArray(props.placeholder)) {
-    placeholders = props.placeholder;
-  } else {
-    // Use the same placeholder for both start and end if it's a single string
-    placeholders = [props.placeholder || 'Start Date', props.placeholder || 'End Date'];
-  }
   return useUIView(
     <DateRangeMobileUIView {...props} />,
     <RangePickerStyled
       {...omit(props, "onChange" , "format", "inputFormat", "pickerMode", "$childrenInputFieldStyle")}
-      format={props.inputFormat}
+      format={parseInputFormats(props.inputFormat)}
       ref={props.viewRef as any}
       picker={props.pickerMode as any}
       value={[props.start, props.end]}

client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx

@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 import type { DateCompViewProps } from "./dateComp";
-import { disabledDate, getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil";
+import { disabledDate, getStyle, StyledPickerPanel, parseInputFormats } from "comps/comps/dateComp/dateCompUtil";
 import { useUIView } from "../../utils/useUIView";
 import { checkIsMobile } from "util/commonUtils";
 import React, { useContext } from "react";
@@ -67,15 +67,15 @@ const DateMobileUIView = React.lazy(() =>
 
 export const DateUIView = (props: DataUIViewProps) => {
   const editorState = useContext(EditorContext);
-
   const placeholder = Array.isArray(props.placeholder) ? props.placeholder[0] : props.placeholder;
+
   return useUIView(
     <DateMobileUIView {...props} />,
     <DatePickerStyled
       {...omit(props, "format", "inputFormat", "pickerMode", "$childrenInputFieldStyle")}
       $disabledStyle={props.$disabledStyle}
       multiple={false}
-      format={props.inputFormat}
+      format={parseInputFormats(props.inputFormat)}
       ref={props.viewRef as any}
       minDate={props.minDate ? dayjs(props.minDate, DateParser) : undefined}
       maxDate={props.maxDate ? dayjs(props.maxDate, DateParser) : undefined}

client/packages/lowcoder/src/comps/comps/fileComp/ImageCaptureModal.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useCallback, useEffect, useRef, useState } from "react";
+import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { default as Button } from "antd/es/button";
 import Dropdown from "antd/es/dropdown";
 import type { ItemType } from "antd/es/menu/interface";
@@ -8,6 +8,7 @@ import Flex from "antd/es/flex";
 import styled from "styled-components";
 import { trans } from "i18n";
 import { CustomModal } from "lowcoder-design";
+import { CaptureResolution, RESOLUTION_CONSTRAINTS } from "./fileComp";
 
 const CustomModalStyled = styled(CustomModal)`
   top: 10vh;
@@ -53,23 +54,32 @@ const ReactWebcam = React.lazy(() => import("react-webcam"));
 
 export const ImageCaptureModal = (props: {
   showModal: boolean;
+  captureResolution?: CaptureResolution;
   onModalClose: () => void;
   onImageCapture: (image: string) => void;
 }) => {
   const [errMessage, setErrMessage] = useState("");
-  const [videoConstraints, setVideoConstraints] = useState<MediaTrackConstraints>({
-    facingMode: "environment",
-  });
+  const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);
   const [modeList, setModeList] = useState<ItemType[]>([]);
   const [dropdownShow, setDropdownShow] = useState(false);
   const [imgSrc, setImgSrc] = useState<string>();
   const webcamRef = useRef<any>(null);
 
+  const resolution = props.captureResolution ?? "auto";
+  const resolutionSize = RESOLUTION_CONSTRAINTS[resolution] ?? {};
+
+  const videoConstraints = useMemo<MediaTrackConstraints>(() => {
+    const base: MediaTrackConstraints = selectedDeviceId
+      ? { deviceId: { exact: selectedDeviceId } }
+      : { facingMode: "environment" };
+    return { ...base, ...resolutionSize };
+  }, [selectedDeviceId, resolutionSize]);
+
   useEffect(() => {
     if (props.showModal) {
       setImgSrc("");
       setErrMessage("");
-      setVideoConstraints({ facingMode: "environment" });
+      setSelectedDeviceId(null);
       setDropdownShow(false);
     }
   }, [props.showModal]);
@@ -125,6 +135,8 @@ export const ImageCaptureModal = (props: {
                   ref={webcamRef}
                   onUserMediaError={handleMediaErr}
                   screenshotFormat="image/jpeg"
+                  screenshotQuality={1}
+                  forceScreenshotSourceSize
                   videoConstraints={videoConstraints}
                 />
               </Suspense>
@@ -172,7 +184,7 @@ export const ImageCaptureModal = (props: {
                     <Menu
                       items={modeList}
                       onClick={(value) => {
-                        setVideoConstraints({ deviceId: { exact: value.key } });
+                        setSelectedDeviceId(value.key);
                         setDropdownShow(false);
                       }}
                     />

client/packages/lowcoder/src/comps/comps/fileComp/draggerUpload.tsx

@@ -1,7 +1,7 @@
 import { default as AntdUpload } from "antd/es/upload";
 import { default as Button } from "antd/es/button";
 import { UploadFile, UploadChangeParam, UploadFileStatus, RcFile } from "antd/es/upload/interface";
-import { useState, useEffect } from "react";
+import { useState, useMemo } from "react";
 import styled, { css } from "styled-components";
 import { trans } from "i18n";
 import _ from "lodash";
@@ -11,8 +11,7 @@ import {
   multiChangeAction,
 } from "lowcoder-core";
 import { hasIcon } from "comps/utils";
-import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
-import { resolveValue, resolveParsedValue, commonProps } from "./fileComp";
+import { resolveValue, resolveParsedValue, commonProps, validateFile, CaptureResolution } from "./fileComp";
 import { FileStyleType, AnimationStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { ImageCaptureModal } from "./ImageCaptureModal";
 import { v4 as uuidv4 } from "uuid";
@@ -149,9 +148,11 @@ interface DraggerUploadProps {
   prefixIcon: any;
   suffixIcon: any;
   forceCapture: boolean;
+  captureResolution: CaptureResolution;
   minSize: number;
   maxSize: number;
   maxFiles: number;
+  fileNamePattern: string;
   uploadType: "single" | "multiple" | "directory";
   text: string;
   dragHintText?: string;
@@ -162,25 +163,27 @@ interface DraggerUploadProps {
 
 export const DraggerUpload = (props: DraggerUploadProps) => {
   const { dispatch, files, style, autoHeight, animationStyle } = props;
-  const [fileList, setFileList] = useState<UploadFile[]>(
-    files.map((f) => ({ ...f, status: "done" })) as UploadFile[]
-  );
+  // Track only files currently being uploaded (not yet in props.files)
+  const [uploadingFiles, setUploadingFiles] = useState<UploadFile[]>([]);
   const [showModal, setShowModal] = useState(false);
   const isMobile = checkIsMobile(window.innerWidth);
 
-  useEffect(() => {
-    if (files.length === 0 && fileList.length !== 0) {
-      setFileList([]);
-    }
-  }, [files]);
+  // Derive fileList from props.files (source of truth) + currently uploading files
+  const fileList = useMemo<UploadFile[]>(() => [
+    ...(files.map((f) => ({ ...f, status: "done" as const })) as UploadFile[]),
+    ...uploadingFiles,
+  ], [files, uploadingFiles]);
 
   const handleOnChange = (param: UploadChangeParam) => {
-    const uploadingFiles = param.fileList.filter((f) => f.status === "uploading");
-    if (uploadingFiles.length !== 0) {
-      setFileList(param.fileList);
+    const currentlyUploading = param.fileList.filter((f) => f.status === "uploading");
+    if (currentlyUploading.length !== 0) {
+      setUploadingFiles(currentlyUploading);
       return;
     }
 
+    // Clear uploading state when all uploads complete
+    setUploadingFiles([]);
+
     let maxFiles = props.maxFiles;
     if (props.uploadType === "single") {
       maxFiles = 1;
@@ -240,8 +243,6 @@ export const DraggerUpload = (props: DraggerUploadProps) => {
         props.onEvent("parse");
       });
     }
-
-    setFileList(uploadedFiles.slice(-maxFiles));
   };
 
   return (
@@ -254,21 +255,11 @@ export const DraggerUpload = (props: DraggerUploadProps) => {
         $auto={autoHeight}
         capture={props.forceCapture}
         openFileDialogOnClick={!(props.forceCapture && !isMobile)}
-        beforeUpload={(file) => {
-          if (!file.size || file.size <= 0) {
-            messageInstance.error(`${file.name} ` + trans("file.fileEmptyErrorMsg"));
-            return AntdUpload.LIST_IGNORE;
-          }
-
-          if (
-            (!!props.minSize && file.size < props.minSize) ||
-            (!!props.maxSize && file.size > props.maxSize)
-          ) {
-            messageInstance.error(`${file.name} ` + trans("file.fileSizeExceedErrorMsg"));
-            return AntdUpload.LIST_IGNORE;
-          }
-          return true;
-        }}
+        beforeUpload={(file) => validateFile(file, {
+          minSize: props.minSize,
+          maxSize: props.maxSize,
+          fileNamePattern: props.fileNamePattern,
+        })}
         onChange={handleOnChange}
       >
           <p className="ant-upload-drag-icon">
@@ -301,6 +292,7 @@ export const DraggerUpload = (props: DraggerUploadProps) => {
 
       <ImageCaptureModal
         showModal={showModal}
+        captureResolution={props.captureResolution as CaptureResolution}
         onModalClose={() => setShowModal(false)}
         onImageCapture={async (image) => {
           setShowModal(false);