@desynova-digital/components 8.19.57 → 8.19.59
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.
|
@@ -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,133 @@
|
|
|
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
|
+
setCustomInputValue(inputValue);
|
|
105
|
+
document.addEventListener('keydown', handleEscapeKey);
|
|
106
|
+
return function () {
|
|
107
|
+
document.removeEventListener('keydown', handleEscapeKey);
|
|
108
|
+
};
|
|
109
|
+
}, [inputValue]);
|
|
110
|
+
|
|
111
|
+
(0, _react.useImperativeHandle)(elementRef, function () {
|
|
112
|
+
return {
|
|
113
|
+
checkValidity: function checkValidity() {
|
|
114
|
+
return checkIfTimeValid(customInputValue);
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
return _react2.default.createElement(StyledInput, {
|
|
120
|
+
width: width,
|
|
121
|
+
ref: elementRef,
|
|
122
|
+
value: customInputValue,
|
|
123
|
+
onFocus: onFocus,
|
|
124
|
+
onKeyDown: onKeyDown,
|
|
125
|
+
onChange: function onChange(e) {
|
|
126
|
+
onTimePickerChange(e.target.value, e);checkIfTimeValid(e.target.value);
|
|
127
|
+
},
|
|
128
|
+
isError: isValid,
|
|
129
|
+
maxLength: '11'
|
|
130
|
+
});
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
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
|
-
/*
|
|
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
|
-
/*
|
|
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
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
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;
|
package/molecules/table/table.js
CHANGED
|
@@ -639,7 +639,7 @@ var Table = function (_Component) {
|
|
|
639
639
|
|
|
640
640
|
_this.resetSearchTextAndFilters = function () {
|
|
641
641
|
_this.handleInputChange("");
|
|
642
|
-
_this._filterRef.current.resetSelectedUserFilter();
|
|
642
|
+
_this._filterRef && _this._filterRef.current && this_filterRef.current.resetSelectedUserFilter();
|
|
643
643
|
};
|
|
644
644
|
|
|
645
645
|
_this.handleDebounce = (0, _lodash.debounce)(function (text) {
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "8.19.
|
|
3
|
+
"version": "8.19.59",
|
|
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.
|
|
10
|
+
"@desynova-digital/tokens": "8.19.59",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|