Update number format component (#15)

* updated react-number-format to new 5.0.0 version.  Implemented r-paper-number-format-numeric-text-field component.  Added selecting of entire text field on focus.

* Added r-paper-number-format-pattern-text-field-test.  Added/fixed unit tests

* Updated Readme.  Added decorator to handle select all on focus.

* Updated Package Number to 3.0.0-beta.13 to reflect breaking change in how RPaperReactNumberFormatTextField has changed.

CONTRIBUTING.md

@@ -16,6 +16,7 @@
 * `ember test` – Runs the test suite on the current Ember version
 * `ember test --server` – Runs the test suite in "watch mode"
 * `ember try:each` – Runs the test suite against multiple Ember versions
+* To Run on Browser - `ember serve`  then - `localhost:4200/tests`
 
 ## Generating Basic Component
 * `ember g r-paper <dasherized-react-component-name>`  

README.md

@@ -710,9 +710,9 @@ If `@nativeOnChange={{true}}`:
 The onChange function will return the event object.  If `nativeOnChange` is not defined or false, the unmasked value will be returned.  The event object returns the following object a target object with a `value` and `maskedValue`.
 
 
-## TextField - NumberFormatTextField
+## TextField - NumberFormatNumericTextField
 ***
-This component uses all of the regular TextField properties as well as that of ReactNumberFormat.  
+This component uses all of the regular TextField properties as well as that of ReactNumberFormat Numeric.  
 [Explore React Number Format Docs](https://github.com/s-yadav/react-number-format)  
 
 This component will only accept numbers as input.
@@ -739,12 +739,12 @@ export default class TestClass extends Component {
       },
     };
 
-    this.inputMaskTypes.addNumberFormatType(
+    this.inputMaskTypes.addNumberFormatNumericType(
       'currencyNoDecimal',
       currencyNoDecimalNMask
     );
 
-    this.inputMaskTypes.addNumberFormatType(
+    this.inputMaskTypes.addNumberFormatNumericType(
       'percentageWithDecimal',
       percentageWithDecimalNFMask
     );
@@ -753,13 +753,50 @@ export default class TestClass extends Component {
 ```
 And to use it:
 ```handlebars
-<RPaperNumberFormatTextField @label="Regular NMask" @maskName="currencyNoDecimal"/>
-<RPaperNumberFormatTextField @label="NF Percent Mask" @maskName="percentageWithDecimal"/>
+<RPaperNumberFormatNumericTextField @label="Regular NMask" @maskName="currencyNoDecimal"/>
+<RPaperNumberFormatNumericTextField @label="NF Percent Mask" @maskName="percentageWithDecimal"/>
+```
+
+If `@nativeOnChange={{true}}`:
+The onChange function will return the event object.  If `nativeOnChange` is not defined or false, the unmasked value will be returned.  The event object returns the following object a target object with a `value` and `maskedValue`.
+
+This component will by default select the entire text area when focus is received.  If this trait is not desired, the attribute `@selectAllOnFocus={{false}}` must be explicitly set.
+
+## TextField - NumberFormatPatternTextField
+***
+This component uses all of the regular TextField properties as well as that of ReactNumberFormat Pattern.  
+[Explore React Number Format Docs](https://github.com/s-yadav/react-number-format)
+
+This component will only accept numbers as input.
+
+The service `inputMaskTypes` is available to predefine masks for this component.
+```javascript
+export default class TestClass extends Component {
+  @service inputMaskTypes
+
+  constructor() {
+    super(...arguments);
+
+    const myPatternFormat = {
+      format: "### ###",
+    };
+
+    this.inputMaskTypes.addNumberFormatPatternType(
+      'myPattern',
+      myPatternFormat
+    );
+  }
+}
+```
+And to use it:
+```handlebars
+<RPaperNumberFormatPatternTextField @label="Format Mask" @maskName="myPattern"/>
 ```
 
 If `@nativeOnChange={{true}}`:
 The onChange function will return the event object.  If `nativeOnChange` is not defined or false, the unmasked value will be returned.  The event object returns the following object a target object with a `value` and `maskedValue`.
 
+This component will by default select the entire text area when focus is received.  If this trait is not desired, the attribute `@selectAllOnFocus={{false}}` must be explicitly set.
 
 ## Tooltip
 ***

addon/components/r-paper-number-format-numeric-text-field.js

@@ -0,0 +1,32 @@
+import { ReactNumberFormatNumericTextField } from '../react-component-lib/react-number-format-numeric-text-field'
+import { NUMBER_FORMAT_NUMERIC_TEXT_FIELD } from '../constants/number-format-numeric-text-field';
+import { NumberFormatNumericTextFieldPropObj } from '../prop-files/number-format-numeric-text-field-props';
+import { TextFieldPropObj } from '../prop-files/text-field-props';
+import BaseEmberPaperReact from './base/base-ember-paper-react';
+import { usesErrorValidation } from '../decorators/uses-error-validation';
+import { changeHandlerValueReturn } from '../decorators/change-handler-value-return';
+import { selectTextOnFocus } from '../decorators/select-text-on-focus';
+import { inject as service } from '@ember/service';
+
+@usesErrorValidation
+@changeHandlerValueReturn
+@selectTextOnFocus
+export default class RPaperNumberFormatNumericTextFieldComponent extends BaseEmberPaperReact {
+  @service inputMaskTypes;
+
+  constructor() {
+    super(...arguments);
+    this.componentType = NUMBER_FORMAT_NUMERIC_TEXT_FIELD.COMPONENT_TYPE;
+    this.loadPropObject(TextFieldPropObj, NumberFormatNumericTextFieldPropObj);
+    this.reactElement = ReactNumberFormatNumericTextField;
+  }
+
+  initializeProps() {
+    super.initializeProps();
+    if (this.args.maskName) {
+      const mask = this.inputMaskTypes.getNumberFormatNumericType(this.args.maskName);
+      Object.assign(this.propsToPass, mask);
+    }
+  }
+}
+

addon/components/r-paper-number-format-pattern-text-field.hbs

@@ -0,0 +1,4 @@
+<span class={{this.componentType}} ...attributes
+  {{ember-paper-reactable this.inserted this.changeReactState this.changeArgs}}
+  {{did-update this.setValidation @errors}} {{did-update this.setValidation @isTouched}}
+></span>

addon/components/r-paper-number-format-pattern-text-field.js

@@ -0,0 +1,34 @@
+import { ReactNumberFormatPatternTextField } from '../react-component-lib/react-number-format-pattern-text-field'
+import { NUMBER_FORMAT_PATTERN_TEXT_FIELD } from '../constants/number-format-pattern-text-field';
+import { NumberFormatPatternTextFieldPropObj } from '../prop-files/number-format-pattern-text-field-props';
+import { TextFieldPropObj } from '../prop-files/text-field-props';
+import BaseEmberPaperReact from './base/base-ember-paper-react';
+import { usesErrorValidation } from '../decorators/uses-error-validation';
+import { changeHandlerValueReturn } from '../decorators/change-handler-value-return';
+import { selectTextOnFocus } from '../decorators/select-text-on-focus';
+import { inject as service } from '@ember/service';
+
+@usesErrorValidation
+@changeHandlerValueReturn
+@selectTextOnFocus
+export default class RPaperNumberFormatPatternTextFieldComponent extends BaseEmberPaperReact {
+  @service inputMaskTypes;
+
+  constructor() {
+    super(...arguments);
+    this.componentType = NUMBER_FORMAT_PATTERN_TEXT_FIELD.COMPONENT_TYPE;
+    this.loadPropObject(TextFieldPropObj, NumberFormatPatternTextFieldPropObj);
+    this.reactElement = ReactNumberFormatPatternTextField;
+  }
+
+  initializeProps() {
+    super.initializeProps();
+    if (this.args.maskName) {
+      const mask = this.inputMaskTypes.getNumberFormatPatternType(this.args.maskName);
+      Object.assign(this.propsToPass, mask);
+    }
+  }
+}
+
+
+

addon/constants/number-format-numeric-text-field.js

@@ -0,0 +1,14 @@
+import { BASE_EMBER_COMPONENT_PREFIX } from './constants';
+
+const IDS = {
+  NUMBER_FORMAT_NUMERIC_TEXT_FIELD: `NumberFormatNumericTextField`
+}
+
+const NUMBER_FORMAT_NUMERIC_TEXT_FIELD = {
+  ID: IDS.NUMBER_FORMAT_NUMERIC_TEXT_FIELD,
+  COMPONENT_TYPE: `${BASE_EMBER_COMPONENT_PREFIX}-number-format-numeric-text-field`,
+}
+
+export {
+  NUMBER_FORMAT_NUMERIC_TEXT_FIELD
+}

addon/constants/number-format-pattern-text-field.js

@@ -0,0 +1,14 @@
+import { REACT_COMPONENT_PREFIX, BASE_EMBER_COMPONENT_PREFIX } from './constants';
+
+const IDS = {
+  NUMBER_FORMAT_PATTERN_TEXT_FIELD: `${REACT_COMPONENT_PREFIX}NumberFormatPatternTextField`
+}
+
+const NUMBER_FORMAT_PATTERN_TEXT_FIELD = {
+  ID: IDS.NUMBER_FORMAT_PATTERN_TEXT_FIELD,
+  COMPONENT_TYPE: `${BASE_EMBER_COMPONENT_PREFIX}-number-format-pattern-text-field`,
+}
+
+export {
+  NUMBER_FORMAT_PATTERN_TEXT_FIELD
+}

addon/decorators/select-text-on-focus.js

@@ -0,0 +1,26 @@
+import { action } from '@ember/object';
+import { later } from '@ember/runloop';
+import { TEXT_FIELD } from '../constants/text-field';
+
+function selectTextOnFocus(c){
+  return class SelectTextOnFocus extends c {
+
+    initializeProps() {
+      super.initializeProps();
+      this.propsToPass.onFocus = this.onFocusHandler;
+    }
+
+    @action
+    onFocusHandler(event) {
+      this.args.onFocus && this.args.onFocus(event);
+      if (this.args.selectAllOnFocus !== false) {
+        later(this, function() {
+          this.reactRef.current.componentRef.current.querySelector(`.${TEXT_FIELD.BASE_INPUT_CLASS}`).select();
+        }, 50);
+      }
+    }
+
+  }
+}
+
+export { selectTextOnFocus }

addon/prop-files/number-format-common-text-field-props.js

@@ -0,0 +1,37 @@
+const props = {
+  customInput: undefined,
+  value: undefined,
+  defaultValue: undefined,
+  displayType: undefined,
+  getInputRef: undefined,
+  isAllowed: undefined,
+  valueIsNumericString: undefined,
+  onValueChange: undefined,
+  renderText: undefined,
+  type: undefined,
+  ref: undefined
+};
+
+const propsNotForComponent = {
+}
+
+const stateProps = {
+  value: undefined
+}
+
+const statefulPropsNotForComponent = {
+}
+
+const NumberFormatCommonTextFieldProps = () => { return Object.assign({}, props) };
+const NumberFormatCommonTextFieldStateProps = () => {return Object.assign({}, stateProps) };
+const NumberFormatCommonTextFieldPropsNotForComponent = () => {return Object.assign({}, propsNotForComponent)};
+const NumberFormatCommonTextFieldStatePropsNotForComponent = () => {return Object.assign({}, statefulPropsNotForComponent)};
+
+const NumberFormatCommonTextFieldPropObj = {
+  props: NumberFormatCommonTextFieldProps,
+  stateProps: NumberFormatCommonTextFieldStateProps,
+  propsNotForComponent: NumberFormatCommonTextFieldPropsNotForComponent,
+  statefulPropsNotForComponent: NumberFormatCommonTextFieldStatePropsNotForComponent
+}
+
+export { NumberFormatCommonTextFieldPropObj }

addon/prop-files/number-format-numeric-text-field-props.js

@@ -0,0 +1,37 @@
+import { NumberFormatCommonTextFieldPropObj } from './number-format-common-text-field-props';
+
+const props = {
+  allowLeadingZeros: undefined,
+  allowNegative: undefined,
+  allowedDecimalSeparators: undefined,
+  thousandSeparator: undefined,
+  decimalScale: undefined,
+  fixedDecimalScale: undefined,
+  decimalSeparator: undefined,
+  prefix: undefined,
+  suffix: undefined,
+  thousandsGroupStyle: undefined,
+};
+
+const propsNotForComponent = {
+}
+
+const stateProps = {
+}
+
+const statefulPropsNotForComponent = {
+}
+
+const NumberFormatNumericTextFieldProps = () => { return Object.assign({}, NumberFormatCommonTextFieldPropObj.props(), props) };
+const NumberFormatNumericTextFieldStateProps = () => {return Object.assign({}, NumberFormatCommonTextFieldPropObj.stateProps(), stateProps) };
+const NumberFormatNumericTextFieldPropsNotForComponent = () => {return Object.assign({}, NumberFormatCommonTextFieldPropObj.propsNotForComponent(), propsNotForComponent)};
+const NumberFormatNumericTextFieldStatePropsNotForComponent = () => {return Object.assign({}, NumberFormatCommonTextFieldPropObj.statefulPropsNotForComponent(), statefulPropsNotForComponent)};
+
+const NumberFormatNumericTextFieldPropObj = {
+  props: NumberFormatNumericTextFieldProps,
+  stateProps: NumberFormatNumericTextFieldStateProps,
+  propsNotForComponent: NumberFormatNumericTextFieldPropsNotForComponent,
+  statefulPropsNotForComponent: NumberFormatNumericTextFieldStatePropsNotForComponent
+}
+
+export { NumberFormatNumericTextFieldPropObj }

addon/prop-files/number-format-pattern-text-field-props.js

@@ -0,0 +1,31 @@
+import { NumberFormatCommonTextFieldPropObj } from './number-format-common-text-field-props';
+
+const props = {
+  allowEmptyFormatting: undefined,
+  format: undefined,
+  mask: undefined,
+  patternChar: undefined,
+};
+
+const propsNotForComponent = {
+}
+
+const stateProps = {
+}
+
+const statefulPropsNotForComponent = {
+}
+
+const NumberFormatPatternTextFieldProps = () => { return Object.assign({}, NumberFormatCommonTextFieldPropObj.props(), props) };
+const NumberFormatPatternTextFieldStateProps = () => {return Object.assign({}, NumberFormatCommonTextFieldPropObj.stateProps(), stateProps) };
+const NumberFormatPatternTextFieldPropsNotForComponent = () => {return Object.assign({}, NumberFormatCommonTextFieldPropObj.propsNotForComponent(), propsNotForComponent)};
+const NumberFormatPatternTextFieldStatePropsNotForComponent = () => {return Object.assign({}, NumberFormatCommonTextFieldPropObj.statefulPropsNotForComponent(), statefulPropsNotForComponent)};
+
+const NumberFormatPatternTextFieldPropObj = {
+  props: NumberFormatPatternTextFieldProps,
+  stateProps: NumberFormatPatternTextFieldStateProps,
+  propsNotForComponent: NumberFormatPatternTextFieldPropsNotForComponent,
+  statefulPropsNotForComponent: NumberFormatPatternTextFieldStatePropsNotForComponent
+}
+
+export { NumberFormatPatternTextFieldPropObj }