RN-578 Properly aligned list items with indices above 10 (#1304)

app/components/markdown/markdown.js

@@ -273,10 +273,11 @@ export default class Markdown extends PureComponent {
         );
     }
 
-    renderList = ({children, tight, type}) => {
+    renderList = ({children, start, tight, type}) => {
         return (
             <MarkdownList
                 ordered={type !== 'bullet'}
+                start={start}
                 tight={tight}
             >
                 {children}

app/components/markdown/markdown_list.js

@@ -9,12 +9,24 @@ export default class MarkdownList extends PureComponent {
     static propTypes = {
         children: PropTypes.node.isRequired,
         ordered: PropTypes.bool.isRequired,
+        start: PropTypes.number,
         tight: PropTypes.bool
     };
 
+    static defaultProps = {
+        start: 1
+    };
+
     render() {
+        let bulletWidth = 15;
+        if (this.props.ordered) {
+            const lastNumber = (this.props.start + this.props.children.length) - 1;
+            bulletWidth = (9 * lastNumber.toString().length) + 7;
+        }
+
         const children = React.Children.map(this.props.children, (child) => {
             return React.cloneElement(child, {
+                bulletWidth,
                 ordered: this.props.ordered,
                 tight: this.props.tight
             });

app/components/markdown/markdown_list_item.js

@@ -17,6 +17,7 @@ export default class MarkdownListItem extends PureComponent {
         ordered: PropTypes.bool.isRequired,
         continue: PropTypes.bool,
         index: PropTypes.number.isRequired,
+        bulletWidth: PropTypes.number,
         bulletStyle: CustomPropTypes.Style,
         level: PropTypes.number
     };
@@ -26,7 +27,7 @@ export default class MarkdownListItem extends PureComponent {
         if (this.props.continue) {
             bullet = '';
         } else if (this.props.ordered) {
-            bullet = this.props.index + '. ';
+            bullet = this.props.index + '.';
         } else if (this.props.level % 2 === 0) {
             bullet = '◦';
         } else {
@@ -35,7 +36,7 @@ export default class MarkdownListItem extends PureComponent {
 
         return (
             <View style={style.container}>
-                <View style={style.bullet}>
+                <View style={[{width: this.props.bulletWidth}, style.bullet]}>
                     <Text style={this.props.bulletStyle}>
                         {bullet}
                     </Text>
@@ -50,7 +51,8 @@ export default class MarkdownListItem extends PureComponent {
 
 const style = StyleSheet.create({
     bullet: {
-        width: 15
+        alignItems: 'flex-end',
+        marginRight: 5
     },
     container: {
         flexDirection: 'row',

app/components/markdown/transform.js

@@ -13,7 +13,7 @@ export function addListItemIndices(ast) {
             const node = e.node;
 
             if (node.type === 'list') {
-                let i = node.listStart || 1; // List indices match what would be displayed in the UI
+                let i = node.listStart == null ? 1 : node.listStart; // List indices match what would be displayed in the UI
 
                 for (let child = node.firstChild; child; child = child.next) {
                     child.index = i;