@carbon-labs/react-animated-header 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/components/AnimatedHeader/AnimatedHeader.js +8 -39
  2. package/lib/components/AnimatedHeader/AnimatedHeader.js +6 -37
  3. package/package.json +2 -2
package/es/components/AnimatedHeader/AnimatedHeader.js CHANGED
@@ -6,17 +6,13 @@
6
6
  */
7
7
 
8
8
  import PropTypes from 'prop-types';
9
- import React, { useState, useEffect, createRef } from 'react';
10
- import { Grid, Column, Tooltip, Button, Dropdown, IconButton } from '@carbon/react';
9
+ import React, { useRef, useState, useEffect } from 'react';
10
+ import { Grid, Column, Tooltip, Button, Dropdown } from '@carbon/react';
11
11
  import lottie from '../../_virtual/lottie.js';
12
12
  import { usePrefix } from '../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
13
13
  import { BaseTile } from '../Tiles/BaseTile/BaseTile.js';
14
- import { PauseFilled } from '../../node_modules/@carbon/icons-react/es/generated/bucket-12.js';
15
- import { PlayFilledAlt } from '../../node_modules/@carbon/icons-react/es/generated/bucket-13.js';
16
14
  import { ChevronUp, ChevronDown } from '../../node_modules/@carbon/icons-react/es/generated/bucket-3.js';
17
15
 
18
- var _PauseFilled, _PlayFilledAlt;
19
-
20
16
  /** Animated Header */
21
17
 
