@desynova-digital/components 9.1.7 → 9.1.8

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.7",
+  "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.7",
+    "@desynova-digital/tokens": "9.1.8",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },