chore: 默认开启移动端原生 UI 适配 (#3294)

* chore: 默认开启移动端原生 UI 适配

* 预览时增加移动端事件模拟

docs/zh-CN/extend/mobile.md

@@ -1,7 +1,42 @@
 ---
-title: 移动端定制
+title: 移动端展现
 ---
 
+## 移动端原生 UI
+
+从 1.6.0 版本开始，amis 会默认在移动端下使用仿原生 UI 的展现，比如日期选择会从底部弹出。
+
+由于这个仿原生 UI 是新开发的组件，有些 amis PC 版本的高级配置功能还不支持，比如 select 下的搜索过滤等，如果需要这些功能，可以先通过 props 里的 `useMobileUI` 属性关闭。
+
+方法 1：全局关闭
+
+```js
+amis.embed(
+  '#root',
+  {
+    // amis schema
+  },
+  {
+    // 这里是初始 props
+  },
+  {
+    theme: 'antd',
+    useMobileUI: false
+  }
+);
+```
+
+方法 2：针对某个组件进行关闭
+
+```json
+{
+  "type": "select",
+  "useMobileUI": false
+}
+```
+
+## 移动端定制配置
+
 有时候我们需要在移动端下展示不同效果，可以通过 `mobile` 属性来在移动端下覆盖部分属性。
 
 ```schema: scope="body"

examples/components/Play.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {toast} from '../../src/components/Toast';
 import {render, makeTranslator} from '../../src/index';
 import {normalizeLink} from '../../src/utils/normalizeLink';
+import {isMobile} from '../../src/utils/helper';
 import attachmentAdpator from '../../src/utils/attachmentAdpator';
 import {alert, confirm} from '../../src/components/Alert';
 import axios from 'axios';
@@ -324,11 +325,10 @@ export default class PlayGround extends React.Component {
       theme: this.props.theme,
       locale: this.props.locale,
       affixHeader: false,
-      affixFooter: false,
-      useMobileUI: true
+      affixFooter: false
     };
 
-    if (this.props.viewMode === 'mobile') {
+    if (this.props.viewMode === 'mobile' && !isMobile()) {
       return (
         <iframe
           width="375"

examples/mobile.jsx

@@ -7,12 +7,15 @@ import './polyfills/index';
 import React from 'react';
 import {render} from 'react-dom';
 import axios from 'axios';
+import TouchEmulator from 'hammer-touchemulator';
 import copy from 'copy-to-clipboard';
 import {toast} from '../src/components/Toast';
 import '../src/locale/en-US';
 
 import {render as renderAmis} from '../src/index';
 
+TouchEmulator();
+
 class AMISComponent extends React.Component {
   state = {
     schema: null,
@@ -25,7 +28,7 @@ class AMISComponent extends React.Component {
       if (data && data.schema) {
         this.setState({
           schema: data.schema,
-          props: {useMobileUI: true, ...data.props}
+          props: data.props
         });
       }
     });

package.json

@@ -147,6 +147,7 @@
     "fis3-preprocessor-js-require-file": "^0.1.3",
     "fs-walk": "0.0.2",
     "glob": "^7.2.0",
+    "hammer-touchemulator": "^0.0.2",
     "history": "^4.7.2",
     "husky": "^7.0.4",
     "jest": "^27.4.2",

src/factory.tsx

@@ -257,6 +257,7 @@ const defaultOptions: RenderOptions = {
   affixOffsetTop: 0,
   affixOffsetBottom: 0,
   richTextToken: '',
+  useMobileUI: true, // 是否启用移动端原生 UI
   loadRenderer,
   fetcher() {
     return Promise.reject('fetcher is required');
@@ -410,6 +411,11 @@ export function render(
     env.locale = locale;
   }
 
+  // 默认将开启移动端原生 UI
+  if (typeof options.useMobileUI) {
+    props.useMobileUI = true;
+  }
+
   // 进行文本替换
   if (env.replaceText && isObject(env.replaceText)) {
     const replaceKeys = Object.keys(env.replaceText);