@desynova-digital/components 9.0.4 → 9.0.5

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; }
@@ -63,7 +59,8 @@ var DraftInputText = function DraftInputText(_ref) {
       showLengthCount = _ref.showLengthCount,
       label = _ref.label,
       value = _ref.value,
-      props = _objectWithoutProperties(_ref, ['maxLength', 'defaultValue', 'type', 'showLengthCount', 'label', 'value']);
+      showLocal = _ref.showLocal,
+      props = _objectWithoutProperties(_ref, ['maxLength', 'defaultValue', 'type', 'showLengthCount', 'label', 'value', 'showLocal']);
 
   var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -87,6 +84,11 @@ var DraftInputText = function DraftInputText(_ref) {
       editorState = _useState8[0],
       setEditorState = _useState8[1];
 
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      convertedContent = _useState10[0],
+      setConvertedContent = _useState10[1];
+
   var contentLength = editorState.getCurrentContent().getPlainText('').length;
   if (props.error && props.error.length > 0) {
     var errorMesssage = props.error;
@@ -100,21 +102,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 +136,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 +193,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);
@@ -167,6 +207,7 @@ var DraftInputText = function DraftInputText(_ref) {
   (0, _react.useEffect)(function () {
     var html = (0, _draftConvert.convertToHTML)(editorState.getCurrentContent());
     html = removeOuterPTag(html);
+    setConvertedContent(html);
     var obj = {
       size: contentLength,
       html: html
@@ -187,10 +228,8 @@ var DraftInputText = function DraftInputText(_ref) {
       });
     }
   }, [value]);
-
-  (0, _react.useEffect)(function () {
-    var scrollObject = JSON.parse(localStorage.getItem('scrollObject'));
-    if (scrollObject && scrollObject.tableListScrollTop) {
+  if (!showLocal) {
+    (0, _react.useEffect)(function () {
       if (!props.simpleEdit) {
         setDiff(true);
         value = undefined;
@@ -198,8 +237,8 @@ var DraftInputText = function DraftInputText(_ref) {
           return _draftJs.EditorState.createEmpty();
         });
       }
-    }
-  }, [localStorage.getItem('scrollObject')]);
+    }, [JSON.parse(localStorage.getItem('scrollObject')).tableListScrollTop]);
+  }
 
   return _react2.default.createElement(
     DraftInputTextDiv,
@@ -217,8 +256,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 +349,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 = {
@@ -340,11 +377,13 @@ DraftInputText.propTypes = {
   showLengthCount: _propTypes2.default.bool,
   simpleEdit: _propTypes2.default.bool,
   theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
-  fieldType: _propTypes2.default.oneOf(['inputField', 'textArea'])
+  fieldType: _propTypes2.default.oneOf(['inputField', 'textArea']),
+  showLocal: _propTypes2.default.bool
 };
 
 DraftInputText.defaultProps = {
-  fieldType: 'inputField',
+  showLocal: false,
+  fieldType: 'textArea',
   readOnly: false,
   code: false,
   error: null,

package/atoms/draftInputText/draftInputText.story.js

@@ -20,8 +20,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         inputWidth: 300,
-        fieldType: 'textArea',
+        fieldType: 'inputField',
         showLengthCount: true,
         type: 'text',
         label: 'First Name',
@@ -37,6 +38,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         required: true
       }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         type: 'password',
         label: 'Middle Name',
         minLength: 3,
@@ -44,13 +46,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         placeholder: 'Show as password',
         required: true
       }),
-      _react2.default.createElement(_components.DraftInputText, { type: 'text', value: 'hello', label: 'Label and default value', required: true })
+      _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
+        type: 'text',
+        value: 'hello',
+        label: 'Label and default value',
+        required: true
+      })
     ),
     _react2.default.createElement(
       _storyHelpers.Stack,
       null,
-      _react2.default.createElement(_components.DraftInputText, { type: 'number', placeholder: 'number field & no Label', required: true, maxLength: 10 }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
+        type: 'number',
+        placeholder: 'number field & no Label',
+        required: true,
+        maxLength: 10
+      }),
+      _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         type: 'number',
         id: 'input-text-1',
         label: 'Label \'For\'-\'id\' prop',
@@ -59,6 +74,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         maxLength: 10
       }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         type: 'text',
         value: 'No Label and default value',
         onChange: function onChange(e) {
@@ -72,6 +88,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         type: 'number',
         label: 'number & max 5',
         placeholder: 'max length 5',
@@ -79,8 +96,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         minLength: 3,
         maxLength: 5
       }),
-      _react2.default.createElement(_components.DraftInputText, { type: 'text', error: 'Invalid text', placeholder: 'Display error', required: true }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
+        type: 'text',
+        error: 'Invalid text',
+        placeholder: 'Display error',
+        required: true
+      }),
+      _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         readOnly: true,
         type: 'text',
         value: 'hello',
@@ -95,12 +119,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         type: 'password',
         value: 'this@is$passw0rd',
         placeholder: 'This is password toggle',
         passwordButton: true
       }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         label: 'Label \'For\'-\'id\' prop',
         type: 'password',
         value: 'this@is$passw0rd',
@@ -108,6 +134,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         passwordButton: true
       }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         label: 'Label \'For\'-\'id\' ',
         error: ' this is error',
         type: 'password',
@@ -127,13 +154,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         inputWidth: 300,
         theme: 'dark',
         type: 'text',
         label: 'First Name',
         showLengthCount: true,
         value: 'Lorem ',
-        maxLength: 100,
+        maxLength: 200,
         onChange: function onChange(e) {
           return console.log(e.html, e.size);
         },
@@ -141,6 +169,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         required: true
       }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         theme: 'dark',
         type: 'password',
         label: 'Middle Name',
@@ -150,6 +179,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         required: true
       }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         theme: 'dark',
         type: 'text',
         value: 'hello there i am using',
@@ -161,6 +191,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         theme: 'dark',
         type: 'number',
         placeholder: 'number field & no Label',
@@ -168,6 +199,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         maxLength: 10
       }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         theme: 'dark',
         type: 'number',
         id: 'input-text-1',
@@ -177,6 +209,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         maxLength: 10
       }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         theme: 'dark',
         capitalizeFirstLetter: true,
         type: 'text',
@@ -192,6 +225,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         theme: 'dark',
         type: 'number',
         label: 'number & max 5',
@@ -201,6 +235,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         maxLength: 5
       }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         theme: 'dark',
         type: 'text',
         error: 'Invalid text',
@@ -208,6 +243,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         required: true
       }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         theme: 'dark',
         readOnly: true,
         type: 'text',
@@ -223,6 +259,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         theme: 'dark',
         type: 'password',
         value: 'this@is$passw0rd',
@@ -230,6 +267,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         passwordButton: true
       }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         theme: 'dark',
         label: 'Label \'For\'-\'id\' prop',
         type: 'password',
@@ -238,6 +276,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         passwordButton: true
       }),
       _react2.default.createElement(_components.DraftInputText, {
+        showLocal: true,
         theme: 'dark',
         label: 'Label \'For\'-\'id\' ',
         error: ' this is error',

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "9.0.4",
+  "version": "9.0.5",
   "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.5",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },