Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | import { Component } from 'obsidian';
import BaseComponent from './BaseComponent';
/**
* Represents a date component in an editable data view.
*/
export default class DateComponent extends BaseComponent {
//#region base properties
protected _isEditable = false;
onEnableEditCallback: () => void;
onDisableEditCallback: () => void;
onSaveCallback: () => Promise<void>;
onFirstEdit: () => void;
onFinalize: () => void;
//#endregion
//#region extended properties
private _onPresentation: (value: string) => string;
private _onSave: (value: string) => Promise<void>;
private _value: string;
private _title: string;
//#endregion
//#region HTML Elements
private _presentationSpan: HTMLElement;
private _input: HTMLInputElement;
//#endregion
/**
* Creates a new instance of the DateComponent class.
* @param component The component to associate with the DateComponent.
*/
constructor(component: Component) {
super(component);
this.onFinalize = this.build;
this.onFirstEdit = this.buildInput;
this.onEnableEditCallback = this.enableEdit;
this.onSaveCallback = this.save;
this.onDisableEditCallback = this.disableEdit;
}
//#region Configuration methods
/**
* Enables the editability of the component.
* @returns The component itself.
*/
public enableEditability(): this {
this._isEditable = true;
return this;
}
/**
* Sets the value of the component.
* @param value The value to set.
* @returns The component itself.
*/
public setValue(value: string): this {
this._value = value;
return this;
}
/**
* Sets the title of the component.
* @param title The title to set.
* @returns The component itself.
*/
public setTitle(title: string): this {
this._title = title;
return this;
}
/**
* Sets the formator of the component.
* @param formator The formator to set.
* @returns The component itself.
* @remarks The formator is called when the component changes in `not-edit` mode.
*/
public setFormator(formator: (value: string) => string): this {
this._onPresentation = formator;
return this;
}
/**
* Sets the saver of the component.
* @param callback The saver to set.
* @returns The component itself.
* @remarks The saver is called when the component save button is clicked.
*/
public onSave(callback: (value: string) => Promise<void>): this {
this._onSave = callback;
return this;
}
//#endregion
//#region Base Callbacks
/**
* Builds the presentation span for the component.
*/
private build(): void {
this._presentationSpan = document.createElement('span');
this._presentationContainer.appendChild(this._presentationSpan);
this._presentationSpan.title = this._title;
this._presentationSpan.classList.add('editable-data-view');
this._presentationSpan.classList.add('date-presentation');
this._presentationSpan.textContent = this._onPresentation
? this._onPresentation(this._value)
: this._value;
}
/**
* Builds the input element for the component.
*/
private buildInput(): void {
this._input = document.createElement('input');
this._dataInputContainer.appendChild(this._input);
this._input.type = 'date';
this._input.title = this._title;
this._input.classList.add('editable-data-view');
this._input.classList.add('date-input');
}
/**
* Enables the edit mode for the component.
*/
private enableEdit(): void {
this._input.value = this._value ? this._value : '';
this._input.focus();
this._input.select();
}
/**
* Disables the edit mode for the component.
*/
private disableEdit(): void {
this._presentationSpan.textContent = this._onPresentation
? this._onPresentation(this._value)
: this._value;
}
/**
* Saves the value of the component.
*/
private async save(): Promise<void> {
this._value = this._input.value;
await this._onSave?.(this._value);
}
//#endregion
}
|