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 src/components/types.jssrc/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>
           );