New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

reactjs-tag-input

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

reactjs-tag-input - npm Package Compare versions

Comparing version
2.0.13
 to
2.0.14
+1
-1
package.json
{
"name": "reactjs-tag-input",
"version": "2.0.13",
"version": "2.0.14",
"homepage": "http://leekevinyg.github.io/react-tag-input",

@@ -5,0 +5,0 @@ "repository": "https://github.com/leekevinyg/react-tag-input",

+18
-2
README.md

@@ -9,8 +9,15 @@ # React Tag Input

- <a href="#Demo">Demo</a>
- <a href="#Installation">Installation</a>
- <a href="#Usage">Usage</a>
- <a href="#API">API</a>
<a name="Demo"></a>
# Demo
![](https://github.com/leekevinyg/react-tag-input/blob/master/example.gif?raw=true)
[![example](https://github.com/leekevinyg/react-tag-input/blob/master/example.gif?raw=true)](https://leekevinyg.github.io/react-tag-input/)
[Interactive Demo](https://leekevinyg.github.io/react-tag-input/)
<a name="Installation"></a>
# Installation

@@ -20,2 +27,3 @@

<a name="Usage"></a>
# Usage

@@ -47,2 +55,3 @@

<a name="API"></a>
# API

@@ -60,3 +69,3 @@

* **onInputChange**
* **onInputChanged**

@@ -137,3 +146,10 @@ A function that gets passed to the internal input ```onChange``` attribute.

```
* **placeholder**
Defaults to "Type something and hit enter...", but can be overridden with this prop
```
<TagInput placeholder="Hello world" />
```
# Contributing

@@ -140,0 +156,0 @@ 

-3
dist/index.js
import TagInput from "./TagInput";
export { TagInput };
-9
dist/styled/Input.js
var _templateObject = _taggedTemplateLiteral(['\n background: #F1F3F4;\n border: none;\n border-radius: 3px;\n outline: none;\n font-size: large;\n display: inline-block;\n width: 100%;\n color: #69626D;\n font-weight: 400;\n &::-webkit-input-placeholder {\n font-weight: 100;\n font-style: italic;\n color: #69626D;\n }\n'], ['\n background: #F1F3F4;\n border: none;\n border-radius: 3px;\n outline: none;\n font-size: large;\n display: inline-block;\n width: 100%;\n color: #69626D;\n font-weight: 400;\n &::-webkit-input-placeholder {\n font-weight: 100;\n font-style: italic;\n color: #69626D;\n }\n']);
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import styled from 'styled-components';
var Input = styled.input(_templateObject);
export default Input;
-9
dist/styled/Tag.js
var _templateObject = _taggedTemplateLiteral(['\n float: left;\n background: #77B6EA;\n color: #69626D;\n border-radius: 5px;\n color: white;\n padding: 5px;\n margin: 0 5px 5px 0;\n letter-spacing: 1px;\n cursor: pointer;\n'], ['\n float: left;\n background: #77B6EA;\n color: #69626D;\n border-radius: 5px;\n color: white;\n padding: 5px;\n margin: 0 5px 5px 0;\n letter-spacing: 1px;\n cursor: pointer;\n']);
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import styled from 'styled-components';
var Tag = styled.span(_templateObject);
export default Tag;
-13
dist/styled/TagDelete.js
var _templateObject = _taggedTemplateLiteral(['\n color: white;\n font-size: 1em;\n &:hover {\n color: gray;\n }\n'], ['\n color: white;\n font-size: 1em;\n &:hover {\n color: gray;\n }\n']);
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import styled from 'styled-components';
var TagDelete = styled.span.attrs(function (props) {
return {
'data-test': 'tag-delete-' + props.index
};
})(_templateObject);
export default TagDelete;
-9
dist/styled/Wrapper.js
var _templateObject = _taggedTemplateLiteral(['\n background: #F1F3F4;\n box-shadow: 3px 3px 10px rgba(0,0,0, 0.1);\n font-family: \'Hind\', sans-serif;\n font-weight: 400;\n border-radius: 20px;\n padding: 10px;\n font-size: large;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 70%;\n'], ['\n background: #F1F3F4;\n box-shadow: 3px 3px 10px rgba(0,0,0, 0.1);\n font-family: \'Hind\', sans-serif;\n font-weight: 400;\n border-radius: 20px;\n padding: 10px;\n font-size: large;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 70%;\n']);
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import styled from 'styled-components';
var Wrapper = styled.div(_templateObject);
export default Wrapper;
-270
dist/TagInput.js
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _templateObject = _taggedTemplateLiteral(['\n ', '\n '], ['\n ', '\n ']);
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
import React, { Component } from "react";
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Wrapper from './styled/Wrapper';
import Tag from './styled/Tag';
import Input from './styled/Input';
import TagDelete from './styled/TagDelete';
var TagInput = function (_Component) {
_inherits(TagInput, _Component);
function TagInput(props) {
_classCallCheck(this, TagInput);
var _this = _possibleConstructorReturn(this, (TagInput.__proto__ || Object.getPrototypeOf(TagInput)).call(this, props));
_this.state = {
selectedTags: []
};
_this.renderTags = _this.renderTags.bind(_this);
_this.onInputKeyUp = _this.onInputKeyUp.bind(_this);
_this.onInputKeyDown = _this.onInputKeyDown.bind(_this);
_this.focusInput = _this.focusInput.bind(_this);
_this.removeTag = _this.removeTag.bind(_this);
_this.input = React.createRef();
return _this;
}
_createClass(TagInput, [{
key: 'componentDidMount',
value: function componentDidMount() {
var tags = this.props.tags;
var propTags = tags.map(function (tag, index) {
return Object.assign({
index: index
}, tag);
});
this.setState(function (state) {
return {
selectedTags: [].concat(_toConsumableArray(state.selectedTags), _toConsumableArray(propTags))
};
});
this.focusInput();
}
}, {
key: 'onInputKeyUp',
value: function onInputKeyUp(e) {
var _this2 = this;
var _props = this.props,
addTagOnEnterKeyPressed = _props.addTagOnEnterKeyPressed,
onTagsChanged = _props.onTagsChanged;
var inputValue = e.target.value;
var inputNotEmpty = inputValue && inputValue.trim() !== '';
var addTag = function addTag() {
_this2.setState(function (state) {
return {
selectedTags: [].concat(_toConsumableArray(state.selectedTags), [{
index: state.selectedTags.length + 1,
displayValue: inputValue
}])
};
}, function () {
var selectedTags = _this2.state.selectedTags;
_this2.clearInput();
onTagsChanged(selectedTags);
});
};
if (e.key === 'Enter' && inputNotEmpty && addTagOnEnterKeyPressed) {
addTag();
}
}
}, {
key: 'onInputKeyDown',
value: function onInputKeyDown(e) {
var _this3 = this;
var onTagsChanged = this.props.onTagsChanged;
var deleteLastTag = function deleteLastTag() {
_this3.setState(function (state) {
return {
selectedTags: state.selectedTags.splice(0, state.selectedTags.length - 1)
};
}, function () {
var selectedTags = _this3.state.selectedTags;
onTagsChanged(selectedTags);
});
};
if (e.key === 'Backspace' && e.target.selectionStart === 0) {
deleteLastTag();
}
}
}, {
key: 'clearInput',
value: function clearInput() {
this.input.value = '';
}
}, {
key: 'focusInput',
value: function focusInput() {
this.input.focus();
}
}, {
key: 'removeTag',
value: function removeTag(index) {
var _this4 = this;
this.setState(function (state) {
return {
selectedTags: state.selectedTags.filter(function (tag) {
return tag.index !== index;
})
};
}, function () {
var selectedTags = _this4.state.selectedTags;
var onTagsChanged = _this4.props.onTagsChanged;
onTagsChanged(selectedTags);
});
}
}, {
key: 'renderTags',
value: function renderTags() {
var _this5 = this;
var selectedTags = this.state.selectedTags;
var TagComponent = this.getTagStyledComponent();
var Delete = this.getTagDeleteComponent();
var DeleteIcon = this.getDeleteIcon();
return selectedTags.length > 0 ? selectedTags.map(function (tag, index) {
return React.createElement(
TagComponent,
{ key: index },
tag.displayValue,
React.createElement(
Delete,
{ index: tag.index, onClick: function onClick() {
return _this5.removeTag(tag.index);
} },
DeleteIcon
)
);
}) : null;
}
}, {
key: 'renderPlaceholder',
value: function renderPlaceholder() {
var selectedTags = this.state.selectedTags;
var _props2 = this.props,
placeholder = _props2.placeholder,
hideInputPlaceholderTextIfTagsPresent = _props2.hideInputPlaceholderTextIfTagsPresent;
return hideInputPlaceholderTextIfTagsPresent && selectedTags.length > 0 ? null : placeholder;
}
}, {
key: 'getDeleteIcon',
value: function getDeleteIcon() {
var tagDeleteIcon = this.props.tagDeleteIcon;
return tagDeleteIcon || ' x';
}
}, {
key: 'getTagDeleteComponent',
value: function getTagDeleteComponent() {
var tagDeleteStyle = this.props.tagDeleteStyle;
return tagDeleteStyle ? styled(TagDelete)(_templateObject, tagDeleteStyle) : TagDelete;
}
}, {
key: 'getTagStyledComponent',
value: function getTagStyledComponent() {
var tagStyle = this.props.tagStyle;
return tagStyle ? styled(Tag)(_templateObject, tagStyle) : Tag;
}
}, {
key: 'getInputWrapperStyledComponent',
value: function getInputWrapperStyledComponent() {
var wrapperStyle = this.props.wrapperStyle;
return wrapperStyle ? styled(Wrapper)(_templateObject, wrapperStyle) : Wrapper;
}
}, {
key: 'getInputStyledComponent',
value: function getInputStyledComponent() {
var inputStyle = this.props.inputStyle;
return inputStyle ? styled(Input)(_templateObject, inputStyle) : Input;
}
}, {
key: 'render',
value: function render() {
var _this6 = this;
var onInputChanged = this.props.onInputChanged;
var InputWrapper = this.getInputWrapperStyledComponent();
var InputComponent = this.getInputStyledComponent();
return React.createElement(
InputWrapper,
{ onClick: this.focusInput },
this.renderTags(),
React.createElement(InputComponent, {
ref: function ref(el) {
return _this6.input = el;
},
onChange: onInputChanged,
placeholder: this.renderPlaceholder(),
type: 'text',
onKeyUp: this.onInputKeyUp,
onKeyDown: this.onInputKeyDown })
);
}
}]);
return TagInput;
}(Component);
TagInput.propTypes = {
tags: PropTypes.array.isRequired,
onTagsChanged: PropTypes.func.isRequired,
onInputChange: PropTypes.func,
placeholder: PropTypes.string,
wrapperStyle: PropTypes.string,
inputStyle: PropTypes.string,
tagStyle: PropTypes.string,
tagDeleteStyle: PropTypes.string,
tagDeleteIcon: PropTypes.element,
addTagOnEnterKeyPressed: PropTypes.bool,
hideInputPlaceholderTextIfTagsPresent: PropTypes.bool
};
TagInput.defaultProps = {
placeholder: 'Type something and hit enter...',
addTagOnEnterKeyPressed: true,
hideInputPlaceholderTextIfTagsPresent: true
};
export default TagInput;