From e11a893beeb9b2f2e2ae25ada43d8e014d563a82 Mon Sep 17 00:00:00 2001 From: Koichi Kiyokawa <40315079+KoichiKiyokawa@users.noreply.github.com> Date: Tue, 18 Jan 2022 23:37:32 +0900 Subject: [PATCH] feat(Dropdown): selectedIndex -> selectedId (#1004) * feat(breaking): selectedIndex -> selectedId in Dropdown * feat: omit `selectedIndex` from the `select` event --- COMPONENT_INDEX.md | 8 ++--- docs/src/COMPONENT_API.json | 9 +++--- docs/src/pages/components/Dropdown.svx | 22 +++++++------- .../framed/Dropdown/MultipleDropdown.svelte | 17 ++++++----- src/Dropdown/Dropdown.svelte | 29 ++++++++++--------- tests/Dropdown.test.svelte | 14 ++++----- types/Dropdown/Dropdown.svelte.d.ts | 6 ++-- 7 files changed, 53 insertions(+), 52 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 61560a86..aa36052b 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1166,7 +1166,7 @@ export interface DropdownItem { | ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | | inline | let | Yes | boolean | false | Set to `true` to use the inline variant | | open | let | Yes | boolean | false | Set to `true` to open the dropdown | -| selectedIndex | let | Yes | number | -1 | Specify the selected item index | +| selectedId | let | Yes | DropdownItemId | -- | Specify the selected item id | | items | let | No | DropdownItem[] | [] | Set the dropdown items | | itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item | | type | let | No | "default" | "inline" | "default" | Specify the type of dropdown | @@ -1192,9 +1192,9 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :--------------------------------------------------------------------------------------------- | -| select | dispatched | { selectedId: DropdownItemId, selectedIndex: number, selectedItem: DropdownItem } | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------------------------------------------------------------- | +| select | dispatched | { selectedId: DropdownItemId, selectedItem: DropdownItem } | ## `DropdownSkeleton` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index d9ca5a92..dd78b1b7 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -3008,11 +3008,10 @@ "reactive": false }, { - "name": "selectedIndex", + "name": "selectedId", "kind": "let", - "description": "Specify the selected item index", - "type": "number", - "value": "-1", + "description": "Specify the selected item id", + "type": "DropdownItemId", "isFunction": false, "isFunctionDeclaration": false, "constant": false, @@ -3229,7 +3228,7 @@ { "type": "dispatched", "name": "select", - "detail": "{ selectedId: DropdownItemId, selectedIndex: number, selectedItem: DropdownItem }" + "detail": "{ selectedId: DropdownItemId, selectedItem: DropdownItem }" } ], "typedefs": [ diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx index 58fa35ff..5928962d 100644 --- a/docs/src/pages/components/Dropdown.svx +++ b/docs/src/pages/components/Dropdown.svx @@ -9,13 +9,13 @@ components: ["Dropdown", "DropdownSkeleton"] ### Default - ### Hidden label - @@ -25,7 +25,7 @@ Use the `itemToString` prop to format the display of individual items. { return item.text + ' (' + item.id +')' -}} titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"}, +}} titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"}, {id: "1", text: "Email"}, {id: "2", text: "Fax"}]}" /> @@ -37,49 +37,49 @@ Use the `itemToString` prop to format the display of individual items. Set `direction` to `"top"` for the dropdown menu to appear above the input. - ### Light variant - ### Inline variant - ### Extra-large size - ### Small size - ### Invalid state - ### Warning state - ### Disabled state - diff --git a/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte index 4ebb7fcb..0de755a2 100644 --- a/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte +++ b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte @@ -7,28 +7,29 @@ { id: "2", text: "Fax" }, ]; - let dropdown1_selectedIndex = 0; - let dropdown2_selectedIndex = 1; + let dropdown1_selectedId = "0"; + let dropdown2_selectedId = "1"; - const formatSelected = (i) => (items[i] ? items[i].text : "N/A"); + const formatSelected = (id) => + items.find((item) => item.id === id)?.text ?? "N/A"; - $: primary = formatSelected(dropdown1_selectedIndex); - $: secondary = formatSelected(dropdown2_selectedIndex); + $: primary = formatSelected(dropdown1_selectedId); + $: secondary = formatSelected(dropdown2_selectedId);
Primary: {primary}
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte index d6732b74..30c67898 100644 --- a/src/Dropdown/Dropdown.svelte +++ b/src/Dropdown/Dropdown.svelte @@ -3,7 +3,7 @@ * @typedef {string} DropdownItemId * @typedef {string} DropdownItemText * @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem - * @event {{ selectedId: DropdownItemId, selectedIndex: number, selectedItem: DropdownItem }} select + * @event {{ selectedId: DropdownItemId, selectedItem: DropdownItem }} select */ /** @@ -18,8 +18,11 @@ */ export let itemToString = (item) => item.text || item.id; - /** Specify the selected item index */ - export let selectedIndex = -1; + /** + * Specify the selected item id + * @type {DropdownItemId} + */ + export let selectedId = undefined; /** * Specify the type of dropdown @@ -108,7 +111,6 @@ const dispatch = createEventDispatcher(); - let selectedId = undefined; let highlightedIndex = -1; function change(dir) { @@ -123,12 +125,11 @@ highlightedIndex = index; } - $: if (selectedIndex > -1) { - dispatch("select", { selectedId, selectedIndex, selectedItem }); + $: if (selectedId !== undefined) { + dispatch("select", { selectedId, selectedItem }); } $: inline = type === "inline"; - $: selectedItem = items[selectedIndex]; - $: selectedId = items[selectedIndex] ? items[selectedIndex].id : undefined; + $: selectedItem = items.find((item) => item.id === selectedId); $: if (!open) { highlightedIndex = -1; } @@ -206,8 +207,11 @@ } if (key === 'Enter') { open = !open; - if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) { - selectedIndex = highlightedIndex; + if ( + highlightedIndex > -1 && + items[highlightedIndex].id !== selectedId + ) { + selectedId = items[highlightedIndex].id; open = false; } } else if (key === 'Tab') { @@ -233,11 +237,10 @@ {#each items as item, i (item.id)}