@desynova-digital/components 8.19.56 → 8.19.58

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.
@@ -116,6 +116,7 @@ var CircleDonut = function (_Component) {
116
116
  var pathD = _this.props.data.graph_type && _this.props.data.graph_type != '' ? circleList[_this.props.data.graph_type].d : circleList['donutDefault'].d;
117
117
  var circleCircumference = _this.props.data.graph_type && _this.props.data.graph_type != '' ? circleList[_this.props.data.graph_type].c : circleList['donutDefault'].c;
118
118
  var graphTitleName = _this.props.data && _this.props.data.data && _this.props.data.data.name ? _this.props.data.data.name : new Date().getTime() + '';
119
+ graphTitleName = graphTitleName.replaceAll(" ", '');
119
120
 
120
121
  return _react2.default.createElement(
121
122
  StyledCircleDonut,
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ var _timeCodeInput = require("./timeCodeInput");
8
+
9
+ var _timeCodeInput2 = _interopRequireDefault(_timeCodeInput);
10
+
11
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
+
13
+ exports.default = _timeCodeInput2.default;
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+
3
+ var _react = require("react");
4
+
5
+ var _react2 = _interopRequireDefault(_react);
6
+
7
+ var _react3 = require("@storybook/react");
8
+
9
+ var _storyHelpers = require("../../_helpers/story-helpers");
10
+
11
+ var _timeCodeInput = require("./timeCodeInput");
12
+
13
+ var _timeCodeInput2 = _interopRequireDefault(_timeCodeInput);
14
+
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
+
17
+ (0, _react3.storiesOf)("InputText").add("dark theme", function () {
18
+ return _react2.default.createElement(
19
+ _storyHelpers.Example,
20
+ { title: "Appearances" },
21
+ _react2.default.createElement(
22
+ _storyHelpers.Stack,
23
+ null,
24
+ _react2.default.createElement(_timeCodeInput2.default, {
25
+ inputValue: "00:00:00:00" //time code input value
26
+ , onFocus: function onFocus() {
27
+ //perform your function here eg pause the video that is playing
28
+ },
29
+ frameRate: '25',
30
+ initialTime: '00:00:00:00' || 0,
31
+ playerDuration: '00:23:35:03' || 0 })
32
+ )
33
+ );
34
+ });
@@ -0,0 +1,132 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
8
+
9
+ var _templateObject = _taggedTemplateLiteral(['\n font-family: SFUIText-Regular;\n font-size: 12px;\n color: ', ';\n text-align: left;\n padding: 0;\n border: none;\n outline: none;\n background: transparent;\n &:hover {\n color: rgb(0 206 198);\n }\n width:', ';\n'], ['\n font-family: SFUIText-Regular;\n font-size: 12px;\n color: ', ';\n text-align: left;\n padding: 0;\n border: none;\n outline: none;\n background: transparent;\n &:hover {\n color: rgb(0 206 198);\n }\n width:', ';\n']);
10
+
11
+ var _react = require('react');
12
+
13
+ var _react2 = _interopRequireDefault(_react);
14
+
15
+ var _styledComponents = require('styled-components');
16
+
17
+ var _styledComponents2 = _interopRequireDefault(_styledComponents);
18
+
19
+ var _utils = require('@desynova-digital/player/utils');
20
+
21
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
22
+
23
+ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
24
+
25
+ var StyledInput = _styledComponents2.default.input(_templateObject, function (props) {
26
+ return props.isError ? '#FFFFFF' : '#ff0000';
27
+ }, function (props) {
28
+ return props.width ? props.width : '72px';
29
+ });
30
+
31
+ var TimeCodeInput = function TimeCodeInput(_ref) {
32
+ var inputValue = _ref.inputValue,
33
+ onFocus = _ref.onFocus,
34
+ onKeyDown = _ref.onKeyDown,
35
+ frameRate = _ref.frameRate,
36
+ initialTime = _ref.initialTime,
37
+ playerDuration = _ref.playerDuration,
38
+ elementRef = _ref.elementRef,
39
+ width = _ref.width;
40
+
41
+ var _useState = (0, _react.useState)(inputValue || '00:00:00:00'),
42
+ _useState2 = _slicedToArray(_useState, 2),
43
+ customInputValue = _useState2[0],
44
+ setCustomInputValue = _useState2[1];
45
+
46
+ var _useState3 = (0, _react.useState)(true),
47
+ _useState4 = _slicedToArray(_useState3, 2),
48
+ isValid = _useState4[0],
49
+ setIsValid = _useState4[1];
50
+
51
+ var onTimePickerChange = function onTimePickerChange(value, e) {
52
+ var inputTime = value;
53
+ var formattedTime = inputTime;
54
+ if (e && e.target && e.target.selectionStart !== undefined) {
55
+ var cursorPosition = e.target.selectionStart;
56
+ if ((cursorPosition === 2 || cursorPosition === 5 || cursorPosition === 8) && e.nativeEvent.inputType !== 'insertText' && inputTime.length >= 11) {
57
+ formattedTime = inputTime;
58
+ } else {
59
+ var cleanedTime = inputTime.replace(/:/g, '');
60
+ formattedTime = cleanedTime.replace(/(\d{2})(?=\d)/g, '$1:');
61
+ }
62
+ e.target.value = formattedTime;
63
+ // Save the cursor position before modifying the value
64
+ var newCursorPosition = cursorPosition;
65
+
66
+ // Adjust cursor position if necessary
67
+ if (inputTime.length >= formattedTime.length && inputTime[cursorPosition - 1] === ':') {
68
+ // If a number before ":" is deleted, keep the cursor next to ":"
69
+ newCursorPosition = cursorPosition;
70
+ } else if (cursorPosition % 3 === 0 && cursorPosition !== 0) {
71
+ // If the cursor is at a position that was just after adding a colon
72
+ newCursorPosition = cursorPosition + 1;
73
+ }
74
+ e.target.setSelectionRange(newCursorPosition, newCursorPosition);
75
+ setCustomInputValue(e.target.value);
76
+ }
77
+ };
78
+
79
+ var checkIfTimeValid = function checkIfTimeValid(value) {
80
+ var isValid = false;
81
+ if (value) {
82
+ var timeRegex = new RegExp('^(?:[0-5][0-9]):(?:[0-5][0-9]):(?:[0-5][0-9]):(?:[0-2][0-4]|[0-1][0-9])$');
83
+ if (timeRegex.test(value)) {
84
+ var selectedValueTime = (0, _utils.timeToSeconds)(value, frameRate);
85
+ var endTime = initialTime + playerDuration;
86
+ if (selectedValueTime >= initialTime && selectedValueTime <= endTime) {
87
+ setIsValid(true);
88
+ return true;
89
+ }
90
+ }
91
+ }
92
+ setIsValid(false);
93
+ return isValid;
94
+ };
95
+
96
+ (0, _react.useEffect)(function () {
97
+ var handleEscapeKey = function handleEscapeKey(event) {
98
+ if (event.key === 'Escape') {
99
+ setCustomInputValue(inputValue);
100
+ setIsValid(true); // Reset to original
101
+ document.activeElement.blur();
102
+ }
103
+ };
104
+ document.addEventListener('keydown', handleEscapeKey);
105
+ return function () {
106
+ document.removeEventListener('keydown', handleEscapeKey);
107
+ };
108
+ }, [inputValue]);
109
+
110
+ (0, _react.useImperativeHandle)(elementRef, function () {
111
+ return {
112
+ checkValidity: function checkValidity() {
113
+ return checkIfTimeValid(customInputValue);
114
+ }
115
+ };
116
+ });
117
+
118
+ return _react2.default.createElement(StyledInput, {
119
+ width: width,
120
+ ref: elementRef,
121
+ value: customInputValue,
122
+ onFocus: onFocus,
123
+ onKeyDown: onKeyDown,
124
+ onChange: function onChange(e) {
125
+ onTimePickerChange(e.target.value, e);checkIfTimeValid(e.target.value);
126
+ },
127
+ isError: isValid,
128
+ maxLength: '11'
129
+ });
130
+ };
131
+
132
+ exports.default = TimeCodeInput;
package/components.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
6
+ exports.TimeCodeInput = exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
7
7
 
8
8
  require("./_helpers/globals");
9
9
 
@@ -219,12 +219,20 @@ var _Shimmer = require("./atoms/loader/ShimmerComponent/Shimmer");
219
219
 
220
220
  var _Shimmer2 = _interopRequireDefault(_Shimmer);
221
221
 
222
+ var _timeCodeInput = require("./atoms/timeCodeInput/timeCodeInput");
223
+
224
+ var _timeCodeInput2 = _interopRequireDefault(_timeCodeInput);
225
+
222
226
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
223
227
 
224
- /* Molecules */
228
+ /*
229
+ This file is an aggregator, to make it easier for folks to import components that they need
225
230
 
231
+ example: `import { Input } from 'components'`
232
+ instead of `import Input from 'components/input'`
233
+ */
226
234
 
227
- /* atoms */
235
+ /* eslint-disable import/first */
228
236
  exports.Avatar = _avatar2.default;
229
237
  exports.Button = _button2.default;
230
238
  exports.Badge = _badge2.default;
@@ -278,11 +286,10 @@ exports.FiltersShimmer = _FiltersShimmer2.default;
278
286
  exports.GraphDetailsShimmer = _GraphDetailShimmer2.default;
279
287
  exports.GraphsComponentShimmer = _GraphsComponentShimmer2.default;
280
288
  exports.GraphTitleShimmer = _GraphTitleShimmer2.default;
281
- exports.Shimmer = _Shimmer2.default; /*
282
- This file is an aggregator, to make it easier for folks to import components that they need
283
-
284
- example: `import { Input } from 'components'`
285
- instead of `import Input from 'components/input'`
286
- */
287
-
288
- /* eslint-disable import/first */
289
+ exports.Shimmer = _Shimmer2.default;
290
+ exports.TimeCodeInput = _timeCodeInput2.default;
291
+
292
+ /* Molecules */
293
+
294
+
295
+ /* atoms */
package/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
6
+ exports.TimeCodeInput = exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
7
7
 
8
8
  var _components = require("./components");
9
9
 
@@ -60,4 +60,5 @@ exports.FiltersShimmer = _components.FiltersShimmer;
60
60
  exports.GraphDetailsShimmer = _components.GraphDetailsShimmer;
61
61
  exports.GraphsComponentShimmer = _components.GraphsComponentShimmer;
62
62
  exports.GraphTitleShimmer = _components.GraphTitleShimmer;
63
- exports.Shimmer = _components.Shimmer;
63
+ exports.Shimmer = _components.Shimmer;
64
+ exports.TimeCodeInput = _components.TimeCodeInput;
@@ -151,6 +151,15 @@ var Tabs = function (_React$Component) {
151
151
  return selectedIndex;
152
152
  }
153
153
  }, {
154
+ key: 'getNestedTabFromPropsOrState',
155
+ value: function getNestedTabFromPropsOrState() {
156
+ var stateSelectedIndex = this.state.selectedNestedTabIndex;
157
+ var propsSelectedIndex = this.props.selectedNestedTabIndex;
158
+ var selectedIndex = typeof propsSelectedIndex !== 'undefined' ? propsSelectedIndex : stateSelectedIndex;
159
+
160
+ return selectedIndex;
161
+ }
162
+ }, {
154
163
  key: 'changeNestedTab',
155
164
  value: function changeNestedTab(nextIndex, parentTabIndex) {
156
165
  // Deselect main tab when changing the nested tab
@@ -168,7 +177,7 @@ var Tabs = function (_React$Component) {
168
177
  return null;
169
178
  }
170
179
 
171
- var parentTabRef = _react2.default.createRef();
180
+ var nestedIdx = this.getNestedTabFromPropsOrState();
172
181
 
173
182
  return _react2.default.createElement(
174
183
  _react2.default.Fragment,
@@ -176,7 +185,6 @@ var Tabs = function (_React$Component) {
176
185
  _react2.default.createElement(
177
186
  TabLink,
178
187
  {
179
- ref: parentTabRef,
180
188
  selected: this.state.selectedIndex === index,
181
189
  allowPointerEvents: true,
182
190
  key: tab.props.label,
@@ -191,7 +199,7 @@ var Tabs = function (_React$Component) {
191
199
  'div',
192
200
  {
193
201
  key: nestedTab.props.label,
194
- className: _this2.state.selectedNestedTabIndex === nestedIndex ? 'option active' : 'option',
202
+ className: nestedIdx === nestedIndex ? 'option active' : 'option',
195
203
  theme: _this2.props.theme,
196
204
  onClick: function onClick() {
197
205
  return _this2.changeNestedTab(nestedIndex, index);
@@ -255,7 +263,9 @@ Tabs.propTypes = {
255
263
  /** onSelect will be called with the new index when a new tab is selected by the user */
256
264
  onSelect: _propTypes2.default.func,
257
265
 
258
- index: _propTypes2.default.number
266
+ index: _propTypes2.default.number,
267
+
268
+ selectedNestedTabIndex: _propTypes2.default.number
259
269
  };
260
270
 
261
271
  Tabs.defaultProps = {
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "8.19.56",
3
+ "version": "8.19.58",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "8.19.56",
10
+ "@desynova-digital/tokens": "8.19.58",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },