fix: 修复编辑态组件mobile属性渲染错误问题

Author: zhangtao07

packages/amis-core/src/envOverwrite.ts

@@ -2,14 +2,15 @@
  * @file 用于在移动端或不同语言环境下使用不同配置
  */
 
-import {JSONValueMap, findObjectsWithKey} from './utils/helper';
+import {JSONValueMap} from './utils/helper';
 import isPlainObject from 'lodash/isPlainObject';
 const isMobile = (window as any).matchMedia?.('(max-width: 768px)').matches
   ? true
   : false;
 
 // 这里不能用 addSchemaFilter 是因为还需要更深层的替换，比如 select 里的 options
-export const envOverwrite = (schema: any, locale?: string) => {
+export const envOverwrite = (schema: any, locale?: string, device?: string) => {
+  const isMobileDevice = device === 'mobile' || isMobile;
   return JSONValueMap(
     schema,
     (value: any) => {
@@ -21,7 +22,7 @@ export const envOverwrite = (schema: any, locale?: string) => {
         const newValue = Object.assign({}, value, value[locale]);
         delete newValue[locale];
         return newValue;
-      } else if (isMobile && value.mobile) {
+      } else if (isMobileDevice && value.mobile) {
         const newValue = Object.assign({}, value, value.mobile);
         delete newValue.mobile;
         return newValue;

packages/amis-core/src/index.tsx

@@ -363,7 +363,7 @@ function AMISRenderer({
 
   // 根据环境覆盖 schema，这个要在最前面做，不然就无法覆盖 validations
   schema = React.useMemo(() => {
-    schema = envOverwrite(schema, locale);
+    schema = envOverwrite(schema, locale, env.isMobile() ? 'mobile' : 'pc');
     // todo 和 envOverwrite 一起处理，减少循环次数
     schema = replaceText(
       schema,

packages/amis/src/renderers/CRUD.tsx

@@ -3065,14 +3065,15 @@ export default class CRUD<T extends CRUDProps> extends React.Component<T, any> {
       classnames: cx,
       translate: __,
       testIdBuilder,
-      id
+      id,
+      mobileUI
     } = this.props;
 
     return (
       <div
         className={cx('Crud', className, {
           'is-loading': store.loading,
-          'is-mobile': isMobile()
+          'is-mobile': mobileUI
         })}
         style={style}
         data-id={id}

packages/amis/src/renderers/DropDownButton.tsx

@@ -264,15 +264,16 @@ export default class DropDownButton extends React.Component<
       classnames: cx,
       data,
       ignoreConfirm,
-      testIdBuilder
+      testIdBuilder,
+      mobileUI
     } = this.props;
     index = typeof index === 'number' ? index.toString() : index;
 
     if (typeof button !== 'string' && Array.isArray(button?.children)) {
       return (
         <div
           key={index}
-          className={cx('DropDown-menu', {'is-mobile': isMobile()})}
+          className={cx('DropDown-menu', {'is-mobile': mobileUI})}
         >
           <li key={`${index}/0`} className={cx('DropDown-groupTitle')}>
             {button.icon ? (
@@ -345,7 +346,8 @@ export default class DropDownButton extends React.Component<
       closeOnOutside,
       menuClassName,
       overlayPlacement,
-      trigger
+      trigger,
+      mobileUI
     } = this.props;
 
     const buttons =
@@ -365,7 +367,7 @@ export default class DropDownButton extends React.Component<
                 'DropDown-menu-root',
                 'DropDown-menu',
                 {
-                  'is-mobile': isMobile()
+                  'is-mobile': mobileUI
                 },
                 menuClassName
               )}
@@ -442,7 +444,8 @@ export default class DropDownButton extends React.Component<
       testIdBuilder,
       id,
       wrapperCustomStyle,
-      themeCss
+      themeCss,
+      mobileUI
     } = this.props;
 
     return (
@@ -454,7 +457,7 @@ export default class DropDownButton extends React.Component<
             'DropDown--alignRight': align === 'right',
             'is-opened': this.state.isOpened,
             'is-actived': isActived,
-            'is-mobile': isMobile()
+            'is-mobile': mobileUI
           },
           className
         )}

packages/amis/src/renderers/Form/ConditionBuilder.tsx

@@ -185,6 +185,7 @@ export default class ConditionBuilderControl extends React.PureComponent<Conditi
       pickerIcon,
       env,
       popOverContainer,
+      mobileUI,
       ...rest
     } = this.props;
 
@@ -203,7 +204,7 @@ export default class ConditionBuilderControl extends React.PureComponent<Conditi
       <div
         className={cx(
           `ConditionBuilderControl`,
-          {'is-mobile': isMobile()},
+          {'is-mobile': mobileUI},
           className
         )}
       >

packages/amis/src/renderers/Form/LocationPicker.tsx

@@ -150,7 +150,8 @@ export class LocationControl extends React.Component<LocationControlProps> {
       staticSchema,
       ak,
       coordinatesType,
-      hideViewControl = false
+      hideViewControl = false,
+      mobileUI
     } = this.props;
     const __ = this.props.translate;
 
@@ -161,7 +162,7 @@ export class LocationControl extends React.Component<LocationControlProps> {
     return (
       <div
         className={this.props.classnames('LocationControl', {
-          'is-mobile': isMobile()
+          'is-mobile': mobileUI
         })}
         ref={this.domRef}
       >
@@ -191,12 +192,12 @@ export class LocationControl extends React.Component<LocationControlProps> {
 
   @supportStatic()
   render() {
-    const {style, env} = this.props;
+    const {style, env, mobileUI} = this.props;
     const ak = filter(this.props.ak, this.props.data) || env.locationPickerAK!;
     return (
       <div
         className={this.props.classnames('LocationControl', {
-          'is-mobile': isMobile()
+          'is-mobile': mobileUI
         })}
       >
         <LocationPicker

packages/amis/src/renderers/Form/MatrixCheckboxes.tsx

@@ -419,13 +419,14 @@ export default class MatrixCheckbox extends React.Component<
       textAlign,
       xCheckAll,
       yCheckAll,
-      testIdBuilder
+      testIdBuilder,
+      mobileUI
     } = this.props;
 
     const value = this.props.value || buildDefaultValue(columns, rows);
 
     return (
-      <div className={cx('Table m-b-none', {'is-mobile': isMobile()})}>
+      <div className={cx('Table m-b-none', {'is-mobile': mobileUI})}>
         <div className={cx('Table-content')}>
           <table className={cx('Table-table')}>
             <thead>