| | 1 | | using DCL.Helpers; |
| | 2 | | using System; |
| | 3 | | using System.Collections; |
| | 4 | | using System.Collections.Generic; |
| | 5 | | using System.Linq; |
| | 6 | | using TMPro; |
| | 7 | | using UnityEngine; |
| | 8 | | using UnityEngine.UI; |
| | 9 | |
|
| | 10 | | public interface IDropdownComponentView |
| | 11 | | { |
| | 12 | | /// <summary> |
| | 13 | | /// Event that will be triggered when the selection of any option changes. |
| | 14 | | /// </summary> |
| | 15 | | event Action<bool, string, string> OnOptionSelectionChanged; |
| | 16 | |
|
| | 17 | | /// <summary> |
| | 18 | | /// Set the dropdown as multiselect or not. |
| | 19 | | /// </summary> |
| | 20 | | bool isMultiselect { get; set; } |
| | 21 | |
|
| | 22 | | /// <summary> |
| | 23 | | /// Open the options list. |
| | 24 | | /// </summary> |
| | 25 | | void Open(); |
| | 26 | |
|
| | 27 | | /// <summary> |
| | 28 | | /// Closes the options list |
| | 29 | | /// </summary> |
| | 30 | | void Close(); |
| | 31 | |
|
| | 32 | | /// <summary> |
| | 33 | | /// Set the dropdown title. |
| | 34 | | /// </summary> |
| | 35 | | /// <param name="newText">New title.</param> |
| | 36 | | void SetTitle(string newText); |
| | 37 | |
|
| | 38 | | /// <summary> |
| | 39 | | /// Set the available options of the dropdown. |
| | 40 | | /// </summary> |
| | 41 | | /// <param name="options">List of options..</param> |
| | 42 | | void SetOptions(List<ToggleComponentModel> options); |
| | 43 | |
|
| | 44 | | /// <summary> |
| | 45 | | /// Get an option of the dropdown. |
| | 46 | | /// </summary> |
| | 47 | | /// <param name="index">Index of the list of options.</param> |
| | 48 | | /// <returns>A specific option toggle.</returns> |
| | 49 | | IToggleComponentView GetOption(int index); |
| | 50 | |
|
| | 51 | | /// <summary> |
| | 52 | | /// Get all the options of the dropdown. |
| | 53 | | /// </summary> |
| | 54 | | /// <returns>The list of options.</returns> |
| | 55 | | List<IToggleComponentView> GetAllOptions(); |
| | 56 | |
|
| | 57 | | /// <summary> |
| | 58 | | /// Filter options using a text. |
| | 59 | | /// </summary> |
| | 60 | | /// <param name="filterText">Text used to filter.</param> |
| | 61 | | void FilterOptions(string filterText); |
| | 62 | |
|
| | 63 | | /// <summary> |
| | 64 | | /// Select/unselect all the available options (if multiselect is activated). |
| | 65 | | /// </summary> |
| | 66 | | void SetSelectAll(bool isSelected); |
| | 67 | |
|
| | 68 | | /// <summary> |
| | 69 | | /// Set the search bar place holder text. |
| | 70 | | /// </summary> |
| | 71 | | /// <param name="newText">New text.</param> |
| | 72 | | void SetSearchPlaceHolderText(string newText); |
| | 73 | |
|
| | 74 | | /// <summary> |
| | 75 | | /// Set the text for when the search doesn't find anything. |
| | 76 | | /// </summary> |
| | 77 | | /// <param name="newText">New text.</param> |
| | 78 | | void SetSearchNotFoundText(string newText); |
| | 79 | |
|
| | 80 | | /// <summary> |
| | 81 | | /// Set the text for when the dropdown doesn't have items. |
| | 82 | | /// </summary> |
| | 83 | | /// <param name="newText">New text.</param> |
| | 84 | | void SetEmptyContentText(string newText); |
| | 85 | |
|
| | 86 | | /// <summary> |
| | 87 | | /// Show/Hide the loading panel. |
| | 88 | | /// </summary> |
| | 89 | | /// <param name="isActive">Tru for showing it.</param> |
| | 90 | | void SetLoadingActive(bool isActive); |
| | 91 | |
|
| | 92 | | /// <summary> |
| | 93 | | /// Show/Hide the "Select All" option (only for multiselect configuration). |
| | 94 | | /// </summary> |
| | 95 | | /// <param name="isActive"></param> |
| | 96 | | void SetSelectAllOptionActive(bool isActive); |
| | 97 | |
|
| | 98 | | /// <summary> |
| | 99 | | /// Make the height of the options panel be dynamic depending on the number of instantiated options. |
| | 100 | | /// </summary> |
| | 101 | | /// <param name="isDynamic">True for making it dynamic.</param> |
| | 102 | | /// <param name="maxHeight">Max height to apply.</param> |
| | 103 | | void SetOptionsPanelHeightAsDynamic(bool isDynamic, float maxHeight); |
| | 104 | | } |
| | 105 | | public class DropdownComponentView : BaseComponentView, IDropdownComponentView, IComponentModelConfig<DropdownComponentM |
| | 106 | | { |
| | 107 | | internal const string SELECT_ALL_OPTION_ID = "select_all"; |
| | 108 | | internal const string SELECT_ALL_OPTION_TEXT = "Select All"; |
| | 109 | | internal const float BOTTOM_MARGIN_SIZE = 40f; |
| | 110 | |
|
| | 111 | | [Header("Prefab References")] |
| | 112 | | [SerializeField] internal Button button; |
| | 113 | | [SerializeField] internal TMP_Text title; |
| | 114 | | [SerializeField] internal GameObject searchBarContainer; |
| | 115 | | [SerializeField] internal SearchBarComponentView searchBar; |
| | 116 | | [SerializeField] internal GameObject optionsPanel; |
| | 117 | | [SerializeField] internal Image contentMaskImage; |
| | 118 | | [SerializeField] internal GameObject loadingPanel; |
| | 119 | | [SerializeField] internal RectTransform availableOptionsParent; |
| | 120 | | [SerializeField] internal GridContainerComponentView availableOptions; |
| | 121 | | [SerializeField] internal TMP_Text emptyContentMessage; |
| | 122 | | [SerializeField] internal TMP_Text searchNotFoundMessage; |
| | 123 | | [SerializeField] internal UIHelper_ClickBlocker blocker; |
| | 124 | |
|
| | 125 | | [Header("Resources")] |
| | 126 | | [SerializeField] internal ToggleComponentView togglePrefab; |
| | 127 | |
|
| | 128 | | [Header("Configuration")] |
| | 129 | | [SerializeField] internal DropdownComponentModel model; |
| | 130 | |
|
| | 131 | | public event Action<bool, string, string> OnOptionSelectionChanged; |
| | 132 | |
|
| | 133 | | internal ToggleComponentView selectAllOptionComponent; |
| | 134 | | internal Coroutine refreshOptionsPanelCoroutine; |
| | 135 | |
|
| | 136 | | public bool isMultiselect |
| | 137 | | { |
| 0 | 138 | | get => model.isMultiselect; |
| 0 | 139 | | set => model.isMultiselect = value; |
| | 140 | | } |
| | 141 | |
|
| | 142 | | internal bool isOpen = false; |
| | 143 | | internal List<ToggleComponentModel> originalOptions; |
| | 144 | |
|
| | 145 | | public override void Awake() |
| | 146 | | { |
| 123 | 147 | | base.Awake(); |
| | 148 | |
|
| 123 | 149 | | RefreshControl(); |
| 123 | 150 | | Close(); |
| | 151 | |
|
| 123 | 152 | | blocker.OnClicked += Close; |
| 123 | 153 | | button.onClick.AddListener(() => ToggleOptionsList()); |
| 123 | 154 | | searchBar.OnSearchText += FilterOptions; |
| 123 | 155 | | } |
| | 156 | |
|
| | 157 | | public void Configure(DropdownComponentModel newModel) |
| | 158 | | { |
| 1 | 159 | | model = newModel; |
| 1 | 160 | | RefreshControl(); |
| 1 | 161 | | } |
| | 162 | |
|
| | 163 | | public override void RefreshControl() |
| | 164 | | { |
| 124 | 165 | | if (model == null) |
| 0 | 166 | | return; |
| | 167 | |
|
| 124 | 168 | | isMultiselect = model.isMultiselect; |
| 124 | 169 | | SetTitle(model.title); |
| 124 | 170 | | SetOptions(model.options); |
| 124 | 171 | | SetSearchPlaceHolderText(model.searchPlaceHolderText); |
| 124 | 172 | | SetSearchNotFoundText(model.searchNotFoundText); |
| 124 | 173 | | SetEmptyContentText(model.emptyContentText); |
| 124 | 174 | | SetOptionsPanelHeightAsDynamic(model.isOptionsPanelHeightDynamic, model.maxValueForDynamicHeight); |
| 124 | 175 | | } |
| | 176 | |
|
| | 177 | | public void Open() |
| | 178 | | { |
| 4 | 179 | | optionsPanel.SetActive(true); |
| 4 | 180 | | isOpen = true; |
| 4 | 181 | | blocker.Activate(); |
| 4 | 182 | | CoroutineStarter.Stop(refreshOptionsPanelCoroutine); |
| 4 | 183 | | refreshOptionsPanelCoroutine = CoroutineStarter.Start(RefreshOptionsPanelSize()); |
| 4 | 184 | | } |
| | 185 | |
|
| | 186 | | public void Close() |
| | 187 | | { |
| 132 | 188 | | optionsPanel.SetActive(false); |
| 132 | 189 | | isOpen = false; |
| 132 | 190 | | searchBar.ClearSearch(); |
| 132 | 191 | | blocker.Deactivate(); |
| 132 | 192 | | } |
| | 193 | |
|
| | 194 | | public void SetTitle(string newText) |
| | 195 | | { |
| 180 | 196 | | model.title = newText; |
| | 197 | |
|
| 180 | 198 | | if (title == null) |
| 0 | 199 | | return; |
| | 200 | |
|
| 180 | 201 | | title.text = newText; |
| 180 | 202 | | } |
| | 203 | |
|
| | 204 | | public void SetOptions(List<ToggleComponentModel> options) |
| | 205 | | { |
| 196 | 206 | | model.options = options; |
| 196 | 207 | | originalOptions = options; |
| | 208 | |
|
| 196 | 209 | | RemoveAllInstantiatedOptions(); |
| | 210 | |
|
| 196 | 211 | | if (options.Count > 0) |
| 117 | 212 | | CreateSelectAllOption(); |
| | 213 | |
|
| 1072 | 214 | | for (int i = 0; i < options.Count; i++) |
| | 215 | | { |
| 340 | 216 | | CreateOption(options[i], $"Option_{i}"); |
| | 217 | | } |
| | 218 | |
|
| 196 | 219 | | UpdateSelectAllOptionStatus(); |
| 196 | 220 | | SetSelectAllOptionActive(model.showSelectAllOption); |
| | 221 | |
|
| 196 | 222 | | searchBarContainer.SetActive(options.Count > 0); |
| 196 | 223 | | contentMaskImage.enabled = options.Count > 0; |
| 196 | 224 | | emptyContentMessage.gameObject.SetActive(options.Count == 0); |
| | 225 | |
|
| 196 | 226 | | CoroutineStarter.Stop(refreshOptionsPanelCoroutine); |
| 196 | 227 | | refreshOptionsPanelCoroutine = CoroutineStarter.Start(RefreshOptionsPanelSize()); |
| 196 | 228 | | } |
| | 229 | |
|
| | 230 | | public void FilterOptions(string filterText) |
| | 231 | | { |
| 10 | 232 | | if (filterText == string.Empty) |
| | 233 | | { |
| 9 | 234 | | searchNotFoundMessage.gameObject.SetActive(false); |
| 9 | 235 | | SetOptions(originalOptions); |
| 9 | 236 | | return; |
| | 237 | | } |
| | 238 | |
|
| 1 | 239 | | List<ToggleComponentModel> newFilteredOptions = new List<ToggleComponentModel>(); |
| 8 | 240 | | foreach (ToggleComponentModel option in originalOptions) |
| | 241 | | { |
| 3 | 242 | | if (option.text.ToLower().Contains(filterText.ToLower())) |
| 1 | 243 | | newFilteredOptions.Add(option); |
| | 244 | | } |
| | 245 | |
|
| 1 | 246 | | model.options = newFilteredOptions; |
| | 247 | |
|
| 1 | 248 | | RemoveAllInstantiatedOptions(); |
| | 249 | |
|
| 4 | 250 | | for (int i = 0; i < newFilteredOptions.Count; i++) |
| | 251 | | { |
| 1 | 252 | | CreateOption(newFilteredOptions[i], $"FilteredOption_{i}"); |
| | 253 | | } |
| | 254 | |
|
| 1 | 255 | | searchNotFoundMessage.gameObject.SetActive(newFilteredOptions.Count == 0); |
| | 256 | |
|
| 1 | 257 | | CoroutineStarter.Stop(refreshOptionsPanelCoroutine); |
| 1 | 258 | | refreshOptionsPanelCoroutine = CoroutineStarter.Start(RefreshOptionsPanelSize()); |
| 1 | 259 | | } |
| | 260 | |
|
| | 261 | | public IToggleComponentView GetOption(int index) |
| | 262 | | { |
| 11 | 263 | | if (index >= availableOptions.GetItems().Count - 1) |
| 0 | 264 | | return null; |
| | 265 | |
|
| 11 | 266 | | return availableOptions.GetItems()[index + 1] as IToggleComponentView; |
| | 267 | | } |
| | 268 | |
|
| | 269 | | public List<IToggleComponentView> GetAllOptions() |
| | 270 | | { |
| 104 | 271 | | return availableOptions |
| | 272 | | .GetItems() |
| 78 | 273 | | .Select(x => x as IToggleComponentView) |
| 78 | 274 | | .Where(x => x.id != SELECT_ALL_OPTION_ID) |
| | 275 | | .ToList(); |
| | 276 | | } |
| | 277 | |
|
| | 278 | | public void SetSelectAll(bool isSelected) |
| | 279 | | { |
| 2 | 280 | | List<IToggleComponentView> allOptions = GetAllOptions(); |
| 12 | 281 | | foreach (IToggleComponentView option in allOptions) |
| | 282 | | { |
| 4 | 283 | | option.isOn = isSelected; |
| | 284 | | } |
| | 285 | |
|
| 12 | 286 | | foreach (ToggleComponentModel option in originalOptions) |
| | 287 | | { |
| 4 | 288 | | option.isOn = isSelected; |
| | 289 | | } |
| 2 | 290 | | } |
| | 291 | |
|
| | 292 | | public void SetSearchPlaceHolderText(string newText) |
| | 293 | | { |
| 125 | 294 | | model.searchPlaceHolderText = newText; |
| | 295 | |
|
| 125 | 296 | | if (searchBar == null) |
| 0 | 297 | | return; |
| | 298 | |
|
| 125 | 299 | | searchBar.SetPlaceHolderText(newText); |
| 125 | 300 | | } |
| | 301 | |
|
| | 302 | | public void SetSearchNotFoundText(string newText) |
| | 303 | | { |
| 125 | 304 | | model.searchNotFoundText = newText; |
| | 305 | |
|
| 125 | 306 | | if (searchNotFoundMessage == null) |
| 0 | 307 | | return; |
| | 308 | |
|
| 125 | 309 | | searchNotFoundMessage.text = newText; |
| 125 | 310 | | } |
| | 311 | |
|
| | 312 | | public void SetEmptyContentText(string newText) |
| | 313 | | { |
| 125 | 314 | | model.emptyContentText = newText; |
| | 315 | |
|
| 125 | 316 | | if (emptyContentMessage == null) |
| 0 | 317 | | return; |
| | 318 | |
|
| 125 | 319 | | emptyContentMessage.text = newText; |
| 125 | 320 | | } |
| | 321 | |
|
| | 322 | | public void SetLoadingActive(bool isActive) |
| | 323 | | { |
| 3 | 324 | | if (loadingPanel == null) |
| 0 | 325 | | return; |
| | 326 | |
|
| 3 | 327 | | loadingPanel.SetActive(isActive); |
| 3 | 328 | | } |
| | 329 | |
|
| | 330 | | public void SetSelectAllOptionActive(bool isActive) |
| | 331 | | { |
| 198 | 332 | | model.showSelectAllOption = isActive; |
| | 333 | |
|
| 198 | 334 | | if (!isMultiselect || selectAllOptionComponent == null) |
| 184 | 335 | | return; |
| | 336 | |
|
| 14 | 337 | | selectAllOptionComponent.gameObject.SetActive(isActive); |
| 14 | 338 | | } |
| | 339 | |
|
| | 340 | | public void SetOptionsPanelHeightAsDynamic(bool isDynamic, float maxHeight) |
| | 341 | | { |
| 126 | 342 | | model.isOptionsPanelHeightDynamic = isDynamic; |
| 126 | 343 | | model.maxValueForDynamicHeight = maxHeight; |
| 126 | 344 | | CoroutineStarter.Stop(refreshOptionsPanelCoroutine); |
| 126 | 345 | | refreshOptionsPanelCoroutine = CoroutineStarter.Start(RefreshOptionsPanelSize()); |
| 126 | 346 | | } |
| | 347 | |
|
| | 348 | | public override void Dispose() |
| | 349 | | { |
| 197 | 350 | | base.Dispose(); |
| | 351 | |
|
| 197 | 352 | | blocker.OnClicked -= Close; |
| 197 | 353 | | button.onClick.RemoveAllListeners(); |
| 197 | 354 | | searchBar.OnSearchText -= FilterOptions; |
| | 355 | |
|
| 197 | 356 | | CoroutineStarter.Stop(refreshOptionsPanelCoroutine); |
| 197 | 357 | | } |
| | 358 | |
|
| | 359 | | internal void ToggleOptionsList() |
| | 360 | | { |
| 2 | 361 | | if (isOpen) |
| 1 | 362 | | Close(); |
| | 363 | | else |
| 1 | 364 | | Open(); |
| 1 | 365 | | } |
| | 366 | |
|
| | 367 | | internal void CreateSelectAllOption() |
| | 368 | | { |
| 118 | 369 | | CreateOption( |
| | 370 | | new ToggleComponentModel |
| | 371 | | { |
| | 372 | | id = SELECT_ALL_OPTION_ID, |
| | 373 | | text = SELECT_ALL_OPTION_TEXT, |
| | 374 | | isOn = false, |
| | 375 | | isTextActive = true |
| | 376 | | }, |
| | 377 | | $"Option_{SELECT_ALL_OPTION_ID}"); |
| 118 | 378 | | } |
| | 379 | |
|
| | 380 | | internal void CreateOption(ToggleComponentModel newOptionModel, string name) |
| | 381 | | { |
| 460 | 382 | | if (togglePrefab == null) |
| 0 | 383 | | return; |
| | 384 | |
|
| 460 | 385 | | ToggleComponentView newGO = Instantiate(togglePrefab); |
| 460 | 386 | | newGO.gameObject.SetActive(true); |
| 460 | 387 | | newGO.Configure(newOptionModel); |
| 460 | 388 | | availableOptions.AddItem(newGO); |
| 460 | 389 | | newGO.name = name; |
| | 390 | |
|
| 460 | 391 | | if (newOptionModel.id == SELECT_ALL_OPTION_ID) |
| | 392 | | { |
| 118 | 393 | | selectAllOptionComponent = newGO; |
| 118 | 394 | | newGO.gameObject.SetActive(isMultiselect); |
| | 395 | | } |
| | 396 | |
|
| 460 | 397 | | newGO.OnSelectedChanged += OnOptionSelected; |
| 460 | 398 | | } |
| | 399 | |
|
| | 400 | | internal void OnOptionSelected(bool isOn, string optionId, string optionName) |
| | 401 | | { |
| 10 | 402 | | if (optionId != SELECT_ALL_OPTION_ID) |
| | 403 | | { |
| 10 | 404 | | OnOptionSelectionChanged?.Invoke(isOn, optionId, optionName); |
| | 405 | |
|
| 10 | 406 | | if (isOn && !isMultiselect) |
| | 407 | | { |
| 2 | 408 | | List<IToggleComponentView> allOptions = GetAllOptions(); |
| 16 | 409 | | foreach (IToggleComponentView option in allOptions) |
| | 410 | | { |
| 6 | 411 | | if (option.id != optionId) |
| 4 | 412 | | option.isOn = false; |
| | 413 | | } |
| | 414 | | } |
| | 415 | |
|
| 68 | 416 | | foreach (ToggleComponentModel option in originalOptions) |
| | 417 | | { |
| 24 | 418 | | if (optionId == option.id) |
| 10 | 419 | | option.isOn = isOn; |
| | 420 | | } |
| | 421 | |
|
| 10 | 422 | | UpdateSelectAllOptionStatus(); |
| 10 | 423 | | } |
| | 424 | | else |
| | 425 | | { |
| 0 | 426 | | SetSelectAll(isOn); |
| | 427 | | } |
| | 428 | |
|
| 10 | 429 | | if (!isMultiselect) |
| 4 | 430 | | Close(); |
| 10 | 431 | | } |
| | 432 | |
|
| | 433 | | internal void UpdateSelectAllOptionStatus() |
| | 434 | | { |
| 206 | 435 | | if (!isMultiselect) |
| 109 | 436 | | return; |
| | 437 | |
|
| 97 | 438 | | List<IToggleComponentView> allOptions = GetAllOptions(); |
| | 439 | |
|
| 97 | 440 | | if (selectAllOptionComponent != null) |
| | 441 | | { |
| 18 | 442 | | selectAllOptionComponent.OnSelectedChanged -= OnOptionSelected; |
| 39 | 443 | | selectAllOptionComponent.isOn = allOptions.Count > 0 && allOptions.All(x => x.isOn); |
| 18 | 444 | | selectAllOptionComponent.OnSelectedChanged += OnOptionSelected; |
| | 445 | | } |
| 97 | 446 | | } |
| | 447 | |
|
| | 448 | | internal void RemoveAllInstantiatedOptions() |
| | 449 | | { |
| 198 | 450 | | availableOptions.RemoveItems(); |
| 198 | 451 | | } |
| | 452 | |
|
| | 453 | | internal IEnumerator RefreshOptionsPanelSize() |
| | 454 | | { |
| 327 | 455 | | if (!model.isOptionsPanelHeightDynamic) |
| 157 | 456 | | yield break; |
| | 457 | |
|
| 170 | 458 | | yield return null; |
| | 459 | |
|
| 3 | 460 | | Utils.ForceRebuildLayoutImmediate(availableOptionsParent); |
| | 461 | |
|
| 3 | 462 | | yield return null; |
| | 463 | |
|
| 1 | 464 | | if (optionsPanel == null) |
| 0 | 465 | | yield break; |
| | 466 | |
|
| 1 | 467 | | RectTransform optionsPanelTransform = optionsPanel.transform as RectTransform; |
| 1 | 468 | | optionsPanelTransform.sizeDelta = new Vector2( |
| | 469 | | optionsPanelTransform.sizeDelta.x, |
| | 470 | | Mathf.Clamp(availableOptionsParent.sizeDelta.y + BOTTOM_MARGIN_SIZE, 0f, model.maxValueForDynamicHeight)); |
| 1 | 471 | | } |
| | 472 | | } |