Merge pull request lowcoder-org#1144 from MenamAfzal/add/timeZone

[WIP] Add/time zone

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/dateComp/dateComp.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 }))
 );
@@ -31,6 +44,7 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
   placeholder?: string | [string, string];
   onChange: (start?: dayjs.Dayjs | null, end?: dayjs.Dayjs | null) => void;
   onPanelChange: (value: any, mode: [string, string]) => void;
+  onClickDateRangeTimeZone:(value:any)=>void
 }
 
 export const DateRangeUIView = (props: DateRangeUIViewProps) => {
@@ -44,7 +58,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 +76,18 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
       hourStep={props.hourStep as any}
       minuteStep={props.minuteStep as any}
       secondStep={props.secondStep as any}
+      renderExtraFooter={() => (
+        props.timeZone === "UserChoice" && (
+          <StyledDiv>
+            <StyledAntdSelect 
+              options={timeZoneOptions.filter(option => option.value !== 'UserChoice')}
+              placeholder="Select Time Zone" 
+              defaultValue={'Etc/UTC'}
+              onChange={props?.onClickDateRangeTimeZone}
+              />
+          </StyledDiv>
+        )
+      )}
     />
   );
 };

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

@@ -11,18 +11,34 @@ 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'];
   onChange: DatePickerProps<Dayjs>['onChange'];
   onPanelChange: () => void;
+  onClickDateTimeZone:(value:any)=>void;
+  
 }
 
 const DateMobileUIView = React.lazy(() =>
@@ -48,6 +64,18 @@ export const DateUIView = (props: DataUIViewProps) => {
       picker={"date"}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       placeholder={placeholder}
+      renderExtraFooter={()=>(
+        props.timeZone === "UserChoice" && (
+          <StyledDiv>
+            <StyledAntdSelect 
+              options={timeZoneOptions.filter(option => option.value !== 'UserChoice')}
+              placeholder="Select Time Zone" 
+              defaultValue={'Etc/UTC'}
+              onChange={props.onClickDateTimeZone} 
+            />
+          </StyledDiv>
+        )
+      )}
     />
   );
 };