@grafana/ui/dist/esm/components/DateTimePickers/TimeRangePicker/TimePickerFooter.mjs.map

Grafana Components Library

{"version":3,"file":"TimePickerFooter.mjs","sources":["../../../../../src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { isString } from 'lodash';\nimport { useCallback, useId, useState } from 'react';\nimport * as React from 'react';\n\nimport { getTimeZoneInfo, GrafanaTheme2, TimeZone } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Button } from '../../Button/Button';\nimport { Combobox } from '../../Combobox/Combobox';\nimport { Field } from '../../Forms/Field';\nimport { Tab } from '../../Tabs/Tab';\nimport { TabContent } from '../../Tabs/TabContent';\nimport { TabsBar } from '../../Tabs/TabsBar';\nimport { TimeZonePicker } from '../TimeZonePicker';\nimport { TimeZoneDescription } from '../TimeZonePicker/TimeZoneDescription';\nimport { TimeZoneOffset } from '../TimeZonePicker/TimeZoneOffset';\nimport { TimeZoneTitle } from '../TimeZonePicker/TimeZoneTitle';\nimport { getMonthOptions } from '../options';\n\ninterface Props {\n  timeZone?: TimeZone;\n  fiscalYearStartMonth?: number;\n  timestamp?: number;\n  onChangeTimeZone: (timeZone: TimeZone) => void;\n  onChangeFiscalYearStartMonth?: (month: number) => void;\n}\n\nexport const TimePickerFooter = (props: Props) => {\n  const {\n    timeZone,\n    fiscalYearStartMonth,\n    timestamp = Date.now(),\n    onChangeTimeZone,\n    onChangeFiscalYearStartMonth,\n  } = props;\n  const [isEditing, setEditing] = useState(false);\n  const [editMode, setEditMode] = useState('tz');\n\n  const timeSettingsId = useId();\n  const timeZoneSettingsId = useId();\n  const fiscalYearSettingsId = useId();\n\n  const onToggleChangeTimeSettings = useCallback(\n    (event?: React.MouseEvent) => {\n      if (event) {\n        event.stopPropagation();\n      }\n      setEditing(!isEditing);\n    },\n    [isEditing, setEditing]\n  );\n\n  const style = useStyles2(getStyle);\n\n  if (!isString(timeZone)) {\n    return null;\n  }\n\n  const info = getTimeZoneInfo(timeZone, timestamp);\n\n  if (!info) {\n    return null;\n  }\n\n  return (\n    <div>\n      <section\n        aria-label={t('time-picker.footer.time-zone-selection', 'Time zone selection')}\n        className={style.container}\n      >\n        <div className={style.timeZoneContainer}>\n          <div className={style.timeZone}>\n            <TimeZoneTitle title={info.name} />\n            <div className={style.spacer} />\n            <TimeZoneDescription info={info} />\n          </div>\n          <TimeZoneOffset timeZone={timeZone} timestamp={timestamp} />\n        </div>\n        <div className={style.spacer} />\n        <Button\n          data-testid={selectors.components.TimeZonePicker.changeTimeSettingsButton}\n          variant=\"secondary\"\n          onClick={onToggleChangeTimeSettings}\n          size=\"sm\"\n          aria-expanded={isEditing}\n          aria-controls={timeSettingsId}\n          icon={isEditing ? 'angle-up' : 'angle-down'}\n        >\n          <Trans i18nKey=\"time-picker.footer.change-settings-button\">Change time settings</Trans>\n        </Button>\n      </section>\n      {isEditing ? (\n        <div className={style.editContainer} id={timeSettingsId}>\n          <TabsBar>\n            <Tab\n              label={t('time-picker.footer.time-zone-option', 'Time zone')}\n              active={editMode === 'tz'}\n              onChangeTab={() => {\n                setEditMode('tz');\n              }}\n              aria-controls={timeZoneSettingsId}\n            />\n            <Tab\n              label={t('time-picker.footer.fiscal-year-option', 'Fiscal year')}\n              active={editMode === 'fy'}\n              onChangeTab={() => {\n                setEditMode('fy');\n              }}\n              aria-controls={fiscalYearSettingsId}\n            />\n          </TabsBar>\n          <TabContent className={style.noBackground}>\n            {editMode === 'tz' ? (\n              <section\n                role=\"tabpanel\"\n                data-testid={selectors.components.TimeZonePicker.containerV2}\n                id={timeZoneSettingsId}\n                className={cx(style.timeZoneContainer, style.timeSettingContainer)}\n              >\n                <TimeZonePicker\n                  includeInternal={true}\n                  onChange={(timeZone) => {\n                    onToggleChangeTimeSettings();\n\n                    if (isString(timeZone)) {\n                      onChangeTimeZone(timeZone);\n                    }\n                  }}\n                  onBlur={onToggleChangeTimeSettings}\n                  menuShouldPortal={false}\n                />\n              </section>\n            ) : (\n              <section\n                role=\"tabpanel\"\n                data-testid={selectors.components.TimeZonePicker.containerV2}\n                id={fiscalYearSettingsId}\n                className={cx(style.timeZoneContainer, style.timeSettingContainer)}\n              >\n                <Field\n                  className={style.fiscalYearField}\n                  label={t('time-picker.footer.fiscal-year-start', 'Fiscal year start month')}\n                >\n                  <Combobox\n                    value={fiscalYearStartMonth ?? null}\n                    options={getMonthOptions()}\n                    onChange={(value) => {\n                      if (onChangeFiscalYearStartMonth) {\n                        onChangeFiscalYearStartMonth(value?.value ?? 0);\n                      }\n                    }}\n                  />\n                </Field>\n              </section>\n            )}\n          </TabContent>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nconst getStyle = (theme: GrafanaTheme2) => ({\n  container: css({\n    borderTop: `1px solid ${theme.colors.border.weak}`,\n    padding: theme.spacing(1.5),\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n  }),\n  editContainer: css({\n    borderTop: `1px solid ${theme.colors.border.weak}`,\n    padding: theme.spacing(1.5),\n    paddingTop: 0,\n    justifyContent: 'space-between',\n    alignItems: 'center',\n  }),\n  spacer: css({\n    marginLeft: '7px',\n  }),\n  timeSettingContainer: css({\n    paddingTop: theme.spacing(1),\n  }),\n  noBackground: css({\n    background: 'inherit',\n  }),\n  fiscalYearField: css({\n    marginBottom: 0,\n  }),\n  timeZoneContainer: css({\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    flexGrow: 1,\n  }),\n  timeZone: css({\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'baseline',\n    flexGrow: 1,\n  }),\n});\n"],"names":["timeZone"],"mappings":"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"}