@grafana/ui/dist/cjs/components/DateTimePickers/TimeRangePicker/TimePickerFooter.cjs.map

Grafana Components Library

{"version":3,"file":"TimePickerFooter.cjs","sources":["../../../../../src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useCallback, useId, useState } from 'react';\nimport * as React from 'react';\n\nimport { getTimeZoneInfo, type GrafanaTheme2, type 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 { getTimeZoneTitle, 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  const fiscalYearStartMonthId = 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 (typeof timeZone !== 'string') {\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={getTimeZoneTitle(info)} />\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                    if (typeof timeZone === 'string') {\n                      onChangeTimeZone(timeZone);\n                    }\n                  }}\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                    id={fiscalYearStartMonthId}\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":["useState","useId","useCallback","useStyles2","getTimeZoneInfo","jsxs","t","jsx","TimeZoneTitle","getTimeZoneTitle","TimeZoneDescription","TimeZoneOffset","Button","selectors","Trans","TabsBar","Tab","TabContent","cx","TimeZonePicker","timeZone","Field","Combobox","getMonthOptions","css"],"mappings":"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"}