Skip to content

Commit 735bc9b

Browse files
RichardLindhoutRichardLindhout
committed
Make special inputs
1 parent e3625a6 commit 735bc9b

23 files changed

+647
-261
lines changed

‎babel.config.js‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
const path = require('path')
2-
const pak = require('../package.json')
3-
41
module.exports = {
52
presets: ['module:metro-react-native-babel-preset'],
6-
plugins: [
7-
[
8-
'module-resolver',
9-
{
10-
alias: {
11-
[pak.name]: path.join(__dirname, '..', pak.source),
12-
},
13-
},
14-
],
15-
],
163
}

‎example/__tests__/App-test.js‎

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

‎example/android/app/build.gradle‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
project.ext.vectoricons = [
2+
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
3+
]
4+
5+
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
16
apply plugin: "com.android.application"
27

38
import com.android.build.OutputFile
@@ -109,7 +114,9 @@ def enableProguardInReleaseBuilds = false
109114
* give correct results when using with locales other than en-US. Note that
110115
* this variant is about 6MiB larger per architecture than default.
111116
*/
112-
def jscFlavor = 'org.webkit:android-jsc:+'
117+
118+
// def jscFlavor = 'org.webkit:android-jsc:+'
119+
def jscFlavor = 'org.webkit:android-jsc-intl:+'
113120

