add rotations transitions

2022-08-29 13:19:56 +03:00 · 2022-08-29 13:19:56 +03:00 · 47045aaaf9
commit 47045aaaf9
parent e1f36ce9df
6 changed files with 103 additions and 74 deletions
--- 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"
--- a/grafana-plugin/src/containers/Rotations/Rotations.config.ts
+++ b/grafana-plugin/src/containers/Rotations/Rotations.config.ts
@ -0,0 +1,4 @@
+export const DEFAULT_TRANSITION_TIMEOUT = {
+  enter: 500,
+  exit: 0,
+};
--- 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;
+}
--- 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<RotationsProps, RotationsState> {
          </div>
          <div className={cx('rotations-plus-title')}>
            {layers && layers.length ? (
-              layers.map((layer, layerIndex) => (
-                <div key={layer.priority}>
-                  <div id={`layer${layer.priority}`} className={cx('layer')}>
-                    <div className={cx('layer-title')}>
-                      <HorizontalGroup spacing="sm" justify="center">
-                        <span>Layer {layer.priority}</span>
-                        {/*<Icon name="info-circle" />*/}
-                      </HorizontalGroup>
-                    </div>
-                    <div className={cx('rotations')}>
-                      <TimelineMarks startMoment={startMoment} />
-                      {!currentTimeHidden && (
-                        <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />
-                      )}
+              <TransitionGroup className={cx('layers')}>
+                {layers.map((layer, layerIndex) => (
+                  <CSSTransition key={layerIndex} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
+                    <div id={`layer${layer.priority}`} className={cx('layer')}>
+                      <div className={cx('layer-title')}>
+                        <HorizontalGroup spacing="sm" justify="center">
+                          <span>Layer {layer.priority}</span>
+                          {/*<Icon name="info-circle" />*/}
+                        </HorizontalGroup>
+                      </div>
                      <div className={cx('rotations')}>
-                        {layer.shifts.map(({ shiftId, isPreview, events }, rotationIndex) => (
-                          <Rotation
-                            onClick={(moment) => {
-                              this.onRotationClick(shiftId, moment);
-                            }}
-                            color={getColor(layerIndex, rotationIndex)}
-                            events={events}
-                            layerIndex={layerIndex}
-                            rotationIndex={rotationIndex}
-                            startMoment={startMoment}
-                            currentTimezone={currentTimezone}
-                            transparent={isPreview}
-                          />
-                        ))}
+                        <TimelineMarks startMoment={startMoment} />
+                        {!currentTimeHidden && (
+                          <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />
+                        )}
+                        <TransitionGroup className={cx('rotations')}>
+                          {layer.shifts.map(({ shiftId, isPreview, events }, rotationIndex) => (
+                            <CSSTransition
+                              key={rotationIndex}
+                              timeout={DEFAULT_TRANSITION_TIMEOUT}
+                              classNames={{ ...styles }}
+                            >
+                              <Rotation
+                                onClick={(moment) => {
+                                  this.onRotationClick(shiftId, moment);
+                                }}
+                                color={getColor(layerIndex, rotationIndex)}
+                                events={events}
+                                layerIndex={layerIndex}
+                                rotationIndex={rotationIndex}
+                                startMoment={startMoment}
+                                currentTimezone={currentTimezone}
+                                transparent={isPreview}
+                              />
+                            </CSSTransition>
+                          ))}
+                        </TransitionGroup>
                      </div>
                    </div>
-                  </div>
-                </div>
-              ))
+                  </CSSTransition>
+                ))}
+              </TransitionGroup>
            ) : (
              <div>
                <div id={`layer1`} className={cx('layer')}>
--- 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<ScheduleOverridesProps, ScheduleOverri
          <div className={cx('header-plus-content')}>
            {!currentTimeHidden && <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />}
            <TimelineMarks startMoment={startMoment} />
-            <div className={cx('rotations')}>
+            <TransitionGroup className={cx('rotations')}>
              {shifts && shifts.length ? (
                shifts.map(({ shiftId, isPreview, events }, rotationIndex) => (
+                  <CSSTransition key={rotationIndex} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
+                    <Rotation
+                      key={rotationIndex}
+                      events={events}
+                      color={getOverrideColor(rotationIndex)}
+                      startMoment={startMoment}
+                      currentTimezone={currentTimezone}
+                      onClick={(moment) => {
+                        this.onRotationClick(shiftId, moment);
+                      }}
+                      transparent={isPreview}
+                    />
+                  </CSSTransition>
+                ))
+              ) : (
+                <CSSTransition key={0} timeout={500} classNames={{ ...styles }}>
                  <Rotation
-                    key={rotationIndex}
-                    events={events}
-                    color={getOverrideColor(rotationIndex)}
+                    events={[]}
                    startMoment={startMoment}
                    currentTimezone={currentTimezone}
                    onClick={(moment) => {
-                      this.onRotationClick(shiftId, moment);
+                      this.onRotationClick('new', moment);
                    }}
-                    transparent={isPreview}
                  />
-                ))
-              ) : (
-                <Rotation
-                  events={[]}
-                  startMoment={startMoment}
-                  currentTimezone={currentTimezone}
-                  onClick={(moment) => {
-                    this.onRotationClick('new', moment);
-                  }}
-                />
+                </CSSTransition>
              )}
-            </div>
+            </TransitionGroup>
          </div>
          {/* <div className={cx('add-rotations-layer')} onClick={this.handleAddOverride}>
            + Add override
--- 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"