+ {inlineSearchInput && searchInput}
{this.state.allNodesHidden ? (
{texts.noMatches || 'No matches found'}
) : (
diff --git a/src/index.test.js b/src/index.test.js
index 284e0fe0..adcdd1e9 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -86,6 +86,12 @@ test('always shows dropdown', t => {
t.snapshot(toJson(wrapper))
})
+test('always shows dropdown with inline search Input', t => {
+ const { tree } = t.context
+ const wrapper = shallow(
)
+ t.snapshot(toJson(wrapper))
+})
+
test('keeps dropdown open for showDropdown: always', t => {
const { tree } = t.context
const wrapper = mount(
)
diff --git a/src/input/index.js b/src/input/index.js
index 18c50810..e331f946 100644
--- a/src/input/index.js
+++ b/src/input/index.js
@@ -1,31 +1,8 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
-import Tag from '../tag'
-import './index.css'
-import { getDataset, debounce } from '../utils'
+import { debounce } from '../utils'
import { getAriaLabel } from '../a11y'
-const getTags = (tags = [], onDelete, readOnly, disabled, labelRemove) =>
- tags.map(tag => {
- const { _id, label, tagClassName, dataset } = tag
- return (
-
-
-
- )
- })
-
class Input extends PureComponent {
static propTypes = {
tags: PropTypes.array,
@@ -39,6 +16,7 @@ class Input extends PureComponent {
disabled: PropTypes.bool,
readOnly: PropTypes.bool,
activeDescendant: PropTypes.string,
+ inlineSearchInput: PropTypes.bool,
}
constructor(props) {
@@ -52,40 +30,24 @@ class Input extends PureComponent {
}
render() {
- const {
- tags,
- onTagRemove,
- inputRef,
- texts = {},
- onFocus,
- onBlur,
- disabled,
- readOnly,
- onKeyDown,
- activeDescendant,
- } = this.props
+ const { inputRef, texts = {}, onFocus, onBlur, disabled, readOnly, onKeyDown, activeDescendant } = this.props
return (
-
+
)
}
}
diff --git a/src/input/index.test.js b/src/input/index.test.js
index f02d7417..66c56c05 100644
--- a/src/input/index.test.js
+++ b/src/input/index.test.js
@@ -6,13 +6,7 @@ import toJson from 'enzyme-to-json'
import Input from './index'
-test('renders tags', t => {
- const tags = [{ _id: 'i1', label: 'l1' }, { _id: 'i2', label: 'l2' }]
- const wrapper = toJson(shallow(
))
- t.snapshot(wrapper)
-})
-
-test('renders input when no tags are passed', t => {
+test('renders input', t => {
const wrapper = toJson(shallow(
))
t.snapshot(wrapper)
})
@@ -30,24 +24,6 @@ test('raises onchange', t => {
t.true(onChange.calledWith('hello'))
})
-test('should render data attributes', t => {
- const tags = [
- {
- _id: 'i1',
- label: 'l1',
- tagClassName: 'test',
- dataset: {
- first: 'john',
- last: 'smith',
- },
- },
- ]
-
- const wrapper = toJson(shallow(
))
-
- t.snapshot(wrapper)
-})
-
test('should render disabled input', t => {
const wrapper = toJson(shallow(
))
t.snapshot(wrapper)
diff --git a/src/input/index.css b/src/tags/index.css
similarity index 100%
rename from src/input/index.css
rename to src/tags/index.css
diff --git a/src/tags/index.js b/src/tags/index.js
new file mode 100644
index 00000000..b467e67a
--- /dev/null
+++ b/src/tags/index.js
@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Tag from '../tag'
+import { getDataset } from '../utils'
+
+import './index.css'
+
+const getTags = (tags = [], onDelete, readOnly, disabled, labelRemove) =>
+ tags.map(tag => {
+ const { _id, label, tagClassName, dataset } = tag
+ return (
+
+
+
+ )
+ })
+
+class Tags extends PureComponent {
+ static propTypes = {
+ tags: PropTypes.array,
+ onTagRemove: PropTypes.func,
+ readOnly: PropTypes.bool,
+ disabled: PropTypes.bool,
+ texts: PropTypes.object,
+ children: PropTypes.node,
+ }
+
+ render() {
+ const { tags, onTagRemove, texts = {}, disabled, readOnly, children } = this.props
+ const lastItem = children ||
{texts.placeholder || 'Choose...'}
+
+ return (
+
+ {getTags(tags, onTagRemove, readOnly, disabled, texts.labelRemove)}
+ - {lastItem}
+
+ )
+ }
+}
+
+export default Tags
diff --git a/src/tags/index.test.js b/src/tags/index.test.js
new file mode 100644
index 00000000..d7cfc705
--- /dev/null
+++ b/src/tags/index.test.js
@@ -0,0 +1,59 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+import test from 'ava'
+import toJson from 'enzyme-to-json'
+
+import Tags from './index'
+import Input from '../input'
+
+test('renders tags', t => {
+ const tags = [{ _id: 'i1', label: 'l1' }, { _id: 'i2', label: 'l2' }]
+ const wrapper = toJson(
+ shallow(
+
+
+
+ )
+ )
+ t.snapshot(wrapper)
+})
+
+test('renders tags when no tags are passed', t => {
+ const wrapper = toJson(
+ shallow(
+
+
+
+ )
+ )
+ t.snapshot(wrapper)
+})
+
+test('renders tags when no tags are passed nor Input', t => {
+ const wrapper = toJson(shallow(
))
+ t.snapshot(wrapper)
+})
+
+test('should render data attributes', t => {
+ const tags = [
+ {
+ _id: 'i1',
+ label: 'l1',
+ tagClassName: 'test',
+ dataset: {
+ first: 'john',
+ last: 'smith',
+ },
+ },
+ ]
+
+ const wrapper = toJson(
+ shallow(
+
+
+
+ )
+ )
+
+ t.snapshot(wrapper)
+})
diff --git a/types/react-dropdown-tree-select.d.ts b/types/react-dropdown-tree-select.d.ts
index 589b3690..844f579d 100644
--- a/types/react-dropdown-tree-select.d.ts
+++ b/types/react-dropdown-tree-select.d.ts
@@ -97,6 +97,8 @@ declare module 'react-dropdown-tree-select' {
id?: string
/** Optional search predicate to override the default case insensitive contains match on node labels. */
searchPredicate?: (currentNode: TreeNode, searchTerm: string) => boolean
+ /** inlineSearchInput=true Makes the search input renders inside the dropdown-content. Defaults to `false` */
+ inlineSearchInput?: boolean
}
export interface DropdownTreeSelectState {