Merge pull request #283 from codypearce/61-divider-inset

61 divider inset
codypearce · Sep 9, 2019 · 83ab152 · 83ab152
2 parents f2df609 + ce64191
commit 83ab152
Show file tree

Hide file tree

Showing 9 changed files with 195 additions and 10 deletions.
diff --git a/docs/src/content/components/divider/Demos/InsetLeftDemo.js b/docs/src/content/components/divider/Demos/InsetLeftDemo.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import { View } from 'react-native';
+import { ComponentDemo, CodeInline } from '@components';
+import { Divider, List, ListItem, Avatar } from '../../../../../../src/index';
+
+export const code = `class DialogPage extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  render() {
+    return (
+        <List subheader={'Favorites'} style={{ width: 300 }}>
+        <ListItem
+          text={'Janet Perkins'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+
+        <ListItem
+          text={'Mary Perkins'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+        <Divider insetLeft={20} />
+        <ListItem
+          text={'Peter Carlsson'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+        <ListItem
+          text={'Trevor Hansen'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+     
+      </List>
+    );
+  }
+}
+`;
+
+const SubtitleDemo = ({ pageHref }) => (
+  <ComponentDemo
+    sectionName={'InsetLeft'}
+    sectionHref={`${pageHref}#insetleft`}
+    sectionId={'insetleft'}
+    code={code}
+    description={
+      <div>
+        <CodeInline code="insetLeft" type="prop" /> shortens the width of the
+        divider by the provided amount and moves the{' '}
+        <CodeInline code="Divider" type="element" /> to the right by that
+        amount. This is useful for keeping the{' '}
+        <CodeInline code="Divider" type="element" /> inline with other elements.
+      </div>
+    }
+    scope={{ View, Divider, List, ListItem, Avatar }}
+  />
+);
+export default SubtitleDemo;
diff --git a/docs/src/content/components/divider/Demos/SubheaderDemo.js b/docs/src/content/components/divider/Demos/SubheaderDemo.js
@@ -11,8 +11,8 @@ export const code = `class DialogPage extends React.Component {
     return (
       <View >    
         <Divider subheader={'Subheader'} />
-        <Divider subheader={'Title'} inset={8} />
-        <Divider subheader={'Section'} inset={16} marginVertical={24} />
+        <Divider subheader={'Title'} insetHeader={8} />
+        <Divider subheader={'Section'} insetHeader={16} marginVertical={24} />
       </View>
     );
   }

diff --git a/docs/src/content/components/divider/Demos/index.js b/docs/src/content/components/divider/Demos/index.js
@@ -3,18 +3,21 @@ import PropTypes from 'prop-types';
 import { ComponentDemoHeader } from '@components';
 
 import SubheaderDemo from './SubheaderDemo';
+import InsetLeftDemo from './InsetLeftDemo';
 
 export default class Demos extends Component {
   static propTypes = {
     pageHref: PropTypes.string,
   };
   render() {
     const { pageHref } = this.props;
+
     return (
       <div>
         <ComponentDemoHeader pageHref={pageHref} />
 
         <SubheaderDemo pageHref={pageHref} />
+        <InsetLeftDemo pageHref={pageHref} />
       </div>
     );
   }

diff --git a/docs/src/content/components/divider/index.js b/docs/src/content/components/divider/index.js
@@ -11,6 +11,7 @@ const sections = [
   { name: 'Props' },
   { name: 'Demos' },
   { name: 'subheader', sub: true },
+  { name: 'insetLeft', sub: true },
 ];
 
 export default class DividerPage extends Component {

diff --git a/docs/src/content/components/divider/propData.js b/docs/src/content/components/divider/propData.js
@@ -1,6 +1,7 @@
 import { createTableData } from '../../../utils/createPropData';
 const propData = [
-  ['inset', 'Subheader inset number ', 'number', ''],
+  ['insetHeader', 'Subheader inset number ', 'number', ''],
+  ['insetLeft', 'Inset of Divider from left ', 'number', ''],
   ['marginVertical', 'Adds magin on top and bottom for spacing', 'number', ''],
   ['style', 'Styles root element', 'object', ''],
   ['subheader', 'Displays under a divider as text ', 'string', ''],

diff --git a/src/Components/Divider/Divider.js b/src/Components/Divider/Divider.js
@@ -11,19 +11,20 @@ class Divider extends Component {
     theme: PropTypes.object,
     marginVertical: PropTypes.number,
     subheader: PropTypes.string,
-    inset: PropTypes.number,
+    insetHeader: PropTypes.number,
+    insetLeft: PropTypes.number,
     testID: PropTypes.string,
   };
 
   _renderSubheader() {
-    const { subheader, marginVertical, inset, testID } = this.props;
+    const { subheader, marginVertical, insetHeader, testID } = this.props;
 
     return (
       <View
         style={{ marginVertical: marginVertical ? marginVertical : 8 }}
         testID={testID}>
         {this._renderDivider()}
-        <BodyText style={[styles.subheader, { marginLeft: inset }]}>
+        <BodyText style={[styles.subheader, { marginLeft: insetHeader }]}>
           {subheader}
         </BodyText>
       </View>
@@ -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
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Divider } from '../../';
+import { Divider, List, ListItem, Avatar } from '../../';
 import Header from '../../storybook/components/Header';
 import Container from '../../storybook/components/Container';
 import { storiesOf } from '../../storybook/helpers/storiesOf';
@@ -21,7 +21,91 @@ export default storiesOf('Components|Divider', module)
       <Header title={'Divider'} />
 
       <Divider subheader={'Subheader'} />
-      <Divider subheader={'Title'} inset={8} />
-      <Divider subheader={'Section'} inset={16} marginVertical={24} />
+      <Divider subheader={'Title'} insetHeader={8} />
+      <Divider subheader={'Section'} insetHeader={16} marginVertical={24} />
+    </Container>
+  ))
+
+  .add('insetLeft', () => (
+    <Container>
+      <Header title={'Inset Left'} />
+
+      <List subheader={'Favorites'} style={{ width: 300 }}>
+        <ListItem
+          text={'Janet Perkins'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+
+        <ListItem
+          text={'Mary Perkins'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+        <Divider insetLeft={20} />
+        <ListItem
+          text={'Peter Carlsson'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+        <ListItem
+          text={'Trevor Hansen'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+        <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>
   ));
diff --git a/src/Components/Divider/__snapshots__/Divider.test.js.snap b/src/Components/Divider/__snapshots__/Divider.test.js.snap
@@ -10,7 +10,9 @@ exports[`Divider Renders 1`] = `
       },
       Object {
         "height": 0.5,
+        "marginLeft": 0,
         "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]

diff --git a/src/Components/Icon/Icon.js b/src/Components/Icon/Icon.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import MaterialIcons from 'react-native-vector-icons/dist/MaterialIcons';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import withTheme from '../../Theme/withTheme';
 
 class Icon extends Component {