Merge branch 'dev' into doc/existing_components

Author: FalkWolsky

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/gridItemComp.tsx

@@ -97,6 +97,7 @@ const CachedPropertyView = React.memo((props: {
   useEffect(() => {
     setSearchText("");
   }, [props.name]);
+
   return useMemo(() => {
     return (
       <>

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/tableComp/column/columnTypeComp.tsx

@@ -1,5 +1,6 @@
 import { CellProps } from "components/table/EditableCell";
 import { DateTimeComp } from "comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp";
+import { TimeComp } from "./columnTypeComps/columnTimeComp";
 import { ButtonComp } from "comps/comps/tableComp/column/simpleColumnTypeComps";
 import { withType } from "comps/generators";
 import { trans } from "i18n";
@@ -67,6 +68,11 @@ const actionOptions = [
     label: trans("table.image"),
     value: "image",
   },
+  {
+    label: trans("table.time"),
+    value: "time",
+  },
+
   {
     label: trans("table.date"),
     value: "date",
@@ -116,6 +122,7 @@ export const ColumnTypeCompMap = {
   rating: RatingComp,
   progress: ProgressComp,
   date: DateComp,
+  time: TimeComp,
 };
 
 type ColumnTypeMapType = typeof ColumnTypeCompMap;

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

@@ -0,0 +1,166 @@
+import { default as TimePicker } from "antd/es/time-picker";
+import {
+  ColumnTypeCompBuilder,
+  ColumnTypeViewFn,
+} from "comps/comps/tableComp/column/columnTypeCompBuilder";
+import { ColumnValueTooltip } from "comps/comps/tableComp/column/simpleColumnTypeComps";
+import { StringControl } from "comps/controls/codeControl";
+import { withDefault } from "comps/generators";
+import { formatPropertyView } from "comps/utils/propertyUtils";
+import { trans } from "i18n";
+import dayjs from "dayjs";
+import { useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import { TIME_FORMAT } from "util/dateTimeUtils";
+import { hasIcon } from "comps/utils";
+import { IconControl } from "comps/controls/iconControl";
+
+
+const TimePickerStyled = styled(TimePicker)<{ $open: boolean }>`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  padding: 0;
+  padding-left: 11px;
+  .ant-picker-input {
+    height: 100%;
+  }
+  input {
+    padding-right: 18px;
+    cursor: pointer;
+  }
+  &.ant-picker-focused .ant-picker-suffix svg g {
+    stroke: ${(props) => props.$open && "#315EFB"};
+  }
+  .ant-picker-suffix {
+    height: calc(100% - 1px);
+    position: absolute;
+    right: 0;
+    top: 0.5px;
+    display: flex;
+    align-items: center;
+    padding: 0 3px;
+  }
+`;
+
+const Wrapper = styled.div`
+  background: transparent !important;
+`;
+
+export function formatTime(time: string, format: string) {
+  const parsedTime = dayjs(time, TIME_FORMAT);
+  return parsedTime.isValid() ? parsedTime.format(format) : "";
+}
+
+const childrenMap = {
+  text: StringControl,
+  prefixIcon: IconControl,
+  suffixIcon: IconControl,
+  format: withDefault(StringControl, TIME_FORMAT),
+  inputFormat: withDefault(StringControl, TIME_FORMAT),
+};
+
+let inputFormat = TIME_FORMAT;
+
+const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
+
+type TimeEditProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onChangeEnd: () => void;
+  inputFormat: string;
+};
+
+export const TimeEdit = (props: TimeEditProps) => {
+  const pickerRef = useRef<any>();
+  const [panelOpen, setPanelOpen] = useState(true);
+  let value = dayjs(props.value, TIME_FORMAT);
+  if (!value.isValid()) {
+    value = dayjs("00:00:00", TIME_FORMAT);
+  }
+
+  const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(value);
+
+  useEffect(() => {
+    const value = props.value ? dayjs(props.value, TIME_FORMAT) : null;
+    setTempValue(value);
+  }, [props.value]);
+
+  return (
+    <Wrapper
+      onKeyDown={(e) => {
+        if (e.key === "Enter" && !panelOpen) {
+          props.onChangeEnd();
+        }
+      }}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+    >
+      <TimePickerStyled
+        ref={pickerRef}
+        $open={panelOpen}
+        format={props.inputFormat}
+        allowClear={true}
+        autoFocus
+        value={tempValue}
+        defaultOpen={true}
+        onOpenChange={(open) => setPanelOpen(open)}
+        onChange={(value, timeString) => {
+          props.onChange(timeString as string);
+        }}
+        onBlur={() => props.onChangeEnd()}
+      />
+    </Wrapper>
+  );
+};
+
+export const TimeComp = (function () {
+  return new ColumnTypeCompBuilder(
+    childrenMap,
+    (props, dispatch) => {
+      inputFormat = props.inputFormat;
+      const value = props.changeValue ?? getBaseValue(props, dispatch);
+      return(
+        <>
+          {hasIcon(props.prefixIcon) && (
+            <span>{props.prefixIcon}</span>
+          )}
+          <span>{value}</span>
+          {hasIcon(props.suffixIcon) && (
+            <span>{props.suffixIcon}</span>
+          )}
+        </>
+      );
+      
+    },
+    (nodeValue) => formatTime(nodeValue.text.value, nodeValue.format.value),
+    getBaseValue
+  )
+    .setEditViewFn((props) => (
+      <TimeEdit
+        value={props.value}
+        onChange={props.onChange}
+        onChangeEnd={props.onChangeEnd}
+        inputFormat={inputFormat}
+      />
+    ))
+    .setPropertyViewFn((children) => (
+      <>
+        {children.text.propertyView({
+          label: trans("table.columnValue"),
+          tooltip: ColumnValueTooltip,
+        })}
+         {children.prefixIcon.propertyView({
+            label: trans("button.prefixIcon"),
+          })}
+          {children.suffixIcon.propertyView({
+            label: trans("button.suffixIcon"),
+          })}
+        {formatPropertyView({ children, placeholder: TIME_FORMAT })}
+      </>
+    ))
+    .build();
+})();

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/keyValueControl.tsx

@@ -69,7 +69,7 @@ export function keyValueControl<T extends OptionsType>(
   if(controlType === "variable") {
     childrenMap = {
       key: SimpleVariableHeaderComp(true) as any,
-      value: SimpleVariableHeaderComp() as any,
+      value: StringControl,
       type: dropdownControl(types, types[0]?.value),
     };
   }