feat: multi modal header content

Author: nandorojo

src/Date/DatePickerModalContentHeader.tsx

@@ -36,6 +36,9 @@ function getLabel(mode: ModeType, configuredLabel?: string) {
   if (mode === 'excludeInRange') {
     return 'Select excluded dates'
   }
+  if (mode === 'multi') {
+    return 'Select dates'
+  }
   return '...?'
 }
 
@@ -61,6 +64,9 @@ export default function DatePickerModalHeader(props: HeaderContentProps) {
           {mode === 'excludeInRange' ? (
             <HeaderContentExcludeInRange {...props} color={color} />
           ) : null}
+          {mode === 'multi' ? (
+            <HeaderContentMulti {...props} color={color} />
+          ) : null}
         </View>
       </View>
       <View style={styles.fill} />
@@ -98,6 +104,37 @@ export function HeaderContentSingle({
   )
 }
 
+export function HeaderContentMulti({
+  state,
+  emptyLabel = ' ',
+  color,
+  locale,
+}: HeaderContentProps & { color: string }) {
+  const dateCount = state.dates?.length || 0
+  const lighterColor = Color(color).fade(0.5).rgb().toString()
+  const dateColor = dateCount ? color : lighterColor
+
+  const formatter = React.useMemo(() => {
+    return new Intl.DateTimeFormat(locale, {
+      month: 'short',
+      day: 'numeric',
+    })
+  }, [locale])
+
+  let label = emptyLabel
+  if (dateCount) {
+    if (dateCount <= 2) {
+      label = state.dates.map((date) => formatter.format(date)).join(', ')
+    } else {
+      label = formatter.format(state.dates[0]) + ` (+ ${dateCount - 1} more)`
+    }
+  }
+
+  return (
+    <Text style={[styles.singleHeaderText, { color: dateColor }]}>{label}</Text>
+  )
+}
+
 export function HeaderContentExcludeInRange({
   state,
   emptyLabel = ' ',