Skip to content

Commit 6e7ee7e

Browse files
author
Kashish Grover
committed
fix: fixed link style prop
Also removed ReactElement alternative for see more link. It is broken.
1 parent 6c1a1f1 commit 6e7ee7e

File tree

7 files changed

+245
-50
lines changed

7 files changed

+245
-50
lines changed

‎.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,

‎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

‎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;

‎src/__tests__/SeeMore.test.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ describe('SeeMore', () => {
2323
.spyOn(SeeMoreUtil, 'getTruncationIndex')
2424
.mockImplementation(() => new Promise((a) => a(truncationIndex)));
2525

26-
const { getByTestId, getByText } = render(
26+
const baseElement = render(
2727
<SeeMore numberOfLines={2}>{text}</SeeMore>,
2828
);
2929

30-
fireEvent.layout(getByTestId('SeeMore'), {
30+
fireEvent.layout(baseElement.getByTestId('SeeMore'), {
3131
nativeEvent: {
3232
layout: {
3333
width: 200,
@@ -37,8 +37,9 @@ describe('SeeMore', () => {
3737
});
3838

3939
await wait(() => {
40-
expect(getByText(/see more/)).toBeTruthy();
41-
expect(getByText(text.slice(0, truncationIndex))).toBeTruthy();
40+
expect(baseElement.getByText(/see more/)).toBeTruthy();
41+
expect(baseElement.getByText(text.slice(0, truncationIndex))).toBeTruthy();
42+
expect(baseElement).toMatchSnapshot();
4243
});
4344
});
4445
});

‎src/__tests__/__snapshots__/SeeMore.test.js.snap‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,219 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`SeeMore renders big text correctly 1`] = `
4+
Object {
5+
"asJSON": [Function],
6+
"baseElement": <View
7+
pointerEvents="box-none"
8+
style={
9+
Object {
10+
"flex": 1,
11+
}
12+
}
13+
>
14+
<View
15+
collapsable={true}
16+
pointerEvents="box-none"
17+
style={
18+
Object {
19+
"flex": 1,
20+
}
21+
}
22+
>
23+
<Text
24+
numberOfLines={2}
25+
testID="SeeMore"
26+
>
27+
<Text
28+
linkColor="#2E75F0"
29+
linkPressedColor="#163772"
30+
numberOfLines={2}
31+
seeLessText="see less"
32+
seeMoreText="see more"
33+
style={
34+
Object {
35+
"fontFamily": undefined,
36+
"fontSize": 14,
37+
"fontWeight": "300",
38+
}
39+
}
40+
>
41+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo c
42+
</Text>
43+
<Text
44+
linkColor="#2E75F0"
45+
linkPressedColor="#163772"
46+
numberOfLines={2}
47+
seeLessText="see less"
48+
seeMoreText="see more"
49+
style={
50+
Object {
51+
"fontFamily": undefined,
52+
"fontSize": 14,
53+
"fontWeight": "300",
54+
}
55+
}
56+
>
57+
<Text
58+
linkColor="#2E75F0"
59+
linkPressedColor="#163772"
60+
numberOfLines={2}
61+
seeLessText="see less"
62+
seeMoreText="see more"
63+
style={
64+
Object {
65+
"fontFamily": undefined,
66+
"fontSize": 14,
67+
"fontWeight": "300",
68+
}
69+
}
70+
>
71+
...
72+
</Text>
73+
<Text
74+
style={
75+
Array [
76+
undefined,
77+
Object {
78+
"color": "#2E75F0",
79+
},
80+
]
81+
}
82+
>
83+
see more
84+
</Text>
85+
</Text>
86+
</Text>
87+
</View>
88+
</View>,
89+
"container": <View
90+
collapsable={true}
91+
pointerEvents="box-none"
92+
style={
93+
Object {
94+
"flex": 1,
95+
}
96+
}
97+
>
98+
<Text
99+
numberOfLines={2}
100+
testID="SeeMore"
101+
>
102+
<Text
103+
linkColor="#2E75F0"
104+
linkPressedColor="#163772"
105+
numberOfLines={2}
106+
seeLessText="see less"
107+
seeMoreText="see more"
108+
style={
109+
Object {
110+
"fontFamily": undefined,
111+
"fontSize": 14,
112+
"fontWeight": "300",
113+
}
114+
}
115+
>
116+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo c
117+
</Text>
118+
<Text
119+
linkColor="#2E75F0"
120+
linkPressedColor="#163772"
121+
numberOfLines={2}
122+
seeLessText="see less"
123+
seeMoreText="see more"
124+
style={
125+
Object {
126+
"fontFamily": undefined,
127+
"fontSize": 14,
128+
"fontWeight": "300",
129+
}
130+
}
131+
>
132+
<Text
133+
linkColor="#2E75F0"
134+
linkPressedColor="#163772"
135+
numberOfLines={2}
136+
seeLessText="see less"
137+
seeMoreText="see more"
138+
style={
139+
Object {
140+
"fontFamily": undefined,
141+
"fontSize": 14,
142+
"fontWeight": "300",
143+
}
144+
}
145+
>
146+
...
147+
</Text>
148+
<Text
149+
style={
150+
Array [
151+
undefined,
152+
Object {
153+
"color": "#2E75F0",
154+
},
155+
]
156+
}
157+
>
158+
see more
159+
</Text>
160+
</Text>
161+
</Text>
162+
</View>,
163+
"debug": [Function],
164+
"findAllByDisplayValue": [Function],
165+
"findAllByHintText": [Function],
166+
"findAllByLabelText": [Function],
167+
"findAllByPlaceholderText": [Function],
168+
"findAllByRole": [Function],
169+
"findAllByTestId": [Function],
170+
"findAllByText": [Function],
171+
"findAllByTitle": [Function],
172+
"findByDisplayValue": [Function],
173+
"findByHintText": [Function],
174+
"findByLabelText": [Function],
175+
"findByPlaceholderText": [Function],
176+
"findByRole": [Function],
177+
"findByTestId": [Function],
178+
"findByText": [Function],
179+
"findByTitle": [Function],
180+
"getAllByDisplayValue": [Function],
181+
"getAllByHintText": [Function],
182+
"getAllByLabelText": [Function],
183+
"getAllByPlaceholderText": [Function],
184+
"getAllByRole": [Function],
185+
"getAllByTestId": [Function],
186+
"getAllByText": [Function],
187+
"getAllByTitle": [Function],
188+
"getByDisplayValue": [Function],
189+
"getByHintText": [Function],
190+
"getByLabelText": [Function],
191+
"getByPlaceholderText": [Function],
192+
"getByRole": [Function],
193+
"getByTestId": [Function],
194+
"getByText": [Function],
195+
"getByTitle": [Function],
196+
"queryAllByDisplayValue": [Function],
197+
"queryAllByHintText": [Function],
198+
"queryAllByLabelText": [Function],
199+
"queryAllByPlaceholderText": [Function],
200+
"queryAllByRole": [Function],
201+
"queryAllByTestId": [Function],
202+
"queryAllByText": [Function],
203+
"queryAllByTitle": [Function],
204+
"queryByDisplayValue": [Function],
205+
"queryByHintText": [Function],
206+
"queryByLabelText": [Function],
207+
"queryByPlaceholderText": [Function],
208+
"queryByRole": [Function],
209+
"queryByTestId": [Function],
210+
"queryByText": [Function],
211+
"queryByTitle": [Function],
212+
"rerender": [Function],
213+
"unmount": [Function],
214+
}
215+
`;
216+
3217
exports[`SeeMore renders small text correctly 1`] = `
4218
<View
5219
pointerEvents="box-none"

0 commit comments

Comments
 (0)