@desynova-digital/components 9.1.18 → 9.1.20

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 (13) hide show
  1. package/_helpers/utils.js +101 -8
  2. package/atoms/icon/icons.json +9 -0
  3. package/atoms/timeCodeDisplay/index.js +9 -0
  4. package/atoms/timeCodeDisplay/timCodeInput.story.js +24 -0
  5. package/atoms/timeCodeDisplay/timeCodeDisplay.js +38 -0
  6. package/atoms/timeCodeInput/timCodeInput.story.js +27 -4
  7. package/atoms/timeCodeInput/timeCodeInput.js +35 -169
  8. package/atoms/timeCodeInput/timeCodeMSInput.js +223 -0
  9. package/atoms/timeCodeInput/timeCodeMainInput.js +231 -0
  10. package/atoms/timeCodeInput/timeCodeStandardInput.js +225 -0
  11. package/components.js +7 -0
  12. package/index.js +6 -0
  13. package/package.json +2 -2
package/_helpers/utils.js CHANGED
@@ -1,10 +1,13 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
6
- exports.htmlToText = exports.cleanHtml = void 0;
7
+ exports.htmlToText = exports.convertHHMMSSmmm_to_HHMMSSFF = exports.convertHHMMSS_to_HHMMSSFF = exports.convertHHMMSSFF_to_HHMMSSmmm = exports.convertHHMMSSFF_to_HHMMSS = exports.cleanHtml = void 0;
8
+ exports.secondsToTime = secondsToTime;
7
9
  exports.timeToSeconds = timeToSeconds;
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
8
11
  function timeToSeconds() {
9
12
  var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "00:00:00:00";
10
13
  var frameRate = arguments.length > 1 ? arguments[1] : undefined;
@@ -18,18 +21,108 @@ function timeToSeconds() {
18
21
  }
19
22
  return seconds;
20
23
  }
24
+ var convertHHMMSS_to_HHMMSSFF = exports.convertHHMMSS_to_HHMMSSFF = function convertHHMMSS_to_HHMMSSFF(timecode) {
25
+ var frameRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 25;
26
+ if (!timecode) return "00:00:00:00";
27
+ var _timecode$split$map = timecode.split(":").map(Number),
28
+ _timecode$split$map2 = (0, _slicedToArray2["default"])(_timecode$split$map, 3),
29
+ hh = _timecode$split$map2[0],
30
+ mm = _timecode$split$map2[1],
31
+ ss = _timecode$split$map2[2];
32
+ var frames = 0; // default to 00 if no fractional data
33
+ var paddedFrames = String(frames).padStart(2, "0");
34
+ return "".concat(String(hh).padStart(2, "0"), ":").concat(String(mm).padStart(2, "0"), ":").concat(String(ss).padStart(2, "0"), ":").concat(paddedFrames);
35
+ };
36
+ var convertHHMMSSFF_to_HHMMSS = exports.convertHHMMSSFF_to_HHMMSS = function convertHHMMSSFF_to_HHMMSS(timecode) {
37
+ if (!timecode) return "00:00:00";
38
+ var _timecode$split = timecode.split(":"),
39
+ _timecode$split2 = (0, _slicedToArray2["default"])(_timecode$split, 3),
40
+ hh = _timecode$split2[0],
41
+ mm = _timecode$split2[1],
42
+ ss = _timecode$split2[2]; // Ignore frames
43
+ return "".concat(hh, ":").concat(mm, ":").concat(ss);
44
+ };
45
+ var convertHHMMSSFF_to_HHMMSSmmm = exports.convertHHMMSSFF_to_HHMMSSmmm = function convertHHMMSSFF_to_HHMMSSmmm(timecode) {
46
+ var fps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 25;
47
+ if (!timecode) return "00:00:00:000";
48
+ var singleFrameMilliseocnds = 1000 / parseInt(fps);
49
+ var upperLimit = 999 % parseInt(fps) * singleFrameMilliseocnds;
50
+ var parts = timecode.split(":").map(Number);
51
+ var _map = [0, 0, 0, 0].map(function (_, i) {
52
+ var _parts$i;
53
+ return (_parts$i = parts[i]) !== null && _parts$i !== void 0 ? _parts$i : 0;
54
+ }),
55
+ _map2 = (0, _slicedToArray2["default"])(_map, 4),
56
+ _map2$ = _map2[0],
57
+ hh = _map2$ === void 0 ? 0 : _map2$,
58
+ _map2$2 = _map2[1],
59
+ mm = _map2$2 === void 0 ? 0 : _map2$2,
60
+ _map2$3 = _map2[2],
61
+ ss = _map2$3 === void 0 ? 0 : _map2$3,
62
+ _map2$4 = _map2[3],
63
+ ff = _map2$4 === void 0 ? 0 : _map2$4;
64
+ var totalMs = ff * (1000 / parseInt(fps));
65
+ var mmm = Math.min(upperLimit, Math.floor(totalMs)).toString().padStart(3, "0");
66
+ return "".concat(hh.toString().padStart(2, "0"), ":").concat(mm.toString().padStart(2, "0"), ":").concat(ss.toString().padStart(2, "0"), ":").concat(mmm);
67
+ };
68
+ var convertHHMMSSmmm_to_HHMMSSFF = exports.convertHHMMSSmmm_to_HHMMSSFF = function convertHHMMSSmmm_to_HHMMSSFF(timecode) {
69
+ var fps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 25;
70
+ if (!timecode) return "00:00:00:00";
71
+ var parts = timecode.split(":").map(Number);
72
+ var _map3 = [0, 0, 0, 0].map(function (_, i) {
73
+ var _parts$i2;
74
+ return (_parts$i2 = parts[i]) !== null && _parts$i2 !== void 0 ? _parts$i2 : 0;
75
+ }),
76
+ _map4 = (0, _slicedToArray2["default"])(_map3, 4),
77
+ _map4$ = _map4[0],
78
+ hh = _map4$ === void 0 ? 0 : _map4$,
79
+ _map4$2 = _map4[1],
80
+ mm = _map4$2 === void 0 ? 0 : _map4$2,
81
+ _map4$3 = _map4[2],
82
+ ss = _map4$3 === void 0 ? 0 : _map4$3,
83
+ _map4$4 = _map4[3],
84
+ mmm = _map4$4 === void 0 ? 0 : _map4$4;
85
+ var clampedMs = Math.min(Math.max(mmm, 0), 999);
86
+ var frame = Math.ceil(clampedMs / 1000 * fps);
87
+ var ff = frame.toString().padStart(2, "0");
88
+ return "".concat(hh.toString().padStart(2, "0"), ":").concat(mm.toString().padStart(2, "0"), ":").concat(ss.toString().padStart(2, "0"), ":").concat(ff);
89
+ };
90
+ function secondsToTime() {
91
+ var seconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
92
+ var frameRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 25;
93
+ var initialTimecodeInSeconds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
94
+ if (seconds > -1) {
95
+ // Calculate total frames
96
+ var totalFrames = Math.round((seconds + initialTimecodeInSeconds) * frameRate);
97
+
98
+ // Calculate new timecode
99
+ var newSeconds = Math.floor(totalFrames / frameRate);
100
+ var remainderFrames = totalFrames % frameRate;
101
+
102
+ // Calculate fractional frames within the range [0, 1)
103
+ var fractionalFrames = remainderFrames / frameRate;
104
+ var newFF = Math.floor(fractionalFrames * frameRate).toString().padStart(2, "0");
105
+ var newSS = newSeconds % 60;
106
+ var newMM = Math.floor(newSeconds / 60) % 60;
107
+ var newHH = Math.floor(newSeconds / 3600);
108
+
109
+ // Format and return the new timecode
110
+ return "".concat(newHH.toString().padStart(2, "0"), ":").concat(newMM.toString().padStart(2, "0"), ":").concat(newSS.toString().padStart(2, "0"), ":").concat(newFF);
111
+ }
112
+ return "00:00:00:00";
113
+ }
21
114
  var cleanHtml = exports.cleanHtml = function cleanHtml(htmlStr) {
22
115
  return htmlStr.replace(/"/g, '"') // Replace " with "
23
- .replace(/ /g, ' ') // Replace   with a space
116
+ .replace(/ /g, " ") // Replace   with a space
24
117
  .replace(/'|'|'/g, "'") // Replace ' and ' with '
25
- .replace(/&|&;/g, '&') // Replace & and &; with &
26
- .replace(/&lt;/g, '<') // Replace &lt; with <
27
- .replace(/&gt;/g, '>') // Replace &gt; with >
118
+ .replace(/&amp;|&;/g, "&") // Replace &amp; and &; with &
119
+ .replace(/&lt;/g, "<") // Replace &lt; with <
120
+ .replace(/&gt;/g, ">") // Replace &gt; with >
28
121
  .replace(/[\u2018\u2019]/g, "'") // Replace special single quotes
29
122
  .replace(/[\u201C\u201D]/g, '"') // Replace special double quotes
30
- .replace(/<br\s*\/?>/gi, '') // Remove <br> tags
31
- .replace(/\s{2,}/g, ' ') // Replace multiple spaces with a single space
32
- .replace(/\s\s+/g, '').replace(/\t/g, '').replace(/\\"/g, '"').replace(/\n/g, ' ');
123
+ .replace(/<br\s*\/?>/gi, "") // Remove <br> tags
124
+ .replace(/\s{2,}/g, " ") // Replace multiple spaces with a single space
125
+ .replace(/\s\s+/g, "").replace(/\t/g, "").replace(/\\"/g, '"').replace(/\n/g, " ");
33
126
  };
34
127
 
35
128
  /**
package/atoms/icon/icons.json CHANGED
@@ -1694,6 +1694,15 @@
1694
1694
  ],
1695
1695
  "width": 11,
1696
1696
  "height": 8
1697
+ },
1698
+ "pending-with-chevron": {
1699
+ "paths": [
1700
+ "M5.994 0A5.997 5.997 0 0 0 0 6c0 3.312 2.682 6 5.994 6A6.003 6.003 0 0 0 12 6c0-3.312-2.688-6-6.006-6zM6 10.8A4.799 4.799 0 0 1 1.2 6c0-2.652 2.148-4.8 4.8-4.8 2.652 0 4.8 2.148 4.8 4.8 0 2.652-2.148 4.8-4.8 4.8z",
1701
+ "M6.3 3h-.9v3.6l3.15 1.89.45-.738L6.3 6.15z",
1702
+ "M21 8.83594L25.33013 4.46094H16.66987L21 8.83594Z"
1703
+ ],
1704
+ "width": 26,
1705
+ "height": 12
1697
1706
  }
1698
1707
  }
1699
1708
  }
package/atoms/timeCodeDisplay/index.js ADDED
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _timeCodeDisplay = _interopRequireDefault(require("./timeCodeDisplay"));
9
+ var _default = exports["default"] = _timeCodeDisplay["default"];
package/atoms/timeCodeDisplay/timCodeInput.story.js ADDED
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _react = _interopRequireDefault(require("react"));
5
+ var _react2 = require("@storybook/react");
6
+ var _storyHelpers = require("../../_helpers/story-helpers");
7
+ var _timeCodeDisplay = _interopRequireDefault(require("./timeCodeDisplay"));
8
+ (0, _react2.storiesOf)("TimeCodeDisplay").add("dark theme", function () {
9
+ return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
10
+ title: "Appearances"
11
+ }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_timeCodeDisplay["default"], {
12
+ fps: "25",
13
+ selectedTimecodeFormat: "HH:MM:SS:FF",
14
+ timecode: "00:00:00:00"
15
+ }), /*#__PURE__*/_react["default"].createElement(_timeCodeDisplay["default"], {
16
+ fps: "25",
17
+ selectedTimecodeFormat: "HH:MM:SS:mmm",
18
+ timecode: "00:00:00:00"
19
+ }), /*#__PURE__*/_react["default"].createElement(_timeCodeDisplay["default"], {
20
+ fps: "25",
21
+ selectedTimecodeFormat: "HH:MM:SS",
22
+ timecode: "00:00:00:00"
23
+ })));
24
+ });
package/atoms/timeCodeDisplay/timeCodeDisplay.js ADDED
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _propTypes = _interopRequireDefault(require("prop-types"));
10
+ var _utils = require("../../_helpers/utils");
11
+ var TimeCodeDisplay = function TimeCodeDisplay(_ref) {
12
+ var timecode = _ref.timecode,
13
+ selectedTimecodeFormat = _ref.selectedTimecodeFormat,
14
+ _ref$fps = _ref.fps,
15
+ fps = _ref$fps === void 0 ? 25 : _ref$fps;
16
+ var displayValue = "00:00:00:00";
17
+ switch (selectedTimecodeFormat) {
18
+ case "HH:MM:SS":
19
+ displayValue = (0, _utils.convertHHMMSSFF_to_HHMMSS)(timecode);
20
+ break;
21
+ case "HH:MM:SS:FF":
22
+ displayValue = timecode;
23
+ break;
24
+ case "HH:MM:SS:mmm":
25
+ displayValue = (0, _utils.convertHHMMSSFF_to_HHMMSSmmm)(timecode, fps);
26
+ break;
27
+ default:
28
+ displayValue = timecode;
29
+ break;
30
+ }
31
+ return /*#__PURE__*/_react["default"].createElement("span", null, displayValue);
32
+ };
33
+ TimeCodeDisplay.propTypes = {
34
+ timecode: _propTypes["default"].string.isRequired,
35
+ selectedTimecodeFormat: _propTypes["default"].string.isRequired,
36
+ fps: _propTypes["default"].number
37
+ };
38
+ var _default = exports["default"] = TimeCodeDisplay;
package/atoms/timeCodeInput/timCodeInput.story.js CHANGED
@@ -5,7 +5,7 @@ var _react = _interopRequireDefault(require("react"));
5
5
  var _react2 = require("@storybook/react");
