added support for text-align in item data prop (#34)

davidwhitlark · Canedo · commit 062d9183418e · 2018-02-26T16:48:19.000-03:00
* added support for text-align in item data prop

* lint, missing semi-colon

* fixing missing flow type def

* Fixing Flow prop type defs, fixing tests

* increasing code coverage
diff --git a/sample/__tests__/components/DraftJsText.test.js b/sample/__tests__/components/DraftJsText.test.js
@@ -81,3 +81,51 @@ it('extends a style with a customStyle from another type', () => {
   ).toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+it('renders text-align: left', () => {
+  const text = 'Hello World';
+  const data = { 'text-align': 'left' };
+  const tree = renderer.create(
+    <DraftJsText
+      type="paragraph"
+      text={text}
+      data={data}
+      inlineStyles={[]}
+      entityRanges={[]}
+      entityMap={{}}
+    />,
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders text-align: right', () => {
+  const text = 'Hello World';
+  const data = { 'text-align': 'right' };
+  const tree = renderer.create(
+    <DraftJsText
+      type="paragraph"
+      text={text}
+      data={data}
+      inlineStyles={[]}
+      entityRanges={[]}
+      entityMap={{}}
+    />,
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders text-align: center', () => {
+  const text = 'Hello World';
+  const data = { 'text-align': 'center' };
+  const tree = renderer.create(
+    <DraftJsText
+      type="paragraph"
+      text={text}
+      data={data}
+      inlineStyles={[]}
+      entityRanges={[]}
+      entityMap={{}}
+    />,
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/sample/__tests__/components/__snapshots__/BlockQuote.test.js.snap b/sample/__tests__/components/__snapshots__/BlockQuote.test.js.snap
@@ -37,6 +37,9 @@ exports[`extends a style with a customStyle 1`] = `
           "letterSpacing": -0.75,
           "lineHeight": 32,
         },
+        Object {
+          "textAlign": undefined,
+        },
       ]
     }
   >
@@ -80,6 +83,9 @@ exports[`renders correctly with a blockquote 1`] = `
           "marginLeft": 16,
         },
         undefined,
+        Object {
+          "textAlign": undefined,
+        },
       ]
     }
   >
diff --git a/sample/__tests__/components/__snapshots__/DraftJsText.test.js.snap b/sample/__tests__/components/__snapshots__/DraftJsText.test.js.snap
@@ -17,6 +17,9 @@ exports[`extends a style with a customStyle 1`] = `
         "letterSpacing": -0.75,
         "lineHeight": 32,
       },
+      Object {
+        "textAlign": undefined,
+      },
     ]
   }
 >
@@ -36,6 +39,9 @@ exports[`extends a style with a customStyle from another type 1`] = `
         "fontWeight": "normal",
       },
       undefined,
+      Object {
+        "textAlign": undefined,
+      },
     ]
   }
 >
@@ -55,6 +61,9 @@ exports[`renders correctly with a text 1`] = `
         "fontWeight": "normal",
       },
       undefined,
+      Object {
+        "textAlign": undefined,
+      },
     ]
   }
 >
@@ -63,3 +72,69 @@ exports[`renders correctly with a text 1`] = `
 `;
 
 exports[`renders null without a text 1`] = `null`;
+
+exports[`renders text-align: center 1`] = `
+<Text
+  accessible={true}
+  allowFontScaling={true}
+  ellipsizeMode="tail"
+  style={
+    Array [
+      Object {
+        "fontSize": 14,
+        "fontWeight": "normal",
+      },
+      undefined,
+      Object {
+        "textAlign": "center",
+      },
+    ]
+  }
+>
+  Hello World
+</Text>
+`;
+
+exports[`renders text-align: left 1`] = `
+<Text
+  accessible={true}
+  allowFontScaling={true}
+  ellipsizeMode="tail"
+  style={
+    Array [
+      Object {
+        "fontSize": 14,
+        "fontWeight": "normal",
+      },
+      undefined,
+      Object {
+        "textAlign": "left",
+      },
+    ]
+  }
+>
+  Hello World
+</Text>
+`;
+
+exports[`renders text-align: right 1`] = `
+<Text
+  accessible={true}
+  allowFontScaling={true}
+  ellipsizeMode="tail"
+  style={
+    Array [
+      Object {
+        "fontSize": 14,
+        "fontWeight": "normal",
+      },
+      undefined,
+      Object {
+        "textAlign": "right",
+      },
+    ]
+  }
+>
+  Hello World
+</Text>
+`;
diff --git a/sample/__tests__/components/__snapshots__/OrderedListItem.test.js.snap b/sample/__tests__/components/__snapshots__/OrderedListItem.test.js.snap
@@ -52,6 +52,9 @@ exports[`extends a style with a customStyle 1`] = `
           "letterSpacing": -0.75,
           "lineHeight": 32,
         },
