Skip to content

Commit 4f65919

Browse files
WrathChaosWrathChaos
committed
New Design System is here
1 parent 8b75dcf commit 4f65919

File tree

6 files changed

+244
-8
lines changed

6 files changed

+244
-8
lines changed

‎example/App.js

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
2-
import { SafeAreaView, StatusBar } from "react-native";
3-
import InputBar from "@paraboly/react-native-input-bar";
2+
import { SafeAreaView, StatusBar, View } from "react-native";
3+
// import InputBar from "@paraboly/react-native-input-bar";
4+
import InputBar from "./lib/src/InputBar";
45

56
const App = () => {
67
return (
@@ -11,12 +12,22 @@ const App = () => {
1112
flex: 1
1213
}}
1314
>
14-
<InputBar
15-
multiline
16-
height={null}
17-
minHeight={50}
18-
spinnerVisibility={false}
19-
/>
15+
<View
16+
style={{
17+
flex: 1,
18+
marginBottom: 32,
19+
alignItems: "center",
20+
justifyContent: "flex-end"
21+
}}
22+
>
23+
<InputBar
24+
// disableSecondaryIcon
25+
// multiline
26+
// height={null}
27+
// minHeight={50}
28+
// spinnerVisibility={true}
29+
/>
30+
</View>
2031
</SafeAreaView>
2132
</>
2233
);

‎example/lib/src/InputBar.js

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import React, { Component } from "react";
2+
import PropTypes from "prop-types";
3+
import { View, Dimensions, TextInput } from "react-native";
4+
import Androw from "react-native-androw";
5+
import styles, {
6+
_container,
7+
_containerGlue,
8+
_textInputStyle,
9+
_barIconContainer
10+
} from "./InputBar.style";
11+
import BarIcon from "./components/BarIcon";
12+
13+
const { width: ScreenWidth } = Dimensions.get("window");
14+
15+
class InputBar extends Component {
16+
renderBarIconContainer = () => {
17+
const {
18+
primaryIconName,
19+
primaryIconType,
20+
primaryIconSize,
21+
primaryIconColor,
22+
secondaryIconName,
23+
secondaryIconType,
24+
secondaryIconSize,
25+
primaryIconOnPress,
26+
secondaryIconColor,
27+
disablePrimaryIcon,
28+
disableSecondaryIcon,
29+
secondaryIconOnPress
30+
} = this.props;
31+
32+
return (
33+
<View style={_barIconContainer(disableSecondaryIcon)}>
34+
{!disableSecondaryIcon && (
35+
<View style={styles.secondaryBarIconContainer}>
36+
<BarIcon
37+
name={secondaryIconName}
38+
type={secondaryIconType}
39+
size={secondaryIconSize}
40+
color={secondaryIconColor}
41+
onPress={secondaryIconOnPress}
42+
/>
43+
</View>
44+
)}
45+
{!disablePrimaryIcon && (
46+
<BarIcon
47+
name={primaryIconName}
48+
type={primaryIconType}
49+
size={primaryIconSize}
50+
color={primaryIconColor}
51+
onPress={primaryIconOnPress}
52+
/>
53+
)}
54+
</View>
55+
);
56+
};
57+
58+
render() {
59+
const {
60+
width,
61+
value,
62+
bottom,
63+
height,
64+
minHeight,
65+
maxHeight,
66+
textColor,
67+
multiline,
68+
shadowColor,
69+
placeholder,
70+
onChangeText,
71+
textInputStyle,
72+
backgroundColor
73+
} = this.props;
74+
75+
return (
76+
<Androw style={_container(shadowColor, bottom)}>
77+
<TextInput
78+
value={value}
79+
multiline={multiline}
80+
placeholder={placeholder}
81+
onChangeText={onChangeText}
82+
style={
83+
textInputStyle ||
84+
_textInputStyle(
85+
width,
86+
height,
87+
minHeight,
88+
maxHeight,
89+
textColor,
90+
multiline,
91+
backgroundColor
92+
)
93+
}
94+
{...this.props}
95+
/>
96+
{this.renderBarIconContainer()}
97+
</Androw>
98+
);
99+
}
100+
}
101+
102+
InputBar.propTypes = {
103+
multiline: PropTypes.bool,
104+
textColor: PropTypes.string,
105+
shadowColor: PropTypes.string,
106+
placeholder: PropTypes.string,
107+
primaryIconSize: PropTypes.number,
108+
primaryIconName: PropTypes.string,
109+
primaryIconType: PropTypes.string,
110+
primaryIconColor: PropTypes.string,
111+
secondaryIconSize: PropTypes.number,
112+
secondaryIconName: PropTypes.string,
113+
secondaryIconType: PropTypes.string,
114+
secondaryIconColor: PropTypes.string,
115+
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
116+
bottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
117+
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
118+
minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
119+
};
120+
121+
InputBar.defaultProps = {
122+
bottom: 24,
123+
height: 50,
124+
minHeight: 50,
125+
maxHeight: null,
126+
multiline: false,
127+
primaryIconSize: 21,
128+
textColor: "#9da1ab",
129+
secondaryIconSize: 21,
130+
shadowColor: "#757575",
131+
width: ScreenWidth * 0.9,
132+
primaryIconName: "send-o",
133+
disablePrimaryIcon: false,
134+
backgroundColor: "#fdfdfd",
135+
primaryIconColor: "#9da1ab",
136+
secondaryIconType: "Entypo",
137+
disableSecondaryIcon: false,
138+
secondaryIconColor: "#9da1ab",
139+
primaryIconType: "FontAwesome",
140+
secondaryIconName: "attachment",
141+
placeholder: "Type a message..."
142+
};
143+
144+
export default InputBar;