22
18
  const AnimatedHeader = _ref => {
@@ -40,9 +36,8 @@ const AnimatedHeader = _ref => {
40
36
  } = _ref;
41
37
  const prefix = usePrefix();
42
38
  const blockClass = `${prefix}--animated-header`;
43
- const animationContainer = /*#__PURE__*/createRef();
39
+ const animationContainer = useRef(null);
44
40
  const [open, setOpen] = useState(true);
45
- const [playing, setPlaying] = useState(true);
46
41
  const [headingTextAnimation, setHeadingTextAnimation] = useState('');
47
42
  const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
48
43
  const collapsed = `${blockClass}--collapsed`;
@@ -55,15 +50,10 @@ const AnimatedHeader = _ref => {
55
50
  setOpen(!open);
56
51
  open ? setHeadingTextAnimation(headingCollapsed) : setHeadingTextAnimation(headingExpanded);
57
52
  };
58
- const handleLottieAnimationClick = () => {
59
- if (playing) {
60
- lottie.pause();
61
- } else {
62
- lottie.play();
63
- }
64
- setPlaying(!playing);
65
- };
66
53
  useEffect(() => {
54
+ if (!animationContainer.current) {
55
+ return;
56
+ }
67
57
  const animation = lottie.loadAnimation({
68
58
  container: animationContainer.current,
69
59
  animationData: headerAnimation,
@@ -72,7 +62,6 @@ const AnimatedHeader = _ref => {
72
62
  autoplay: false
73
63
  });
74
64
  const lottieLoadSpeed = 1;
75
- const lottieLoopSpeed = 1;
76
65
  const animationData = animation['animationData'];
77
66
  function reducedMotion() {
78
67
  animation.goToAndStop(5000);
@@ -81,10 +70,6 @@ const AnimatedHeader = _ref => {
81
70
  animation.setSpeed(lottieLoadSpeed);
82
71
  animation.playSegments([animationData.markers.at(0).tm, animationData.markers.at(1).tm], true);
83
72
  }
84
- function loop() {
85
- animation.setSpeed(lottieLoopSpeed);
86
- animation.playSegments([animationData.markers.at(1).tm, animationData.op], true);
87
- }
88
73
  if (isReduced) {
89
74
  // reduced motion on
90
75
  animation.addEventListener('DOMLoaded', reducedMotion);
@@ -93,17 +78,13 @@ const AnimatedHeader = _ref => {
93
78
 
94
79
  // Run Start Animation
95
80
  animation.addEventListener('DOMLoaded', load);
96
-
97
- // Run Looped Animation
98
- animation.addEventListener('complete', loop);
99
81
  }
100
82
  return () => {
101
83
  animation?.removeEventListener('DOMLoaded', reducedMotion);
102
84
  animation?.removeEventListener('DOMLoaded', load);
103
- animation?.removeEventListener('complete', loop);
104
85
  };
105
86
  // eslint-disable-next-line react-hooks/exhaustive-deps
106
- }, [headerAnimation, isReduced]);
87
+ }, [isReduced]);
107
88
  return /*#__PURE__*/React.createElement("section", {
108
89
  className: `${blockClass}${!open ? ` ${collapsed}` : ''}`
109
90
  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement("div", {
@@ -199,19 +180,7 @@ const AnimatedHeader = _ref => {
199
180
  className: `${blockClass}__button-collapse--gradient`
200
181
  }), /*#__PURE__*/React.createElement("div", {
201
182
  className: `${blockClass}__button-collapse--container`
202
- }, headerAnimation && !isReduced && /*#__PURE__*/React.createElement(IconButton, {
203
- className: `${blockClass}__icon-button`,
204
- label: playing ? 'Pause' : 'Play',
205
- kind: "ghost",
206
- type: "button",
207
- onClick: handleLottieAnimationClick
208
- }, playing ? _PauseFilled || (_PauseFilled = /*#__PURE__*/React.createElement(PauseFilled, {
209
- size: 16,
210
- fill: `var(--cds-icon-secondary)`
211
- })) : _PlayFilledAlt || (_PlayFilledAlt = /*#__PURE__*/React.createElement(PlayFilledAlt, {
212
- size: 16,
213
- fill: `var(--cds-icon-secondary)`
214
- }))), /*#__PURE__*/React.createElement(Button, {
183
+ }, /*#__PURE__*/React.createElement(Button, {
215
184
  id: `${blockClass}__button-collapse`,
216
185
  kind: "ghost",
217
186
  renderIcon: open ? ChevronUp : ChevronDown,
package/lib/components/AnimatedHeader/AnimatedHeader.js CHANGED
@@ -15,12 +15,8 @@ var react = require('@carbon/react');
15
15
  var lottie = require('../../_virtual/lottie.js');
16
16
  var usePrefix = require('../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
17
17
  var BaseTile = require('../Tiles/BaseTile/BaseTile.js');
18
- var bucket12 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-12.js');
19
- var bucket13 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-13.js');
20
18
  var bucket3 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-3.js');
21
19
 
22
- var _PauseFilled, _PlayFilledAlt;
23
-
24
20
  /** Animated Header */
25
21
 
26
22
  const AnimatedHeader = _ref => {
@@ -44,9 +40,8 @@ const AnimatedHeader = _ref => {
44
40
  } = _ref;
45
41
  const prefix = usePrefix.usePrefix();
46
42
  const blockClass = `${prefix}--animated-header`;
47
- const animationContainer = /*#__PURE__*/React.createRef();
43
+ const animationContainer = React.useRef(null);
48
44
  const [open, setOpen] = React.useState(true);
49
- const [playing, setPlaying] = React.useState(true);
50
45
  const [headingTextAnimation, setHeadingTextAnimation] = React.useState('');
51
46
  const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
52
47
  const collapsed = `${blockClass}--collapsed`;
@@ -59,15 +54,10 @@ const AnimatedHeader = _ref => {
59
54
  setOpen(!open);
60
55
  open ? setHeadingTextAnimation(headingCollapsed) : setHeadingTextAnimation(headingExpanded);
61
56
  };
62
- const handleLottieAnimationClick = () => {
63
- if (playing) {
64
- lottie.default.pause();
65
- } else {
66
- lottie.default.play();
67
- }
68
- setPlaying(!playing);
69
- };
70
57
  React.useEffect(() => {
58
+ if (!animationContainer.current) {
59
+ return;
60
+ }
71
61
  const animation = lottie.default.loadAnimation({
72
62
  container: animationContainer.current,
73
63
  animationData: headerAnimation,
@@ -76,7 +66,6 @@ const AnimatedHeader = _ref => {
76
66
  autoplay: false
77
67
  });
78
68
  const lottieLoadSpeed = 1;
79
- const lottieLoopSpeed = 1;
80
69
  const animationData = animation['animationData'];
81
70
  function reducedMotion() {
82
71
  animation.goToAndStop(5000);
@@ -85,10 +74,6 @@ const AnimatedHeader = _ref => {
85
74
  animation.setSpeed(lottieLoadSpeed);
86
75
  animation.playSegments([animationData.markers.at(0).tm, animationData.markers.at(1).tm], true);
87
76
  }
88
- function loop() {
89
- animation.setSpeed(lottieLoopSpeed);
90
- animation.playSegments([animationData.markers.at(1).tm, animationData.op], true);
91
- }
92
77
  if (isReduced) {
93
78
  // reduced motion on
94
79
  animation.addEventListener('DOMLoaded', reducedMotion);
@@ -97,17 +82,13 @@ const AnimatedHeader = _ref => {
97
82
 
98
83
  // Run Start Animation
99
84
  animation.addEventListener('DOMLoaded', load);
100
-
101
- // Run Looped Animation
102
- animation.addEventListener('complete', loop);
103
85
  }
104
86
  return () => {
105
87
  animation?.removeEventListener('DOMLoaded', reducedMotion);
106
88
  animation?.removeEventListener('DOMLoaded', load);
107
- animation?.removeEventListener('complete', loop);
108
89
  };
109
90
  // eslint-disable-next-line react-hooks/exhaustive-deps
110
- }, [headerAnimation, isReduced]);
91
+ }, [isReduced]);
111
92
  return /*#__PURE__*/React.createElement("section", {
112
93
  className: `${blockClass}${!open ? ` ${collapsed}` : ''}`
113
94
  }, /*#__PURE__*/React.createElement(react.Grid, null, /*#__PURE__*/React.createElement("div", {
@@ -203,19 +184,7 @@ const AnimatedHeader = _ref => {
203
184
  className: `${blockClass}__button-collapse--gradient`
204
185
  }), /*#__PURE__*/React.createElement("div", {
205
186
  className: `${blockClass}__button-collapse--container`
206
- }, headerAnimation && !isReduced && /*#__PURE__*/React.createElement(react.IconButton, {
207
- className: `${blockClass}__icon-button`,
208
- label: playing ? 'Pause' : 'Play',
209
- kind: "ghost",
210
- type: "button",
211
- onClick: handleLottieAnimationClick
212
- }, playing ? _PauseFilled || (_PauseFilled = /*#__PURE__*/React.createElement(bucket12.PauseFilled, {
213
- size: 16,
214
- fill: `var(--cds-icon-secondary)`
215
- })) : _PlayFilledAlt || (_PlayFilledAlt = /*#__PURE__*/React.createElement(bucket13.PlayFilledAlt, {
216
- size: 16,
217
- fill: `var(--cds-icon-secondary)`
218
- }))), /*#__PURE__*/React.createElement(react.Button, {
187
+ }, /*#__PURE__*/React.createElement(react.Button, {
219
188
  id: `${blockClass}__button-collapse`,
220
189
  kind: "ghost",
221
190
  renderIcon: open ? bucket3.ChevronUp : bucket3.ChevronDown,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@carbon-labs/react-animated-header",
3
- "version": "0.5.0",
3
+ "version": "0.6.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "provenance": true
@@ -32,5 +32,5 @@
32
32
  "devDependencies": {
33
33
  "@carbon-labs/utilities": "canary"
34
34
  },
35
- "gitHead": "00c3ca091be01c1085927e424eae56588e74b7fe"
35
+ "gitHead": "07903dacc3c6c772ed2823e495efe19e56631c3b"
36
36
  }