61 add insetLeft

codypearce · Sep 9, 2019 · 3bcf245 · 3bcf245
1 parent 6262dfc
commit 3bcf245
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/Components/Divider/Divider.js b/src/Components/Divider/Divider.js
@@ -12,6 +12,7 @@ class Divider extends Component {
     marginVertical: PropTypes.number,
     subheader: PropTypes.string,
     insetHeader: PropTypes.number,
+    insetLeft: PropTypes.number,
     testID: PropTypes.string,
   };
 
@@ -37,10 +38,13 @@ class Divider extends Component {
       marginVertical,
       subheader,
       testID,
+      insetLeft,
       ...rest
     } = this.props;
     let marginVerticalImplemented = marginVertical ? marginVertical : 8;
     if (subheader) marginVerticalImplemented = 0;
+    let width = insetLeft > 0 ? `calc(100% - ${insetLeft}px)` : '100%';
+    let marginLeft = insetLeft > 0 ? insetLeft : 0;
 
     return (
       <View
@@ -49,6 +53,8 @@ class Divider extends Component {
           {
             height: Platform.OS == 'web' ? 1 : StyleSheet.hairlineWidth,
             marginVertical: marginVerticalImplemented,
+            width,
+            marginLeft,
           },
           style,
         ]}

diff --git a/src/Components/Divider/Divider.stories.js b/src/Components/Divider/Divider.stories.js
@@ -26,9 +26,9 @@ export default storiesOf('Components|Divider', module)
     </Container>
   ))
 
-  .add('inset', () => (
+  .add('insetLeft', () => (
     <Container>
-      <Header title={'Inset'} />
+      <Header title={'Inset Left'} />
 
       <List subheader={'Favorites'} style={{ width: 300 }}>
         <ListItem
@@ -56,7 +56,7 @@ export default storiesOf('Components|Divider', module)
             />
           }
         />
-        <Divider insetHeader={40} />
+        <Divider insetLeft={20} />
         <ListItem
           text={'Peter Carlsson'}
           media={
@@ -81,6 +81,31 @@ export default storiesOf('Components|Divider', module)
             />
           }
         />
+        <Divider insetLeft={20} />
+        <ListItem
+          text={'Person McPerson'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+        <ListItem
+          text={'Wendy'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
       </List>
     </Container>
   ));