@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
492 lines (491 loc) • 15.5 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { h } from "@stencil/core";
import { getSlotted } from "../../utils/dom";
import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
import { connectLocalized, disconnectLocalized } from "../../utils/locale";
import { createObserver } from "../../utils/observers";
import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
import { CSS } from "./resources";
/**
* @slot - A slot for adding a `calcite-input`.
*/
export class InlineEditable {
constructor() {
this.mutationObserver = createObserver("mutation", () => this.mutationObserverCallback());
this.enableEditing = () => {
this.valuePriorToEditing = this.inputElement?.value;
this.editingEnabled = true;
this.inputElement?.setFocus();
this.calciteInternalInlineEditableEnableEditingChange.emit();
};
this.disableEditing = () => {
this.editingEnabled = false;
};
this.cancelEditing = () => {
if (this.inputElement) {
this.inputElement.value = this.valuePriorToEditing;
}
this.disableEditing();
this.enableEditingButton.setFocus();
if (!this.editingEnabled && !!this.shouldEmitCancel) {
this.calciteInlineEditableEditCancel.emit();
}
};
this.escapeKeyHandler = async (event) => {
if (event.defaultPrevented) {
return;
}
if (event.key === "Escape") {
event.preventDefault();
this.cancelEditing();
}
if (event.key === "Tab" && this.shouldShowControls) {
if (!event.shiftKey && event.target === this.inputElement) {
event.preventDefault();
this.cancelEditingButton.setFocus();
}
if (!!event.shiftKey && event.target === this.cancelEditingButton) {
event.preventDefault();
this.inputElement?.setFocus();
}
}
};
this.cancelEditingHandler = async (event) => {
event.preventDefault();
this.cancelEditing();
};
this.enableEditingHandler = async (event) => {
if (this.disabled ||
event.target === this.cancelEditingButton ||
event.target === this.confirmEditingButton) {
return;
}
event.preventDefault();
if (!this.editingEnabled) {
this.enableEditing();
}
};
this.confirmChangesHandler = async (event) => {
event.preventDefault();
this.calciteInlineEditableEditConfirm.emit();
try {
if (this.afterConfirm) {
this.loading = true;
await this.afterConfirm();
this.disableEditing();
this.enableEditingButton.setFocus();
}
}
catch (error) {
}
finally {
this.loading = false;
}
};
this.disabled = false;
this.editingEnabled = false;
this.loading = false;
this.controls = false;
this.scale = undefined;
this.afterConfirm = undefined;
this.messages = undefined;
this.messageOverrides = undefined;
this.defaultMessages = undefined;
this.effectiveLocale = undefined;
}
disabledWatcher(disabled) {
if (this.inputElement) {
this.inputElement.disabled = disabled;
}
}
editingEnabledWatcher(newValue, oldValue) {
if (this.inputElement) {
this.inputElement.editingEnabled = newValue;
}
if (!newValue && !!oldValue) {
this.shouldEmitCancel = true;
}
}
onMessagesChange() {
/* wired up by t9n util */
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
connectInteractive(this);
connectLabel(this);
connectLocalized(this);
connectMessages(this);
this.mutationObserver?.observe(this.el, { childList: true });
this.mutationObserverCallback();
}
async componentWillLoad() {
setUpLoadableComponent(this);
await setUpMessages(this);
}
componentDidLoad() {
setComponentLoaded(this);
}
disconnectedCallback() {
disconnectInteractive(this);
disconnectLabel(this);
disconnectLocalized(this);
disconnectMessages(this);
this.mutationObserver?.disconnect();
}
componentDidRender() {
updateHostInteraction(this);
}
render() {
return (h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { class: CSS.inputWrapper }, h("slot", null)), h("div", { class: CSS.controlsWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, scale: this.scale, style: {
opacity: this.editingEnabled ? "0" : "1",
width: this.editingEnabled ? "0" : "inherit"
}, type: "button",
// eslint-disable-next-line react/jsx-sort-props
ref: (el) => (this.enableEditingButton = el) }), this.shouldShowControls && [
h("div", { class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, scale: this.scale, type: "button",
// eslint-disable-next-line react/jsx-sort-props
ref: (el) => (this.cancelEditingButton = el) })),
h("calcite-button", { appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, scale: this.scale, type: "button",
// eslint-disable-next-line react/jsx-sort-props
ref: (el) => (this.confirmEditingButton = el) })
])));
}
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
blurHandler() {
if (!this.controls) {
this.disableEditing();
}
}
effectiveLocaleChange() {
updateMessages(this, this.effectiveLocale);
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
/** Sets focus on the component. */
async setFocus() {
await componentLoaded(this);
this.el?.focus();
}
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
mutationObserverCallback() {
this.updateSlottedInput();
this.scale = this.scale || this.inputElement?.scale;
}
onLabelClick() {
this.setFocus();
}
updateSlottedInput() {
const inputElement = getSlotted(this.el, {
matches: "calcite-input"
});
this.inputElement = inputElement;
if (!inputElement) {
return;
}
this.inputElement.disabled = this.disabled;
this.inputElement.label = this.inputElement.label || getLabelText(this);
}
get shouldShowControls() {
return this.editingEnabled && this.controls;
}
static get is() { return "calcite-inline-editable"; }
static get encapsulation() { return "shadow"; }
static get delegatesFocus() { return true; }
static get originalStyleUrls() {
return {
"$": ["inline-editable.scss"]
};
}
static get styleUrls() {
return {
"$": ["inline-editable.css"]
};
}
static get assetsDirs() { return ["assets"]; }
static get properties() {
return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"editingEnabled": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, inline editing is enabled on the component."
},
"attribute": "editing-enabled",
"reflect": true,
"defaultValue": "false"
},
"loading": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, a busy indicator is displayed."
},
"attribute": "loading",
"reflect": true,
"defaultValue": "false"
},
"controls": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component."
},
"attribute": "controls",
"reflect": true,
"defaultValue": "false"
},
"scale": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Scale",
"resolved": "\"l\" | \"m\" | \"s\"",
"references": {
"Scale": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the size of the component. Defaults to the scale of the wrapped `calcite-input` or the scale of the closest wrapping component with a set scale."
},
"attribute": "scale",
"reflect": true
},
"afterConfirm": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "() => Promise<void>",
"resolved": "() => Promise<void>",
"references": {
"Promise": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically."
}
},
"messages": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "InlineEditableMessages",
"resolved": "{ enableEditing: string; cancelEditing: string; confirmChanges: string; }",
"references": {
"InlineEditableMessages": {
"location": "import",
"path": "./assets/inline-editable/t9n"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Made into a prop for testing purposes only"
}
},
"messageOverrides": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "Partial<InlineEditableMessages>",
"resolved": "{ enableEditing?: string; cancelEditing?: string; confirmChanges?: string; }",
"references": {
"Partial": {
"location": "global"
},
"InlineEditableMessages": {
"location": "import",
"path": "./assets/inline-editable/t9n"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Use this property to override individual strings used by the component."
}
}
};
}
static get states() {
return {
"defaultMessages": {},
"effectiveLocale": {}
};
}
static get events() {
return [{
"method": "calciteInlineEditableEditCancel",
"name": "calciteInlineEditableEditCancel",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Emits when the component's \"cancel editing\" button is pressed."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "calciteInlineEditableEditConfirm",
"name": "calciteInlineEditableEditConfirm",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Emits when the component's \"confirm edits\" button is pressed."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "calciteInternalInlineEditableEnableEditingChange",
"name": "calciteInternalInlineEditableEnableEditingChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get methods() {
return {
"setFocus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Sets focus on the component.",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "disabled",
"methodName": "disabledWatcher"
}, {
"propName": "editingEnabled",
"methodName": "editingEnabledWatcher"
}, {
"propName": "messageOverrides",
"methodName": "onMessagesChange"
}, {
"propName": "effectiveLocale",
"methodName": "effectiveLocaleChange"
}];
}
static get listeners() {
return [{
"name": "calciteInternalInputBlur",
"method": "blurHandler",
"target": undefined,
"capture": false,
"passive": false
}];
}
}