Skip to content

Commit 53b7e64

Browse files
RichardLindhoutRichardLindhout
committed
fix: typescript
1 parent 7d50721 commit 53b7e64

File tree

15 files changed

+243
-86
lines changed

15 files changed

+243
-86
lines changed

‎babel.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
22
presets: ['module:metro-react-native-babel-preset'],
3-
};
3+
}

‎example/babel.config.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
const path = require('path');
2-
const pak = require('../package.json');
1+
const path = require('path')
2+
const pak = require('../package.json')
33

44
module.exports = {
55
presets: ['module:metro-react-native-babel-preset'],
@@ -13,4 +13,4 @@ module.exports = {
1313
},
1414
],
1515
],
16-
};
16+
}

‎example/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { AppRegistry } from 'react-native';
2-
import App from './src/App';
3-
import { name as appName } from './app.json';
1+
import { AppRegistry } from 'react-native'
2+
import App from './src/App'
3+
import { name as appName } from './app.json'
44

5-
AppRegistry.registerComponent(appName, () => App);
5+
AppRegistry.registerComponent(appName, () => App)

‎example/metro.config.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
const path = require('path');
2-
const blacklist = require('metro-config/src/defaults/blacklist');
3-
const escape = require('escape-string-regexp');
4-
const pak = require('../package.json');
1+
const path = require('path')
2+
const blacklist = require('metro-config/src/defaults/blacklist')
3+
const escape = require('escape-string-regexp')
4+
const pak = require('../package.json')
55

6-
const root = path.resolve(__dirname, '..');
6+
const root = path.resolve(__dirname, '..')
77

88
const modules = Object.keys({
99
...pak.peerDependencies,
10-
});
10+
})
1111

1212
module.exports = {
1313
projectRoot: __dirname,
@@ -24,8 +24,8 @@ module.exports = {
2424
),
2525

2626
extraNodeModules: modules.reduce((acc, name) => {
27-
acc[name] = path.join(__dirname, 'node_modules', name);
28-
return acc;
27+
acc[name] = path.join(__dirname, 'node_modules', name)
28+
return acc
2929
}, {}),
3030
},
3131

@@ -37,4 +37,4 @@ module.exports = {
3737
},
3838
}),
3939
},
40-
};
40+
}

‎example/src/App.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1-
import * as React from 'react';
2-
import { StyleSheet, View, Text } from 'react-native';
3-
import PaperDates from 'react-native-paper-dates';
1+
import * as React from 'react'
2+
import { StyleSheet, View } from 'react-native'
3+
import { DatePickerModal } from 'react-native-paper-dates'
44

55
export default function App() {
6-
const [result, setResult] = React.useState<number | undefined>();
7-
8-
React.useEffect(() => {
9-
PaperDates.multiply(3, 7).then(setResult);
10-
}, []);
6+
const [open, setOpen] = React.useState<boolean>(false)
117

128
return (
139
<View style={styles.container}>
14-
<Text>Result: {result}</Text>
10+
<DatePickerModal
11+
mode="range"
12+
startDate={undefined}
13+
endDate={undefined}
14+
visible={open}
15+
onConfirm={() => {}}
16+
onDismiss={() => setOpen(false)}
17+
/>
1518
</View>
16-
);
19+
)
1720
}
1821

1922
const styles = StyleSheet.create({
@@ -22,4 +25,4 @@ const styles = StyleSheet.create({
2225
alignItems: 'center',
2326
justifyContent: 'center',
2427
},
25-
});
28+
})

