Skip to content

Commit 8bbad94

Browse files
artalatartalat
committed
Merge branch 'develop'
2 parents 7a434ba + 3574dd7 commit 8bbad94

13 files changed

Lines changed: 201 additions & 0 deletions

File tree

‎bluebase/storybook-native/storybook/storyLoader.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ function loadStories() {
1313
require('../../../src/components/CardCover/_stories_/CardCover.stories');
1414
require('../../../src/components/CardHeader/_stories_/CardHeader.stories');
1515
require('../../../src/components/Checkbox/__stories__/Checkbox.stories');
16+
require('../../../src/components/Dialog/_stories_/Dialogs.stories');
17+
require('../../../src/components/DialogAction/_stories_/DialogAction.stories');
18+
require('../../../src/components/DialogContent/_stories_/DialogContent.stories');
19+
require('../../../src/components/DialogTitle/_stories_/DialogTitle.stories');
1620
require('../../../src/components/Divider/__stories__/Divider.stories');
1721
require('../../../src/components/DrawerSection/__stories__/DrawerSection.stories');
1822
require('../../../src/components/List/__stories__/List.stories');
@@ -32,6 +36,10 @@ const stories = [
3236
'../../../src/components/CardCover/_stories_/CardCover.stories',
3337
'../../../src/components/CardHeader/_stories_/CardHeader.stories',
3438
'../../../src/components/Checkbox/__stories__/Checkbox.stories',
39+
'../../../src/components/Dialog/_stories_/Dialogs.stories',
40+
'../../../src/components/DialogAction/_stories_/DialogAction.stories',
41+
'../../../src/components/DialogContent/_stories_/DialogContent.stories',
42+
'../../../src/components/DialogTitle/_stories_/DialogTitle.stories',
3543
'../../../src/components/Divider/__stories__/Divider.stories',
3644
'../../../src/components/DrawerSection/__stories__/DrawerSection.stories',
3745
'../../../src/components/List/__stories__/List.stories',

‎src/components/Dialog/_stories_/Dialogs.stories.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import {
2+
Button,
3+
DialogProps,
4+
Text,
5+
View,
6+
TextInput,
7+
Image
8+
9+
} from '@bluebase/components';
10+
import React from 'react';
11+
import { getComponent } from '@bluebase/core';
12+
13+
import storiesOf from '@bluebase/storybook-addon';
14+
15+
const Dialog = getComponent<DialogProps>('Dialog');
16+
const Card = getComponent<DialogProps>('Card');
17+
18+
export interface Ipropsss {
19+
20+
selectedValue: any,
21+
open: any,
22+
onClose: any
23+
24+
}
25+
26+
export default class DialogComponent extends React.Component {
27+
state = {
28+
visible: false,
29+
};
30+
31+
_hideDialog = () => this.setState({ visible: !this.state.visible });
32+
33+
render() {
34+
return (
35+
<>
36+
<Dialog
37+
visible={this.state.visible}
38+
onDismiss={this._hideDialog}
39+
>
40+
41+
<Card style={{ height: 300 }} visible>
42+
<View style={{ display: 'flex', justifyContent: 'center' } as any}>
43+
<Image
44+
style={{ width: 308, height: 250 } as any}
45+
source={{ uri: 'https://placeimg.com/308/200/nature.png' }} />
46+
<Button style={{ color: 'blue' }} onPress={this._hideDialog}>
47+
close
48+
</Button>
49+
</View>
50+
</Card>
51+
</Dialog>
52+
<Button style={{ marginTop: 200 }} onPress={this._hideDialog}>
53+
Open Dialog
54+
</Button>
55+
56+
</>
57+
);
58+
}
59+
}
60+
61+
62+
storiesOf('Dialog', module)
63+
64+
.add('fullDialog component with all components props', () => (
65+
<DialogComponent />
66+
67+
));

‎src/components/Dialog/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import { Dialog as RNPDialog } from 'react-native-paper';
2+
export const Dialog = RNPDialog as any;

‎src/components/DialogAction/_stories_/DialogAction.stories.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { DialogActionsProps, Button } from '@bluebase/components';
2+
import React from 'react';
3+
import { getComponent } from '@bluebase/core';
4+
import storiesOf from '@bluebase/storybook-addon';
5+
6+
7+
const DialogAction = getComponent<DialogActionsProps>('DialogActions');
8+
9+
const stories = storiesOf('DialogAction', module);
10+
11+
stories
12+
13+
.add('DialogAction with children props', () => (
14+
<React.Fragment>
15+
<DialogAction style={{ display: 'flex', flexDirection: 'row-reverse' }}>
16+
<Button color="primary">
17+
Save changes
18+
</Button>
19+
</DialogAction>
20+
</React.Fragment >
21+
));

‎src/components/DialogAction/_test_/DialogAction.test.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { DialogActions } from '../index';
2+
import React from 'react';
3+
import { Text } from 'react-native';
4+
import { shallow } from 'enzyme';
5+
6+
test('DialogAction component should use child prop to show children', () => {
7+
const component = shallow(
8+
<DialogActions>
9+
<Text>DialogAction</Text>
10+
</DialogActions>
11+
);
12+
// expect(component).toMatchSnapshot();
13+
expect(component.childAt(0).childAt(0).text()).toEqual('DialogAction');
14+
15+
});
16+

‎src/components/DialogAction/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { Dialog } from 'react-native-paper';
2+
3+
export const DialogActions = Dialog.Actions;
4+

‎src/components/DialogContent/_stories_/DialogContent.stories.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { DialogContentProps, Text } from '@bluebase/components';
2+
import React from 'react';
3+
import { getComponent } from '@bluebase/core';
4+
import storiesOf from '@bluebase/storybook-addon';
5+
6+
7+
const DialogContent = getComponent<DialogContentProps>('DialogContent');
8+
9+
const stories = storiesOf('DialogContent', module);
10+
11+
12+
stories
13+
14+
.add('DialogContent with children props', () => (
15+
<React.Fragment>
16+
<DialogContent>
17+
<Text>
18+
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
19+
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
20+
at eros.
21+
Praesent cmmodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
22+
lacus vel augue laoreet rutrum faucibus dolor auctor.
23+
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
24+
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
25+
auctor fringilla.
26+
</Text>
27+
28+
</DialogContent >
29+
</React.Fragment >
30+
));

‎src/components/DialogContent/_test_/DialogContent.test.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { DialogContent } from '../index';
2+
import React from 'react';
3+
import { Text } from 'react-native';
4+
import { shallow } from 'enzyme';
5+
6+
7+
test('DialogContent component should use child prop to show children', () => {
8+
const component = shallow(
9+
<DialogContent>
10+
<Text>DialogContent</Text>
11+
</DialogContent>
12+
);
13+
expect(component.childAt(0).childAt(0).text()).toEqual('DialogContent');
14+
15+
});
16+

‎src/components/DialogContent/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { Dialog } from 'react-native-paper';
2+
export const DialogContent = Dialog.Content;
3+

‎src/components/DialogTitle/_stories_/DialogTitle.stories.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { DialogTitleProps } from '@bluebase/components';
2+
import React from 'react';
3+
import { getComponent } from '@bluebase/core';
4+
import storiesOf from '@bluebase/storybook-addon';
5+
6+
const DialogTitle = getComponent<DialogTitleProps>('DialogTitle');
7+
8+
const stories = storiesOf('DialogTitle', module);
9+
10+
11+
stories
12+
13+
.add('DialogTitle with children props', () => (
14+
<React.Fragment>
15+
<DialogTitle>
16+
Modal title
17+
</DialogTitle>
18+
</React.Fragment>
19+
));

0 commit comments

Comments
 (0)