Skip to content

Commit 3950e37

Browse files
committed
Initial Commit
0 parents  commit 3950e37

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+24746
-0
lines changed

.gitignore

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
24+
# Android/IntelliJ
25+
#
26+
build/
27+
.idea
28+
.gradle
29+
local.properties
30+
*.iml
31+
32+
# node.js
33+
#
34+
node_modules/
35+
npm-debug.log
36+
yarn-error.log
37+
38+
# BUCK
39+
buck-out/
40+
\.buckd/
41+
*.keystore
42+
!debug.keystore
43+
44+
# fastlane
45+
#
46+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47+
# screenshots whenever they are needed.
48+
# For more information about the recommended setup visit:
49+
# https://docs.fastlane.tools/best-practices/source-control/
50+
51+
*/fastlane/report.xml
52+
*/fastlane/Preview.html
53+
*/fastlane/screenshots
54+
55+
# Bundle artifact
56+
*.jsbundle
57+
58+
# CocoaPods
59+
/ios/Pods/

Header.tsx

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
import React, { Component } from 'react'
2+
import { StyleSheet, View, Platform, StatusBar, TextStyle, ViewStyle, ImageStyle } from 'react-native'
3+
import { getStatusBarHeight } from 'react-native-status-bar-height';
4+
5+
var updatedChildren : Array<JSX.Element> | JSX.Element | undefined
6+
7+
interface headerProps {
8+
style: object;
9+
statusBarBackground: string;
10+
children: Array<JSX.Element> | JSX.Element | undefined;
11+
barStyle: string;
12+
}
13+
14+
export type leftProps = {
15+
style : object;
16+
children: JSX.Element
17+
}
18+
19+
20+
export type bodyProps = {
21+
style : object;
22+
children: JSX.Element
23+
}
24+
25+
export type rightProps = {
26+
style : object;
27+
children: JSX.Element
28+
}
29+
30+
31+
const Left: React.FC<leftProps> = (props) => {
32+
const { children, style } = props
33+
let leftStyle = [styles.sideBar, style]
34+
return (
35+
<View style={leftStyle}>
36+
{children}
37+
</View>
38+
)
39+
}
40+
41+
42+
const Right: React.FC<rightProps> = (props) => {
43+
const { children, style } = props
44+
let rightStyle = [styles.sideBar, style]
45+
return (
46+
<View style={rightStyle}>
47+
{children}
48+
</View>
49+
)
50+
}
51+
52+
53+
54+
const Body: React.FC<bodyProps> = (props) => {
55+
const { children, style } = props
56+
let bodyStyle = [styles.body, style]
57+
return (
58+
<View style={bodyStyle}>
59+
{children}
60+
</View>
61+
)
62+
}
63+
64+
65+
class Header extends Component <headerProps>{
66+
67+
static Left = Left
68+
static Right = Right
69+
static Body = Body
70+
71+
spaceManager = (spaceData : Array<JSX.Element> ) => {
72+
console.log('CALL spaceManager');
73+
74+
let tempArr : Array<JSX.Element> = []
75+
spaceData.filter((item) => {
76+
const { props, type } = item
77+
if (type.name === 'Right' || type.name === 'Left') {
78+
if (props.style && props.style.width) {
79+
tempArr = [...tempArr,item]
80+
}
81+
}
82+
})
83+
if (tempArr.length > 1) {
84+
const maxPeak = tempArr.reduce((p, c) => p.props.style.width > c.props.style.width ? p : c);
85+
86+
let converInNumber = maxPeak.props.style.width.substring(0, maxPeak.props.style.width.length - 1)
87+
88+
let maxSize = Number(converInNumber)
89+
let multiplySize = Number(maxSize) * 2
90+
let availableSpace = 100 - multiplySize
91+
92+
spaceData.map((val) => {
93+
const { props, type } = val
94+
if (type.name === 'Right' || type.name === 'Left') {
95+
val.props.style.width = maxSize <= 15 ? '15%' : maxSize <= 20 ? maxSize.toString().concat('%') : '20%'
96+
}else{
97+
val.props.style.width = maxSize <= 15 ? '70%' : maxSize <= 20 ? availableSpace.toString().concat('%') : '60%'
98+
}
99+
updatedChildren = spaceData
100+
})
101+
}else {
102+
updatedChildren = spaceData
103+
}
104+
// updatedChildren = spaceData
105+
}
106+
107+
headerManager = (children : Array<JSX.Element> | JSX.Element | undefined) => {
108+
let newArr : Array<string> = []
109+
110+
if (children !== undefined && Array.isArray(children)) {
111+
children.map((val) => {
112+
newArr.push(val.type.name)
113+
})
114+
if (newArr.includes('Body') && newArr.includes('Right')) {
115+
styles.mainContainer = { ...styles.mainContainer, justifyContent: 'flex-end' }
116+
updatedChildren =children
117+
} else if (newArr.includes('Left') && newArr.includes('Right')) {
118+
styles.mainContainer = { ...styles.mainContainer, justifyContent: 'space-between' }
119+
updatedChildren =children
120+
}
121+
else if (newArr.includes('Left') && newArr.includes('Body')) {
122+
styles.mainContainer = { ...styles.mainContainer, justifyContent: 'flex-start' }
123+
updatedChildren =children
124+
}
125+
this.spaceManager(children)
126+
}
127+
else {
128+
if (children !== undefined && children.type.name == 'Body') {
129+
styles.mainContainer = { ...styles.mainContainer, justifyContent: 'center' }
130+
styles.body = { ...styles.body}
131+
updatedChildren =children
132+
} else if (children !== undefined && children.type.name == 'Right') {
133+
styles.mainContainer = { ...styles.mainContainer, justifyContent: 'flex-end' }
134+
updatedChildren =children
135+
}
136+
else if (children !== undefined && children.type.name == 'Left') {
137+
styles.mainContainer = { ...styles.mainContainer, justifyContent: 'flex-start' }
138+
updatedChildren =children
139+
}
140+
else{
141+
styles.mainContainer = { ...styles.mainContainer, justifyContent: 'center' }
142+
updatedChildren =children
143+
}
144+
}
145+
}
146+
147+
render() {
148+
const { children, style, statusBarBackground } = this.props
149+
// updatedChildren = children
150+
console.log('children >> ', typeof children);
151+
152+
this.headerManager(children)
153+
let headerStyle = [styles.mainContainer, style]
154+
return (
155+
<>
156+
<View style={[styles.statusBar, { backgroundColor: statusBarBackground }]} >
157+
<StatusBar translucent backgroundColor={statusBarBackground} />
158+
</View>
159+
<View {...this.props} style={headerStyle}>
160+
{updatedChildren}
161+
</View>
162+
</>
163+
)
164+
}
165+
}
166+
167+
export default Header
168+
169+
type Style = {
170+
mainContainer: ViewStyle;
171+
statusBar: ViewStyle;
172+
sideBar: ViewStyle;
173+
body: ViewStyle
174+
};
175+
176+
const styles = StyleSheet.create<Style>({
177+
mainContainer: {
178+
height: Platform.OS === 'ios' ? 44 : 48,
179+
backgroundColor: '#009999',
180+
alignItems: 'center',
181+
flexDirection: 'row'
182+
},
183+
statusBar: {
184+
height: getStatusBarHeight()
185+
},
186+
sideBar: {
187+
width: '15%',
188+
justifyContent: 'center',
189+
alignItems: 'center',
190+
height: '100%',
191+
padding: 5
192+
},
193+
194+
body: {
195+
width: '70%',
196+
justifyContent: 'center',
197+
alignItems: 'center',
198+
height: '100%',
199+
alignSelf: 'center'
200+
}
201+
})
202+

