feat: icon name props for date and time pickers

Author: adilusman51

README.md

@@ -151,6 +151,9 @@ export default function ReadMeExampleSingle() {
         // uppercase={false} // optional, default is true
         // label="Select date" // optional
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
+        // closeIcon="close" // optional, default is "close"
+        // editIcon="pencil" // optional, default is "pencil"
+        // calendarIcon="calendar" // optional, default is "calendar"
       />
     </>
   );
@@ -209,6 +212,9 @@ export default function ReadMeExampleRange() {
         // startLabel="From" // optional
         // endLabel="To" // optional
         // animationType="slide" // optional, default is slide on ios/android and none on web
+        // closeIcon="close" // optional, default is "close"
+        // editIcon="pencil" // optional, default is "pencil"
+        // calendarIcon="calendar" // optional, default is "calendar"
       />
     </>
   );
@@ -263,6 +269,7 @@ export default function ReadMeExampleMultiple() {
         // startLabel="From" // optional
         // endLabel="To" // optional
         // animationType="slide" // optional, default is slide on ios/android and none on web
+        // closeIcon="close" // optional, default is "close"
       />
     </>
   );
@@ -283,6 +290,7 @@ export default function ReadMeExampleDatePickerInput() {
         onChange={(d) => setInputDate(d)}
         inputMode="start"
         // mode="outlined" (see react-native-paper docs)
+        // calendarIcon="calendar" // optional, default is "calendar"
         // other react native TextInput props
       />
     </>
@@ -326,6 +334,8 @@ export default function TimePickerPage() {
         confirmLabel="Ok" // optional, default: 'Ok'
         animationType="fade" // optional, default is 'none'
         locale="en" // optional, default is automically detected by your system
+        // keyboardIcon="keyboard-outline" // optional, default is "keyboard-outline"
+        // clockIcon="clock-outline" // optional, default is "clock-outline"
       />
       <Button onPress={()=> setVisible(true)}>
         Pick time

src/Date/DatePickerInput.tsx

@@ -19,6 +19,7 @@ function DatePickerInput(
     inputMode,
     withModal = true,
     withDateFormatInLabel = true,
+    calendarIcon = 'calendar',
     ...rest
   }: {
     inputMode: 'start' | 'end'
@@ -28,6 +29,7 @@ function DatePickerInput(
     validRange?: ValidRangeType | undefined
     withModal?: boolean
     withDateFormatInLabel?: boolean
+    calendarIcon?: string
   } & Omit<
     React.ComponentProps<typeof TextInput>,
     'value' | 'onChange' | 'onChangeText'
@@ -81,7 +83,7 @@ function DatePickerInput(
           <IconButton
             size={24}
             style={styles.calendarButton}
-            icon="calendar"
+            icon={calendarIcon}
             onPress={() => setVisible(true)}
           />
         ) : null}

src/Date/DatePickerModalContent.tsx

@@ -144,6 +144,7 @@ export function DatePickerModalContent(
           saveLabel={props.saveLabel}
           uppercase={props.uppercase ?? true}
           disableSafeTop={disableSafeTop}
+          closeIcon={props.closeIcon}
         />
         <DatePickerModalContentHeader
           state={state}
@@ -158,6 +159,8 @@ export function DatePickerModalContent(
           endLabel={props.endLabel}
           uppercase={props.uppercase ?? true}
           locale={locale}
+          editIcon={props.editIcon}
+          calendarIcon={props.calendarIcon}
         />
       </DatePickerModalHeaderBackground>
 

src/Date/DatePickerModalContentHeader.tsx

@@ -16,6 +16,9 @@ export interface HeaderPickProps {
   headerSeparator?: string
   startLabel?: string
   endLabel?: string
+  editIcon?: string
+  calendarIcon?: string
+  closeIcon?: string
 }
 
 export interface HeaderContentProps extends HeaderPickProps {
@@ -49,7 +52,15 @@ function getLabel(
 export default function DatePickerModalContentHeader(
   props: HeaderContentProps
 ) {
-  const { onToggle, collapsed, mode, moreLabel, uppercase } = props
+  const {
+    onToggle,
+    collapsed,
+    mode,
+    moreLabel,
+    uppercase,
+    editIcon = 'pencil',
+    calendarIcon = 'calendar',
+  } = props
 
   const label = getLabel(props.locale, props.mode, props.label)
 
@@ -80,7 +91,7 @@ export default function DatePickerModalContentHeader(
       <View style={styles.fill} />
       {allowEditing ? (
         <IconButton
-          icon={collapsed ? 'pencil' : 'calendar'}
+          icon={collapsed ? editIcon : calendarIcon}
           accessibilityLabel={
             collapsed
               ? getTranslation(props.locale, 'typeInDate')

src/Date/DatePickerModalHeader.tsx

@@ -12,12 +12,13 @@ export interface DatePickerModalHeaderProps {
   onDismiss: () => void
   onSave: () => void
   locale: string | undefined
+  closeIcon?: string
 }
 
 export default function DatePickerModalHeader(
   props: DatePickerModalHeaderProps
 ) {
-  const { disableSafeTop, locale } = props
+  const { disableSafeTop, locale, closeIcon = 'close' } = props
   const saveLabel = props.saveLabel || getTranslation(locale, 'save')
   const color = useHeaderTextColor()
   return (
@@ -31,7 +32,7 @@ export default function DatePickerModalHeader(
         >
           <Appbar style={styles.appbarHeader}>
             <Appbar.Action
-              icon="close"
+              icon={closeIcon}
               accessibilityLabel={getTranslation(locale, 'close')}
               onPress={props.onDismiss}
               color={color}

src/Date/DateRangeInput.tsx

@@ -5,7 +5,13 @@ import { Text, IconButton } from 'react-native-paper'
 import DatePickerModal from './DatePickerModal'
 
 // WORK IN PROGRESS
-export default function DateRangeInput({ locale }: { locale: string }) {
+export default function DateRangeInput({
+  locale,
+  calendarIcon = 'calendar',
+}: {
+  locale: string
+  calendarIcon?: string
+}) {
   const [visible, setVisible] = React.useState<boolean>(false)
   const onDismiss = React.useCallback(() => {
     setVisible(false)
@@ -50,7 +56,7 @@ export default function DateRangeInput({ locale }: { locale: string }) {
         <Text>Tot</Text>
       </View>
       <View>
-        <IconButton icon="calendar" onPress={() => setVisible(true)} />
+        <IconButton icon={calendarIcon} onPress={() => setVisible(true)} />
         <Text style={{ opacity: 0 }} accessible={false}>
           tot
         </Text>

src/Time/TimePickerModal.tsx

@@ -13,7 +13,7 @@ import { Button, IconButton, overlay, useTheme } from 'react-native-paper'
 import TimePicker from './TimePicker'
 import {
   clockTypes,
-  inputTypeIcons,
+  getTimeInputTypeIcon,
   inputTypes,
   PossibleClockTypes,
   PossibleInputTypes,
@@ -40,6 +40,8 @@ export function TimePickerModal({
   confirmLabel = 'Ok',
   animationType = 'none',
   locale,
+  keyboardIcon = 'keyboard-outline',
+  clockIcon = 'clock-outline',
 }: {
   locale?: undefined | string
   label?: string
@@ -52,6 +54,8 @@ export function TimePickerModal({
   onDismiss: () => any
   onConfirm: (hoursAndMinutes: { hours: number; minutes: number }) => any
   animationType?: 'slide' | 'fade' | 'none'
+  keyboardIcon?: string
+  clockIcon?: string
 }) {
   const theme = useTheme()
 
@@ -152,7 +156,10 @@ export function TimePickerModal({
               </View>
               <View style={styles.bottom}>
                 <IconButton
-                  icon={inputTypeIcons[reverseInputTypes[inputType]]}
+                  icon={getTimeInputTypeIcon(inputType, {
+                    keyboard: keyboardIcon,
+                    picker: clockIcon,
+                  })}
                   onPress={() => setInputType(reverseInputTypes[inputType])}
                   size={24}
                   style={styles.inputTypeToggle}

src/Time/timeUtils.ts

@@ -45,6 +45,16 @@ export const inputTypeIcons: InputIconMap = {
   picker: 'clock-outline',
 }
 
+export const getTimeInputTypeIcon = (
+  inputType: PossibleInputTypes,
+  inputIconMap?: InputIconMap
+) => {
+  return (
+    inputIconMap?.[reverseInputTypes[inputType]] ||
+    inputTypeIcons?.[reverseInputTypes[inputType]]
+  )
+}
+
 export type PossibleClockTypes = 'hours' | 'minutes'
 export type ClockTypeMap = {
   [clockType in PossibleClockTypes]: PossibleClockTypes