status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[ReactNative] Remove ExpandingText

This commit is contained in:
Tadeu Zagallo 2015-03-18 13:12:40 -07:00
parent f002fda275
commit 196bc85629
6 changed files with 3 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Examples/Movies/MovieScreen.js
View File

@ -6,7 +6,6 @@
var React = require('react-native');
var {
ExpandingText,
Image,
PixelRatio,
ScrollView,
@ -40,10 +39,9 @@ var MovieScreen = React.createClass({
</View>
</View>
<View style={styles.separator} />
<ExpandingText
truncLength={200}
text={this.props.movie.synopsis}
/>
<Text>
{this.props.movie.synopsis}
</Text>
<View style={styles.separator} />
<Cast actors={this.props.movie.abridged_cast} />
</ScrollView>

52
Examples/UIExplorer/ExpandingTextExample.js
View File

@ -1,52 +0,0 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*/
'use strict';
var React = require('react-native');
var {
ExpandingText
} = React;
var LOREM = 'Lorem ipsum dolor sit amet, mea adipisci inimicus ex, paulo essent bonorum et ius, rebum deserunt mediocritatem ius ei.';
exports.title = '<ExpandingText>';
exports.description = 'Base component for rendering text that is truncated and can be expanded upon tap.';
exports.examples = [
{
title: 'Expanding text (truncLength=20)',
description: 'Setting the truncLength prop will cause the text to truncate to that character length',
render: function() {
return <ExpandingText truncLength={20} text={LOREM} />;
}
}, {
title: 'Expanding text (truncLength=80)',
description: 'The higher the truncLength the more characters that will be shown by default',
render: function() {
return <ExpandingText truncLength={80} text={LOREM + LOREM} />;
}
}, {
title: 'Expanding text with custom style',
description: 'You can style the text within the ExpandingText component',
render: function() {
return (
<ExpandingText
textStyle={{fontFamily: 'Verdana'}}
truncLength={80}
text={LOREM + LOREM}
/>
);
}
}, {
title: 'See More button with custom style' ,
description: 'You can also style just the See More button',
render: function() {
return (
<ExpandingText
seeMoreStyle={{color: 'red'}}
truncLength={80}
text={LOREM}
/>
);
}
}];

1
Examples/UIExplorer/UIExplorerList.js
View File

@ -22,7 +22,6 @@ var EXAMPLES = [
require('./TextExample.ios'),
require('./TimerExample'),
require('./TextInputExample'),
require('./ExpandingTextExample'),
require('./ImageExample'),
require('./ListViewSimpleExample'),
require('./ListViewPagingExample'),

130
Libraries/Text/ExpandingText.js
View File

@ -1,130 +0,0 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ExpandingText
*/
'use strict';
var React = require('React');
var StyleSheet = require('StyleSheet');
var Text = require('Text');
var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
var View = require('View');
var truncate = require('truncate');
var styles = StyleSheet.create({
boldText: {
fontWeight: 'bold',
},
});
/**
* A react component for displaying text which supports truncating
* based on a set truncLength.
*
* In the following example, the text will truncate
* to show only the first 17 characters plus '...' with a See More button to
* expand the text to its full length.
*
* ```
* render: function() {
* return <ExpandingText truncLength={20} text={EXAMPLE_TEXT} />;
* },
* ```
*/
var ExpandingText = React.createClass({
propTypes: {
/**
* Text to be displayed. It will be truncated if the character length
* is greater than the `truncLength` property.
*/
text: React.PropTypes.string,
/**
* The styles that will be applied to the text (both truncated and
* expanded).
*/
textStyle: Text.propTypes.style,
/**
* The styles that will be applied to the See More button. Default
* is bold.
*/
seeMoreStyle: Text.propTypes.style,
/**
* The caption that will be appended at the end, by default it is
* `'See More'`.
*/
seeMoreText: React.PropTypes.string,
/**
* The maximum character length for the text that will
* be displayed by default. Note that ... will be
* appended to the truncated text which is counted towards
* the total truncLength of the default displayed string.
* The default is 130.
*/
truncLength: React.PropTypes.number,
},
getDefaultProps: function() {
return {
truncLength: 130,
seeMoreText: 'See More',
seeMoreStyle: styles.boldText,
};
},
getInitialState: function() {
return {
truncated: true,
};
},
onTapSeeMore: function() {
this.setState({
truncated: !this.state.truncated,
});
},
isTruncated: function() {
return (
this.props.text.length > this.props.truncLength &&
this.state.truncated
);
},
getText: function() {
var text = this.props.text;
if (!this.isTruncated()) {
return text;
}
return truncate(text, this.props.truncLength) + ' ';
},
renderSeeMore: function() {
if (!this.isTruncated()) {
return null;
}
return (
<Text style={this.props.seeMoreStyle}>
{this.props.seeMoreText}
</Text>
);
},
render: function() {
return (
<TouchableWithoutFeedback onPress={this.onTapSeeMore}>
<View>
<Text style={this.props.textStyle}>
{this.getText()}
{this.renderSeeMore()}
</Text>
</View>
</TouchableWithoutFeedback>
);
}
});
module.exports = ExpandingText;

1
Libraries/react-native/react-native-interface.js vendored
View File

@ -4,7 +4,6 @@ declare module "react-native" {
}
declare var AppRegistry: ReactClass<any, any, any>;
declare var ExpandingText: ReactClass<any, any, any>;
declare var Image: ReactClass<any, any, any>;
declare var ListView: ReactClass<any, any, any>;
declare var NavigatorIOS: ReactClass<any, any, any>;

1
Libraries/react-native/react-native.js vendored
View File

@ -11,7 +11,6 @@ var ReactNative = {
// Components
ActivityIndicatorIOS: require('ActivityIndicatorIOS'),
DatePickerIOS: require('DatePickerIOS'),
ExpandingText: require('ExpandingText'),
Image: require('Image'),
ListView: require('ListView'),
ListViewDataSource: require('ListViewDataSource'),