6
6
  var _storyHelpers = require("../../_helpers/story-helpers");
7
7
  var _timeCodeInput = _interopRequireDefault(require("./timeCodeInput"));
8
- (0, _react2.storiesOf)('TimeCodeInput').add('dark theme', function () {
8
+ (0, _react2.storiesOf)("TimeCodeInput").add("dark theme", function () {
9
9
  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
10
10
  title: "Appearances"
11
11
  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_timeCodeInput["default"], {
@@ -15,8 +15,31 @@ var _timeCodeInput = _interopRequireDefault(require("./timeCodeInput"));
15
15
  onFocus: function onFocus() {
16
16
  //perform your function here eg pause the video that is playing
17
17
  },
18
- frameRate: '25',
19
- initialTime: '00:00:00:00' || 0,
20
- playerDuration: '00:23:35:03' || 0
18
+ frameRate: "25",
19
+ timeCodeFormatType: "HH:MM:SS:FF",
20
+ initialTime: "00:00:00:00" || 0,
21
+ playerDuration: "00:23:35:03" || 0
22
+ }), /*#__PURE__*/_react["default"].createElement(_timeCodeInput["default"], {
23
+ theme: "nexc",
24
+ inputValue: "01:00:00:00" //time code input value
25
+ ,
26
+ timeCodeFormatType: "HH:MM:SS:mmm",
27
+ onFocus: function onFocus() {
28
+ //perform your function here eg pause the video that is playing
29
+ },
30
+ frameRate: "25",
31
+ initialTime: "00:00:00:00" || 0,
32
+ playerDuration: "00:23:35:03" || 0
33
+ }), /*#__PURE__*/_react["default"].createElement(_timeCodeInput["default"], {
34
+ theme: "nexc",
35
+ inputValue: "01:00:00:00" //time code input value
36
+ ,
37
+ timeCodeFormatType: "HH:MM:SS",
38
+ onFocus: function onFocus() {
39
+ //perform your function here eg pause the video that is playing
40
+ },
41
+ frameRate: "25",
42
+ initialTime: "00:00:00:00" || 0,
43
+ playerDuration: "00:23:35:03" || 0
21
44
  })));
22
45
  });