example/.buckconfig

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

example/.editorconfig

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Windows files
2+
[*.bat]
3+
end_of_line = crlf

example/.eslintrc.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
};

example/.flowconfig

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
[ignore]
2+
; We fork some components by platform
3+
.*/*[.]android.js
4+
5+
; Ignore "BUCK" generated dirs
6+
<PROJECT_ROOT>/\.buckd/
7+
8+
; Ignore polyfills
9+
node_modules/react-native/Libraries/polyfills/.*
10+
11+
; Flow doesn't support platforms
12+
.*/Libraries/Utilities/LoadingView.js
13+
14+
[untyped]
15+
.*/node_modules/@react-native-community/cli/.*/.*
16+
17+
[include]
18+
19+
[libs]
20+
node_modules/react-native/interface.js
21+
node_modules/react-native/flow/
22+
23+
[options]
24+
emoji=true
25+
26+
esproposal.optional_chaining=enable
27+
esproposal.nullish_coalescing=enable
28+
29+
exact_by_default=true
30+
31+
module.file_ext=.js
32+
module.file_ext=.json
33+
module.file_ext=.ios.js
34+
35+
munge_underscores=true
36+
37+
module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
38+
module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
39+
40+
suppress_type=$FlowIssue
41+
suppress_type=$FlowFixMe
42+
suppress_type=$FlowFixMeProps
43+
suppress_type=$FlowFixMeState
44+
45+
[lints]
46+
sketchy-null-number=warn
47+
sketchy-null-mixed=warn
48+
sketchy-number=warn
49+
untyped-type-import=warn
50+
nonstrict-import=warn
51+
deprecated-type=warn
52+
unsafe-getters-setters=warn
53+
unnecessary-invariant=warn
54+
signature-verification-failure=warn
55+
56+
[strict]
57+
deprecated-type
58+
nonstrict-import
59+
sketchy-null
60+
unclear-type
61+
unsafe-getters-setters
62+
untyped-import
63+
untyped-type-import
64+
65+
[version]
66+
^0.137.0

example/.gitattributes

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Windows files should use crlf line endings
2+
# https://help.github.com/articles/dealing-with-line-endings/
3+
*.bat text eol=crlf

0 commit comments

Comments
 (0)