Remove ToolbarAndroid, move to FB Internal
Summary: This removes the JS for ToolbarAndroid from RN and moves it to Ads manager, which has two remaining uses of it. In a follow-up, I will also move the native code. Reviewed By: rickhanlonii Differential Revision: D15469117 fbshipit-source-id: 68c3f89b85cc589a48f2dced183267daa791b53b
This commit is contained in:
Christoph Nakazawa
Facebook Github Bot
Родитель
d2ef114538
Коммит
31ab947703
|
|
@ -1,251 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const UIManager = require('../../ReactNative/UIManager');
|
||||
|
||||
const ToolbarAndroidNativeComponent = require('./ToolbarAndroidNativeComponent');
|
||||
const resolveAssetSource = require('../../Image/resolveAssetSource');
|
||||
|
||||
import type {SyntheticEvent} from '../../Types/CoreEventTypes';
|
||||
import type {ImageSource} from '../../Image/ImageSource';
|
||||
import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
|
||||
import type {ViewProps} from '../View/ViewPropTypes';
|
||||
import type {NativeComponent} from '../../Renderer/shims/ReactNative';
|
||||
|
||||
/**
|
||||
* React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo,
|
||||
* navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and
|
||||
* subtitle are expanded so the logo and navigation icons are displayed on the left, title and
|
||||
* subtitle in the middle and the actions on the right.
|
||||
*
|
||||
* If the toolbar has an only child, it will be displayed between the title and actions.
|
||||
*
|
||||
* Although the Toolbar supports remote images for the logo, navigation and action icons, this
|
||||
* should only be used in DEV mode where `require('./some_icon.png')` translates into a packager
|
||||
* URL. In release mode you should always use a drawable resource for these icons. Using
|
||||
* `require('./some_icon.png')` will do this automatically for you, so as long as you don't
|
||||
* explicitly use e.g. `{uri: 'http://...'}`, you will be good.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```
|
||||
* render: function() {
|
||||
* return (
|
||||
* <ToolbarAndroid
|
||||
* logo={require('./app_logo.png')}
|
||||
* title="AwesomeApp"
|
||||
* actions={[{title: 'Settings', icon: require('./icon_settings.png'), show: 'always'}]}
|
||||
* onActionSelected={this.onActionSelected} />
|
||||
* )
|
||||
* },
|
||||
* onActionSelected: function(position) {
|
||||
* if (position === 0) { // index of 'Settings'
|
||||
* showSettings();
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* [0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html
|
||||
*/
|
||||
|
||||
type Action = $ReadOnly<{|
|
||||
title: string,
|
||||
icon?: ?ImageSource,
|
||||
show?: 'always' | 'ifRoom' | 'never',
|
||||
showWithText?: boolean,
|
||||
|}>;
|
||||
|
||||
type ToolbarAndroidChangeEvent = SyntheticEvent<
|
||||
$ReadOnly<{|
|
||||
position: number,
|
||||
|}>,
|
||||
>;
|
||||
|
||||
type ToolbarAndroidProps = $ReadOnly<{|
|
||||
...ViewProps,
|
||||
/**
|
||||
* or text on the right side of the widget. If they don't fit they are placed in an 'overflow'
|
||||
* Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
|
||||
* menu.
|
||||
*
|
||||
* This property takes an array of objects, where each object has the following keys:
|
||||
*
|
||||
* * `title`: **required**, the title of this action
|
||||
* * `icon`: the icon for this action, e.g. `require('./some_icon.png')`
|
||||
* * `show`: when to show this action as an icon or hide it in the overflow menu: `always`,
|
||||
* `ifRoom` or `never`
|
||||
* * `showWithText`: boolean, whether to show text alongside the icon or not
|
||||
*/
|
||||
actions?: ?Array<Action>,
|
||||
/**
|
||||
* Sets the toolbar logo.
|
||||
*/
|
||||
logo?: ?ImageSource,
|
||||
/**
|
||||
* Sets the navigation icon.
|
||||
*/
|
||||
navIcon?: ?ImageSource,
|
||||
/**
|
||||
* Callback that is called when an action is selected. The only argument that is passed to the
|
||||
* callback is the position of the action in the actions array.
|
||||
*/
|
||||
onActionSelected?: ?(position: number) => void,
|
||||
/**
|
||||
* Callback called when the icon is selected.
|
||||
*/
|
||||
onIconClicked?: ?() => void,
|
||||
/**
|
||||
* Sets the overflow icon.
|
||||
*/
|
||||
overflowIcon?: ?ImageSource,
|
||||
/**
|
||||
* Sets the toolbar subtitle.
|
||||
*/
|
||||
subtitle?: ?string,
|
||||
/**
|
||||
* Sets the toolbar subtitle color.
|
||||
*/
|
||||
subtitleColor?: ?ColorValue,
|
||||
/**
|
||||
* Sets the toolbar title.
|
||||
*/
|
||||
title?: ?Stringish,
|
||||
/**
|
||||
* Sets the toolbar title color.
|
||||
*/
|
||||
titleColor?: ?ColorValue,
|
||||
/**
|
||||
* Sets the content inset for the toolbar starting edge.
|
||||
*
|
||||
* The content inset affects the valid area for Toolbar content other than
|
||||
* the navigation button and menu. Insets define the minimum margin for
|
||||
* these components and can be used to effectively align Toolbar content
|
||||
* along well-known gridlines.
|
||||
*/
|
||||
contentInsetStart?: ?number,
|
||||
/**
|
||||
* Sets the content inset for the toolbar ending edge.
|
||||
*
|
||||
* The content inset affects the valid area for Toolbar content other than
|
||||
* the navigation button and menu. Insets define the minimum margin for
|
||||
* these components and can be used to effectively align Toolbar content
|
||||
* along well-known gridlines.
|
||||
*/
|
||||
contentInsetEnd?: ?number,
|
||||
/**
|
||||
* Used to set the toolbar direction to RTL.
|
||||
* In addition to this property you need to add
|
||||
*
|
||||
* android:supportsRtl="true"
|
||||
*
|
||||
* to your application AndroidManifest.xml and then call
|
||||
* `setLayoutDirection(LayoutDirection.RTL)` in your MainActivity
|
||||
* `onCreate` method.
|
||||
*/
|
||||
rtl?: ?boolean,
|
||||
/**
|
||||
* Used to locate this view in end-to-end tests.
|
||||
*/
|
||||
testID?: ?string,
|
||||
|}>;
|
||||
|
||||
type Props = $ReadOnly<{|
|
||||
...ToolbarAndroidProps,
|
||||
forwardedRef: ?React.Ref<typeof ToolbarAndroidNativeComponent>,
|
||||
|}>;
|
||||
|
||||
class ToolbarAndroid extends React.Component<Props> {
|
||||
_onSelect = (event: ToolbarAndroidChangeEvent) => {
|
||||
const position = event.nativeEvent.position;
|
||||
if (position === -1) {
|
||||
this.props.onIconClicked && this.props.onIconClicked();
|
||||
} else {
|
||||
this.props.onActionSelected && this.props.onActionSelected(position);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
onIconClicked,
|
||||
onActionSelected,
|
||||
forwardedRef,
|
||||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
const nativeProps: {...typeof otherProps, nativeActions?: Array<Action>} = {
|
||||
...otherProps,
|
||||
};
|
||||
|
||||
if (this.props.logo) {
|
||||
nativeProps.logo = resolveAssetSource(this.props.logo);
|
||||
}
|
||||
|
||||
if (this.props.navIcon) {
|
||||
nativeProps.navIcon = resolveAssetSource(this.props.navIcon);
|
||||
}
|
||||
|
||||
if (this.props.overflowIcon) {
|
||||
nativeProps.overflowIcon = resolveAssetSource(this.props.overflowIcon);
|
||||
}
|
||||
|
||||
if (this.props.actions) {
|
||||
const nativeActions = [];
|
||||
for (let i = 0; i < this.props.actions.length; i++) {
|
||||
const action = {
|
||||
icon: this.props.actions[i].icon,
|
||||
show: this.props.actions[i].show,
|
||||
};
|
||||
|
||||
if (action.icon) {
|
||||
action.icon = resolveAssetSource(action.icon);
|
||||
}
|
||||
if (action.show) {
|
||||
action.show = UIManager.getViewManagerConfig(
|
||||
'ToolbarAndroid',
|
||||
).Constants.ShowAsAction[action.show];
|
||||
}
|
||||
|
||||
nativeActions.push({
|
||||
...this.props.actions[i],
|
||||
...action,
|
||||
});
|
||||
}
|
||||
|
||||
nativeProps.nativeActions = nativeActions;
|
||||
}
|
||||
|
||||
return (
|
||||
<ToolbarAndroidNativeComponent
|
||||
onSelect={this._onSelect}
|
||||
{...nativeProps}
|
||||
ref={forwardedRef}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const ToolbarAndroidToExport = React.forwardRef(
|
||||
(
|
||||
props: ToolbarAndroidProps,
|
||||
forwardedRef: ?React.Ref<typeof ToolbarAndroidNativeComponent>,
|
||||
) => {
|
||||
return <ToolbarAndroid {...props} forwardedRef={forwardedRef} />;
|
||||
},
|
||||
);
|
||||
|
||||
/* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
|
||||
* error found when Flow v0.89 was deployed. To see the error, delete this
|
||||
* comment and run Flow. */
|
||||
module.exports = (ToolbarAndroidToExport: Class<
|
||||
NativeComponent<ToolbarAndroidProps>,
|
||||
>);
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = require('../UnimplementedViews/UnimplementedView');
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const requireNativeComponent = require('../../ReactNative/requireNativeComponent');
|
||||
|
||||
import type {SyntheticEvent} from '../../Types/CoreEventTypes';
|
||||
import type {ImageSource} from '../../Image/ImageSource';
|
||||
import type {ViewProps} from '../View/ViewPropTypes';
|
||||
import type {NativeComponent} from '../../Renderer/shims/ReactNative';
|
||||
|
||||
type Action = $ReadOnly<{|
|
||||
title: string,
|
||||
icon?: ?ImageSource,
|
||||
show?: 'always' | 'ifRoom' | 'never',
|
||||
showWithText?: boolean,
|
||||
|}>;
|
||||
|
||||
type ToolbarAndroidChangeEvent = SyntheticEvent<
|
||||
$ReadOnly<{|
|
||||
position: number,
|
||||
|}>,
|
||||
>;
|
||||
|
||||
type NativeProps = $ReadOnly<{|
|
||||
onSelect: (event: ToolbarAndroidChangeEvent) => mixed,
|
||||
nativeActions?: Array<Action>,
|
||||
|}>;
|
||||
|
||||
type ColorValue = null | string;
|
||||
|
||||
type ToolbarAndroidProps = $ReadOnly<{|
|
||||
...ViewProps,
|
||||
...NativeProps,
|
||||
/**
|
||||
* or text on the right side of the widget. If they don't fit they are placed in an 'overflow'
|
||||
* Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
|
||||
* menu.
|
||||
*
|
||||
* This property takes an array of objects, where each object has the following keys:
|
||||
*
|
||||
* * `title`: **required**, the title of this action
|
||||
* * `icon`: the icon for this action, e.g. `require('./some_icon.png')`
|
||||
* * `show`: when to show this action as an icon or hide it in the overflow menu: `always`,
|
||||
* `ifRoom` or `never`
|
||||
* * `showWithText`: boolean, whether to show text alongside the icon or not
|
||||
*/
|
||||
actions?: ?Array<Action>,
|
||||
/**
|
||||
* Sets the toolbar logo.
|
||||
*/
|
||||
logo?: ?ImageSource,
|
||||
/**
|
||||
* Sets the navigation icon.
|
||||
*/
|
||||
navIcon?: ?ImageSource,
|
||||
/**
|
||||
* Callback that is called when an action is selected. The only argument that is passed to the
|
||||
* callback is the position of the action in the actions array.
|
||||
*/
|
||||
onActionSelected?: ?(position: number) => void,
|
||||
/**
|
||||
* Callback called when the icon is selected.
|
||||
*/
|
||||
onIconClicked?: ?() => void,
|
||||
/**
|
||||
* Sets the overflow icon.
|
||||
*/
|
||||
overflowIcon?: ?ImageSource,
|
||||
/**
|
||||
* Sets the toolbar subtitle.
|
||||
*/
|
||||
subtitle?: ?string,
|
||||
/**
|
||||
* Sets the toolbar subtitle color.
|
||||
*/
|
||||
subtitleColor?: ?ColorValue,
|
||||
/**
|
||||
* Sets the toolbar title.
|
||||
*/
|
||||
title?: ?Stringish,
|
||||
/**
|
||||
* Sets the toolbar title color.
|
||||
*/
|
||||
titleColor?: ?ColorValue,
|
||||
/**
|
||||
* Sets the content inset for the toolbar starting edge.
|
||||
*
|
||||
* The content inset affects the valid area for Toolbar content other than
|
||||
* the navigation button and menu. Insets define the minimum margin for
|
||||
* these components and can be used to effectively align Toolbar content
|
||||
* along well-known gridlines.
|
||||
*/
|
||||
contentInsetStart?: ?number,
|
||||
/**
|
||||
* Sets the content inset for the toolbar ending edge.
|
||||
*
|
||||
* The content inset affects the valid area for Toolbar content other than
|
||||
* the navigation button and menu. Insets define the minimum margin for
|
||||
* these components and can be used to effectively align Toolbar content
|
||||
* along well-known gridlines.
|
||||
*/
|
||||
contentInsetEnd?: ?number,
|
||||
/**
|
||||
* Used to set the toolbar direction to RTL.
|
||||
* In addition to this property you need to add
|
||||
*
|
||||
* android:supportsRtl="true"
|
||||
*
|
||||
* to your application AndroidManifest.xml and then call
|
||||
* `setLayoutDirection(LayoutDirection.RTL)` in your MainActivity
|
||||
* `onCreate` method.
|
||||
*/
|
||||
rtl?: ?boolean,
|
||||
/**
|
||||
* Used to locate this view in end-to-end tests.
|
||||
*/
|
||||
testID?: ?string,
|
||||
|}>;
|
||||
|
||||
type NativeToolbarAndroidProps = Class<NativeComponent<ToolbarAndroidProps>>;
|
||||
|
||||
module.exports = ((requireNativeComponent(
|
||||
'ToolbarAndroid',
|
||||
): any): NativeToolbarAndroidProps);
|
||||
|
|
@ -137,9 +137,6 @@ module.exports = {
|
|||
get TextInput() {
|
||||
return require('TextInput');
|
||||
},
|
||||
get ToolbarAndroid() {
|
||||
return require('ToolbarAndroid');
|
||||
},
|
||||
get Touchable() {
|
||||
return require('Touchable');
|
||||
},
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче