/
masked-input.js
58 lines (57 loc) · 1.88 KB
/
masked-input.js
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
import Component from '@ember/component';
import autosize from 'autosize';
import layout from '../templates/components/masked-input';
/**
* @module MaskedInput
* `MaskedInput` components are textarea inputs where the input is hidden. They are used to enter sensitive information like passwords.
*
* @example
* <MaskedInput
* @value={{attr.options.defaultValue}}
* @allowCopy={{true}}
* @onChange={{action "someAction"}}
* @onKeyUp={{action "onKeyUp"}}
* />
*
* @param [value] {String} - The value to display in the input.
* @param [allowCopy=null] {bool} - Whether or not the input should render with a copy button.
* @param [displayOnly=false] {bool} - Whether or not to display the value as a display only `pre` element or as an input.
* @param [onChange=Function.prototype] {Function|action} - A function to call when the value of the input changes.
* @param [onKeyUp=Function.prototype] {Function|action} - A function to call whenever on the dom event onkeyup. Generally passed down from higher level parent.
* @param [isCertificate=false] {bool} - If certificate display the label and icons differently.
*
*/
export default Component.extend({
layout,
value: null,
showValue: false,
didInsertElement() {
this._super(...arguments);
autosize(this.element.querySelector('textarea'));
},
didUpdate() {
this._super(...arguments);
autosize.update(this.element.querySelector('textarea'));
},
willDestroyElement() {
this._super(...arguments);
autosize.destroy(this.element.querySelector('textarea'));
},
displayOnly: false,
onKeyDown() {},
onKeyUp() {},
onChange() {},
actions: {
toggleMask() {
this.toggleProperty('showValue');
},
updateValue(e) {
let value = e.target.value;
this.set('value', value);
this.onChange(value);
},
handleKeyUp(name, value) {
this.onKeyUp(name, value);
},
},
});