Skip to content

Commit

Permalink
Deprecate old input masks (#57)
Browse files Browse the repository at this point in the history
  • Loading branch information
brandynbennett authored Dec 26, 2017
1 parent e47d06b commit 7d5aee3
Show file tree
Hide file tree
Showing 11 changed files with 230 additions and 193 deletions.
192 changes: 1 addition & 191 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,194 +71,4 @@ This component has the same interface as it's [ember-one-way-controls counterpar
* [{{one-way-phone-mask}}](docs/one-way-phone-mask.md)
* [{{one-way-ssn-mask}}](docs/one-way-ssn-mask.md)
* [{{one-way-zip-code-mask}}](docs/one-way-zip-code-mask.md)

## Input Mask Component (deprecated)

The standard `input-mask` component:

```hbs
{{input-mask mask='999-aaa-***' value=foo unmaskedValue=bar}}
```

### Default Masking Definitions

- `9` : numeric
- `a` : alphabetical
- `*` : alphanumeric
- `A` : automatically uppercased alphabetical
- `#` : unicode

Optional portions of masks are delimited with brackets `[]`:

```hbs
// Optionally lets the user add the last dash and characters
{{input-mask mask='999-aaa[-***]' value=foo unmaskedValue=bar}}
```

### Unmasked Value

The mask is applied directly to the input itself, meaning it alters the `value`
attribute. There are times when you might want the value with the mask, and
times when you might want the value without the mask. For example:

```hbs
{{input-mask mask='99/99/9999' value=foo unmaskedValue=bar}}
```

This is an ad hoc mask for a date (consider using the `date-input` component
instead). If the user were to enter `12/12/2014`, the value of `foo` would be
just that, whereas the value of `bar` would be `12122014`, which may not be as
useful to you. Either way, both values are accessible and bound to each other,
so choose whichever one you want.

### Options

- `maskPlaceholder` (default: `null`)

Override Inputmask's default
[`placeholder`](https://github.com/RobinHerbots/Inputmask#placeholder-1)
option.

- `showMaskOnFocus` (default: `true`)

Shows the user a preview of the mask when the field is focussed.

- `showMaskOnHover` (default: `true`)

Shows the user a preview of the mask when the field is hovered.

- `rightAlign` (default: `false`)

This is an option on the original plugin, but I highly recommend using CSS
classes because all it does is apply a style directly to the input.

- `clearIncomplete` (default: `false`)

If the user does not completely fill in the mask before defocus, it will
clear the input.

- `greedyMask` (default: `false`)

If there are any optional portions of the mask this decides whether or not
to display them in the preview.

## Other Components

As mentioned above, this addon include other components that extend the base
`input-mask` component. Some of simple aliases, but some add additional options.

### Credit Card Inputs (deprecated)

```hbs
{{credit-card-input unmaskedValue=foo cardType=bar separator=' '}}
```

The `credit-card-input` dynamically determines the type of the credit card and
changes the mask as appropriate. It currently has support for:

- Visa
- MasterCard
- Amex
- Diners Club
- Discover
- JCB

The card type is stored in `cardType`, which can be bound to. The separator for
numbers can be specified with the `separator` option, and defaults to `-`.

### Currency Inputs (deprecated)

```hbs
{{currency-input unmaskedValue=foo}}
```

This is just a wrapper for the Inputmask alias and is equivalent to the
following:

```hbs
{{input-mask mask='currency' unmaskedValue=foo}}
```

### Date Inputs (deprecated)

```hbs
{{date-input unmaskedValue=foo}}
```

This is just a wrapper for the Inputmask alias and is equivalent to the
following:

```hbs
{{input-mask mask='date' unmaskedValue=foo}}
```

### Email Inputs (deprecated)

```hbs
{{email-input unmaskedValue=foo}}
```

This is just a wrapper for the Inputmask alias and is equivalent to the
following:

```hbs
{{input-mask mask='email' unmaskedValue=foo}}
```

### Number Inputs (deprecated)

```hbs
{{number-input unmaskedValue=foo group=false groupSize=3 separator=',''
decimal=false radix='.'}}
```

Number inputs only accept numbers, and can be modified using the following
options:

- `group`: Display the number grouped for readability (e.g. `1,234` vs.
`1234`).
- `groupSize`: Change the size of the groups.
- `separator`: Change the group separator. (Caveat: If radix and separator are
the same, then the radix will default to '.'.)
- `decimal`: If set to `true` then the input will be given 2 decimal places,
if set some number then the input will be given that many decimal places.
- `radix`: Sets the radix that separates the decimal places.
- `digitsOptional`: Specify whether digits are optional (e.g. `97.00` vs. `97`)
- `prefix`: Sets a prefix to be displayed before the number (e.g. `$97.00`)
- `suffix`: Sets a suffix to be displayed after the number (e.g. `100%`)
- `min`: Sets the minimum value for the field
- `max`: Sets the maximum value for the field
- `unmaskAsNumber`: Unmasks the input as a number rather than a string (e.g. `1234.56` vs. `'1234,56'`)

### US/Canada Phone Number Inputs (deprecated)

```hbs
{{phone-number-input unmaskedValue=foo extensions=false}}
```

Masks a US/Canada phone number with the format `(999) 999-9999`. The
`extensions` option can be set to `true` to allow up to 4 digit extensions
`(999) 999-9999 x 9999`. Note that if `greedyMask` is set to `false`, which is
the default, then you have to press space or 'x' to activate the extension part
of the mask when entering.

NOTE: There is a "phone" alias included in Inputmask, but when
I tried using it, I encountered slowness and freezeups. It is much more general
than this tag, however.

### US SSN Inputs

```hbs
{{ssn-input unmaskedValue=foo}}
```

Masks a US SSN code (`999-99-9999`).

### US ZIP Code Inputs (deprecated)

```hbs
{{zip-code-input unmaskedValue=foo fullCode=false}}
```

Masks a US ZIP code. If `fullCode` is set to `true`, then it will enable the
user to enter an extended ZIP+4 code.
* [Deprecated Masks](docs/deprecated-masks.md)
3 changes: 3 additions & 0 deletions addon/components/credit-card-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ import InputMaskComponent from 'ember-inputmask/components/input-mask';
*/

export default InputMaskComponent.extend({
oldComponent: '{{credit-card-input}}',
newComponent: '{{one-way-credit-card-mask}}',

updateMask: function() {
var cardType = this.get('cardType'),
s = this.get('separator') || '-', // s for separator for convenience
Expand Down
2 changes: 2 additions & 0 deletions addon/components/currency-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@ import InputMaskComponent from 'ember-inputmask/components/input-mask';
*/

export default InputMaskComponent.extend({
oldComponent: '{{currency-input}}',
newComponent: '{{one-way-currency-mask}}',
mask: 'currency'
});
2 changes: 2 additions & 0 deletions addon/components/date-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@ import InputMaskComponent from 'ember-inputmask/components/input-mask';
*/

export default InputMaskComponent.extend({
oldComponent: '{{date-input}}',
newComponent: '{{one-way-date-mask}}',
mask: 'date'
});
2 changes: 2 additions & 0 deletions addon/components/email-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@ import InputMaskComponent from 'ember-inputmask/components/input-mask';
*/

export default InputMaskComponent.extend({
oldComponent: '{{email-input}}',
newComponent: '{{one-way-email-mask}}',
mask: 'email'
});
16 changes: 14 additions & 2 deletions addon/components/input-mask.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
/* global Inputmask */

import { once, debounce } from '@ember/runloop';

import { deprecate } from '@ember/debug';
import { isPresent } from '@ember/utils';
import { on } from '@ember/object/evented';
import { computed, observer } from '@ember/object';
import { computed, observer, get } from '@ember/object';
import TextField from '@ember/component/text-field';

/**
Expand Down Expand Up @@ -46,6 +46,18 @@ export default TextField.extend({

value: 'value',

oldComponent: '{{input-mask}}',
newComponent: '{{one-way-input-mask}}',

init() {
this._super(...arguments);
let message = `${get(this, 'oldComponent')} is deprecated in favor of ${get(this, 'newComponent')} and will be removed in 1.0.0`;
deprecate(message, false, {
id: 'non-one-way-mask',
until: '1.0.0',
});
},

options: computed(function() {
return {};
}),
Expand Down
3 changes: 3 additions & 0 deletions addon/components/number-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ export default InputMaskComponent.extend({
suffix: '',
unmaskAsNumber: false,

oldComponent: '{{number-input}}',
newComponent: '{{one-way-number-mask}}',

updateMask: function() {
this.setProperties({
'options.autoGroup': this.get('group'),
Expand Down
3 changes: 3 additions & 0 deletions addon/components/phone-number-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ import InputMaskComponent from 'ember-inputmask/components/input-mask';
export default InputMaskComponent.extend({
mask: '(299) 999-9999',

oldComponent: '{{phone-number-input}}',
newComponent: '{{one-way-phone-mask}}',

updateMask: function() {
if (this.get('extensions')) {
this.set('mask', '(299) 999-9999[ x 9{1,4}]');
Expand Down
3 changes: 3 additions & 0 deletions addon/components/ssn-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import InputMaskComponent from 'ember-inputmask/components/input-mask';
export default InputMaskComponent.extend({
mask: '999-99-9999',

oldComponent: '{{ssn-input}}',
newComponent: '{{one-way-ssn-mask}}',

updateMask() {
this.set('mask', '999-99-9999');
this._super();
Expand Down
3 changes: 3 additions & 0 deletions addon/components/zip-code-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ export default InputMaskComponent.extend({

fullCode: false,

oldComponent: '{{zip-code-input}}',
newComponent: '{{one-way-zip-code-mask}}',

updateMask: function() {
if (this.get('fullCode')) {
this.set('mask', '99999[-9999]');
Expand Down
Loading

0 comments on commit 7d5aee3

Please sign in to comment.