@pathofdev/react-tag-input - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

build/module/components/Tag.js

@@ -30,2 +30,3 @@ var __extends = (this && this.__extends) || (function () {
             ref.innerText = removeLineBreaks(this.props.value);
+            console.log("componentDidMount", ref.innerText);
         }
@@ -35,4 +36,10 @@ };
         var ref = this.innerEditableRef.current;
-        if (ref && prevProps.value !== this.props.value) {
-            ref.innerText = removeLineBreaks(this.props.value);
+        if (ref) {
+            var changedValue = prevProps.value !== this.props.value;
+            var changedEditable = prevProps.editable !== this.props.editable;
+            var update = changedValue || changedEditable;
+            if (update) {
+                ref.innerText = removeLineBreaks(this.props.value);
+                console.log("componentDidUpdate", ref.innerText);
+            }
         }
@@ -39,0 +46,0 @@ };

build/umd/index.js

@@ -135,2 +135,3 @@ (function (global, factory) {
                 ref.innerText = removeLineBreaks(this.props.value);
+                console.log("componentDidMount", ref.innerText);
             }
@@ -140,4 +141,10 @@ };
             var ref = this.innerEditableRef.current;
-            if (ref && prevProps.value !== this.props.value) {
-                ref.innerText = removeLineBreaks(this.props.value);
+            if (ref) {
+                var changedValue = prevProps.value !== this.props.value;
+                var changedEditable = prevProps.editable !== this.props.editable;
+                var update = changedValue || changedEditable;
+                if (update) {
+                    ref.innerText = removeLineBreaks(this.props.value);
+                    console.log("componentDidUpdate", ref.innerText);
+                }
             }
@@ -144,0 +151,0 @@ };

build/umd/index.min.js

