8d94cc5cb2
This abstraction represents an action which can go anywhere in a toolbox (be that the main toolbar or the overflow menu) and it's platform independent. It does not depend on Redux, thus making it stateless, which facilitates its use in stateful button implementations as well as stateless ones.
58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
import { TouchableHighlight } from 'react-native';
|
|
|
|
import { Icon } from '../../base/font-icons';
|
|
|
|
import AbstractToolboxItem from './AbstractToolboxItem';
|
|
import type { Props } from './AbstractToolboxItem';
|
|
|
|
/**
|
|
* Native implementation of {@code AbstractToolboxItem}.
|
|
*/
|
|
export default class ToolboxItem extends AbstractToolboxItem<Props> {
|
|
/**
|
|
* Transform the given (web) icon name into a name that works with
|
|
* {@code Icon}.
|
|
*
|
|
* @private
|
|
* @returns {string}
|
|
*/
|
|
_getIconName() {
|
|
const { iconName } = this.props;
|
|
|
|
return iconName.replace('icon-', '').split(' ')[0];
|
|
}
|
|
|
|
/**
|
|
* Handles rendering of the actual item.
|
|
*
|
|
* TODO: currently no handling for labels is implemented.
|
|
*
|
|
* @protected
|
|
* @returns {ReactElement}
|
|
*/
|
|
_renderItem() {
|
|
const {
|
|
accessibilityLabel,
|
|
disabled,
|
|
onClick,
|
|
styles
|
|
} = this.props;
|
|
|
|
return (
|
|
<TouchableHighlight
|
|
accessibilityLabel = { accessibilityLabel }
|
|
disabled = { disabled }
|
|
onPress = { onClick }
|
|
style = { styles && styles.style }
|
|
underlayColor = { styles && styles.underlayColor } >
|
|
<Icon
|
|
name = { this._getIconName() }
|
|
style = { styles && styles.iconStyle } />
|
|
</TouchableHighlight>
|
|
);
|
|
}
|
|
}
|