Skip to content

Commit 59c495d

Browse files
kashishgroverkashishgrover
authored
[feat] Add link style prop
[feat] Add link style prop
2 parents 6c1a1f1 + 57545f9 commit 59c495d

12 files changed

Lines changed: 277 additions & 60 deletions

File tree

‎.eslintrc.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ module.exports = {
2222
'react/jsx-props-no-spreading': ['off'],
2323
'react/jsx-filename-extension': ['off'],
2424
'no-use-before-define': ['off'],
25-
'operator-linebreak': ['off']
25+
'operator-linebreak': ['off'],
26+
'object-curly-newline': ['off']
2627
},
2728
};

‎.prettierrc.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
module.exports = {
22
arrowParens: 'always',
33
bracketSpacing: true,
4-
jsxBracketSameLine: true,
54
printWidth: 100,
65
singleQuote: true,
76
tabWidth: 2,

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ import SeeMore from 'react-native-see-more-inline';
2121
<SeeMore numberOfLines={2}>
2222
{VERY_LARGE_TEXT}
2323
</SeeMore>
24+
25+
<SeeMore numberOfLines={2} linkStyle={{ fontWeight: '500' }}>
26+
{VERY_LARGE_TEXT}
27+
</SeeMore>
2428
```
2529

2630
### Props
@@ -29,6 +33,7 @@ import SeeMore from 'react-native-see-more-inline';
2933
| numberOfLines | - | yes | number |
3034
| linkColor | '#2E75F0' | no | string |
3135
| linkPressedColor | '#163772' | no | string |
36+
| linkStyle | undefined | no | array/object |
3237
| seeMoreText | 'see more' | no | string |
3338
| seeLessText | 'see less' | no | string |
3439
| style | `{ fontFamily: undefined, fontSize: 14, fontWeight: '300' }` | no | array/object |

‎example/App.js‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,33 @@
11
import React from 'react';
2-
import {
3-
StyleSheet, View, SafeAreaView, Text,
4-
} from 'react-native';
2+
import { StyleSheet, View, SafeAreaView, Text } from 'react-native';
53
// eslint-disable-next-line import/no-extraneous-dependencies
64
import SeeMore from 'react-native-see-more-inline';
75

8-
const LOREM_IPSUM_LARGE = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque aliquam leo nec venenatis. Vivamus rutrum aliquet ultrices. In vel turpis quis velit consectetur consequat. Nulla sit amet elit arcu. Duis at mauris lorem. Vivamus id neque ut lacus pharetra elementum a consectetur ex. Curabitur scelerisque sit amet metus ut aliquet. Fusce id odio vitae elit cursus interdum ut at dolor. In finibus, nunc et tempor sodales, erat orci sodales arcu, vel sodales dui tortor id felis. Proin luctus placerat tortor, in mollis eros ultricies ac. Aliquam cursus dolor nec vehicula convallis. Vestibulum sit amet felis laoreet, dignissim dolor in, tristique leo. Vestibulum fermentum maximus libero.';
6+
const LOREM_IPSUM_LARGE =
7+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque aliquam leo nec venenatis. Vivamus rutrum aliquet ultrices. In vel turpis quis velit consectetur consequat. Nulla sit amet elit arcu. Duis at mauris lorem. Vivamus id neque ut lacus pharetra elementum a consectetur ex. Curabitur scelerisque sit amet metus ut aliquet. Fusce id odio vitae elit cursus interdum ut at dolor. In finibus, nunc et tempor sodales, erat orci sodales arcu, vel sodales dui tortor id felis. Proin luctus placerat tortor, in mollis eros ultricies ac. Aliquam cursus dolor nec vehicula convallis. Vestibulum sit amet felis laoreet, dignissim dolor in, tristique leo. Vestibulum fermentum maximus libero.';
98

10-
const LOREM_IPSUM_MEDIUM = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque aliquam leo nec venenatis. Vivamus rutrum aliquet ultrices. In vel turpis quis velit consectetur consequat.';
9+
const LOREM_IPSUM_MEDIUM =
10+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque aliquam leo nec venenatis. Vivamus rutrum aliquet ultrices. In vel turpis quis velit consectetur consequat.';
1111

12-
const LOREM_IPSUM_SMALL = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque aliquam leo nec venenatis.';
12+
const LOREM_IPSUM_SMALL =
13+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque aliquam leo nec venenatis.';
1314

1415
const App = () => (
1516
<SafeAreaView style={styles.root}>
1617
<View style={styles.container}>
1718
<>
18-
<Text style={styles.title}>Lorem Ipsum Large</Text>
19-
<SeeMore numberOfLines={4}>
20-
{LOREM_IPSUM_LARGE}
21-
</SeeMore>
19+
<Text style={styles.title}>Large text, 4 lines, see more link</Text>
20+
<SeeMore numberOfLines={4}>{LOREM_IPSUM_LARGE}</SeeMore>
2221
</>
2322
<>
24-
<Text style={styles.title}>Lorem Ipsum Medium</Text>
25-
<SeeMore numberOfLines={2}>
23+
<Text style={styles.title}>Medium text, 2 lines, see more link, bold link style</Text>
24+
<SeeMore numberOfLines={2} linkStyle={{ fontWeight: '500' }}>
2625
{LOREM_IPSUM_MEDIUM}
2726
</SeeMore>
2827
</>
2928
<>
30-
<Text style={styles.title}>Lorem Ipsum Small</Text>
31-
<SeeMore numberOfLines={2}>
32-
{LOREM_IPSUM_SMALL}
33-
</SeeMore>
29+
<Text style={styles.title}>Small text, 2 lines</Text>
30+
<SeeMore numberOfLines={2}>{LOREM_IPSUM_SMALL}</SeeMore>
3431
</>
3532
</View>
3633
</SafeAreaView>

‎example/ios/Podfile.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@ DEPENDENCIES:
253253
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
254254

255255
SPEC REPOS:
256-
trunk:
256+
https://cdn.cocoapods.org/:
257257
- boost-for-react-native
258258

259259
EXTERNAL SOURCES:
@@ -341,4 +341,4 @@ SPEC CHECKSUMS:
341341

342342
PODFILE CHECKSUM: 79310af6b976c356911a8a833e9b99c3399fdda3
343343

344-
COCOAPODS: 1.9.1
344+
COCOAPODS: 1.7.5

‎images/screenshot1.png‎

97.4 KB
Loading

‎images/screenshot2.png‎

79.2 KB
Loading

‎images/screenshot3.png‎

11.1 KB
Loading

‎index.d.ts‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,36 @@
11
declare module 'react-native-see-more-inline' {
22
import { ComponentClass, ReactElement } from 'react';
3+
import { StyleProp, TextStyle, ViewStyle } from 'react-native';
34

45
export type SeeMoreProps = {
6+
/**
7+
* Number of lines to limit the text to
8+
*/
59
numberOfLines: number;
6-
linkColor: string;
7-
10+
/**
11+
* Color of the see more/see less link
12+
*/
13+
linkColor?: string;
14+
/**
15+
* Color of the see more/see less link when it is being pressed
16+
*/
817
linkPressedColor?: string;
9-
10-
seeMoreTextStyle?: StyleProp<TextStyle>;
11-
seeLessTextStyle?: StyleProp<TextStyle>;
12-
13-
seeMoreText?: string | ReactElement;
14-
seeLessText?: string | ReactElement;
15-
16-
style?: StyleProp<ViewStyle>;
18+
/**
19+
* Extra styles for the see more/see less link if any
20+
*/
21+
linkStyle?: StyleProp<TextStyle>;
22+
/**
23+
* String value to override "see more" text
24+
*/
25+
seeMoreText?: string;
26+
/**
27+
* String value to override "see less" text
28+
*/
29+
seeLessText?: string;
30+
/**
31+
* Style of the base text
32+
*/
33+
style?: StyleProp<TextStyle>;
1734
};
1835

1936
const SeeMore: ComponentClass<SeeMoreProps>;

‎src/SeeMore/SeeMore.js‎

Lines changed: 9 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -108,39 +108,22 @@ class SeeMore extends React.Component {
108108
children: text,
109109
linkColor,
110110
linkPressedColor,
111-
seeMoreTextStyle,
112-
seeLessTextStyle,
111+
linkStyle,
113112
seeMoreText,
114113
seeLessText,
115-
style,
116114
} = this.props;
117115
const isTruncable = truncationIndex < text.length;
118116

119117
if (!isTruncable) {
120118
return null;
121119
}
122120

123-
const SeeLessText =
124-
typeof seeLessText === 'string' ? (
125-
<Text style={seeLessTextStyle}> {seeLessText}</Text>
126-
) : (
127-
seeLessText
128-
);
129-
130-
const SeeMoreText =
131-
typeof seeMoreText === 'string' ? (
132-
<Text style={seeMoreTextStyle}> {seeMoreText}</Text>
133-
) : (
134-
seeMoreText
135-
);
136-
137121
return (
138-
<Text
139-
{...this.props}
140-
{...this.panResponder.panHandlers}
141-
style={[style, { color: isLinkPressed ? linkPressedColor : linkColor }]}>
122+
<Text {...this.props} {...this.panResponder.panHandlers}>
142123
{isShowingMore ? null : <Text {...this.props}>...</Text>}
143-
{isShowingMore ? SeeLessText : SeeMoreText}
124+
<Text style={[linkStyle, { color: isLinkPressed ? linkPressedColor : linkColor }]}>
125+
{isShowingMore ? ` ${seeLessText}` : ` ${seeMoreText}`}
126+
</Text>
144127
</Text>
145128
);
146129
}
@@ -168,10 +151,9 @@ SeeMore.propTypes = {
168151
numberOfLines: PropTypes.number.isRequired,
169152
linkColor: PropTypes.string,
170153
linkPressedColor: PropTypes.string,
171-
seeMoreTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
172-
seeLessTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
173-
seeMoreText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
174-
seeLessText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
154+
linkStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
155+
seeMoreText: PropTypes.string,
156+
seeLessText: PropTypes.string,
175157
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
176158
};
177159

@@ -185,6 +167,7 @@ SeeMore.defaultProps = {
185167
fontSize: 14,
186168
fontWeight: '300',
187169
},
170+
linkStyle: undefined,
188171
};
189172

190173
export default SeeMore;

0 commit comments

Comments
 (0)