Skip to content

Commit bf0d65a

Browse files
lukewalczaksatya164
lukewalczak
authored and
satya164
committed
docs: sort components alphabetically (callstack#190)
1 parent 8ce0a18 commit bf0d65a

File tree

3 files changed

+143
-133
lines changed

3 files changed

+143
-133
lines changed

‎docs/index.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,12 @@ function getFiles() {
4040
}
4141
return file;
4242
})
43-
.sort();
43+
.sort((a, b) => {
44+
const nameA = a.split('/').pop();
45+
const nameB = b.split('/').pop();
46+
return nameA.localeCompare(nameB);
47+
});
48+
4449
const pages = fs
4550
.readdirSync(path.join(__dirname, 'pages'))
4651
.map(page => path.join(__dirname, 'pages', page));

‎src/components/Dialog/Dialog.js

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/* @flow */
2+
3+
import React, { Children, Component } from 'react';
4+
import { StyleSheet, Platform, Animated } from 'react-native';
5+
import Modal from '../Modal';
6+
import { white } from '../../styles/colors';
7+
import Paper from '../Paper';
8+
import DialogActions from './Actions';
9+
import DialogTitle from './Title';
10+
import DialogContent from './Content';
11+
import DialogScrollArea from './ScrollArea';
12+
13+
const AnimatedPaper = Animated.createAnimatedComponent(Paper);
14+
15+
type DefaultProps = {
16+
dismissable: boolean,
17+
visible: boolean,
18+
};
19+
20+
type Props = {
21+
children?: any,
22+
dismissable?: boolean,
23+
onRequestClose?: Function,
24+
style?: any,
25+
visible: boolean,
26+
};
27+
28+
/**
29+
* Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
30+
*
31+
* ```
32+
* export default class MyComponent extends Component {
33+
* state = {
34+
* visible: false,
35+
* };
36+
*
37+
* _showDialog = () => this.setState({ visble: true });
38+
* _hideDialog = () => this.setState({ visble: false });
39+
*
40+
* render() {
41+
* const { visible } = this.state;
42+
* return (
43+
* <View>
44+
* <Button onPress={this._showDialog}>Show Dialog</Button>
45+
* <Dialog
46+
* visible={visible}
47+
* onRequestClose={this._hideDialog}
48+
* >
49+
* <Dialog.Title>Alert</Dialog.Title>
50+
* <Dialog.Content>
51+
* <Paragraph>This is simple dialog</Paragraph>
52+
* </Dialog.Content>
53+
* <Dialog.Actions>
54+
* <Button onPress={this._hideDialog}>Done</Button>
55+
* </Dialog.Actions>
56+
* </Dialog>
57+
* </View>
58+
* );
59+
* }
60+
* }
61+
* ```
62+
*/
63+
class Dialog extends Component<DefaultProps, Props, void> {
64+
static Actions = DialogActions;
65+
static Title = DialogTitle;
66+
static Content = DialogContent;
67+
static ScrollArea = DialogScrollArea;
68+
69+
static defaultProps = {
70+
dismissable: true,
71+
visible: false,
72+
};
73+
74+
render() {
75+
const {
76+
children,
77+
dismissable,
78+
onRequestClose,
79+
visible,
80+
style,
81+
} = this.props;
82+
const childrenArray = Children.toArray(children);
83+
const title = childrenArray.find(child => child.type === DialogTitle);
84+
const actionBtnsChildren = childrenArray.filter(
85+
child => child.type === DialogActions
86+
);
87+
const restOfChildren = childrenArray.filter(
88+
child => child.type !== DialogActions && child.type !== DialogTitle
89+
);
90+
let restOfChildrenWithoutTitle = restOfChildren;
91+
if (!title) {
92+
let found = false;
93+
restOfChildrenWithoutTitle = restOfChildren.map(child => {
94+
if (child.type === DialogContent && !found) {
95+
found = true;
96+
return React.cloneElement(child, {
97+
style: { paddingTop: 24 },
98+
});
99+
} else {
100+
return child;
101+
}
102+
});
103+
}
104+
return (
105+
<Modal
106+
dismissable={dismissable}
107+
onRequestClose={onRequestClose}
108+
visible={visible}
109+
>
110+
<AnimatedPaper style={[styles.container, style]} elevation={24}>
111+
{title}
112+
{restOfChildrenWithoutTitle}
113+
{actionBtnsChildren}
114+
</AnimatedPaper>
115+
</Modal>
116+
);
117+
}
118+
}
119+
120+
export default Dialog;
121+
122+
const styles = StyleSheet.create({
123+
container: {
124+
/**
125+
* This prevents the shadow from being clipped on Android since Android
126+
* doesn't support `overflow: visible`.
127+
* One downside for this fix is that it will disable clicks on the area
128+
* of the shadow around the dialog, consequently, if you click around the
129+
* dialog (44 pixel from the top and bottom) it won't be dismissed.
130+
*/
131+
marginVertical: Platform.OS === 'android' ? 44 : 0,
132+
marginHorizontal: 26,
133+
borderRadius: 2,
134+
backgroundColor: white,
135+
},
136+
});

