@limetech/lime-elements
Version:
318 lines (317 loc) • 9.37 kB
JavaScript
import translate from '../../global/translations';
import { h } from '@stencil/core';
import { getFileBackgroundColor, getFileColor, getFileExtensionTitle, getFileIcon, } from '../../util/file-metadata';
const DEFAULT_FILE_CHIP = {
id: null,
text: null,
removable: true,
};
/**
* This component lets end-users select a *single* file from their device
* storage. Regardless of the user's device or operating system, this component
* opens up a file picker dialog that allows the user to choose a file.
*
* ## Using correct labels
*
* This file picker can be used in different contexts. The component's distinct
* visual design including the upload icon hints end-users that this is not a
* normal input field like other fields in the form for example.
*
* :::important
* you need to use a descriptive `label` that clarifies the
* functionality of the file picker, and/or provides users with clear
* instructions.
*
* Depending on the context, you may need to avoid labels such as:
* - File
* - Document
*
* and instead consider using labels like:
* - Attach a file
* - Upload a file
* - Choose a document
* - Choose a file
*
* and similar phrases...
* :::
*
* @exampleComponent limel-example-file
* @exampleComponent limel-example-file-custom-icon
* @exampleComponent limel-example-file-menu-items
* @exampleComponent limel-example-file-accepted-types
* @exampleComponent limel-example-file-composite
*/
export class File {
constructor() {
this.dropZoneTip = () => {
return this.getTranslation('file.drag-and-drop-tips');
};
this.handleNewFiles = (event) => {
this.preventAndStop(event);
this.change.emit(event.detail[0]);
};
this.handleChipSetChange = (event) => {
event.stopPropagation();
const file = event.detail.length === 0 ? event.detail[0] : null;
if (!file) {
this.change.emit(file);
}
};
this.handleChipInteract = (event) => {
this.preventAndStop(event);
this.interact.emit(event.detail.id);
};
this.value = undefined;
this.label = undefined;
this.required = false;
this.disabled = false;
this.readonly = false;
this.invalid = false;
this.accept = '*';
this.language = 'en';
}
render() {
return [
h("limel-file-dropzone", { disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()),
this.renderDragAndDropTip(),
];
}
renderDragAndDropTip() {
if (this.value || this.disabled || this.readonly) {
return;
}
return (h("div", { class: "drag-and-drop-tip" }, h("span", { class: "invisible-label-mock", role: "presentation" }, this.label), h("span", { class: "tip" }, this.dropZoneTip())));
}
getChipArray() {
if (!this.value) {
return [];
}
return [
Object.assign(Object.assign({}, DEFAULT_FILE_CHIP), { text: this.value.filename, id: this.value.id, icon: {
name: getFileIcon(this.value),
title: getFileExtensionTitle(this.value),
color: getFileColor(this.value),
backgroundColor: getFileBackgroundColor(this.value),
}, href: this.value.href, menuItems: this.value.menuItems }),
];
}
renderChipset() {
const chipset = (h("limel-chip-set", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, leadingIcon: "upload_to_cloud", language: this.language, onChange: this.handleChipSetChange, onInteract: this.handleChipInteract, required: this.required, type: "input", value: this.getChipArray() }));
if (this.value) {
return chipset;
}
return (h("limel-file-input", { accept: this.accept, disabled: this.disabled || this.readonly }, chipset));
}
preventAndStop(event) {
event.stopPropagation();
event.preventDefault();
}
getTranslation(key) {
return translate.get(key, this.language);
}
static get is() { return "limel-file"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["file.scss"]
};
}
static get styleUrls() {
return {
"$": ["file.css"]
};
}
static get properties() {
return {
"value": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "FileInfo",
"resolved": "FileInfo",
"references": {
"FileInfo": {
"location": "import",
"path": "../../global/shared-types/file.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The selected file."
}
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The input label."
},
"attribute": "label",
"reflect": true
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to indicate that the field is required."
},
"attribute": "required",
"reflect": true,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "True if the input should be disabled"
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"readonly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to disable adding and removing files, but allow interaction\nwith any already existing file."
},
"attribute": "readonly",
"reflect": true,
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to indicate that the current value of the chosen file is\ninvalid."
},
"attribute": "invalid",
"reflect": true,
"defaultValue": "false"
},
"accept": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)"
},
"attribute": "accept",
"reflect": true,
"defaultValue": "'*'"
},
"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."
},
"attribute": "language",
"reflect": false,
"defaultValue": "'en'"
}
};
}
static get events() {
return [{
"method": "change",
"name": "change",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Dispatched when a file is selected/deselected"
},
"complexType": {
"original": "FileInfo",
"resolved": "FileInfo",
"references": {
"FileInfo": {
"location": "import",
"path": "../../global/shared-types/file.types"
}
}
}
}, {
"method": "interact",
"name": "interact",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Dispatched when clicking on a chip"
},
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
}
}];
}
}
//# sourceMappingURL=file.js.map