taiga-family · nsbarsukov · Sep 12, 2023 · Sep 11, 2023
@@ -112,7 +112,7 @@ jobs:
         # Replace with npm run cy:run -- --spec "**/!(kit|recipes)/*.cy.ts" --config baseUrl="${{ env.UNIVERSAL_SERVER }}"
         # After this issue fix: https://github.com/cypress-io/cypress/issues/22407
         run:
-          npm run cy:run -- --spec "**/(angular|ssr|addons|others)/**/*.cy.ts" --config baseUrl="${{
+          npm run cy:run -- --spec "**/(angular|react|ssr|addons|others)/**/*.cy.ts" --config baseUrl="${{
           env.UNIVERSAL_SERVER }}"
 concurrency:
   group: e2e-${{ github.workflow }}-${{ github.ref }}

@@ -0,0 +1,29 @@
+import {DemoPath} from '@demo/constants';
+
+describe('@maskito/react | Element Predicate', () => {
+    describe('Sync predicate works', () => {
+        beforeEach(() => {
+            cy.visit(DemoPath.React);
+            cy.get('#awesome-input-wrapper input.real-input')
+                .scrollIntoView()
+                .should('be.visible')
+                .as('input');
+        });
+
+        it('rejects invalid characters', () => {
+            cy.get('@input').type('abc12def').should('have.value', '12');
+        });
+
+        it('accepts valid input', () => {
+            cy.get('@input').type('12.09.2023').should('have.value', '12.09.2023');
+        });
+
+        it('automatically adds fixed characters', () => {
+            cy.get('@input').type('12092023').should('have.value', '12.09.2023');
+        });
+
+        it('automatically pads day / month segments with zeroes for large digits', () => {
+            cy.get('@input').type('992023').should('have.value', '09.09.2023');
+        });
+    });
+});
@@ -0,0 +1,19 @@
+import {forwardRef} from 'react';
+
+const hiddenInputStyles = {
+    display: 'none',
+};
+
+export const AwesomeInput = forwardRef<HTMLInputElement>((props, ref) => (
+    <div
+        id="awesome-input-wrapper"
+        ref={ref}
+    >
+        <input style={hiddenInputStyles} />
+        <input
+            className="real-input"
+            {...props}
+        />
+        <input style={hiddenInputStyles} />
+    </div>
+));
@@ -0,0 +1,20 @@
+import {isPlatformBrowser} from '@angular/common';
+import {Component, ElementRef, Inject, PLATFORM_ID} from '@angular/core';
+import {createRoot} from 'react-dom/client';
+
+import {App} from './index';
+
+@Component({
+    selector: 'react-example-2',
+    template: '',
+    host: {
+        'comment-for-devtools': 'Everything inside this tag is really rendered by `react-dom` library',
+    },
+})
+export class ReactExample2 {
+    constructor(elementRef: ElementRef, @Inject(PLATFORM_ID) platformId: Record<string, unknown>) {
+        if (isPlatformBrowser(platformId)) {
+            createRoot(elementRef.nativeElement).render(<App />);
+        }
+    }
+}
@@ -0,0 +1,23 @@
+// @ts-nocheck React & Vue Global JSX Types Conflicts
+import type {MaskitoElementPredicate} from '@maskito/core';
+import {maskitoDateOptionsGenerator} from '@maskito/kit';
+import {useMaskito} from '@maskito/react';
+
+import {AwesomeInput} from './awesome-input';
+
+const options = maskitoDateOptionsGenerator({
+    mode: 'dd/mm/yyyy',
+});
+
+const elementPredicate: MaskitoElementPredicate = host => host.querySelector('input.real-input')!;
+
+export const App = () => {
+    const inputRef = useMaskito({options, elementPredicate});
+
+    return (
+        <AwesomeInput
+            ref={inputRef}
+            placeholder="Enter date"
+        />
+    );
+};
@@ -1,5 +1,8 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {DemoPath} from '@demo/constants';
+import {RawLoaderContent} from '@taiga-ui/addon-doc';
+
+const DROP_TS_NO_CHECK_REG = /\/\/\s@ts-nocheck[^\n]+\n/;
 
 @Component({
     selector: 'react-doc-page',
@@ -9,10 +12,20 @@ import {DemoPath} from '@demo/constants';
 export class ReactDocPageComponent {
     readonly coreConceptsOverviewDocPage = `/${DemoPath.CoreConceptsOverview}`;
     readonly useMaskitoBasicUsage = import(
-        './examples/use-maskito-basic-usage/use-maskito-basic-usage.tsx?raw'
+        './examples/1-use-maskito-basic-usage/use-maskito-basic-usage.tsx?raw'
     );
 
-    readonly queryNestedInputDemo = import('./examples/query-nested-input.md?raw');
+    readonly elementPredicateExample: Record<string, RawLoaderContent> = {
+        'index.tsx': import('./examples/2-element-predicate/index.tsx?raw').then(m => ({
+            // See: https://github.com/vuejs/core/issues/1033#issuecomment-1340309622
+            // TODO: Check if it still required after upgrade Vue to 3.4 (https://github.com/vuejs/core/pull/7958)
+            default: m.default.replace(DROP_TS_NO_CHECK_REG, ''),
+        })),
+        'awesome-input.tsx': import(
+            './examples/2-element-predicate/awesome-input.tsx?raw'
+        ),
+    };
+
     readonly controlledInputDemo = import('./examples/controlled-input.md?raw');
     readonly bestBadPractice = import('./examples/best-bad-practice.md?raw');
 }
@@ -6,7 +6,8 @@ import {MaskitoModule} from '@maskito/angular';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 
-import {ReactExample1} from './examples/use-maskito-basic-usage/example.component';
+import {ReactExample1} from './examples/1-use-maskito-basic-usage/example.component';
+import {ReactExample2} from './examples/2-element-predicate/example.component';
 import {ReactDocPageComponent} from './react-doc.component';
 
 @NgModule({
@@ -20,7 +21,7 @@ import {ReactDocPageComponent} from './react-doc.component';
         TuiNotificationModule,
         RouterModule.forChild(tuiGenerateRoutes(ReactDocPageComponent)),
     ],
-    declarations: [ReactDocPageComponent, ReactExample1],
+    declarations: [ReactDocPageComponent, ReactExample1, ReactExample2],
     exports: [ReactDocPageComponent],
 })
 export class ReactDocPageModule {}
@@ -52,7 +52,7 @@ <h2>Query nested input element</h2>
 
         <p>
             Pass a predicate to
-            <strong>elementPredicate</strong>
+            <code>elementPredicate</code>
             to find input element for you, if you do not have a direct access to it. For example, you use component from
             some UI Kit library.
         </p>
@@ -65,7 +65,12 @@ <h2>Query nested input element</h2>
             so that might be sufficient. Use custom predicate if you need custom logic.
         </tui-notification>
 
-        <tui-doc-code [code]="queryNestedInputDemo"></tui-doc-code>
+        <tui-doc-example
+            [content]="elementPredicateExample"
+            [style.padding-top.px]="0"
+        >
+            <react-example-2></react-example-2>
+        </tui-doc-example>
     </section>
 
     <section class="tui-space_top-12">