114121
/**
115122
* Whether to enable the Hermes VM.

‎example/src/App.tsx‎

Lines changed: 57 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { ScrollView, View } from 'react-native';
2+
import { StyleSheet, ScrollView, View } from 'react-native';
33
import {
44
Title,
55
Button,
@@ -12,7 +12,10 @@ import {
1212
} from 'react-native-paper';
1313
import { DatePickerModal } from '../../src';
1414
import { Platform } from 'react-native';
15-
import TimePicker from '../../src/Time/TimePicker';
15+
16+
import TimePickerModal from '../../src/Time/TimePickerModal';
17+
import DatePickerInput from '../../src/Date/DatePickerInput';
18+
import DateRangeInput from '../../src/Date/DateRangeInput';
1619

1720
function App({
1821
onToggleDarkMode,
@@ -22,8 +25,12 @@ function App({
2225
dark: boolean;
2326
}) {
2427
const theme = useTheme();
28+
const [timeOpen, setTimeOpen] = React.useState(false);
2529
const [rangeOpen, setRangeOpen] = React.useState(false);
2630
const [singleOpen, setSingleOpen] = React.useState(false);
31+
const onDismissTime = React.useCallback(() => {
32+
setTimeOpen(false);
33+
}, [setTimeOpen]);
2734
const onDismissRange = React.useCallback(() => {
2835
setRangeOpen(false);
2936
}, [setRangeOpen]);
@@ -43,82 +50,51 @@ function App({
4350
return (
4451
<ScrollView
4552
scrollEnabled={false}
46-
style={{
47-
backgroundColor: theme.colors.background,
48-
flex: 1,
49-
}}
53+
style={[
54+
styles.root,
55+
{
56+
backgroundColor: theme.colors.background,
57+
},
58+
]}
5059
contentInsetAdjustmentBehavior="always"
5160
>
52-
<View
53-
style={{
54-
width: '100%',
55-
maxWidth: 450,
56-
backgroundColor: theme.colors.surface,
57-
shadowColor: '#000',
58-
shadowOffset: {
59-
width: 0,
60-
height: 2,
61-
},
62-
shadowOpacity: 0.25,
63-
shadowRadius: 3.84,
64-
elevation: 5,
65-
padding: 24,
66-
alignSelf: 'center',
67-
flex: 1,
68-
}}
69-
>
61+
<View style={[styles.content, { backgroundColor: theme.colors.surface }]}>
7062
<Title>Examples</Title>
71-
<View style={{ flexDirection: 'row', marginTop: 24 }}>
63+
<View style={styles.switchContainer}>
7264
<Text>Dark mode</Text>
73-
<View style={{ flex: 1 }} />
65+
<View style={styles.switchSpace} />
7466
<Switch value={dark} onValueChange={onToggleDarkMode} />
7567
</View>
76-
<View
77-
style={{
78-
backgroundColor: theme.colors.primary,
79-
width: 50,
80-
height: 50,
81-
}}
82-
/>
83-
<View
84-
style={{
85-
backgroundColor: theme.colors.accent,
86-
width: 50,
87-
height: 50,
88-
}}
89-
/>
90-
<View
91-
style={{
92-
backgroundColor: theme.colors.background,
93-
width: 50,
94-
height: 50,
95-
}}
96-
/>
97-
<View
98-
style={{
99-
backgroundColor: theme.colors.surface,
100-
width: 50,
101-
height: 50,
102-
}}
103-
/>
10468

105-
<View style={{ flexDirection: 'row', marginTop: 24 }}>
69+
<View style={styles.buttons}>
10670
<Button
10771
onPress={() => setRangeOpen(true)}
10872
uppercase={false}
10973
mode="outlined"
11074
>
11175
Pick range
11276
</Button>
113-
<View style={{ width: 6 }} />
77+
<View style={styles.buttonSeparator} />
11478
<Button
11579
onPress={() => setSingleOpen(true)}
11680
uppercase={false}
11781
mode="outlined"
11882
>
11983
Pick single date
12084
</Button>
85+
<View style={styles.buttonSeparator} />
86+
<Button
87+
onPress={() => setTimeOpen(true)}
88+
uppercase={false}
89+
mode="outlined"
90+
>
91+
Pick time
92+
</Button>
12193
</View>
94+
<View style={{ height: 12 }} />
95+
<DatePickerInput />
96+
<View style={{ height: 12 }} />
97+
<DateRangeInput />
12298

12399
<DatePickerModal
124100
mode="range"
@@ -142,9 +118,7 @@ function App({
142118
label={'Select date'} // optional
143119
/>
144120

145-
<View style={{ alignItems: 'center', marginTop: 24 }}>
146-
<TimePicker />
147-
</View>
121+
<TimePickerModal visible={timeOpen} onDismiss={onDismissTime} />
148122
</View>
149123
</ScrollView>
150124
);
@@ -172,3 +146,27 @@ export default function AppWithProviders() {
172146
</PaperProvider>
173147
);
174148
}
149+
150+
const styles = StyleSheet.create({
151+
root: { flex: 1 },
152+
content: {
153+
width: '100%',
154+
maxWidth: 450,
155+
156+
shadowColor: '#000',
157+
shadowOffset: {
158+
width: 0,
159+
height: 2,
160+
},
161+
shadowOpacity: 0.25,
162+
shadowRadius: 3.84,
163+
elevation: 5,
164+
padding: 24,
165+
alignSelf: 'center',
166+
flex: 1,
167+
},
168+
switchContainer: { flexDirection: 'row', marginTop: 24 },
169+
switchSpace: { flex: 1 },
170+
buttons: { flexDirection: 'row', marginTop: 24 },
171+
buttonSeparator: { width: 6 },
172+
});

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"@types/react": "^16.9.19",
5252
"@types/react-dom": "^16.9.8",
5353
"@types/react-native": "0.62.13",
54+
"@types/react-native-vector-icons": "^6.4.6",
5455
"@types/react-window": "^1.8.2",
5556
"color": "^3.1.2",
5657
"commitlint": "^8.3.5",

‎src/Date/Calendar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ function Calendar(props: CalendarSingleProps | CalendarRangeProps) {
115115
return (
116116
<View style={styles.root}>
117117
<Swiper
118+
selectedYear={selectedYear}
118119
scrollMode={scrollMode}
119120
renderItem={({ index }) => {
120121
return (

‎src/Date/DatePickerInput.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import * as React from 'react'
2+
3+
import TextInputWithMask from '../TextInputMask'
4+
import { IconButton } from 'react-native-paper'
5+
import { View, StyleSheet } from 'react-native'
6+
import DatePickerModal from './DatePickerModal'
7+
8+
export default function DatePickerInput() {
9+
const [visible, setVisible] = React.useState<boolean>(false)
10+
const onDismiss = React.useCallback(() => {
11+
setVisible(false)
12+
}, [setVisible])
13+
const onConfirm = React.useCallback(() => {
14+
setVisible(false)
15+
}, [setVisible])
16+
17+
return (
18+
<>
19+
<View style={styles.root}>
20+
<TextInputWithMask
21+
value={''}
22+
keyboardType={'numeric'}
23+
placeholder={'DD-MM-YYY'}
24+
mask={'DD-MM-YYY'}
25+
onChangeText={() => {}}
26+
style={styles.input}
27+
/>
28+
<IconButton
29+
size={24}
30+
style={styles.calendarButton}
31+
icon="calendar"
32+
onPress={() => setVisible(true)}
33+
/>
34+
</View>
35+
<DatePickerModal
36+
mode="single"
37+
visible={visible}
38+
onDismiss={onDismiss}
39+
onConfirm={onConfirm}
40+
/>
41+
</>
42+
)
43+
}
44+
45+
const styles = StyleSheet.create({
46+
root: {
47+
flexDirection: 'row',
48+
position: 'relative',
49+
alignItems: 'center',
50+
flex: 1,
51+
},
52+
input: { flex: 1 },
53+
calendarButton: { position: 'absolute', right: 0 },
54+
})

‎src/Date/DatePickerModal.tsx‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import * as React from 'react'
2-
import { Modal, StyleSheet, useWindowDimensions, View } from 'react-native'
2+
import {
3+
Modal,
4+
StyleSheet,
5+
TouchableWithoutFeedback,
6+
useWindowDimensions,
7+
View,
8+
} from 'react-native'
39

410
import Calendar, {
511
BaseCalendarProps,
@@ -100,10 +106,23 @@ export function DatePickerModal(
100106
visible={visible}
101107
onRequestClose={onDismiss}
102108
presentationStyle="overFullScreen"
109+
//@ts-ignore
110+
statusBarTranslucent={true}
103111
>
104112
<>
105-
<View style={[StyleSheet.absoluteFill, styles.modalBackground]} />
106-
<View style={[StyleSheet.absoluteFill, styles.modalRoot]}>
113+
<TouchableWithoutFeedback onPress={onDismiss}>
114+
<View
115+
style={[
116+
StyleSheet.absoluteFill,
117+
styles.modalBackground,
118+
{ backgroundColor: theme.colors.backdrop },
119+
]}
120+
/>
121+
</TouchableWithoutFeedback>
122+
<View
123+
style={[StyleSheet.absoluteFill, styles.modalRoot]}
124+
pointerEvents="box-none"
125+
>
107126
<View
108127
style={[
109128
styles.modalContent,
@@ -164,7 +183,6 @@ const styles = StyleSheet.create({
164183
flex: 1,
165184
},
166185
modalBackground: {
167-
backgroundColor: 'rgba(0,0,0,0.2)',
168186
flex: 1,
169187
},
170188
modalContent: {

‎src/Date/DatePickerModalHeader.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -69,17 +69,14 @@ export default function DatePickerModalHeader(props: HeaderProps) {
6969
/>
7070

7171
<Animated.View
72-
style={{
73-
backgroundColor,
74-
paddingBottom: 0,
75-
elevation: 4,
76-
}}
72+
style={[
73+
styles.animated,
74+
{
75+
backgroundColor,
76+
},
77+
]}
7778
>
78-
<SafeAreaView
79-
style={{
80-
paddingBottom: 0,
81-
}}
82-
>
79+
<SafeAreaView style={styles.safeContent}>
8380
<Appbar
8481
style={[
8582
styles.appbarHeader,
@@ -169,6 +166,13 @@ const styles = StyleSheet.create({
169166
fill: {
170167
flex: 1,
171168
},
169+
animated: {
170+
paddingBottom: 0,
171+
elevation: 4,
172+
},
173+
safeContent: {
174+
paddingBottom: 0,
175+
},
172176
header: {
173177
height: 75,
174178
alignItems: 'center',

0 commit comments

Comments
 (0)