‎package.json‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-paper-dates",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"description": "Performant Date Picker for React Native Paper",
55
"main": "lib/commonjs/index",
66
"module": "lib/module/index",
@@ -46,9 +46,13 @@
4646
"@react-native-community/bob": "^0.16.2",
4747
"@react-native-community/eslint-config": "^2.0.0",
4848
"@release-it/conventional-changelog": "^1.1.4",
49+
"@types/color": "^3.0.1",
4950
"@types/jest": "^26.0.0",
5051
"@types/react": "^16.9.19",
52+
"@types/react-dom": "^16.9.8",
5153
"@types/react-native": "0.62.13",
54+
"@types/react-window": "^1.8.2",
55+
"color": "^3.1.2",
5256
"commitlint": "^8.3.5",
5357
"eslint": "^7.2.0",
5458
"eslint-config-prettier": "^6.11.0",
@@ -58,13 +62,18 @@
5862
"pod-install": "^0.1.0",
5963
"prettier": "^2.0.5",
6064
"react": "16.11.0",
65+
"react-dom": "^16.13.1",
6166
"react-native": "0.62.2",
67+
"react-native-paper": "^4.0.1",
68+
"react-window": "^1.8.5",
6269
"release-it": "^13.5.8",
6370
"typescript": "^3.8.3"
6471
},
6572
"peerDependencies": {
6673
"react": "*",
67-
"react-native": "*"
74+
"react-native": "*",
75+
"react-paper": "*",
76+
"react-window": "*"
6877
},
6978
"jest": {
7079
"preset": "react-native",
@@ -73,7 +82,12 @@
7382
"<rootDir>/lib/"
7483
]
7584
},
76-
85+
"husky": {
86+
"hooks": {
87+
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
88+
"pre-commit": "yarn lint && yarn typescript"
89+
}
90+
},
7791
"commitlint": {
7892
"extends": [
7993
"@commitlint/config-conventional"
@@ -109,22 +123,31 @@
109123
"singleQuote": true,
110124
"tabWidth": 2,
111125
"trailingComma": "es5",
112-
"useTabs": false
126+
"useTabs": false,
127+
"semi": false
113128
}
114129
]
115130
}
116131
},
117-
"eslintIgnore": ["node_modules/", "lib/"],
132+
"eslintIgnore": [
133+
"node_modules/",
134+
"lib/"
135+
],
118136
"prettier": {
119137
"quoteProps": "consistent",
120138
"singleQuote": true,
121139
"tabWidth": 2,
122140
"trailingComma": "es5",
123-
"useTabs": false
141+
"useTabs": false,
142+
"semi": false
124143
},
125144
"@react-native-community/bob": {
126145
"source": "src",
127146
"output": "lib",
128-
"targets": ["commonjs", "module", "typescript"]
147+
"targets": [
148+
"commonjs",
149+
"module",
150+
"typescript"
151+
]
129152
}
130153
}

