feat(web): x-input && x-textarea add attribute input-filter, which ca…

.changeset/plenty-hoops-brake.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+feat: x-input && x-textarea add attribute input-filter, which can filter input value.

packages/web-platform/web-elements/src/XInput/XInputEvents.ts

@@ -15,7 +15,7 @@ import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-re
 export class XInputEvents
   implements InstanceType<AttributeReactiveClass<typeof HTMLElement>>
 {
-  static observedAttributes = ['send-composing-input'];
+  static observedAttributes = ['send-composing-input', 'input-filter'];
   #dom: HTMLElement;
 
   #sendComposingInput = false;
@@ -29,8 +29,9 @@ export class XInputEvents
     '#form',
   );
 
+  @registerAttributeHandler('input-filter', true)
   @registerEventEnableStatusChangeHandler('input')
-  #handleEnableInputEvent(status: boolean) {
+  #handleEnableInputEvent(status: boolean | string | null) {
     const input = this.#getInputElement();
     if (status) {
       input.addEventListener(
@@ -74,16 +75,20 @@ export class XInputEvents
 
   #teleportInput = (event: InputEvent) => {
     const input = this.#getInputElement();
-    const value = input.value;
+    const inputFilter = this.#dom.getAttribute('input-filter');
+    const filterValue = inputFilter
+      ? input.value.replace(new RegExp(inputFilter, 'g'), '')
+      : input.value;
     const isComposing = event.isComposing;
+    input.value = filterValue;
     if (isComposing && !this.#sendComposingInput) return;
     this.#dom.dispatchEvent(
       new CustomEvent('input', {
         ...commonComponentEventSetting,
         detail: {
-          value,
+          value: filterValue,
           /** @deprecated */
-          textLength: value.length,
+          textLength: filterValue.length,
           /** @deprecated */
           cursor: input.selectionStart,
           isComposing,
@@ -96,16 +101,20 @@ export class XInputEvents
 
   #teleportCompositionendInput = () => {
     const input = this.#getInputElement();
-    const value = input.value;
+    const inputFilter = this.#dom.getAttribute('input-filter');
+    const filterValue = inputFilter
+      ? input.value.replace(new RegExp(inputFilter, 'g'), '')
+      : input.value;
+    input.value = filterValue;
     // if #sendComposingInput set true, #teleportInput will send detail
     if (!this.#sendComposingInput) {
       this.#dom.dispatchEvent(
         new CustomEvent('input', {
           ...commonComponentEventSetting,
           detail: {
-            value,
+            value: filterValue,
             /** @deprecated */
-            textLength: value.length,
+            textLength: filterValue.length,
             /** @deprecated */
             cursor: input.selectionStart,
             isComposing: false,

packages/web-platform/web-elements/src/XTextarea/XTextareaEvents.ts

@@ -15,7 +15,7 @@ import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-re
 export class XTextareaEvents
   implements InstanceType<AttributeReactiveClass<typeof HTMLElement>>
 {
-  static observedAttributes = ['send-composing-input'];
+  static observedAttributes = ['send-composing-input', 'input-filter'];
   #dom: HTMLElement;
 
   #sendComposingInput = false;
@@ -29,8 +29,9 @@ export class XTextareaEvents
     '#form',
   );
 
+  @registerAttributeHandler('input-filter', true)
   @registerEventEnableStatusChangeHandler('input')
-  #handleEnableConfirmEvent(status: boolean) {
+  #handleEnableConfirmEvent(status: string | boolean | null) {
     const textareaElement = this.#getTextareaElement();
     if (status) {
       textareaElement.addEventListener(
@@ -74,16 +75,20 @@ export class XTextareaEvents
 
   #teleportInput = (event: InputEvent) => {
     const input = this.#getTextareaElement();
-    const value = input.value;
+    const inputFilter = this.#dom.getAttribute('input-filter');
+    const filterValue = inputFilter
+      ? input.value.replace(new RegExp(inputFilter, 'g'), '')
+      : input.value;
     const isComposing = event.isComposing;
+    input.value = filterValue;
     if (isComposing && !this.#sendComposingInput) return;
     this.#dom.dispatchEvent(
       new CustomEvent('input', {
         ...commonComponentEventSetting,
         detail: {
-          value,
+          value: filterValue,
           /** @deprecated */
-          textLength: value.length,
+          textLength: filterValue.length,
           /** @deprecated */
           cursor: input.selectionStart,
           isComposing,
@@ -96,16 +101,20 @@ export class XTextareaEvents
 
   #teleportCompositionendInput = () => {
     const input = this.#getTextareaElement();
-    const value = input.value;
+    const inputFilter = this.#dom.getAttribute('input-filter');
+    const filterValue = inputFilter
+      ? input.value.replace(new RegExp(inputFilter, 'g'), '')
+      : input.value;
+    input.value = filterValue;
     // if #sendComposingInput set true, #teleportInput will send detail
     if (!this.#sendComposingInput) {
       this.#dom.dispatchEvent(
         new CustomEvent('input', {
           ...commonComponentEventSetting,
           detail: {
-            value,
+            value: filterValue,
             /** @deprecated */
-            textLength: value.length,
+            textLength: filterValue.length,
             /** @deprecated */
             cursor: input.selectionStart,
             isComposing: false,

packages/web-platform/web-tests/tests/react.spec.ts

@@ -21,7 +21,7 @@
     ReturnType<typeof expect<Page>>['toHaveScreenshot']
   >[0],
 ) => {
   await expect(page).toHaveScreenshot([
     `${caseName}`,
     `${subcaseName}`,
     `${label}.png`,
@@ -35,7 +35,7 @@
 
 const expectHasText = async (page: Page, text: string) => {
   const hasText = (await page.getByText(text).count()) === 1;
   await expect(hasText).toBe(true);
 };
 
 const expectNoText = async (page: Page, text: string) => {
@@ -631,7 +631,7 @@
         document.querySelector('lynx-view')!.remove();
       });
       await wait(50);
       expect(message).toContain('fin');
       expect(page.workers().length).toStrictEqual(1);
     });
 
@@ -979,7 +979,7 @@
         globalThis.lynxView.sendGlobalEvent('event-test', ['change']);
       });
       await wait(200);
       await expect(target).toHaveCSS(
         'background-color',
         'rgb(0, 128, 0)',
       ); // green;
@@ -2169,7 +2169,7 @@
           await page.locator('.focus').click({ force: true });
           await wait(100);
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('bindfocus');
         },
       );
       // input/focus test-case end
@@ -2192,7 +2192,7 @@
         await page.locator('input').press('Enter');
         await wait(100);
         const result = await page.locator('.result').first().innerText();
         expect(result).toBe('bindconfirm');
       });
       // input/bindconfirm test-case end
 
@@ -2258,9 +2258,21 @@
             inputDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
+      test(
+        'basic-element-x-input-input-filter',
+        async ({ page }, { title }) => {
+          await goto(page, title);
+          await page.locator('input').press('Enter');
+          await wait(200);
+          await page.locator('input').fill('foobar!@#)');
+          await wait(200);
+          const result = await page.locator('.result').first().innerText();
+          expect(result).toBe('foobar');
+        },
+      );
     });
     test.describe('x-overlay-ng', () => {
       test('basic-element-x-overlay-ng-demo', async ({ page }, { title }) => {
@@ -3575,9 +3587,22 @@
             textareaDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
+
+      test(
+        'basic-element-x-textarea-input-filter',
+        async ({ page }, { title }) => {
+          await goto(page, title);
+          await page.locator('textarea').press('Enter');
+          await wait(200);
+          await page.locator('textarea').fill('foobar!@#)');
+          await wait(200);
+          const result = await page.locator('.result').first().innerText();
+          expect(result).toBe('foobar');
+        },
+      );
     });
     test.describe('x-audio-tt', () => {
       test('basic-element-x-audio-tt-play', async ({ page }, { title }) => {

packages/web-platform/web-tests/tests/react/basic-element-x-input-input-filter/index.jsx

@@ -0,0 +1,37 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root, useState } from '@lynx-js/react';
+
+function App() {
+  const value = 'bindinput';
+  const [result, setResult] = useState();
+
+  const onInput = ({ detail }) => {
+    const { value, cursor, textLength } = detail;
+
+    if (value.length !== textLength) {
+      throw new Error(
+        `input length not match. expect ${textLength}, got ${value.length}`,
+      );
+    }
+
+    setResult(value);
+  };
+
+  return (
+    <view>
+      <x-input
+        bindinput={onInput}
+        value={value}
+        style='border: 1px solid;width: 300px;height:40px'
+        input-filter='[^a-zA-Z0-9]'
+      />
+      <view class='result'>
+        <text>{result}</text>
+      </view>
+    </view>
+  );
+}
+
+root.render(<App></App>);

packages/web-platform/web-tests/tests/react/basic-element-x-textarea-input-filter/index.jsx

@@ -0,0 +1,37 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { useState, root, useEffect } from '@lynx-js/react';
+
+function App() {
+  const value = 'bindinput';
+  const [result, setResult] = useState();
+
+  const onInput = ({ detail }) => {
+    const { value, cursor, textLength } = detail;
+
+    if (value.length !== textLength) {
+      throw new Error(
+        `input length not match. expect ${textLength}, got ${value.length}`,
+      );
+    }
+
+    setResult(value);
+  };
+
+  return (
+    <view class='page'>
+      <x-textarea
+        bindinput={onInput}
+        value={value}
+        style='border: 1px solid;width: 300px;height:40px'
+        input-filter='[^a-zA-Z0-9]'
+      />
+      <view class='result'>
+        <text>{result}</text>
+      </view>
+    </view>
+  );
+}
+
+root.render(<App />);