forked from MapComplete/MapComplete
		
	Mark old input elements as deprecated, remove some unused input elements
This commit is contained in:
		
							parent
							
								
									6366d82e6c
								
							
						
					
					
						commit
						beb86919a8
					
				
					 11 changed files with 33 additions and 131 deletions
				
			
		|  | @ -5,6 +5,9 @@ import BaseUIElement from "../BaseUIElement" | ||||||
| import InputElementMap from "./InputElementMap" | import InputElementMap from "./InputElementMap" | ||||||
| import Translations from "../i18n/Translations" | import Translations from "../i18n/Translations" | ||||||
| 
 | 
 | ||||||
|  | /** | ||||||
|  |  * @deprecated | ||||||
|  |  */ | ||||||
| export class CheckBox extends InputElementMap<number[], boolean> { | export class CheckBox extends InputElementMap<number[], boolean> { | ||||||
|     constructor(el: BaseUIElement | string, defaultValue?: boolean) { |     constructor(el: BaseUIElement | string, defaultValue?: boolean) { | ||||||
|         super( |         super( | ||||||
|  |  | ||||||
|  | @ -3,6 +3,9 @@ import Translations from "../i18n/Translations" | ||||||
| import { UIEventSource } from "../../Logic/UIEventSource" | import { UIEventSource } from "../../Logic/UIEventSource" | ||||||
| import BaseUIElement from "../BaseUIElement" | import BaseUIElement from "../BaseUIElement" | ||||||
| 
 | 
 | ||||||
|  | /** | ||||||
|  |  * @deprecated | ||||||
|  |  */ | ||||||
| export class DropDown<T> extends InputElement<T> { | export class DropDown<T> extends InputElement<T> { | ||||||
|     private static _nextDropdownId = 0 |     private static _nextDropdownId = 0 | ||||||
|     public IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false) |     public IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false) | ||||||
|  |  | ||||||
|  | @ -2,6 +2,9 @@ import BaseUIElement from "../BaseUIElement" | ||||||
| import { InputElement } from "./InputElement" | import { InputElement } from "./InputElement" | ||||||
| import { UIEventSource } from "../../Logic/UIEventSource" | import { UIEventSource } from "../../Logic/UIEventSource" | ||||||
| 
 | 
 | ||||||
|  | /** | ||||||
|  |  * @deprecated | ||||||
|  |  */ | ||||||
| export default class FileSelectorButton extends InputElement<FileList> { | export default class FileSelectorButton extends InputElement<FileList> { | ||||||
|     private static _nextid |     private static _nextid | ||||||
|     private readonly _value = new UIEventSource<FileList>(undefined) |     private readonly _value = new UIEventSource<FileList>(undefined) | ||||||
|  |  | ||||||
|  | @ -3,6 +3,9 @@ import { UIEventSource } from "../../Logic/UIEventSource" | ||||||
| import Translations from "../i18n/Translations" | import Translations from "../i18n/Translations" | ||||||
| import BaseUIElement from "../BaseUIElement" | import BaseUIElement from "../BaseUIElement" | ||||||
| 
 | 
 | ||||||
|  | /** | ||||||
|  |  * @deprecated | ||||||
|  |  */ | ||||||
| export class FixedInputElement<T> extends InputElement<T> { | export class FixedInputElement<T> extends InputElement<T> { | ||||||
|     private readonly value: UIEventSource<T> |     private readonly value: UIEventSource<T> | ||||||
|     private readonly _comparator: (t0: T, t1: T) => boolean |     private readonly _comparator: (t0: T, t1: T) => boolean | ||||||
|  |  | ||||||
|  | @ -1,94 +0,0 @@ | ||||||
| import { InputElement } from "./InputElement" |  | ||||||
| import { Store, UIEventSource } from "../../Logic/UIEventSource" |  | ||||||
| import Combine from "../Base/Combine" |  | ||||||
| import Slider from "./Slider" |  | ||||||
| import { ClickableToggle } from "./Toggle" |  | ||||||
| import { FixedUiElement } from "../Base/FixedUiElement" |  | ||||||
| import { VariableUiElement } from "../Base/VariableUIElement" |  | ||||||
| import BaseUIElement from "../BaseUIElement" |  | ||||||
| 
 |  | ||||||
| export default class FloorLevelInputElement |  | ||||||
|     extends VariableUiElement |  | ||||||
|     implements InputElement<string> |  | ||||||
| { |  | ||||||
|     private readonly _value: UIEventSource<string> |  | ||||||
| 
 |  | ||||||
|     constructor( |  | ||||||
|         currentLevels: Store<Record<string, number>>, |  | ||||||
|         options?: { |  | ||||||
|             value?: UIEventSource<string> |  | ||||||
|         } |  | ||||||
|     ) { |  | ||||||
|         const value = options?.value ?? new UIEventSource<string>("0") |  | ||||||
|         super( |  | ||||||
|             currentLevels.map((levels) => { |  | ||||||
|                 const allLevels = Object.keys(levels) |  | ||||||
|                 allLevels.sort((a, b) => { |  | ||||||
|                     const an = Number(a) |  | ||||||
|                     const bn = Number(b) |  | ||||||
|                     if (isNaN(an) || isNaN(bn)) { |  | ||||||
|                         return a < b ? -1 : 1 |  | ||||||
|                     } |  | ||||||
|                     return an - bn |  | ||||||
|                 }) |  | ||||||
|                 return FloorLevelInputElement.constructPicker(allLevels, value) |  | ||||||
|             }) |  | ||||||
|         ) |  | ||||||
| 
 |  | ||||||
|         this._value = value |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     private static constructPicker(levels: string[], value: UIEventSource<string>): BaseUIElement { |  | ||||||
|         let slider = new Slider(0, levels.length - 1, { vertical: true }) |  | ||||||
|         const toggleClass = |  | ||||||
|             "flex border-2 border-blue-500 w-10 h-10 place-content-center items-center border-box" |  | ||||||
|         slider |  | ||||||
|             .SetClass("flex elevator w-10") |  | ||||||
|             .SetStyle(`height: ${2.5 * levels.length}rem; background: #00000000`) |  | ||||||
| 
 |  | ||||||
|         const values = levels.map((data, i) => |  | ||||||
|             new ClickableToggle( |  | ||||||
|                 new FixedUiElement(data).SetClass("font-bold active bg-subtle " + toggleClass), |  | ||||||
|                 new FixedUiElement(data).SetClass("normal-background " + toggleClass), |  | ||||||
|                 slider.GetValue().sync( |  | ||||||
|                     (sliderVal) => { |  | ||||||
|                         return sliderVal === i |  | ||||||
|                     }, |  | ||||||
|                     [], |  | ||||||
|                     (isSelected) => { |  | ||||||
|                         return isSelected ? i : slider.GetValue().data |  | ||||||
|                     } |  | ||||||
|                 ) |  | ||||||
|             ) |  | ||||||
|                 .ToggleOnClick() |  | ||||||
|                 .SetClass("flex w-10 h-10") |  | ||||||
|         ) |  | ||||||
| 
 |  | ||||||
|         values.reverse(/* This is a new list, no side-effects */) |  | ||||||
|         const combine = new Combine([new Combine(values), slider]) |  | ||||||
|         combine.SetClass("flex flex-row overflow-hidden") |  | ||||||
| 
 |  | ||||||
|         slider.GetValue().addCallbackD((i) => { |  | ||||||
|             if (levels === undefined) { |  | ||||||
|                 return |  | ||||||
|             } |  | ||||||
|             if (levels[i] == undefined) { |  | ||||||
|                 return |  | ||||||
|             } |  | ||||||
|             value.setData(levels[i]) |  | ||||||
|         }) |  | ||||||
|         value.addCallbackAndRunD((level) => { |  | ||||||
|             const i = levels.findIndex((l) => l === level) |  | ||||||
|             slider.GetValue().setData(i) |  | ||||||
|         }) |  | ||||||
|         return combine |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     GetValue(): UIEventSource<string> { |  | ||||||
|         return this._value |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     IsValid(t: string): boolean { |  | ||||||
|         return false |  | ||||||
|     } |  | ||||||
| } |  | ||||||
|  | @ -1,11 +1,17 @@ | ||||||
| import { Store, UIEventSource } from "../../Logic/UIEventSource" | import { Store, UIEventSource } from "../../Logic/UIEventSource" | ||||||
| import BaseUIElement from "../BaseUIElement" | import BaseUIElement from "../BaseUIElement" | ||||||
| 
 | 
 | ||||||
|  | /** | ||||||
|  |  * @deprecated | ||||||
|  |  */ | ||||||
| export interface ReadonlyInputElement<T> extends BaseUIElement { | export interface ReadonlyInputElement<T> extends BaseUIElement { | ||||||
|     GetValue(): Store<T> |     GetValue(): Store<T> | ||||||
|     IsValid(t: T): boolean |     IsValid(t: T): boolean | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | /** | ||||||
|  |  * @deprecated | ||||||
|  |  */ | ||||||
| export abstract class InputElement<T> extends BaseUIElement implements ReadonlyInputElement<any> { | export abstract class InputElement<T> extends BaseUIElement implements ReadonlyInputElement<any> { | ||||||
|     abstract GetValue(): UIEventSource<T> |     abstract GetValue(): UIEventSource<T> | ||||||
|     abstract IsValid(t: T): boolean |     abstract IsValid(t: T): boolean | ||||||
|  |  | ||||||
|  | @ -1,6 +1,9 @@ | ||||||
| import { InputElement } from "./InputElement" | import { InputElement } from "./InputElement" | ||||||
| import { Store, UIEventSource } from "../../Logic/UIEventSource" | import { Store, UIEventSource } from "../../Logic/UIEventSource" | ||||||
| 
 | 
 | ||||||
|  | /** | ||||||
|  |  * @deprecated | ||||||
|  |  */ | ||||||
| export default class InputElementMap<T, X> extends InputElement<X> { | export default class InputElementMap<T, X> extends InputElement<X> { | ||||||
|     private readonly _inputElement: InputElement<T> |     private readonly _inputElement: InputElement<T> | ||||||
|     private isSame: (x0: X, x1: X) => boolean |     private isSame: (x0: X, x1: X) => boolean | ||||||
|  |  | ||||||
|  | @ -2,6 +2,9 @@ import { InputElement } from "./InputElement" | ||||||
| import { UIEventSource } from "../../Logic/UIEventSource" | import { UIEventSource } from "../../Logic/UIEventSource" | ||||||
| import { Utils } from "../../Utils" | import { Utils } from "../../Utils" | ||||||
| 
 | 
 | ||||||
|  | /** | ||||||
|  |  * @deprecated | ||||||
|  |  */ | ||||||
| export class RadioButton<T> extends InputElement<T> { | export class RadioButton<T> extends InputElement<T> { | ||||||
|     private static _nextId = 0 |     private static _nextId = 0 | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -1,6 +1,9 @@ | ||||||
| import { InputElement } from "./InputElement" | import { InputElement } from "./InputElement" | ||||||
| import { UIEventSource } from "../../Logic/UIEventSource" | import { UIEventSource } from "../../Logic/UIEventSource" | ||||||
| 
 | 
 | ||||||
|  | /** | ||||||
|  |  * @deprecated | ||||||
|  |  */ | ||||||
| export default class Slider extends InputElement<number> { | export default class Slider extends InputElement<number> { | ||||||
|     private readonly _value: UIEventSource<number> |     private readonly _value: UIEventSource<number> | ||||||
|     private readonly min: number |     private readonly min: number | ||||||
|  |  | ||||||
|  | @ -4,6 +4,9 @@ import BaseUIElement from "../BaseUIElement" | ||||||
| import { Translation } from "../i18n/Translation" | import { Translation } from "../i18n/Translation" | ||||||
| import Locale from "../i18n/Locale" | import Locale from "../i18n/Locale" | ||||||
| 
 | 
 | ||||||
|  | /** | ||||||
|  |  * @deprecated | ||||||
|  |  */ | ||||||
| interface TextFieldOptions { | interface TextFieldOptions { | ||||||
|     placeholder?: string | Store<string> | Translation |     placeholder?: string | Store<string> | Translation | ||||||
|     value?: UIEventSource<string> |     value?: UIEventSource<string> | ||||||
|  | @ -15,6 +18,9 @@ interface TextFieldOptions { | ||||||
|     isValid?: (s: string) => boolean |     isValid?: (s: string) => boolean | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | /** | ||||||
|  |  * @deprecated | ||||||
|  |  */ | ||||||
| export class TextField extends InputElement<string> { | export class TextField extends InputElement<string> { | ||||||
|     public readonly enterPressed = new UIEventSource<string>(undefined) |     public readonly enterPressed = new UIEventSource<string>(undefined) | ||||||
|     private readonly value: UIEventSource<string> |     private readonly value: UIEventSource<string> | ||||||
|  | @ -124,11 +130,6 @@ export class TextField extends InputElement<string> { | ||||||
|         this.value.addCallbackAndRunD((value) => { |         this.value.addCallbackAndRunD((value) => { | ||||||
|             // We leave the textfield as is in the case of undefined or null (handled by addCallbackAndRunD) - make sure we do not erase it!
 |             // We leave the textfield as is in the case of undefined or null (handled by addCallbackAndRunD) - make sure we do not erase it!
 | ||||||
|             field["value"] = value |             field["value"] = value | ||||||
|             if (self.IsValid(value)) { |  | ||||||
|                 self.RemoveClass("invalid") |  | ||||||
|             } else { |  | ||||||
|                 self.SetClass("invalid") |  | ||||||
|             } |  | ||||||
|         }) |         }) | ||||||
| 
 | 
 | ||||||
|         field.oninput = () => { |         field.oninput = () => { | ||||||
|  |  | ||||||
|  | @ -1,32 +0,0 @@ | ||||||
| import { ReadonlyInputElement } from "./InputElement" |  | ||||||
| import { Store } from "../../Logic/UIEventSource" |  | ||||||
| import BaseUIElement from "../BaseUIElement" |  | ||||||
| import { VariableUiElement } from "../Base/VariableUIElement" |  | ||||||
| 
 |  | ||||||
| export default class VariableInputElement<T> |  | ||||||
|     extends BaseUIElement |  | ||||||
|     implements ReadonlyInputElement<T> |  | ||||||
| { |  | ||||||
|     private readonly value: Store<T> |  | ||||||
|     private readonly element: BaseUIElement |  | ||||||
|     private readonly upstream: Store<ReadonlyInputElement<T>> |  | ||||||
| 
 |  | ||||||
|     constructor(upstream: Store<ReadonlyInputElement<T>>) { |  | ||||||
|         super() |  | ||||||
|         this.upstream = upstream |  | ||||||
|         this.value = upstream.bind((v) => v.GetValue()) |  | ||||||
|         this.element = new VariableUiElement(upstream) |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     GetValue(): Store<T> { |  | ||||||
|         return this.value |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     IsValid(t: T): boolean { |  | ||||||
|         return this.upstream.data.IsValid(t) |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     protected InnerConstructElement(): HTMLElement { |  | ||||||
|         return this.element.ConstructElement() |  | ||||||
|     } |  | ||||||
| } |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue