IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

TimePicker: fixing weird behavior with calendar when switching between months/years (#22253)

Browse Source 
* fixed issues with timepicker closing when month is changed.

* removed console.logs.

* fixed so calendar isn't changing size when selecting several dates.

* Prevent calendar from closing when changing year.

* fixed according to PR feedback.
This commit is contained in:
Marcus Andersson 2020-02-18 12:30:11 +01:00 committed by GitHub
parent 45da3b77a8
commit 08bf2a5452
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/package.json
View File

@ -47,7 +47,7 @@
"rc-drawer": "3.0.2",
"rc-time-picker": "^3.7.2",
"react": "16.12.0",
"react-calendar": "2.18.1",
"react-calendar": "2.19.2",
"react-color": "2.17.0",
"react-custom-scrollbars": "4.2.1",
"react-dom": "16.12.0",

25
packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx
View File

@ -1,4 +1,4 @@
import React, { memo } from 'react';
import React, { memo, useState, useEffect } from 'react';
import { css, cx } from 'emotion';
import Calendar from 'react-calendar/dist/entry.nostyle';
import { GrafanaTheme, dateTime, TIME_FORMAT } from '@grafana/data';
@ -84,7 +84,6 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
title: css`
color: ${theme.colors.text}
background-color: ${colors.background};
line-height: 21px;
font-size: ${theme.typography.size.md};
border: 1px solid transparent;
@ -129,6 +128,7 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
.react-calendar__tile--now {
margin-bottom: 4px;
background-color: inherit;
height: 26px;
}
.react-calendar__navigation__label,
@ -158,7 +158,8 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
background-color: ${theme.colors.blue77};
border-radius: 100px;
display: block;
padding: 2px 7px 3px;
padding-top: 2px;
height: 26px;
}
}
@ -202,6 +203,8 @@ interface Props {
isFullscreen: boolean;
}
const stopPropagation = (event: React.MouseEvent<HTMLDivElement>) => event.stopPropagation();
export const TimePickerCalendar = memo<Props>(props => {
const theme = useTheme();
const styles = getStyles(theme);
@ -214,7 +217,7 @@ export const TimePickerCalendar = memo<Props>(props => {
if (isFullscreen) {
return (
<ClickOutsideWrapper onClick={props.onClose}>
<div className={styles.container}>
<div className={styles.container} onClick={stopPropagation}>
<Body {...props} />
</div>
</ClickOutsideWrapper>
@ -223,14 +226,14 @@ export const TimePickerCalendar = memo<Props>(props => {
return (
<Portal>
<div className={styles.modal} onClick={event => event.stopPropagation()}>
<div className={styles.modal} onClick={stopPropagation}>
<div className={styles.content}>
<Header {...props} />
<Body {...props} />
<Footer {...props} />
</div>
</div>
<div className={styles.backdrop} onClick={event => event.stopPropagation()} />
<div className={styles.backdrop} onClick={stopPropagation} />
</Portal>
);
});
@ -247,10 +250,14 @@ const Header = memo<Props>(({ onClose }) => {
);
});
const Body = memo<Props>(props => {
const Body = memo<Props>(({ onChange, from, to }) => {
const [value, setValue] = useState<Date[]>();
const theme = useTheme();
const styles = getBodyStyles(theme);
const { from, to, onChange } = props;
useEffect(() => {
setValue(inputToValue(from, to));
}, []);
return (
<Calendar
@ -259,7 +266,7 @@ const Body = memo<Props>(props => {
prev2Label={null}
className={styles.body}
tileClassName={styles.title}
value={inputToValue(from, to)}
value={value}
nextLabel={<span className="fa fa-angle-right" />}
prevLabel={<span className="fa fa-angle-left" />}
onChange={value => valueToInput(value, onChange)}

18
yarn.lock
View File

@ -12287,10 +12287,10 @@ get-stream@^4.0.0, get-stream@^4.1.0:
dependencies:
pump "^3.0.0"
get-user-locale@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/get-user-locale/-/get-user-locale-1.2.0.tgz#e4940db90a6694a512455af3f756903a01410eb7"
integrity sha512-yodJVDMWnM4ZOGa+n1ofebE8u+yjd8FIZMqthUK+xcOQcmfU2ECaP5gLiTMt6j0R/e67QsEelES0fQYLy/oHPg==
get-user-locale@^1.2.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/get-user-locale/-/get-user-locale-1.3.0.tgz#21ea740e413541281ae7b2b42e70ee523b7725b2"
integrity sha512-c5N8P0upjxCF9unIC2vTA+B+8nN7kU/D/TeItMAVYhWIIksyoULM1aflKflXM3w+Ij6vF/JZys+QcwIoDuy3Ag==
dependencies:
lodash.once "^4.1.1"
@ -20121,12 +20121,12 @@ react-addons-create-fragment@^15.6.2:
loose-envify "^1.3.1"
object-assign "^4.1.0"
react-calendar@2.18.1:
version "2.18.1"
resolved "https://registry.yarnpkg.com/react-calendar/-/react-calendar-2.18.1.tgz#f8ef9468d8566aa0d47d9d70c88917bb2030bcb9"
integrity sha512-J3tVim1gLpnsCOaeez+z4QJB5oK6UYLJj5TSMOStSJBvkWMEcTzj7bq7yCJJCNLUg2Vd3i11gJXish0LUFhXaw==
react-calendar@2.19.2:
version "2.19.2"
resolved "https://registry.yarnpkg.com/react-calendar/-/react-calendar-2.19.2.tgz#496e78eb11a00aee1ae6b5d02d221ed1ca2db952"
integrity sha512-zKbWxwmYEg84grFsCJz9EYpnGqsZy0iV67dHzkVE0EhBdXMg2eISBQYvw4+t8zdy5ySxQkDhUW8X8ERbSyZPVw==
dependencies:
get-user-locale "^1.1.1"
get-user-locale "^1.2.0"
merge-class-names "^1.1.1"
prop-types "^15.6.0"
react-lifecycles-compat "^3.0.4"