this.props.onTagDeleted(i)}\n style={this.props.getTagStyle(tag)}/>\n );\n });\n },\n\n onBlur(e) {\n this.props.closePanel();\n if (typeof this.props.onBlur === 'function') {\n this.props.onBlur(e);\n }\n },\n\n render() {\n const placeholder = this.props.placeholder || '';\n let size = this.props.value.length === 0 ?\n placeholder.length :\n this.props.value.length;\n return (\n \n {this.getTags()}\n
\n
\n
\n {this.getCategories()}\n
\n );\n }\n});\n\nexport default Panel;\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/Panel.jsx\n **/","export var TAB = 9;\nexport var ENTER = 13;\nexport var BACKSPACE = 8;\nexport var LEFT = 37;\nexport var UP = 38;\nexport var RIGHT = 39;\nexport var DOWN = 40;\nexport var COMMA = 188;\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/keyboard.js\n **/"],"sourceRoot":""}
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Manual test
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import Input from './src/index';
5 |
6 | const categories = [
7 | {
8 | id: 'animals',
9 | title: 'Animals',
10 | type: 'animal',
11 | items: ['Dog', 'Cat', 'Bird', 'Dolphin', 'Apes']
12 | },
13 | {
14 | id: 'something',
15 | title: 'Something cool',
16 | items: ['Something cool'],
17 | single: true
18 | },
19 | {
20 | id: 'food',
21 | title: 'food',
22 | type: 'food',
23 | items: ['Apple', 'Banana', 'Grapes', 'Pear']
24 | },
25 | {
26 | id: 'professions',
27 | title: 'Professions',
28 | type: 'profession',
29 | items: ['Waiter', 'Writer', 'Hairdresser', 'Policeman']
30 | }
31 | ];
32 |
33 | function transformTag(tag) {
34 | const categoryMatches = categories.filter(category => category.id === tag.category);
35 | const categoryTitle = categoryMatches[0].title;
36 | return `${categoryTitle}/${tag.title}`;
37 | }
38 |
39 |
40 | function getTagStyle(tag){
41 | if (tag.title === "rhino") {
42 | return {
43 | base: {
44 | backgroundColor: "gray",
45 | color: "lightgray"
46 | }
47 | }
48 | return {}
49 | }
50 | }
51 |
52 | function getCreateNewText(title, text){
53 | return `create new ${title} "${text}"`
54 | }
55 |
56 | const Wrap = React.createClass({
57 | getInitialState() {
58 | return {
59 | editable: true,
60 | tags: [{
61 | title: "rhino",
62 | category: 'animals'
63 | }]
64 | };
65 | },
66 |
67 | toggleEdit(e) {
68 | e.preventDefault();
69 | e.stopPropagation();
70 | this.setState({ editable: !this.state.editable });
71 | },
72 |
73 | render() {
74 | return (
75 |
76 |
77 | {this.state.editable
78 | ? {
85 | console.log('Changed', tags);
86 | this.setState({tags});
87 | }}
88 | onBlur={() => {
89 | console.log('Blur');
90 | }}
91 | transformTag={transformTag}
92 | getCreateNewText={getCreateNewText}
93 | />
94 | : Not editable}
95 |
96 | );
97 | }
98 | });
99 |
100 | ReactDOM.render(
101 | React.createElement(Wrap, {}),
102 | document.getElementById('app')
103 | );
104 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-categorized-tag-input",
3 | "version": "2.1.2",
4 | "description": "React.js component for making tag autocompletion inputs with categorized results.",
5 | "main": "categorized-tag-input.js",
6 | "scripts": {
7 | "test": "mocha --compilers js:babel/register --recursive",
8 | "build": "NODE_ENV=production ./node_modules/.bin/webpack --config webpack.config.js",
9 | "runtest": "node server.js",
10 | "prepublish": "npm run build"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/mvader/react-categorized-tag-input.git"
15 | },
16 | "keywords": [
17 | "tag",
18 | "autocomplete",
19 | "input",
20 | "categorized",
21 | "react"
22 | ],
23 | "author": "Miguel Molina ",
24 | "license": "MIT",
25 | "bugs": {
26 | "url": "https://github.com/mvader/react-categorized-tag-input/issues"
27 | },
28 | "homepage": "https://github.com/mvader/react-categorized-tag-input#readme",
29 | "devDependencies": {
30 | "babel": "^5.8.23",
31 | "babel-core": "^5.8.25",
32 | "babel-loader": "^5.3.2",
33 | "expect": "^1.12.0",
34 | "jsdom": "<4.0.0",
35 | "mocha": "^2.3.3",
36 | "mocha-jsdom": "^1.0.0",
37 | "react": "^15.1.0",
38 | "react-dom": "^15.1.0",
39 | "react-hot-loader": "^1.3.0",
40 | "webpack": "^1.12.2",
41 | "webpack-dev-server": "^1.12.0"
42 | },
43 | "dependencies": {
44 | "exenv": "^1.2.0",
45 | "react-addons-test-utils": "^15.1.0"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var WebpackDevServer = require('webpack-dev-server');
3 | var config = require('./webpack.test.config');
4 |
5 | new WebpackDevServer(webpack(config), {
6 | publicPath: config.output.publicPath,
7 | hot: true,
8 | historyApiFallback: true
9 | }).listen(5000, 'localhost', function (err) {
10 | if (err) {
11 | console.log(err);
12 | }
13 | console.log('Listening at localhost:5000');
14 | });
15 |
--------------------------------------------------------------------------------
/src/CategorizedTagInput.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Input from './Input.jsx';
4 | import Panel from './Panel.jsx';
5 | import * as key from './keyboard';
6 |
7 | const { PropTypes } = React;
8 |
9 | export function isCategoryItemValid(i) {
10 | return typeof i === 'string' && i.trim().length > 0;
11 | }
12 |
13 | export function isCategoryValid(c) {
14 | return typeof c === 'object'
15 | && c.id
16 | && c.title
17 | && c.items
18 | && Array.isArray(c.items)
19 | && c.items.every(isCategoryItemValid)
20 | && (c.type || c.single);
21 | }
22 |
23 | const CategorizedTagInput = React.createClass({
24 | propTypes: {
25 | addNew: PropTypes.bool,
26 | categories: PropTypes.arrayOf(PropTypes.object).isRequired,
27 | transformTag: PropTypes.func,
28 | value: PropTypes.arrayOf(PropTypes.object),
29 | onBlur: PropTypes.func,
30 | onChange: PropTypes.func,
31 | placeholder: PropTypes.string,
32 | getTagStyle: PropTypes.func,
33 | getCreateNewText: PropTypes.func
34 | },
35 |
36 | getInitialState() {
37 | return {
38 | value: '',
39 | selection: {
40 | item: 0,
41 | category: 0
42 | },
43 | panelOpened: false,
44 | categories: [],
45 | addNew: this.props.addNew === undefined ? true : this.props.addNew
46 | };
47 | },
48 |
49 | getDefaultProps() {
50 | return {
51 | onChange(newTags){
52 | // do nothing
53 | }
54 | };
55 | },
56 |
57 | componentWillMount() {
58 | if (!this.props.categories.every(isCategoryValid)) {
59 | throw new Error('invalid categories source provided for react-categorized-tag-input');
60 | }
61 | },
62 |
63 | componentWillUnmount() {
64 | if (this.timeout) {
65 | clearTimeout(this.timeout);
66 | }
67 | },
68 |
69 | filterCategories(input) {
70 | let categories = this.props.categories.map(c => {
71 | c = Object.assign({}, c, {
72 | items: c.items.filter(this.filterItems(input))
73 | });
74 | return (c.items.length === 0 && (!this.state.addNew || c.single)) ? null : c;
75 | }).filter(c => c !== null);
76 |
77 | let selection = this.state.selection;
78 | if (this.state.selection.category >= categories.length) {
79 | selection = {
80 | category: 0,
81 | item: 0
82 | };
83 | } else {
84 | if (selection.item >= categories[selection.category].items.length) {
85 | selection.item = 0;
86 | }
87 | }
88 |
89 | this.setState({
90 | categories,
91 | selection
92 | });
93 | },
94 |
95 | filterItems(input) {
96 | return function (i) {
97 | if (input.length === 1) {
98 | return i.toLowerCase().trim() === input;
99 | }
100 | return i.toLowerCase().indexOf(input.trim().toLowerCase()) >= 0;
101 | };
102 | },
103 |
104 | openPanel() {
105 | this.setState({ panelOpened: true });
106 | },
107 |
108 | closePanel() {
109 | // Prevent the panel from hiding before the click action takes place
110 | if (this.timeout) {
111 | clearTimeout(this.timeout);
112 | }
113 | this.timeout = setTimeout(() => {
114 | this.timeout = undefined;
115 | this.setState({ panelOpened: false });
116 | }, 150);
117 | },
118 |
119 | onValueChange(e) {
120 | let value = e.target.value;
121 | this.setState({ value, panelOpened: value.trim().length > 0 || !isNaN(Number(value.trim())) });
122 | this.filterCategories(value);
123 | },
124 |
125 | onTagDeleted(i) {
126 | const newTags = this.props.value.slice()
127 | newTags.splice(i, 1)
128 | this.props.onChange(newTags)
129 | },
130 |
131 | onAdd(newTag) {
132 | const newTags = this.props.value.concat([newTag]);
133 | this.setState({
134 | value: '',
135 | panelOpened: true
136 | });
137 |
138 | this.refs.input.focusInput();
139 | this.props.onChange(newTags);
140 | },
141 |
142 | addSelectedTag() {
143 | if (!(this.state.panelOpened && this.state.value.length > 0)) {
144 | return;
145 | }
146 |
147 | const category = this.state.categories[this.state.selection.category];
148 | const title = category.items[this.state.selection.item];
149 | this.onAdd({
150 | category: category.id,
151 | title: title || this.state.value
152 | });
153 | },
154 |
155 | handleBackspace(e) {
156 | if (this.state.value.trim().length === 0) {
157 | e.preventDefault();
158 | this.onTagDeleted(this.props.value.length - 1);
159 | }
160 | },
161 |
162 | handleArrowLeft() {
163 | let result = this.state.selection.item - 1;
164 | this.setState({selection: {
165 | category: this.state.selection.category,
166 | item: result >= 0 ? result : 0
167 | }});
168 | },
169 |
170 | handleArrowUp() {
171 | let result = this.state.selection.category - 1;
172 | this.setState({selection: {
173 | category: result >= 0 ? result : 0,
174 | item: 0
175 | }});
176 | },
177 |
178 | handleArrowRight() {
179 | let result = this.state.selection.item + 1;
180 | let cat = this.state.categories[this.state.selection.category];
181 | this.setState({selection: {
182 | category: this.state.selection.category,
183 | item: result <= cat.items.length ? result : cat.items.length
184 | }});
185 | },
186 |
187 | handleArrowDown() {
188 | let result = this.state.selection.category + 1;
189 | let cats = this.state.categories;
190 | this.setState({selection: {
191 | category: result < cats.length ? result : cats.length - 1,
192 | item: 0
193 | }});
194 | },
195 |
196 | onKeyDown(e) {
197 | let result;
198 | switch (e.keyCode) {
199 | case key.TAB:
200 | case key.ENTER:
201 | if (!this.state.value){
202 | // enable normal tab/enter behavior
203 | // (don't preventDefault)
204 | break;
205 | }
206 | case key.COMMA:
207 | e.preventDefault();
208 | this.addSelectedTag();
209 | break;
210 | case key.BACKSPACE:
211 | this.handleBackspace(e);
212 | break;
213 | case key.LEFT:
214 | this.handleArrowLeft();
215 | break;
216 | case key.UP:
217 | this.handleArrowUp();
218 | break;
219 | case key.RIGHT:
220 | this.handleArrowRight();
221 | break;
222 | case key.DOWN:
223 | this.handleArrowDown();
224 | break;
225 | }
226 | },
227 |
228 | render() {
229 | return (
230 |
231 |
238 | {this.state.panelOpened && this.state.value.length > 0 ?
: ''}
243 |
105 |
{this.props.title}
106 |
107 | {items}
108 | {addBtn}
109 |
110 |
64 | {this.getTags()}
65 |
71 |
72 |
35 | {this.getCategories()}
36 |
37 | );
38 | }
39 | });
40 |
41 | export default Panel;
42 |
--------------------------------------------------------------------------------
/src/Tag.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const { PropTypes } = React;
4 |
5 | const Tag = React.createClass({
6 | propTypes: {
7 | selected: PropTypes.bool,
8 | input: PropTypes.string.isRequired,
9 | text: PropTypes.string.isRequired,
10 | addable: PropTypes.bool,
11 | deletable: PropTypes.bool,
12 | onAdd: PropTypes.func,
13 | onDelete: PropTypes.func,
14 | style: PropTypes.object
15 | },
16 |
17 | // helps tests pass
18 | getDefaultProps() {
19 | return {
20 | text: ''
21 | };
22 | },
23 |
24 | tagContent() {
25 | let content = [];
26 | let startIndex = this.props.text.trim().toLowerCase()
27 | .indexOf(this.props.input.trim().toLowerCase());
28 | let endIndex = startIndex + this.props.input.length;
29 |
30 | if (startIndex > 0) {
31 | content.push(
32 | {this.props.text.substring(0, startIndex)}
33 | );
34 | }
35 |
36 | content.push(
37 | {this.props.text.substring(startIndex, endIndex)}
38 | );
39 |
40 | if (endIndex < this.props.text.length) {
41 | content.push(
42 | {this.props.text.substring(endIndex)}
43 | );
44 | }
45 |
46 | return content;
47 | },
48 |
49 | onClick(e) {
50 | e.preventDefault();
51 | if (this.props.addable) {
52 | this.props.onAdd(e);
53 | }
54 | },
55 |
56 | onDelete(e) {
57 | // Prevents onClick event of the whole tag from being triggered
58 | e.preventDefault();
59 | e.stopPropagation();
60 | this.props.onDelete(e);
61 | },
62 |
63 | getDeleteBtn() {
64 | const style = this.props.style || {}
65 | const deleteStyle = style.delete ? style.delete : {}
66 |
67 | return (
68 |
71 | );
72 | },
73 |
74 | render() {
75 | let deleteBtn = null;
76 | if (this.props.deletable) {
77 | deleteBtn = this.getDeleteBtn();
78 | }
79 | let cls = 'cti__tag' + (this.props.selected ? ' cti-selected' : '');
80 |
81 | const style = this.props.style || {}
82 |
83 | return (
84 |
85 |
86 | {this.tagContent()}
87 |
88 | {deleteBtn}
89 |