Skip to content

Commit

Permalink
feat(android): add orientationChange event for Modal (#3861)
Browse files Browse the repository at this point in the history
Co-authored-by: siguangli <maxli@tencent.com>
  • Loading branch information
siguangli and siguangli2018 authored May 17, 2024
1 parent a1d5220 commit 3a3364c
Show file tree
Hide file tree
Showing 7 changed files with 116 additions and 6 deletions.
2 changes: 1 addition & 1 deletion docs/api/hippy-react/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ import icon from './qb_icon_new.png';
| autoHideStatusBar | 是否在`Modal`显示时自动隐藏状态栏。<strong>Android 中仅 api28 以上生效。</strong> `default: false` | `boolean` | `Android` |
| autoHideNavigationBar | 是否在`Modal`显示时自动隐藏导航栏。 `default: false` | `boolean` | `Android` |
| onShow |`Modal`显示时会执行此回调函数。 | `Function` | `Android、iOS、hippy-react-web、Web-Renderer、Voltron` |
| onOrientationChange | 屏幕旋转方向改变时执行会回调 | `Function` | `Android、iOS` |
| onOrientationChange | 屏幕旋转方向改变时执行会回调,返回当前屏幕显示方向 `{ orientation: portrait|landscape }` | `Function` | `Android、iOS` |
| onRequestClose |`Modal` 请求关闭时会执行此回调函数,一般时在 Android 系统里按下硬件返回按钮时触发,一般要在里面处理关闭弹窗。 | `Function` | `Android、hippy-react-web、Voltron` |
| transparent | 背景是否是透明的。`default: true` | `boolean` | `Android、iOS、hippy-react-web、Web-Renderer、Voltron` |
| visible | 是否显示。`default: true` | `boolean` | `Android、iOS、hippy-react-web、Web-Renderer、Voltron` |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,8 @@ export default class ModalExpo extends React.Component {
transparent={true}
animationType={this.state.animationType}
visible={visible}
onRequestClose={() => { /* Trigger when hardware back pressed */ }}
requestClose={() => { /* Trigger when hardware back pressed */ }}
orientationChange={(evt) => { console.log('orientation changed', evt.orientation); }}
supportedOrientations={['portrait']}
immersionStatusBar={this.state.immerseStatusBar}
autoHideStatusBar={this.state.hideStatusBar}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
:autoHideNavigationBar="autoHideNavigationBar"
@show="onShow"
@requestClose="onClose"
@orientationChange="onOrientationChange"
>
<!-- iOS 平台上 dialog 必须只有一个子节点 -->
<div class="dialog-demo-wrapper">
Expand Down Expand Up @@ -80,6 +81,7 @@
:autoHideStatusBar="autoHideStatusBar"
:autoHideNavigationBar="autoHideNavigationBar"
@requestClose="onClose"
@orientationChange="onOrientationChange"
>
<div
class="dialog-2-demo-wrapper center column row"
Expand Down Expand Up @@ -154,6 +156,9 @@ export default {
onShow() {
console.log('Dialog is opening');
},
onOrientationChange(evt) {
console.log('orientation changed', evt.nativeParams);
},
onClose(evt) {
evt.stopPropagation();
// Dialog 会响应硬件返回按钮,所以需要在这里关闭弹窗。
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
:autoHideNavigationBar="autoHideNavigationBar"
@show="onShow"
@requestClose="onClose"
@orientationChange="onOrientationChange"
>
<!-- dialog on iOS platform can only have one child node -->
<div class="dialog-demo-wrapper">
Expand All @@ -78,6 +79,7 @@
:animationType="dialogAnimationType"
:transparent="true"
@requestClose="onClose"
@orientationChange="onOrientationChange"
>
<div
class="dialog-2-demo-wrapper center column row"
Expand Down Expand Up @@ -151,7 +153,9 @@ export default defineComponent({
const onShow = () => {
console.log('Dialog is opening');
};
const onOrientationChange = (evt) => {
console.log('orientation changed', evt.nativeParams);
};
const onClose = (evt) => {
evt.stopPropagation();
/**
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
/* Tencent is pleased to support the open source community by making Hippy available.
* Copyright (C) 2018 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package com.tencent.mtt.hippy.views.modal;

import static android.content.res.Configuration.ORIENTATION_LANDSCAPE;
import static android.content.res.Configuration.ORIENTATION_PORTRAIT;
import static android.content.res.Configuration.ORIENTATION_UNDEFINED;
import static com.tencent.renderer.utils.EventUtils.EVENT_ORIENTATION_CHANGED;

import android.app.Dialog;
import android.content.ComponentCallbacks;
import android.content.Context;
import android.content.res.Configuration;
import android.os.Bundle;
import android.view.View;
import androidx.annotation.NonNull;
import com.tencent.renderer.utils.EventUtils;
import java.lang.ref.WeakReference;
import java.util.HashMap;

public class HippyModalDialogView extends Dialog {
private int mOrientation = ORIENTATION_UNDEFINED;
private final ConfigurationChangedListener mListener = new ConfigurationChangedListener();;
private final WeakReference<View> mHostView;

public HippyModalDialogView(@NonNull Context context, int themeResId, @NonNull View hostView) {
super(context, themeResId);
mHostView = new WeakReference<>(hostView);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Configuration configuration = getContext().getResources().getConfiguration();
mOrientation = configuration.orientation;
}

@Override
protected void onStart() {
super.onStart();
getContext().registerComponentCallbacks(mListener);
}

@Override
protected void onStop() {
super.onStop();
getContext().unregisterComponentCallbacks(mListener);
}

protected void sendOrientationChangeEvent(int orientation) {
final View hostView = mHostView.get();
if (hostView != null) {
String value;
switch (orientation) {
case ORIENTATION_PORTRAIT:
value = "portrait";
break;
case ORIENTATION_LANDSCAPE:
value = "landscape";
break;
default:
value = "";
}
HashMap<String, Object> params = new HashMap<>();
params.put("orientation", value);
EventUtils.sendComponentEvent(hostView, EVENT_ORIENTATION_CHANGED, params);
}
}

private class ConfigurationChangedListener implements ComponentCallbacks {
@Override
public void onConfigurationChanged(Configuration newConfig) {
if (newConfig.orientation != mOrientation) {
sendOrientationChangeEvent(newConfig.orientation);
mOrientation = newConfig.orientation;
}
}

@Override
public void onLowMemory() {
// Handle low memory event
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ public enum AnimationStyleTheme {
@NonNull
private final DialogRootView mDialogRootView;
@Nullable
private Dialog mDialog;
private HippyModalDialogView mDialog;
@Nullable
private View mContentView;
@Nullable
Expand Down Expand Up @@ -356,9 +356,9 @@ protected void showOrUpdate() {
}

@NonNull
protected Dialog createDialog(@NonNull Context context) {
protected HippyModalDialogView createDialog(@NonNull Context context) {
int themeResId = android.R.style.Theme_Translucent_NoTitleBar;
return new Dialog(context, themeResId);
return new HippyModalDialogView(context, themeResId, this);
}

@NonNull
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,8 @@ public class EventUtils {
public static final String EVENT_MODAL_REQUEST_CLOSE = "requestClose";
// On modal view show.
public static final String EVENT_MODAL_SHOW = "show";
// On modal orientation changed.
public static final String EVENT_ORIENTATION_CHANGED = "orientationChange";

// On refresh wrapper view refresh.
public static final String EVENT_REFRESH_WRAPPER_REFRESH = "refresh";
Expand Down

0 comments on commit 3a3364c

Please sign in to comment.