@arco-design/mobile-react 2.30.0 → 2.30.1

package/umd/context-provider/index.d.ts

@@ -47,11 +47,15 @@ export interface GlobalContextParams {
      * @default false
      */
     useRtl?: boolean;
+    /**
+     * 当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效
+     * @en Triggered when the system's native dark mode changes, valid when useDarkMode=true
+     */
+    onDarkModeChange?: (isDark: boolean) => void;
 }
 export declare const defaultContext: GlobalContextParams;
 export declare const GlobalContext: React.Context<GlobalContextParams>;
 export interface ContextProviderProps extends GlobalContextParams {
-    onDarkModeChange?: (isDark: boolean) => void;
     children: React.ReactNode;
 }
 export declare type WithGlobalContext<T> = T & {

package/umd/context-provider/index.js

@@ -73,9 +73,15 @@
         isDarkModeState = _useState[0],
         setIsDarkModeState = _useState[1];
 
-    var setDarkModeState = function setDarkModeState(isDark) {
+    var mountedRef = (0, _react.useRef)(false);
+
+    var setDarkModeState = function setDarkModeState(isDark, needChange) {
+      if (needChange === void 0) {
+        needChange = true;
+      }
+
       setIsDarkModeState(isDark);
-      onDarkModeChange && onDarkModeChange(isDark);
+      needChange && onDarkModeChange && onDarkModeChange(isDark);
     };
 
     var isDarkMode = (0, _react.useMemo)(function () {
@@ -104,7 +110,7 @@
 
       if (useDarkMode) {
         var dark = matchMedia.matches;
-        setDarkModeState(dark);
+        setDarkModeState(dark, mountedRef.current);
 
         if (typeof matchMedia.addEventListener === 'function') {
           matchMedia.addEventListener('change', changeDarkMode);
@@ -113,6 +119,7 @@
         }
       }
 
+      mountedRef.current = true;
       return function () {
         if (useDarkMode) {
           if (typeof matchMedia.removeEventListener === 'function') {

package/umd/dialog/demo/style/css/mobile.css

@@ -509,7 +509,7 @@
   padding: 0.16rem 0.24rem;
   font-size: 0.28rem;
   line-height: 0.4rem;
-  background-color: #F2F3F5;
+  background-color:  #F7F8FA ;
   width: 100%;
   caret-color:  #165DFF ;
 }
@@ -536,6 +536,7 @@
   color:  #929293 ;
 }
 .arco-theme-dark .dialog-input-demo-input {
+  background-color:  hsla(0, 0%, 100%, 0.08) ;
   caret-color:  #3C7EFF ;
 }
 .arco-theme-dark .dialog-input-demo-hint {

package/umd/dialog/demo/style/mobile.less

@@ -17,7 +17,7 @@
         .rem(padding, 8, 12);
         .rem(font-size, 14);
         .rem(line-height, 20);
-        background-color: #F2F3F5;
+        .use-var(background-color, card-background-color);
         width: 100%;
         .use-var(caret-color, primary-color);
     }
@@ -59,6 +59,7 @@
   .dialog-input-demo {
     &-input {
       @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-card-background-color);
         .use-var(caret-color, dark-primary-color);
       }
     }

package/umd/form/form-item.js

@@ -86,12 +86,14 @@
             fieldValidator.validate((_fieldValidator$valid = {}, _fieldValidator$valid[field] = value, _fieldValidator$valid), function (errorsMap) {
               var _getErrorAndWarnings = (0, _utils.getErrorAndWarnings)((errorsMap == null ? void 0 : errorsMap[field]) || []),
                   errors = _getErrorAndWarnings.errors,
-                  warnings = _getErrorAndWarnings.warnings;
+                  warnings = _getErrorAndWarnings.warnings,
+                  errorTypes = _getErrorAndWarnings.errorTypes;
 
               _this._errors = errors;
               onValidateStatusChange({
                 errors: _this._errors,
-                warnings: warnings
+                warnings: warnings,
+                errorTypes: errorTypes
               });
               return resolve({
                 errors: _this._errors,
@@ -336,16 +338,22 @@
         errors = _useState[0],
         setErrors = _useState[1];
 
-    var _useState2 = (0, _react.useState)([]),
-        warnings = _useState2[0],
-        setWarnings = _useState2[1];
+    var _useState2 = (0, _react.useState)(null),
+        errorTypes = _useState2[0],
+        setErrorTypes = _useState2[1];
+
+    var _useState3 = (0, _react.useState)([]),
+        warnings = _useState3[0],
+        setWarnings = _useState3[1];
 
     var formItemRef = (0, _react.useRef)(null);
 
     var onValidateStatusChange = function onValidateStatusChange(validateResult) {
       var _errors = validateResult.errors,
-          _warnings = validateResult.warnings;
+          _warnings = validateResult.warnings,
+          _errorTypes = validateResult.errorTypes;
       setErrors(_errors.length ? _errors[0] : null);
+      setErrorTypes(_errorTypes.length ? _errorTypes[0] : null);
       setWarnings(_warnings);
     };
 
@@ -367,7 +375,7 @@
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-form-item", prefixCls + "-form-item-" + (itemLayout || layout), className, (_cls = {
         disabled: fieldDisabled
-      }, _cls[prefixCls + "-form-item-error"] = !!errors, _cls[prefixCls + "-form-item-warning"] = Boolean(!errors && warnings), _cls)),
+      }, _cls[prefixCls + "-form-item-error"] = !!errors, _cls[prefixCls + "-form-item-warning"] = Boolean(!errors && warnings), _cls[prefixCls + "-form-item-error-" + errorTypes] = errorTypes, _cls)),
       style: style,
       ref: formItemRef
     }, /*#__PURE__*/_react.default.createElement("div", {

package/umd/form/type.d.ts

@@ -344,8 +344,9 @@ export interface IFormItemInnerProps {
      * @en The callback when validating status changes
      */
     onValidateStatusChange: (data: {
-        errors: any;
-        warnings: any;
+        errors: ReactNode[];
+        warnings: ReactNode[];
+        errorTypes: string[];
     }) => void;
     /**
      * 获取内部表单项的dom

package/umd/form/utils.d.ts

@@ -3,4 +3,5 @@ export declare const isFieldRequired: (rules?: IRules[]) => boolean;
 export declare const getErrorAndWarnings: (result: ValidatorError[]) => {
     warnings: string[];
     errors: string[];
+    errorTypes: string[];
 };

package/umd/form/utils.js

@@ -31,11 +31,13 @@
   var getErrorAndWarnings = function getErrorAndWarnings(result) {
     var errors = [];
     var warnings = [];
+    var errorTypes = [];
     result.map(function (_ref) {
       var _ref$message = _ref.message,
           message = _ref$message === void 0 ? [] : _ref$message,
           _ref$validateLevel = _ref.validateLevel,
-          validateLevel = _ref$validateLevel === void 0 ? 'error' : _ref$validateLevel;
+          validateLevel = _ref$validateLevel === void 0 ? 'error' : _ref$validateLevel,
+          resultErrorTypes = _ref.errorTypes;
 
       if (!(message != null && message.length)) {
         return;
@@ -45,11 +47,13 @@
         warnings = [].concat(warnings, message);
       } else {
         errors = [].concat(errors, message);
+        errorTypes = [].concat(errorTypes, resultErrorTypes);
       }
     });
     return {
       warnings: warnings,
-      errors: errors
+      errors: errors,
+      errorTypes: errorTypes
     };
   };
 

package/umd/input/demo/style/css/mobile.css

@@ -509,23 +509,23 @@
 }
 #demo-input .demo-input-maxlength {
   font-size: 0.28rem;
-  color: #86909c;
+  color:  #86909c ;
 }
 #demo-input .demo-input-maxlength.error {
-  color: #f53f3f;
+  color:  #F53F3F ;
 }
 #demo-input .demo-input-red-placeholder {
-  caret-color: #f53f3f;
+  caret-color:  #F53F3F ;
 }
 #demo-input .demo-input-red-placeholder::-webkit-input-placeholder {
-  color: #f53f3f;
+  color:  #F53F3F ;
 }
 #demo-input .demo-input-red-placeholder::placeholder {
-  color: #f53f3f;
+  color:  #F53F3F ;
 }
 #demo-input .demo-input-error-hint {
   font-size: 0.24rem;
-  color: #f53f3f;
+  color:  #F53F3F ;
   padding: 0 0 0.32rem 2.08rem;
   margin-top: -0.16rem;
 }
@@ -579,6 +579,24 @@
   color:  #929293 ;
 }
 .arco-theme-dark #demo-input .arco-input-container {
-  background:  #17171A ;
+  background:  #232324 ;
+}
+.arco-theme-dark #demo-input .demo-input-maxlength {
+  color:  #929293 ;
+}
+.arco-theme-dark #demo-input .demo-input-maxlength.error {
+  color:  #F76965 ;
+}
+.arco-theme-dark #demo-input .demo-input-red-placeholder {
+  caret-color:  #F76965 ;
+}
+.arco-theme-dark #demo-input .demo-input-red-placeholder::-webkit-input-placeholder {
+  color:  #F76965 ;
+}
+.arco-theme-dark #demo-input .demo-input-red-placeholder::placeholder {
+  color:  #F76965 ;
+}
+.arco-theme-dark #demo-input .demo-input-error-hint {
+  color:  #F76965 ;
 }
 /********************* End *************************/

package/umd/input/demo/style/mobile.less

@@ -8,7 +8,7 @@
         background: transparent;
     }
     .@{prefix}-input-container {
-        .use-var(background, background-color);
+        .use-var(background, cell-background-color);
 
         &:not(:first-of-type) {
             .rem(margin-top, 8);
@@ -17,24 +17,24 @@
 
     .demo-input-maxlength {
         .rem(font-size, 14);
-        color: #86909c;
+        .use-var(color, sub-info-font-color);
 
         &.error {
-            color: #f53f3f;
+            .use-var(color, danger-color);
         }
     }
 
     .demo-input-red-placeholder {
-        caret-color: #f53f3f;
+        .use-var(caret-color, danger-color);
 
         &::placeholder {
-            color: #f53f3f;
+            .use-var(color, danger-color);
         }
     }
 
     .demo-input-error-hint {
         .rem(font-size, 12);
-        color: #f53f3f;
+        .use-var(color, danger-color);
         .rem(padding, 0, 0, 16, 104);
         .rem(margin-top, -8);
 
@@ -99,7 +99,32 @@
   #demo-input {
     .@{prefix}-input-container {
       @{arco-dark-mode-selector} & {
-        .use-var(background, dark-background-color);
+        .use-var(background, dark-cell-background-color);
+      }
+    }
+    .demo-input-maxlength {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-sub-info-font-color);
+      }
+      &.error {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-danger-color);
+        }
+      }
+    }
+    .demo-input-red-placeholder {
+      @{arco-dark-mode-selector} & {
+        .use-var(caret-color, dark-danger-color);
+      }
+      &::placeholder {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-danger-color);
+        }
+      }
+    }
+    .demo-input-error-hint {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-danger-color);
       }
     }
   }

