Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert remaining components to functional components #464

Open
wants to merge 11 commits into
base: hooks
Choose a base branch
from
Open

Convert remaining components to functional components #464

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
bc4f65b
feat: Support placeholder for inline search input (#404)
ldeveber Sep 28, 2020
748a641
chore: Switch to semantic release action
mrchief Sep 28, 2020
975bbaf
chore: Friendly status check name
mrchief Sep 28, 2020
c31e898
fix: Added missing prop 'inlineSearchPlaceholder' in 'TextProps' inte…
eduardohley Oct 11, 2020
c4f387c
feat: Set the tabIndex on tree select (#439)
marianjuhas Nov 5, 2020
36bc8bf
chore: Convert to functional component
m4theushw Jan 21, 2021
75abaef
chore: Convert to functional component
m4theushw Feb 6, 2021
fd19cbf
chore: Convert to functional component
m4theushw Feb 11, 2021
e751227
chore: Convert to functional component
m4theushw Feb 11, 2021
a3f1c6a
chore: Fix tests
m4theushw Feb 11, 2021
4152456
chore: Fix tests
m4theushw Feb 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
chore: Fix tests
  • Loading branch information
@m4theushw
m4theushw committed Feb 16, 2021
commit 4152456a169d57df7f9ff32e17636e65d2a70e85
71 changes: 59 additions & 12 deletions __snapshots__/src/index.test.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ Generated by [AVA](https://ava.li).
<Memo(Trigger)
clientId="rdts"
onTrigger={Function onTrigger {}}
showDropdown={true}
tabIndex={0}
texts={{}}
>
Expand All @@ -26,10 +27,9 @@ Generated by [AVA](https://ava.li).
onTagRemove={Function onTagRemove {}}
texts={{}}
>
<Memo(Input)
<Memo(ForwardRef)
clientId="rdts"
inlineSearchInput={false}
inputRef={Function inputRef {}}
onBlur={Function onInputBlur {}}
onFocus={Function onInputFocus {}}
onInputChange={Function onInputChange {}}
Expand All @@ -38,6 +38,19 @@ Generated by [AVA](https://ava.li).
/>
</Tags>
</Memo(Trigger)>
m4theushw marked this conversation as resolved.
Show resolved Hide resolved
<div
className="dropdown-content"
>
<Tree
clientId="rdts"
data={Map {}}
onAction={Function onAction {}}
onCheckboxChange={Function onCheckboxChange {}}
onNodeToggle={Function onNodeToggle {}}
searchModeOn={false}
texts={{}}
/>
</div>
</div>
</div>

Expand All @@ -55,6 +68,7 @@ Generated by [AVA](https://ava.li).
<Memo(Trigger)
clientId="rdts"
onTrigger={Function onTrigger {}}
showDropdown={true}
tabIndex={0}
texts={{}}
>
Expand All @@ -64,6 +78,28 @@ Generated by [AVA](https://ava.li).
texts={{}}
/>
</Memo(Trigger)>
<div
className="dropdown-content"
>
<Memo(ForwardRef)
clientId="rdts"
inlineSearchInput={true}
onBlur={Function onInputBlur {}}
onFocus={Function onInputFocus {}}
onInputChange={Function onInputChange {}}
onKeyDown={Function onKeyboardKeyDown {}}
texts={{}}
/>
<Tree
clientId="rdts"
data={Map {}}
onAction={Function onAction {}}
onCheckboxChange={Function onCheckboxChange {}}
onNodeToggle={Function onNodeToggle {}}
searchModeOn={false}
texts={{}}
/>
</div>
</div>
</div>

Expand All @@ -82,6 +118,7 @@ Generated by [AVA](https://ava.li).
clientId="rdts"
disabled={true}
onTrigger={Function onTrigger {}}
showDropdown={false}
tabIndex={0}
texts={{}}
>
Expand All @@ -91,11 +128,10 @@ Generated by [AVA](https://ava.li).
onTagRemove={Function onTagRemove {}}
texts={{}}
>
<Memo(Input)
<Memo(ForwardRef)
clientId="rdts"
disabled={true}
inlineSearchInput={false}
inputRef={Function inputRef {}}
onBlur={Function onInputBlur {}}
onFocus={Function onInputFocus {}}
onInputChange={Function onInputChange {}}
Expand Down Expand Up @@ -231,10 +267,9 @@ Generated by [AVA](https://ava.li).
<li
className="tag-item"
>
<Memo(Input)
<ForwardRef
clientId="rdts"
inlineSearchInput={false}
inputRef={Function inputRef {}}
mode="radioSelect"
onBlur={Function onInputBlur {}}
onFocus={Function onInputFocus {}}
Expand All @@ -252,7 +287,7 @@ Generated by [AVA](https://ava.li).
placeholder="Choose..."
type="text"
/>
</Memo(Input)>
</ForwardRef>
</li>
</ul>
</Tags>
Expand Down Expand Up @@ -383,10 +418,9 @@ Generated by [AVA](https://ava.li).
<li
className="tag-item"
>
<Memo(Input)
<ForwardRef
clientId="rdts"
inlineSearchInput={false}
inputRef={Function inputRef {}}
onBlur={Function onInputBlur {}}
onFocus={Function onInputFocus {}}
onInputChange={Function onInputChange {}}
Expand All @@ -403,7 +437,7 @@ Generated by [AVA](https://ava.li).
placeholder="Choose..."
type="text"
/>
</Memo(Input)>
</ForwardRef>
</li>
</ul>
</Tags>
Expand All @@ -427,6 +461,7 @@ Generated by [AVA](https://ava.li).
<Memo(Trigger)
clientId="rdts"
onTrigger={Function onTrigger {}}
showDropdown={true}
tabIndex={0}
texts={{}}
>
Expand All @@ -435,10 +470,9 @@ Generated by [AVA](https://ava.li).
onTagRemove={Function onTagRemove {}}
texts={{}}
>
<Memo(Input)
<Memo(ForwardRef)
clientId="rdts"
inlineSearchInput={false}
inputRef={Function inputRef {}}
onBlur={Function onInputBlur {}}
onFocus={Function onInputFocus {}}
onInputChange={Function onInputChange {}}
Expand All @@ -447,5 +481,18 @@ Generated by [AVA](https://ava.li).
/>
</Tags>
</Memo(Trigger)>
<div
className="dropdown-content"
>
<Tree
clientId="rdts"
data={Map {}}
onAction={Function onAction {}}
onCheckboxChange={Function onCheckboxChange {}}
onNodeToggle={Function onNodeToggle {}}
searchModeOn={false}
texts={{}}
/>
</div>
</div>
</div>
Binary file modified __snapshots__/src/index.test.js.snap
View file
Open in desktop
Binary file not shown.
8 changes: 4 additions & 4 deletions __snapshots__/src/tags/index.test.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Generated by [AVA](https://ava.li).
<li
className="tag-item"
>
<Memo(Input) />
<Memo(ForwardRef) />
</li>
</ul>

Expand All @@ -46,7 +46,7 @@ Generated by [AVA](https://ava.li).
<li
className="tag-item"
>
<Memo(Input) />
<Memo(ForwardRef) />
</li>
</ul>

Expand Down Expand Up @@ -89,7 +89,7 @@ Generated by [AVA](https://ava.li).
<li
className="tag-item"
>
<Memo(Input) />
<Memo(ForwardRef) />
</li>
</ul>

Expand Down Expand Up @@ -121,6 +121,6 @@ Generated by [AVA](https://ava.li).
<li
className="tag-item"
>
<Memo(Input) />
<Memo(ForwardRef) />
</li>
</ul>
Binary file modified __snapshots__/src/tags/index.test.js.snap
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions __snapshots__/src/trigger/index.test.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,5 @@ Generated by [AVA](https://ava.li).
onClick={Function handleTrigger {}}
onKeyDown={Function handleTrigger {}}
role="button"
tabIndex={0}
/>
Binary file modified __snapshots__/src/trigger/index.test.js.snap
View file
Open in desktop
Binary file not shown.
13 changes: 6 additions & 7 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,11 @@ const DropdownTreeSelect = ({
keepOpenOnSelect,
clearSearchOnChange,
}) => {
const [state, setState] = useState({ searchModeOn: false })
const [state, setState] = useState({
searchModeOn: false,
showDropdown: /initial|always/.test(showDropdownProp),
tree: new Map(),
})
const clientId = useMemo(() => idProp || clientIdGenerator.get(), [idProp])
const treeManager = useRef()
const searchInputRef = useRef()
Expand Down Expand Up @@ -304,14 +308,9 @@ const DropdownTreeSelect = ({

const commonProps = { disabled, readOnly, activeDescendant, texts, mode, clientId }

// AVA snapshot crashes if an anonymous function is used
const inputRef = useCallback(function inputRef(el) {
searchInputRef.current = el
}, [])

const searchInput = (
<Input
inputRef={inputRef}
ref={searchInputRef}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had some problems passing the ref as inputRef. It seems like AVA can't deal with refs passed through custom named props.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trying to understand here - don't we do that already? What was the exact error/issue you ran into?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The error I got when using inputRef is:

 PointerLookupError {
    index: 10,
    message: 'Could not deserialize buffer: pointer 10 could not be resolved',
}

I found this relatated issue. I tried to upgrade AVA to the latest version but it didn't solve the problem.

onInputChange={onInputChange}
onFocus={onInputFocus}
onBlur={onInputBlur}
Expand Down
11 changes: 5 additions & 6 deletions src/input/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
import React, { memo } from 'react'
import React, { memo, forwardRef } from 'react'

import { getAriaLabel } from '../a11y'
import { debounce } from '../utils'
Expand All @@ -14,9 +14,8 @@ function handleChange(onInputChange) {
}
}

const Input = props => {
const Input = forwardRef((props, ref) => {
const {
inputRef,
texts = {},
onFocus,
onBlur,
Expand All @@ -31,7 +30,7 @@ const Input = props => {
<input
type="text"
disabled={disabled}
ref={inputRef}
ref={ref}
className="search"
placeholder={inlineSearchInput ? texts.inlineSearchPlaceholder || 'Search...' : texts.placeholder || 'Choose...'}
onKeyDown={onKeyDown}
Expand All @@ -44,7 +43,7 @@ const Input = props => {
{...getAriaLabel(texts.label)}
/>
)
}
})

Input.propTypes = {
texts: PropTypes.shape({
Expand All @@ -57,7 +56,7 @@ Input.propTypes = {
onBlur: PropTypes.func,
onTagRemove: PropTypes.func,
onKeyDown: PropTypes.func,
inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.elementType })]),
inputRef: PropTypes.shape({ current: PropTypes.elementType }),
disabled: PropTypes.bool,
readOnly: PropTypes.bool,
activeDescendant: PropTypes.string,
Expand Down
2 changes: 1 addition & 1 deletion src/trigger/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ import toJson from 'enzyme-to-json'
import Trigger from './index'

test('Trigger component', t => {
const input = toJson(shallow(<Trigger clientId="rtds" />))
const input = toJson(shallow(<Trigger clientId="rtds" tabIndex={0} />))
t.snapshot(input)
})