Merge pull request #120 from iM-GeeKy/uppercase-prop

Introduce uppercase prop.

Author: RichardLindhout

README.md

@@ -137,6 +137,7 @@ export default function ReadMeExampleSingle() {
         // }}
         // onChange={} // same props as onConfirm but triggered without confirmed by user
         // saveLabel="Save" // optional
+        // uppercase={false} // optional, default is true
         // label="Select date" // optional
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
       />
@@ -192,6 +193,7 @@ export default function ReadMeExampleRange() {
         // }}
         // onChange={} // same props as onConfirm but triggered without confirmed by user
         // saveLabel="Save" // optional
+        // uppercase={false} // optional, default is true
         // label="Select period" // optional
         // startLabel="From" // optional
         // endLabel="To" // optional
@@ -245,6 +247,7 @@ export default function ReadMeExampleMultiple() {
         //   disabledDates: [new Date()] // optional
         // }}
         // saveLabel="Save" // optional
+        // uppercase={false} // optional, default is true
         // label="Select period" // optional
         // startLabel="From" // optional
         // endLabel="To" // optional
@@ -307,6 +310,7 @@ export default function TimePickerPage() {
         hours={12} // default: current hours
         minutes={14} // default: current minutes
         label="Select time" // optional, default 'Select time'
+        uppercase={false} // optional, default is true
         cancelLabel="Cancel" // optional, default: 'Cancel'
         confirmLabel="Ok" // optional, default: 'Ok'
         animationType="fade" // optional, default is 'none'

example/src/App.tsx

@@ -315,6 +315,7 @@ function App() {
         onConfirm={onChangeRange}
         // locale={'nl'} // optional
         // saveLabel="Save" // optional
+        // uppercase={false} // optional, default is true
         // label="Select period" // optional
         // startLabel="From" // optional
         // endLabel="To" // optional
@@ -335,6 +336,7 @@ function App() {
           // endDate: new Date(), // optional
         }}
         // saveLabel="Save" // optional
+        // uppercase={false} // optional, default is true
         // label="Select date" // optional
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
       />
@@ -352,6 +354,7 @@ function App() {
         // moreLabel="more" // optional, if multiple are selected this will show if we can't show all dates
         // onChange={onChangeMulti}
         // saveLabel="Save" // optional
+        // uppercase={false} // optional, default is true
         // label="Select date" // optional
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
       />

example/src/ReadMeExampleMultiple.tsx

@@ -37,6 +37,7 @@ export default function ReadMeExampleMultiple() {
         // }}
         // locale={'nl'} // optional
         // saveLabel="Save" // optional
+        // uppercase={false} // optional, default is true
         // label="Select period" // optional
         // startLabel="From" // optional
         // endLabel="To" // optional

example/src/ReadMeExampleRange.tsx

@@ -44,6 +44,7 @@ export default function ReadMeExampleRange() {
         // onChange={} // same props as onConfirm but triggered without confirmed by user
         // locale={'nl'} // optional
         // saveLabel="Save" // optional
+        // uppercase={false} // optional, default is true
         // label="Select period" // optional
         // startLabel="From" // optional
         // endLabel="To" // optional

example/src/ReadMeExampleSingle.tsx

@@ -37,6 +37,7 @@ export default function ReadMeExampleSingle() {
         // }}
         // onChange={} // same props as onConfirm but triggered without confirmed by user
         // saveLabel="Save" // optional
+        // uppercase={false} // optional, default is true
         // label="Select date" // optional
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
       />

src/Date/DatePickerModalContent.tsx

@@ -142,6 +142,7 @@ export function DatePickerModalContent(
           onSave={onInnerConfirm}
           onDismiss={onDismiss}
           saveLabel={props.saveLabel}
+          uppercase={props.uppercase ?? true}
           disableSafeTop={disableSafeTop}
         />
         <DatePickerModalContentHeader
@@ -155,6 +156,7 @@ export function DatePickerModalContent(
           moreLabel={props.moreLabel}
           startLabel={props.startLabel}
           endLabel={props.endLabel}
+          uppercase={props.uppercase ?? true}
           locale={locale}
         />
       </DatePickerModalHeaderBackground>

src/Date/DatePickerModalContentHeader.tsx

@@ -12,6 +12,7 @@ export interface HeaderPickProps {
   label?: string
   emptyLabel?: string
   saveLabel?: string
+  uppercase?: boolean
   headerSeparator?: string
   startLabel?: string
   endLabel?: string
@@ -48,7 +49,7 @@ function getLabel(
 export default function DatePickerModalContentHeader(
   props: HeaderContentProps
 ) {
-  const { onToggle, collapsed, mode, moreLabel } = props
+  const { onToggle, collapsed, mode, moreLabel, uppercase } = props
 
   const label = getLabel(props.locale, props.mode, props.label)
 
@@ -57,7 +58,7 @@ export default function DatePickerModalContentHeader(
   return (
     <View style={[styles.header]}>
       <View>
-        <Text style={[styles.label, { color }]}>{label.toUpperCase()}</Text>
+        <Text style={[styles.label, { color }]}>{uppercase ? label.toUpperCase() : label}</Text>
 
         <View style={styles.headerContentContainer}>
           {mode === 'range' ? (

src/Date/DatePickerModalHeader.tsx

@@ -8,6 +8,7 @@ import { getTranslation } from '../translations/utils'
 export interface DatePickerModalHeaderProps {
   disableSafeTop?: boolean
   saveLabel?: string
+  uppercase?: boolean
   onDismiss: () => void
   onSave: () => void
   locale: string | undefined
@@ -43,6 +44,7 @@ export default function DatePickerModalHeader(
             <Button
               color={color}
               onPress={props.onSave}
+              uppercase={props.uppercase ?? true}
               testID="react-native-paper-dates-save"
             >
               {saveLabel}

src/Time/TimePickerModal.tsx

@@ -35,13 +35,15 @@ export function TimePickerModal({
   hours,
   minutes,
   label = 'Select time',
+  uppercase = true,
   cancelLabel = 'Cancel',
   confirmLabel = 'Ok',
   animationType = 'none',
   locale,
 }: {
   locale?: undefined | string
   label?: string
+  uppercase?: boolean
   cancelLabel?: string
   confirmLabel?: string
   hours?: number | undefined
@@ -134,7 +136,7 @@ export function TimePickerModal({
             >
               <View style={styles.labelContainer}>
                 <Text style={[styles.label, { color: theme.colors.text }]}>
-                  {label.toUpperCase()}
+                  {uppercase ? label.toUpperCase() : label}
                 </Text>
               </View>
               <View style={styles.timePickerContainer}>
@@ -160,11 +162,12 @@ export function TimePickerModal({
                   tvParallaxProperties={undefined}
                 />
                 <View style={styles.fill} />
-                <Button onPress={onDismiss}>{cancelLabel}</Button>
+                <Button onPress={onDismiss} uppercase={uppercase}>{cancelLabel}</Button>
                 <Button
                   onPress={() =>
                     onConfirm({ hours: localHours, minutes: localMinutes })
                   }
+                  uppercase={uppercase}
                 >
                   {confirmLabel}
                 </Button>