feat: Allow arbitrary data attributes to be set (#65) ✨

* feat: Allow arbitrary data attributes to be set

* chore: Fix Bad merge

* test: Add tests to ensure data attributes are being rendered

* chore: Fix codeclimate issue

* docs: Adding dataset property 📚

Author: mrchief

README.md

@@ -200,6 +200,7 @@ Data for rendering the tree select items. The object requires the following stru
   className,    // optional: Additional css class for the node. This is helpful to style the nodes your way
   tagClassName, // optional: Css class for the corresponding tag. Use this to add custom style the pill corresponding to the node.
   actions,      // optional: An array of extra action on the node (such as displaying an info icon or any custom icons/elements)
+  dataset,      // optional: Allows data-* attributes to be set on the node and tag elements
   ...           // optional: Any extra properties that you'd like to receive during `onChange` event
 }
 ```

src/dataset-utils.js

@@ -0,0 +1,8 @@
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+
+const getDataset = (o = {}) => Object.keys(o).reduce((acc, cur) => {
+  acc[`data-${toKebabCase(cur)}`] = o[cur]
+  return acc
+}, {})
+
+export {getDataset}

src/input/index.js

@@ -4,14 +4,15 @@ import cn from 'classnames/bind'
 import debounce from 'lodash.debounce'
 import Tag from '../tag'
 import styles from './index.css'
+import { getDataset } from '../dataset-utils'
 
 const cx = cn.bind(styles)
 
 const getTags = (tags = [], onDelete) => {
   return tags.map((tag, i) => {
-    const {_id, label, tagClassName} = tag
+    const {_id, label, tagClassName, dataset} = tag
     return (
-      <li className={cx('tag-item', tagClassName)} key={`tag-${i}`}>
+      <li className={cx('tag-item', tagClassName)} key={`tag-${i}`} {...getDataset(dataset)}>
         <Tag label={label} id={_id} onDelete={onDelete}/>
       </li>
     )

src/input/index.test.js

@@ -28,3 +28,18 @@ test('raises onchange', t => {
   wrapper.find('input').simulate('change', {target: {value: 'hello'}, persist: spy()})
   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 = shallow(<Input tags={tags} />)
+
+  t.is(wrapper.find('.test').prop('data-first'), 'john')
+  t.is(wrapper.find('.test').prop('data-last'), 'smith')
+})

src/tree-node/index.js

@@ -7,6 +7,7 @@ import isEmpty from '../isEmpty'
 import NodeLabel from './node-label'
 
 import styles from './index.css'
+import { getDataset } from '../dataset-utils'
 
 const cx = cn.bind(styles)
 
@@ -47,9 +48,10 @@ const TreeNode = props => {
   const { simpleSelect, keepTreeOnSearch, node, searchModeOn, onNodeToggle, onCheckboxChange } = props
   const liCx = getNodeCx(props)
   const toggleCx = getToggleCx(props)
+  const style = keepTreeOnSearch || !searchModeOn ? { paddingLeft: `${node._depth * 20}px` } : {}
 
   return (
-    <li className={liCx} style={keepTreeOnSearch || !searchModeOn ? { paddingLeft: `${node._depth * 20}px` } : {}}>
+    <li className={liCx} style={style} {...getDataset(node.dataset)}>
       <i className={toggleCx} onClick={() => onNodeToggle(node._id)} />
       <NodeLabel node={node} simpleSelect={simpleSelect} onCheckboxChange={onCheckboxChange} />
       {getNodeActions(props)}
@@ -68,7 +70,8 @@ TreeNode.propTypes = {
     label: PropTypes.string.isRequired,
     checked: PropTypes.bool,
     expanded: PropTypes.bool,
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    dataset: PropTypes.object
   }).isRequired,
   keepTreeOnSearch: PropTypes.bool,
   searchModeOn: PropTypes.bool,

src/tree-node/index.test.js

@@ -76,3 +76,20 @@ test('disable checkbox if the node has disabled status', t => {
 
   t.true(wrapper.hasClass('disabled'))
 })
+
+test('should render data attributes', t => {
+  const node = {
+    _id: '0-0-0',
+    _parent: '0-0',
+    label: 'item1-1-1',
+    value: 'value1-1-1',
+    dataset: {
+      first: 'john',
+      last: 'smith'
+    }
+  }
+
+  const wrapper = shallow(<TreeNode node={node} />)
+  t.is(wrapper.prop('data-first'), 'john')
+  t.is(wrapper.prop('data-last'), 'smith')
+})