@limetech/lime-elements
Version:
269 lines (268 loc) • 7.39 kB
JavaScript
import { h } from '@stencil/core';
import translate from '../../../global/translations';
import { DatePicker as DateOnlyPicker } from '../pickers/date-picker';
import { DatetimePicker } from '../pickers/datetime-picker';
import { MonthPicker } from '../pickers/month-picker';
import { QuarterPicker } from '../pickers/quarter-picker';
import { TimePicker } from '../pickers/time-picker';
import { WeekPicker } from '../pickers/week-picker';
import { YearPicker } from '../pickers/year-picker';
/**
* This component is internal and only supposed to be used by
* the limel-date-picker. This component is needed in order for us
* to render the flatpickr calendar in a portal.
*
* @private
*/
export class DatePickerCalendar {
constructor() {
this.flatPickrCreated = false;
this.value = undefined;
this.type = 'datetime';
this.format = undefined;
this.isOpen = undefined;
this.inputElement = undefined;
this.language = 'en';
this.formatter = undefined;
}
componentWillLoad() {
switch (this.type) {
case 'date': {
this.picker = new DateOnlyPicker(this.language, this.change, this.format);
break;
}
case 'time': {
this.picker = new TimePicker(this.language, this.change, this.format);
break;
}
case 'week': {
this.picker = new WeekPicker(this.language, this.change, this.format);
break;
}
case 'month': {
this.picker = new MonthPicker(this.language, this.change, translate, this.format);
break;
}
case 'quarter': {
this.picker = new QuarterPicker(this.language, this.change, translate, this.format);
break;
}
case 'year': {
this.picker = new YearPicker(this.language, this.change, translate, this.format);
break;
}
default: {
this.picker = new DatetimePicker(this.language, this.change, this.format);
break;
}
}
if (this.formatter) {
this.picker.formatter = this.formatter;
}
}
componentDidUpdate() {
if (!this.flatPickrCreated) {
this.createFlatpickr();
}
else if (!this.isOpen) {
this.picker.setValue(this.value);
}
}
createFlatpickr() {
if (!this.inputElement) {
// The input element is programatically set on this element
// after its been rendered.
return;
}
if (!this.isOpen || !this.container.checkVisibility()) {
return;
}
this.picker.init(this.inputElement, this.container, this.value);
this.flatPickrCreated = true;
}
disconnectedCallback() {
this.picker.destroy();
this.flatPickrCreated = false;
}
render() {
return (h("div", { class: "container", ref: (el) => (this.container = el), style: {
'--today-label': `"${translate.get('date-picker.today')}"`,
} }));
}
static get is() { return "limel-flatpickr-adapter"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["flatpickr-adapter.scss"]
};
}
static get styleUrls() {
return {
"$": ["flatpickr-adapter.css"]
};
}
static get properties() {
return {
"value": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Date",
"resolved": "Date",
"references": {
"Date": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The value of the field."
}
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "DateType",
"resolved": "\"date\" | \"datetime\" | \"month\" | \"quarter\" | \"time\" | \"week\" | \"year\"",
"references": {
"DateType": {
"location": "import",
"path": "../../date-picker/date.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Type of date picker."
},
"attribute": "type",
"reflect": false,
"defaultValue": "'datetime'"
},
"format": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Format to display the selected date in."
},
"attribute": "format",
"reflect": false
},
"isOpen": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` if the calendar should be open."
},
"attribute": "is-open",
"reflect": false
},
"inputElement": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "HTMLElement",
"resolved": "HTMLElement",
"references": {
"HTMLElement": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The native input element to use with flatpickr."
}
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Languages",
"resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
"references": {
"Languages": {
"location": "import",
"path": "../../date-picker/date.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the localisation for translations and date formatting.\nProperty `format` customizes the localized date format."
},
"attribute": "language",
"reflect": false,
"defaultValue": "'en'"
},
"formatter": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "(date: Date) => string",
"resolved": "(date: Date) => string",
"references": {
"Date": {
"location": "global"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
}
};
}
static get events() {
return [{
"method": "change",
"name": "change",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the date picker value is changed."
},
"complexType": {
"original": "Date",
"resolved": "Date",
"references": {
"Date": {
"location": "global"
}
}
}
}];
}
}
//# sourceMappingURL=flatpickr-adapter.js.map