Skip to content

Commit 3ee0dfc

Browse files
silviuaavramsilviuaavram
committed
more types fixes after docusaurus tsx convert
1 parent 2fea8aa commit 3ee0dfc

15 files changed

Lines changed: 124 additions & 157 deletions

docusaurus/pages/combobox.js renamed to docusaurus/pages/combobox.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import * as React from 'react'
22

33
import Downshift from '../../src'
4-
import {colors, containerStyles, menuStyles} from '../utils'
4+
import {type ControllerStateAndHelpers} from '../../src/downshift.types'
5+
import {colors} from '../utils'
6+
import './shared.css'
57

68
export default function ComboBox() {
79
return (
@@ -18,8 +20,8 @@ export default function ComboBox() {
1820
selectedItem,
1921
getRootProps,
2022
clearSelection,
21-
}) => (
22-
<div style={containerStyles}>
23+
}: ControllerStateAndHelpers<string>) => (
24+
<div className="container">
2325
<label
2426
style={{
2527
fontWeight: 'bolder',
@@ -47,12 +49,12 @@ export default function ComboBox() {
4749
style={{padding: '4px 8px'}}
4850
aria-label="toggle menu"
4951
data-testid="clear-button"
50-
onClick={clearSelection}
52+
onClick={() => clearSelection()}
5153
>
5254
&#10007;
5355
</button>
5456
</div>
55-
<ul {...getMenuProps()} style={menuStyles}>
57+
<ul {...getMenuProps()} className="menu">
5658
{isOpen
5759
? (inputValue
5860
? colors.filter(i =>
@@ -64,7 +66,7 @@ export default function ComboBox() {
6466
style={{
6567
padding: '4px',
6668
backgroundColor:
67-
highlightedIndex === index ? '#bde4ff' : null,
69+
highlightedIndex === index ? '#bde4ff' : undefined,
6870
}}
6971
key={`${item}${index}`}
7072
{...getItemProps({

docusaurus/pages/index.js renamed to docusaurus/pages/index.tsx

File renamed without changes.

docusaurus/pages/useTagGroup.css renamed to docusaurus/pages/shared.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
width: fit-content;
5+
justify-content: center;
6+
margin-top: 100px;
7+
align-self: center;
8+
}
9+
10+
.menu {
11+
list-style: none;
12+
width: 100%;
13+
padding: 0;
14+
margin: 4px 0 0 0;
15+
max-height: 120px;
16+
overflow-y: scroll;
17+
}
18+
119
.tag-group {
220
display: inline-flex;
321
gap: 8px;

docusaurus/pages/useCombobox.js renamed to docusaurus/pages/useCombobox.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import * as React from 'react'
22

33
import {useCombobox} from '../../src'
4-
import {colors, containerStyles, menuStyles} from '../utils'
4+
import {colors} from '../utils'
5+
import './shared.css'
56

67
export default function DropdownCombobox() {
78
const [inputItems, setInputItems] = React.useState(colors)
@@ -26,7 +27,7 @@ export default function DropdownCombobox() {
2627
},
2728
})
2829
return (
29-
<div style={containerStyles}>
30+
<div className="container">
3031
<label
3132
style={{
3233
fontWeight: 'bolder',
@@ -52,21 +53,21 @@ export default function DropdownCombobox() {
5253
</button>
5354
<button
5455
style={{padding: '4px 8px'}}
55-
aria-label="toggle menu"
56+
aria-label="clear selection"
5657
data-testid="clear-button"
5758
onClick={() => selectItem(null)}
5859
>
5960
&#10007;
6061
</button>
6162
</div>
62-
<ul {...getMenuProps()} style={menuStyles}>
63+
<ul {...getMenuProps()} className="menu">
6364
{isOpen
6465
? inputItems.map((item, index) => (
6566
<li
6667
style={{
6768
padding: '4px',
6869
backgroundColor:
69-
highlightedIndex === index ? '#bde4ff' : null,
70+
highlightedIndex === index ? '#bde4ff' : undefined,
7071
}}
7172
key={`${item}${index}`}
7273
{...getItemProps({

docusaurus/pages/useMultipleCombobox.js renamed to docusaurus/pages/useMultipleCombobox.tsx

Lines changed: 39 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import * as React from 'react'
22

33
import {useCombobox, useMultipleSelection} from '../../src'
4-
import {
5-
colors,
6-
containerStyles,
7-
menuStyles,
8-
tagGroupSyles,
9-
tagStyles,
10-
} from '../utils'
4+
import {type UseMultipleSelectionReturnValue} from '../../src/hooks/useMultipleSelection/index.types'
5+
import {colors} from '../utils'
6+
import './shared.css'
117

12-
const initialSelectedItems = [colors[0], colors[1]]
8+
const initialSelectedItems = colors.slice(0, 2)
139

14-
function getFilteredItems(selectedItems, inputValue) {
10+
function getFilteredItems(selectedItems: string[], inputValue: string) {
1511
const lowerCasedInputValue = inputValue.toLowerCase()
1612

1713
return colors.filter(
@@ -31,21 +27,8 @@ export default function DropdownMultipleCombobox() {
3127

3228
const {getSelectedItemProps, getDropdownProps, removeSelectedItem} =
3329
useMultipleSelection({
34-
selectedItems,
35-
onStateChange({selectedItems: newSelectedItems, type}) {
36-
switch (type) {
37-
case useMultipleSelection.stateChangeTypes
38-
.SelectedItemKeyDownBackspace:
39-
case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
40-
case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
41-
case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
42-
setSelectedItems(newSelectedItems)
43-
break
44-
default:
45-
break
46-
}
47-
},
48-
})
30+
initialSelectedItems,
31+
}) as unknown as UseMultipleSelectionReturnValue<string>
4932
const {
5033
isOpen,
5134
getToggleButtonProps,
@@ -55,7 +38,7 @@ export default function DropdownMultipleCombobox() {
5538
highlightedIndex,
5639
getItemProps,
5740
selectedItem,
58-
clearSelection,
41+
reset,
5942
} = useCombobox({
6043
items,
6144
inputValue,
@@ -83,19 +66,19 @@ export default function DropdownMultipleCombobox() {
8366
switch (type) {
8467
case useCombobox.stateChangeTypes.InputKeyDownEnter:
8568
case useCombobox.stateChangeTypes.ItemClick:
86-
setSelectedItems([...selectedItems, newSelectedItem])
69+
setSelectedItems([...selectedItems, newSelectedItem as string])
8770

8871
break
8972
case useCombobox.stateChangeTypes.InputChange:
90-
setInputValue(newInputValue)
73+
setInputValue(newInputValue as string)
9174
break
9275
default:
9376
break
9477
}
9578
},
9679
})
9780
return (
98-
<div style={containerStyles}>
81+
<div className="container">
9982
<label
10083
style={{
10184
fontWeight: 'bolder',
@@ -105,33 +88,34 @@ export default function DropdownMultipleCombobox() {
10588
>
10689
Choose an element:
10790
</label>
108-
<div style={tagGroupSyles}>
109-
{selectedItems.map(
110-
function renderSelectedItem(selectedItemForRender, index) {
111-
return (
91+
<div className="tag-group">
92+
{selectedItems.map(function renderSelectedItem(
93+
selectedItemForRender: string,
94+
index: number,
95+
) {
96+
return (
97+
<span
98+
className="tag"
99+
key={`selected-item-${index}`}
100+
{...getSelectedItemProps({
101+
selectedItem: selectedItemForRender,
102+
index,
103+
})}
104+
>
105+
{selectedItemForRender}
106+
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
112107
<span
113-
style={tagStyles}
114-
key={`selected-item-${index}`}
115-
{...getSelectedItemProps({
116-
selectedItem: selectedItemForRender,
117-
index,
118-
})}
108+
style={{padding: '4px', cursor: 'pointer'}}
109+
onClick={e => {
110+
e.stopPropagation()
111+
removeSelectedItem(selectedItemForRender)
112+
}}
119113
>
120-
{selectedItemForRender}
121-
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
122-
<span
123-
style={{padding: '4px', cursor: 'pointer'}}
124-
onClick={e => {
125-
e.stopPropagation()
126-
removeSelectedItem(selectedItemForRender)
127-
}}
128-
>
129-
&#10005;
130-
</span>
114+
&#10005;
131115
</span>
132-
)
133-
},
134-
)}
116+
</span>
117+
)
118+
})}
135119
<div>
136120
<input
137121
style={{padding: '4px'}}
@@ -150,20 +134,20 @@ export default function DropdownMultipleCombobox() {
150134
style={{padding: '4px 8px'}}
151135
aria-label="clear selection"
152136
data-testid="clear-button"
153-
onClick={clearSelection}
137+
onClick={() => reset()}
154138
>
155139
&#10007;
156140
</button>
157141
</div>
158142
</div>
159-
<ul {...getMenuProps()} style={menuStyles}>
143+
<ul {...getMenuProps()} className="menu">
160144
{isOpen
161145
? items.map((item, index) => (
162146
<li
163147
style={{
164148
padding: '4px',
165149
backgroundColor:
166-
highlightedIndex === index ? '#bde4ff' : null,
150+
highlightedIndex === index ? '#bde4ff' : undefined,
167151
}}
168152
key={`${item}${index}`}
169153
{...getItemProps({

0 commit comments

Comments
 (0)