‎src/components/Dialog/index.js

+1-132
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,3 @@
11
/* @flow */
22

3-
import React, { Children } from 'react';
4-
import { StyleSheet, Platform, Animated } from 'react-native';
5-
import Modal from '../Modal';
6-
import { black, white } from '../../styles/colors';
7-
import Paper from '../Paper';
8-
import DialogActions from './Actions';
9-
import DialogTitle from './Title';
10-
import DialogContent from './Content';
11-
import DialogScrollArea from './ScrollArea';
12-
13-
const AnimatedPaper = Animated.createAnimatedComponent(Paper);
14-
15-
type Props = {
16-
children?: any,
17-
/**
18-
* Determines whether clicking outside the dialog dismiss it, true by default
19-
*/
20-
dismissable?: boolean,
21-
/**
22-
* Callback that is called when the user dismisses the dialog
23-
*/
24-
onRequestClose?: Function,
25-
style?: any,
26-
/**
27-
* Determines Whether the dialog is visible
28-
*/
29-
visible: boolean,
30-
};
31-
32-
/**
33-
* Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
34-
*
35-
* ```
36-
* export default class MyComponent extends Component {
37-
* state = {
38-
* visible: false,
39-
* };
40-
*
41-
* _showDialog = () => this.setState({ visble: true });
42-
* _hideDialog = () => this.setState({ visble: false });
43-
*
44-
* render() {
45-
* const { visible } = this.state;
46-
* return (
47-
* <View>
48-
* <Button onPress={this._showDialog}>Show Dialog</Button>
49-
* <Dialog
50-
* visible={visible}
51-
* onRequestClose={this._hideDialog}
52-
* >
53-
* <Dialog.Title>Alert</Dialog.Title>
54-
* <Dialog.Content>
55-
* <Paragraph>This is simple dialog</Paragraph>
56-
* </Dialog.Content>
57-
* <Dialog.Actions>
58-
* <Button onPress={this._hideDialog}>Done</Button>
59-
* </Dialog.Actions>
60-
* </Dialog>
61-
* </View>
62-
* );
63-
* }
64-
* }
65-
* ```
66-
*/
67-
68-
const Dialog = (props: Props) => {
69-
const { children, dismissable, onRequestClose, visible, style } = props;
70-
const childrenArray = Children.toArray(children);
71-
const title = childrenArray.find(child => child.type === DialogTitle);
72-
const actionBtnsChildren = childrenArray.filter(
73-
child => child.type === DialogActions
74-
);
75-
const restOfChildren = childrenArray.filter(
76-
child => child.type !== DialogActions && child.type !== DialogTitle
77-
);
78-
let restOfChildrenWithoutTitle = restOfChildren;
79-
if (!title) {
80-
let found = false;
81-
restOfChildrenWithoutTitle = restOfChildren.map(child => {
82-
if (child.type === DialogContent && !found) {
83-
found = true;
84-
return React.cloneElement(child, {
85-
style: { paddingTop: 24 },
86-
});
87-
} else {
88-
return child;
89-
}
90-
});
91-
}
92-
return (
93-
<Modal
94-
dismissable={dismissable}
95-
onRequestClose={onRequestClose}
96-
visible={visible}
97-
>
98-
<AnimatedPaper style={[styles.container, style]} elevation={24}>
99-
{title}
100-
{restOfChildrenWithoutTitle}
101-
{actionBtnsChildren}
102-
</AnimatedPaper>
103-
</Modal>
104-
);
105-
};
106-
107-
Dialog.Actions = DialogActions;
108-
Dialog.Title = DialogTitle;
109-
Dialog.Content = DialogContent;
110-
Dialog.ScrollArea = DialogScrollArea;
111-
112-
Dialog.defaultProps = {
113-
dismissable: true,
114-
titleColor: black,
115-
visible: false,
116-
};
117-
118-
export default Dialog;
119-
120-
const styles = StyleSheet.create({
121-
container: {
122-
/**
123-
* This prevents the shadow from being clipped on Android since Android
124-
* doesn't support `overflow: visible`.
125-
* One downside for this fix is that it will disable clicks on the area
126-
* of the shadow around the dialog, consequently, if you click around the
127-
* dialog (44 pixel from the top and bottom) it won't be dismissed.
128-
*/
129-
marginVertical: Platform.OS === 'android' ? 44 : 0,
130-
marginHorizontal: 26,
131-
borderRadius: 2,
132-
backgroundColor: white,
133-
},
134-
});
3+
export { default } from './Dialog';

0 commit comments

Comments
 (0)