Merge branch 'master' into feature/start-end-year

Author: RichardLindhout

README.md

@@ -57,7 +57,7 @@ npm install react-native-paper-dates --save
 
 ## Import some localized strings
 Ideally you do this somewhere in your `index.js` before `react-native-paper-dates` is used.
-Currently we have en/nl/de/pl/pt translations but it's really easy to add one extra since it are only some labels and error messages.
+Currently we have en/nl/de/pl/pt/ar translations but it's really easy to add one extra since it are only some labels and error messages.
 
 ```tsx
 // e.g in your index.js
@@ -67,6 +67,7 @@ import {
   // de,
   // pl,
   // pt,
+  //ar,
   enGB,
   registerTranslation,
 } from 'react-native-paper-dates'
@@ -75,6 +76,7 @@ import {
 // registerTranslation('pl', pl)
 // registerTranslation('pt', pt)
 // registerTranslation('de', de)
+// registerTranslation('ar', ar)
 registerTranslation('en-GB', enGB)
 ```
 
@@ -153,6 +155,9 @@ export default function ReadMeExampleSingle() {
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
         // startYear={2000} // optional, default is 1800
         // endYear={2100} // optional, default is 2200
+        // closeIcon="close" // optional, default is "close"
+        // editIcon="pencil" // optional, default is "pencil"
+        // calendarIcon="calendar" // optional, default is "calendar"
       />
     </>
   );
@@ -213,6 +218,9 @@ export default function ReadMeExampleRange() {
         // animationType="slide" // optional, default is slide on ios/android and none on web
         // startYear={2000} // optional, default is 1800
         // endYear={2100} // optional, default is 2200
+        // closeIcon="close" // optional, default is "close"
+        // editIcon="pencil" // optional, default is "pencil"
+        // calendarIcon="calendar" // optional, default is "calendar"
       />
     </>
   );
@@ -269,6 +277,7 @@ export default function ReadMeExampleMultiple() {
         // animationType="slide" // optional, default is slide on ios/android and none on web
         // startYear={2000} // optional, default is 1800
         // endYear={2100} // optional, default is 2200
+        // closeIcon="close" // optional, default is "close"
       />
     </>
   );
@@ -289,6 +298,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
       />
     </>
@@ -332,6 +342,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
@@ -387,6 +399,8 @@ or npm
 npm install react-native-localize @formatjs/intl-pluralrules @formatjs/intl-getcanonicallocales @formatjs/intl-listformat @formatjs/intl-displaynames @formatjs/intl-locale @formatjs/intl-datetimeformat @formatjs/intl-numberformat @formatjs/intl-relativetimeformat --save
 ```
 
+If using Expo, omit `react-native-localize` and use `expo install expo-localization` instead. Read more [here](https://docs.expo.dev/versions/latest/sdk/localization/#installation).
+
 In your app starting entrypoint e.g. `./index.js` or even better use a `index.android.js` to prevent importing on iOS/web put the following code. (don't forget to import the languages you want to support, in the example only english language is supported)
 
 ```javascript

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

@@ -146,6 +146,7 @@ export function DatePickerModalContent(
           saveLabel={props.saveLabel}
           uppercase={props.uppercase ?? true}
           disableSafeTop={disableSafeTop}
+          closeIcon={props.closeIcon}
         />
         <DatePickerModalContentHeader
           state={state}
@@ -160,6 +161,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

src/translations/ar.ts

@@ -0,0 +1,21 @@
+import type { TranslationsType } from './utils'
+
+const ar: TranslationsType = {
+  save: 'حفظ',
+  selectSingle: 'حدد تاريخ',
+  selectMultiple: 'حدد التواريخ',
+  selectRange: 'حدد الفترة',
+  notAccordingToDateFormat: (inputFormat:string) =>
+    `يجب أن يكون تنسيق التاريخ ${inputFormat}`,
+  mustBeHigherThan: (date) => `يجب أن يكون بعد  ${date}`,
+  mustBeLowerThan: (date) => `يجب أن يكون قبل  ${date}`,
+  mustBeBetween: (startDate, endDate) =>
+    `يجب أن يكون بين ${startDate} - ${endDate}`,
+  dateIsDisabled: 'اليوم غير مسموح به',
+  previous: 'السابق',
+  next: 'التالي',
+  typeInDate: 'اكتب التاريخ',
+  pickDateFromCalendar: 'اختر التاريخ من التقويم',
+  close: 'أغلق',
+}
+export default ar

src/translations/ko.ts

@@ -0,0 +1,21 @@
+import type { TranslationsType } from './utils'
+
+const ko: TranslationsType = {
+  save: '저장,
+  selectSingle: '날짜 선택',
+  selectMultiple: '여러 날짜 선택',
+  selectRange: '기간 선택',
+  notAccordingToDateFormat: (inputFormat) =>
+    `날짜 형식은 ${inputFormat}가 되어야 합니다`,
+  mustBeHigherThan: (date) => `${date} 보다 커야 합니다`,
+  mustBeLowerThan: (date) => `${date} 보다 작아야 합니다`,
+  mustBeBetween: (startDate, endDate) =>
+    `${startDate} - ${endDate} 사이여야 합니다`,
+  dateIsDisabled: '날짜는 허용되지 않습니다',
+  previous: '이전',
+  next: '다음',
+  typeInDate: '날짜 입력',
+  pickDateFromCalendar: '달력에서 날짜 선택',
+  close: '닫기',
+}
+export default ko