From c57e9f5f428c820b11e3aa597533719d91df5a2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= <wuduoyi@baidu.com>
Date: Wed, 29 Dec 2021 18:31:37 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E9=BB=98=E8=AE=A4=E5=BC=80=E5=90=AF?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=8E=9F=E7=94=9F=20UI=20=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=20(#3294)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* 预览时增加移动端事件模拟
---
 docs/zh-CN/extend/mobile.md  | 37 +++++++++++++++++++++++++++++++++++-
 examples/components/Play.jsx |  6 +++---
 examples/mobile.jsx          |  5 ++++-
 package.json                 |  1 +
 src/factory.tsx              |  6 ++++++
 5 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/docs/zh-CN/extend/mobile.md b/docs/zh-CN/extend/mobile.md
index 7088dfae8..7340cd655 100644
--- a/docs/zh-CN/extend/mobile.md
+++ b/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"
diff --git a/examples/components/Play.jsx b/examples/components/Play.jsx
index 4b203fc66..13a8b7c0f 100644
--- a/examples/components/Play.jsx
+++ b/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"
diff --git a/examples/mobile.jsx b/examples/mobile.jsx
index 1d32d6a3a..6c5c8fd9e 100644
--- a/examples/mobile.jsx
+++ b/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
         });
       }
     });
diff --git a/package.json b/package.json
index 1ae06b238..8fd64118e 100644
--- a/package.json
+++ b/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",
diff --git a/src/factory.tsx b/src/factory.tsx
index a57598789..2c823d5aa 100644
--- a/src/factory.tsx
+++ b/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);