antd-mobile 5.0.0-rc.23 → 5.0.0-rc.24

package/es/components/text-area/text-area.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur'> & {
+export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd'> & {
     onChange?: (val: string) => void;
     value?: string;
     defaultValue?: string;
@@ -20,7 +20,7 @@ export declare type TextAreaRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "onFocus" | "onBlur" | "autoComplete" | "readOnly"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;

package/es/components/text-area/text-area.js

@@ -1,6 +1,5 @@
-import { __rest } from "tslib";
 import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 const classPrefix = 'adm-text-area';
@@ -12,19 +11,11 @@ const defaultProps = {
 };
 export const TextArea = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
-
   const {
-    className,
-    style,
-    defaultValue: outerDefaultValue,
-    value: outerValue,
-    onChange: outerOnChange,
-    rows: rows,
-    autoSize: autoSize,
-    showCount
-  } = props,
-        textAreaProps = __rest(props, ["className", "style", "defaultValue", "value", "onChange", "rows", "autoSize", "showCount"]);
-
+    autoSize,
+    showCount,
+    maxLength
+  } = props;
   const [value, setValue] = usePropsValue(props);
   const nativeTextAreaRef = useRef(null);
   useImperativeHandle(ref, () => ({
@@ -64,39 +55,57 @@ export const TextArea = forwardRef((p, ref) => {
 
     textArea.style.height = `${height}px`;
   }, [value, autoSize]);
+  const compositingRef = useRef(false);
   let count;
+  const valueLength = [...value].length;
 
   if (typeof showCount === 'function') {
-    count = showCount(value.length, props.maxLength);
+    count = showCount(valueLength, maxLength);
   } else if (showCount) {
     count = React.createElement("div", {
       className: `${classPrefix}-count`
-    }, props.maxLength === undefined ? value.length : value.length + '/' + props.maxLength);
+    }, maxLength === undefined ? valueLength : valueLength + '/' + maxLength);
   }
 
-  return React.createElement("div", {
-    className: classNames(`${classPrefix}-wrapper`, className),
-    style: style
-  }, React.createElement("textarea", Object.assign({
-    ref: nativeTextAreaRef
-  }, textAreaProps, {
-    className: classPrefix,
-    rows: rows,
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, React.createElement("textarea", {
+    ref: nativeTextAreaRef,
+    className: `${classPrefix}-element`,
+    rows: props.rows,
     value: value,
     onChange: e => {
-      setValue(e.target.value);
+      let v = e.target.value;
+
+      if (maxLength && !compositingRef.current) {
+        v = [...v].slice(0, maxLength).join('');
+      }
+
+      setValue(v);
     },
-    onFocus: e => {
+    id: props.id,
+    onCompositionStart: e => {
       var _a;
 
-      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      compositingRef.current = true;
+      (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    onBlur: e => {
+    onCompositionEnd: e => {
       var _a;
 
-      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      compositingRef.current = false;
+
+      if (maxLength) {
+        setValue([...value].slice(0, maxLength).join(''));
+      }
+
+      (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    id: props.id
-  })), count);
+    autoComplete: props.autoComplete,
+    disabled: props.disabled,
+    readOnly: props.readOnly,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur
+  }), count));
 });
 TextArea.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.0.0-rc.23",
+  "version": "5.0.0-rc.24",
   "dependencies": {
     "@react-spring/web": "^9.4.2",
     "@types/resize-observer-browser": "^0.1.6",