Skip to content

Commit 101f501

Browse files
artalatartalat
committed
fix(DrawerLayout): Right positioned temporary drawer layout
1 parent ed9b83d commit 101f501

File tree

2 files changed

+68
-66
lines changed

2 files changed

+68
-66
lines changed

‎src/components/DrawerLayout/DrawerLayout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export class DrawerLayoutComponent extends React.Component<
4343
anchor: drawerPosition,
4444
children: renderNavigationView && renderNavigationView(),
4545
className: classes.drawer,
46-
classes: { paper: classes.drawerPaper },
46+
classes: variant === 'persistent' ? { paper: classes.drawerPaper } : {},
4747
onClose: onDrawerClose,
4848
// onRendered: onDrawerOpen,
4949
open: this.state.open,

‎src/components/DrawerLayout/__stories__/DrawerLayout.stories.tsx

Lines changed: 67 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
Text,
88
View,
99
} from '@bluebase/components';
10+
1011
import React from 'react';
1112
import storiesOf from '@bluebase/storybook-addon';
1213
import { withInfo } from '@storybook/addon-info';
@@ -22,7 +23,7 @@ const DrawerContent = () => (
2223
<Text style={{ margin: 10, fontSize: 15, textAlign: 'right' }}>Hello</Text>
2324
<Text style={{ margin: 10, fontSize: 15, textAlign: 'right' }}>World!</Text>
2425
<DrawerActions>
25-
{(navigation) => (
26+
{navigation => (
2627
<React.Fragment>
2728
<Button title="Open" onPress={navigation.openDrawer} />
2829
<Button title="Close" onPress={navigation.closeDrawer} />
@@ -44,76 +45,77 @@ const navigationView = () => (
4445
);
4546
stories
4647

47-
.add('Default props', () => (
48-
<DrawerLayout
49-
// open
50-
drawerWidth={200}
51-
// drawerPosition="left"
52-
renderNavigationView={navigationView}
53-
>
54-
<DrawerContent />
55-
</DrawerLayout>
56-
))
48+
.add('Default props', () => (
49+
<DrawerLayout
50+
// open
51+
drawerWidth={200}
52+
// drawerPosition="left"
53+
renderNavigationView={navigationView}
54+
>
55+
<DrawerContent />
56+
</DrawerLayout>
57+
))
5758

58-
.add('Type: slide', () => (
59-
<DrawerLayout
60-
renderNavigationView={navigationView}
61-
drawerType="slide"
62-
drawerWidth={200}
63-
open
64-
>
65-
<DrawerContent />
66-
</DrawerLayout>
67-
))
59+
.add('Right Positioned', () => (
60+
<DrawerLayout
61+
// open
62+
drawerWidth={200}
63+
drawerPosition="right"
64+
renderNavigationView={navigationView}
65+
>
66+
<DrawerContent />
67+
</DrawerLayout>
68+
))
6869

69-
.add('Type: slide, Nested', () => (
70-
<View style={{ flex: 1 }}>
71-
<View style={{ backgroundColor: 'red', minHeight: 30 }}>
72-
<Text>Top</Text>
73-
</View>
74-
<View style={{ flex: 1, flexDirection: 'row', backgroundColor: 'red' }}>
75-
<View style={{ width: 150, backgroundColor: 'yellow' }}>
76-
<Text>Left</Text>
77-
</View>
78-
<View style={{ flex: 1, backgroundColor: 'green' }}>
79-
<DrawerLayout
80-
renderNavigationView={navigationView}
81-
drawerType="slide"
82-
drawerWidth={200}
83-
open
84-
>
85-
<DrawerContent />
86-
</DrawerLayout>
70+
.add('Type: slide', () => (
71+
<DrawerLayout renderNavigationView={navigationView} drawerType="slide" drawerWidth={200} open>
72+
<DrawerContent />
73+
</DrawerLayout>
74+
))
75+
76+
.add('Type: slide, Nested', () => (
77+
<View style={{ flex: 1 }}>
78+
<View style={{ backgroundColor: 'red', minHeight: 30 }}>
79+
<Text>Top</Text>
8780
</View>
88-
<View style={{ width: 150, backgroundColor: 'blue' }}>
89-
<Text>Left</Text>
81+
<View style={{ flex: 1, flexDirection: 'row', backgroundColor: 'red' }}>
82+
<View style={{ width: 150, backgroundColor: 'yellow' }}>
83+
<Text>Left</Text>
84+
</View>
85+
<View style={{ flex: 1, backgroundColor: 'green' }}>
86+
<DrawerLayout
87+
renderNavigationView={navigationView}
88+
drawerType="slide"
89+
drawerWidth={200}
90+
open
91+
>
92+
<DrawerContent />
93+
</DrawerLayout>
94+
</View>
95+
<View style={{ width: 150, backgroundColor: 'blue' }}>
96+
<Text>Left</Text>
97+
</View>
9098
</View>
9199
</View>
92-
</View>
93-
))
100+
))
94101

95-
.add('Type: front, Nested', () => (
96-
<View style={{ flex: 1 }}>
97-
<View style={{ backgroundColor: 'red', minHeight: 30 }}>
98-
<Text>Top</Text>
99-
</View>
100-
<View style={{ flex: 1, flexDirection: 'row', backgroundColor: 'red' }}>
101-
<View style={{ width: 150, backgroundColor: 'yellow' }}>
102-
<Text>Left</Text>
102+
.add('Type: front, Nested', () => (
103+
<View style={{ flex: 1 }}>
104+
<View style={{ backgroundColor: 'red', minHeight: 30 }}>
105+
<Text>Top</Text>
103106
</View>
104-
<View style={{ flex: 1, backgroundColor: 'green' }}>
105-
<DrawerLayout
106-
renderNavigationView={navigationView}
107-
drawerType="front"
108-
open
109-
>
110-
<DrawerContent />
111-
</DrawerLayout>
112-
</View>
113-
<View style={{ width: 150, backgroundColor: 'blue' }}>
114-
<Text>Left</Text>
107+
<View style={{ flex: 1, flexDirection: 'row', backgroundColor: 'red' }}>
108+
<View style={{ width: 150, backgroundColor: 'yellow' }}>
109+
<Text>Left</Text>
110+
</View>
111+
<View style={{ flex: 1, backgroundColor: 'green' }}>
112+
<DrawerLayout renderNavigationView={navigationView} drawerType="front" open>
113+
<DrawerContent />
114+
</DrawerLayout>
115+
</View>
116+
<View style={{ width: 150, backgroundColor: 'blue' }}>
117+
<Text>Left</Text>
118+
</View>
115119
</View>
116120
</View>
117-
</View>
118-
))
119-
;
121+
));

0 commit comments

Comments
 (0)