Added utcOffset prop to EuiSuperDatePicker

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `sortBy` and `sortShift` props to `euiPaletteColorBlind()` for sorting along the color wheel ([#3387](https://github.com/elastic/eui/pull/3387))
+- Added `utcOffset` prop to `EuiSuperDatePicker` ([#3436](https://github.com/elastic/eui/pull/3436))
 - Added `partition` key to `EuiChartThemeType` for Partition chart support ([#3387](https://github.com/elastic/eui/pull/3387))
 - Updated `EuiImage`'s `caption` prop type from `string` to `ReactNode` ([#3387](https://github.com/elastic/eui/pull/3387))
 

src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx

@@ -36,6 +36,7 @@ export interface EuiAbsoluteTabProps {
   onChange: EuiDatePopoverContentProps['onChange'];
   roundUp: boolean;
   position: 'start' | 'end';
+  utcOffset?: number;
 }
 
 interface EuiAbsoluteTabState {
@@ -106,37 +107,38 @@ export class EuiAbsoluteTab extends Component<
   };
 
   render() {
+    const { dateFormat, timeFormat, locale, utcOffset } = this.props;
+    const {
+      valueAsMoment,
+      isTextInvalid,
+      textInputValue,
+      sentenceCasedPosition,
+    } = this.state;
+
     return (
       <div>
         <EuiDatePicker
           inline
           showTimeSelect
           shadow={false}
-          selected={this.state.valueAsMoment}
+          selected={valueAsMoment}
           onChange={this.handleChange}
-          dateFormat={this.props.dateFormat}
-          timeFormat={this.props.timeFormat}
-          locale={this.props.locale}
+          dateFormat={dateFormat}
+          timeFormat={timeFormat}
+          locale={locale}
+          utcOffset={utcOffset}
         />
         <EuiFormRow
           className="euiSuperDatePicker__absoluteDateFormRow"
-          isInvalid={this.state.isTextInvalid}
-          error={
-            this.state.isTextInvalid
-              ? `Expected format ${this.props.dateFormat}`
-              : undefined
-          }>
+          isInvalid={isTextInvalid}
+          error={isTextInvalid ? `Expected format ${dateFormat}` : undefined}>
           <EuiFieldText
             compressed
-            isInvalid={this.state.isTextInvalid}
-            value={this.state.textInputValue}
+            isInvalid={isTextInvalid}
+            value={textInputValue}
             onChange={this.handleTextChange}
             data-test-subj={'superDatePickerAbsoluteDateInput'}
-            prepend={
-              <EuiFormLabel>
-                {this.state.sentenceCasedPosition} date
-              </EuiFormLabel>
-            }
+            prepend={<EuiFormLabel>{sentenceCasedPosition} date</EuiFormLabel>}
           />
         </EuiFormRow>
       </div>

src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx

@@ -49,6 +49,7 @@ export interface EuiDatePopoverButtonProps {
   roundUp?: boolean;
   timeFormat: string;
   value: string;
+  utcOffset?: number;
 }
 
 export const EuiDatePopoverButton: FunctionComponent<
@@ -65,6 +66,7 @@ export const EuiDatePopoverButton: FunctionComponent<
     onChange,
     locale,
     dateFormat,
+    utcOffset,
     timeFormat,
     isOpen,
     onPopoverToggle,
@@ -120,6 +122,7 @@ export const EuiDatePopoverButton: FunctionComponent<
         timeFormat={timeFormat}
         locale={locale}
         position={position}
+        utcOffset={utcOffset}
       />
     </EuiPopover>
   );

src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx

@@ -45,6 +45,7 @@ export interface EuiDatePopoverContentProps {
   timeFormat: string;
   locale?: LocaleSpecifier;
   position: 'start' | 'end';
+  utcOffset?: number;
 }
 
 export const EuiDatePopoverContent: FunctionComponent<
@@ -57,6 +58,7 @@ export const EuiDatePopoverContent: FunctionComponent<
   timeFormat,
   locale,
   position,
+  utcOffset,
 }) => {
   const onTabClick: EuiTabbedContentProps['onTabClick'] = selectedTab => {
     switch (selectedTab.id) {
@@ -84,6 +86,7 @@ export const EuiDatePopoverContent: FunctionComponent<
           onChange={onChange}
           roundUp={roundUp}
           position={position}
+          utcOffset={utcOffset}
         />
       ),
       'data-test-subj': 'superDatePickerAbsoluteTab',

src/components/date_picker/super_date_picker/super_date_picker.tsx

@@ -119,6 +119,7 @@ export type EuiSuperDatePickerProps = CommonProps & {
    * Specifies the formatted used when displaying times
    */
   timeFormat: string;
+  utcOffset?: number;
 };
 
 interface EuiSuperDatePickerState {
@@ -359,6 +360,7 @@ export class EuiSuperDatePicker extends Component<
       locale,
       refreshInterval,
       timeFormat,
+      utcOffset,
     } = this.props;
 
     if (isAutoRefreshOnly) {
@@ -425,6 +427,7 @@ export class EuiSuperDatePicker extends Component<
                 onChange={this.setStart}
                 value={start}
                 dateFormat={dateFormat}
+                utcOffset={utcOffset}
                 timeFormat={timeFormat}
                 locale={locale || contextLocale}
                 isOpen={this.state.isStartDatePopoverOpen}
@@ -441,6 +444,7 @@ export class EuiSuperDatePicker extends Component<
                 onChange={this.setEnd}
                 value={end}
                 dateFormat={dateFormat}
+                utcOffset={utcOffset}
                 timeFormat={timeFormat}
                 locale={locale || contextLocale}
                 roundUp