Merge pull request #346 from melfore/345-datetimepicker-add-timezone-…

…in-context

[DateTimePicker] Added Timezone in context

src/components/DateTimePicker/index.stories.tsx

@@ -42,6 +42,3 @@ MobileView.args = { ...SecondsView.args, mobileView: true };
 
 export const FormatAmPm = Template.bind({});
 FormatAmPm.args = { ...Primary.args, ampm: true };
-
-export const TimeZone = Template.bind({});
-TimeZone.args = { ...Primary.args, timeZone: "UTC+8" };

src/components/DateTimePicker/index.tsx

@@ -3,13 +3,13 @@ import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
 import { DateTimePicker as MuiDateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 
+import { useMosaicContext } from "../../hooks/useMosaicContext";
 import { DateTimePickerType, viewType } from "../../types/DateTimePicker";
 
 export const DATA_CY_DEFAULT = "timePicker";
 
 const DateTimePicker: FC<DateTimePickerType> = ({
   dataCy = DATA_CY_DEFAULT,
-  timeZone,
   label = "Date Time",
   value,
   onAccept,
@@ -31,6 +31,8 @@ const DateTimePicker: FC<DateTimePickerType> = ({
     }
     return ["year", "month", "day", "hours", "minutes"];
   }, [timeView]);
+
+  const { timeZone } = useMosaicContext();
   return (
     <LocalizationProvider dateAdapter={AdapterLuxon}>
       <MuiDateTimePicker

src/contexts/Mosaic.tsx

@@ -7,11 +7,13 @@ export type ILocalizeMethod = (key: string) => string;
 interface IMosaicContextOptions {
   breakpoints?: IUseViewStateOptions;
   localize?: ILocalizeMethod;
+  timeZone?: string;
 }
 
 export interface IMosaicContext {
   localize?: ILocalizeMethod;
   view: IViewState;
+  timeZone?: string;
 }
 
 export const MOSAIC_CONTEXT_DISPLAY_NAME = "MosaicContext";
@@ -24,7 +26,8 @@ export const MosaicContextProvider: FC<PropsWithChildren<IMosaicContextOptions>>
   children,
   localize,
   breakpoints,
+  timeZone,
 }) => {
   const view = useViewState(breakpoints);
-  return <MosaicContext.Provider value={{ localize, view }}>{children}</MosaicContext.Provider>;
+  return <MosaicContext.Provider value={{ localize, view, timeZone }}>{children}</MosaicContext.Provider>;
 };

src/types/DateTimePicker.ts

@@ -1,7 +1,6 @@
 import { IBase } from "./Base";
 
 export type DateTimePickerType = IBase & {
-  timeZone?: string;
   label: string;
   value?: string;
   onAccept?: (value: string | null) => void;