timeZone values added in modals

Author: MenamAfzal

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

@@ -11,6 +11,8 @@ import { default as DatePicker } from "antd/es/date-picker";
 import { hasIcon } from "comps/utils";
 import { omit } from "lodash";
 import { DateParser } from "@lowcoder-ee/util/dateTimeUtils";
+import { default as AntdSelect } from "antd/es/select";
+import { timeZoneOptions } from "./timeZone";
 
 const { RangePicker } = DatePicker;
 
@@ -21,6 +23,17 @@ const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType}>`
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
+const StyledAntdSelect = styled(AntdSelect)`
+  width: 400px; 
+  margin: 10px 0px;
+  .ant-select-selector {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+`;
+const StyledDiv = styled.div`
+  text-align: center;
+`;
 const DateRangeMobileUIView = React.lazy(() =>
   import("./dateMobileUIView").then((m) => ({ default: m.DateRangeMobileUIView }))
 );
@@ -44,7 +57,6 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
     // 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
@@ -63,6 +75,15 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
       hourStep={props.hourStep as any}
       minuteStep={props.minuteStep as any}
       secondStep={props.secondStep as any}
+      renderExtraFooter={() => (
+        <StyledDiv>
+          <StyledAntdSelect
+            placeholder="Select Time Zone"
+            options={timeZoneOptions}
+            onChange={()=>{console.log("handleTimeZoneChange")}}
+          />
+        </StyledDiv>
+      )}
     />
   );
 };

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

@@ -11,13 +11,27 @@ import { default as DatePicker } from "antd/es/date-picker";
 import type { DatePickerProps } from "antd/es/date-picker";
 import type { Dayjs } from 'dayjs';
 import { DateParser } from "@lowcoder-ee/util/dateTimeUtils";
+import { timeZoneOptions } from "./timeZone";
+import { default as AntdSelect } from "antd/es/select";
 
 const DatePickerStyled = styled(DatePicker<Dayjs>)<{ $style: DateTimeStyleType }>`
   width: 100%;
   box-shadow: ${props=>`${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
+const StyledDiv = styled.div`
+  width: 100%;
+  margin: 10px 0px; 
+`;
+
+const StyledAntdSelect = styled(AntdSelect)`
+  width: 100%;
+  .ant-select-selector {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+`;
 
 export interface DataUIViewProps extends DateCompViewProps {
   value?: DatePickerProps<Dayjs>['value'];
@@ -48,6 +62,15 @@ export const DateUIView = (props: DataUIViewProps) => {
       picker={"date"}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       placeholder={placeholder}
+      renderExtraFooter={()=>(
+        <StyledDiv>
+          <StyledAntdSelect 
+            options={timeZoneOptions} 
+            placeholder="Select a time zone" 
+            onChange={()=>{console.log("DatePickerStyled")}} 
+          />
+          </StyledDiv>
+      )}
     />
   );
 };

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

@@ -10,6 +10,8 @@ import { EditorContext } from "../../editorState";
 import dayjs from "dayjs";
 import { hasIcon } from "comps/utils";
 import { omit } from "lodash";
+import { timeZoneOptions } from "./timeZone";
+import { default as AntdSelect } from "antd/es/select";
 
 const { RangePicker } = TimePicker;
 
@@ -18,6 +20,15 @@ const RangePickerStyled = styled((props: any) => <RangePicker {...props} />)<{ $
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
+const StyledAntdSelect = styled(AntdSelect)`
+  width: 100%; 
+  margin: 10px 0px;
+  .ant-select-selector {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+`;
+
 const TimeRangeMobileUIView = React.lazy(() =>
   import("./timeMobileUIView").then((m) => ({ default: m.TimeRangeMobileUIView }))
 );
@@ -54,6 +65,13 @@ export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
       placeholder={placeholders}
+      renderExtraFooter={() => (
+        <StyledAntdSelect
+          placeholder="Select Time Zone"
+          options={timeZoneOptions}
+          onChange={()=>{console.log("handleTimeZoneChange")}}
+          />
+        )}
     />
   );
 };

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

@@ -8,6 +8,8 @@ import React, { useContext } from "react";
 import type { TimeCompViewProps } from "./timeComp";
 import { EditorContext } from "../../editorState";
 import dayjs from "dayjs"
+import { default as AntdSelect } from "antd/es/select";
+import { timeZoneOptions } from "./timeZone";
 
 const TimePickerStyled = styled(TimePicker)<{ $style: DateTimeStyleType }>`
   width: 100%;
@@ -17,6 +19,15 @@ const TimePickerStyled = styled(TimePicker)<{ $style: DateTimeStyleType }>`
 const TimeMobileUIView = React.lazy(() =>
   import("./timeMobileUIView").then((m) => ({ default: m.TimeMobileUIView }))
 );
+ 
+const StyledAntdSelect = styled(AntdSelect)`
+  width: 100%;
+  margin: 10px 0; 
+  .ant-select-selector {
+    font-size: 14px; 
+    padding: 8px; 
+  }
+`;
 
 export interface TimeUIViewProps extends TimeCompViewProps {
   value: dayjs.Dayjs | null;
@@ -36,6 +47,13 @@ export const TimeUIView = (props: TimeUIViewProps) => {
       hideDisabledOptions
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       placeholder={placeholder}
-    />
+      renderExtraFooter={()=>(
+        <StyledAntdSelect
+          placeholder="Select Time Zone"
+          options={timeZoneOptions}
+          onChange={()=>{console.log("handleTimeZoneChange")}}
+          />
+      )}
+    />   
   );
 };