@carbon-labs/react-animated-header 0.5.0 → 0.7.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 (5) hide show
  1. package/README.md +15 -0
  2. package/es/components/AnimatedHeader/AnimatedHeader.js +8 -39
  3. package/lib/components/AnimatedHeader/AnimatedHeader.js +6 -37
  4. package/package.json +8 -4
  5. package/telemetry.yml +43 -0
package/README.md ADDED
@@ -0,0 +1,15 @@
1
+ # @carbon-labs/react-animated-header
2
+
3
+ ## 📝 License
4
+
5
+ Licensed under the
6
+ [Apache 2.0 License](https://github.com/carbon-design-system/carbon-labs/blob/main/LICENSE).
7
+
8
+ ## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
9
+
10
+ This package uses IBM Telemetry to collect de-identified and anonymized metrics
11
+ data. By installing this package as a dependency you are agreeing to telemetry
12
+ collection. To opt out, see
13
+ [Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
14
+ For more information on the data being collected, please see the
15
+ [IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).
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.7.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "provenance": true
@@ -19,18 +19,22 @@
19
19
  "es",
20
20
  "lib",
21
21
  "scss",
22
- "assets"
22
+ "assets",
23
+ "telemetry.yml"
23
24
  ],
24
25
  "scripts": {
25
26
  "build": "node ../../../tasks/build.js",
26
- "clean": "rm -rf {es,lib,scss}"
27
+ "clean": "rm -rf {es,lib,scss}",
28
+ "postinstall": "ibmtelemetry --config=telemetry.yml",
29
+ "telemetry:config": "npx -y @ibm/telemetry-js-config-generator generate --id 40597fb8-d0ed-45fb-a95a-5b1751e22c36 --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./components/**/*.(tsx|js|jsx)"
27
30
  },
28
31
  "dependencies": {
32
+ "@ibm/telemetry-js": "^1.9.1",
29
33
  "jest-canvas-mock": "^2.5.2",
30
34
  "lottie-web": "^5.12.2"
31
35
  },
32
36
  "devDependencies": {
33
37
  "@carbon-labs/utilities": "canary"
34
38
  },
35
- "gitHead": "00c3ca091be01c1085927e424eae56588e74b7fe"
39
+ "gitHead": "b823d1537a2e40e31f7246a6341b68d861c8fd92"
36
40
  }
package/telemetry.yml ADDED
@@ -0,0 +1,43 @@
1
+ # yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json
2
+
3
+ version: 1
4
+ projectId: 40597fb8-d0ed-45fb-a95a-5b1751e22c36
5
+ endpoint: https://www-api.ibm.com/ibm-telemetry/v1/metrics
6
+ collect:
7
+ jsx:
8
+ elements:
9
+ allowedAttributeNames:
10
+ # General
11
+ - href
12
+ - id
13
+ - mainIcon
14
+ - open
15
+ - productName
16
+ - secondaryIcon
17
+ - subtitle
18
+ - title
19
+ # Animated Header
20
+ - allTiles
21
+ - allWorkspaces
22
+ - className
23
+ - description
24
+ - handleHeaderItemsToString
25
+ - handleWorkspaceItemsToString
26
+ - headerAnimation
27
+ - headerStatic
28
+ - selectedTileGroup
29
+ - selectedWorkspace
30
+ - setSelectedTileGroup
31
+ - setSelectedWorkspace
32
+ - tasksConfig
33
+ - userName
34
+ - welcomeText
35
+ - workspaceLabel
36
+ # React
37
+ - key
38
+ - ref
39
+ npm:
40
+ dependencies: null
41
+ js:
42
+ functions: {}
43
+ tokens: null