@douyinfe/semi-ui 2.27.1-alpha.0 → 2.27.1

package/lib/cjs/carousel/index.d.ts

@@ -14,7 +14,7 @@ export interface CarouselState {
 declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     static propTypes: {
         activeIndex: PropTypes.Requireable<number>;
-        animation: PropTypes.Requireable<"fade" | "slide">;
+        animation: PropTypes.Requireable<"slide" | "fade">;
         arrowProps: PropTypes.Requireable<object>;
         autoPlay: PropTypes.Requireable<NonNullable<boolean | object>>;
         className: PropTypes.Requireable<string>;

package/lib/cjs/dropdown/dropdownItem.d.ts

@@ -17,7 +17,7 @@ export interface DropdownItemProps extends BaseProps {
     icon?: React.ReactNode;
     onKeyDown?: (e: React.KeyboardEvent) => void;
     showTick?: boolean;
-    /** 内部属性不建议使用  */
+    /** internal prop, please do not use  */
     hover?: boolean;
 }
 declare class DropdownItem extends BaseComponent<DropdownItemProps> {

package/lib/cjs/form/hoc/withField.js

@@ -133,7 +133,8 @@ function withField(Component, opts) {
     const [status, setStatus] = (0, _react.useState)(validateStatus); // use props.validateStatus to init
 
     const rulesRef = (0, _react.useRef)(rules);
-    const validateRef = (0, _react.useRef)(validate); // notNotify is true means that the onChange of the Form does not need to be triggered
+    const validateRef = (0, _react.useRef)(validate);
+    const validatePromise = (0, _react.useRef)(null); // notNotify is true means that the onChange of the Form does not need to be triggered
     // notUpdate is true means that this operation does not need to trigger the forceUpdate
 
     const updateTouched = (isTouched, callOpts) => {
@@ -187,16 +188,24 @@ function withField(Component, opts) {
       const model = {
         [field]: val
       };
-      return new Promise((resolve, reject) => {
+      const rootPromise = new Promise((resolve, reject) => {
         validator.validate(model, {
           first: stopValidateWithError
         }, // eslint-disable-next-line @typescript-eslint/no-empty-function
         (errors, fields) => {}).then(res => {
-          // validation passed
+          if (validatePromise.current !== rootPromise) {
+            return;
+          } // validation passed
+
+
           setStatus('success');
           updateError(undefined, callOpts);
           resolve({});
         }).catch(err => {
+          if (validatePromise.current !== rootPromise) {
+            return;
+          }
+
           let {
             errors,
             fields
@@ -225,44 +234,55 @@ function withField(Component, opts) {
           }
         });
       });
+      validatePromise.current = rootPromise;
+      return rootPromise;
     }; // execute custom validate function
 
 
-    const _validate = (val, values, callOpts) => new Promise(resolve => {
-      let maybePromisedErrors; // let errorThrowSync;
+    const _validate = (val, values, callOpts) => {
+      const rootPromise = new Promise(resolve => {
+        let maybePromisedErrors; // let errorThrowSync;
 
-      try {
-        maybePromisedErrors = validateRef.current(val, values);
-      } catch (err) {
-        // error throw by syncValidate
-        maybePromisedErrors = err;
-      }
+        try {
+          maybePromisedErrors = validateRef.current(val, values);
+        } catch (err) {
+          // error throw by syncValidate
+          maybePromisedErrors = err;
+        }
+
+        if (maybePromisedErrors === undefined) {
+          resolve({});
+          updateError(undefined, callOpts);
+        } else if ((0, _isPromise.default)(maybePromisedErrors)) {
+          maybePromisedErrors.then(result => {
+            // If the async validate is outdated (a newer validate occurs), the result should be discarded
+            if (validatePromise.current !== rootPromise) {
+              return;
+            }
 
-      if (maybePromisedErrors === undefined) {
-        resolve({});
-        updateError(undefined, callOpts);
-      } else if ((0, _isPromise.default)(maybePromisedErrors)) {
-        maybePromisedErrors.then(result => {
-          if ((0, _utils.isValid)(result)) {
-            // validate success，no need to do anything with result
+            if ((0, _utils.isValid)(result)) {
+              // validate success，no need to do anything with result
+              updateError(undefined, callOpts);
+              resolve(null);
+            } else {
+              // validate failed
+              updateError(result, callOpts);
+              resolve(result);
+            }
+          });
+        } else {
+          if ((0, _utils.isValid)(maybePromisedErrors)) {
             updateError(undefined, callOpts);
             resolve(null);
           } else {
-            // validate failed
-            updateError(result, callOpts);
-            resolve(result);
+            updateError(maybePromisedErrors, callOpts);
+            resolve(maybePromisedErrors);
           }
-        });
-      } else {
-        if ((0, _utils.isValid)(maybePromisedErrors)) {
-          updateError(undefined, callOpts);
-          resolve(null);
-        } else {
-          updateError(maybePromisedErrors, callOpts);
-          resolve(maybePromisedErrors);
         }
-      }
-    });
+      });
+      validatePromise.current = rootPromise;
+      return rootPromise;
+    };
 
     const fieldValidate = (val, callOpts) => {
       let finalVal = val;

package/lib/es/carousel/index.d.ts

@@ -14,7 +14,7 @@ export interface CarouselState {
 declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     static propTypes: {
         activeIndex: PropTypes.Requireable<number>;
-        animation: PropTypes.Requireable<"fade" | "slide">;
+        animation: PropTypes.Requireable<"slide" | "fade">;
         arrowProps: PropTypes.Requireable<object>;
         autoPlay: PropTypes.Requireable<NonNullable<boolean | object>>;
         className: PropTypes.Requireable<string>;

package/lib/es/dropdown/dropdownItem.d.ts

@@ -17,7 +17,7 @@ export interface DropdownItemProps extends BaseProps {
     icon?: React.ReactNode;
     onKeyDown?: (e: React.KeyboardEvent) => void;
     showTick?: boolean;
-    /** 内部属性不建议使用  */
+    /** internal prop, please do not use  */
     hover?: boolean;
 }
 declare class DropdownItem extends BaseComponent<DropdownItemProps> {

package/lib/es/form/hoc/withField.js

@@ -108,7 +108,8 @@ function withField(Component, opts) {
     const [status, setStatus] = useState(validateStatus); // use props.validateStatus to init
 
     const rulesRef = useRef(rules);
-    const validateRef = useRef(validate); // notNotify is true means that the onChange of the Form does not need to be triggered
+    const validateRef = useRef(validate);
+    const validatePromise = useRef(null); // notNotify is true means that the onChange of the Form does not need to be triggered
     // notUpdate is true means that this operation does not need to trigger the forceUpdate
 
     const updateTouched = (isTouched, callOpts) => {
@@ -162,16 +163,24 @@ function withField(Component, opts) {
       const model = {
         [field]: val
       };
-      return new Promise((resolve, reject) => {
+      const rootPromise = new Promise((resolve, reject) => {
         validator.validate(model, {
           first: stopValidateWithError
         }, // eslint-disable-next-line @typescript-eslint/no-empty-function
         (errors, fields) => {}).then(res => {
-          // validation passed
+          if (validatePromise.current !== rootPromise) {
+            return;
+          } // validation passed
+
+
           setStatus('success');
           updateError(undefined, callOpts);
           resolve({});
         }).catch(err => {
+          if (validatePromise.current !== rootPromise) {
+            return;
+          }
+
           let {
             errors,
             fields
@@ -200,44 +209,55 @@ function withField(Component, opts) {
           }
         });
       });
+      validatePromise.current = rootPromise;
+      return rootPromise;
     }; // execute custom validate function
 
 
-    const _validate = (val, values, callOpts) => new Promise(resolve => {
-      let maybePromisedErrors; // let errorThrowSync;
+    const _validate = (val, values, callOpts) => {
+      const rootPromise = new Promise(resolve => {
+        let maybePromisedErrors; // let errorThrowSync;
 
-      try {
-        maybePromisedErrors = validateRef.current(val, values);
-      } catch (err) {
-        // error throw by syncValidate
-        maybePromisedErrors = err;
-      }
+        try {
+          maybePromisedErrors = validateRef.current(val, values);
+        } catch (err) {
+          // error throw by syncValidate
+          maybePromisedErrors = err;
+        }
+
+        if (maybePromisedErrors === undefined) {
+          resolve({});
+          updateError(undefined, callOpts);
+        } else if (isPromise(maybePromisedErrors)) {
+          maybePromisedErrors.then(result => {
+            // If the async validate is outdated (a newer validate occurs), the result should be discarded
+            if (validatePromise.current !== rootPromise) {
+              return;
+            }
 
-      if (maybePromisedErrors === undefined) {
-        resolve({});
-        updateError(undefined, callOpts);
-      } else if (isPromise(maybePromisedErrors)) {
-        maybePromisedErrors.then(result => {
-          if (isValid(result)) {
-            // validate success，no need to do anything with result
+            if (isValid(result)) {
+              // validate success，no need to do anything with result
+              updateError(undefined, callOpts);
+              resolve(null);
+            } else {
+              // validate failed
+              updateError(result, callOpts);
+              resolve(result);
+            }
+          });
+        } else {
+          if (isValid(maybePromisedErrors)) {
             updateError(undefined, callOpts);
             resolve(null);
           } else {
-            // validate failed
-            updateError(result, callOpts);
-            resolve(result);
+            updateError(maybePromisedErrors, callOpts);
+            resolve(maybePromisedErrors);
           }
-        });
-      } else {
-        if (isValid(maybePromisedErrors)) {
-          updateError(undefined, callOpts);
-          resolve(null);
-        } else {
-          updateError(maybePromisedErrors, callOpts);
-          resolve(maybePromisedErrors);
         }
-      }
-    });
+      });
+      validatePromise.current = rootPromise;
+      return rootPromise;
+    };
 
     const fieldValidate = (val, callOpts) => {
       let finalVal = val;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.27.1-alpha.0",
+    "version": "2.27.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.27.1-alpha.0",
-        "@douyinfe/semi-animation-react": "2.27.1-alpha.0",
-        "@douyinfe/semi-foundation": "2.27.1-alpha.0",
-        "@douyinfe/semi-icons": "2.27.1-alpha.0",
-        "@douyinfe/semi-illustrations": "2.27.1-alpha.0",
-        "@douyinfe/semi-theme-default": "2.27.1-alpha.0",
+        "@douyinfe/semi-animation": "2.27.1",
+        "@douyinfe/semi-animation-react": "2.27.1",
+        "@douyinfe/semi-foundation": "2.27.1",
+        "@douyinfe/semi-icons": "2.27.1",
+        "@douyinfe/semi-illustrations": "2.27.1",
+        "@douyinfe/semi-theme-default": "2.27.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "1e58386172b9a4a374ffb6b5b82232461d00eea5",
+    "gitHead": "a40dba5743af05efae302451a2174a8f22115a47",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",