package/umd/nav-bar/style/css/index.css

@@ -650,7 +650,7 @@
 }
 .arco-theme-dark .arco-nav-bar {
   color:  #f6f6f6 ;
-  background:  #232324 ;
+  background:  #17171A ;
 }
 .arco-theme-dark .arco-nav-bar-wrapper.arco-nav-bar-wrapper-border {
   position: relative;

package/umd/notify/demo/style/css/mobile.css

@@ -512,7 +512,8 @@
   padding: 0 0.32rem;
   height: 0.72rem;
   color: inherit;
-  border: 0.5px solid #e5e6eb;
+  border: 0.5px solid;
+  border-color:  #e5e6eb ;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
@@ -538,4 +539,7 @@
   background:  #2e2e30 ;
   color:  #929293 ;
 }
+.arco-theme-dark #demo-notify .notify-custom-content {
+  border-color:  #484849 ;
+}
 /********************* End *************************/

package/umd/notify/demo/style/mobile.less

@@ -17,7 +17,8 @@
         .rem(padding, 0, 16);
         .rem(height, 36);
         color: inherit;
-        border: 0.5px solid #e5e6eb;
+        border: 0.5px solid;
+        .use-var(border-color, line-color);
         display: flex;
         justify-content: center;
         align-items: center;
@@ -48,5 +49,12 @@
       .use-var(color, dark-sub-info-font-color);
     }
   }