package/atoms/timeCodeInput/timeCodeInput.js CHANGED
@@ -6,178 +6,44 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports["default"] = void 0;
9
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
- var _utils = require("../../_helpers/utils");
14
- var _tokens = require("@desynova-digital/tokens");
15
- var _components = require("@desynova-digital/components");
16
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
12
+ var _propTypes = _interopRequireDefault(require("prop-types"));
13
+ var _timeCodeStandardInput = _interopRequireDefault(require("./timeCodeStandardInput"));
14
+ var _timeCodeMSInput = _interopRequireDefault(require("./timeCodeMSInput"));
15
+ var _timeCodeMainInput = _interopRequireDefault(require("./timeCodeMainInput"));
16
+ var _excluded = ["timeCodeFormatType"];
17
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
18
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
19
- var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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: ", ";\n }\n width: ", ";\n border-bottom:", ";\n padding-bottom: 1px; \n"])), function (props) {
20
- return props.isError ? '#FFFFFF' : props.errorStatement.length > 0 || props.checkBaiscErrorProp ? '#FF6C56' : '#FFFFFF';
21
- }, function (props) {
22
- return props.theme ? "".concat(_tokens.colors[props.theme].timeCodeInput.rgbthemeColor) : 'rgb(0 206 198)';
23
- }, function (props) {
24
- return props.width ? props.width : '72px';
25
- }, function (props) {
26
- var _props$name, _props$name2;
27
- return !props.isError && ((_props$name = props.name) === null || _props$name === void 0 ? void 0 : _props$name.length) > 0 ? props.errorStatement.length > 0 ? '1px solid #FF6C56' : '1px solid #303F51' : ((_props$name2 = props.name) === null || _props$name2 === void 0 ? void 0 : _props$name2.length) > 0 ? '1px solid #303F51' : '0px';
19
+ var TimeCodeInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
20
+ var _ref$timeCodeFormatTy = _ref.timeCodeFormatType,
21
+ timeCodeFormatType = _ref$timeCodeFormatTy === void 0 ? "HH:MM:SS:FF" : _ref$timeCodeFormatTy,
22
+ rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
23
+ switch (timeCodeFormatType) {
24
+ case "HH:MM:SS":
25
+ return /*#__PURE__*/_react["default"].createElement(_timeCodeStandardInput["default"], (0, _extends2["default"])({
26
+ key: timeCodeFormatType
27
+ }, rest, {
28
+ ref: ref
29
+ }));
30
+ case "HH:MM:SS:mmm":
31
+ return /*#__PURE__*/_react["default"].createElement(_timeCodeMSInput["default"], (0, _extends2["default"])({
32
+ key: timeCodeFormatType
33
+ }, rest, {
34
+ ref: ref
35
+ }));
36
+ case "HH:MM:SS:FF":
37
+ return /*#__PURE__*/_react["default"].createElement(_timeCodeMainInput["default"], (0, _extends2["default"])({
38
+ key: timeCodeFormatType
39
+ }, rest, {
40
+ ref: ref
41
+ }));
42
+ default:
43
+ return null;
44
+ }
28
45
  });
29
- var CrossIconWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n margin-top: 5px;\n width: fit-content;\n &:hover {\n cursor: pointer;\n }\n svg path {\n fill: #FF6C56;\n }\n"])));
30
- var StyledDiv = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n gap: 10px;\n"])));
31
- var ErrorContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n color: #FF6C56;\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 15px;\n"])));
32
- var InputHeading = _styledComponents["default"].p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n color: #afb2ba;\n font-size: 10px;\n text-transform: uppercase;\n margin-bottom: 8px;\n margin-top: 15px;\n"])));
33
- var TimeCodeInput = function TimeCodeInput(_ref) {
34
- var inputValue = _ref.inputValue,
35
- onFocus = _ref.onFocus,
36
- onBlur = _ref.onBlur,
37
- onKeyDown = _ref.onKeyDown,
38
- frameRate = _ref.frameRate,
39
- initialTime = _ref.initialTime,
40
- playerDuration = _ref.playerDuration,
41
- elementRef = _ref.elementRef,
42
- width = _ref.width,
43
- _ref$theme = _ref.theme,
44
- theme = _ref$theme === void 0 ? 'dark' : _ref$theme,
45
- customValidity = _ref.customValidity,
46
- inputFieldType = _ref.inputFieldType,
47
- customValidityFn = _ref.customValidityFn,
48
- _ref$showCross = _ref.showCross,
49
- showCross = _ref$showCross === void 0 ? false : _ref$showCross,
50
- crossClicked = _ref.crossClicked,
51
- _ref$showError = _ref.showError,
52
- showError = _ref$showError === void 0 ? false : _ref$showError,
53
- _ref$errorStatement = _ref.errorStatement,
54
- errorStatement = _ref$errorStatement === void 0 ? '' : _ref$errorStatement,
55
- updateFormDataExternally = _ref.updateFormDataExternally,
56
- inputTitle = _ref.inputTitle,
57
- _ref$checkBaiscError = _ref.checkBaiscError,
58
- checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError;
59
- var _useState = (0, _react.useState)(inputValue || '00:00:00:00'),
60
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
61
- customInputValue = _useState2[0],
62
- setCustomInputValue = _useState2[1];
63
- var _useState3 = (0, _react.useState)(true),
64
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
65
- isValid = _useState4[0],
66
- setIsValid = _useState4[1];
67
- var onTimePickerChange = function onTimePickerChange(value, e) {
68
- var inputTime = value;
69
- var formattedTime = inputTime;
70
- if (e && e.target && e.target.selectionStart !== undefined) {
71
- var cursorPosition = e.target.selectionStart;
72
- if ((cursorPosition === 2 || cursorPosition === 5 || cursorPosition === 8) && e.nativeEvent.inputType !== 'insertText' && inputTime.length >= 11) {
73
- formattedTime = inputTime;
74
- } else {
75
- var cleanedTime = inputTime.replace(/[^\d]/g, '');
76
- formattedTime = cleanedTime.replace(/(\d{2})(?=\d)/g, '$1:');
77
- }
78
- e.target.value = formattedTime;
79
- // Save the cursor position before modifying the value
80
- var newCursorPosition = cursorPosition;
81
-
82
- // Adjust cursor position if necessary
83
- if (inputTime.length >= formattedTime.length && inputTime[cursorPosition - 1] === ':') {
84
- // If a number before ":" is deleted, keep the cursor next to ":"
85
- newCursorPosition = cursorPosition;
86
- } else if (cursorPosition % 3 === 0 && cursorPosition !== 0) {
87
- // If the cursor is at a position that was just after adding a colon
88
- newCursorPosition = cursorPosition + 1;
89
- }
90
- e.target.setSelectionRange(newCursorPosition, newCursorPosition);
91
- setCustomInputValue(e.target.value);
92
- }
93
- };
94
- var checkIfTimeValid = function checkIfTimeValid(value) {
95
- var isValid = false;
96
- if (value) {
97
- var timeRegex = new RegExp('^(?:[0-5][0-9]):(?:[0-5][0-9]):(?:[0-5][0-9]):[0-9]{2}$');
98
- if (timeRegex.test(value) && parseInt(value.split(':')[3]) <= frameRate && value.split(':')[3].length === 2) {
99
- var selectedValueTime = (0, _utils.timeToSeconds)(value, frameRate);
100
- var endTime = initialTime + playerDuration;
101
- if (selectedValueTime >= initialTime && selectedValueTime <= endTime && !customValidity) {
102
- setIsValid(true);
103
- return true;
104
- }
105
- if (customValidity) {
106
- var val = customValidityFn(inputFieldType, value);
107
- setIsValid(val);
108
- return val;
109
- }
110
- }
111
- if (customValidity) {
112
- var _val = customValidityFn(inputFieldType, value);
113
- setIsValid(_val);
114
- return _val;
115
- }
116
- }
117
- setIsValid(false);
118
- return isValid;
119
- };
120
- (0, _react.useEffect)(function () {
121
- var handleEscapeKey = function handleEscapeKey(event) {
122
- if (event.key === 'Escape') {
123
- setCustomInputValue(inputValue);
124
- setIsValid(true); // Reset to original
125
- document.activeElement.blur();
126
- }
127
- };
128
- customValidity && inputValue && checkIfTimeValid(inputValue);
129
- setCustomInputValue(inputValue);
130
- document.addEventListener('keydown', handleEscapeKey);
131
- return function () {
132
- document.removeEventListener('keydown', handleEscapeKey);
133
- };
134
- }, [inputValue]);
135
- (0, _react.useImperativeHandle)(elementRef, function () {
136
- return {
137
- checkValidity: function checkValidity() {
138
- return checkIfTimeValid(customInputValue);
139
- },
140
- inputValue: customInputValue,
141
- inputFieldType: inputFieldType,
142
- returnValidity: function returnValidity() {
143
- return isValid;
144
- }
145
- };
146
- });
147
- var onChangeFn = function onChangeFn(e) {
148
- onTimePickerChange(e.target.value, e);
149
- checkIfTimeValid(e.target.value);
150
- // if(checkIfTimeValid(e.target.value)) {
151
- if (e.target.value.length) {
152
- updateFormDataExternally(inputFieldType, e.target.value);
153
- }
154
- // }
155
- };
156
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDiv, null, inputTitle && /*#__PURE__*/_react["default"].createElement(InputHeading, null, inputTitle), showCross && /*#__PURE__*/_react["default"].createElement(CrossIconWrapper, {
157
- onClick: crossClicked
158
- }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
159
- name: "cross",
160
- width: 7,
161
- height: 7
162
- }))), /*#__PURE__*/_react["default"].createElement(StyledInput, {
163
- name: inputFieldType,
164
- theme: theme,
165
- width: width,
166
- ref: elementRef,
167
- value: customInputValue,
168
- onFocus: onFocus,
169
- onKeyDown: onKeyDown,
170
- onChange: function onChange(e) {
171
- return onChangeFn(e);
172
- }
173
- // onBlur={(e) => timecodeBlur(e.target.value)}
174
- ,
175
- isError: isValid,
176
- maxLength: "11",
177
- checkBaiscErrorProp: checkBaiscError || false,
178
- errorStatement: errorStatement || ''
179
- }), showError && errorStatement.length > 0 && /*#__PURE__*/_react["default"].createElement(ErrorContainer, {
180
- inputFieldType: inputFieldType
181
- }, " ", errorStatement));
46
+ TimeCodeInput.propTypes = {
47
+ timeCodeFormatType: _propTypes["default"].string.isRequired
182
48
  };
