Skip to content

Commit

Permalink
Merge pull request #14 from AmyShackles/v3.1.0
Browse files Browse the repository at this point in the history 
V3.1.0
  • Loading branch information
@AmyShackles
AmyShackles authored Jan 25, 2021
2 parents ca052e7 + 8a9ad61 commit a3b278c
Show file tree
Hide file tree
Showing 7 changed files with 120 additions and 10 deletions.
9 changes: 7 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ const ExampleClient = () => {
}
```

## AutoSuggest props:
Expand All @@ -68,6 +67,7 @@ const ExampleClient = () => {
| **options** | The array of options if the autosuggest is created using a list of items already in the application |
| **handleChange** | Array for updating the text in the autosuggest field |
| **value** | The value of the autosuggest field |
| **caseInsensitive** | Setting for Client version of AutoSuggest, whether to perform case-insensitive matches against the options array |


## AutoSuggest Default Props
Expand All @@ -78,7 +78,12 @@ const ExampleClient = () => {
| **url** | string | "" |
| **debounceTime** | number | 200 |
| **styles** | object | <pre> {<br> announcement: {<br> position: "absolute",<br> clip: "rect(0 0 0 0)",<br> clipPath: "inset(50%)",<br> height: "1px",<br> width: "1px",<br> overflow: "hidden",<br> },<br> combobox: {<br> display: "inline-block",<br> },<br> searchField: {<br> padding: ".5rem",<br> border: "2px solid #c8c8c8",<br> backgroundColor: "#fff",<br> borderRadius: "6px",<br> color: "#000",<br> fontWeight: "normal",<br> fontSize: "1.35rem",<br> margin: "0 auto",<br> width: "19rem",<br> focus: {<br> color: "#000",<br> border: "2px solid #005499",<br> outline: "none",<br> },<br> },<br> searchLabel: {<br> display: "block",<br> fontSize: "1.35rem",<br> },<br> suggestionsContainer: {<br> display: "block",<br> position: "absolute",<br> border: "1px solid #999",<br> background: "#fff",<br> width: "20rem",<br> },<br> suggestionOptions: {<br> margin: "0",<br> padding: "0",<br> listStyle: "none",<br> },<br> suggestionOption: {<br> margin: "0",<br> padding: ".5rem",<br> fontSize: "1.35rem",<br> whiteSpace: "nowrap",<br> overflow: "hidden",<br> cursor: "default",<br> },<br> } </pre> |
| options | array | [] |
| **options** | array | [] |
| **handleChange** | function | No default. Required prop |
| **value** | string | No default. Required prop |
| **caseInsensitive** | boolean | true |

<hr>

## Options argument

Expand Down
2 changes: 1 addition & 1 deletion dist/AutoSuggest.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-autosuggestions",
"version": "3.0.2",
"version": "3.1.0",
"keywords": [
"React",
"auto-suggest",
Expand Down
4 changes: 3 additions & 1 deletion src/components/AutoSuggest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ export const AutoSuggest = ({
options = [],
handleChange,
disabled = false,
value
value,
caseInsensitive = true
}) => {
const combinedStyles = {
announcement: {
Expand Down Expand Up @@ -97,6 +98,7 @@ export const AutoSuggest = ({
handleChange={handleChange}
disabled={disabled}
value={value}
caseInsensitive={caseInsensitive}
/>
);
};
17 changes: 14 additions & 3 deletions src/components/AutoSuggestClient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@ import { AutoSuggestContainer } from "./AutoSuggestContainer.js";
import { alphanumericSort } from "../utils/alphanumericSort.js";

export const AutoSuggestClient = React.forwardRef(
({ name, options, styles, type, isOpen, setIsOpen, handleChange, disabled, value }, ref) => {
(
{ name, options, styles, type, isOpen, setIsOpen, handleChange, disabled, value, caseInsensitive },
ref
) => {
const [sortedOptions, optionType] = alphanumericSort(options);
const [results, setResults] = React.useState(sortedOptions);
const [noResult, setNoResult] = React.useState(false);
Expand All @@ -13,10 +16,18 @@ export const AutoSuggestClient = React.forwardRef(
if (isOpen && value) {
let res;
if (optionType === "string") {
res = options.filter((opt) => opt.startsWith(value));
if (caseInsensitive) {
res = options.filter((opt) => opt.toUpperCase().startsWith(value.toUpperCase()));
} else {
res = options.filter((opt) => opt.startsWith(value));
}
}
if (optionType === "object") {
res = options.filter((opt) => opt.value.startsWith(value));
if (caseInsensitive) {
res = options.filter((opt) => opt.value.toUpperCase().startsWith(value.toUpperCase()));
} else {
res = options.filter((opt) => opt.value.startsWith(value));
}
}
setResults(res);
res.length >= 1 && setIsOpen(true);
Expand Down
94 changes: 93 additions & 1 deletion tests/AutoSuggest.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,17 @@ beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

const Form = ({ name = "", url = "", options = [], type = "", styles, handleChange, disabled, value }) => {
const Form = ({
name = "",
url = "",
options = [],
type = "",
styles,
handleChange,
disabled,
value,
caseInsensitive
}) => {
const [make, setMake] = React.useState();
const [formData, setFormData] = React.useState();
const handleSubmit = (e) => {
Expand All @@ -43,6 +53,7 @@ const Form = ({ name = "", url = "", options = [], type = "", styles, handleChan
options={options}
styles={styles}
disabled={disabled ? true : false}
caseInsensitive={caseInsensitive}
/>
<button>Submit</button>
</form>
Expand Down Expand Up @@ -767,4 +778,85 @@ test("Input value should update if changed -- client", async () => {
expect(countryAnnouncement).not.toHaveTextContent(
"3 suggestions displayed. To navigate, use up and down arrow keys."
);
});
describe("Client version should perform case-insensitive matche if caseInsensitive is true", async () => {
test("when options are strings", () => {
const options = ["abba", "ABB", "aBbott", "Abberette"];
render(<Form options={options} name="Name" caseInsensitive={true} />);
const input = screen.getByRole("textbox", { name: "Name" });
fireEvent.change(input, { target: { value: "Abb" } });
expect(screen.getByRole("option", { name: "abba" }));
expect(screen.getByRole("option", { name: "ABB" }));
expect(screen.getByRole("option", { name: "aBbott" }));
expect(screen.getByRole("option", { name: "Abberette" }));
});
test("when options are objects", () => {
const options = [
{ name: "abba", value: "abba" },
{ name: "ABB", value: "ABB" },
{ name: "aBbott", value: "aBbott" },
{ name: "Abberette", value: "Abberette" }
];
render(<Form options={options} name="Name" caseInsensitive={true} />);
const input = screen.getByRole("textbox", { name: "Name" });
fireEvent.change(input, { target: { value: "Abb" } });
expect(screen.getByRole("option", { name: "abba" }));
expect(screen.getByRole("option", { name: "ABB" }));
expect(screen.getByRole("option", { name: "aBbott" }));
expect(screen.getByRole("option", { name: "Abberette" }));
});
});
describe("Client version should perform case-insensitive match by default", async () => {
test("when options are strings", () => {
const options = ["abba", "ABB", "aBbott", "Abberette"];
render(<Form options={options} name="Name" />);
const input = screen.getByRole("textbox", { name: "Name" });
fireEvent.change(input, { target: { value: "Abb" } });
expect(screen.getByRole("option", { name: "abba" }));
expect(screen.getByRole("option", { name: "ABB" }));
expect(screen.getByRole("option", { name: "aBbott" }));
expect(screen.getByRole("option", { name: "Abberette" }));
});
test("when options are objects", () => {
const options = [
{ name: "abba", value: "abba" },
{ name: "ABB", value: "ABB" },
{ name: "aBbott", value: "aBbott" },
{ name: "Abberette", value: "Abberette" }
];
render(<Form options={options} name="Name" />);
const input = screen.getByRole("textbox", { name: "Name" });
fireEvent.change(input, { target: { value: "Abb" } });
expect(screen.getByRole("option", { name: "abba" }));
expect(screen.getByRole("option", { name: "ABB" }));
expect(screen.getByRole("option", { name: "aBbott" }));
expect(screen.getByRole("option", { name: "Abberette" }));
});
});
describe("Client version should not perform case-insensitive matches if caseInsensitive is false", async () => {
test("when options are strings", () => {
const options = ["abba", "ABB", "aBbott", "Abberette"];
render(<Form options={options} name="Name" caseInsensitive={false} />);
const input = screen.getByRole("textbox", { name: "Name" });
fireEvent.change(input, { target: { value: "a" } });
expect(screen.getByRole("option", { name: "abba" }));
expect(screen.getByRole("option", { name: "aBbott" }));
expect(screen.queryByRole("option", { name: "ABB" })).toBeNull();
expect(screen.queryByRole("option", { name: "Abberette" })).toBeNull();
});
test("when options are objects", () => {
const options = [
{ name: "abba", value: "abba" },
{ name: "ABB", value: "ABB" },
{ name: "aBbott", value: "aBbott" },
{ name: "Abberette", value: "Abberette" }
];
render(<Form options={options} name="Name" caseInsensitive={false} />);
const input = screen.getByRole("textbox", { name: "Name" });
fireEvent.change(input, { target: { value: "a" } });
expect(screen.getByRole("option", { name: "abba" }));
expect(screen.getByRole("option", { name: "aBbott" }));
expect(screen.queryByRole("option", { name: "ABB" })).toBeNull();
expect(screen.queryByRole("option", { name: "Abberette" })).toBeNull();
});
});

0 comments on commit a3b278c

Please sign in to comment.