[feat] Add link style prop

[feat] Add link style prop

Author: kashishgrover

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
     'react/jsx-props-no-spreading': ['off'],
     'react/jsx-filename-extension': ['off'],
     'no-use-before-define': ['off'],
-    'operator-linebreak': ['off']
+    'operator-linebreak': ['off'],
+    'object-curly-newline': ['off']
   },
 };

.prettierrc.js

@@ -1,7 +1,6 @@
 module.exports = {
   arrowParens: 'always',
   bracketSpacing: true,
-  jsxBracketSameLine: true,
   printWidth: 100,
   singleQuote: true,
   tabWidth: 2,

README.md

@@ -21,6 +21,10 @@ import SeeMore from 'react-native-see-more-inline';
 <SeeMore numberOfLines={2}>
   {VERY_LARGE_TEXT}
 </SeeMore>
+
+<SeeMore numberOfLines={2} linkStyle={{ fontWeight: '500' }}>
+  {VERY_LARGE_TEXT}
+</SeeMore>
 ```
 
 ### Props
@@ -29,6 +33,7 @@ import SeeMore from 'react-native-see-more-inline';
 | numberOfLines    | -                                                            | yes | number       |
 | linkColor        | '#2E75F0'                                                    | no  | string       |
 | linkPressedColor | '#163772'                                                    | no  | string       |
+| linkStyle        | undefined                                                    | no  | array/object |
 | seeMoreText      | 'see more'                                                   | no  | string       |
 | seeLessText      | 'see less'                                                   | no  | string       |
 | style            | `{ fontFamily: undefined, fontSize: 14, fontWeight: '300' }` | no  | array/object |

example/App.js

@@ -1,36 +1,33 @@
 import React from 'react';
-import {
-  StyleSheet, View, SafeAreaView, Text,
-} from 'react-native';
+import { StyleSheet, View, SafeAreaView, Text } from 'react-native';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import SeeMore from 'react-native-see-more-inline';
 
-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.';
+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.';
 
-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.';
+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.';
 
-const LOREM_IPSUM_SMALL = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque aliquam leo nec venenatis.';
+const LOREM_IPSUM_SMALL =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque aliquam leo nec venenatis.';
 
 const App = () => (
   <SafeAreaView style={styles.root}>
     <View style={styles.container}>
       <>
-        <Text style={styles.title}>Lorem Ipsum Large</Text>
-        <SeeMore numberOfLines={4}>
-          {LOREM_IPSUM_LARGE}
-        </SeeMore>
+        <Text style={styles.title}>Large text, 4 lines, see more link</Text>
+        <SeeMore numberOfLines={4}>{LOREM_IPSUM_LARGE}</SeeMore>
       </>
       <>
-        <Text style={styles.title}>Lorem Ipsum Medium</Text>
-        <SeeMore numberOfLines={2}>
+        <Text style={styles.title}>Medium text, 2 lines, see more link, bold link style</Text>
+        <SeeMore numberOfLines={2} linkStyle={{ fontWeight: '500' }}>
           {LOREM_IPSUM_MEDIUM}
         </SeeMore>
       </>
       <>
-        <Text style={styles.title}>Lorem Ipsum Small</Text>
-        <SeeMore numberOfLines={2}>
-          {LOREM_IPSUM_SMALL}
-        </SeeMore>
+        <Text style={styles.title}>Small text, 2 lines</Text>
+        <SeeMore numberOfLines={2}>{LOREM_IPSUM_SMALL}</SeeMore>
       </>
     </View>
   </SafeAreaView>

example/ios/Podfile.lock

@@ -253,7 +253,7 @@ DEPENDENCIES:
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  trunk:
+  https://cdn.cocoapods.org/:
     - boost-for-react-native
 
 EXTERNAL SOURCES:
@@ -341,4 +341,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 79310af6b976c356911a8a833e9b99c3399fdda3
 
-COCOAPODS: 1.9.1
+COCOAPODS: 1.7.5

images/screenshot1.png

@@ -1,19 +1,36 @@
 declare module 'react-native-see-more-inline' {
   import { ComponentClass, ReactElement } from 'react';
+  import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
   export type SeeMoreProps = {
+    /**
+     * Number of lines to limit the text to
+     */
     numberOfLines: number;
-    linkColor: string;
-
+    /**
+     * Color of the see more/see less link
+     */
+    linkColor?: string;
+    /**
+     * Color of the see more/see less link when it is being pressed
+     */
     linkPressedColor?: string;
-
-    seeMoreTextStyle?: StyleProp<TextStyle>;
-    seeLessTextStyle?: StyleProp<TextStyle>;
-
-    seeMoreText?: string | ReactElement;
-    seeLessText?: string | ReactElement;
-
-    style?: StyleProp<ViewStyle>;
+    /**
+     * Extra styles for the see more/see less link if any
+     */
+    linkStyle?: StyleProp<TextStyle>;
+    /**
+     * String value to override "see more" text
+     */
+    seeMoreText?: string;
+    /**
+     * String value to override "see less" text
+     */
+    seeLessText?: string;
+    /**
+     * Style of the base text
+     */
+    style?: StyleProp<TextStyle>;
   };
 
   const SeeMore: ComponentClass<SeeMoreProps>;

images/screenshot2.png

@@ -108,39 +108,22 @@ class SeeMore extends React.Component {
       children: text,
       linkColor,
       linkPressedColor,
-      seeMoreTextStyle,
-      seeLessTextStyle,
+      linkStyle,
       seeMoreText,
       seeLessText,
-      style,
     } = this.props;
     const isTruncable = truncationIndex < text.length;
 
     if (!isTruncable) {
       return null;
     }
 
-    const SeeLessText =
-      typeof seeLessText === 'string' ? (
-        <Text style={seeLessTextStyle}> {seeLessText}</Text>
-      ) : (
-        seeLessText
-      );
-
-    const SeeMoreText =
-      typeof seeMoreText === 'string' ? (
-        <Text style={seeMoreTextStyle}> {seeMoreText}</Text>
-      ) : (
-        seeMoreText
-      );
-
     return (
-      <Text
-        {...this.props}
-        {...this.panResponder.panHandlers}
-        style={[style, { color: isLinkPressed ? linkPressedColor : linkColor }]}>
+      <Text {...this.props} {...this.panResponder.panHandlers}>
         {isShowingMore ? null : <Text {...this.props}>...</Text>}
-        {isShowingMore ? SeeLessText : SeeMoreText}
+        <Text style={[linkStyle, { color: isLinkPressed ? linkPressedColor : linkColor }]}>
+          {isShowingMore ? ` ${seeLessText}` : ` ${seeMoreText}`}
+        </Text>
       </Text>
     );
   }
@@ -168,10 +151,9 @@ SeeMore.propTypes = {
   numberOfLines: PropTypes.number.isRequired,
   linkColor: PropTypes.string,
   linkPressedColor: PropTypes.string,
-  seeMoreTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  seeLessTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  seeMoreText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  seeLessText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  linkStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  seeMoreText: PropTypes.string,
+  seeLessText: PropTypes.string,
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };
 
@@ -185,6 +167,7 @@ SeeMore.defaultProps = {
     fontSize: 14,
     fontWeight: '300',
   },
+  linkStyle: undefined,
 };
 
 export default SeeMore;