@@ -1,2 +0,2 @@
-(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory(require("react")):typeof define==="function"&&define.amd?define(["react"],factory):(global=global||self,global.ReactTagInput=factory(global.React))})(this,function(React){"use strict";React=React&&React.hasOwnProperty("default")?React["default"]:React;var classSelectors={wrapper:"react-tag-input",input:"react-tag-input__input",tag:"react-tag-input__tag",tagContent:"react-tag-input__tag__content",tagRemove:"react-tag-input__tag__remove",tagRemoveReadOnly:"react-tag-input__tag__remove-readonly"};function removeLineBreaks(value){return value.replace(/(\r\n|\n|\r)/gm,"")}var __extends=undefined&&undefined.__extends||function(){var extendStatics=function(d,b){extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)if(b.hasOwnProperty(p))d[p]=b[p]};return extendStatics(d,b)};return function(d,b){extendStatics(d,b);function __(){this.constructor=d}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __)}}();var ContentEditable=function(_super){__extends(ContentEditable,_super);function ContentEditable(){var _this=_super!==null&&_super.apply(this,arguments)||this;_this.focused=false;_this.removed=false;_this.preFocusedValue="";_this.onPaste=function(e){e.preventDefault();var text=e.clipboardData.getData("text/plain");document.execCommand("insertHTML",false,removeLineBreaks(text))};_this.onFocus=function(){_this.preFocusedValue=_this.getValue();_this.focused=true};_this.onBlur=function(){_this.focused=false;var ref=_this.props.innerEditableRef.current;var _a=_this.props,validator=_a.validator,change=_a.change;if(!_this.removed&&ref){if(ref.innerText===""){_this.props.remove();return}if(validator){var valid=validator(_this.getValue());if(!valid){ref.innerText=_this.preFocusedValue;return}}change(ref.innerText)}};_this.onKeyDown=function(e){if(e.keyCode===13){e.preventDefault();_this.focusInputRef();return}var removeOnBackspace=_this.props.removeOnBackspace;var value=_this.getValue();if(removeOnBackspace&&e.keyCode===8&&value===""){_this.removed=true;_this.props.remove();_this.focusInputRef();return}};_this.getValue=function(){var ref=_this.getRef();return ref?ref.innerText:""};_this.getRef=function(){return _this.props.innerEditableRef.current};_this.focusInputRef=function(){var inputRef=_this.props.inputRef;if(inputRef&&inputRef.current){inputRef.current.focus()}};return _this}ContentEditable.prototype.componentDidMount=function(){this.preFocusedValue=this.getValue()};ContentEditable.prototype.render=function(){var _a=this.props,className=_a.className,innerEditableRef=_a.innerEditableRef;return React.createElement("div",{ref:innerEditableRef,className:className,contentEditable:true,onPaste:this.onPaste,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown})};return ContentEditable}(React.Component);var __extends$1=undefined&&undefined.__extends||function(){var extendStatics=function(d,b){extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)if(b.hasOwnProperty(p))d[p]=b[p]};return extendStatics(d,b)};return function(d,b){extendStatics(d,b);function __(){this.constructor=d}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __)}}();var Tag=function(_super){__extends$1(Tag,_super);function Tag(){var _this=_super!==null&&_super.apply(this,arguments)||this;_this.innerEditableRef=React.createRef();_this.remove=function(){return _this.props.remove(_this.props.index)};return _this}Tag.prototype.componentDidMount=function(){var ref=this.innerEditableRef.current;if(ref){ref.innerText=removeLineBreaks(this.props.value)}};Tag.prototype.componentDidUpdate=function(prevProps,prevState,snapshot){var ref=this.innerEditableRef.current;if(ref&&prevProps.value!==this.props.value){ref.innerText=removeLineBreaks(this.props.value)}};Tag.prototype.render=function(){var _a=this.props,value=_a.value,index=_a.index,editable=_a.editable,inputRef=_a.inputRef,validator=_a.validator,update=_a.update,readOnly=_a.readOnly,removeOnBackspace=_a.removeOnBackspace;var tagRemoveClass=!readOnly?classSelectors.tagRemove:classSelectors.tagRemove+" "+classSelectors.tagRemoveReadOnly;return React.createElement("div",{className:classSelectors.tag},!editable&&React.createElement("div",{className:classSelectors.tagContent},value),editable&&React.createElement(ContentEditable,{inputRef:inputRef,innerEditableRef:this.innerEditableRef,className:classSelectors.tagContent,change:function(newValue){return update(index,newValue)},remove:this.remove,validator:validator,removeOnBackspace:removeOnBackspace}),React.createElement("div",{className:tagRemoveClass,onClick:this.remove}))};return Tag}(React.PureComponent);var __extends$2=undefined&&undefined.__extends||function(){var extendStatics=function(d,b){extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)if(b.hasOwnProperty(p))d[p]=b[p]};return extendStatics(d,b)};return function(d,b){extendStatics(d,b);function __(){this.constructor=d}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __)}}();var ReactTagInput=function(_super){__extends$2(ReactTagInput,_super);function ReactTagInput(){var _this=_super!==null&&_super.apply(this,arguments)||this;_this.state={input:""};_this.inputRef=React.createRef();_this.onInputChange=function(e){_this.setState({input:e.target.value})};_this.onInputKeyDown=function(e){var input=_this.state.input;var _a=_this.props,validator=_a.validator,removeOnBackspace=_a.removeOnBackspace;if(e.keyCode===13){e.preventDefault();if(input===""){return}var valid=validator!==undefined?validator(input):true;if(!valid){return}_this.addTag(input)}else if(removeOnBackspace&&(e.keyCode===8||e.keyCode===46)){if(input!==""){return}_this.removeTag(_this.props.tags.length-1)}};_this.addTag=function(value){var tags=_this.props.tags.slice();tags.push(value);_this.props.onChange(tags);_this.setState({input:""})};_this.removeTag=function(i){var tags=_this.props.tags.slice();tags.splice(i,1);_this.props.onChange(tags)};_this.updateTag=function(i,value){var tags=_this.props.tags.slice();tags[i]=value;_this.props.onChange(tags)};return _this}ReactTagInput.prototype.render=function(){var _this=this;var input=this.state.input;var _a=this.props,tags=_a.tags,placeholder=_a.placeholder,maxTags=_a.maxTags,editable=_a.editable,readOnly=_a.readOnly,validator=_a.validator,removeOnBackspace=_a.removeOnBackspace;var maxTagsReached=maxTags!==undefined?tags.length>=maxTags:false;var isEditable=readOnly?false:editable||false;var showInput=!readOnly&&!maxTagsReached;return React.createElement("div",{className:classSelectors.wrapper},tags.map(function(tag,i){return React.createElement(Tag,{key:i,value:tag,index:i,editable:isEditable,readOnly:readOnly||false,inputRef:_this.inputRef,update:_this.updateTag,remove:_this.removeTag,validator:validator,removeOnBackspace:removeOnBackspace})}),showInput&&React.createElement("input",{ref:this.inputRef,value:input,className:classSelectors.input,placeholder:placeholder||"Type and press enter",onChange:this.onInputChange,onKeyDown:this.onInputKeyDown}))};return ReactTagInput}(React.Component);return ReactTagInput});
+(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory(require("react")):typeof define==="function"&&define.amd?define(["react"],factory):(global=global||self,global.ReactTagInput=factory(global.React))})(this,function(React){"use strict";React=React&&React.hasOwnProperty("default")?React["default"]:React;var classSelectors={wrapper:"react-tag-input",input:"react-tag-input__input",tag:"react-tag-input__tag",tagContent:"react-tag-input__tag__content",tagRemove:"react-tag-input__tag__remove",tagRemoveReadOnly:"react-tag-input__tag__remove-readonly"};function removeLineBreaks(value){return value.replace(/(\r\n|\n|\r)/gm,"")}var __extends=undefined&&undefined.__extends||function(){var extendStatics=function(d,b){extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)if(b.hasOwnProperty(p))d[p]=b[p]};return extendStatics(d,b)};return function(d,b){extendStatics(d,b);function __(){this.constructor=d}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __)}}();var ContentEditable=function(_super){__extends(ContentEditable,_super);function ContentEditable(){var _this=_super!==null&&_super.apply(this,arguments)||this;_this.focused=false;_this.removed=false;_this.preFocusedValue="";_this.onPaste=function(e){e.preventDefault();var text=e.clipboardData.getData("text/plain");document.execCommand("insertHTML",false,removeLineBreaks(text))};_this.onFocus=function(){_this.preFocusedValue=_this.getValue();_this.focused=true};_this.onBlur=function(){_this.focused=false;var ref=_this.props.innerEditableRef.current;var _a=_this.props,validator=_a.validator,change=_a.change;if(!_this.removed&&ref){if(ref.innerText===""){_this.props.remove();return}if(validator){var valid=validator(_this.getValue());if(!valid){ref.innerText=_this.preFocusedValue;return}}change(ref.innerText)}};_this.onKeyDown=function(e){if(e.keyCode===13){e.preventDefault();_this.focusInputRef();return}var removeOnBackspace=_this.props.removeOnBackspace;var value=_this.getValue();if(removeOnBackspace&&e.keyCode===8&&value===""){_this.removed=true;_this.props.remove();_this.focusInputRef();return}};_this.getValue=function(){var ref=_this.getRef();return ref?ref.innerText:""};_this.getRef=function(){return _this.props.innerEditableRef.current};_this.focusInputRef=function(){var inputRef=_this.props.inputRef;if(inputRef&&inputRef.current){inputRef.current.focus()}};return _this}ContentEditable.prototype.componentDidMount=function(){this.preFocusedValue=this.getValue()};ContentEditable.prototype.render=function(){var _a=this.props,className=_a.className,innerEditableRef=_a.innerEditableRef;return React.createElement("div",{ref:innerEditableRef,className:className,contentEditable:true,onPaste:this.onPaste,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown})};return ContentEditable}(React.Component);var __extends$1=undefined&&undefined.__extends||function(){var extendStatics=function(d,b){extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)if(b.hasOwnProperty(p))d[p]=b[p]};return extendStatics(d,b)};return function(d,b){extendStatics(d,b);function __(){this.constructor=d}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __)}}();var Tag=function(_super){__extends$1(Tag,_super);function Tag(){var _this=_super!==null&&_super.apply(this,arguments)||this;_this.innerEditableRef=React.createRef();_this.remove=function(){return _this.props.remove(_this.props.index)};return _this}Tag.prototype.componentDidMount=function(){var ref=this.innerEditableRef.current;if(ref){ref.innerText=removeLineBreaks(this.props.value);console.log("componentDidMount",ref.innerText)}};Tag.prototype.componentDidUpdate=function(prevProps,prevState,snapshot){var ref=this.innerEditableRef.current;if(ref){var changedValue=prevProps.value!==this.props.value;var changedEditable=prevProps.editable!==this.props.editable;var update=changedValue||changedEditable;if(update){ref.innerText=removeLineBreaks(this.props.value);console.log("componentDidUpdate",ref.innerText)}}};Tag.prototype.render=function(){var _a=this.props,value=_a.value,index=_a.index,editable=_a.editable,inputRef=_a.inputRef,validator=_a.validator,update=_a.update,readOnly=_a.readOnly,removeOnBackspace=_a.removeOnBackspace;var tagRemoveClass=!readOnly?classSelectors.tagRemove:classSelectors.tagRemove+" "+classSelectors.tagRemoveReadOnly;return React.createElement("div",{className:classSelectors.tag},!editable&&React.createElement("div",{className:classSelectors.tagContent},value),editable&&React.createElement(ContentEditable,{inputRef:inputRef,innerEditableRef:this.innerEditableRef,className:classSelectors.tagContent,change:function(newValue){return update(index,newValue)},remove:this.remove,validator:validator,removeOnBackspace:removeOnBackspace}),React.createElement("div",{className:tagRemoveClass,onClick:this.remove}))};return Tag}(React.PureComponent);var __extends$2=undefined&&undefined.__extends||function(){var extendStatics=function(d,b){extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)if(b.hasOwnProperty(p))d[p]=b[p]};return extendStatics(d,b)};return function(d,b){extendStatics(d,b);function __(){this.constructor=d}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __)}}();var ReactTagInput=function(_super){__extends$2(ReactTagInput,_super);function ReactTagInput(){var _this=_super!==null&&_super.apply(this,arguments)||this;_this.state={input:""};_this.inputRef=React.createRef();_this.onInputChange=function(e){_this.setState({input:e.target.value})};_this.onInputKeyDown=function(e){var input=_this.state.input;var _a=_this.props,validator=_a.validator,removeOnBackspace=_a.removeOnBackspace;if(e.keyCode===13){e.preventDefault();if(input===""){return}var valid=validator!==undefined?validator(input):true;if(!valid){return}_this.addTag(input)}else if(removeOnBackspace&&(e.keyCode===8||e.keyCode===46)){if(input!==""){return}_this.removeTag(_this.props.tags.length-1)}};_this.addTag=function(value){var tags=_this.props.tags.slice();tags.push(value);_this.props.onChange(tags);_this.setState({input:""})};_this.removeTag=function(i){var tags=_this.props.tags.slice();tags.splice(i,1);_this.props.onChange(tags)};_this.updateTag=function(i,value){var tags=_this.props.tags.slice();tags[i]=value;_this.props.onChange(tags)};return _this}ReactTagInput.prototype.render=function(){var _this=this;var input=this.state.input;var _a=this.props,tags=_a.tags,placeholder=_a.placeholder,maxTags=_a.maxTags,editable=_a.editable,readOnly=_a.readOnly,validator=_a.validator,removeOnBackspace=_a.removeOnBackspace;var maxTagsReached=maxTags!==undefined?tags.length>=maxTags:false;var isEditable=readOnly?false:editable||false;var showInput=!readOnly&&!maxTagsReached;return React.createElement("div",{className:classSelectors.wrapper},tags.map(function(tag,i){return React.createElement(Tag,{key:i,value:tag,index:i,editable:isEditable,readOnly:readOnly||false,inputRef:_this.inputRef,update:_this.updateTag,remove:_this.removeTag,validator:validator,removeOnBackspace:removeOnBackspace})}),showInput&&React.createElement("input",{ref:this.inputRef,value:input,className:classSelectors.input,placeholder:placeholder||"Type and press enter",onChange:this.onInputChange,onKeyDown:this.onInputKeyDown}))};return ReactTagInput}(React.Component);return ReactTagInput});
 //# sourceMappingURL=true

package.json

 {
   "name": "@pathofdev/react-tag-input",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A simple tag input component for React",
@@ -5,0 +5,0 @@ "main": "./build/umd/index.min.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

368528

increased by1.36%

Lines of code

8060

increased by1.17%

No dependency changes