@desynova-digital/components 9.0.8 → 9.0.10

package/atoms/draftInputText/draftInputText.js

@@ -59,7 +59,9 @@ var DraftInputText = function DraftInputText(_ref) {
       showLengthCount = _ref.showLengthCount,
       label = _ref.label,
       value = _ref.value,
-      props = _objectWithoutProperties(_ref, ['maxLength', 'defaultValue', 'type', 'showLengthCount', 'label', 'value']);
+      autoFocus = _ref.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),
@@ -71,7 +73,7 @@ var DraftInputText = function DraftInputText(_ref) {
       diff = _useState4[0],
       setDiff = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
+  var _useState5 = (0, _react.useState)(autoFocus),
       _useState6 = _slicedToArray(_useState5, 2),
       focus = _useState6[0],
       setFocus = _useState6[1];
@@ -83,6 +85,8 @@ var DraftInputText = function DraftInputText(_ref) {
       editorState = _useState8[0],
       setEditorState = _useState8[1];
 
+  var editorRef = (0, _react.useRef)(null);
+
   var _useState9 = (0, _react.useState)(null),
       _useState10 = _slicedToArray(_useState9, 2),
       listScrollTop = _useState10[0],
@@ -129,16 +133,41 @@ var DraftInputText = function DraftInputText(_ref) {
    */
   var _getLengthOfSelectedText = function _getLengthOfSelectedText() {
     var currentSelection = editorState.getSelection();
-    if (currentSelection.isCollapsed()) return 0;
-
-    var selectedBlocks = DraftJS.SelectionState.createEmpty(currentSelection.getStartKey()).merge({
-      focusKey: currentSelection.getEndKey(),
-      focusOffset: currentSelection.getEndOffset()
-    }).getBlocksAsArray();
+    var isCollapsed = currentSelection.isCollapsed();
+
+    var length = 0;
+
+    if (!isCollapsed) {
+      var currentContent = editorState.getCurrentContent();
+      var startKey = currentSelection.getStartKey();
+      var endKey = currentSelection.getEndKey();
+      var startBlock = currentContent.getBlockForKey(startKey);
+      var isStartAndEndBlockAreTheSame = startKey === endKey;
+      var startBlockTextLength = startBlock.getLength();
+      var startSelectedTextLength = startBlockTextLength - currentSelection.getStartOffset();
+      var endSelectedTextLength = currentSelection.getEndOffset();
+      var keyAfterEnd = currentContent.getKeyAfter(endKey);
+
+      if (isStartAndEndBlockAreTheSame) {
+        length += currentSelection.getEndOffset() - currentSelection.getStartOffset();
+      } else {
+        var currentKey = startKey;
+
+        while (currentKey && currentKey !== keyAfterEnd) {
+          if (currentKey === startKey) {
+            length += startSelectedTextLength + 1;
+          } else if (currentKey === endKey) {
+            length += endSelectedTextLength;
+          } else {
+            length += currentContent.getBlockForKey(currentKey).getLength() + 1;
+          }
+
+          currentKey = currentContent.getKeyAfter(currentKey);
+        }
+      }
+    }
 
-    return selectedBlocks.reduce(function (length, block) {
-      return length + block.getText().length;
-    }, 0);
+    return length;
   };
 
   /**
@@ -214,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);
@@ -228,18 +259,29 @@ 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 (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) {
@@ -252,6 +294,16 @@ 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 },
@@ -266,6 +318,7 @@ var DraftInputText = function DraftInputText(_ref) {
         showLengthCount: showLengthCount || false
       }),
       _react2.default.createElement(_draftJs.Editor, {
+        ref: editorRef,
         editorState: editorState,
         onChange: _handleChange,
         handleBeforeInput: _handleBeforeInput,
@@ -388,11 +441,15 @@ DraftInputText.propTypes = {
   inputWidth: _propTypes2.default.number,
   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,
   code: false,

package/atoms/draftInputText/draftInputText.story.js

@@ -154,7 +154,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         type: 'text',
         value: 'hello there i am using',
         label: 'Label and default value',
-        required: true
+        required: true,
+        autoFocus: false
       })
     ),
     _react2.default.createElement(

package/package.json

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