changing rn draftjs return to return the list of elements without a react element wrapper

Author: Igor Canedo

index.js

@@ -6,44 +6,6 @@
 
 // @flow
 
-import React from 'react';
-import {
-  View,
-} from 'react-native';
+import getRNDraftJSBlocks from './src/getBlocks';
 
-import getBlocks from './src/getBlocks';
-
-const styles = {
-  container: {
-    flex: 1,
-  },
-};
-
-type RnDraftJsRenderPropsType = {
- contentState: Object,
- customStyles?: Object,
- atomicHandler: Function,
- navigate?: Function,
- orderedListSeparator?: string,
-};
-
-const RNDraftJSRender = (props: RnDraftJsRenderPropsType): any => {
-  const blocks = getBlocks(
-    props.contentState, props.customStyles, props.atomicHandler,
-    props.navigate, props.orderedListSeparator);
-
-  return (
-    <View style={styles.container}>
-      { blocks }
-    </View>
-  );
-};
-
-RNDraftJSRender.defaultProps = {
-  customStyles: {},
-  atomicHandler: (): any => null,
-  navigate: undefined,
-  orderedListSeparator: '.',
-};
-
-module.exports = RNDraftJSRender;
+module.exports = getRNDraftJSBlocks;

sample/src/index.js

@@ -14,15 +14,15 @@ import {
   View,
 } from 'react-native';
 
-import RNDraftJS from '../react-native-draftjs-render';
+import getRNDraftJSBlocks from '../react-native-draftjs-render';
 
 import data from './resourceMock.json';
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     paddingHorizontal: 16,
-    backgroundColor: '#F5FCFF',
+    backgroundColor: '#f4f4f4',
   },
 });
 
@@ -107,13 +107,16 @@ const atomicHandler = (item: Object): any => {
 };
 
 export default function App(): any {
+  const params = {
+    contentState: data,
+    customStyles,
+    atomicHandler,
+  };
+  const blocks = getRNDraftJSBlocks(params);
+
   return (
     <ScrollView style={styles.container}>
-      <RNDraftJS
-        contentState={data}
-        customStyles={customStyles}
-        atomicHandler={atomicHandler}
-      />
+      {blocks}
     </ScrollView>
   );
 }

src/getBlocks.js

@@ -17,16 +17,31 @@ import UnorderedListItem from './components/UnorderedListItem';
 import OrderedListItem from './components/OrderedListItem';
 import generateKey from './utils/generateKey';
 
-const getBlocks = (
-  bodyData: Object = {},
-  customStyles: Object = {},
+type ParamsType = {
+  contentState: Object,
+  customStyles: Object,
   atomicHandler: Function,
   navigate?: Function,
-  orderedListSeparator?: string): any => {
-  if (!bodyData.blocks) {
+  orderedListSeparator?: string,
+};
+
+const getBlocks = (params: ParamsType): ?Array<*> => {
+  const {
+    contentState,
+    customStyles,
+    navigate,
+    orderedListSeparator,
+  } = params;
+  let { atomicHandler } = params;
+
+  if (!contentState.blocks) {
     return null;
   }
 
+  if (typeof atomicHandler === 'undefined') {
+    atomicHandler = (item: Object): any => item;
+  }
+
   const counters = {
     'unordered-list-item': {
       count: 0,
@@ -45,6 +60,8 @@ const getBlocks = (
   function checkCounter(counter: Object): any {
     const myCounter = counter;
 
+
+    // list types
     if (myCounter.count >= 0) {
       if (myCounter.count > 0) {
         myCounter.count = 0;
@@ -53,6 +70,7 @@ const getBlocks = (
       return null;
     }
 
+    // non list types
     if (myCounter['unordered-list-item'].count > 0 || myCounter['ordered-list-item'].count > 0) {
       myCounter['unordered-list-item'].count = 0;
       myCounter['ordered-list-item'].count = 0;
@@ -62,7 +80,7 @@ const getBlocks = (
     return null;
   }
 
-  return bodyData.blocks
+  return contentState.blocks
     .map((item: Object): any => {
       const itemData = {
         key: item.key,
@@ -88,7 +106,7 @@ const getBlocks = (
               {viewBefore}
               <DraftJsText
                 {...itemData}
-                entityMap={bodyData.entityMap}
+                entityMap={contentState.entityMap}
                 customStyles={customStyles}
                 navigate={navigate}
               />
@@ -110,7 +128,7 @@ const getBlocks = (
               {viewBefore}
               <BlockQuote
                 {...itemData}
-                entityMap={bodyData.entityMap}
+                entityMap={contentState.entityMap}
                 customStyles={customStyles}
                 navigate={navigate}
               />
@@ -126,7 +144,7 @@ const getBlocks = (
               {viewBefore}
               <UnorderedListItem
                 {...itemData}
-                entityMap={bodyData.entityMap}
+                entityMap={contentState.entityMap}
                 customStyles={customStyles}
                 navigate={navigate}
               />
@@ -144,7 +162,7 @@ const getBlocks = (
                 {...itemData}
                 separator={orderedListSeparator}
                 counter={counters[item.type].count}
-                entityMap={bodyData.entityMap}
+                entityMap={contentState.entityMap}
                 customStyles={customStyles}
                 navigate={navigate}
               />