+  #demo-notify {
+    .notify-custom-content {
+      @{arco-dark-mode-selector} & {
+        .use-var(border-color, dark-line-color);
+      }
+    }
+  }
 }
 /********************* End *************************/

package/umd/popover/demo/style/css/mobile.css

@@ -605,9 +605,9 @@
           justify-content: center;
   width: 64px;
   height: 24px;
-  background: #fff;
+  background-color:  #FFFFFF ;
   border-radius: 40px;
-  color: #1d2129;
+  color:  #1d2129 ;
   font-size: 12px;
 }
 #demo-popover .custom-demo-wrapper {
@@ -642,4 +642,8 @@
   background:  #2e2e30 ;
   color:  #929293 ;
 }
+.arco-theme-dark #demo-popover .suffix-demo-wrapper .custom-suffix-btn {
+  background-color:  #232324 ;
+  color:  #f6f6f6 ;
+}
 /********************* End *************************/

package/umd/popover/demo/style/mobile.less

@@ -78,9 +78,9 @@
             justify-content: center;
             width: 64px;
             height: 24px;
-            background: #fff;
+            .use-var(background-color, container-background-color);
             border-radius: 40px;
-            color: #1d2129;
+            .use-var(color, font-color);
             font-size: 12px;
         }
     }
@@ -121,5 +121,15 @@
       .use-var(color, dark-sub-info-font-color);
     }
   }
