Skip to content

Commit

Permalink
Merge pull request #56 from farhoudshapouran/timepicker-performace-is…
Browse files Browse the repository at this point in the history
…sues

Timepicker performace issues
  • Loading branch information
farhoudshapouran authored Jan 29, 2024
2 parents bc776a8 + b4b7f77 commit 2b5b43c
Show file tree
Hide file tree
Showing 9 changed files with 274 additions and 160 deletions.
38 changes: 34 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,18 +56,48 @@ For more, take a look at the `/example` directory.
![react-native-ui-datepicker-styles](https://user-images.githubusercontent.com/7857656/227260476-30ee8c25-f809-4dcf-bccf-cd1ffab8795a.jpg)


## Available props
## Calendar props

| Name | Type | Default | Description |
| ------------------------ | --------------- | --------------- | -------------------------------------------------------------------------------------- |
| value | `DateType` | `Dayjs` | DatePicker value to display selected date |
| onChange | `Function` | `() => {}` | Called when the new date selected from DatePicker |
| mode | `string` | `'datetime'` | Defines the DatePicker mode `['datetime', 'date', 'time']` |
| mode | `string` | `'single'` | Defines the DatePicker mode `['single', 'range', 'multiple']` |
| locale | `string` | `'en'` | Defines the DatePicker locale |
| minDate | `DateType` | `null` | Defines DatePicker minimum selectable date |
| maxDate | `DateType` | `null` | Defines DatePicker maximum selectable date |
| firstDayOfWeek | `number` | `0` | Defines the starting day of week, number 0-6, 0 - Sunday, 6 - Saturday |
| displayFullDays | `boolean` | `false` | Defines show previous and next month's days in the current calendar view |


## Single Mode props

| Name | Type | Default | Description |
| ------------ | --------------- | ----------------- | -------------------------------------------------------------- |
| date | `DateType` | `undefined` | Date value to display selected date |
| onChange | `Function` | `({date}) => {}` | Called when the new date selected from DatePicker |
| timePicker | `boolean` | `false` | Defines show or hide time picker |


## Range Mode props

| Name | Type | Default | Description |
| ------------ | --------------- | -------------------------------- | ----------------------------------------------------------------- |
| startDate | `DateType` | `undefined` | Start date value to display selected start date |
| endDate | `DateType` | `undefined` | End date value to display selected end date |
| onChange | `Function` | `({startDate, endDate}) => {}` | Called when the new start or end date selected from DatePicker |


## Multiple Mode props

| Name | Type | Default | Description |
| ------------ | --------------- | ------------------ | -------------------------------------------------------------- |
| dates | `DateType[]` | `[]` | Dates array to display selected dates |
| onChange | `Function` | `({dates}) => {}` | Called when the new dates selected from DatePicker |


## Styling props

| Name | Type | Default | Description |
| ------------------------ | --------------- | --------------- | -------------------------------------------------------------------------------------- |
| calendarTextStyle | `TextStyle` | `null` | Defines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes) |
| selectedTextStyle | `TextStyle` | `null` | Defines selected (Day, Month, Year) text styles |
| selectedItemColor | `string` | `'#0047FF'` | Defines selected (Day, Month, Year) background and border colors |
Expand Down
146 changes: 16 additions & 130 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import {
StyleSheet,
View,
Text,
Pressable,
Image,
Linking,
SafeAreaView,
TouchableOpacity,
Pressable,
} from 'react-native';
import ThemeSelector, { ITheme } from './components/ThemeSelector';
import LocaleSelector from './components/LocaleSelector';
import GithubLink from './components/GithubLink';
import BouncyCheckbox from 'react-native-bouncy-checkbox';
import DateTimePicker, { DateType, ModeType } from 'react-native-ui-datepicker';
import dayjs from 'dayjs';
Expand All @@ -18,11 +19,6 @@ import 'dayjs/locale/es';
import 'dayjs/locale/fr';
import 'dayjs/locale/tr';

interface ITheme {
mainColor: string;
activeTextColor: string;
}