‎src/DatePickerModalHeader.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,7 @@ export function HeaderContentRange({
9999
<Text
100100
style={[
101101
styles.rangeHeaderText,
102-
{
103-
color: state.startDate
104-
? 'rgba(255,255,255,1)'
105-
: 'rgba(255,255,255,0.5)',
106-
},
102+
state.startDate ? styles.headerTextFilled : styles.headerTextEmpty,
107103
]}
108104
>
109105
{state.startDate ? formatter.format(state.startDate) : startLabel}
@@ -112,11 +108,7 @@ export function HeaderContentRange({
112108
<Text
113109
style={[
114110
styles.rangeHeaderText,
115-
{
116-
color: state.endDate
117-
? 'rgba(255,255,255,1)'
118-
: 'rgba(255,255,255,0.5)',
119-
},
111+
state.endDate ? styles.headerTextFilled : styles.headerTextEmpty,
120112
]}
121113
>
122114
{state.endDate ? formatter.format(state.endDate) : endLabel}
@@ -140,6 +132,8 @@ const styles = StyleSheet.create({
140132
label: { color: '#fff', letterSpacing: 1, fontSize: 13 },
141133
singleHeaderText: { color: '#fff', fontSize: 25 },
142134
rangeHeaderText: { color: '#fff', fontSize: 25 },
135+
headerTextFilled: { color: 'rgba(255,255,255,1)' },
136+
headerTextEmpty: { color: 'rgba(255,255,255,0.5)' },
143137
headerSeparator: {
144138
color: 'rgba(255,255,255,1)',
145139
fontSize: 25,

‎src/DayName.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import * as React from 'react'
22
import { StyleSheet, View } from 'react-native'
3-
import { Text } from 'react-native-paper'
4-
import fonts from '../fonts'
3+
import { Text, useTheme } from 'react-native-paper'
54

65
function DayName({ label }: { label: string }) {
6+
const theme = useTheme()
77
return (
88
<View style={styles.dayName}>
9-
<Text style={styles.dayNameLabel}>{label}</Text>
9+
<Text style={[styles.dayNameLabel, theme.fonts.medium]}>{label}</Text>
1010
</View>
1111
)
1212
}
1313
const styles = StyleSheet.create({
1414
dayName: { flex: 1, alignItems: 'center' },
15-
dayNameLabel: { fontSize: 14, ...fonts.medium, opacity: 0.7 },
15+
dayNameLabel: { fontSize: 14, opacity: 0.7 },
1616
})
1717
export default React.memo(DayName)

‎src/DayRange.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,23 @@ function DayRange({
2121
style={[
2222
StyleSheet.absoluteFill,
2323
styles.rangeRoot,
24-
{
25-
backgroundColor: inRange && !isCrop ? selectColor : 'transparent',
26-
},
24+
inRange && !isCrop
25+
? {
26+
backgroundColor: selectColor,
27+
}
28+
: null,
2729
]}
2830
>
2931
{isCrop && (
3032
<>
3133
<View
3234
style={[
3335
styles.flex1,
34-
{
35-
backgroundColor: rightCrop ? selectColor : 'transparent',
36-
},
36+
rightCrop
37+
? {
38+
backgroundColor: selectColor,
39+
}
40+
: null,
3741
]}
3842
/>
3943
<View
@@ -50,9 +54,11 @@ function DayRange({
5054
<View
5155
style={[
5256
styles.flex1,
53-
{
54-
backgroundColor: leftCrop ? selectColor : 'transparent',
55-
},
57+
leftCrop
58+
? {
59+
backgroundColor: selectColor,
60+
}
61+
: null,
5662
]}
5763
/>
5864
</>

‎src/Month.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react'
22
import { I18nManager, StyleSheet, View } from 'react-native'
3-
import { IconButton, Text } from 'react-native-paper'
3+
import { IconButton, Text, useTheme, TouchableRipple } from 'react-native-paper'
44
import Day, { EmptyDay } from './Day'
5-
import fonts from '../fonts'
5+
66
import {
77
addMonths,
88
areDatesOnSameDay,
@@ -13,7 +13,6 @@ import {
1313
gridCounts,
1414
isDateBetween,
1515
} from './utils'
16-
import TouchableRipple from '../TouchableRipple'
1716
import { getCalendarHeaderHeight } from './CalendarHeader'
1817

1918
interface BaseMonthProps {
@@ -96,6 +95,7 @@ function Month({
9695
selectColor,
9796
roundness,
9897
}: MonthSingleProps | MonthRangeProps) {
98+
const theme = useTheme()
9999
const realIndex = getRealIndex(index)
100100
const isHorizontal = scrollMode === 'horizontal'
101101

@@ -182,7 +182,7 @@ function Month({
182182
marginTop: monthHeaderSingleMarginTop,
183183
marginBottom: monthHeaderSingleMarginBottom,
184184
}
185-
: {},
185+
: null,
186186
]}
187187
>
188188
<TouchableRipple
@@ -203,7 +203,7 @@ function Month({
203203
},
204204
]}
205205
>
206-
<Text style={styles.monthLabel}>
206+
<Text style={[styles.monthLabel, theme.fonts.medium]}>
207207
{monthName} {year}
208208
</Text>
209209
<View style={isHorizontal ? styles.opacity1 : styles.opacity0}>
@@ -269,7 +269,7 @@ const styles = StyleSheet.create({
269269
justifyContent: 'center',
270270
overflow: 'hidden',
271271
},
272-
monthLabel: { fontSize: 14, ...fonts.medium, opacity: 0.7 },
272+
monthLabel: { fontSize: 14, opacity: 0.7 },
273273
yearButton: { alignSelf: 'flex-start', marginLeft: 6 },
274274
yearButtonInner: {
275275
paddingLeft: 16,

0 commit comments

Comments
 (0)