diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json index 7a090dd0..cbfc46e5 100644 --- a/grafana-plugin/package.json +++ b/grafana-plugin/package.json @@ -80,7 +80,7 @@ "react-router-dom": "^5.2.0", "react-sortable-hoc": "^1.11.0", "react-string-replace": "^0.4.4", - "react-transition-group": "1.x", + "react-transition-group": "^4.4.5", "stylelint": "^13.13.1", "stylelint-config-standard": "^22.0.0", "throttle-debounce": "^2.1.0" diff --git a/grafana-plugin/src/containers/Rotations/Rotations.config.ts b/grafana-plugin/src/containers/Rotations/Rotations.config.ts new file mode 100644 index 00000000..2fe0b109 --- /dev/null +++ b/grafana-plugin/src/containers/Rotations/Rotations.config.ts @@ -0,0 +1,4 @@ +export const DEFAULT_TRANSITION_TIMEOUT = { + enter: 500, + exit: 0, +}; diff --git a/grafana-plugin/src/containers/Rotations/Rotations.module.css b/grafana-plugin/src/containers/Rotations/Rotations.module.css index e9dd92b6..ce2935d5 100644 --- a/grafana-plugin/src/containers/Rotations/Rotations.module.css +++ b/grafana-plugin/src/containers/Rotations/Rotations.module.css @@ -89,3 +89,25 @@ .add-rotations-layer:hover { background: var(--secondary-background); } + +/* +animation +*/ + +.enter { + opacity: 0; +} + +.enterActive { + opacity: 1; + transition: opacity 500ms ease-in; +} + +.exit { + opacity: 1; +} + +.exitActive { + opacity: 0; + transition: opacity 500ms ease-in; +} diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx index 86671f8d..49fb3c48 100644 --- a/grafana-plugin/src/containers/Rotations/Rotations.tsx +++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx @@ -6,6 +6,7 @@ import dayjs from 'dayjs'; import utc from 'dayjs/plugin/utc'; import { toJS } from 'mobx'; import { observer } from 'mobx-react'; +import { CSSTransition, TransitionGroup } from 'react-transition-group'; import TimelineMarks from 'components/TimelineMarks/TimelineMarks'; import Rotation from 'containers/Rotation/Rotation'; @@ -17,6 +18,7 @@ import { Timezone } from 'models/timezone/timezone.types'; import { SelectOption, WithStoreProps } from 'state/types'; import { withMobXProviderContext } from 'state/withStore'; +import { DEFAULT_TRANSITION_TIMEOUT } from './Rotations.config'; import { findColor } from './Rotations.helpers'; import styles from './Rotations.module.css'; @@ -89,40 +91,48 @@ class Rotations extends Component {
{layers && layers.length ? ( - layers.map((layer, layerIndex) => ( -
-
-
- - Layer {layer.priority} - {/**/} - -
-
- - {!currentTimeHidden && ( -
- )} + + {layers.map((layer, layerIndex) => ( + +
+
+ + Layer {layer.priority} + {/**/} + +
- {layer.shifts.map(({ shiftId, isPreview, events }, rotationIndex) => ( - { - this.onRotationClick(shiftId, moment); - }} - color={getColor(layerIndex, rotationIndex)} - events={events} - layerIndex={layerIndex} - rotationIndex={rotationIndex} - startMoment={startMoment} - currentTimezone={currentTimezone} - transparent={isPreview} - /> - ))} + + {!currentTimeHidden && ( +
+ )} + + {layer.shifts.map(({ shiftId, isPreview, events }, rotationIndex) => ( + + { + this.onRotationClick(shiftId, moment); + }} + color={getColor(layerIndex, rotationIndex)} + events={events} + layerIndex={layerIndex} + rotationIndex={rotationIndex} + startMoment={startMoment} + currentTimezone={currentTimezone} + transparent={isPreview} + /> + + ))} +
-
-
- )) + + ))} + ) : (
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx index e28384ec..3986a516 100644 --- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx +++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx @@ -5,6 +5,7 @@ import cn from 'classnames/bind'; import dayjs from 'dayjs'; import { observer } from 'mobx-react'; import moment from 'moment'; +import { CSSTransition, TransitionGroup } from 'react-transition-group'; import TimelineMarks from 'components/TimelineMarks/TimelineMarks'; import Rotation from 'containers/Rotation/Rotation'; @@ -16,6 +17,7 @@ import { Timezone } from 'models/timezone/timezone.types'; import { WithStoreProps } from 'state/types'; import { withMobXProviderContext } from 'state/withStore'; +import { DEFAULT_TRANSITION_TIMEOUT } from './Rotations.config'; import { findColor } from './Rotations.helpers'; import styles from './Rotations.module.css'; @@ -72,32 +74,36 @@ class ScheduleOverrides extends Component {!currentTimeHidden &&
} -
+ {shifts && shifts.length ? ( shifts.map(({ shiftId, isPreview, events }, rotationIndex) => ( + + { + this.onRotationClick(shiftId, moment); + }} + transparent={isPreview} + /> + + )) + ) : ( + { - this.onRotationClick(shiftId, moment); + this.onRotationClick('new', moment); }} - transparent={isPreview} /> - )) - ) : ( - { - this.onRotationClick('new', moment); - }} - /> + )} -
+
{/*
+ Add override diff --git a/grafana-plugin/yarn.lock b/grafana-plugin/yarn.lock index adeff3ef..9ae88054 100644 --- a/grafana-plugin/yarn.lock +++ b/grafana-plugin/yarn.lock @@ -4986,11 +4986,6 @@ caseless@~0.12.0: resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw= -chain-function@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.1.tgz#c63045e5b4b663fb86f1c6e186adaf1de402a1cc" - integrity sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg== - chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" @@ -6605,7 +6600,7 @@ dom-css@^2.0.0: prefix-style "2.0.1" to-camel-case "1.0.0" -dom-helpers@^3.2.0, dom-helpers@^3.3.1: +dom-helpers@^3.3.1: version "3.4.0" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8" integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA== @@ -12753,7 +12748,7 @@ prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, pr object-assign "^4.1.1" react-is "^16.8.1" -prop-types@^15.5.6, prop-types@^15.8.1: +prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -13628,17 +13623,6 @@ react-table@7.8.0: resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.8.0.tgz#07858c01c1718c09f7f1aed7034fcfd7bda907d2" integrity sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA== -react-transition-group@1.x: - version "1.2.1" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6" - integrity sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q== - dependencies: - chain-function "^1.0.0" - dom-helpers "^3.2.0" - loose-envify "^1.3.1" - prop-types "^15.5.6" - warning "^3.0.0" - react-transition-group@4.4.1: version "4.4.1" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" @@ -13659,6 +13643,16 @@ react-transition-group@4.4.2, react-transition-group@^4.3.0, react-transition-gr loose-envify "^1.4.0" prop-types "^15.6.2" +react-transition-group@^4.4.5: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react-universal-interface@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b" @@ -16277,13 +16271,6 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" -warning@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" - integrity sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ== - dependencies: - loose-envify "^1.0.0" - warning@^4.0.1, warning@^4.0.2, warning@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"