@desynova-digital/components 9.0.9 → 9.0.11

package/atoms/draftInputText/draftInputText.js

@@ -60,7 +60,8 @@ var DraftInputText = function DraftInputText(_ref) {
       label = _ref.label,
       value = _ref.value,
       autoFocus = _ref.autoFocus,
-      props = _objectWithoutProperties(_ref, ['maxLength', 'defaultValue', 'type', 'showLengthCount', 'label', 'value', 'autoFocus']);
+      isFocused = _ref.isFocused,
+      props = _objectWithoutProperties(_ref, ['maxLength', 'defaultValue', 'type', 'showLengthCount', 'label', 'value', 'autoFocus', 'isFocused']);
 
   var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -72,7 +73,7 @@ var DraftInputText = function DraftInputText(_ref) {
       diff = _useState4[0],
       setDiff = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(autoFocus),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
       focus = _useState6[0],
       setFocus = _useState6[1];
@@ -242,7 +243,9 @@ var DraftInputText = function DraftInputText(_ref) {
       return match === '<em>' ? '<i>' : '</i>';
     });
   };
-
+  /**
+   *  this useEffect is used to send value to parent component as soon as editor state gets updated
+   */
   (0, _react.useEffect)(function () {
     var html = (0, _draftConvert.convertToHTML)(editorState.getCurrentContent());
     html = removeOuterPTag(html);
@@ -256,19 +259,31 @@ var DraftInputText = function DraftInputText(_ref) {
     }
   }, [editorState]);
 
+  /**
+   * This useEffect handles our focus condition and also updates state when the props value changes
+   */
   (0, _react.useEffect)(function () {
     if (diff && value !== '' && value !== undefined) {
       props.simpleEdit = true;
       setDiff(false);
-      setFocus(true);
       var dummy = (0, _draftConvert.convertFromHTML)(value);
       var newState = _draftJs.EditorState.createWithContent(dummy);
-      setEditorState(function () {
-        return _draftJs.EditorState.moveFocusToEnd(newState);
-      });
+
+      if (focus) {
+        isFocused = true;
+      }
+      if (isFocused) {
+        setEditorState(function () {
+          return _draftJs.EditorState.moveFocusToEnd(newState);
+        });
+      } else {
+        setEditorState(newState);
+      }
     }
   }, [value]);
-
+  /**
+   * This useEffect is used to chnage our value when timeline is changed
+   */
   (0, _react.useEffect)(function () {
     if (listScrollTop !== null) {
       if (!props.simpleEdit) {
@@ -281,11 +296,15 @@ var DraftInputText = function DraftInputText(_ref) {
     }
   }, [listScrollTop]);
 
+  /**
+   * This useEffect is used to focus on Line1 when a new segment is created
+   */
   (0, _react.useEffect)(function () {
     if (autoFocus) {
       editorRef.current.focus();
     }
   }, [autoFocus]);
+
   return _react2.default.createElement(
     DraftInputTextDiv,
     { theme: props.theme, inputWidth: props.inputWidth },
@@ -424,11 +443,13 @@ DraftInputText.propTypes = {
   showLengthCount: _propTypes2.default.bool,
   simpleEdit: _propTypes2.default.bool,
   autoFocus: _propTypes2.default.bool,
+  isFocused: _propTypes2.default.bool,
   theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
   fieldType: _propTypes2.default.oneOf(['inputField', 'textArea'])
 };
 
 DraftInputText.defaultProps = {
+  isFocused: false,
   autoFocus: false,
   fieldType: 'textArea',
   readOnly: false,

package/package.json

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