fix: Avoid jarring on paging #259
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adds TypeScript-definitions
I also noticed that onAction is not correctly implemented. Currently sends a { action: string, id: string }.
There is code in index.js which tries to fetch the node. But it does not seem be working. It expects two parameters but receives the object described above in the first parameter.
Changed the examples/stories to get the node id at least.
Also changed in readme where onAction should be applied.
Fixes #209
- [X] New feature
## What does it do? An issue in #223 for children. An array of Node[] instead of TreeNode[] was specified. ## Type of change - [x] Bug fix
## What does it do? Prevents event bubbling on node expand-click. The function isOutsideClick only gets a short part of two items (li.node + i.expand), then the parents stop, in Firefox. This causes it to be detected as an outside click. In chrome the path is instead empty and no outside click is therefore detected. Fixes #198 Can test here (switching between v1.17/developTemp): Expand the first two nodes:  Scroll to bottom and expand:  https://ellinge.github.io/react-dropdown-tree-select-test/#v117-nocheckeddefault https://ellinge.github.io/react-dropdown-tree-select-test/#DevelopTemp-nocheckeddefault There still seems to be some issue with scroll in firefox after initial scroll and expand which does not happen in chrome. The expanded item gets out of view. This also happens on scoll and check. ## Type of change - [x] Bug fix
## What does it do? Adds a "types (friendly) badge" to Readme ## Type of change Please delete options that are not relevant. - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [X] This change requires a documentation update
## What does it do? Adds prettierrc and pre commit hooks to format code automatically. Cleans up eslintrc and switched to react-app lint rules
## What does it do? Adds support for single select in the tree dropdown. Simple select ignores any children so this is a hybrid between the two. Also ignores clicks for simple select when labels are disabled (only checked readonly) The middle dropdown is radioSelect and the last one a simpleSelect https://ellinge.github.io/react-dropdown-tree-select-test/#DevelopTemp-checkeddefault Fixes #119 ## Type of change - [x] Bug fix - [x] New feature
* feat: Test try a11y in test with axe * fix: Initial commit (non working) * fix: Working keyboard navigation * fix: Backspace only on empty search * fix: Adjust code to check codeclimate * fix: Refactored some parts to utils * fix: Refactored some parts to utils * fix: Code refactoring * fix: Add documentation * fix: Refactor * fix: Refactor * fix: Refactor * fix: Refactor * fix: Refactor * fix: Add to typings * fix: Close on Enter * fix: Refactor * fix: Added test * fix: Added some aria * fix: Add label option * fix: Render until node on pagedown * fix: More tests added and fix pagedown on large search result * fix: Modify output on violations * fix: Code smells * fix: Updated doc and center scrollIntoView, fix hasMore() * fix: Trigger on*-events properly, only open for chars and whitelist * fix: Skip som aria in this branch * fix: Add tests and fix snapshot * fix: Add tests and fix snapshot * fix: Enabled by default * fix: Avoid scroll of whole page, only dropdown * fix: Remember focus during prop updates * fix: Delete unintentional dist-file * fix: Do not select readOnly/disabled * fix: Switch to babel-plugin-transform-runtime instead * fix: Add label to trigger as well * fix: Highlight tag on focus, ad aria-labels * fix: Highlight tag on focus, ad aria-labels * fix: Update snapshots, match default * fix: Allow navigate to disabled/readonly * fix: Code review/smells fixes * fix: Code smell * fix: Code smell * fix: Move to a11y-folder, shared onKeyDown test method * fix: Build error and tabIndex * fix: Set new focus after delete * fix: Code climate * fix: Code climate * fix: Select on tab for simpleSelect * fix: Add more tests * fix: Add prop for setting remove aria-label * fix: Code climate * fix: Add typing for labelRemove * fix: Adjust timeout * style: Bring prettier manually to reduce conflicts * fix: Prettier and removed comment * fix: Added migration guide * fix: Bundle text props * fix: Typing errors * fix: Renamed prop * Revert "fix: Renamed prop" This reverts commit 4145f8c. * Revert "fix: Typing errors" This reverts commit 6aa4beb. * Revert "fix: Bundle text props" This reverts commit 4256ce2. * Revert "fix: Added migration guide" This reverts commit a4fc033. * fix: Validate radioSelect also * fix: Moved around methods * refactor: Separate out test utils from exported ones * refactor: Use ES6 getter instead of custom method for accessing tags
* docs: update README.md * docs: update .all-contributorsrc (cherry picked from commit b5b803b)
* docs: update README.md * docs: update .all-contributorsrc (cherry picked from commit 095a329)
* fix: Remove babel-runtime from distribution bundle babel-runtime is only needed for tests * chore: Do not auto open stats everytime (cherry picked from commit 071e7f5)
BREAKING: Action Changes
- The option to pass a local `onAction` handler on a node is now removed. Use the **global** `onAction` event instead.
```jsx
<DropdownTreeSelect onAction={onAction} ... />
```
- `onAction` signature is now consistent with signature for other event handlers such `onChange` and `onNodeToggle`
```js
// before
onAction = ({ action, id }) => {
console.log(action, id)
}
// after
onAction = (node, action) => {
console.log(action, node.id)
}
```
- Any custom props passed to `node` or `action` is accessible in the event properties. This will make it easier to add generic custom logic based on your custom data/properties which can be used instead of separate handlers.
For example:
```js
// node with action and custom props
{
id: 'mynode',
propA: 'hello',
propB: true,
actions: [
{
id: 'myaction',
propX: {...},
propY: 12
}
]
}
onAction = (node, action) => {
console.log(node.propA, node.propB, action.propX, action.propY)
// prints hello true {...} 12
}
```
BREAKING CHANGE: Property changes
| Description | Usage before | Usage after |
| --------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------- |
| Added a new `mode` prop | `simpleSelect={true}` / `simpleSelect` | `mode='simpleSelect'` |
| Bundled text props into a single object | `placeholderText='My text'`<br>`noMatchesText='No matches'` | `texts={{ placeholder: 'My text', noMatches: 'No matches' }}` |
BREAKING CHANGE: `hierarchical` prop
`hierarchical` prop is now moved under `mode` prop.
```
// before
<DropdownTreeSelect data={data} hierarchical={true} />
// after
<DropdownTreeSelect data={data} mode="hierarchical" />
```
Pull Request Test Coverage Report for Build 1220
💛 - Coveralls |
mrchief
reviewed
May 23, 2019
|
Thanks for jumping in on this! |
ellinge
changed the title
* feat: Group logically related props together (#242) ⚡️ BREAKING CHANGE: Property changes | Description | Usage before | Usage after | | --------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------- | | Added a new `mode` prop | `simpleSelect={true}` / `simpleSelect` | `mode='simpleSelect'` | | Bundled text props into a single object | `placeholderText='My text'`<br>`noMatchesText='No matches'` | `texts={{ placeholder: 'My text', noMatches: 'No matches' }}` |
mrchief
force-pushed
the
develop
branch
2 times, most recently
from
fe317b6
to
705b223
Compare
BREAKING CHANGE: Action Changes
- The option to pass a local `onAction` handler on a node is now removed. Use the **global** `onAction` event instead.
```jsx
<DropdownTreeSelect onAction={onAction} ... />
```
- `onAction` signature is now consistent with signature for other event handlers such `onChange` and `onNodeToggle`
```js
// before
onAction = ({ action, id }) => {
console.log(action, id)
}
// after
onAction = (node, action) => {
console.log(action, node.id)
}
```
- Any custom props passed to `node` or `action` is accessible in the event properties. This will make it easier to add generic custom logic based on your custom data/properties which can be used instead of separate handlers.
For example:
```js
// node with action and custom props
{
id: 'mynode',
propA: 'hello',
propB: true,
actions: [
{
id: 'myaction',
propX: {...},
propY: 12
}
]
}
onAction = (node, action) => {
console.log(node.propA, node.propB, action.propX, action.propY)
// prints hello true {...} 12
}
```
BREAKING CHANGE: Property changes
| Description | Usage before | Usage after |
| --------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------- |
| Added a new `mode` prop | `simpleSelect={true}` / `simpleSelect` | `mode='simpleSelect'` |
| Bundled text props into a single object | `placeholderText='My text'`<br>`noMatchesText='No matches'` | `texts={{ placeholder: 'My text', noMatches: 'No matches' }}` |
BREAKING CHANGE: `hierarchical` prop
`hierarchical` prop is now moved under `mode` prop.
```
// before
<DropdownTreeSelect data={data} hierarchical={true} />
// after
<DropdownTreeSelect data={data} mode="hierarchical" />
```
BREAKING CHANGE: Property changes
| Description | Usage before | Usage after |
| --------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------- |
| Added a new `mode` prop | `simpleSelect={true}` / `simpleSelect` | `mode='simpleSelect'` |
| Bundled text props into a single object | `placeholderText='My text'`<br>`noMatchesText='No matches'` | `texts={{ placeholder: 'My text', noMatches: 'No matches' }}` |
mrchief
reviewed
Jun 10, 2019
|
Code Climate has analyzed commit 2682a05 and detected 0 issues on this pull request. View more on Code Climate. |
mrchief
approved these changes
Jun 10, 2019
mrchief
changed the title
mrchief
pushed a commit
that referenced
this pull request
Jun 10, 2019
- Avoids changing scroll if the current active descendant is the same for the tree (on prop updates on tree). - Also fixes jarring issue when selecting nodes on paging (index > 100/pagesize). - Partially fixes #257
|
This isn't released yet. I gotta straighten out quirks with the release process. But when it does, it won't be a major version update. |
|
Released now - v2.0.1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Avoids changing scroll if the current active descendant is the same for the tree (on prop updates on tree).
Also fixes jarring issue when selecting nodes on paging (index > 100/pagesize).
Partially fixes #257
Type of change