Permalink
Browse files

Allow for styling of ToolbarAndroid's overflow icon

Summary: Fixes #2858.

Here's a screenshot of the custom overflow icon in action:
<img width="638" alt="overflow" src="https://cloud.githubusercontent.com/assets/1309177/10567090/693e395a-75ae-11e5-84cd-20b19149c620.png">
Closes #3497

Reviewed By: svcscm

Differential Revision: D2559787

Pulled By: foghina

fb-gh-sync-id: f188711ec094af3fa307722527f22aefff722e64
  • Loading branch information...
Charles Marsh facebook-github-bot-3
Charles Marsh authored and facebook-github-bot-3 committed Oct 22, 2015
1 parent 71da291 commit 66717d802b9d42c5bff8ce1d7b6e5998a1591514
@@ -101,6 +101,12 @@ var ToolbarAndroidExample = React.createClass({
title="Bunny and Hawk"
style={styles.toolbar} />
</UIExplorerBlock>
<UIExplorerBlock title="Toolbar with custom overflowIcon">
<ToolbarAndroid
actions={toolbarActions}
overflowIcon={require('./bunny.png')}
style={styles.toolbar} />
</UIExplorerBlock>
</UIExplorerPage>
);
},
@@ -103,6 +103,10 @@ var ToolbarAndroid = React.createClass({
* Callback called when the icon is selected.
*/
onIconClicked: ReactPropTypes.func,
/**
* Sets the overflow icon.
*/
overflowIcon: optionalImageSource,
/**
* Sets the toolbar subtitle.
*/
@@ -135,6 +139,9 @@ var ToolbarAndroid = React.createClass({
if (this.props.navIcon) {
nativeProps.navIcon = resolveAssetSource(this.props.navIcon);
}
if (this.props.overflowIcon) {
nativeProps.overflowIcon = resolveAssetSource(this.props.overflowIcon);
}
if (this.props.actions) {
nativeProps.actions = [];
for (var i = 0; i < this.props.actions.length; i++) {
@@ -169,6 +176,7 @@ var toolbarAttributes = {
actions: true,
logo: true,
navIcon: true,
overflowIcon: true,
subtitle: true,
subtitleColor: true,
title: true,
@@ -6,6 +6,7 @@
import android.content.Context;
import android.graphics.drawable.Animatable;
import android.graphics.drawable.Drawable;
import android.net.Uri;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
@@ -36,6 +37,7 @@
private final DraweeHolder mLogoHolder;
private final DraweeHolder mNavIconHolder;
private final DraweeHolder mOverflowIconHolder;
private final MultiDraweeHolder<GenericDraweeHierarchy> mActionsHolder =
new MultiDraweeHolder<>();
@@ -69,6 +71,21 @@ public void onFinalImageSet(
}
};
private final ControllerListener<ImageInfo> mOverflowIconControllerListener =
new BaseControllerListener<ImageInfo>() {
@Override
public void onFinalImageSet(
String id,
@Nullable final ImageInfo imageInfo,
@Nullable Animatable animatable) {
if (imageInfo != null) {
final DrawableWithIntrinsicSize overflowIconDrawable =
new DrawableWithIntrinsicSize(mOverflowIconHolder.getTopLevelDrawable(), imageInfo);
setOverflowIcon(overflowIconDrawable);
}
}
};
private static class ActionIconControllerListener extends BaseControllerListener<ImageInfo> {
private final MenuItem mItem;
private final DraweeHolder mHolder;
@@ -94,6 +111,7 @@ public ReactToolbar(Context context) {
mLogoHolder = DraweeHolder.create(createDraweeHierarchy(), context);
mNavIconHolder = DraweeHolder.create(createDraweeHierarchy(), context);
mOverflowIconHolder = DraweeHolder.create(createDraweeHierarchy(), context);
}
private final Runnable mLayoutRunnable = new Runnable() {
@@ -136,19 +154,20 @@ public void onAttachedToWindow() {
@Override
public void onFinishTemporaryDetach() {
super.onFinishTemporaryDetach();
mLogoHolder.onAttach();
mNavIconHolder.onAttach();
attachDraweeHolders();
}
private void detachDraweeHolders() {
mLogoHolder.onDetach();
mNavIconHolder.onDetach();
mOverflowIconHolder.onDetach();
mActionsHolder.onDetach();
}
private void attachDraweeHolders() {
mLogoHolder.onAttach();
mNavIconHolder.onAttach();
mOverflowIconHolder.onAttach();
mActionsHolder.onAttach();
}
@@ -184,6 +203,22 @@ private void attachDraweeHolders() {
}
}
/* package */ void setOverflowIconSource(@Nullable ReadableMap source) {
String uri = source != null ? source.getString("uri") : null;
if (uri == null) {
setOverflowIcon(null);
} else if (uri.startsWith("http://") || uri.startsWith("https://")) {
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(Uri.parse(uri))
.setControllerListener(mOverflowIconControllerListener)
.setOldController(mOverflowIconHolder.getController())
.build();
mOverflowIconHolder.setController(controller);
} else {
setOverflowIcon(getDrawableByName(uri));
}
}
/* package */ void setActions(@Nullable ReadableArray actions) {
Menu menu = getMenu();
menu.clear();
@@ -247,4 +282,8 @@ private int getDrawableResourceByName(String name) {
getContext().getPackageName());
}
private Drawable getDrawableByName(String name) {
return getResources().getDrawable(getDrawableResourceByName(name));
}
}
@@ -59,6 +59,11 @@ public void setNavIcon(ReactToolbar view, @Nullable ReadableMap navIcon) {
view.setNavIconSource(navIcon);
}
@ReactProp(name = "overflowIcon")
public void setOverflowIcon(ReactToolbar view, @Nullable ReadableMap overflowIcon) {
view.setOverflowIconSource(overflowIcon);
}
@ReactProp(name = "subtitle")
public void setSubtitle(ReactToolbar view, @Nullable String subtitle) {
view.setSubtitle(subtitle);

0 comments on commit 66717d8

Please sign in to comment.