const Themes: ITheme[] = [
{ mainColor: '#0047FF', activeTextColor: '#fff' },
{ mainColor: '#00D27A', activeTextColor: '#fff' },
Expand All @@ -34,8 +30,6 @@ const Themes: ITheme[] = [
{ mainColor: '#FAD7DD', activeTextColor: '#932338' },
];

const Locales = ['en', 'de', 'es', 'fr', 'tr'];

export default function App() {
const [mode, setMode] = useState<ModeType>('single');
const [timePicker, setTimePicker] = useState(false);
Expand Down Expand Up @@ -79,60 +73,16 @@ export default function App() {
<View style={styles.titleContainer}>
<Text style={styles.title}>React Native UI DatePicker</Text>
</View>
<View style={styles.themeContainer}>
{Themes.map((item, index) => (
<Pressable
key={index}
style={[
styles.themeButton,
{
borderColor: item.activeTextColor,
backgroundColor: item.mainColor,
},
]}
onPress={() => setTheme(item)}
accessibilityRole="button"
accessibilityLabel="Set Active Theme"
/>
))}
</View>
<View style={styles.localeContainer}>
<Text
style={{
// eslint-disable-next-line react-native/no-inline-styles
marginRight: 8,
}}
>
Locale:
</Text>
{Locales.map((item, index) => (
<Pressable
key={index}
style={[
styles.localeButton,
item === locale && {
backgroundColor: theme?.mainColor,
},
]}
onPress={() => setLocale(item)}
accessibilityRole="button"
accessibilityLabel={item.toUpperCase()}
>
<Text
style={[
styles.localeButtonText,
// eslint-disable-next-line react-native/no-inline-styles
item === locale && {
fontWeight: 'bold',
color: theme?.activeTextColor,
},
]}
>
{item.toUpperCase()}
</Text>
</Pressable>
))}
</View>

<ThemeSelector themes={Themes} setTheme={setTheme} />

<LocaleSelector
locale={locale}
setLocale={setLocale}
mainColor={theme?.mainColor}
activeTextColor={theme?.activeTextColor}
/>

<View style={styles.modesContainer}>
<Text
style={{
Expand Down Expand Up @@ -331,24 +281,8 @@ export default function App() {
</View>
</View>
</View>
<View style={styles.githubContainer}>
<Pressable
style={styles.githubLink}
onPress={() =>
Linking.openURL(
'https://github.com/farhoudshapouran/react-native-ui-datepicker'
)
}
accessibilityRole="button"
accessibilityLabel="Check repository on GitHub"
>
<Image
source={require('../assets/github-logo.png')}
style={styles.githubLogo}
/>
<Text style={styles.githubText}>Check repository on GitHub</Text>
</Pressable>
</View>

<GithubLink />
</View>
</SafeAreaView>
);
Expand All @@ -372,40 +306,6 @@ const styles = StyleSheet.create({
width: '100%',
},
title: { fontSize: 18, fontWeight: 'bold' },
themeContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
marginBottom: 10,
width: 330,
},
themeButton: {
borderWidth: 4,
width: 32,
height: 32,
borderRadius: 32,
margin: 5,
shadowRadius: 20,
shadowColor: '#000',
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 0 },
},
localeContainer: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 20,
},
localeButton: {
alignItems: 'center',
justifyContent: 'center',
width: 36,
height: 36,
borderRadius: 36,
margin: 2,
},
localeButtonText: {
fontSize: 15,
},
modesContainer: {
flexDirection: 'row',
alignItems: 'center',
Expand Down Expand Up @@ -452,18 +352,4 @@ const styles = StyleSheet.create({
todayButtonText: {
fontWeight: 'bold',
},
githubContainer: {
paddingVertical: 20,
},
githubLink: {
flexDirection: 'row',
alignItems: 'center',
},
githubLogo: {
width: 22,
height: 22,
},
githubText: {
marginLeft: 8,
},
});
49 changes: 49 additions & 0 deletions example/src/components/GithubLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from 'react';
import {
StyleSheet,
View,
Text,
Pressable,
Image,
Linking,
} from 'react-native';

export default function GithubLink() {
return (
<View style={styles.githubContainer}>
<Pressable
style={styles.githubLink}
onPress={() =>
Linking.openURL(
'https://github.com/farhoudshapouran/react-native-ui-datepicker'
)
}
accessibilityRole="button"
accessibilityLabel="Check repository on GitHub"
>
<Image
source={require('../../assets/github-logo.png')}
style={styles.githubLogo}
/>
<Text style={styles.githubText}>Check repository on GitHub</Text>
</Pressable>
</View>
);
}

const styles = StyleSheet.create({
githubContainer: {
paddingVertical: 20,
},
githubLink: {
flexDirection: 'row',
alignItems: 'center',
},
githubLogo: {
width: 22,
height: 22,
},
githubText: {
marginLeft: 8,
},
});
77 changes: 77 additions & 0 deletions example/src/components/LocaleSelector.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import React from 'react';
import { StyleSheet, View, Text, Pressable } from 'react-native';

const Locales = ['en', 'de', 'es', 'fr', 'tr'];

type Props = {
locale: string;
setLocale: (locale: string) => void;
mainColor?: string;
activeTextColor?: string;
};

export default function LocaleSelector({
locale,
setLocale,
mainColor,
activeTextColor,
}: Props) {
return (
<View style={styles.localeContainer}>
<Text
style={{
// eslint-disable-next-line react-native/no-inline-styles
marginRight: 8,
}}
>
Locale:
</Text>
{Locales.map((item, index) => (
<Pressable
key={index}
style={[
styles.localeButton,
item === locale && {
backgroundColor: mainColor,
},
]}
onPress={() => setLocale(item)}
accessibilityRole="button"
accessibilityLabel={item.toUpperCase()}
>
<Text
style={[
styles.localeButtonText,
// eslint-disable-next-line react-native/no-inline-styles
item === locale && {
fontWeight: 'bold',
color: activeTextColor,
},
]}
>
{item.toUpperCase()}
</Text>
</Pressable>
))}
</View>
);
}

const styles = StyleSheet.create({
localeContainer: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 20,
},
localeButton: {
alignItems: 'center',
justifyContent: 'center',
width: 36,
height: 36,
borderRadius: 36,
margin: 2,
},
localeButtonText: {
fontSize: 15,
},
});
Loading

0 comments on commit 2b5b43c

Please sign in to comment.