183
49
  var _default = exports["default"] = TimeCodeInput;
package/atoms/timeCodeInput/timeCodeMSInput.js ADDED
@@ -0,0 +1,223 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+ var _utils = require("../../_helpers/utils");
14
+ var _tokens = require("@desynova-digital/tokens");
15
+ var _components = require("@desynova-digital/components");
16
+ var _propTypes = _interopRequireDefault(require("prop-types"));
17
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
18
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
20
+ var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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: ", ";\n }\n width: ", ";\n border-bottom: ", ";\n padding-bottom: 1px;\n"])), function (props) {
21
+ return props.isValid ? "#FFFFFF" : props.errorStatement.length > 0 || props.checkBaiscErrorProp ? "#FF6C56" : "#FFFFFF";
22
+ }, function (props) {
23
+ return props.theme ? "".concat(_tokens.colors[props.theme].timeCodeInput.rgbthemeColor) : "rgb(0 206 198)";
24
+ }, function (props) {
25
+ return props.width ? props.width : "102px";
26
+ }, function (props) {
27
+ var _props$name, _props$name2;
28
+ return !props.isValid && ((_props$name = props.name) === null || _props$name === void 0 ? void 0 : _props$name.length) > 0 ? props.errorStatement.length > 0 ? "1px solid #FF6C56" : "1px solid #303F51" : ((_props$name2 = props.name) === null || _props$name2 === void 0 ? void 0 : _props$name2.length) > 0 ? "1px solid #303F51" : "0px";
29
+ });
30
+ var CrossIconWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n margin-top: 5px;\n width: fit-content;\n &:hover {\n cursor: pointer;\n }\n svg path {\n fill: #ff6c56;\n }\n"])));
31
+ var StyledDiv = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n gap: 10px;\n"])));
32
+ var ErrorContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n color: #ff6c56;\n font-family: \"SFUIText-Regular\";\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 15px;\n"])));
33
+ var InputHeading = _styledComponents["default"].p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n color: #afb2ba;\n font-size: 10px;\n text-transform: uppercase;\n margin-bottom: 8px;\n margin-top: 15px;\n"])));
34
+ var TimeCodeMSInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
35
+ var inputValue = _ref.inputValue,
36
+ onFocus = _ref.onFocus,
37
+ onBlur = _ref.onBlur,
38
+ onKeyDown = _ref.onKeyDown,
39
+ frameRate = _ref.frameRate,
40
+ initialTime = _ref.initialTime,
41
+ playerDuration = _ref.playerDuration,
42
+ width = _ref.width,
43
+ _ref$theme = _ref.theme,
44
+ theme = _ref$theme === void 0 ? "dark" : _ref$theme,
45
+ customValidity = _ref.customValidity,
46
+ inputFieldType = _ref.inputFieldType,
47
+ customValidityFn = _ref.customValidityFn,
48
+ _ref$showCross = _ref.showCross,
49
+ showCross = _ref$showCross === void 0 ? false : _ref$showCross,
50
+ crossClicked = _ref.crossClicked,
51
+ _ref$showError = _ref.showError,
52
+ showError = _ref$showError === void 0 ? false : _ref$showError,
53
+ _ref$errorStatement = _ref.errorStatement,
54
+ errorStatement = _ref$errorStatement === void 0 ? "" : _ref$errorStatement,
55
+ updateFormDataExternally = _ref.updateFormDataExternally,
56
+ inputTitle = _ref.inputTitle,
57
+ _ref$checkBaiscError = _ref.checkBaiscError,
58
+ checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError;
59
+ var _useState = (0, _react.useState)((0, _utils.convertHHMMSSFF_to_HHMMSSmmm)(inputValue, frameRate) || "00:00:00:000"),
60
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
61
+ customInputValue = _useState2[0],
62
+ setCustomInputValue = _useState2[1];
63
+ var _useState3 = (0, _react.useState)(true),
64
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
65
+ isValid = _useState4[0],
66
+ setIsValid = _useState4[1];
67
+ var onTimePickerChange = function onTimePickerChange(value, e) {
68
+ var _e$target;
69
+ var inputTime = value;
70
+ var formattedTime = inputTime;
71
+ if ((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.selectionStart) !== undefined) {
72
+ var cursorPosition = e.target.selectionStart;
73
+ var cleanedTime = inputTime.replace(/[^\d]/g, "");
74
+ if (cleanedTime.length <= 2) {
75
+ formattedTime = cleanedTime;
76
+ } else if (cleanedTime.length <= 4) {
77
+ formattedTime = "".concat(cleanedTime.slice(0, 2), ":").concat(cleanedTime.slice(2));
78
+ } else if (cleanedTime.length <= 6) {
79
+ formattedTime = "".concat(cleanedTime.slice(0, 2), ":").concat(cleanedTime.slice(2, 4), ":").concat(cleanedTime.slice(4));
80
+ } else {
81
+ formattedTime = "".concat(cleanedTime.slice(0, 2), ":").concat(cleanedTime.slice(2, 4), ":").concat(cleanedTime.slice(4, 6), ":").concat(cleanedTime.slice(6, 9));
82
+ }
83
+ e.target.value = formattedTime;
84
+ var newCursorPosition = cursorPosition;
85
+ if (inputTime.length >= formattedTime.length && inputTime[cursorPosition - 1] === ":") {
86
+ newCursorPosition = cursorPosition;
87
+ } else if (cursorPosition % 3 === 0 && cursorPosition !== 0) {
88
+ newCursorPosition = cursorPosition + 1;
89
+ }
90
+ e.target.setSelectionRange(newCursorPosition, newCursorPosition);
91
+ setCustomInputValue(e.target.value);
92
+ }
93
+ };
94
+ var checkIfTimeValid = function checkIfTimeValid(value) {
95
+ var isValid = false;
96
+ if (value) {
97
+ var timeRegex = new RegExp("^(?:[0-5][0-9]):(?:[0-5][0-9]):(?:[0-5][0-9]):[0-9]{2}$");
98
+ if (timeRegex.test(value) && parseInt(value.split(":")[3]) <= frameRate && value.split(":")[3].length === 2) {
99
+ var selectedValueTime = (0, _utils.timeToSeconds)(value, frameRate);
100
+ if (initialTime && playerDuration) {
101
+ var endTime = initialTime + playerDuration;
102
+ if (selectedValueTime >= initialTime && selectedValueTime <= endTime && !customValidity) {
103
+ setIsValid(true);
104
+ return true;
105
+ }
106
+ } else if (!customValidity) {
107
+ setIsValid(true);
108
+ return true;
109
+ }
110
+ if (customValidity) {
111
+ var val = customValidityFn(inputFieldType, value);
112
+ setIsValid(val);
113
+ return val;
114
+ }
115
+ }
116
+ if (customValidity) {
117
+ var _val = customValidityFn(inputFieldType, value);
118
+ setIsValid(_val);
119
+ return _val;
120
+ }
121
+ }
122
+ setIsValid(false);
123
+ return isValid;
124
+ };
125
+ (0, _react.useEffect)(function () {
126
+ var handleEscapeKey = function handleEscapeKey(event) {
127
+ if (event.key === "Escape") {
128
+ setCustomInputValue((0, _utils.convertHHMMSSFF_to_HHMMSSmmm)(inputValue));
129
+ setIsValid(true);
130
+ document.activeElement.blur();
131
+ }
132
+ };
133
+ if (inputValue) {
134
+ checkIfTimeValid((0, _utils.convertHHMMSSmmm_to_HHMMSSFF)(inputValue, frameRate));
135
+ }
136
+ setCustomInputValue((0, _utils.convertHHMMSSFF_to_HHMMSSmmm)(inputValue, frameRate));
137
+ document.addEventListener("keydown", handleEscapeKey);
138
+ return function () {
139
+ document.removeEventListener("keydown", handleEscapeKey);
140
+ };
141
+ }, [inputValue]);
142
+ (0, _react.useImperativeHandle)(ref, function () {
143
+ return {
144
+ checkValidity: function checkValidity() {
145
+ return checkIfTimeValid((0, _utils.convertHHMMSSmmm_to_HHMMSSFF)(customInputValue, frameRate));
146
+ },
147
+ inputValue: (0, _utils.convertHHMMSSmmm_to_HHMMSSFF)(customInputValue, frameRate),
148
+ inputFieldType: inputFieldType,
149
+ returnValidity: function returnValidity() {
150
+ return isValid;
151
+ }
152
+ };
153
+ });
154
+ var onChangeFn = function onChangeFn(e) {
155
+ onTimePickerChange(e.target.value, e);
156
+ };
157
+ var onKeyDownFn = function onKeyDownFn(e) {
158
+ if (e.key === "Enter") {
159
+ handleUpdate(e.target.value);
160
+ if (typeof onBlur === "function") onBlur(e);
161
+ }
162
+ if (typeof onKeyDown === "function") onKeyDown(e);
163
+ };
164
+ var onBlurFn = function onBlurFn(e) {
165
+ handleUpdate(e.target.value);
166
+ if (typeof onBlur === "function") onBlur(e);
167
+ };
168
+ var handleUpdate = function handleUpdate(value) {
169
+ console.log("here", (0, _utils.convertHHMMSSmmm_to_HHMMSSFF)(value, frameRate));
170
+ if (value.length) {
171
+ checkIfTimeValid((0, _utils.convertHHMMSSmmm_to_HHMMSSFF)(value, frameRate));
172
+ if (typeof updateFormDataExternally === "function") updateFormDataExternally(inputFieldType, (0, _utils.convertHHMMSSmmm_to_HHMMSSFF)(value, frameRate));
173
+ }
174
+ };
175
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDiv, null, inputTitle && /*#__PURE__*/_react["default"].createElement(InputHeading, null, inputTitle), showCross && /*#__PURE__*/_react["default"].createElement(CrossIconWrapper, {
176
+ onClick: crossClicked
177
+ }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
178
+ name: "cross",
179
+ width: 7,
180
+ height: 7
181
+ }))), /*#__PURE__*/_react["default"].createElement(StyledInput, {
182
+ name: inputFieldType,
183
+ theme: theme,
184
+ width: width,
185
+ value: customInputValue,
186
+ onFocus: onFocus,
187
+ onBlur: onBlurFn,
188
+ ref: ref,
189
+ onKeyDown: onKeyDownFn,
190
+ onChange: function onChange(e) {
191
+ return onChangeFn(e);
192
+ },
193
+ isValid: isValid,
194
+ maxLength: "12",
195
+ checkBaiscErrorProp: checkBaiscError || false,
196
+ errorStatement: errorStatement || ""
197
+ }), showError && errorStatement.length > 0 && /*#__PURE__*/_react["default"].createElement(ErrorContainer, {
198
+ inputFieldType: inputFieldType
199
+ }, errorStatement));
200
+ });
201
+ TimeCodeMSInput.propTypes = {
202
+ inputValue: _propTypes["default"].string.isRequired,
203
+ onFocus: _propTypes["default"].func,
204
+ onBlur: _propTypes["default"].func,
205
+ onKeyDown: _propTypes["default"].func,
206
+ frameRate: _propTypes["default"].number,
207
+ initialTime: _propTypes["default"].number,
208
+ playerDuration: _propTypes["default"].number,
209
+ elementRef: _propTypes["default"].object,
210
+ width: _propTypes["default"].string,
211
+ theme: _propTypes["default"].oneOf(["dark", "light"]),
212
+ customValidity: _propTypes["default"].bool,
213
+ inputFieldType: _propTypes["default"].string.isRequired,
214
+ customValidityFn: _propTypes["default"].func,
215
+ showCross: _propTypes["default"].bool,
216
+ crossClicked: _propTypes["default"].func,
217
+ showError: _propTypes["default"].bool,
218
+ errorStatement: _propTypes["default"].string,
219
+ updateFormDataExternally: _propTypes["default"].func,
220
+ inputTitle: _propTypes["default"].string,
221
+ checkBaiscError: _propTypes["default"].bool
222
+ };
223
+ var _default = exports["default"] = TimeCodeMSInput;
package/atoms/timeCodeInput/timeCodeMainInput.js ADDED
@@ -0,0 +1,231 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+ var _utils = require("../../_helpers/utils");
14
+ var _tokens = require("@desynova-digital/tokens");
15
+ var _components = require("@desynova-digital/components");
16
+ var _propTypes = _interopRequireDefault(require("prop-types"));
17
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
18
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
20
+ var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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: ", ";\n }\n width: ", ";\n border-bottom: ", ";\n padding-bottom: 1px;\n"])), function (props) {
21
+ return props.isError ? "#FFFFFF" : props.errorStatement.length > 0 || props.checkBaiscErrorProp ? "#FF6C56" : "#FFFFFF";
22
+ }, function (props) {
23
+ return props.theme ? "".concat(_tokens.colors[props.theme].timeCodeInput.rgbthemeColor) : "rgb(0 206 198)";
24
+ }, function (props) {
25
+ return props.width ? props.width : "102px";
26
+ }, function (props) {
27
+ var _props$name, _props$name2;
28
+ return !props.isError && ((_props$name = props.name) === null || _props$name === void 0 ? void 0 : _props$name.length) > 0 ? props.errorStatement.length > 0 ? "1px solid #FF6C56" : "1px solid #303F51" : ((_props$name2 = props.name) === null || _props$name2 === void 0 ? void 0 : _props$name2.length) > 0 ? "1px solid #303F51" : "0px";
29
+ });
30
+ var CrossIconWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n margin-top: 5px;\n width: fit-content;\n &:hover {\n cursor: pointer;\n }\n svg path {\n fill: #ff6c56;\n }\n"])));
31
+ var StyledDiv = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n gap: 10px;\n"])));
32
+ var ErrorContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n color: #ff6c56;\n font-family: \"SFUIText-Regular\";\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 15px;\n"])));
33
+ var InputHeading = _styledComponents["default"].p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n color: #afb2ba;\n font-size: 10px;\n text-transform: uppercase;\n margin-bottom: 8px;\n margin-top: 15px;\n"])));
34
+ var TimeCodeMainInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
35
+ var inputValue = _ref.inputValue,
36
+ onFocus = _ref.onFocus,
37
+ onBlur = _ref.onBlur,
38
+ onKeyDown = _ref.onKeyDown,
39
+ frameRate = _ref.frameRate,
40
+ initialTime = _ref.initialTime,
41
+ playerDuration = _ref.playerDuration,
42
+ width = _ref.width,
43
+ _ref$theme = _ref.theme,
44
+ theme = _ref$theme === void 0 ? "dark" : _ref$theme,
45
+ customValidity = _ref.customValidity,
46
+ inputFieldType = _ref.inputFieldType,
47
+ customValidityFn = _ref.customValidityFn,
48
+ _ref$showCross = _ref.showCross,
49
+ showCross = _ref$showCross === void 0 ? false : _ref$showCross,
50
+ crossClicked = _ref.crossClicked,
51
+ _ref$showError = _ref.showError,
52
+ showError = _ref$showError === void 0 ? false : _ref$showError,
53
+ _ref$errorStatement = _ref.errorStatement,
54
+ errorStatement = _ref$errorStatement === void 0 ? "" : _ref$errorStatement,
55
+ updateFormDataExternally = _ref.updateFormDataExternally,
56
+ inputTitle = _ref.inputTitle,
57
+ _ref$checkBaiscError = _ref.checkBaiscError,
58
+ checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError;
59
+ var _useState = (0, _react.useState)(inputValue || "00:00:00:00"),
60
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
61
+ customInputValue = _useState2[0],
62
+ setCustomInputValue = _useState2[1];
63
+ var _useState3 = (0, _react.useState)(true),
64
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
65
+ isValid = _useState4[0],
66
+ setIsValid = _useState4[1];
67
+ var onTimePickerChange = function onTimePickerChange(value, e) {
68
+ var inputTime = value;
69
+ var formattedTime = inputTime;
70
+ if (e && e.target && e.target.selectionStart !== undefined) {
71
+ var cursorPosition = e.target.selectionStart;
72
+ if ((cursorPosition === 2 || cursorPosition === 5 || cursorPosition === 8) && e.nativeEvent.inputType !== "insertText" && inputTime.length >= 11) {
73
+ formattedTime = inputTime;
74
+ } else {
75
+ var cleanedTime = inputTime.replace(/[^\d]/g, "");
76
+ formattedTime = cleanedTime.replace(/(\d{2})(?=\d)/g, "$1:");
77
+ }
78
+ e.target.value = formattedTime;
79
+ // Save the cursor position before modifying the value
80
+ var newCursorPosition = cursorPosition;
81
+
82
+ // Adjust cursor position if necessary
83
+ if (inputTime.length >= formattedTime.length && inputTime[cursorPosition - 1] === ":") {
84
+ // If a number before ":" is deleted, keep the cursor next to ":"
85
+ newCursorPosition = cursorPosition;
86
+ } else if (cursorPosition % 3 === 0 && cursorPosition !== 0) {
87
+ // If the cursor is at a position that was just after adding a colon
88
+ newCursorPosition = cursorPosition + 1;
89
+ }
90
+ e.target.setSelectionRange(newCursorPosition, newCursorPosition);
91
+ setCustomInputValue(e.target.value);
92
+ }
93
+ };
94
+ var checkIfTimeValid = function checkIfTimeValid(value) {
95
+ var isValid = false;
96
+ if (value) {
97
+ var timeRegex = new RegExp("^(?:[0-5][0-9]):(?:[0-5][0-9]):(?:[0-5][0-9]):[0-9]{2}$");
98
+ if (timeRegex.test(value) && parseInt(value.split(":")[3]) <= frameRate && value.split(":")[3].length === 2) {
99
+ var selectedValueTime = (0, _utils.timeToSeconds)(value, frameRate);
100
+ if (initialTime && playerDuration) {
101
+ var endTime = initialTime + playerDuration;
102
+ if (selectedValueTime >= initialTime && selectedValueTime <= endTime && !customValidity) {
103
+ setIsValid(true);
104
+ return true;
105
+ }
106
+ } else if (!customValidity) {
107
+ setIsValid(true);
108
+ return true;
109
+ }
110
+ if (customValidity) {
111
+ var val = customValidityFn(inputFieldType, value);
112
+ setIsValid(val);
113
+ return val;
114
+ }
115
+ }
116
+ if (customValidity) {
117
+ var _val = customValidityFn(inputFieldType, value);
118
+ setIsValid(_val);
119
+ return _val;
120
+ }
121
+ }
122
+ setIsValid(false);
123
+ return isValid;
124
+ };
125
+ (0, _react.useEffect)(function () {
126
+ var handleEscapeKey = function handleEscapeKey(event) {
127
+ if (event.key === "Escape") {
128
+ setCustomInputValue(inputValue);
129
+ setIsValid(true); // Reset to original
130
+ document.activeElement.blur();
131
+ }
132
+ };
133
+ if (inputValue) checkIfTimeValid(inputValue);
134
+ setCustomInputValue(inputValue);
135
+ document.addEventListener("keydown", handleEscapeKey);
136
+ return function () {
137
+ document.removeEventListener("keydown", handleEscapeKey);
138
+ };
139
+ }, [inputValue]);
140
+ (0, _react.useImperativeHandle)(ref, function () {
141
+ return {
142
+ checkValidity: function checkValidity() {
143
+ return checkIfTimeValid(customInputValue);
144
+ },
145
+ inputValue: customInputValue,
146
+ inputFieldType: inputFieldType,
147
+ returnValidity: function returnValidity() {
148
+ return isValid;
149
+ }
150
+ };
151
+ });
152
+ var onChangeFn = function onChangeFn(e) {
153
+ onTimePickerChange(e.target.value, e);
154
+ /*
155
+ * checkIfTimeValid(e.target.value);
156
+ * if(checkIfTimeValid(e.target.value)) {
157
+ * if (e.target.value.length) {
158
+ * updateFormDataExternally(inputFieldType, e.target.value);
159
+ * }
160
+ * }
161
+ */
162
+ };
163
+ var onKeyDownFn = function onKeyDownFn(e) {
164
+ if (e.key === "Enter") {
165
+ handleUpdate(e.target.value);
166
+ if (typeof onBlur === "function") onBlur(e);
167
+ }
168
+ if (typeof onKeyDown === "function") onKeyDown(e);
169
+ };
170
+ var onBlurFn = function onBlurFn(e) {
171
+ handleUpdate(e.target.value);
172
+ if (typeof onBlur === "function") onBlur(e);
173
+ };
174
+ var handleUpdate = function handleUpdate(value) {
175
+ console.log("here", value);
176
+ if (value.length) {
177
+ checkIfTimeValid(value);
178
+ if (typeof updateFormDataExternally === "function") updateFormDataExternally(inputFieldType, value);
179
+ }
180
+ };
181
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDiv, null, inputTitle && /*#__PURE__*/_react["default"].createElement(InputHeading, null, inputTitle), showCross && /*#__PURE__*/_react["default"].createElement(CrossIconWrapper, {
182
+ onClick: crossClicked
183
+ }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
184
+ name: "cross",
185
+ width: 7,
186
+ height: 7
187
+ }))), /*#__PURE__*/_react["default"].createElement(StyledInput, {
188
+ name: inputFieldType,
189
+ theme: theme,
190
+ width: width,
191
+ ref: ref,
192
+ value: customInputValue,
193
+ onFocus: onFocus,
194
+ onKeyDown: function onKeyDown(e) {
195
+ return onKeyDownFn(e);
196
+ },
197
+ onChange: function onChange(e) {
198
+ return onChangeFn(e);
199
+ },
200
+ onBlur: onBlurFn,
201
+ isError: isValid,
202
+ maxLength: "11",
203
+ checkBaiscErrorProp: checkBaiscError || false,
204
+ errorStatement: errorStatement || ""
205
+ }), showError && errorStatement.length > 0 && /*#__PURE__*/_react["default"].createElement(ErrorContainer, {
206
+ inputFieldType: inputFieldType
207
+ }, " ", errorStatement));
208
+ });
209
+ TimeCodeMainInput.propTypes = {
210
+ inputValue: _propTypes["default"].string.isRequired,
211
+ onFocus: _propTypes["default"].func,
212
+ onBlur: _propTypes["default"].func,
213
+ onKeyDown: _propTypes["default"].func,
214
+ frameRate: _propTypes["default"].number,
215
+ initialTime: _propTypes["default"].number,
216
+ playerDuration: _propTypes["default"].number,
217
+ elementRef: _propTypes["default"].object,
218
+ width: _propTypes["default"].string,
219
+ theme: _propTypes["default"].oneOf(["dark", "light"]),
220
+ customValidity: _propTypes["default"].bool,
221
+ inputFieldType: _propTypes["default"].string.isRequired,
222
+ customValidityFn: _propTypes["default"].func,
223
+ showCross: _propTypes["default"].bool,
224
+ crossClicked: _propTypes["default"].func,
225
+ showError: _propTypes["default"].bool,
226
+ errorStatement: _propTypes["default"].string,
227
+ updateFormDataExternally: _propTypes["default"].func,
228
+ inputTitle: _propTypes["default"].string,
229
+ checkBaiscError: _propTypes["default"].bool
230
+ };
231
+ var _default = exports["default"] = TimeCodeMainInput;
package/atoms/timeCodeInput/timeCodeStandardInput.js ADDED
@@ -0,0 +1,225 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
12
+ var _react = _interopRequireWildcard(require("react"));
13
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
14
+ var _utils = require("../../_helpers/utils");
15
+ var _tokens = require("@desynova-digital/tokens");
16
+ var _components = require("@desynova-digital/components");
17
+ var _propTypes = _interopRequireDefault(require("prop-types"));
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
19
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
21
+ var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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: ", ";\n }\n width: ", ";\n border-bottom: ", ";\n padding-bottom: 1px;\n"])), function (props) {
22
+ return props.isError ? "#FFFFFF" : props.errorStatement.length > 0 || props.checkBaiscErrorProp ? "#FF6C56" : "#FFFFFF";
23
+ }, function (props) {
24
+ return props.theme ? "".concat(_tokens.colors[props.theme].timeCodeInput.rgbthemeColor) : "rgb(0 206 198)";
25
+ }, function (props) {
26
+ return props.width ? props.width : "102px";
27
+ }, function (props) {
28
+ var _props$name, _props$name2;
29
+ return !props.isError && ((_props$name = props.name) === null || _props$name === void 0 ? void 0 : _props$name.length) > 0 ? props.errorStatement.length > 0 ? "1px solid #FF6C56" : "1px solid #303F51" : ((_props$name2 = props.name) === null || _props$name2 === void 0 ? void 0 : _props$name2.length) > 0 ? "1px solid #303F51" : "0px";
30
+ });
31
+ var CrossIconWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n margin-top: 5px;\n width: fit-content;\n &:hover {\n cursor: pointer;\n }\n svg path {\n fill: #ff6c56;\n }\n"])));
32
+ var StyledDiv = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n gap: 10px;\n"])));
33
+ var ErrorContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n color: #ff6c56;\n font-family: \"SFUIText-Regular\";\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 15px;\n"])));
34
+ var InputHeading = _styledComponents["default"].p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n color: #afb2ba;\n font-size: 10px;\n text-transform: uppercase;\n margin-bottom: 8px;\n margin-top: 15px;\n"])));
35
+ var TimeCodeStandardInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
36
+ var inputValue = _ref.inputValue,
37
+ onFocus = _ref.onFocus,
38
+ onBlur = _ref.onBlur,
39
+ onKeyDown = _ref.onKeyDown,
40
+ frameRate = _ref.frameRate,
41
+ initialTime = _ref.initialTime,
42
+ playerDuration = _ref.playerDuration,
43
+ elementRef = _ref.elementRef,
44
+ width = _ref.width,
45
+ _ref$theme = _ref.theme,
46
+ theme = _ref$theme === void 0 ? "dark" : _ref$theme,
47
+ customValidity = _ref.customValidity,
48
+ inputFieldType = _ref.inputFieldType,
49
+ customValidityFn = _ref.customValidityFn,
50
+ _ref$showCross = _ref.showCross,
51
+ showCross = _ref$showCross === void 0 ? false : _ref$showCross,
52
+ crossClicked = _ref.crossClicked,
53
+ _ref$showError = _ref.showError,
54
+ showError = _ref$showError === void 0 ? false : _ref$showError,
55
+ _ref$errorStatement = _ref.errorStatement,
56
+ errorStatement = _ref$errorStatement === void 0 ? "" : _ref$errorStatement,
57
+ updateFormDataExternally = _ref.updateFormDataExternally,
58
+ inputTitle = _ref.inputTitle,
59
+ _ref$checkBaiscError = _ref.checkBaiscError,
60
+ checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError;
61
+ var _useState = (0, _react.useState)((0, _utils.convertHHMMSSFF_to_HHMMSS)(inputValue, frameRate) || "00:00:00"),
62
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
63
+ customInputValue = _useState2[0],
64
+ setCustomInputValue = _useState2[1];
65
+ var _useState3 = (0, _react.useState)(true),
66
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
67
+ isValid = _useState4[0],
68
+ setIsValid = _useState4[1];
69
+ var onTimePickerChange = function onTimePickerChange(value, e) {
70
+ if (!e || !e.target || e.target.selectionStart === undefined) return;
71
+ var rawInput = value;
72
+ var inputElement = e.target;
73
+ var cursorStart = inputElement.selectionStart;
74
+ var rawDigits = rawInput.replace(/[^\d]/g, "").slice(0, 6); // max HHMMSS
75
+ var prevValue = inputElement.value;
76
+
77
+ // Format as HH:MM:SS
78
+ var formattedTime = "";
79
+ if (rawDigits.length <= 2) {
80
+ formattedTime = rawDigits;
81
+ } else if (rawDigits.length <= 4) {
82
+ formattedTime = "".concat(rawDigits.slice(0, 2), ":").concat(rawDigits.slice(2));
83
+ } else {
84
+ formattedTime = "".concat(rawDigits.slice(0, 2), ":").concat(rawDigits.slice(2, 4), ":").concat(rawDigits.slice(4));
85
+ }
86
+
87
+ // Count digits before cursor
88
+ var digitsBeforeCursor = prevValue.slice(0, cursorStart).replace(/[^\d]/g, "").length;
89
+
90
+ // Recalculate new cursor position based on formatted digits
91
+ var newCursorPos = digitsBeforeCursor;
92
+ if (digitsBeforeCursor > 2) newCursorPos += 1;
93
+ if (digitsBeforeCursor > 4) newCursorPos += 1;
94
+
95
+ // Apply formatted value and update state
96
+ inputElement.value = formattedTime;
97
+ setTimeout(function () {
98
+ inputElement.setSelectionRange(newCursorPos, newCursorPos);
99
+ }, 0);
100
+ setCustomInputValue(formattedTime);
101
+ };
102
+ var checkIfTimeValid = function checkIfTimeValid(value) {
103
+ var isValid = false;
104
+ if (value) {
105
+ var timeRegex = new RegExp("^(?:[0-5][0-9]):(?:[0-5][0-9]):(?:[0-5][0-9]):[0-9]{2}$");
106
+ if (timeRegex.test(value) && parseInt(value.split(":")[3]) <= frameRate && value.split(":")[3].length === 2) {
107
+ var selectedValueTime = (0, _utils.timeToSeconds)(value, frameRate);
108
+ if (initialTime && playerDuration) {
109
+ var endTime = initialTime + playerDuration;
110
+ if (selectedValueTime >= initialTime && selectedValueTime <= endTime && !customValidity) {
111
+ setIsValid(true);
112
+ return true;
113
+ }
114
+ } else if (!customValidity) {
115
+ setIsValid(true);
116
+ return true;
117
+ }
118
+ if (customValidity) {
119
+ var val = customValidityFn(inputFieldType, value);
120
+ setIsValid(val);
121
+ return val;
122
+ }
123
+ }
124
+ if (customValidity) {
125
+ var _val = customValidityFn(inputFieldType, value);
126
+ setIsValid(_val);
127
+ return _val;
128
+ }
129
+ }
130
+ setIsValid(false);
131
+ return isValid;
132
+ };
133
+ (0, _react.useEffect)(function () {
134
+ var handleEscapeKey = function handleEscapeKey(event) {
135
+ if (event.key === "Escape") {
136
+ setCustomInputValue((0, _utils.convertHHMMSSFF_to_HHMMSS)(inputValue, frameRate));
137
+ setIsValid(true); // Reset to original
138
+ document.activeElement.blur();
139
+ }
140
+ };
141
+ if (inputValue) {
142
+ checkIfTimeValid((0, _utils.convertHHMMSS_to_HHMMSSFF)(inputValue, frameRate));
143
+ }
144
+ setCustomInputValue((0, _utils.convertHHMMSSFF_to_HHMMSS)(inputValue, frameRate));
145
+ document.addEventListener("keydown", handleEscapeKey);
146
+ return function () {
147
+ document.removeEventListener("keydown", handleEscapeKey);
148
+ };
149
+ }, [inputValue]);
150
+ (0, _react.useImperativeHandle)(ref, function () {
151
+ return {
152
+ checkValidity: function checkValidity() {
153
+ return checkIfTimeValid((0, _utils.convertHHMMSS_to_HHMMSSFF)(customInputValue, frameRate));
154
+ },
155
+ inputValue: (0, _utils.convertHHMMSS_to_HHMMSSFF)(customInputValue, frameRate),
156
+ inputFieldType: inputFieldType,
157
+ returnValidity: function returnValidity() {
158
+ return isValid;
159
+ }
160
+ };
161
+ });
162
+ var onChangeFn = function onChangeFn(e) {
163
+ onTimePickerChange(e.target.value, e);
164
+ };
165
+ var onKeyDownFn = function onKeyDownFn(e) {
166
+ if (e.key === "Enter") {
167
+ handleUpdate(e.target.value);
168
+ if (typeof onBlur === "function") onBlur(e);
169
+ }
170
+ if (typeof onKeyDown === "function") onKeyDown(e);
171
+ };
172
+ var onBlurFn = function onBlurFn(e) {
173
+ handleUpdate(e.target.value);
174
+ if (typeof onBlur === "function") onBlur(e);
175
+ };
176
+ var handleUpdate = function handleUpdate(value) {
177
+ console.log("here", (0, _utils.convertHHMMSS_to_HHMMSSFF)(value, frameRate));
178
+ if (value.length) {
179
+ checkIfTimeValid((0, _utils.convertHHMMSS_to_HHMMSSFF)(value, frameRate));
180
+ if (typeof updateFormDataExternally === "function") updateFormDataExternally(inputFieldType, (0, _utils.convertHHMMSS_to_HHMMSSFF)(value, frameRate));
181
+ }
182
+ };
183
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDiv, null, inputTitle && /*#__PURE__*/_react["default"].createElement(InputHeading, null, inputTitle), showCross && /*#__PURE__*/_react["default"].createElement(CrossIconWrapper, {
184
+ onClick: crossClicked
185
+ }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
186
+ name: "cross",
187
+ width: 7,
188
+ height: 7
189
+ }))), /*#__PURE__*/_react["default"].createElement(StyledInput, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
190
+ name: inputFieldType,
191
+ theme: theme,
192
+ width: width,
193
+ ref: ref,
194
+ value: customInputValue,
195
+ onFocus: onFocus,
196
+ onBlur: onBlurFn
197
+ }, "ref", ref), "onKeyDown", onKeyDownFn), "onChange", function onChange(e) {
198
+ return onChangeFn(e);
199
+ }), "isError", isValid), "maxLength", "8"), "checkBaiscErrorProp", checkBaiscError || false), "errorStatement", errorStatement || "")), showError && errorStatement.length > 0 && /*#__PURE__*/_react["default"].createElement(ErrorContainer, {
200
+ inputFieldType: inputFieldType
201
+ }, " ", errorStatement));
202
+ });
203
+ TimeCodeStandardInput.propTypes = {
204
+ inputValue: _propTypes["default"].string.isRequired,
205
+ onFocus: _propTypes["default"].func,
206
+ onBlur: _propTypes["default"].func,
207
+ onKeyDown: _propTypes["default"].func,
208
+ frameRate: _propTypes["default"].number,
209
+ initialTime: _propTypes["default"].number,
210
+ playerDuration: _propTypes["default"].number,
211
+ elementRef: _propTypes["default"].object,
212
+ width: _propTypes["default"].string,
213
+ theme: _propTypes["default"].oneOf(["dark", "light"]),
214
+ customValidity: _propTypes["default"].bool,
215
+ inputFieldType: _propTypes["default"].string.isRequired,
216
+ customValidityFn: _propTypes["default"].func,
217
+ showCross: _propTypes["default"].bool,
218
+ crossClicked: _propTypes["default"].func,
219
+ showError: _propTypes["default"].bool,
220
+ errorStatement: _propTypes["default"].string,
221
+ updateFormDataExternally: _propTypes["default"].func,
222
+ inputTitle: _propTypes["default"].string,
223
+ checkBaiscError: _propTypes["default"].bool
224
+ };
225
+ var _default = exports["default"] = TimeCodeStandardInput;
package/components.js CHANGED
@@ -311,6 +311,12 @@ Object.defineProperty(exports, "Textarea", {
311
311
  return _textarea["default"];
312
312
  }
313
313
  });
