Add support for Text Props (#37)

* Add support for RN Text props

* Add textProps to sample

* Update documentation

* Add tests for text props

Author: raphaelpor

docs/GetStarted.md

@@ -43,7 +43,32 @@ type contentState: {
 
 See our [`sample`](https://github.com/globocom/react-native-draftjs-render/tree/master/sample) folder for more details.
 
+## Props
+
+- **contentState**: the Draft.js model with `blocks` and `entityMap`.
+```js
+// Flow type for contentState
+type contentState: {
+  blocks: Array<Object>,
+  entityMap: Object,
+};
+```
+
+- **customStyles**: Object with your custom styles. ([Documentation](https://github.com/globocom/react-native-draftjs-render/blob/master/docs/CustomStyles.md)).
+
+- **atomicHandler**: Function to handle atomic types ([Documentation](https://github.com/globocom/react-native-draftjs-render/blob/master/docs/AtomicTypes.md)).
+
+- **navigate** (optional): Function to be called when `onPress` is fired.
+
+- **orderedListSeparator** (optional): String to be rendered after each number of the ordered lists.
+
+- **customBlockHandler** (optional): Default element to be rendered when some type is not knew.
+
+- **depthMargin** (optional): Margin left for each level of depth lists.
+
+- **textProps** (optional): Object containing all the Text props supported by React Native. (See [Text Props](https://facebook.github.io/react-native/docs/text.html#props)).
+
 ## Next
 
 1. **[Custom Styles](https://github.com/globocom/react-native-draftjs-render/blob/master/docs/CustomStyles.md)**.
-2. Atomic Types (To do).
+2. **[Atomic Types](https://github.com/globocom/react-native-draftjs-render/blob/master/docs/AtomicTypes.md)**.

sample/__tests__/getBlocks.test.js

@@ -248,6 +248,18 @@ describe('return specific component based on type', () => {
     expect(customBlockHandler.mock.calls[0][1].customBlockHandler).toBe(customBlockHandler);
     expect(result[0]).toBe(myCustomComponent);
   });
+
+  test('pass text props to <Text />', () => {
+    const contentState = {
+      blocks: [
+        { type: 'blockquote', text: 'My text' },
+        { type: 'unstyled', text: 'My text' },
+      ],
+    };
+    const result = getBlocks({ contentState, textProps: { selectable: true } });
+    expect(result[0].props.children[1].props.textProps.selectable).toBe(true);
+    expect(result[1].props.children[1].props.textProps.selectable).toBe(true);
+  });
 });
 
 describe('ViewAfterList', () => {

sample/src/index.js

@@ -113,6 +113,9 @@ export default function App(): any {
     customStyles,
     atomicHandler,
     depthMargin: 32,
+    textProps: {
+      selectable: true,
+    },
   };
   const blocks = getRNDraftJSBlocks(params);
 

src/components/BlockQuote.js

@@ -14,7 +14,7 @@ import {
 
 import DraftJsText from '../components/DraftJsText';
 
-import type { BlockQuotePropsType } from './defaultProps';
+import type { BlockQuotePropsType } from './types';
 
 const styles = StyleSheet.create({
   blockquoteContainer: {

src/components/DraftJsText.js

@@ -12,7 +12,7 @@ import { Text } from 'react-native';
 import loadAttributes from '../loadAttributes';
 
 import defaultStyles from './defaultStyles';
-import type { DraftJsTextPropsType } from './defaultProps';
+import type { DraftJsTextPropsType } from './types';
 
 const DraftJsText = (props: DraftJsTextPropsType): any => {
   let textElements = props.text;
@@ -25,6 +25,7 @@ const DraftJsText = (props: DraftJsTextPropsType): any => {
       entityRanges: props.entityRanges,
       entityMap: props.entityMap,
       navigate: props.navigate,
+      textProps: props.textProps,
     });
 
     const customStyle = props.customStyles ? props.customStyles[props.type] : undefined;
@@ -33,6 +34,7 @@ const DraftJsText = (props: DraftJsTextPropsType): any => {
     return (
       <Text
         style={[defaultStyles[props.type], textAlignStyle, customStyle]}
+        {...props.textProps}
       >{textElements}
       </Text>);
   }

src/components/OrderedListItem.js

@@ -15,7 +15,7 @@ import {
 
 import DraftJsText from '../components/DraftJsText';
 
-import type { OrderedListItemPropsType } from './defaultProps';
+import type { OrderedListItemPropsType } from './types';
 
 const styles = StyleSheet.create({
   orderedListItemContainer: {

src/components/TextStyled.js

@@ -12,7 +12,7 @@ import {
   StyleSheet,
 } from 'react-native';
 
-import type { TextStyledPropsType } from './defaultProps';
+import type { TextStyledPropsType } from './types';
 
 const styles = StyleSheet.flatten({
   bold: {

src/components/UnorderedListItem.js

@@ -14,7 +14,7 @@ import {
 
 import DraftJsText from '../components/DraftJsText';
 
-import type { UnorderedListItemPropsType } from './defaultProps';
+import type { UnorderedListItemPropsType } from './types';
 
 const styles = StyleSheet.create({
   unorderedListItemContainer: {

src/components/defaultProps.js renamed to src/components/types.js

@@ -14,6 +14,7 @@ export type BlockQuotePropsType = {
   inlineStyles: Array<Object>,
   entityRanges: Array<Object>,
   entityMap: Object,
+  textProps: ?Object,
 };
 
 export type DraftJsTextPropsType = {
@@ -25,6 +26,7 @@ export type DraftJsTextPropsType = {
   entityRanges: Array<Object>,
   entityMap: Object,
   navigate?: Function,
+  textProps: ?Object,
 };
 
 export type OrderedListItemPropsType = {
@@ -38,7 +40,8 @@ export type OrderedListItemPropsType = {
   counter: number,
   separator?: string,
   depth: number,
-  defaultMarginLeft: number
+  defaultMarginLeft: number,
+  textProps: ?Object,
 };
 
 export type UnorderedListItemPropsType = {
@@ -50,7 +53,8 @@ export type UnorderedListItemPropsType = {
   entityRanges: Array<Object>,
   entityMap: Object,
   depth: number,
-  defaultMarginLeft: number
+  defaultMarginLeft: number,
+  textProps: ?Object,
 };
 
 export type TextStyledPropsType = {

src/getBlocks.js

@@ -26,6 +26,7 @@ type ParamsType = {
   orderedListSeparator?: string,
   customBlockHandler?: (Object, ParamsType) => any,
   depthMargin?: number,
+  textProps: ?Object,
 };
 
 export const ViewAfterList = (props: Object): React$Element<*> => (
@@ -43,6 +44,8 @@ const getBlocks = (params: ParamsType): ?Array<React$Element<*>> => {
     atomicHandler,
   } = params;
 
+  const textProps = params.textProps || {};
+
   if (!contentState.blocks) {
     return null;
   }
@@ -121,6 +124,7 @@ const getBlocks = (params: ParamsType): ?Array<React$Element<*>> => {
                 entityMap={contentState.entityMap}
                 customStyles={customStyles}
                 navigate={navigate}
+                textProps={textProps}
               />
             </View>
           );
@@ -153,6 +157,7 @@ const getBlocks = (params: ParamsType): ?Array<React$Element<*>> => {
                 entityMap={contentState.entityMap}
                 customStyles={customStyles}
                 navigate={navigate}
+                textProps={textProps}
               />
             </View>
           );
@@ -170,6 +175,7 @@ const getBlocks = (params: ParamsType): ?Array<React$Element<*>> => {
                 customStyles={customStyles}
                 navigate={navigate}
                 defaultMarginLeft={depthMargin}
+                textProps={textProps}
               />
             </View>
           );
@@ -208,6 +214,7 @@ const getBlocks = (params: ParamsType): ?Array<React$Element<*>> => {
                 customStyles={customStyles}
                 navigate={navigate}
                 defaultMarginLeft={depthMargin}
+                textProps={textProps}
               />
             </View>
           );

src/loadAttributes.js

@@ -32,6 +32,7 @@ type ParamsType = {
   entityRanges: Array<Object>,
   entityMap: Object,
   navigate?: Function,
+  textProps: ?Object,
 };
 
 const loadAttributes = (params: ParamsType): any => {
@@ -42,6 +43,7 @@ const loadAttributes = (params: ParamsType): any => {
     entityRanges,
     entityMap,
     navigate,
+    textProps,
   } = params;
 
   const defaultNavigationFn = (url: string) => { Linking.openURL(url); };
@@ -54,7 +56,12 @@ const loadAttributes = (params: ParamsType): any => {
     const attrs = flatAttributesList(attributes);
 
     if (attrs[0].offset > 0) {
-      elementList.push(<Text key={generateKey()}>{substring(text, 0, attrs[0].offset)}</Text>);
+      const element = (
+        <Text key={generateKey()} {...textProps}>
+          {substring(text, 0, attrs[0].offset)}
+        </Text>
+      );
+      elementList.push(element);
     }
 
     attrs.forEach((item: Object, index: number) => {
@@ -64,7 +71,7 @@ const loadAttributes = (params: ParamsType): any => {
         const subText = substring(text, offset, item.offset);
 
         if (subText.length) {
-          elementList.push(<Text key={generateKey()}>{subText}</Text>);
+          elementList.push(<Text key={generateKey()} {...textProps}>{subText}</Text>);
         }
       }
 
@@ -74,6 +81,7 @@ const loadAttributes = (params: ParamsType): any => {
         type: itemType,
         text: substring(text, item.offset, item.offset + item.length),
         customStyles,
+        textProps,
       });
 
       const itemOnPress = getItemOnPress(item, entityMap, navigateFunction);
@@ -89,7 +97,7 @@ const loadAttributes = (params: ParamsType): any => {
     const subText = substring(text, offset, length(text));
 
     if (subText.length) {
-      elementList.push(<Text key={generateKey()}>{subText}</Text>);
+      elementList.push(<Text key={generateKey()} {...textProps}>{subText}</Text>);
     }
   } else {
     elementList.push(text);