grafana/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeOption.tsx

55 lines
1.4 KiB
TypeScript
Raw Normal View History

Dashboard: new updated time picker (#20931) * Dashboard: started to implement new time picker. * TimePicker: working in full screen (except calendar). * TimePicker: first draft on narrow screen variant. * TimePicker: small adjustments to the narrow design. * TimePicker: enabled range selection and started to style calendar. * TimePicker: applied some more styling. * Calendar: added so the calendar range selection is styled properly. * Calendar: added styling for timepicker calendar in narrow screen. * TimePicker: made it possible to select range from calendar. * TimePicker: made the calendar have previous selected value. * TimePicker: moved calendar to be able to update form state. * TimePicker: calendar is now displayed onFocus or onClick. * TimePicker: calendar will be closed if click outside input. * Calendar: fixed the styling of the calendar in narrow screen. * Calendar: made it work properly with narrow screen. * TimePicker: connected recent to absolute time range. * TimePicker: changed the label on recent ranges. * TimePicker: cleaned up the range list and options. * TimePicker: some more cleaning up. * TimePicker: cleaned up the calendar a bit. * TimePicker: some more refactorings. * TimePicker: refactorings. * TimePicker: styled modal properly. * TimePicker: empty recent list. * TimePicker: width when calendar in full screen. * TimePicker: will validate input value. * TimePicker: removed unused code. * TimePicker: positioning with emotion instead of sass. * Calendar: Made sure we send the dates in the correct order to the calendar. * TimePicker: fixed theme. * TimePicker: fixed positioning of the content. * TimePicker: positioning of narrow. * TimePicker: added some simple tets. * TimePicker: fixed issue with invalid and added error message. * TimePicker: added history. * TimePicker: cleaned up snapshot data. * TimePicker: fixed so we keep the quick values in the input. * TimePicker: fixed the missing styling on UTC. * TimePicker: added missing caret icon. * TimePicker: fixed formatting on recent time ranges. * TimePicker: added missing -. * TimePicker: refactorings after feedback. * TimePicker: renamed reserved prop name. * TimePicker: added missing onChange call. * TimePicker: removed alternative return type. * TimePicker: fixed the sorting order on the recent list. * TimePicker: added useCallback for the onEvent functions. * TimePicker: moving away from default export. * TimePicker: used the isMathString instead of private function. * TimePicker: minor refactoring simplify the code. * TimePicker: Added empty container that will expand when less then 4 recent searches. * TimePicker: changed the top to be absolute relative to the container. * TimePicker: updated snapshots for failing tests. * Fixed shadow * Move it down a bit * added some more tests. * Fixed so we change the anchor point of the time picker in really small screens. * removed memo. * fixed snapshot. * Make sure that we always use the correct timeZone when formatting output. * Fixed form background. * Some minor fixes after demo. * Making sure that empty info box is centered. * updated snapshots for timepicker after css changes. * fixed so we don't overflow when input validation error. * adjusted final things on the time picker. Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2019-12-20 22:31:58 +08:00
import React, { memo } from 'react';
import { css } from 'emotion';
import { GrafanaTheme, TimeOption } from '@grafana/data';
import { useTheme, stylesFactory, selectThemeVariant } from '../../../themes';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const background = selectThemeVariant(
{
light: theme.palette.gray7,
dark: theme.palette.dark3,
Dashboard: new updated time picker (#20931) * Dashboard: started to implement new time picker. * TimePicker: working in full screen (except calendar). * TimePicker: first draft on narrow screen variant. * TimePicker: small adjustments to the narrow design. * TimePicker: enabled range selection and started to style calendar. * TimePicker: applied some more styling. * Calendar: added so the calendar range selection is styled properly. * Calendar: added styling for timepicker calendar in narrow screen. * TimePicker: made it possible to select range from calendar. * TimePicker: made the calendar have previous selected value. * TimePicker: moved calendar to be able to update form state. * TimePicker: calendar is now displayed onFocus or onClick. * TimePicker: calendar will be closed if click outside input. * Calendar: fixed the styling of the calendar in narrow screen. * Calendar: made it work properly with narrow screen. * TimePicker: connected recent to absolute time range. * TimePicker: changed the label on recent ranges. * TimePicker: cleaned up the range list and options. * TimePicker: some more cleaning up. * TimePicker: cleaned up the calendar a bit. * TimePicker: some more refactorings. * TimePicker: refactorings. * TimePicker: styled modal properly. * TimePicker: empty recent list. * TimePicker: width when calendar in full screen. * TimePicker: will validate input value. * TimePicker: removed unused code. * TimePicker: positioning with emotion instead of sass. * Calendar: Made sure we send the dates in the correct order to the calendar. * TimePicker: fixed theme. * TimePicker: fixed positioning of the content. * TimePicker: positioning of narrow. * TimePicker: added some simple tets. * TimePicker: fixed issue with invalid and added error message. * TimePicker: added history. * TimePicker: cleaned up snapshot data. * TimePicker: fixed so we keep the quick values in the input. * TimePicker: fixed the missing styling on UTC. * TimePicker: added missing caret icon. * TimePicker: fixed formatting on recent time ranges. * TimePicker: added missing -. * TimePicker: refactorings after feedback. * TimePicker: renamed reserved prop name. * TimePicker: added missing onChange call. * TimePicker: removed alternative return type. * TimePicker: fixed the sorting order on the recent list. * TimePicker: added useCallback for the onEvent functions. * TimePicker: moving away from default export. * TimePicker: used the isMathString instead of private function. * TimePicker: minor refactoring simplify the code. * TimePicker: Added empty container that will expand when less then 4 recent searches. * TimePicker: changed the top to be absolute relative to the container. * TimePicker: updated snapshots for failing tests. * Fixed shadow * Move it down a bit * added some more tests. * Fixed so we change the anchor point of the time picker in really small screens. * removed memo. * fixed snapshot. * Make sure that we always use the correct timeZone when formatting output. * Fixed form background. * Some minor fixes after demo. * Making sure that empty info box is centered. * updated snapshots for timepicker after css changes. * fixed so we don't overflow when input validation error. * adjusted final things on the time picker. Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2019-12-20 22:31:58 +08:00
},
theme.type
);
return {
container: css`
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 9px 7px 9px;
border-left: 2px solid rgba(255, 255, 255, 0);
&:hover {
background: ${background};
border-image: linear-gradient(#f05a28 30%, #fbca0a 99%);
border-image-slice: 1;
border-style: solid;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left-width: 2px;
cursor: pointer;
}
`,
};
});
interface Props {
value: TimeOption;
selected?: boolean;
onSelect: (option: TimeOption) => void;
}
export const TimeRangeOption = memo<Props>(({ value, onSelect, selected = false }) => {
const theme = useTheme();
const styles = getStyles(theme);
return (
<div className={styles.container} onClick={() => onSelect(value)} tabIndex={-1}>
<span>{value.display}</span>
{selected ? <i className="fa fa-check" /> : null}
</div>
);
});