Add nested unordered list items

sample/__tests__/components/OrderedListItem.test.js

@@ -42,6 +42,7 @@ it('extends a style with a customStyle', () => {
       fontWeight: 'normal',
       letterSpacing: -0.75,
       lineHeight: 32,
+      marginLeft: 10,
     },
     orderedListItemContainer: {
       flex: 2,

sample/__tests__/components/__snapshots__/OrderedListItem.test.js.snap

@@ -30,6 +30,9 @@ exports[`extends a style with a customStyle 1`] = `
         Object {
           "fontSize": 14,
         },
+        Object {
+          "marginLeft": 0,
+        },
       ]
     }
   >
@@ -51,6 +54,7 @@ exports[`extends a style with a customStyle 1`] = `
           "fontWeight": "normal",
           "letterSpacing": -0.75,
           "lineHeight": 32,
+          "marginLeft": 10,
         },
       ]
     }
@@ -86,6 +90,9 @@ exports[`renders correctly with a ordered-list-item 1`] = `
           "marginRight": 8,
         },
         undefined,
+        Object {
+          "marginLeft": 0,
+        },
       ]
     }
   >
@@ -137,6 +144,9 @@ exports[`renders null without a ordered-list-item 1`] = `
           "marginRight": 8,
         },
         undefined,
+        Object {
+          "marginLeft": 0,
+        },
       ]
     }
   >

sample/src/resourceMock.json

@@ -180,6 +180,24 @@
       "entityRanges": [],
       "data": {}
     },
+    {
+      "key": "2grlv",
+      "text": "Proin magna. Donec posuere vulputate arcu",
+      "type": "ordered-list-item",
+      "depth": 1,
+      "inlineStyleRanges": [],
+      "entityRanges": [],
+      "data": {}
+    },
+    {
+      "key": "2gelv",
+      "text": "Proin magna. Donec posuere vulputate arcu",
+      "type": "ordered-list-item",
+      "depth": 1,
+      "inlineStyleRanges": [],
+      "entityRanges": [],
+      "data": {}
+    },
     {
       "key": "cdsdj",
       "text": "Etiam feugiat lorem non metus",
@@ -198,6 +216,24 @@
       "entityRanges": [],
       "data": {}
     },
+    {
+      "key": "3grlv",
+      "text": "Proin magna. Donec posuere vulputate arcu",
+      "type": "ordered-list-item",
+      "depth": 1,
+      "inlineStyleRanges": [],
+      "entityRanges": [],
+      "data": {}
+    },
+    {
+      "key": "3gelv",
+      "text": "Proin magna. Donec posuere vulputate arcu",
+      "type": "ordered-list-item",
+      "depth": 1,
+      "inlineStyleRanges": [],
+      "entityRanges": [],
+      "data": {}
+    },
     {
       "key": "c9mftj",
       "text": "Phasellus a est.",

src/components/OrderedListItem.js

@@ -45,10 +45,19 @@ const OrderedListItem = (props: OrderedListItemPropsType): any => {
     props.customStyles.orderedListItemNumber :
     undefined;
 
+  let marginLeft = 0;
+  if (props.depth !== undefined) {
+    marginLeft =
+      orderedListItemCustomStyleNumber && orderedListItemCustomStyleNumber.marginLeft ?
+        props.depth * orderedListItemCustomStyleNumber.marginLeft :
+        props.depth * props.defaultMarginLeft;
+  }
+
   return (
     <View style={[styles.orderedListItemContainer, orderedListItemCustomStyleContainer]}>
       <Text
-        style={[styles.orderedListItemNumber, orderedListItemCustomStyleNumber]}
+        style={[styles.orderedListItemNumber, orderedListItemCustomStyleNumber,
+          { marginLeft }]}
       >
         {counter}{separator}
       </Text>
@@ -62,6 +71,7 @@ OrderedListItem.defaultProps = {
   counter: 1,
   customStyles: {},
   separator: '.',
+  defaultMarginLeft: 7,
 };
 
 export default OrderedListItem;

src/components/UnorderedListItem.js

@@ -42,16 +42,19 @@ const UnorderedListItem = (props: UnorderedListItemPropsType): any => {
     undefined;
 
 
-  let marginLeft = 0
-    if(props.depth !== undefined){
-    marginLeft =(unorderedListItemCustomStyleBullet && unorderedListItemCustomStyleBullet.marginLeft) ? 
-    props.depth * unorderedListItemCustomStyleBullet.marginLeft :
-    props.depth * props.defaultMarginLeft;
+  let marginLeft = 0;
+  if (props.depth !== undefined) {
+    marginLeft =
+      unorderedListItemCustomStyleBullet && unorderedListItemCustomStyleBullet.marginLeft ?
+        props.depth * unorderedListItemCustomStyleBullet.marginLeft :
+        props.depth * props.defaultMarginLeft;
   }
-  
+
   return (
     <View style={[styles.unorderedListItemContainer, unorderedListItemCustomStyleContainer]}>
-      <View style={[styles.unorderedListItemBullet, unorderedListItemCustomStyleBullet, {marginLeft : marginLeft}]} />
+      <View style={[styles.unorderedListItemBullet, unorderedListItemCustomStyleBullet,
+        { marginLeft }]}
+      />
       <DraftJsText
         {...props}
       />
@@ -60,7 +63,7 @@ const UnorderedListItem = (props: UnorderedListItemPropsType): any => {
 
 UnorderedListItem.defaultProps = {
   customStyles: {},
-  defaultMarginLeft: 7
+  defaultMarginLeft: 7,
 };
 
 export default UnorderedListItem;

src/components/defaultProps.js

@@ -34,6 +34,8 @@ export type OrderedListItemPropsType = {
   entityMap: Object,
   counter: number,
   separator?: string,
+  depth: number,
+  defaultMarginLeft: number
 };
 
 export type UnorderedListItemPropsType = {
@@ -43,6 +45,8 @@ export type UnorderedListItemPropsType = {
   inlineStyles: Array<Object>,
   entityRanges: Array<Object>,
   entityMap: Object,
+  depth: number,
+  defaultMarginLeft: number
 };
 
 export type TextStyledPropsType = {

src/getBlocks.js

@@ -163,15 +163,34 @@ const getBlocks = (params: ParamsType): ?Array<*> => {
         }
 
         case 'ordered-list-item': {
-          counters[item.type].count += 1;
+          const { type } = item;
+          const parentIndex = counters[type].count;
+          let number = 0;
+
+          // when new ordered list reset childCounters
+          if (parentIndex === 0) {
+            counters[type].childCounters = [];
+          }
+
+          if (itemData.depth !== undefined && itemData.depth >= 1) {
+            if (counters[type].childCounters[parentIndex] === undefined) {
+              counters[type].childCounters[parentIndex] = 0;
+            }
+            counters[type].childCounters[parentIndex] += 1;
+            number = counters[type].childCounters[parentIndex];
+          } else {
+            counters[type].count += 1;
+            number = counters[type].count;
+          }
+
           const viewBefore = checkCounter(counters['unordered-list-item']);
           return (
             <View key={generateKey()}>
               {viewBefore}
               <OrderedListItem
                 {...itemData}
                 separator={orderedListSeparator}
-                counter={counters[item.type].count}
+                counter={number}
                 entityMap={contentState.entityMap}
                 customStyles={customStyles}
                 navigate={navigate}