Skip to content

Commit ffc59cc

Browse files
author
jfusco
committed
Removing dependency on 'update' in react-addons. Adding transform-function-bind. Changing scss names to use BEM model.
1 parent 97bede9 commit ffc59cc

File tree

14 files changed

+138
-139
lines changed

14 files changed

+138
-139
lines changed

‎.babelrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"es2015"
55
],
66
"plugins": [
7+
"transform-function-bind",
78
"transform-class-properties"
89
]
910
}

‎__tests__/Tags-test.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ describe('Tags - "initialTags"', () => {
7979
);
8080

8181
const renderedDOM = findDOMNode(tags);
82-
const tagContainer = renderedDOM.querySelector('.tags-container');
82+
const tagContainer = renderedDOM.querySelector('.react-tags__container');
8383

8484
expect(tagContainer.children.length).toBe(TEST_TAGS.length);
8585
});
@@ -129,7 +129,7 @@ describe('Tags - "addKeys"', () => {
129129
);
130130

131131
const renderedDOM = findDOMNode(tags);
132-
tagContainer = renderedDOM.querySelector('.tags-container');
132+
tagContainer = renderedDOM.querySelector('.react-tags__container');
133133
input = renderedDOM.getElementsByTagName('input')[0];
134134

135135
input.value = TEST_TAGS[0];
@@ -197,7 +197,7 @@ describe('Tags - events', () => {
197197
);
198198

199199
const renderedDOM = findDOMNode(tags);
200-
tagContainer = renderedDOM.querySelector('.tags-container');
200+
tagContainer = renderedDOM.querySelector('.react-tags__container');
201201
input = renderedDOM.getElementsByTagName('input')[0];
202202
});
203203

@@ -268,7 +268,7 @@ describe('Tags - removing', () => {
268268
);
269269

270270
const renderedDOM = findDOMNode(tags);
271-
tagContainer = renderedDOM.querySelector('.tags-container');
271+
tagContainer = renderedDOM.querySelector('.react-tags__container');
272272
input = renderedDOM.getElementsByTagName('input')[0];
273273
});
274274

