5679494411

pending completion

Build # 5679494411

Build Type

push

github

Committed by

lucas-koehler

Commit Message

angular-material: Fix unfocused description display for number renderer

The template had a bug closing the ngIf that checks whether the description
is shown too early. This lead to a DOMException and the description to never be shown.

Fix #2166

Run Details

110 of 179 branches covered (61.45%)

305 of 362 relevant lines covered (84.25%)

13.81 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

54.88

/packages/angular-material/src/controls/number.renderer.ts

/*
  The MIT License
  
  Copyright (c) 2017-2019 EclipseSource Munich
  https://github.com/eclipsesource/jsonforms
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:
  
  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.
  
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
*/
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
import {
  isIntegerControl,
  isNumberControl,
  or,
  RankedTester,
  rankWith,
  StatePropsOfControl,
} from '@jsonforms/core';
import merge from 'lodash/merge';

@Component({
  selector: 'NumberControlRenderer',
  template: `
    <mat-form-field fxFlex [fxHide]="hidden">
      <mat-label>{{ label }}</mat-label>
      <input
        matInput
        (input)="onChange($event)"
        [value]="getValue()"
        [id]="id"
        [formControl]="form"
        [min]="min"
        [max]="max"
        [step]="multipleOf"
        (focus)="focused = true"
        (focusout)="focused = false"
      />
      <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{
        description
      }}</mat-hint>
      <mat-error>{{ error }}</mat-error>
    </mat-form-field>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NumberControlRenderer extends JsonFormsControl {
  private readonly MAXIMUM_FRACTIONAL_DIGITS = 20;

  oldValue: string;
  min: number;
  max: number;
  multipleOf: number;
  locale: string;
  numberFormat: Intl.NumberFormat;
  decimalSeparator: string;

  constructor(jsonformsService: JsonFormsAngularService) {
    super(jsonformsService);
  }

  onChange(ev: any) {
    const data = this.oldValue
      ? ev.target.value.replace(this.oldValue, '')
      : ev.target.value;
    // ignore these
    if (
      data === '.' ||
      data === ',' ||
      data === ' ' ||
      // if the value is 0 and we already have a value then we ignore
      (data === '0' &&
        this.getValue() !== '' &&
        // a 0 in the first place
        ((ev.target.selectionStart === 1 && ev.target.selectionEnd === 1) ||
          // or in the last place as this doesn't change the value (when there is a separator)
          (ev.target.selectionStart === ev.target.value.length &&
            ev.target.selectionEnd === ev.target.value.length &&
            ev.target.value.indexOf(this.decimalSeparator) !== -1)))
    ) {
      this.oldValue = ev.target.value;
      return;
    }
    super.onChange(ev);
    this.oldValue = this.getValue();
  }

  getEventValue = (event: any) => {
    const cleanPattern = new RegExp(`[^-+0-9${this.decimalSeparator}]`, 'g');
    const cleaned = event.target.value.replace(cleanPattern, '');
    const normalized = cleaned.replace(this.decimalSeparator, '.');

    if (normalized === '') {
      return undefined;
    }

    // convert to number
    const number = +normalized;
    // if not a number just return the string
    if (Number.isNaN(number)) {
      return event.target.value;
    }
    return number;
  };

  getValue = () => {
    if (this.data !== undefined && this.data !== null) {
      if (typeof this.data === 'number') {
        return this.numberFormat.format(this.data);
      }
      return this.data;
    }
    return '';
  };

  mapAdditionalProps(props: StatePropsOfControl) {
    if (this.scopedSchema) {
      const testerContext = {
        rootSchema: this.rootSchema,
        config: props.config,
      };
      const defaultStep = isNumberControl(
        this.uischema,
        this.rootSchema,
        testerContext
      )
        ? 0.1
        : 1;
      this.min = this.scopedSchema.minimum;
      this.max = this.scopedSchema.maximum;
      this.multipleOf = this.scopedSchema.multipleOf || defaultStep;
      const appliedUiSchemaOptions = merge(
        {},
        props.config,
        this.uischema.options
      );
      const currentLocale = this.jsonFormsService.getLocale();
      if (this.locale === undefined || this.locale !== currentLocale) {
        this.locale = currentLocale;
        this.numberFormat = new Intl.NumberFormat(this.locale, {
          useGrouping: appliedUiSchemaOptions.useGrouping,
          maximumFractionDigits: this.MAXIMUM_FRACTIONAL_DIGITS,
        });
        this.determineDecimalSeparator();
        this.oldValue = this.getValue();
      }
      this.form.setValue(this.getValue());
    }
  }

  private determineDecimalSeparator(): void {
    const example = this.numberFormat.format(1.1);
    this.decimalSeparator = example.charAt(1);
  }
}
export const NumberControlRendererTester: RankedTester = rankWith(
  2,
  or(isNumberControl, isIntegerControl)
);

1	/*
2	The MIT License
3
4	Copyright (c) 2017-2019 EclipseSource Munich
5	https://github.com/eclipsesource/jsonforms
6
7	Permission is hereby granted, free of charge, to any person obtaining a copy
8	of this software and associated documentation files (the "Software"), to deal
9	in the Software without restriction, including without limitation the rights
10	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11	copies of the Software, and to permit persons to whom the Software is
12	furnished to do so, subject to the following conditions:
13
14	The above copyright notice and this permission notice shall be included in
15	all copies or substantial portions of the Software.
16
17	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23	THE SOFTWARE.
24	*/
25	import { ChangeDetectionStrategy, Component } from '@angular/core';
26	import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
27	import {
28	isIntegerControl,
29	isNumberControl,
30	or,
31	RankedTester,
32	rankWith,
33	StatePropsOfControl,
34	} from '@jsonforms/core';
35	import merge from 'lodash/merge';
36
37	@Component({
38	selector: 'NumberControlRenderer',
39	template: `
40	<mat-form-field fxFlex [fxHide]="hidden">
41	<mat-label>{{ label }}</mat-label>
42	<input
43	matInput
44	(input)="onChange($event)"
45	[value]="getValue()"
46	[id]="id"
47	[formControl]="form"
48	[min]="min"
49	[max]="max"
50	[step]="multipleOf"
51	(focus)="focused = true"
52	(focusout)="focused = false"
53	/>
54	<mat-hint *ngIf="shouldShowUnfocusedDescription() \|\| focused">{{
55	description
56	}}</mat-hint>
57	<mat-error>{{ error }}</mat-error>
58	</mat-form-field>
59	`,
60	changeDetection: ChangeDetectionStrategy.OnPush,
61	})
62	export class NumberControlRenderer extends JsonFormsControl {	1✔
63	private readonly MAXIMUM_FRACTIONAL_DIGITS = 20;	15✔
64
65	oldValue: string;
66	min: number;
67	max: number;
68	multipleOf: number;
69	locale: string;
70	numberFormat: Intl.NumberFormat;
71	decimalSeparator: string;
72
73	constructor(jsonformsService: JsonFormsAngularService) {
74	super(jsonformsService);	15!
75	}
76
77	onChange(ev: any) {	1✔
78	const data = this.oldValue	×
79	? ev.target.value.replace(this.oldValue, '')	×
80	: ev.target.value;
81	// ignore these
82	if (	×
83	data === '.' \|\|	×
84	data === ',' \|\|
85	data === ' ' \|\|
86	// if the value is 0 and we already have a value then we ignore
87	(data === '0' &&
88	this.getValue() !== '' &&
89	// a 0 in the first place
90	((ev.target.selectionStart === 1 && ev.target.selectionEnd === 1) \|\|
91	// or in the last place as this doesn't change the value (when there is a separator)
92	(ev.target.selectionStart === ev.target.value.length &&
93	ev.target.selectionEnd === ev.target.value.length &&
94	ev.target.value.indexOf(this.decimalSeparator) !== -1)))
95	) {
96	this.oldValue = ev.target.value;	×
97	return;	×
98	}
99	super.onChange(ev);	×
100	this.oldValue = this.getValue();	×
101	}
102
103	getEventValue = (event: any) => {	15✔
104	const cleanPattern = new RegExp(`[^-+0-9${this.decimalSeparator}]`, 'g');	×
105	const cleaned = event.target.value.replace(cleanPattern, '');	×
106	const normalized = cleaned.replace(this.decimalSeparator, '.');	×
107
108	if (normalized === '') {	×
109	return undefined;	×
110	}
111
112	// convert to number
113	const number = +normalized;	×
114	// if not a number just return the string
115	if (Number.isNaN(number)) {	×
116	return event.target.value;	×
117	}
118	return number;	×
119	};
120
121	getValue = () => {	15✔
122	if (this.data !== undefined && this.data !== null) {	73✔
123	if (typeof this.data === 'number') {	67!
124	return this.numberFormat.format(this.data);	67✔
125	}
126	return this.data;	×
127	}
128	return '';	6✔
129	};
130
131	mapAdditionalProps(props: StatePropsOfControl) {	1✔
132	if (this.scopedSchema) {	38!
133	const testerContext = {	38✔
134	rootSchema: this.rootSchema,
135	config: props.config,
136	};
137	const defaultStep = isNumberControl(	38✔
138	this.uischema,
139	this.rootSchema,
140	testerContext
141	)
142	? 0.1	38✔
143	: 1;
144	this.min = this.scopedSchema.minimum;	38✔
145	this.max = this.scopedSchema.maximum;	38✔
146	this.multipleOf = this.scopedSchema.multipleOf \|\| defaultStep;	38✔
147	const appliedUiSchemaOptions = merge(	38✔
148	{},
149	props.config,
150	this.uischema.options
151	);
152	const currentLocale = this.jsonFormsService.getLocale();	38✔
153	if (this.locale === undefined \|\| this.locale !== currentLocale) {	38✔
154	this.locale = currentLocale;	15✔
155	this.numberFormat = new Intl.NumberFormat(this.locale, {	15✔
156	useGrouping: appliedUiSchemaOptions.useGrouping,
157	maximumFractionDigits: this.MAXIMUM_FRACTIONAL_DIGITS,
158	});
159	this.determineDecimalSeparator();	15✔
160	this.oldValue = this.getValue();	15✔
161	}
162	this.form.setValue(this.getValue());	38✔
163	}
164	}
165
166	private determineDecimalSeparator(): void {	1✔
167	const example = this.numberFormat.format(1.1);	15✔
168	this.decimalSeparator = example.charAt(1);	15✔
169	}
170	}	1✔
171	export const NumberControlRendererTester: RankedTester = rankWith(	1✔
172	2,
173	or(isNumberControl, isIntegerControl)
174	);

eclipsesource / jsonforms / 5679494411

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous