Skip to content

Commit

Permalink
feat: Add unique ids on dropdowns if not provided (#220)
Browse files Browse the repository at this point in the history
Added possibility to provide a id by property. If not provided it generates a unique by a global counter.

Fixes #215
Fixes #212
Fixes #208 

## Type of change

- [x] Bug fix
- [x] New feature
  • Loading branch information
ellinge authored and mrchief committed Mar 28, 2019
1 parent a805c5f commit c5d0849
Show file tree
Hide file tree
Showing 19 changed files with 212 additions and 109 deletions.
9 changes: 9 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ A lightweight and fast control to render a select component that can display hie
- [showPartiallySelected](#showpartiallyselected)
- [showDropdown](#showDropdown)
- [form states (disabled|readOnly)](#formstates)
- [id](#id)
- [Styling and Customization](#styling-and-customization)
- [Using default styles](#default-styles)
- [Customizing with Bootstrap, Material Design styles](#customizing-styles)
Expand Down Expand Up @@ -309,6 +310,14 @@ Type: `bool` (default: `false`)
`disabled=true` disables the dropdown completely. This is useful during form submit events.
`readOnly=true` makes the dropdown read only, which means that the user can still interact with it but cannot change any of its values. This can be useful for display only forms.

### id

Type: `string`

Specific id for container. The container renders with a default id of `rdtsN` where N is count of the current component rendered.

Use to ensure a own unique id when a simple counter is not sufficient, e.g in a partial server render (SSR)

## Styling and Customization

### Default styles
Expand Down
92 changes: 48 additions & 44 deletions __snapshots__/src/index.test.js.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ Generated by [AVA](https://ava.li).
<div
className="react-dropdown-tree-select"
id="rdts"
>
<div
className="dropdown"
Expand Down Expand Up @@ -98,12 +99,14 @@ Generated by [AVA](https://ava.li).
},
]
}
id="rdts"
onBlur={Function onBlur {}}
onChange={Function onChange {}}
onFocus={Function onFocus {}}
>
<div
className="react-dropdown-tree-select"
id="rdts"
>
<div
className="dropdown"
Expand Down Expand Up @@ -148,6 +151,7 @@ Generated by [AVA](https://ava.li).
<div
className="react-dropdown-tree-select"
id="rdts"
>
<div
className="dropdown"
Expand All @@ -171,110 +175,110 @@ Generated by [AVA](https://ava.li).
<Tree
data={
Map {
'0' => {
'rdts-0' => {
_children: [
'0-0',
'0-1',
'rdts-0-0',
'rdts-0-1',
],
_depth: 0,
_id: '0',
_id: 'rdts-0',
children: undefined,
label: 'item1',
value: 'value1',
},
'0-0' => {
'rdts-0-0' => {
_children: [
'0-0-0',
'0-0-1',
'rdts-0-0-0',
'rdts-0-0-1',
],
_depth: 1,
_id: '0-0',
_parent: '0',
_id: 'rdts-0-0',
_parent: 'rdts-0',
children: undefined,
label: 'item1-1',
value: 'value1-1',
},
'0-0-0' => {
'rdts-0-0-0' => {
_depth: 2,
_id: '0-0-0',
_parent: '0-0',
_id: 'rdts-0-0-0',
_parent: 'rdts-0-0',
label: 'item1-1-1',
value: 'value1-1-1',
},
'0-0-1' => {
'rdts-0-0-1' => {
_depth: 2,
_id: '0-0-1',
_parent: '0-0',
_id: 'rdts-0-0-1',
_parent: 'rdts-0-0',
label: 'item1-1-2',
value: 'value1-1-2',
},
'0-1' => {
'rdts-0-1' => {
_depth: 1,
_id: '0-1',
_parent: '0',
_id: 'rdts-0-1',
_parent: 'rdts-0',
label: 'item1-2',
value: 'value1-2',
},
'1' => {
'rdts-1' => {
_children: [
'1-0',
'1-1',
'rdts-1-0',
'rdts-1-1',
],
_depth: 0,
_id: '1',
_id: 'rdts-1',
children: undefined,
label: 'item2',
value: 'value2',
},
'1-0' => {
'rdts-1-0' => {
_children: [
'1-0-0',
'1-0-1',
'1-0-2',
'rdts-1-0-0',
'rdts-1-0-1',
'rdts-1-0-2',
],
_depth: 1,
_id: '1-0',
_parent: '1',
_id: 'rdts-1-0',
_parent: 'rdts-1',
children: undefined,
label: 'item2-1',
value: 'value2-1',
},
'1-0-0' => {
'rdts-1-0-0' => {
_depth: 2,
_id: '1-0-0',
_parent: '1-0',
_id: 'rdts-1-0-0',
_parent: 'rdts-1-0',
label: 'item2-1-1',
value: 'value2-1-1',
},
'1-0-1' => {
'rdts-1-0-1' => {
_depth: 2,
_id: '1-0-1',
_parent: '1-0',
_id: 'rdts-1-0-1',
_parent: 'rdts-1-0',
label: 'item2-1-2',
value: 'value2-1-2',
},
'1-0-2' => {
'rdts-1-0-2' => {
_children: [
'1-0-2-0',
'rdts-1-0-2-0',
],
_depth: 2,
_id: '1-0-2',
_parent: '1-0',
_id: 'rdts-1-0-2',
_parent: 'rdts-1-0',
children: undefined,
label: 'item2-1-3',
value: 'value2-1-3',
},
'1-0-2-0' => {
'rdts-1-0-2-0' => {
_depth: 3,
_id: '1-0-2-0',
_parent: '1-0-2',
_id: 'rdts-1-0-2-0',
_parent: 'rdts-1-0-2',
label: 'item2-1-3-1',
value: 'value2-1-3-1',
},
'1-1' => {
'rdts-1-1' => {
_depth: 1,
_id: '1-1',
_parent: '1',
_id: 'rdts-1-1',
_parent: 'rdts-1',
label: 'item2-2',
value: 'value2-2',
},
Expand Down
Binary file modified __snapshots__/src/index.test.js.snap
Binary file not shown.
28 changes: 13 additions & 15 deletions __snapshots__/src/tree-node/actions.test.js.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,20 @@ Generated by [AVA](https://ava.li).

> Snapshot 1
[
<Action
actionData={
{
action: 'action-0',
id: undefined,
}
<Action
actionData={
{
action: 'action-0',
id: 'snapshot',
}
className="cn0-0-0"
junk="1"
key="action-0"
onAction={Function onAction {}}
text="hello"
title="action"
/>,
]
}
className="cn0-0-0"
junk="1"
key="action-0"
onAction={Function onAction {}}
text="hello"
title="action"
/>

## returns null if actions are empty

Expand Down
Binary file modified __snapshots__/src/tree-node/actions.test.js.snap
Binary file not shown.
13 changes: 0 additions & 13 deletions __snapshots__/src/tree/index.test.js.md

This file was deleted.

Binary file removed __snapshots__/src/tree/index.test.js.snap
Binary file not shown.
7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"format": "prettier-eslint \"src/**/*.js\" \"docs/**/*.js\" webpack.config.js",
"test": "cross-env NODE_ENV=test ava",
"test:cov": "rimraf .nyc_output && nyc npm test && nyc report --reporter=lcov ",
"test:watch": "cross-env NODE_ENV=test ava --watch",
"semantic-release": "semantic-release",
"contributors": "all-contributors add && all-contributors generate"
},
Expand Down Expand Up @@ -68,9 +69,9 @@
"cross-env": "^5.0.5",
"css-loader": "^0.28.0",
"cz-conventional-changelog-emoji": "^0.1.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.0.4",
"enzyme-to-json": "^3.3.3",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"enzyme-to-json": "^3.3.5",
"eslint": "^4.19.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.9.0",
Expand Down
11 changes: 7 additions & 4 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import cn from 'classnames/bind'
import PropTypes from 'prop-types'
import React, { Component } from 'react'

import { isOutsideClick } from './utils'
import { isOutsideClick, clientIdGenerator } from './utils'
import Input from './input'
import Tree from './tree'
import TreeManager from './tree-manager'
Expand Down Expand Up @@ -38,7 +38,8 @@ class DropdownTreeSelect extends Component {
showPartiallySelected: PropTypes.bool,
disabled: PropTypes.bool,
readOnly: PropTypes.bool,
hierarchical: PropTypes.bool
hierarchical: PropTypes.bool,
id: PropTypes.string
}

static defaultProps = {
Expand All @@ -53,10 +54,11 @@ class DropdownTreeSelect extends Component {
showDropdown: this.props.showDropdown || false,
searchModeOn: false
}
this.clientId = props.id || clientIdGenerator.get(this)
}

createList = ({ data, simpleSelect, showPartiallySelected, hierarchical }) => {
this.treeManager = new TreeManager({ data, simpleSelect, showPartiallySelected, hierarchical })
this.treeManager = new TreeManager({ data, simpleSelect, showPartiallySelected, hierarchical, rootPrefixId: this.clientId })
return this.treeManager.tree
}

Expand Down Expand Up @@ -110,7 +112,7 @@ class DropdownTreeSelect extends Component {
}

handleOutsideClick = e => {
if (!isOutsideClick(e, this.props.className)) {
if (!isOutsideClick(e, this.node)) {
return
}

Expand Down Expand Up @@ -192,6 +194,7 @@ class DropdownTreeSelect extends Component {

return (
<div
id={this.clientId}
className={cx(this.props.className, 'react-dropdown-tree-select')}
ref={node => {
this.node = node
Expand Down
Loading

0 comments on commit c5d0849

Please sign in to comment.