Skip to content

Commit

Permalink
feat(blazorui): add ComboBox feature to the BitDropDown #6426 (#6550)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cyrus-Sushiant
Cyrus-Sushiant authored Feb 3, 2024
1 parent a9200ac commit f9c9791
Show file tree
Hide file tree
Showing 21 changed files with 979 additions and 517 deletions.
103 changes: 13 additions & 90 deletions src/BlazorUI/Bit.BlazorUI.Tests/Dropdown/BitDropdownTests.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ public void BitDropdownTextWithDefaultValuesShouldInitCorrect(string defaultValu
{
Context.JSInterop.Mode = JSRuntimeMode.Loose;

var items = BitDropdownTests.GetDropdownItems();
var items = GetDropdownItems();
var defaultSelectedMultipleValueList = defaultValues.Split(",").ToArray();
var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
{
Expand All @@ -239,20 +239,17 @@ public void BitDropdownTextWithDefaultValuesShouldInitCorrect(string defaultValu
});

var textSpan = component.Find(".bit-drp-tcn");
var defaultSelectedItems = items.FindAll(i => defaultSelectedMultipleValueList.Contains(i.Value) && i.ItemType == BitDropdownItemType.Normal);
var defaultSelectedItems = component.Instance.SelectedItems.ToList();
var expectedText = "";

defaultSelectedItems.ForEach(i =>
{
if (i.IsSelected && i.ItemType == BitDropdownItemType.Normal)
if (expectedText.HasValue())
{
if (expectedText.HasValue())
{
expectedText += component.Instance.MultiSelectDelimiter;
}

expectedText += i.Text;
expectedText += component.Instance.MultiSelectDelimiter;
}

expectedText += i.Text;
});

Assert.AreEqual(expectedText, textSpan.InnerHtml);
Expand All @@ -266,7 +263,7 @@ public void BitDropdownTextWithValueShouldInitCorrect(string value, string defau
{
Context.JSInterop.Mode = JSRuntimeMode.Loose;

var items = BitDropdownTests.GetDropdownItems();
var items = GetDropdownItems();
var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
{
parameters.Add(p => p.Items, items);
Expand All @@ -286,7 +283,7 @@ public void BitDropdownTextWithValueShouldInitCorrect(string value, string defau
]
public void BitDropdownTextWithValuesAndDefaultValuesShouldInitCorrect(string defaultValues, string values)
{
var items = BitDropdownTests.GetDropdownItems();
var items = GetDropdownItems();
var defaultSelectedMultipleValueList = defaultValues.Split(",").ToArray();
var selectedMultipleValueList = values.Split(",").ToArray();
var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
Expand All @@ -298,20 +295,17 @@ public void BitDropdownTextWithValuesAndDefaultValuesShouldInitCorrect(string de
});

var textSpan = component.Find(".bit-drp-tcn");
var selectedItems = items.FindAll(i => selectedMultipleValueList.Contains(i.Value) && i.ItemType == BitDropdownItemType.Normal);
var selectedItems = component.Instance.SelectedItems.ToList();
var expectedText = new StringBuilder();

selectedItems.ForEach(i =>
{
if (i.IsSelected && i.ItemType == BitDropdownItemType.Normal)
if (expectedText.Length > 0)
{
if (expectedText.Length > 0)
{
expectedText.Append(component.Instance.MultiSelectDelimiter);
}

expectedText.Append(i.Text);
expectedText.Append(component.Instance.MultiSelectDelimiter);
}

expectedText.Append(i.Text);
});

Assert.AreEqual(expectedText.ToString(), textSpan.InnerHtml);
Expand Down Expand Up @@ -575,77 +569,6 @@ public void BitDropdownMultiSelectTwoWayBoundWithCustomHandlerShouldWorkCorrect(
Assert.AreEqual(expectedResult, _bitDropdownValues.Count());
}

[DataTestMethod,
DataRow("Apple", "f-app"),
DataRow("Orange", "f-ora"),
DataRow("Banana", "f-ban"),
DataRow("Broccoli", "v-bro")
]
public void BitDropdownTwoWayBoundWithForSelectedItem(string text, string value)
{
Context.JSInterop.Mode = JSRuntimeMode.Loose;
BitDropdownItem<string>? selectedItem = null;
var isOpen = true;

var items = BitDropdownTests.GetShortDropdownItems();
var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
{
parameters.Add(p => p.IsOpen, isOpen);
parameters.Add(p => p.IsOpenChanged, v => isOpen = v);
parameters.Add(p => p.IsEnabled, true);
parameters.Add(p => p.Items, items);
parameters.Add(p => p.SelectedItem, selectedItem);
parameters.Add(p => p.SelectedItemChanged, (value) => selectedItem = value);
});

var drpItems = component.FindAll(".bit-drp-itm");
drpItems.Single(i => i.TextContent.Contains(text)).Click();

Assert.IsNotNull(selectedItem);
Assert.AreEqual(value, selectedItem.Value);
Assert.AreEqual(text, selectedItem.Text);
Assert.IsTrue(selectedItem.IsSelected);
}

[DataTestMethod,
DataRow("Banana,Broccoli", "f-ban,v-bro"),
DataRow("Orange", "f-ora"),
DataRow("Orange,Apple,Banana", "f-ora,f-app,f-ban")
]
public void BitDropdownMultiSelectTwoWayBoundForSelectedItems(string text, string value)
{
Context.JSInterop.Mode = JSRuntimeMode.Loose;
List<BitDropdownItem<string>> selectedItems = null;
var isOpen = true;

var items = BitDropdownTests.GetShortDropdownItems();
var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
{
parameters.Add(p => p.IsOpen, isOpen);
parameters.Add(p => p.IsOpenChanged, v => isOpen = v);
parameters.Add(p => p.IsEnabled, true);
parameters.Add(p => p.IsMultiSelect, true);
parameters.Add(p => p.Items, items);
parameters.Add(p => p.SelectedItems, selectedItems);
parameters.Add(p => p.SelectedItemsChanged, v => selectedItems = v);
});

var textList = text.Split(",");
var drpItems = component.FindAll(".bit-drp-iwr", enableAutoRefresh: true);
foreach (var txt in textList)
{
drpItems.Single(i => i.Children[0].Children[1].TextContent.Contains(txt)).Children[0].Click();
}

var valueList = value.Split(",").ToArray();

Assert.IsNotNull(selectedItems);
Assert.AreEqual(valueList.Length, selectedItems.Count);
Assert.IsTrue(selectedItems.Select(i => i.Value).OrderBy(o => o).SequenceEqual(valueList.OrderBy(o => o)));
Assert.IsTrue(selectedItems.Select(i => i.Text).OrderBy(o => o).SequenceEqual(textList.OrderBy(o => o)));
Assert.IsFalse(selectedItems.Any(i => i.IsSelected is false));
}

[DataTestMethod,
DataRow(null),
DataRow("f-ora")
Expand Down
40 changes: 34 additions & 6 deletions src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,18 +47,22 @@
aria-atomic="true"
aria-invalid="false">

@if (_text.HasValue())
@{
var text = GetText();
}

@if (Chips is false && text.HasValue())
{
@if (TextTemplate is not null)
{
@TextTemplate(this)
}
else
{
@_text
@text
}
}
else
else if (Combo is false)
{
@if (PlaceholderTemplate is not null)
{
Expand All @@ -69,11 +73,35 @@
@Placeholder
}
}
else if (Chips)
{
@foreach (var item in _selectedItems)
{
<span style="@Styles?.Chips" class="bit-drp-chp @Classes?.Chips">
@GetText(item)
<i style="@Styles?.ChipsRemoveIcon" class="bit-icon bit-icon--Cancel @Classes?.ChipsRemoveIcon" @onclick="() => HandleOnClickUnselectItem(item)" @onclick:stopPropagation />
</span>
}
}

@if (Combo)
{
<input @ref="_comboBoxInputRef" @onkeydown="@((k) => HandleOnKeyDown(k))" @oninput="@HandleOnChange"
style="@Styles?.ComboBoxInput"
class="bit-drp-inp @Classes?.ComboBoxInput"
type="text"
role="searchbox"
value="@_searchText"
aria-label="@AriaLabel"
placeholder="@Placeholder"
autocomplete="@BitAutoCompleteValue.NewPassword"
disabled="@(IsEnabled is false)" />
}
</span>

@if (ShowClearButton && SelectedItems.Count > 0 && IsEnabled)
@if (IsEnabled && ShowClearButton && SelectedItems.Count > 0)
{
<button @onclick="Clear" @onclick:stopPropagation
<button @onclick="HandleOnClearClick" @onclick:stopPropagation
type="button"
style="@Styles?.ClearButton"
class="bit-drp-icn bit-drp-clr @Classes?.ClearButton">
Expand Down Expand Up @@ -143,7 +171,7 @@
<div id="@_headerId">@CalloutHeaderTemplate</div>
}

@if (ShowSearchBox)
@if (ShowSearchBox && Combo is false)
{
<div style="@Styles?.SearchBoxContainer"
class="@GetSearchBoxClasses() @Classes?.SearchBoxContainer">
Expand Down
Loading

0 comments on commit f9c9791

Please sign in to comment.