+  #demo-popover {
+    .suffix-demo-wrapper {
+      .custom-suffix-btn {
+        @{arco-dark-mode-selector} & {
+          .use-var(background-color, dark-container-background-color);
+          .use-var(color, dark-font-color);
+        }
+      }
+    }
+  }
 }
 /********************* End *************************/

package/umd/tabs/demo/style/css/mobile.css

@@ -496,6 +496,7 @@
  */
 #demo-tabs .arcodesign-mobile-demo-content {
   padding: 0;
+  background:  #FFFFFF ;
 }
 #demo-tabs .demo-tab-content {
   display: -webkit-box;
@@ -551,8 +552,8 @@
           transform: rotate(180deg);
 }
 .arco-theme-dark #demo-tabs .demo-tabs-add-extra {
-  background: -webkit-linear-gradient(right, #232324 66.04%, rgba(35, 35, 36, 0) 105%);
-  background: linear-gradient(270deg, #232324 66.04%, rgba(35, 35, 36, 0) 105%);
+  background: -webkit-linear-gradient(right, #17171A 66.04%, rgba(23, 23, 26, 0) 105%);
+  background: linear-gradient(270deg, #17171A 66.04%, rgba(23, 23, 26, 0) 105%);
 }
 #demo-tabs .demo-tab-custom-bar .arco-tab-cell-container-wrap {
   height: 1.52rem;
@@ -603,6 +604,9 @@
   background:  #2e2e30 ;
   color:  #929293 ;
 }
+.arco-theme-dark #demo-tabs .arcodesign-mobile-demo-content {
+  background:  #17171A ;
+}
 .arco-theme-dark #demo-tabs .demo-tab-content {
   color:  #929293 ;
 }

package/umd/tabs/demo/style/mobile.less

@@ -4,6 +4,7 @@
 
     .arcodesign-mobile-demo-content {
         padding: 0;
+        .use-var(background, background-color);
     }
 
     .demo-tab-content {
@@ -41,7 +42,7 @@
             transform: rotate(180deg);
         }
         .arco-theme-dark & {
-            background: linear-gradient(270deg, @dark-container-background-color 66.04%, rgba(@dark-container-background-color, 0) 105%);
+            background: linear-gradient(270deg, @dark-background-color 66.04%, rgba(@dark-background-color, 0) 105%);
         }
     }
 
@@ -118,6 +119,11 @@
     }
   }
   #demo-tabs {
+    .arcodesign-mobile-demo-content {
+      @{arco-dark-mode-selector} & {
+        .use-var(background, dark-background-color);
+      }
+    }
     .demo-tab-content {
       @{arco-dark-mode-selector} & {
         .use-var(color, dark-sub-info-font-color);

package/umd/tabs/style/css/index.css

@@ -1052,7 +1052,7 @@
   color:  #f6f6f6 ;
 }
 .arco-theme-dark .arco-tab-cell-container-wrap {
-  background:  #232324 ;
+  background:  #17171A ;
 }
 .arco-theme-dark .arco-tab-cell-container-inner.has-divider.pos-top {
   box-shadow: 0 -1PX 0 0 #484849 inset;