+        Object {
+          "textAlign": undefined,
+        },
       ]
     }
   >
@@ -103,6 +106,9 @@ exports[`renders correctly with a ordered-list-item 1`] = `
           "fontWeight": "normal",
         },
         undefined,
+        Object {
+          "textAlign": undefined,
+        },
       ]
     }
   >
diff --git a/sample/__tests__/components/__snapshots__/UnorderedListItem.test.js.snap b/sample/__tests__/components/__snapshots__/UnorderedListItem.test.js.snap
@@ -44,6 +44,9 @@ exports[`extends a style with a customStyle 1`] = `
           "letterSpacing": -0.75,
           "lineHeight": 32,
         },
+        Object {
+          "textAlign": undefined,
+        },
       ]
     }
   >
@@ -91,6 +94,9 @@ exports[`renders correctly with a unordered-list-item 1`] = `
           "fontWeight": "normal",
         },
         undefined,
+        Object {
+          "textAlign": undefined,
+        },
       ]
     }
   >
diff --git a/sample/__tests__/loadAttributes.test.js b/sample/__tests__/loadAttributes.test.js
@@ -20,6 +20,17 @@ it('returns only text if other objects are empty', () => {
   expect(result).toEqual(mock);
 });
 
+it('still works with no inlineStyles object', () => {
+  const params = {
+    text: 'Hello World',
+    entityMap: {},
+    entityRanges: [],
+  };
+  const mock = ['Hello World'];
+  const result = loadAttributes(params);
+  expect(result).toEqual(mock);
+});
+
 it('have correct length with inlineStyles and text', () => {
   const params = {
     text: 'Hello World',
diff --git a/src/components/DraftJsText.js b/src/components/DraftJsText.js
@@ -30,10 +30,11 @@ const DraftJsText = (props: DraftJsTextPropsType): any => {
     });
 
     const customStyle = props.customStyles ? props.customStyles[props.type] : undefined;
+    const textAlignStyle = { textAlign: props.data['text-align'] };
 
     return (
       <Text
-        style={[defaultStyles[props.type], customStyle]}
+        style={[defaultStyles[props.type], customStyle, textAlignStyle]}
       >{textElements}
       </Text>);
   }
@@ -42,7 +43,7 @@ const DraftJsText = (props: DraftJsTextPropsType): any => {
 
 DraftJsText.defaultProps = {
   text: '',
-  customStyles: {},
+  data: {},
   inlineStyles: [],
   navigate: undefined,
 };
diff --git a/src/components/OrderedListItem.js b/src/components/OrderedListItem.js
@@ -60,7 +60,6 @@ const OrderedListItem = (props: OrderedListItemPropsType): any => {
 
 OrderedListItem.defaultProps = {
   counter: 1,
-  customStyles: {},
   separator: '.',
 };
 
diff --git a/src/components/UnorderedListItem.js b/src/components/UnorderedListItem.js
@@ -51,7 +51,6 @@ const UnorderedListItem = (props: UnorderedListItemPropsType): any => {
 };
 
 UnorderedListItem.defaultProps = {
-  customStyles: {},
 };
 
 export default UnorderedListItem;
diff --git a/src/components/defaultProps.js b/src/components/defaultProps.js
@@ -9,6 +9,7 @@
 export type BlockQuotePropsType = {
   type: string,
   text: string,
+  data: Object,
   customStyles?: Object,
   inlineStyles: Array<Object>,
   entityRanges: Array<Object>,
@@ -18,6 +19,7 @@ export type BlockQuotePropsType = {
 export type DraftJsTextPropsType = {
   type: string,
   text: string,
+  data: Object,
   customStyles?: Object,
   inlineStyles: Array<Object>,
   entityRanges: Array<Object>,
@@ -28,6 +30,7 @@ export type DraftJsTextPropsType = {
 export type OrderedListItemPropsType = {
   type: string,
   text: string,
+  data: Object,
   customStyles?: Object,
   inlineStyles: Array<Object>,
   entityRanges: Array<Object>,
@@ -39,6 +42,7 @@ export type OrderedListItemPropsType = {
 export type UnorderedListItemPropsType = {
   type: string,
   text: string,
+  data: Object,
   customStyles?: Object,
   inlineStyles: Array<Object>,
   entityRanges: Array<Object>,
diff --git a/src/getBlocks.js b/src/getBlocks.js
@@ -88,6 +88,7 @@ const getBlocks = (params: ParamsType): ?Array<*> => {
         key: item.key,
         text: item.text,
         type: item.type,
+        data: item.data,
         inlineStyles: item.inlineStyleRanges,
         entityRanges: item.entityRanges,
       };

Original file line number	Diff line number	Diff line change
@@ -37,6 +37,9 @@ exports[`extends a style with a customStyle 1`] = `
`37`	`37`	`"letterSpacing": -0.75,`
`38`	`38`	`"lineHeight": 32,`
`39`	`39`	`},`
	`40`	`+ Object {`
	`41`	`+ "textAlign": undefined,`
	`42`	`+ },`