@@ -324,7 +324,7 @@ describe('Tags - "uniqueTags"', () => {
324324

325325
const renderedDOM = findDOMNode(tags);
326326
const input = renderedDOM.getElementsByTagName('input')[0];
327-
const tagContainer = renderedDOM.querySelector('.tags-container');
327+
const tagContainer = renderedDOM.querySelector('.react-tags__container');
328328

329329
input.value = TEST_TAGS[0];
330330

@@ -345,7 +345,7 @@ describe('Tags - "uniqueTags"', () => {
345345

346346
const renderedDOM = findDOMNode(tags);
347347
const input = renderedDOM.getElementsByTagName('input')[0];
348-
const tagContainer = renderedDOM.querySelector('.tags-container');
348+
const tagContainer = renderedDOM.querySelector('.react-tags__container');
349349

350350
input.value = TEST_TAGS[0];
351351

@@ -367,7 +367,7 @@ describe('Tags - "maxTags"', () => {
367367

368368
const renderedDOM = findDOMNode(tags);
369369
const input = renderedDOM.getElementsByTagName('input')[0];
370-
const tagContainer = renderedDOM.querySelector('.tags-container');
370+
const tagContainer = renderedDOM.querySelector('.react-tags__container');
371371

372372
input.value = TEST_TAGS[0];
373373

‎dist/react-tags.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.react-tags input, .react-tags .tags-container > li {
1+
.react-tags input, .react-tags__container > li {
22
font-size: 12px;
33
height: 26px;
44
line-height: 26px;
@@ -49,13 +49,13 @@
4949
outline: none;
5050
border-color: #b1afb9; }
5151

52-
.react-tags .tags-container {
52+
.react-tags__container {
5353
display: inline;
5454
margin: 0;
5555
padding: 0;
5656
list-style: none; }
5757

58-
.react-tags .tags-container > li {
58+
.react-tags__container > li {
5959
-webkit-animation: slide-left 0.8s cubic-bezier(0.19, 1, 0.22, 1);
6060
-moz-animation: slide-left 0.8s cubic-bezier(0.19, 1, 0.22, 1);
6161
-o-animation: slide-left 0.8s cubic-bezier(0.19, 1, 0.22, 1);
@@ -64,22 +64,22 @@
6464
margin: 5px 5px 0 0;
6565
transition: background 0.3s ease;
6666
cursor: default; }
67-
.react-tags .tags-container > li:hover, .react-tags .tags-container > li.active {
67+
.react-tags__container > li:hover, .react-tags__container > li.active {
6868
background: #c9c8cf; }
6969

70-
.react-tags .tags-container a {
70+
.react-tags__container a {
7171
font-size: 12px;
7272
color: #000;
7373
cursor: pointer;
7474
transition: color 0.3s ease;
7575
display: inline-block;
7676
margin-left: 7px;
7777
text-decoration: none; }
78-
.react-tags .tags-container a:hover {
78+
.react-tags__container a:hover {
7979
color: #666666; }
8080

81-
.react-tags .tags-container i {
81+
.react-tags__container i {
8282
font-style: normal; }
8383

84-
.react-tags .tags-container.readonly {
84+
.react-tags__container_readonly {
8585
pointer-events: none; }

‎dist/react-tags.js‎

Lines changed: 38 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
(function webpackUniversalModuleDefinition(root, factory) {
22
if(typeof exports === 'object' && typeof module === 'object')
3-
module.exports = factory(require("React"), require("update"));
3+
module.exports = factory(require("React"));
44
else if(typeof define === 'function' && define.amd)
5-
define(["React", "update"], factory);
5+
define(["React"], factory);
66
else if(typeof exports === 'object')
7-
exports["Tags"] = factory(require("React"), require("update"));
7+
exports["Tags"] = factory(require("React"));
88
else
9-
root["Tags"] = factory(root["React"], root["update"]);
10-
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__) {
9+
root["Tags"] = factory(root["React"]);
10+
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
1111
return /******/ (function(modules) { // webpackBootstrap
1212
/******/ // The module cache
1313
/******/ var installedModules = {};
@@ -66,16 +66,14 @@ return /******/ (function(modules) { // webpackBootstrap
6666

6767
var _react2 = _interopRequireDefault(_react);
6868

69-
var _reactAddonsUpdate = __webpack_require__(2);
70-
71-
var _reactAddonsUpdate2 = _interopRequireDefault(_reactAddonsUpdate);
72-
73-
var _Tag = __webpack_require__(3);
69+
var _Tag = __webpack_require__(2);
7470

7571
var _Tag2 = _interopRequireDefault(_Tag);
7672

7773
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
7874

75+
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); } }
76+
7977
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
8078

8179
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; }
@@ -106,10 +104,10 @@ return /******/ (function(modules) { // webpackBootstrap
106104
if (this.state.tags.length >= this.props.maxTags) return;
107105
}
108106

109-
var _props = this.props;
110-
var uniqueTags = _props.uniqueTags;
111-
var onChange = _props.onChange;
112-
var onAdded = _props.onAdded;
107+
var _props = this.props,
108+
uniqueTags = _props.uniqueTags,
109+
onChange = _props.onChange,
110+
onAdded = _props.onAdded;
113111

114112

115113
var value = this.input.value.trim();
@@ -119,7 +117,7 @@ return /******/ (function(modules) { // webpackBootstrap
119117
}
120118

121119
this.setState({
122-
tags: (0, _reactAddonsUpdate2.default)(this.state.tags, { $push: [value] })
120+
tags: [].concat(_toConsumableArray(this.state.tags), [value])
123121
}, function () {
124122
if (typeof onChange !== 'undefined') {
125123
onChange(_this2.state.tags);
@@ -137,14 +135,16 @@ return /******/ (function(modules) { // webpackBootstrap
137135
value: function removeTag(index) {
138136
var _this3 = this;
139137

140-
var _props2 = this.props;
141-
var onChange = _props2.onChange;
142-
var onRemoved = _props2.onRemoved;
138+
var _props2 = this.props,
139+
onChange = _props2.onChange,
140+
onRemoved = _props2.onRemoved;
143141

144142
var value = this.state.tags[index];
145143

146144
this.setState({
147-
tags: (0, _reactAddonsUpdate2.default)(this.state.tags, { $splice: [[index, 1]] })
145+
tags: this.state.tags.filter(function (_, i) {
146+
return i !== index;
147+
})
148148
}, function () {
149149
if (typeof onChange !== 'undefined') {
150150
onChange(_this3.state.tags);
@@ -200,11 +200,11 @@ return /******/ (function(modules) { // webpackBootstrap
200200
value: function render() {
201201
var _this4 = this;
202202

203-
var _props3 = this.props;
204-
var readOnly = _props3.readOnly;
205-
var removeTagIcon = _props3.removeTagIcon;
206-
var placeholder = _props3.placeholder;
207-
var id = _props3.id;
203+
var _props3 = this.props,
204+
readOnly = _props3.readOnly,
205+
removeTagIcon = _props3.removeTagIcon,
206+
placeholder = _props3.placeholder,
207+
id = _props3.id;
208208

209209

210210
var tagItems = this.state.tags.map(function (tag, v) {
@@ -219,6 +219,7 @@ return /******/ (function(modules) { // webpackBootstrap
219219
var tagInput = !this.props.readOnly ? _react2.default.createElement('input', {
220220
type: 'text',
221221
role: 'textbox',
222+
autoComplete: 'off',
222223
'aria-label': placeholder,
223224
placeholder: placeholder,
224225
onChange: this.onInputChange.bind(this),
@@ -227,7 +228,7 @@ return /******/ (function(modules) { // webpackBootstrap
227228
return _this4.input = el;
228229
} }) : null;
229230

230-
var classNames = readOnly ? 'tags-container readonly' : 'tags-container';
231+
var classNames = readOnly ? 'react-tags__container react-tags__container_readonly' : 'react-tags__container';
231232

232233
return _react2.default.createElement(
233234
'div',
@@ -254,18 +255,18 @@ return /******/ (function(modules) { // webpackBootstrap
254255
right: 39
255256
};
256257
Tags.propTypes = {
257-
initialTags: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string),
258-
onChange: _react2.default.PropTypes.func,
259-
onAdded: _react2.default.PropTypes.func,
260-
onRemoved: _react2.default.PropTypes.func,
261-
onInputChange: _react2.default.PropTypes.func,
262-
maxTags: _react2.default.PropTypes.number,
263-
placeholder: _react2.default.PropTypes.string,
264-
addKeys: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number),
265-
id: _react2.default.PropTypes.string,
266-
readOnly: _react2.default.PropTypes.bool,
267-
uniqueTags: _react2.default.PropTypes.bool,
268-
removeTagIcon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element])
258+
initialTags: _react.PropTypes.arrayOf(_react.PropTypes.string),
259+
onChange: _react.PropTypes.func,
260+
onAdded: _react.PropTypes.func,
261+
onRemoved: _react.PropTypes.func,
262+
onInputChange: _react.PropTypes.func,
263+
maxTags: _react.PropTypes.number,
264+
placeholder: _react.PropTypes.string,
265+
addKeys: _react.PropTypes.arrayOf(_react.PropTypes.number),
266+
id: _react.PropTypes.string,
267+
readOnly: _react.PropTypes.bool,
268+
uniqueTags: _react.PropTypes.bool,
269+
removeTagIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element])
269270
};
270271
Tags.defaultProps = {
271272
initialTags: [],
@@ -285,12 +286,6 @@ return /******/ (function(modules) { // webpackBootstrap
285286

286287
/***/ },
287288
/* 2 */
288-
/***/ function(module, exports) {
289-
290-
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
291-
292-
/***/ },
293-
/* 3 */
294289
/***/ function(module, exports, __webpack_require__) {
295290

296291
'use strict';

‎dist/react-tags.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)