Skip to content

Commit b7f5fd3

Browse files
author
onesine
committed
Refactoring and fixing some bugs
1 parent 7054841 commit b7f5fd3

File tree

5 files changed

+37
-42
lines changed

5 files changed

+37
-42
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Rather than looking for a component that uses [tailwind](https://tailwindcss.com
2222

2323

2424
## Online Demo
25-
You can find the online demo at [here](https://demo-react-tailwindcss-select.herokuapp.com/)
25+
You can find the online demo at [here](https://demo-react-tailwindcss-select.vercel.app/)
2626

2727
## Install
2828
You can use yarn

‎src/components/DisabledItem.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22

33
const DisabledItem = ({children}) => {
44
return (
5-
<div className={`px-2 py-2 cursor-not-allowed rounded text-gray-400`}>
5+
<div className={`px-2 py-2 cursor-not-allowed truncate rounded text-gray-400`}>
66
{children}
77
</div>
88
);

‎src/components/Item.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,14 @@ const Item = ({item, value, onSelect}) => {
99
{item.label}
1010
</DisabledItem>
1111
) : (
12-
<div onClick={() => onSelect(item)} className={`transition duration-200 px-2 py-2 cursor-pointer rounded ${(value !== null && value.value === item.value) ? 'text-white bg-blue-500' : 'text-gray-500 hover:bg-blue-100 hover:text-blue-500' }`}>
12+
<li
13+
aria-selected={(value !== null && value.value === item.value)}
14+
role={"option"}
15+
onClick={() => onSelect(item)}
16+
className={`block transition duration-200 px-2 py-2 cursor-pointer truncate rounded ${(value !== null && value.value === item.value) ? 'text-white bg-blue-500' : 'text-gray-500 hover:bg-blue-100 hover:text-blue-500' }`}
17+
>
1318
{item.label}
14-
</div>
19+
</li>
1520
)}
1621
</>
1722
);

‎src/components/Options.jsx‎

Lines changed: 20 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -13,54 +13,42 @@ const Options = ({options, value, onChoseOption, searchInputPlaceholder = "", is
1313
}, [inputValue, options]);
1414

1515
const removeValues = useCallback((array) => {
16-
if (!isMultiple) {
17-
return array;
18-
}
19-
if (value === null) {
16+
if (!isMultiple || value === null) {
2017
return array;
2118
}
2219
const valueId = value.map(item => item.value);
2320
return array.filter(item => !valueId.includes(item.value));
2421
}, [isMultiple, value]);
2522

26-
const handleSearchInputChange = useCallback(e => {
27-
setInputValue(e.target.value);
28-
}, []);
29-
3023
let filterOptions = useMemo(() => {
31-
return filterByText()
32-
}, [filterByText]);
33-
filterOptions = useMemo(() => {
34-
return removeValues(filterOptions);
35-
}, [filterOptions, removeValues]);
24+
return removeValues(filterByText());
25+
}, [filterByText, removeValues]);
3626

3727
return (
38-
<div className="absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700">
28+
<div tabIndex="-1" role="options" className="absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700">
3929
{isSearchable && (
4030
<SearchInput
4131
value={inputValue}
4232
placeholder={searchInputPlaceholder}
43-
onChange={handleSearchInputChange}
33+
onChange={e => setInputValue(e.target.value)}
4434
/>
4535
)}
4636

47-
<div className="max-h-72 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 overflow-y-scroll scrollbar-thumb-rounded-full">
48-
<div className="px-2.5">
49-
{filterOptions.map((item, index) => (
50-
<Item
51-
key={index}
52-
item={item}
53-
value={value}
54-
onSelect={onChoseOption}
55-
/>
56-
))}
57-
58-
{filterOptions.length === 0 && (
59-
<DisabledItem>
60-
{noOptionsMessage}
61-
</DisabledItem>
62-
)}
63-
</div>
37+
<div className="max-h-72 px-2.5 overflow-y-auto overflow-y-scroll">
38+
{filterOptions.map((item, index) => (
39+
<Item
40+
key={index}
41+
item={item}
42+
value={value}
43+
onSelect={onChoseOption}
44+
/>
45+
))}
46+
47+
{filterOptions.length === 0 && (
48+
<DisabledItem>
49+
{noOptionsMessage}
50+
</DisabledItem>
51+
)}
6452
</div>
6553
</div>
6654
);

‎src/components/Select.jsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,10 @@ const Select = ({options = [], value = null, onChange, placeholder="Select...",
5555
onChange(null);
5656
};
5757

58-
const pressEnter = e => {
59-
if (e.code === "Enter")
58+
const onPressEnterOrSpace = e => {
59+
if (e.code === "Enter" || e.code === "Space") {
6060
setOpen(!open);
61+
}
6162
};
6263

6364
const removeOptionOnValue = (e, option) => {
@@ -69,18 +70,18 @@ const Select = ({options = [], value = null, onChange, placeholder="Select...",
6970

7071
return (
7172
<div className="relative w-full" ref={ref}>
72-
<div onFocus={toggle} onKeyDown={pressEnter} onClick={toggle} className={`flex items-stretch w-full h-full text-sm text-gray-500 border border-gray-300 rounded shadow-sm ring-2 ring-blue-500 transition duration-300 ${isDisabled ? 'bg-gray-200' : 'bg-white hover:border-gray-400'} ${!open ? 'ring-opacity-0' : ''}`}>
73+
<div tabIndex="0" aria-expanded={open} onKeyDown={onPressEnterOrSpace} onClick={toggle} className={`flex items-stretch w-full h-full text-sm text-gray-500 border border-gray-300 rounded shadow-sm ring-2 ring-blue-500 transition duration-300 focus:outline-none focus:ring-blue-500 ${isDisabled ? 'bg-gray-200' : 'bg-white hover:border-gray-400'} ${!open ? 'ring-opacity-0' : ''}`}>
7374
<div className="w-full pl-2.5 py-2 pr-2 text-sm flex flex-wrap gap-1">
7475
{!isMultiple ? (
75-
value === null ? placeholder : value.label
76+
<p className="truncate">{(value === null || Object.keys(value).length === 0) ? placeholder : value.label}</p>
7677
) : (
7778
<>
78-
{value === null ? (
79+
{(value === null || Object.keys(value).length === 0) ? (
7980
placeholder
8081
) : (
8182
value.map((item, index) => (
8283
<div className="bg-gray-200 rounded-sm flex space-x-1" key={index}>
83-
<div className="pl-1 text-gray-600">{item.label}</div>
84+
<p className="pl-1 text-gray-600 truncate">{item.label}</p>
8485
{!isDisabled && (
8586
<div onClick={e => removeOptionOnValue(e, item)} className={`flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600`}>
8687
<svg className="w-3 h-3 mt-0.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" /></svg>
@@ -92,6 +93,7 @@ const Select = ({options = [], value = null, onChange, placeholder="Select...",
9293
</>
9394
)}
9495
</div>
96+
9597
<div className="flex items-center">
9698
{loading && (
9799
<div className="mr-2">

0 commit comments

Comments
 (0)