Skip to content

Conversation

ellinge
Copy link
Collaborator

@ellinge ellinge commented Jun 14, 2019

What does it do?

Keeps dropdown open if updating with new props. Only updates/sets state open if new props causes the dropdown to show (a.k.a initial/always)

#253 introduced resetting of state for shopDropdown on new props:

showDropdown: /initial|always/.test(showDropdown) || false,

Type of change

  • Bug fix

ellinge and others added 24 commits April 18, 2019 16:13
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.
![bild](https://user-images.githubusercontent.com/17863113/54728331-8d972980-4b7d-11e9-9490-a3bd6b08481f.png)

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:
![bild](https://user-images.githubusercontent.com/17863113/55436725-5bce8b80-559d-11e9-927d-17149643100c.png)
Scroll to bottom and expand:
![bild](https://user-images.githubusercontent.com/17863113/55436759-6c7f0180-559d-11e9-8bd9-7ad141b5c9ca.png)

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 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' }}` |
 - 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
@ellinge ellinge changed the title Fix/remove resetting on dropdown on init props fix: Remove resetting on dropdown on init props Jun 14, 2019
@ellinge ellinge changed the title fix: Remove resetting on dropdown on init props fix: Remove resetting of dropdown on init props Jun 14, 2019
@coveralls
Copy link

Pull Request Test Coverage Report for Build 1226

  • 1 of 1 (100.0%) changed or added relevant line in 1 file are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage remained the same at 95.163%

Totals Coverage Status
Change from base Build 1221: 0.0%
Covered Lines: 569
Relevant Lines: 582

💛 - Coveralls

mrchief
mrchief previously approved these changes Jun 14, 2019
@mrchief
Copy link
Collaborator

mrchief commented Jun 14, 2019

Should we add a test for this?

@qlty-cloud-legacy
Copy link

Code Climate has analyzed commit f37a46c and detected 0 issues on this pull request.

View more on Code Climate.

@ellinge
Copy link
Collaborator Author

ellinge commented Jun 15, 2019

Should we add a test for this?

Tests added, Btw, offtopic, but noticed this:
https://unpkg.com/[email protected]/dist/react-dropdown-tree-select.js

            nodeRenderer: i.a.func,
            iconRenderer: i.a.func,
            tagRenderer: i.a.func,

Source here develop...MomchilGorchev:npm-publish 😄

@mrchief
Copy link
Collaborator

mrchief commented Jun 16, 2019

Tests added, Btw, offtopic, but noticed this:

Interesting! :)

Also, there are quite a few:

image

They could have used patch-package instead of going thru all the trouble :)

@mrchief
Copy link
Collaborator

mrchief commented Jun 16, 2019

Oh, I remember now: #162

@ellinge
Copy link
Collaborator Author

ellinge commented Jun 16, 2019

I used PRs and temporary npm git installs instead, but perhaps this would have been faster 🤔😆

@mrchief
Copy link
Collaborator

mrchief commented Jun 16, 2019

Yeah, git installs will work too! I've found that patch-package can help in cases where your npm is behind an enterprise proxy or a private repo. Or if your build system doesn't understand/support that syntax. Plus yarn syntax for installing from PRs is a bit different than npm so that's another inconvenience with git installs. 🤷‍♂

In the end, use what works best for you. I'm just happy to have so many choices!

@mrchief mrchief changed the title fix: Remove resetting of dropdown on init props fix: Remove resetting of dropdown on init props (#265) 🐛 Jun 16, 2019
@mrchief mrchief merged commit 866af6e into develop Jun 16, 2019
@mrchief mrchief deleted the fix/RemoveResettingOnDropdownOnInitProps branch June 16, 2019 23:05
mrchief pushed a commit that referenced this pull request Jun 16, 2019
Keeps dropdown open if updating with new props. Only updates/sets state open if new props cause the dropdown to show (a.k.a `initial`/`always`)

#253 introduced resetting of state for shopDropdown on new props:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants