From 5cf642b4f003367f06b1899e212f530c78d4c1d1 Mon Sep 17 00:00:00 2001 From: Victor Tomaili Date: Thu, 1 Feb 2024 16:43:15 +0300 Subject: [PATCH] flatPickr fixes --- packages/corelib/dist/index.d.ts | 10 ++--- packages/corelib/src/ui/editors/dateeditor.ts | 38 +++++++++++-------- .../corelib/src/ui/editors/datetimeeditor.ts | 27 +++++++++---- .../corelib/src/ui/helpers/dateediting.ts | 14 ++----- packages/corelib/wwwroot/index.global.d.ts | 10 ++--- 5 files changed, 51 insertions(+), 48 deletions(-) diff --git a/packages/corelib/dist/index.d.ts b/packages/corelib/dist/index.d.ts index c069e11e82..4f94f39b7f 100644 --- a/packages/corelib/dist/index.d.ts +++ b/packages/corelib/dist/index.d.ts @@ -3157,13 +3157,8 @@ declare class DateEditor

extend static dateInputChange: (e: Event) => void; static dateInputKeyup(e: KeyboardEvent): void; static useFlatpickr: boolean; - static flatPickrOptions(input: HTMLElement): { - clickOpens: boolean; - allowInput: boolean; - dateFormat: string; - onChange: () => void; - }; - static flatPickrTrigger(input: HTMLInputElement): HTMLElement; + flatPickrOptions(input: HTMLElement): any; + createFlatPickrTrigger(): HTMLElement; static uiPickerZIndexWorkaround(el: HTMLElement | ArrayLike): void; } @@ -3175,6 +3170,7 @@ declare class DateTimeEditor

); getFlatpickrOptions(): any; + createFlatPickrTrigger(): HTMLElement; get_value(): string; get value(): string; set_value(value: string): void; diff --git a/packages/corelib/src/ui/editors/dateeditor.ts b/packages/corelib/src/ui/editors/dateeditor.ts index fdc6188b03..c42b33c104 100644 --- a/packages/corelib/src/ui/editors/dateeditor.ts +++ b/packages/corelib/src/ui/editors/dateeditor.ts @@ -1,8 +1,8 @@ -import { Fluent, Invariant, addValidationRule, formatDate, getjQuery, isArrayLike, localText, parseISODateTime, stringFormat } from "@serenity-is/base"; +import { Culture, Fluent, Invariant, addValidationRule, formatDate, getjQuery, isArrayLike, localText, parseISODateTime, stringFormat } from "@serenity-is/base"; import { IReadOnly, IStringValue } from "../../interfaces"; import { today } from "../../q"; import { Decorators } from "../../types/decorators"; -import { dateInputChangeHandler, dateInputKeyupHandler, flatPickrOptions, flatPickrTrigger, jQueryDatepickerInitialization, jQueryDatepickerZIndexWorkaround } from "../helpers/dateediting"; +import { dateInputChangeHandler, dateInputKeyupHandler, flatPickrTrigger, jQueryDatepickerInitialization, jQueryDatepickerZIndexWorkaround } from "../helpers/dateediting"; import { EditorProps, EditorWidget } from "../widgets/widget"; export interface DateEditorOptions { @@ -24,16 +24,16 @@ export class DateEditor

extends let $ = getjQuery(); // @ts-ignore if (typeof flatpickr !== "undefined" && (DateEditor.useFlatpickr || !$?.fn?.datepicker)) { - var options = DateEditor.flatPickrOptions(this.domNode); + var options = this.flatPickrOptions(this.domNode); // @ts-ignore flatpickr(this.domNode, options); - Fluent(flatPickrTrigger(this.domNode)).insertAfter(this.domNode); + this.createFlatPickrTrigger(); } else if ($?.fn?.datepicker) { $(this.domNode).datepicker({ showOn: 'button', beforeShow: (inp: any, inst: any) => { - if (this.domNode.classList.contains('readonly')) + if (this.get_readOnly()) return false as any; DateEditor.uiPickerZIndexWorkaround(this.domNode); return true; @@ -133,7 +133,7 @@ export class DateEditor

extends } get_readOnly(): boolean { - return this.domNode.classList.contains('readonly'); + return this.domNode.classList.contains('readonly') || this.domNode.getAttribute('readonly') != null; } set_readOnly(value: boolean): void { @@ -205,16 +205,24 @@ export class DateEditor

extends public static useFlatpickr: boolean; - public static flatPickrOptions(input: HTMLElement) { - return flatPickrOptions(function () { - //Fluent.trigger(input, "change"); - }); - } - - public static flatPickrTrigger(input: HTMLInputElement): HTMLElement { - if (!input) + public flatPickrOptions(input: HTMLElement): any { + return { + clickOpens: false, + allowInput: true, + dateFormat: Culture.dateOrder.split('').join(Culture.dateSeparator).replace('y', 'Y'), + onChange: () => { + //this.domNode && Fluent.trigger(this.domNode, 'change'); + }, + disable: [ + () => this.get_readOnly() + ] + }; + } + + public createFlatPickrTrigger(): HTMLElement { + if (!this.domNode) return; - return flatPickrTrigger(Fluent(input).insertAfter(input).getNode()); + return Fluent(flatPickrTrigger(this.domNode)).insertAfter(this.domNode).getNode(); } public static uiPickerZIndexWorkaround(el: HTMLElement | ArrayLike) { diff --git a/packages/corelib/src/ui/editors/datetimeeditor.ts b/packages/corelib/src/ui/editors/datetimeeditor.ts index d906da140f..47cbe667f5 100644 --- a/packages/corelib/src/ui/editors/datetimeeditor.ts +++ b/packages/corelib/src/ui/editors/datetimeeditor.ts @@ -1,7 +1,8 @@ -import { Culture, Fluent, Invariant, addValidationRule, formatDate, formatISODateTimeUTC, getjQuery, localText, parseDate, parseISODateTime, round, stringFormat, trunc, tryGetText } from "@serenity-is/base"; +import { Culture, Fluent, Invariant, addValidationRule, formatDate, formatISODateTimeUTC, getjQuery, localText, parseDate, parseISODateTime, round, stringFormat, trunc, tryGetText } from "@serenity-is/base"; import { IReadOnly, IStringValue } from "../../interfaces"; import { addOption, today } from "../../q"; import { Decorators } from "../../types/decorators"; +import { flatPickrTrigger } from "../helpers/dateediting"; import { EditorProps, EditorWidget } from "../widgets/widget"; import { DateEditor } from "./dateeditor"; import { EditorUtils } from "./editorutils"; @@ -31,6 +32,7 @@ export class DateTimeEditor

{ + if (this.get_readOnly()) return false as any; DateEditor.uiPickerZIndexWorkaround(this.domNode); return true; - } as any, + }, yearRange: (this.options.yearRange ?? '-100:+50') }); @@ -142,7 +144,7 @@ export class DateTimeEditor

{ this.lastSetValue = null; - this.domNode && Fluent.trigger(this.domNode, 'change'); - } + //this.domNode && Fluent.trigger(this.domNode, 'change'); + }, + disable: [ + () => this.get_readOnly() + ] } } + public createFlatPickrTrigger(): HTMLElement { + if (!this.domNode) + return; + return Fluent(flatPickrTrigger(this.domNode)).insertAfter(this.domNode).getNode(); + } + get_value(): string { var value = this.domNode.value?.trim(); if (value != null && value.length === 0) { @@ -300,7 +311,7 @@ export class DateTimeEditor

void) { - return { - clickOpens: true, - allowInput: true, - dateFormat: Culture.dateOrder.split('').join(Culture.dateSeparator).replace('y', 'Y'), - onChange: onChange - } -} - export function flatPickrTrigger(input: HTMLInputElement): HTMLElement { var button = document.createElement("button"); button.type = "button"; button.classList.add("ui-datepicker-trigger"); button.addEventListener("click", () => { - if (!input.classList.contains('readonly')) + if (!input.classList.contains('readonly') && input.getAttribute('readonly') == null) { (input as any)._flatpickr?.open?.(); + (input as any)._flatpickr?.calendarContainer?.focus?.(); + } }); return button; } diff --git a/packages/corelib/wwwroot/index.global.d.ts b/packages/corelib/wwwroot/index.global.d.ts index 427a62ab51..ecde2adf5e 100644 --- a/packages/corelib/wwwroot/index.global.d.ts +++ b/packages/corelib/wwwroot/index.global.d.ts @@ -4342,13 +4342,8 @@ declare namespace Serenity { static dateInputChange: (e: Event) => void; static dateInputKeyup(e: KeyboardEvent): void; static useFlatpickr: boolean; - static flatPickrOptions(input: HTMLElement): { - clickOpens: boolean; - allowInput: boolean; - dateFormat: string; - onChange: () => void; - }; - static flatPickrTrigger(input: HTMLInputElement): HTMLElement; + flatPickrOptions(input: HTMLElement): any; + createFlatPickrTrigger(): HTMLElement; static uiPickerZIndexWorkaround(el: HTMLElement | ArrayLike): void; } @@ -4360,6 +4355,7 @@ declare namespace Serenity { private lastSetValueGet; constructor(props: EditorProps

); getFlatpickrOptions(): any; + createFlatPickrTrigger(): HTMLElement; get_value(): string; get value(): string; set_value(value: string): void;