`40`	`43`	`]`
`41`	`44`	`}`
`42`	`45`	`>`
@@ -80,6 +83,9 @@ exports[`renders correctly with a blockquote 1`] = `
`80`	`83`	`"marginLeft": 16,`
`81`	`84`	`},`
`82`	`85`	`undefined,`
	`86`	`+ Object {`
	`87`	`+ "textAlign": undefined,`
	`88`	`+ },`
`83`	`89`	`]`
`84`	`90`	`}`
`85`	`91`	`>`
Original file line number	Diff line number	Diff line change
@@ -52,6 +52,9 @@ exports[`extends a style with a customStyle 1`] = `
`52`	`52`	`"letterSpacing": -0.75,`
`53`	`53`	`"lineHeight": 32,`
`54`	`54`	`},`
	`55`	`+ Object {`
	`56`	`+ "textAlign": undefined,`
	`57`	`+ },`
`55`	`58`	`]`
`56`	`59`	`}`
`57`	`60`	`>`
@@ -103,6 +106,9 @@ exports[`renders correctly with a ordered-list-item 1`] = `
`103`	`106`	`"fontWeight": "normal",`
`104`	`107`	`},`
`105`	`108`	`undefined,`
	`109`	`+ Object {`
	`110`	`+ "textAlign": undefined,`
	`111`	`+ },`
`106`	`112`	`]`
`107`	`113`	`}`
`108`	`114`	`>`
Original file line number	Diff line number	Diff line change
@@ -44,6 +44,9 @@ exports[`extends a style with a customStyle 1`] = `
`44`	`44`	`"letterSpacing": -0.75,`
`45`	`45`	`"lineHeight": 32,`
`46`	`46`	`},`
	`47`	`+ Object {`
	`48`	`+ "textAlign": undefined,`
	`49`	`+ },`
`47`	`50`	`]`
`48`	`51`	`}`
`49`	`52`	`>`
@@ -91,6 +94,9 @@ exports[`renders correctly with a unordered-list-item 1`] = `
`91`	`94`	`"fontWeight": "normal",`
`92`	`95`	`},`
`93`	`96`	`undefined,`
	`97`	`+ Object {`
	`98`	`+ "textAlign": undefined,`
	`99`	`+ },`
`94`	`100`	`]`
`95`	`101`	`}`
`96`	`102`	`>`