Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(kit): Number supports new configurable parameter minusSign #1118

Merged
merged 33 commits into from
Mar 7, 2024
Merged
Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
f23cef5
feat(kit): added support of custom minus sign for number
Mar 4, 2024
a187ea2
fix(demo): added minusSign property with default value CHAR_MINUS
Mar 4, 2024
c94d0d7
docs(demo): added component and mask for minusSign documentation
Mar 4, 2024
8cc911e
docs(demo): added minusSign example to docs page
Mar 4, 2024
a845be8
docs(demo): added initianl value for custom minus sign example
Mar 4, 2024
1ca1a35
docs(demo): added minus sign to api docs
Mar 4, 2024
b990735
test(kit): added unit tests for minus sign
Mar 4, 2024
2129290
test(demo-integrations): added e2e tests for number minus sign prop
Mar 4, 2024
b512ab0
fix(demo): incorrectly spelled word corrected
Mar 4, 2024
ab80b15
refactor(kit): replaced defenition of pseudoMinus
Mar 4, 2024
4ded341
docs(demo): changed minus sign of the example, and refactored example…
Mar 4, 2024
9c8856e
refactor(demo): added readonly modifer for options
Mar 4, 2024
c2f9bf0
refactor(demo): refactored mask.ts and component.ts to be as all othe…
Mar 4, 2024
e8ec10a
refactor(kit): added using constants in unit tests
Mar 4, 2024
9c0efc6
refactor(demo-integrations): added using constants in CT
Mar 4, 2024
9a06e71
test(demo-integrations): added using unicode constats
Mar 4, 2024
4fdce96
fix(kit): fixed trailing whitespace with not CHAR_MINUS as minus(i=mi…
Mar 5, 2024
ac55a1f
test(kit): refactored unit tests
Mar 5, 2024
b7dac00
test(demo-integrations): refactored tests for custom minus sign in nu…
Mar 6, 2024
6174d05
refactor(demo): swaped 5th and 6th examples
Mar 6, 2024
72200c1
docs(demo): changed documentation for minus sign
Mar 6, 2024
c8182e0
refactor(kit): removed minusSign from pseudoMinuses and type annotati…
Mar 6, 2024
1e3276e
docs(demo): changed import of CHAR_MINUS and deleted importing component
Mar 6, 2024
957f8e9
fix(demo): swaped example inputs
Mar 6, 2024
a477de0
docs(demo): added tuiLinkModule for number example
Mar 6, 2024
a6e5479
refactor(demo): changed width of minus example input
Mar 6, 2024
0fb5728
fix(kit): fixed error with parsing min-max value with custom minus
Mar 6, 2024
2a222bd
test(kit): added test with custom minus and min value
Mar 6, 2024
8a3b3f7
test(demo-integrations): added e2e tests for min value with custom minus
Mar 7, 2024
c1ea145
test(demo-integrations): refactored first block of tests, and added s…
Mar 7, 2024
9a158ee
test(demo-integrations): refactored encodeing chars for queryString
Mar 7, 2024
8ee9d04
fix(demo): fixed conflict in number-mask-doc.component.ts
Mar 7, 2024
c5cf0a0
chore: apply changes after linting [bot]
taiga-family-bot Mar 7, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import {CHAR_EN_DASH, CHAR_HYPHEN, CHAR_JP_HYPHEN} from 'projects/kit/src/lib/constants';

import {openNumberPage} from './utils';

describe('Properly using custom minus sign', () => {
describe(`correctly applies ${CHAR_HYPHEN} as minus sign`, () => {
beforeEach(() => {
openNumberPage(`minusSign=${CHAR_HYPHEN}&thousandSeparator=_`);
});

it(`-32412 => ${CHAR_HYPHEN}32_412`, () => {
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
cy.get('@input').type('-32412').should('have.value', `${CHAR_HYPHEN}32_412`);
});

it(`${CHAR_HYPHEN}32412 => ${CHAR_HYPHEN}32_412`, () => {
cy.get('@input').type('-32412').should('have.value', `${CHAR_HYPHEN}32_412`);
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
});

it(`${CHAR_JP_HYPHEN}32412 => ${CHAR_HYPHEN}32_412`, () => {
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
cy.get('@input')
.type(`${CHAR_JP_HYPHEN}32412`)
.should('have.value', `${CHAR_HYPHEN}32_412`);
});

it(`${CHAR_EN_DASH}32412 => ${CHAR_HYPHEN}32_412`, () => {
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
cy.get('@input')
.type(`${CHAR_EN_DASH}32412`)
.should('have.value', `${CHAR_HYPHEN}32_412`);
});
});

describe('correctly works with decimal, and minus sign is i', () => {
beforeEach(() => {
openNumberPage('minusSign=i&precision=Infinity&thousandSeparator=_');
});

it('-324,12 => i_324.12', () => {
cy.get('@input').type('-324,12').should('have.value', 'i_324.12');
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
});

it(`${CHAR_HYPHEN}324,12 => i_324.12`, () => {
cy.get('@input')
.type(`${CHAR_HYPHEN}324,12`)
.should('have.value', 'i_324.12');
});

it(`${CHAR_JP_HYPHEN}324,12 => i_324.12`, () => {
cy.get('@input')
.type(`${CHAR_JP_HYPHEN}324,12`)
.should('have.value', 'i_324.12');
});

it(`${CHAR_EN_DASH}324,12 => i_324.12`, () => {
cy.get('@input')
.type(`${CHAR_EN_DASH}324,12`)
.should('have.value', 'i_324.12');
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {MaskitoDirective} from '@maskito/angular';
import {TuiTextfieldControllerModule} from '@taiga-ui/core';
import {TuiInputModule} from '@taiga-ui/kit';

import mask from './mask';

@Component({
standalone: true,
selector: 'number-mask-doc-example-6',
imports: [
TuiInputModule,
TuiTextfieldControllerModule,
MaskitoDirective,
FormsModule,
],
template: `
<tui-input
[tuiTextfieldLabelOutside]="true"
[(ngModel)]="value"
>
<input
tuiTextfield
[maskito]="options"
/>
</tui-input>
`,
})
export class NumberMaskDocExample6 {
protected value = '-42';
protected readonly options = mask;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import {maskitoNumberOptionsGenerator} from '@maskito/kit';

export default maskitoNumberOptionsGenerator({
minusSign: '-',
thousandSeparator: '',
});
13 changes: 13 additions & 0 deletions projects/demo/src/pages/kit/number/number-mask-doc.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@ import {
import {TuiAddonDocModule, TuiDocExample} from '@taiga-ui/addon-doc';
import {TuiNotificationModule} from '@taiga-ui/core';
import {tuiInputCountOptionsProvider, TuiInputModule} from '@taiga-ui/kit';
import {CHAR_MINUS} from 'projects/kit/src/lib/constants';
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved

import {NumberMaskDocExample1} from './examples/1-high-precision/component';
import {NumberMaskDocExample2} from './examples/2-separators/component';
import {NumberMaskDocExample3} from './examples/3-postfix/component';
import {NumberMaskDocExample4} from './examples/4-decimal-zero-padding/component';
import {NumberMaskDocExample5} from './examples/5-dynamic-decimal-zero-padding/component';
import {NumberMaskDocExample6} from './examples/6-custom-minus-sign/components';

type GeneratorOptions = Required<
NonNullable<Parameters<typeof maskitoNumberOptionsGenerator>[0]>
Expand All @@ -37,6 +39,7 @@ type GeneratorOptions = Required<
NumberMaskDocExample3,
NumberMaskDocExample4,
NumberMaskDocExample5,
NumberMaskDocExample6,
],
templateUrl: './number-mask-doc.template.html',
changeDetection: ChangeDetectionStrategy.OnPush,
Expand Down Expand Up @@ -78,6 +81,15 @@ export class NumberMaskDocComponent implements GeneratorOptions {
),
};

protected readonly customMinusSignExample6: TuiDocExample = {
[DocExamplePrimaryTab.MaskitoOptions]: import(
'./examples/6-custom-minus-sign/mask.ts?raw'
),
[DocExamplePrimaryTab.Angular]: import(
'./examples/6-custom-minus-sign/components.ts?raw'
),
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
};

protected apiPageControl = new FormControl('');

protected readonly decimalPseudoSeparatorsOptions = [
Expand All @@ -97,6 +109,7 @@ export class NumberMaskDocComponent implements GeneratorOptions {
public thousandSeparator = ' ';
public prefix = '';
public postfix = '';
public minusSign = CHAR_MINUS;

protected maskitoOptions: MaskitoOptions = this.calculateMask(this);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,28 @@
</ng-template>
<number-mask-doc-example-5></number-mask-doc-example-5>
</tui-doc-example>

<tui-doc-example
id="minus-sign"
heading="Minus sign"
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
[content]="customMinusSignExample6"
[description]="customMinusSignDescription"
>
<ng-template #customMinusSignDescription>
<p>
You can use
<code>minusSign</code>
option for your convenience in working with negative numbers.
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
</p>
<p>
In this example
<code>Hyphen-Minus</code>
is used as
<code>minusSign</code>
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
</p>
</ng-template>
<number-mask-doc-example-6></number-mask-doc-example-6>
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
</tui-doc-example>
</ng-template>

<ng-template pageTab>
Expand Down Expand Up @@ -286,6 +308,20 @@
empty string (no postfix).
</p>
</ng-template>
<ng-template
documentationPropertyMode="input"
documentationPropertyName="minusSign"
documentationPropertyType="string"
[(documentationPropertyValue)]="minusSign"
(documentationPropertyValueChange)="updateOptions()"
>
A minus symbol.

<p>
<strong>Default:</strong>
<code>\u2212</code>
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
</p>
</ng-template>
</tui-doc-documentation>
</ng-template>
</tui-doc-page>
15 changes: 12 additions & 3 deletions projects/kit/src/lib/masks/number/number-mask.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export function maskitoNumberOptionsGenerator({
decimalZeroPadding = false,
prefix: unsafePrefix = '',
postfix = '',
minusSign = CHAR_MINUS,
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
}: {
min?: number;
max?: number;
Expand All @@ -53,13 +54,19 @@ export function maskitoNumberOptionsGenerator({
thousandSeparator?: string;
prefix?: string;
postfix?: string;
minusSign?: string;
} = {}): Required<MaskitoOptions> {
const pseudoMinuses = [
const pseudoMinuses: string[] = [
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
CHAR_HYPHEN,
CHAR_EN_DASH,
CHAR_EM_DASH,
CHAR_JP_HYPHEN,
].filter(char => char !== thousandSeparator && char !== decimalSeparator);
CHAR_MINUS,
minusSign,
].filter(
char =>
char !== thousandSeparator && char !== decimalSeparator && char !== minusSign,
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
);
const validatedDecimalPseudoSeparators = validateDecimalPseudoSeparators({
decimalSeparator,
thousandSeparator,
Expand All @@ -79,6 +86,7 @@ export function maskitoNumberOptionsGenerator({
prefix,
postfix,
isNegativeAllowed: min < 0,
minusSign,
}),
preprocessors: [
createFullWidthToHalfWidthPreprocessor(),
Expand All @@ -88,10 +96,11 @@ export function maskitoNumberOptionsGenerator({
pseudoMinuses,
prefix,
postfix,
minusSign,
}),
createAffixesFilterPreprocessor({prefix, postfix}),
createPseudoCharactersPreprocessor({
validCharacter: CHAR_MINUS,
validCharacter: minusSign,
pseudoCharacters: pseudoMinuses,
prefix,
postfix,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@ export function createInitializationOnlyPreprocessor({
pseudoMinuses,
prefix,
postfix,
minusSign,
}: {
decimalSeparator: string;
decimalPseudoSeparators: readonly string[];
pseudoMinuses: readonly string[];
prefix: string;
postfix: string;
minusSign: string;
}): MaskitoPreprocessor {
let isInitializationPhase = true;
const cleanNumberMask = generateMaskExpression({
Expand All @@ -36,6 +38,7 @@ export function createInitializationOnlyPreprocessor({
thousandSeparator: '',
precision: Infinity,
isNegativeAllowed: true,
minusSign,
});

return ({elementState, data}) => {
Expand Down
55 changes: 54 additions & 1 deletion projects/kit/src/lib/masks/number/tests/number-mask.spec.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import {MASKITO_DEFAULT_OPTIONS, MaskitoOptions, maskitoTransform} from '@maskito/core';
import {maskitoParseNumber} from '@maskito/kit';

import {CHAR_NO_BREAK_SPACE, CHAR_ZERO_WIDTH_SPACE} from '../../../constants';
import {
CHAR_EN_DASH,
CHAR_HYPHEN,
CHAR_NO_BREAK_SPACE,
CHAR_ZERO_WIDTH_SPACE,
} from '../../../constants';
import {maskitoNumberOptionsGenerator} from '../number-mask';

describe('Number (maskitoTransform)', () => {
Expand Down Expand Up @@ -318,4 +323,52 @@ describe('Number (maskitoTransform)', () => {
});
});
});

describe('applies `minusSign` property correctly', () => {
let options = MASKITO_DEFAULT_OPTIONS;

describe('correctly applies ⁻ as minus sign', () => {
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
beforeEach(() => {
options = maskitoNumberOptionsGenerator({minusSign: '⁻'});
});

it('-32412 => ⁻32 412', () => {
expect(maskitoTransform('-32412', options)).toBe('⁻32 412');
});

it(`${CHAR_HYPHEN}32413 => ⁻32 413`, () => {
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
expect(maskitoTransform(`${CHAR_HYPHEN}32413`, options)).toBe('⁻32 413');
});
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved

it('-32411 => ⁻32 411', () => {
expect(maskitoTransform('-32411', options)).toBe('⁻32 411');
});

it(`${CHAR_EN_DASH}32411 => ⁻32 411`, () => {
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
expect(maskitoTransform(`${CHAR_EN_DASH}32411`, options)).toBe('⁻32 411');
});
});

describe('correctly applies i as minus sign', () => {
beforeEach(() => {
options = maskitoNumberOptionsGenerator({minusSign: 'i'});
});

it('-32412 => i32 412', () => {
expect(maskitoTransform('-32412', options)).toBe('i32 412');
});

it(`${CHAR_HYPHEN}32413 => i32 413`, () => {
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
expect(maskitoTransform(`${CHAR_HYPHEN}32413`, options)).toBe('i32 413');
});

it('-32411 => i32 411', () => {
expect(maskitoTransform('-32411', options)).toBe('i32 411');
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
});

it(`${CHAR_EN_DASH}32411 => i32 411`, () => {
KrollikRoddzer marked this conversation as resolved.
Show resolved Hide resolved
expect(maskitoTransform(`${CHAR_EN_DASH}32411`, options)).toBe('i32 411');
});
});
});
});
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {MaskitoMask} from '@maskito/core';

import {CHAR_MINUS} from '../../../constants';
import {escapeRegExp} from '../../../utils';

export function generateMaskExpression({
Expand All @@ -12,6 +11,7 @@ export function generateMaskExpression({
postfix,
decimalPseudoSeparators = [],
pseudoMinuses = [],
minusSign,
}: {
decimalSeparator: string;
isNegativeAllowed: boolean;
Expand All @@ -21,11 +21,12 @@ export function generateMaskExpression({
postfix: string;
decimalPseudoSeparators?: readonly string[];
pseudoMinuses?: readonly string[];
minusSign: string;
}): MaskitoMask {
const computedPrefix = computeAllOptionalCharsRegExp(prefix);
const digit = '\\d';
const optionalMinus = isNegativeAllowed
? `[${CHAR_MINUS}${pseudoMinuses.map(x => `\\${x}`).join('')}]?`
? `[${minusSign}${pseudoMinuses.map(x => `\\${x}`).join('')}]?`
: '';
const integerPart = thousandSeparator
? `[${digit}${escapeRegExp(thousandSeparator).replaceAll(/\s/g, '\\s')}]*`
Expand Down
Loading