From 7656e72df93896fd7a6d9e3686cc4d9507c7f074 Mon Sep 17 00:00:00 2001 From: Marcus Andersson Date: Tue, 18 Feb 2020 12:30:11 +0100 Subject: [PATCH] TimePicker: fixing weird behavior with calendar when switching between months/years (#22253) * 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. (cherry picked from commit 08bf2a54523526a7f59f7c6a8dafaace79ab87db) --- packages/grafana-ui/package.json | 2 +- .../TimePickerContent/TimePickerCalendar.tsx | 25 ++++++++++++------- yarn.lock | 18 ++++++------- 3 files changed, 26 insertions(+), 19 deletions(-) diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index bba1c3338a8..054126e1593 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -45,7 +45,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", diff --git a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx index cefba711628..a374ed8e01c 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx +++ b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx @@ -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) => event.stopPropagation(); + export const TimePickerCalendar = memo(props => { const theme = useTheme(); const styles = getStyles(theme); @@ -214,7 +217,7 @@ export const TimePickerCalendar = memo(props => { if (isFullscreen) { return ( -
+
@@ -223,14 +226,14 @@ export const TimePickerCalendar = memo(props => { return ( -
event.stopPropagation()}> +
-
event.stopPropagation()} /> +
); }); @@ -247,10 +250,14 @@ const Header = memo(({ onClose }) => { ); }); -const Body = memo(props => { +const Body = memo(({ onChange, from, to }) => { + const [value, setValue] = useState(); const theme = useTheme(); const styles = getBodyStyles(theme); - const { from, to, onChange } = props; + + useEffect(() => { + setValue(inputToValue(from, to)); + }, []); return ( (props => { prev2Label={null} className={styles.body} tileClassName={styles.title} - value={inputToValue(from, to)} + value={value} nextLabel={} prevLabel={} onChange={value => valueToInput(value, onChange)} diff --git a/yarn.lock b/yarn.lock index fe00eb4eeac..dfeae7faa2d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10405,10 +10405,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" @@ -17560,12 +17560,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"