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

Comparing version 1.0.0 to 1.0.1

build/module/components/Tag.d.ts

@@ -13,7 +13,6 @@ import React from "react";
 }
-export declare class Tag extends React.Component<Props> {
+export declare class Tag extends React.PureComponent<Props> {
     innerEditableRef: React.RefObject<HTMLDivElement>;
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<{}>, snapshot?: any): void;
-    shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<{}>, nextContext: any): boolean;
     remove: () => void;
@@ -20,0 +19,0 @@ render(): JSX.Element;

build/module/components/Tag.js

@@ -38,7 +38,2 @@ var __extends = (this && this.__extends) || (function () {
     };
-    Tag.prototype.shouldComponentUpdate = function (nextProps, nextState, nextContext) {
-        var changedValue = nextProps.value !== this.props.value;
-        var changedIndex = nextProps.index !== this.props.index;
-        return (changedValue || changedIndex);
-    };
     Tag.prototype.render = function () {
@@ -54,4 +49,4 @@ 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;
     return Tag;
-}(React.Component));
+}(React.PureComponent));
 export { Tag };
 //# sourceMappingURL=Tag.js.map

build/umd/index.js

@@ -143,7 +143,2 @@ (function (global, factory) {
         };
-        Tag.prototype.shouldComponentUpdate = function (nextProps, nextState, nextContext) {
-            var changedValue = nextProps.value !== this.props.value;
-            var changedIndex = nextProps.index !== this.props.index;
-            return (changedValue || changedIndex);
-        };
         Tag.prototype.render = function () {
@@ -159,3 +154,3 @@ 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;
         return Tag;
-    }(React.Component));
+    }(React.PureComponent));
 
@@ -162,0 +157,0 @@ var __extends$2 = (undefined && undefined.__extends) || (function () {

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.shouldComponentUpdate=function(nextProps,nextState,nextContext){var changedValue=nextProps.value!==this.props.value;var changedIndex=nextProps.index!==this.props.index;return changedValue||changedIndex};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.Component);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)}};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});
 //# sourceMappingURL=true

package.json

 {
   "name": "@pathofdev/react-tag-input",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A simple tag input component for React",
@@ -20,3 +20,3 @@ "main": "./build/umd/index.min.js",
     "build": "rm -rf build && npm run module-build && npm run umd-build && npm run umd-minify && npm run scss-build && npm shrinkwrap --dev",
-    "push": "git push origin master --tags && npm run publish",
+    "push": "git push origin master --tags && npm publish",
     "example": "parcel ./example/index.html"
@@ -23,0 +23,0 @@ },

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

Worsened metrics

Total package byte prevSize

363580

decreased by-0.68%

Lines of code

7967

decreased by-0.21%

No dependency changes