‎example/lib/src/InputBar.style.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
export const _barIconContainer = () => ({
2+
top: -8,
3+
right: 20,
4+
position: "absolute",
5+
flexDirection: "row"
6+
});
7+
8+
export const _container = shadowColor => ({
9+
shadowColor,
10+
flexDirection: "row",
11+
shadowRadius: 3,
12+
shadowOpacity: 0.3,
13+
shadowOffset: {
14+
width: 0,
15+
height: 1
16+
}
17+
});
18+
19+
export const _textInputStyle = (
20+
height,
21+
width,
22+
minHeight,
23+
maxHeight,
24+
color,
25+
multiline,
26+
backgroundColor
27+
) => ({
28+
color,
29+
width,
30+
height,
31+
minHeight,
32+
maxHeight,
33+
fontSize: 16,
34+
marginRight: 8,
35+
paddingLeft: 16,
36+
backgroundColor,
37+
borderRadius: 12,
38+
fontWeight: "bold",
39+
paddingTop: multiline ? 15 : null
40+
});
41+
42+
export default {
43+
secondaryBarIconContainer: {
44+
right: 12
45+
}
46+
};

‎example/lib/src/components/BarIcon.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react";
2+
import { TouchableOpacity } from "react-native";
3+
import Icon from "react-native-dynamic-vector-icons";
4+
import styles from "./BarIcon.style";
5+
6+
const BarIcon = props => {
7+
const { onPress, containerStyle } = props;
8+
return (
9+
<TouchableOpacity
10+
onPress={onPress}
11+
hitSlop={styles.hitSlop}
12+
style={containerStyle || styles.container}
13+
>
14+
<Icon
15+
size={20}
16+
name="send"
17+
color="#9da1ab"
18+
type="MaterialIcons"
19+
{...props}
20+
/>
21+
</TouchableOpacity>
22+
);
23+
};
24+
25+
export default BarIcon;

‎example/lib/src/components/BarIcon.style.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default {
2+
hitSlop: {
3+
top: 10,
4+
left: 10,
5+
right: 10,
6+
bottom: 10
7+
},
8+
container: {}
9+
};

‎example/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"lint": "eslint ."
1111
},
1212
"dependencies": {
13+
"@freakycoder/react-native-helpers": "^0.1.2",
1314
"@paraboly/react-native-input-bar": "0.1.0",
1415
"react": "16.9.0",
1516
"react-native": "0.61.5",

0 commit comments

Comments
 (0)