@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 { monthOptions } 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={monthOptions}\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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"}