314
+ Object.defineProperty(exports, "TimeCodeDisplay", {
315
+ enumerable: true,
316
+ get: function get() {
317
+ return _timeCodeDisplay["default"];
318
+ }
319
+ });
314
320
  Object.defineProperty(exports, "TimeCodeInput", {
315
321
  enumerable: true,
316
322
  get: function get() {
@@ -410,6 +416,7 @@ var _GraphsComponentShimmer = _interopRequireDefault(require("./atoms/loader/Shi
410
416
  var _GraphTitleShimmer = _interopRequireDefault(require("./atoms/loader/ShimmerComponent/GraphTitleShimmer"));
411
417
  var _Shimmer = _interopRequireDefault(require("./atoms/loader/ShimmerComponent/Shimmer"));
412
418
  var _timeCodeInput = _interopRequireDefault(require("./atoms/timeCodeInput/timeCodeInput"));
419
+ var _timeCodeDisplay = _interopRequireDefault(require("./atoms/timeCodeDisplay/timeCodeDisplay"));
413
420
  var _richTextInput = _interopRequireDefault(require("./molecules/richTextInput"));
414
421
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
415
422
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
package/index.js CHANGED
@@ -309,6 +309,12 @@ Object.defineProperty(exports, "Textarea", {
309
309
  return _components.Textarea;
310
310
  }
311
311
  });
312
+ Object.defineProperty(exports, "TimeCodeDisplay", {
313
+ enumerable: true,
314
+ get: function get() {
315
+ return _components.TimeCodeDisplay;
316
+ }
317
+ });
312
318
  Object.defineProperty(exports, "TimeCodeInput", {
313
319
  enumerable: true,
314
320
  get: function get() {
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.1.18",
3
+ "version": "9.1.20",
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": "9.1.18",
10
+ "@desynova-digital/tokens": "9.1.20",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },