Skip to content

Commit cf926c1

Browse files
artalatartalat
committed
fix(Dialog): Removed extra props
1 parent 5170b86 commit cf926c1

File tree

5 files changed

+153
-172
lines changed

5 files changed

+153
-172
lines changed

‎src/components/Dialog/Dialog.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { DialogDefaultProps, DialogProps } from '@bluebase/components';
2+
3+
import MuiDialog from '@material-ui/core/Dialog';
4+
import { StyleSheet } from 'react-native';
5+
import { componentMapper } from '@bluebase/component-mapper';
6+
7+
export const Dialog = componentMapper<DialogProps>(MuiDialog, {
8+
children: 'children',
9+
onClose: 'onDismiss',
10+
open: 'visible',
11+
style: ({ style }: any) => StyleSheet.flatten(style),
12+
});
13+
14+
Dialog.defaultProps = DialogDefaultProps;

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

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import {
2+
DialogActionsProps,
3+
DialogTitleProps,
4+
} from '@bluebase/components';
5+
6+
import AddIcon from '@material-ui/icons/Add';
7+
import Avatar from '@material-ui/core/Avatar';
8+
import List from '@material-ui/core/List';
9+
import ListItem from '@material-ui/core/ListItem';
10+
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
11+
import ListItemText from '@material-ui/core/ListItemText';
12+
import PersonIcon from '@material-ui/icons/Person';
13+
import React from 'react';
14+
import Typography from '@material-ui/core/Typography';
15+
import { getComponent } from '@bluebase/core';
16+
// import { getComponent } from '@bluebase/core';
17+
import storiesOf from '@bluebase/storybook-addon';
18+
19+
const Dialog = getComponent('Dialog');
20+
const Card = getComponent('Card');
21+
const View = getComponent('View');
22+
const Image = getComponent('Image');
23+
const Button = getComponent('Button');
24+
25+
const DialogAction = getComponent<DialogActionsProps>('DialogActions');
26+
// const DialogContent = getComponent<DialogContentProps>('DialogContent');
27+
const DialogTitle = getComponent<DialogTitleProps>('DialogTitle');
28+
29+
export interface Ipropsss {
30+
selectedValue: any;
31+
open: any;
32+
onClose: any;
33+
}
34+
function SimpleDialog(props: Ipropsss) {
35+
const { onClose, selectedValue, ...other } = props;
36+
37+
function handleClose() {
38+
onClose(selectedValue);
39+
}
40+
41+
function handleListItemClick(value: any) {
42+
onClose(value);
43+
}
44+
45+
return (
46+
<Dialog visible={true} onDismiss={handleClose} {...other}>
47+
<DialogTitle>Set backup account</DialogTitle>
48+
<List>
49+
<ListItem button onClick={() => handleListItemClick('addAccount')}>
50+
<ListItemAvatar>
51+
<Avatar>
52+
<AddIcon />
53+
</Avatar>
54+
</ListItemAvatar>
55+
<ListItemText primary="add account" />
56+
</ListItem>
57+
<ListItem button onClick={() => handleListItemClick('addAccount')}>
58+
<ListItemAvatar>
59+
<Avatar>
60+
<PersonIcon />
61+
</Avatar>
62+
</ListItemAvatar>
63+
<ListItemText primary="add account" />
64+
</ListItem>
65+
</List>
66+
<DialogAction>
67+
<Button color="primary">Save changes</Button>
68+
</DialogAction>
69+
</Dialog>
70+
);
71+
}
72+
73+
function SimpleDialogDemo() {
74+
const [open, setOpen] = React.useState(false);
75+
const [selectedValue, setSelectedValue] = React.useState();
76+
77+
function handleClickOpen() {
78+
setOpen(true);
79+
}
80+
81+
const handleClose = (value: any) => {
82+
setOpen(false);
83+
setSelectedValue(value);
84+
};
85+
86+
return (
87+
<div>
88+
<Typography variant="subtitle1">Selected: {selectedValue}</Typography>
89+
<br />
90+
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
91+
Open simple dialog
92+
</Button>
93+
<SimpleDialog selectedValue={selectedValue} open={open} onClose={handleClose} />
94+
</div>
95+
);
96+
}
97+
98+
storiesOf('Dialog', module).add('fullDialog component with all components props', () => (
99+
<SimpleDialogDemo />
100+
));
101+
102+
class DialogComponent extends React.Component {
103+
state = {
104+
visible: false,
105+
};
106+
107+
_hideDialog = () => this.setState({ visible: !this.state.visible });
108+
109+
render() {
110+
return (
111+
<>
112+
<Dialog visible={this.state.visible} onDismiss={this._hideDialog}>
113+
<Card>
114+
<View style={{ display: 'flex', justifyContent: 'center' } as any}>
115+
<Image
116+
style={{ width: 308, height: 250 } as any}
117+
source={{
118+
uri:
119+
'https://www.careerz360.pk/cdn.careerz360.pk/Content/UserData/empr/f1172787-3c92-459c-a5cc-5a9b7da8613e/profile_pics/thumbnail_bd47c439-bf95-4c30-8be8-fe77023194a0.png',
120+
}}
121+
/>
122+
<Button style={{ color: 'blue' }} onPress={this._hideDialog}>
123+
close
124+
</Button>
125+
</View>
126+
</Card>
127+
</Dialog>
128+
<Button style={{ marginTop: 200 }} onPress={this._hideDialog}>
129+
Open Dialog
130+
</Button>
131+
</>
132+
);
133+
}
134+
}
135+
136+
storiesOf('Dialog', module).add('fullDialog component with all components props', () => (
137+
<DialogComponent />
138+
));

‎src/components/Dialog/_stories_/Dialogcomponent.test.tsx renamed to ‎src/components/Dialog/__tests__/Dialog.test.tsx

File renamed without changes.

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

Lines changed: 0 additions & 161 deletions
This file was deleted.

‎src/components/Dialog/index.tsx

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1 @@
1-
import { DialogDefaultProps, DialogProps } from '@bluebase/components';
2-
import MuiDialog from '@material-ui/core/Dialog';
3-
import { componentMapper } from '@bluebase/component-mapper';
4-
5-
export const Dialog = componentMapper<DialogProps>(MuiDialog, {
6-
children: ({ children }: DialogProps) => children,
7-
onClose: 'onDismiss',
8-
open: 'visible'
9-
}, { rest: true, });
10-
11-
Dialog.defaultProps = DialogDefaultProps;
1+
export * from './Dialog';

0 commit comments

Comments
 (0)