@arco-design/mobile-react 2.30.0 → 2.30.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.30.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.0...@arco-design/mobile-react@2.30.1) (2023-11-07)
+
+
+### Bug Fixes
+
+* `Form` put error types to classname & i18n usage description ([#192](https://github.com/arco-design/arco-design-mobile/issues/192)) ([d3a611a](https://github.com/arco-design/arco-design-mobile/commit/d3a611ab368a32c98495e1601a5e16e4d6f4f86f))
+* adjust dark mode style ([#193](https://github.com/arco-design/arco-design-mobile/issues/193)) ([919d661](https://github.com/arco-design/arco-design-mobile/commit/919d66120c1b2e445e3d0f95cf4d34e8c84e9998))
+
+
+
+
+
 # [2.30.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.6...@arco-design/mobile-react@2.30.0) (2023-10-19)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.6/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.29.6/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.0/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.6/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.29.6/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.0/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/carousel/index.js

@@ -737,7 +737,9 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     // @en When noLoop is used, the blank space of spaceBetween needs to be exposed at the end, so when sliding to the last one, the transform value moves to the left by the corresponding width
 
     var translateDis = noLoop ? noLoopDis - (total > 1 && index === total - 1 ? spaceBetween : 0) * rtlRatio : dis;
-    var transStr = childSize > 0 ? translateDis + "px" : "-" + index * 100 + "%";
+    var initTranslateDis = -1 * index * 100; // bugfix: prop `style` did not match in ssr
+
+    var transStr = childSize > 0 ? "" + translateDis + (translateDis ? 'px' : '') : "" + initTranslateDis + (initTranslateDis ? '%' : '');
 
     if (vertical) {
       var _translateStyle = (0, _helpers.getStyleWithVendor)({

package/cjs/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/cjs/context-provider/index.js

@@ -66,9 +66,15 @@ function ContextProvider(props) {
       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 () {
@@ -97,7 +103,7 @@ function ContextProvider(props) {
 
     if (useDarkMode) {
       var dark = matchMedia.matches;
-      setDarkModeState(dark);
+      setDarkModeState(dark, mountedRef.current);
 
       if (typeof matchMedia.addEventListener === 'function') {
         matchMedia.addEventListener('change', changeDarkMode);
@@ -106,6 +112,7 @@ function ContextProvider(props) {
       }
     }
 
+    mountedRef.current = true;
     return function () {
       if (useDarkMode) {
         if (typeof matchMedia.removeEventListener === 'function') {

package/cjs/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/cjs/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/cjs/form/form-item.js

@@ -88,12 +88,14 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
           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,
@@ -338,16 +340,22 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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);
   };
 
@@ -369,7 +377,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   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/cjs/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/cjs/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/cjs/form/utils.js

@@ -18,11 +18,13 @@ exports.isFieldRequired = isFieldRequired;
 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;
@@ -32,11 +34,13 @@ var getErrorAndWarnings = function getErrorAndWarnings(result) {
       warnings = [].concat(warnings, message);
     } else {
       errors = [].concat(errors, message);
+      errorTypes = [].concat(errorTypes, resultErrorTypes);
     }
   });
   return {
     warnings: warnings,
-    errors: errors
+    errors: errors,
+    errorTypes: errorTypes
   };
 };
 

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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;