UNPKG

@grafana/ui

Version:
1 lines 8.96 kB
{"version":3,"file":"TimeZoneOption.mjs","sources":["../../../../../src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { isString } from 'lodash';\nimport { PropsWithChildren, RefCallback } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, SelectableValue, getTimeZoneInfo } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Icon } from '../../Icon/Icon';\n\nimport { TimeZoneDescription } from './TimeZoneDescription';\nimport { TimeZoneOffset } from './TimeZoneOffset';\nimport { TimeZoneTitle } from './TimeZoneTitle';\n\ninterface Props {\n isFocused: boolean;\n isSelected: boolean;\n innerProps: JSX.IntrinsicElements['div'];\n innerRef: RefCallback<HTMLDivElement>;\n data: SelectableZone;\n}\n\nconst offsetClassName = 'tz-utc-offset';\n\nexport interface SelectableZone extends SelectableValue<string> {\n searchIndex: string;\n}\n\nexport const WideTimeZoneOption = (props: PropsWithChildren<Props>) => {\n const { children, innerProps, innerRef, data, isSelected, isFocused } = props;\n const styles = useStyles2(getStyles);\n const timestamp = Date.now();\n const containerStyles = cx(styles.container, isFocused && styles.containerFocused);\n\n if (!isString(data.value)) {\n return null;\n }\n\n const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);\n\n return (\n <div className={containerStyles} {...innerProps} ref={innerRef} data-testid={selectors.components.Select.option}>\n <div className={cx(styles.leftColumn, styles.row)}>\n <div className={cx(styles.leftColumn, styles.wideRow)}>\n <TimeZoneTitle title={children} />\n <div className={styles.spacer} />\n <TimeZoneDescription info={timeZoneInfo} />\n </div>\n <div className={styles.rightColumn}>\n <TimeZoneOffset\n /* Use the timeZoneInfo to pass the correct timeZone name,\n as 'Default' has value '' which defaults to browser timezone */\n timeZone={timeZoneInfo?.ianaName || data.value}\n timestamp={timestamp}\n className={offsetClassName}\n />\n {isSelected && (\n <span>\n <Icon name=\"check\" />\n </span>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport const CompactTimeZoneOption = (props: React.PropsWithChildren<Props>) => {\n const { children, innerProps, innerRef, data, isSelected, isFocused } = props;\n const styles = useStyles2(getStyles);\n const timestamp = Date.now();\n const containerStyles = cx(styles.container, isFocused && styles.containerFocused);\n\n if (!isString(data.value)) {\n return null;\n }\n\n const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);\n\n return (\n <div className={containerStyles} {...innerProps} ref={innerRef} data-testid={selectors.components.Select.option}>\n <div className={styles.body}>\n <div className={styles.row}>\n <div className={styles.leftColumn}>\n <TimeZoneTitle title={children} />\n </div>\n <div className={styles.rightColumn}>\n {isSelected && (\n <span>\n <Icon name=\"check\" />\n </span>\n )}\n </div>\n </div>\n <div className={styles.row}>\n <div className={styles.leftColumn}>\n <TimeZoneDescription info={timeZoneInfo} />\n </div>\n <div className={styles.rightColumn}>\n <TimeZoneOffset\n timestamp={timestamp}\n /* Use the timeZoneInfo to pass the correct timeZone name,\n as 'Default' has value '' which defaults to browser timezone */\n timeZone={timeZoneInfo?.ianaName || data.value}\n className={offsetClassName}\n />\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n container: css({\n display: 'flex',\n alignItems: 'center',\n flexDirection: 'row',\n flexShrink: 0,\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n padding: '6px 8px 4px',\n\n '&:hover': {\n background: theme.colors.action.hover,\n },\n }),\n containerFocused: css({\n background: theme.colors.action.hover,\n }),\n body: css({\n display: 'flex',\n fontWeight: theme.typography.fontWeightMedium,\n flexDirection: 'column',\n flexGrow: 1,\n }),\n row: css({\n display: 'flex',\n flexDirection: 'row',\n }),\n leftColumn: css({\n flexGrow: 1,\n textOverflow: 'ellipsis',\n }),\n rightColumn: css({\n justifyContent: 'flex-end',\n alignItems: 'center',\n }),\n wideRow: css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'baseline',\n }),\n spacer: css({\n marginLeft: '6px',\n }),\n});\n"],"names":[],"mappings":"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"}