@desynova-digital/components 9.0.4 → 9.0.6

package/atoms/draftInputText/draftInputText.js

@@ -12,7 +12,7 @@ var _templateObject = _taggedTemplateLiteral(['\n  background: transparent;\n  f
     _templateObject2 = _taggedTemplateLiteral(['\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n'], ['\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n']),
     _templateObject3 = _taggedTemplateLiteral(['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n'], ['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n']),
     _templateObject4 = _taggedTemplateLiteral(['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n'], ['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n']),
-    _templateObject5 = _taggedTemplateLiteral(['\nwhite-space: nowrap;\n width:100%\n  box-sizing: border-box;\n  border-bottom: 1px solid ', ';\n \n\n  font-family: "SFUIText-Medium";\n  font-size: 14px;\n  color: ', ';\n\n  display: inline-block;\n  position: relative;\n  padding: ', ';\n  &:hover {\n    border-color: ', ';\n  }\n\n  &:focus-within {\n    border-color: ', ';\n  }\n\n  &::placeholder {\n    color: ', ';\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus-within::placeholder {\n    color: ', ';\n    opacity: ', ';\n  }\n\n  \n  ', '\n\n\n  \n\n'], ['\nwhite-space: nowrap;\n width:100%\n  box-sizing: border-box;\n  border-bottom: 1px solid ', ';\n \n\n  font-family: "SFUIText-Medium";\n  font-size: 14px;\n  color: ', ';\n\n  display: inline-block;\n  position: relative;\n  padding: ', ';\n  &:hover {\n    border-color: ', ';\n  }\n\n  &:focus-within {\n    border-color: ', ';\n  }\n\n  &::placeholder {\n    color: ', ';\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus-within::placeholder {\n    color: ', ';\n    opacity: ', ';\n  }\n\n  \n  ', '\n\n\n  \n\n']);
+    _templateObject5 = _taggedTemplateLiteral(['\nwhite-space: nowrap;\n width:100%\n  box-sizing: border-box;\n  border-bottom: 1px solid ', ';\n \n\n  font-family: "SFUIText-Medium";\n  font-size: 14px;\n  color: ', ';\n\n  display: inline-block;\n  position: relative;\n  padding: ', ';\n  &:hover {\n    border-color: ', ';\n  }\n\n  &:focus-within {\n    border-color: ', ';\n  }\n\n  &::placeholder {\n    color: ', ';\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus-within::placeholder {\n    color: ', ';\n    opacity: ', ';\n  }\n\n'], ['\nwhite-space: nowrap;\n width:100%\n  box-sizing: border-box;\n  border-bottom: 1px solid ', ';\n \n\n  font-family: "SFUIText-Medium";\n  font-size: 14px;\n  color: ', ';\n\n  display: inline-block;\n  position: relative;\n  padding: ', ';\n  &:hover {\n    border-color: ', ';\n  }\n\n  &:focus-within {\n    border-color: ', ';\n  }\n\n  &::placeholder {\n    color: ', ';\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus-within::placeholder {\n    color: ', ';\n    opacity: ', ';\n  }\n\n']);
 
 var _react = require('react');
 
@@ -36,10 +36,6 @@ var _icon = require('../icon');
 
 var _icon2 = _interopRequireDefault(_icon);
 
-var _immutable = require('immutable');
-
-var _immutable2 = _interopRequireDefault(_immutable);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -87,7 +83,18 @@ var DraftInputText = function DraftInputText(_ref) {
       editorState = _useState8[0],
       setEditorState = _useState8[1];
 
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      listScrollTop = _useState10[0],
+      setListScrollTop = _useState10[1];
+
   var contentLength = editorState.getCurrentContent().getPlainText('').length;
+  var scrollObject = localStorage.getItem('scrollObject');
+
+  if (scrollObject && JSON.parse(scrollObject).tableListScrollTop !== listScrollTop) {
+    setListScrollTop(JSON.parse(scrollObject).tableListScrollTop);
+  }
+
   if (props.error && props.error.length > 0) {
     var errorMesssage = props.error;
   }
@@ -100,21 +107,26 @@ var DraftInputText = function DraftInputText(_ref) {
     var passwordButton = props.passwordButton;
   }
 
+  /**
+   *
+   * @param {string} command string representing the keyboard command being invoked
+   * @param {object} editorState represents the current state of the editor, including the content, selection, and various editor properties.
+   * @returns new Editor State with applied styling
+   */
   var handleKeyCommand = function handleKeyCommand(command, editorState) {
-    if (command === 'split-block') {
-      props.onKeyDownFn();
-      return 'Entered Pressed';
-    } else {
-      var newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
+    var newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
 
-      if (newState) {
-        setEditorState(newState);
-        return 'handled';
-      }
-      return 'not-handled';
+    if (newState) {
+      setEditorState(newState);
+      return 'handled';
     }
+    return 'not-handled';
   };
 
+  /**
+   *
+   * @returns Return the length of text in editor in a synchronous way
+   */
   var _getLengthOfSelectedText = function _getLengthOfSelectedText() {
     var currentSelection = editorState.getSelection();
     if (currentSelection.isCollapsed()) return 0;
@@ -129,24 +141,52 @@ var DraftInputText = function DraftInputText(_ref) {
     }, 0);
   };
 
-  var _handleBeforeInputAndPastedText = function _handleBeforeInputAndPastedText(charsOrText, editorState) {
+  /**
+   *
+   * @param {string} text The  text that is pasted in the editor
+   * @param {string} position tells whether we have to check for inserted text or pasted text
+   * @returns whether pasting or inserting text is feasible
+   */
+  var _handleInput = function _handleInput(text, position) {
     var currentContent = editorState.getCurrentContent();
     var currentContentLength = currentContent.getPlainText('').length;
     var selectedTextLength = _getLengthOfSelectedText();
 
-    if (charsOrText && typeof charsOrText === 'string') {
-      if (currentContentLength - selectedTextLength + charsOrText.length > maxLength) {
+    if (position === 'before') {
+      if (currentContentLength - selectedTextLength + text.length > maxLength - 1) {
         console.log('You can type a maximum of ten characters');
         return 'handled';
       }
-    } else {
-      if (currentContentLength + charsOrText.length - selectedTextLength > maxLength) {
+    } else if (position === 'after') {
+      if (currentContentLength + text.length - selectedTextLength > maxLength) {
         console.log('You can type a maximum of ten characters');
         return 'handled';
       }
     }
   };
 
+  /**
+   *
+   * @returns calls the function to check before typing the text does not exceed maximum length
+   */
+  var _handleBeforeInput = function _handleBeforeInput() {
+    return _handleInput('', 'before');
+  };
+
+  /**
+   *
+   * @param {string} pastedText the text that is copy pasted in our editor
+   * @returns calls the function to check  copying  the text does not exceed maximum length
+   */
+  var _handlePastedText = function _handlePastedText(pastedText) {
+    return _handleInput(pastedText, 'after');
+  };
+
+  /**
+   *
+   * @param {object} newEditorState the newstate of editor when we type any text in our editor
+   * @returns the new state of editor
+   */
   var _handleChange = function _handleChange(newEditorState) {
     var contentState = newEditorState.getCurrentContent();
     var text = contentState.getPlainText();
@@ -158,6 +198,11 @@ var DraftInputText = function DraftInputText(_ref) {
     }
   };
 
+  /**
+   *
+   * @param {string} htmlString the string that is passed to the parent
+   * @returns removes the default <p> tag of draftjs
+   */
   var removeOuterPTag = function removeOuterPTag(htmlString) {
     var regex = /^<p>(.*?)<\/p>$/;
     var match = htmlString.match(regex);
@@ -189,8 +234,7 @@ var DraftInputText = function DraftInputText(_ref) {
   }, [value]);
 
   (0, _react.useEffect)(function () {
-    var scrollObject = JSON.parse(localStorage.getItem('scrollObject'));
-    if (scrollObject && scrollObject.tableListScrollTop) {
+    if (listScrollTop !== null) {
       if (!props.simpleEdit) {
         setDiff(true);
         value = undefined;
@@ -199,7 +243,7 @@ var DraftInputText = function DraftInputText(_ref) {
         });
       }
     }
-  }, [localStorage.getItem('scrollObject')]);
+  }, [listScrollTop]);
 
   return _react2.default.createElement(
     DraftInputTextDiv,
@@ -217,8 +261,8 @@ var DraftInputText = function DraftInputText(_ref) {
       _react2.default.createElement(_draftJs.Editor, {
         editorState: editorState,
         onChange: _handleChange,
-        handleBeforeInput: _handleBeforeInputAndPastedText,
-        handlePastedText: _handleBeforeInputAndPastedText,
+        handleBeforeInput: _handleBeforeInput,
+        handlePastedText: _handlePastedText,
         handleKeyCommand: handleKeyCommand,
         onFocus: function onFocus() {
           return setFocus(true);
@@ -310,8 +354,6 @@ var RichTextEditorContainer = _styledComponents2.default.div(_templateObject5, f
   return props.theme === 'light' ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
 }, function (props) {
   return props.label ? '1' : '1';
-}, function (props) {
-  return props.fieldType === 'inputField' && '\n      .public-DraftStyleDefault-block.public-DraftStyleDefault-ltr {\n        display: inline-block;\n        overflow: hidden;\n        white-space: nowrap;\n        width: 100%;\n      }\n    ';
 });
 
 DraftInputText.propTypes = {
@@ -344,7 +386,7 @@ DraftInputText.propTypes = {
 };
 
 DraftInputText.defaultProps = {
-  fieldType: 'inputField',
+  fieldType: 'textArea',
   readOnly: false,
   code: false,
   error: null,

package/atoms/draftInputText/draftInputText.story.js

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       null,
       _react2.default.createElement(_components.DraftInputText, {
         inputWidth: 300,
-        fieldType: 'textArea',
+        fieldType: 'inputField',
         showLengthCount: true,
         type: 'text',
         label: 'First Name',
@@ -133,7 +133,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         label: 'First Name',
         showLengthCount: true,
         value: 'Lorem ',
-        maxLength: 100,
+        maxLength: 200,
         onChange: function onChange(e) {
           return console.log(e.html, e.size);
         },

package/package.json

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