@desynova-digital/components 9.1.6 → 9.1.8

package/atoms/icon/icons.json

@@ -1657,6 +1657,20 @@
       ],
       "width": 8,
       "height": 8
+    },
+    "no-comments-found": {
+      "paths": [
+        "M50.5373 44.7091H52.1844V27.8156H33.6438L30.8282 25H52.1844C53.733 25 55 26.267 55 27.8156V49.1718L50.5373 44.7091ZM49.3688 30.6312H36.4594L39.275 33.4467H49.3688V30.6312ZM49.3688 34.8545H40.6828L43.4984 37.6701H49.3688V34.8545ZM49.3688 41.8935V39.0779H44.9061L47.7217 41.8935H49.3688ZM54.8592 53.015L52.8742 55L45.3848 47.5246H29.6598C28.1112 47.5246 26.8442 46.2576 26.8442 44.7091V28.984L25 27.1258L26.985 25.1408L54.8592 53.015ZM42.5692 44.7091L39.7536 41.8935H32.4754V39.0779H36.9381L35.5303 37.6701H32.4754V34.8545H32.7147L29.6598 31.7996V44.7091H42.5692Z"
+      ],
+      "width": 80,
+      "height": 80
+    },
+    "no-comments-filter": {
+      "paths": [
+        "M1.05622 3.06251L3.37187 0.74686C3.54271 0.576005 3.54271 0.298997 3.37187 0.12814C3.20102 -0.0427132 2.92399 -0.0427132 2.75315 0.12814L0.12814 2.75315C-0.0427132 2.924 -0.0427132 3.20101 0.12814 3.37187L2.75315 5.99685C2.92399 6.1677 3.20102 6.1677 3.37187 5.99685C3.54271 5.826 3.54271 5.549 3.37187 5.37815L1.05622 3.06251Z"
+      ],
+      "width": 80,
+      "height": 80
     }
   }
 }

package/atoms/timeCodeInput/timeCodeInput.js

@@ -12,19 +12,28 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _utils = require("../../_helpers/utils");
 var _tokens = require("@desynova-digital/tokens");
-var _templateObject;
+var _components = require("@desynova-digital/components");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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); }
 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; }
-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"])), function (props) {
-  return props.isError ? '#FFFFFF' : '#ff0000';
+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) {
+  return props.isError ? '#FFFFFF' : '#FF6C56';
 }, function (props) {
   return props.theme ? "".concat(_tokens.colors[props.theme].timeCodeInput.rgbthemeColor) : 'rgb(0 206 198)';
 }, function (props) {
   return props.width ? props.width : '72px';
+}, function (props) {
+  var _props$name;
+  return !props.isError && ((_props$name = props.name) === null || _props$name === void 0 ? void 0 : _props$name.length) > 0 ? '1px solid #FF6C56' : '1px solid #303F51';
 });
+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"])));
+var StyledDiv = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n"])));
+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"])));
+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"])));
 var TimeCodeInput = function TimeCodeInput(_ref) {
   var inputValue = _ref.inputValue,
     onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
     onKeyDown = _ref.onKeyDown,
     frameRate = _ref.frameRate,
     initialTime = _ref.initialTime,
@@ -32,7 +41,19 @@ var TimeCodeInput = function TimeCodeInput(_ref) {
     elementRef = _ref.elementRef,
     width = _ref.width,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? 'dark' : _ref$theme;
+    theme = _ref$theme === void 0 ? 'dark' : _ref$theme,
+    customValidity = _ref.customValidity,
+    inputFieldType = _ref.inputFieldType,
+    customValidityFn = _ref.customValidityFn,
+    _ref$showCross = _ref.showCross,
+    showCross = _ref$showCross === void 0 ? false : _ref$showCross,
+    crossClicked = _ref.crossClicked,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$errorStatement = _ref.errorStatement,
+    errorStatement = _ref$errorStatement === void 0 ? '' : _ref$errorStatement,
+    updateFormDataExternally = _ref.updateFormDataExternally,
+    inputTitle = _ref.inputTitle;
   var _useState = (0, _react.useState)(inputValue || '00:00:00:00'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     customInputValue = _useState2[0],
@@ -75,9 +96,13 @@ var TimeCodeInput = function TimeCodeInput(_ref) {
       if (timeRegex.test(value) && parseInt(value.split(':')[3]) <= frameRate && value.split(':')[3].length === 2) {
         var selectedValueTime = (0, _utils.timeToSeconds)(value, frameRate);
         var endTime = initialTime + playerDuration;
-        if (selectedValueTime >= initialTime && selectedValueTime <= endTime) {
+        if (selectedValueTime >= initialTime && selectedValueTime <= endTime && !customValidity) {
           setIsValid(true);
           return true;
+        } else if (customValidity) {
+          var val = customValidityFn(inputFieldType, value);
+          setIsValid(val);
+          return val;
         }
       }
     }
@@ -92,7 +117,7 @@ var TimeCodeInput = function TimeCodeInput(_ref) {
         document.activeElement.blur();
       }
     };
-    checkIfTimeValid(inputValue);
+    customValidity && inputValue && checkIfTimeValid(inputValue);
     setCustomInputValue(inputValue);
     document.addEventListener('keydown', handleEscapeKey);
     return function () {
@@ -103,22 +128,43 @@ var TimeCodeInput = function TimeCodeInput(_ref) {
     return {
       checkValidity: function checkValidity() {
         return checkIfTimeValid(customInputValue);
+      },
+      inputValue: customInputValue,
+      inputFieldType: inputFieldType,
+      returnValidity: function returnValidity() {
+        return isValid;
       }
     };
   });
-  return /*#__PURE__*/_react["default"].createElement(StyledInput, {
+  var onChangeFn = function onChangeFn(e) {
+    onTimePickerChange(e.target.value, e);
+    checkIfTimeValid(e.target.value);
+    if (checkIfTimeValid(e.target.value)) {
+      updateFormDataExternally(inputFieldType, e.target.value);
+    }
+  };
+  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, {
+    onClick: crossClicked
+  }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+    name: "cross",
+    width: 7,
+    height: 7
+  }))), /*#__PURE__*/_react["default"].createElement(StyledInput, {
+    name: inputFieldType,
     theme: theme,
     width: width,
     ref: elementRef,
     value: customInputValue,
     onFocus: onFocus,
+    onBlur: onBlur,
     onKeyDown: onKeyDown,
     onChange: function onChange(e) {
-      onTimePickerChange(e.target.value, e);
-      checkIfTimeValid(e.target.value);
+      return onChangeFn(e);
     },
     isError: isValid,
     maxLength: "11"
-  });
+  }), showError && errorStatement.length > 0 && /*#__PURE__*/_react["default"].createElement(ErrorContainer, {
+    inputFieldType: inputFieldType
+  }, " ", errorStatement));
 };
 var _default = exports["default"] = TimeCodeInput;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "9.1.6",
+  "version": "9.1.8",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "9.1.6",
+    "@desynova-digital/tokens": "9.1.8",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },