5c2a08de6d
* Update browserslist * Add browserslistrc * ember-cli-update --to 3.26, fix conflicts * Run codemodes that start with ember-* * More codemods - before cp* * More codemods (curly data-test-*) * WIP ember-basic-dropdown template errors * updates ember-basic-dropdown and related deps to fix build issues * updates basic dropdown instances to new version API * updates more deps -- ember-template-lint is working again * runs no-implicit-this codemod * creates and runs no-quoteless-attributes codemod * runs angle brackets codemod * updates lint:hbs globs to only touch hbs files * removes yield only templates * creates and runs deprecated args transform * supresses lint error for invokeAction on LinkTo component * resolves remaining ambiguous path lint errors * resolves simple-unless lint errors * adds warnings for deprecated tagName arg on LinkTo components * adds warnings for remaining curly component invocation * updates global template lint rules * resolves remaining template lint errors * disables some ember specfic lint rules that target pre octane patterns * js lint fix run * resolves remaining js lint errors * fixes test run * adds npm-run-all dep * fixes test attribute issues * fixes console acceptance tests * fixes tests * adds yield only wizard/tutorial-active template * fixes more tests * attempts to fix more flaky tests * removes commented out settled in transit test * updates deprecations workflow and adds initializer to filter by version * updates flaky policies acl old test * updates to flaky transit test * bumps ember deps down to LTS version * runs linters after main merge * fixes client count tests after bad merge conflict fixes * fixes client count history test * more updates to lint config * another round of hbs lint fixes after extending stylistic rule * updates lint-staged commands * removes indent eslint rule since it seems to break things * fixes bad attribute in transform-edit-form template * test fixes * fixes enterprise tests * adds changelog * removes deprecated ember-concurrency-test-waiters dep and adds @ember/test-waiters * flaky test fix Co-authored-by: hashishaw <cshaw@hashicorp.com>
84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import { set, action } from '@ember/object';
|
|
import { tracked } from '@glimmer/tracking';
|
|
import { guidFor } from '@ember/object/internals';
|
|
|
|
/**
|
|
* @module TextFile
|
|
* `TextFile` components are file upload components where you can either toggle to upload a file or enter text.
|
|
*
|
|
* @example
|
|
* <TextFile
|
|
* @inputOnly={{true}}
|
|
* @helpText="help text"
|
|
* @file={{object}}
|
|
* @onChange={{action "someOnChangeFunction"}}
|
|
* @label={{"string"}}
|
|
* />
|
|
*
|
|
* @param [inputOnly] {bool} - When true, only the file input will be rendered
|
|
* @param [helpText] {string} - Text underneath label.
|
|
* @param file {object} - * Object in the shape of:
|
|
* {
|
|
* value: 'file contents here',
|
|
* fileName: 'nameOfFile.txt',
|
|
* enterAsText: boolean ability to enter as text
|
|
* }
|
|
* @param [onChange=Function.prototype] {Function|action} - A function to call when the value of the input changes.
|
|
* @param [label=null] {string} - Text to use as the label for the file input. If null, a default will be rendered.
|
|
*/
|
|
|
|
export default class TextFile extends Component {
|
|
fileHelpText = 'Select a file from your computer';
|
|
textareaHelpText = 'Enter the value as text';
|
|
elementId = guidFor(this);
|
|
index = '';
|
|
|
|
@tracked file = null;
|
|
@tracked showValue = false;
|
|
|
|
get inputOnly() {
|
|
return this.args.inputOnly || false;
|
|
}
|
|
get label() {
|
|
return this.args.label || null;
|
|
}
|
|
|
|
readFile(file) {
|
|
const reader = new FileReader();
|
|
reader.onload = () => this.setFile(reader.result, file.name);
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
setFile(contents, filename) {
|
|
this.args.onChange(this.index, { value: contents, fileName: filename });
|
|
}
|
|
|
|
@action
|
|
pickedFile(e) {
|
|
e.preventDefault();
|
|
const { files } = e.target;
|
|
if (!files.length) {
|
|
return;
|
|
}
|
|
for (let i = 0, len = files.length; i < len; i++) {
|
|
this.readFile(files[i]);
|
|
}
|
|
}
|
|
@action
|
|
updateData(e) {
|
|
e.preventDefault();
|
|
let file = this.args.file;
|
|
set(file, 'value', e.target.value);
|
|
this.args.onChange(this.index, file);
|
|
}
|
|
@action
|
|
clearFile() {
|
|
this.args.onChange(this.index, { value: '' });
|
|
}
|
|
@action
|
|
toggleMask() {
|
|
this.showValue = !this.showValue;
|
|
}
|
|
}
|