react-native-paper-dates 0.9.2 → 0.10.0

package/lib/module/Date/Swiper.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","getIndexFromVerticalOffset","getMonthHeight","getVerticalMonthsOffset","montHeaderHeight","beginOffset","estimatedMonthHeight","totalMonths","useLatest","useYearChange","AutoSizer","Swiper","scrollMode","renderItem","renderHeader","renderFooter","selectedYear","initialIndex","isHorizontal","index","setIndex","useState","onPrev","useCallback","prev","onNext","renderProps","indexRef","newIndex","currentIndexRef","styles","flex1","width","height","visibleArray","i","VerticalScroller","estimatedHeight","idx","useRef","visibleIndexes","setVisibleIndexes","parentRef","useIsomorphicLayoutEffect","element","current","top","scrollTo","setVisibleIndexesThrottled","useDebouncedCallback","onScroll","e","currentTarget","scrollTop","offset","overflow","position","map","vi","willChange","transform","left","right","empty","create","flex","callback","mounted","latest","timerId","useEffect","window","cancelAnimationFrame","args","requestAnimationFrame","useLayoutEffect","memo"],"sources":["Swiper.tsx"],"sourcesContent":["import * as React from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport {\n  getIndexFromVerticalOffset,\n  getMonthHeight,\n  getVerticalMonthsOffset,\n  montHeaderHeight,\n} from './Month'\n\nimport { beginOffset, estimatedMonthHeight, totalMonths } from './dateUtils'\nimport { useLatest } from '../utils'\nimport { RenderProps, SwiperProps, useYearChange } from './SwiperUtils'\nimport AutoSizer from './AutoSizer'\n\nfunction Swiper({\n  scrollMode,\n  renderItem,\n  renderHeader,\n  renderFooter,\n  selectedYear,\n  initialIndex,\n}: SwiperProps) {\n  const isHorizontal = scrollMode === 'horizontal'\n  const [index, setIndex] = React.useState(initialIndex)\n\n  const onPrev = React.useCallback(() => {\n    setIndex((prev) => prev - 1)\n  }, [setIndex])\n\n  const onNext = React.useCallback(() => {\n    setIndex((prev) => prev + 1)\n  }, [setIndex])\n\n  const renderProps = {\n    index,\n    onPrev,\n    onNext,\n  }\n  const indexRef = useLatest(index)\n  useYearChange(\n    (newIndex) => {\n      if (newIndex) {\n        setIndex(newIndex)\n      }\n    },\n    {\n      selectedYear,\n      currentIndexRef: indexRef,\n    }\n  )\n\n  return (\n    <>\n      {renderHeader && renderHeader(renderProps)}\n      {isHorizontal ? (\n        <View style={styles.flex1}>\n          {renderItem({ index, onPrev, onNext })}\n        </View>\n      ) : (\n        <AutoSizer>\n          {({ width, height }) => (\n            <VerticalScroller\n              width={width}\n              height={height}\n              initialIndex={initialIndex}\n              estimatedHeight={estimatedMonthHeight}\n              renderItem={renderItem}\n            />\n          )}\n        </AutoSizer>\n      )}\n      {renderFooter && renderFooter(renderProps)}\n    </>\n  )\n}\n\nconst visibleArray = (i: number) => [i - 2, i - 1, i, i + 1, i + 2]\n\nfunction VerticalScroller({\n  width,\n  height,\n  initialIndex,\n  estimatedHeight,\n  renderItem,\n}: {\n  renderItem: (renderProps: RenderProps) => any\n  width: number\n  height: number\n  initialIndex: number\n  estimatedHeight: number\n}) {\n  const idx = React.useRef<number>(initialIndex)\n  const [visibleIndexes, setVisibleIndexes] = React.useState<number[]>(\n    visibleArray(initialIndex)\n  )\n  // eslint-disable-next-line no-undef\n  const parentRef = React.useRef<HTMLDivElement | null>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    const element = parentRef.current\n    if (!element) {\n      return\n    }\n    const top = getVerticalMonthsOffset(idx.current) - montHeaderHeight\n\n    element.scrollTo({\n      top,\n    })\n  }, [parentRef, idx])\n\n  const setVisibleIndexesThrottled = useDebouncedCallback(setVisibleIndexes)\n\n  const onScroll = React.useCallback(\n    (e: React.UIEvent) => {\n      const top = e.currentTarget.scrollTop\n      if (top === 0) {\n        return\n      }\n\n      const offset = top - beginOffset\n      const index = getIndexFromVerticalOffset(offset)\n\n      if (idx.current !== index) {\n        idx.current = index\n        setVisibleIndexesThrottled(visibleArray(index))\n      }\n    },\n    [setVisibleIndexesThrottled]\n  )\n\n  return (\n    <div\n      ref={parentRef}\n      style={{\n        height,\n        width,\n        overflow: 'auto',\n      }}\n      onScroll={onScroll}\n    >\n      <div\n        style={{\n          height: estimatedHeight * totalMonths,\n          position: 'relative',\n        }}\n      >\n        {[0, 1, 2, 3, 4].map((vi) => (\n          <div\n            key={vi}\n            style={{\n              willChange: 'transform',\n              transform: `translateY(${getVerticalMonthsOffset(\n                visibleIndexes[vi]\n              )}px)`,\n              left: 0,\n              right: 0,\n              position: 'absolute',\n              height: getMonthHeight('vertical', visibleIndexes[vi]),\n              // transform: `translateY(${getMonthsOffset('vertical', vi)}px)`,\n            }}\n          >\n            {renderItem({\n              index: visibleIndexes[vi],\n              onPrev: empty,\n              onNext: empty,\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst empty = () => null\n\nconst styles = StyleSheet.create({\n  flex1: {\n    flex: 1,\n  },\n})\n\nexport function useDebouncedCallback(callback: any): any {\n  const mounted = React.useRef<boolean>(true)\n  const latest = useLatest(callback)\n  const timerId = React.useRef<any>(null)\n\n  React.useEffect(() => {\n    return () => {\n      mounted.current = false\n      if (timerId.current) {\n        window.cancelAnimationFrame(timerId.current)\n      }\n    }\n  }, [mounted, timerId])\n\n  return React.useCallback(\n    (args: any) => {\n      if (timerId.current) {\n        window.cancelAnimationFrame(timerId.current)\n      }\n      timerId.current = window.requestAnimationFrame(function () {\n        if (mounted.current) {\n          latest.current(args)\n        }\n      })\n    },\n    [mounted, timerId, latest]\n  )\n}\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\nexport default React.memo(Swiper)\n"],"mappings":"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"}
+{"version":3,"names":["React","StyleSheet","View","getIndexFromVerticalOffset","getMonthHeight","getVerticalMonthsOffset","montHeaderHeight","beginOffset","estimatedMonthHeight","totalMonths","useLatest","useYearChange","AutoSizer","Swiper","scrollMode","renderItem","renderHeader","renderFooter","selectedYear","initialIndex","isHorizontal","index","setIndex","useState","onPrev","useCallback","prev","onNext","renderProps","indexRef","newIndex","currentIndexRef","styles","flex1","width","height","visibleArray","i","VerticalScroller","estimatedHeight","idx","useRef","visibleIndexes","setVisibleIndexes","parentRef","useIsomorphicLayoutEffect","element","current","top","scrollTo","setVisibleIndexesThrottled","useDebouncedCallback","onScroll","e","currentTarget","scrollTop","offset","overflow","position","map","vi","willChange","transform","left","right","empty","create","flex","callback","mounted","latest","timerId","useEffect","window","cancelAnimationFrame","args","requestAnimationFrame","useLayoutEffect","memo"],"sources":["Swiper.tsx"],"sourcesContent":["import * as React from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport {\n  getIndexFromVerticalOffset,\n  getMonthHeight,\n  getVerticalMonthsOffset,\n  montHeaderHeight,\n} from './Month'\n\nimport { beginOffset, estimatedMonthHeight, totalMonths } from './dateUtils'\nimport { useLatest } from '../utils'\nimport { RenderProps, SwiperProps, useYearChange } from './SwiperUtils'\nimport AutoSizer from './AutoSizer'\n\nfunction Swiper({\n  scrollMode,\n  renderItem,\n  renderHeader,\n  renderFooter,\n  selectedYear,\n  initialIndex,\n}: SwiperProps) {\n  const isHorizontal = scrollMode === 'horizontal'\n  const [index, setIndex] = React.useState(initialIndex)\n\n  const onPrev = React.useCallback(() => {\n    setIndex((prev) => prev - 1)\n  }, [setIndex])\n\n  const onNext = React.useCallback(() => {\n    setIndex((prev) => prev + 1)\n  }, [setIndex])\n\n  const renderProps = {\n    index,\n    onPrev,\n    onNext,\n  }\n  const indexRef = useLatest(index)\n  useYearChange(\n    (newIndex) => {\n      if (newIndex) {\n        setIndex(newIndex)\n      }\n    },\n    {\n      selectedYear,\n      currentIndexRef: indexRef,\n    }\n  )\n\n  return (\n    <>\n      {renderHeader && renderHeader(renderProps)}\n      {isHorizontal ? (\n        <View style={styles.flex1}>\n          {renderItem({ index, onPrev, onNext })}\n        </View>\n      ) : (\n        <AutoSizer>\n          {({ width, height }) => (\n            <VerticalScroller\n              width={width}\n              height={height}\n              initialIndex={initialIndex}\n              estimatedHeight={estimatedMonthHeight}\n              renderItem={renderItem}\n            />\n          )}\n        </AutoSizer>\n      )}\n      {renderFooter && renderFooter(renderProps)}\n    </>\n  )\n}\n\nconst visibleArray = (i: number) => [i - 2, i - 1, i, i + 1, i + 2]\n\nfunction VerticalScroller({\n  width,\n  height,\n  initialIndex,\n  estimatedHeight,\n  renderItem,\n}: {\n  renderItem: (renderProps: RenderProps) => any\n  width: number\n  height: number\n  initialIndex: number\n  estimatedHeight: number\n}) {\n  const idx = React.useRef<number>(initialIndex)\n  const [visibleIndexes, setVisibleIndexes] = React.useState<number[]>(\n    visibleArray(initialIndex)\n  )\n  // eslint-disable-next-line no-undef\n  const parentRef = React.useRef<HTMLDivElement | null>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    const element = parentRef.current\n    if (!element) {\n      return\n    }\n    const top = getVerticalMonthsOffset(idx.current) - montHeaderHeight\n\n    element.scrollTo({\n      top,\n    })\n  }, [parentRef, idx])\n\n  const setVisibleIndexesThrottled = useDebouncedCallback(setVisibleIndexes)\n\n  const onScroll = React.useCallback(\n    (e: React.UIEvent) => {\n      const top = e.currentTarget.scrollTop\n      if (top === 0) {\n        return\n      }\n\n      const offset = top - beginOffset\n      const index = getIndexFromVerticalOffset(offset)\n\n      if (idx.current !== index) {\n        idx.current = index\n        setVisibleIndexesThrottled(visibleArray(index))\n      }\n    },\n    [setVisibleIndexesThrottled]\n  )\n\n  return (\n    <div\n      ref={parentRef}\n      style={{\n        height,\n        width,\n        overflow: 'auto',\n      }}\n      onScroll={onScroll}\n    >\n      <div\n        style={{\n          height: estimatedHeight * totalMonths,\n          position: 'relative',\n        }}\n      >\n        {[0, 1, 2, 3, 4].map((vi) => (\n          <div\n            key={vi}\n            style={{\n              willChange: 'transform',\n              transform: `translateY(${getVerticalMonthsOffset(\n                visibleIndexes[vi]\n              )}px)`,\n              left: 0,\n              right: 0,\n              position: 'absolute',\n              height: getMonthHeight('vertical', visibleIndexes[vi]),\n            }}\n          >\n            {renderItem({\n              index: visibleIndexes[vi],\n              onPrev: empty,\n              onNext: empty,\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst empty = () => null\n\nconst styles = StyleSheet.create({\n  flex1: {\n    flex: 1,\n  },\n})\n\nexport function useDebouncedCallback(callback: any): any {\n  const mounted = React.useRef<boolean>(true)\n  const latest = useLatest(callback)\n  const timerId = React.useRef<any>(null)\n\n  React.useEffect(() => {\n    return () => {\n      mounted.current = false\n      if (timerId.current) {\n        window.cancelAnimationFrame(timerId.current)\n      }\n    }\n  }, [mounted, timerId])\n\n  return React.useCallback(\n    (args: any) => {\n      if (timerId.current) {\n        window.cancelAnimationFrame(timerId.current)\n      }\n      timerId.current = window.requestAnimationFrame(function () {\n        if (mounted.current) {\n          latest.current(args)\n        }\n      })\n    },\n    [mounted, timerId, latest]\n  )\n}\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\nexport default React.memo(Swiper)\n"],"mappings":"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"}

package/lib/module/Date/YearPicker.js

@@ -23,7 +23,7 @@ export default function YearPicker(_ref) {
         animated: false
       });
     }
-  }, [flatList, selectedYear]);
+  }, [flatList, selectedYear, startYear]);
   return /*#__PURE__*/React.createElement(View, {
     style: [StyleSheet.absoluteFill, styles.root, {
       backgroundColor: theme.colors.surface
@@ -55,6 +55,7 @@ function YearPure(_ref3) {
     onPressYear
   } = _ref3;
   const theme = useTheme();
+  let textFont = theme !== null && theme !== void 0 && theme.isV3 ? theme.fonts.bodyLarge : theme.fonts.medium;
   return /*#__PURE__*/React.createElement(View, {
     style: styles.year
   }, /*#__PURE__*/React.createElement(TouchableRipple, {
@@ -67,7 +68,8 @@ function YearPure(_ref3) {
       backgroundColor: theme.colors.primary
     } : null]
   }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.yearLabel, selected ? styles.selectedYear : null],
+    style: [styles.yearLabel, selected ? styles.selectedYear : null, { ...textFont
+    }],
     selectable: false
   }, year))));
 }

package/lib/module/Date/YearPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FlatList","StyleSheet","View","Text","TouchableRipple","useTheme","range","ITEM_HEIGHT","YearPicker","selectedYear","selectingYear","onPressYear","startYear","endYear","theme","flatList","useRef","years","isNaN","useEffect","current","indexToGo","scrollToOffset","offset","animated","absoluteFill","styles","root","backgroundColor","colors","surface","opacity1","opacity0","list","item","YearPure","year","selected","String","yearButton","yearInner","primary","yearLabel","Year","memo","create","flex","top","zIndex","marginLeft","marginRight","height","justifyContent","color","borderRadius","overflow","alignItems","fontSize","opacity"],"sources":["YearPicker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { FlatList, StyleSheet, View } from 'react-native'\nimport { Text, TouchableRipple, useTheme } from 'react-native-paper'\nimport { range } from '../utils'\n\nconst ITEM_HEIGHT = 62\n\nexport default function YearPicker({\n  selectedYear,\n  selectingYear,\n  onPressYear,\n  startYear,\n  endYear,\n}: {\n  selectedYear: number | undefined\n  selectingYear: boolean\n  onPressYear: (year: number) => any\n  startYear: number\n  endYear: number\n}) {\n  const theme = useTheme()\n  const flatList = React.useRef<FlatList<number> | null>(null)\n  const years = range(isNaN(startYear) ? 1800 : startYear, isNaN(endYear) ? 2200 : endYear)\n\n  // scroll to selected year\n  React.useEffect(() => {\n    if (flatList.current && selectedYear) {\n      const indexToGo = selectedYear - startYear\n      flatList.current.scrollToOffset({\n        offset: (indexToGo / 3) * ITEM_HEIGHT - ITEM_HEIGHT,\n        animated: false,\n      })\n    }\n  }, [flatList, selectedYear])\n\n  return (\n    <View\n      style={[\n        StyleSheet.absoluteFill,\n        styles.root,\n        { backgroundColor: theme.colors.surface },\n        selectingYear ? styles.opacity1 : styles.opacity0,\n      ]}\n      pointerEvents={selectingYear ? 'auto' : 'none'}\n    >\n      <FlatList<number>\n        ref={flatList}\n        style={styles.list}\n        data={years}\n        renderItem={({ item }) => (\n          <Year\n            year={item}\n            selected={selectedYear === item}\n            onPressYear={onPressYear}\n          />\n        )}\n        keyExtractor={(item) => `${item}`}\n        numColumns={3}\n      />\n    </View>\n  )\n}\n\nfunction YearPure({\n  year,\n  selected,\n  onPressYear,\n}: {\n  year: number\n  selected: boolean\n  onPressYear: (newYear: number) => any\n}) {\n  const theme = useTheme()\n  return (\n    <View style={styles.year}>\n      <TouchableRipple\n        onPress={() => onPressYear(year)}\n        accessibilityRole=\"button\"\n        accessibilityLabel={String(year)}\n        style={styles.yearButton}\n      >\n        <View\n          style={[\n            styles.yearInner,\n            selected ? { backgroundColor: theme.colors.primary } : null,\n          ]}\n        >\n          <Text\n            style={[styles.yearLabel, selected ? styles.selectedYear : null]}\n            selectable={false}\n          >\n            {year}\n          </Text>\n        </View>\n      </TouchableRipple>\n    </View>\n  )\n}\nconst Year = React.memo(YearPure)\n\nconst styles = StyleSheet.create({\n  root: {\n    flex: 1,\n    top: 56,\n    zIndex: 100,\n  },\n\n  list: {\n    flex: 1,\n  },\n  year: {\n    flex: 1,\n    marginLeft: 16,\n    marginRight: 16,\n    height: ITEM_HEIGHT,\n    justifyContent: 'center',\n  },\n  selectedYear: { color: '#fff' },\n  yearButton: {\n    borderRadius: 46 / 2,\n    overflow: 'hidden',\n  },\n  yearInner: {\n    borderRadius: 46 / 2,\n    height: 46,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  yearLabel: {\n    fontSize: 16,\n  },\n  opacity0: {\n    opacity: 0,\n  },\n  opacity1: {\n    opacity: 1,\n  },\n})\n"],"mappings":"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"}
+{"version":3,"names":["React","FlatList","StyleSheet","View","Text","TouchableRipple","useTheme","range","ITEM_HEIGHT","YearPicker","selectedYear","selectingYear","onPressYear","startYear","endYear","theme","flatList","useRef","years","isNaN","useEffect","current","indexToGo","scrollToOffset","offset","animated","absoluteFill","styles","root","backgroundColor","colors","surface","opacity1","opacity0","list","item","YearPure","year","selected","textFont","isV3","fonts","bodyLarge","medium","String","yearButton","yearInner","primary","yearLabel","Year","memo","create","flex","top","zIndex","marginLeft","marginRight","height","justifyContent","color","borderRadius","overflow","alignItems","fontSize","opacity"],"sources":["YearPicker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { FlatList, StyleSheet, View } from 'react-native'\nimport { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'\nimport { range } from '../utils'\n\nconst ITEM_HEIGHT = 62\n\nexport default function YearPicker({\n  selectedYear,\n  selectingYear,\n  onPressYear,\n  startYear,\n  endYear,\n}: {\n  selectedYear: number | undefined\n  selectingYear: boolean\n  onPressYear: (year: number) => any\n  startYear: number\n  endYear: number\n}) {\n  const theme = useTheme()\n  const flatList = React.useRef<FlatList<number> | null>(null)\n  const years = range(\n    isNaN(startYear) ? 1800 : startYear,\n    isNaN(endYear) ? 2200 : endYear\n  )\n\n  // scroll to selected year\n  React.useEffect(() => {\n    if (flatList.current && selectedYear) {\n      const indexToGo = selectedYear - startYear\n      flatList.current.scrollToOffset({\n        offset: (indexToGo / 3) * ITEM_HEIGHT - ITEM_HEIGHT,\n        animated: false,\n      })\n    }\n  }, [flatList, selectedYear, startYear])\n\n  return (\n    <View\n      style={[\n        StyleSheet.absoluteFill,\n        styles.root,\n        { backgroundColor: theme.colors.surface },\n        selectingYear ? styles.opacity1 : styles.opacity0,\n      ]}\n      pointerEvents={selectingYear ? 'auto' : 'none'}\n    >\n      <FlatList<number>\n        ref={flatList}\n        style={styles.list}\n        data={years}\n        renderItem={({ item }) => (\n          <Year\n            year={item}\n            selected={selectedYear === item}\n            onPressYear={onPressYear}\n          />\n        )}\n        keyExtractor={(item) => `${item}`}\n        numColumns={3}\n      />\n    </View>\n  )\n}\n\nfunction YearPure({\n  year,\n  selected,\n  onPressYear,\n}: {\n  year: number\n  selected: boolean\n  onPressYear: (newYear: number) => any\n}) {\n  const theme = useTheme()\n\n  let textFont = theme?.isV3\n    ? theme.fonts.bodyLarge\n    : (theme as any as MD2Theme).fonts.medium\n\n  return (\n    <View style={styles.year}>\n      <TouchableRipple\n        onPress={() => onPressYear(year)}\n        accessibilityRole=\"button\"\n        accessibilityLabel={String(year)}\n        style={styles.yearButton}\n      >\n        <View\n          style={[\n            styles.yearInner,\n            selected ? { backgroundColor: theme.colors.primary } : null,\n          ]}\n        >\n          <Text\n            style={[\n              styles.yearLabel,\n              selected ? styles.selectedYear : null,\n              { ...textFont },\n            ]}\n            selectable={false}\n          >\n            {year}\n          </Text>\n        </View>\n      </TouchableRipple>\n    </View>\n  )\n}\nconst Year = React.memo(YearPure)\n\nconst styles = StyleSheet.create({\n  root: {\n    flex: 1,\n    top: 56,\n    zIndex: 100,\n  },\n\n  list: {\n    flex: 1,\n  },\n  year: {\n    flex: 1,\n    marginLeft: 16,\n    marginRight: 16,\n    height: ITEM_HEIGHT,\n    justifyContent: 'center',\n  },\n  selectedYear: { color: '#fff' },\n  yearButton: {\n    borderRadius: 46 / 2,\n    overflow: 'hidden',\n  },\n  yearInner: {\n    borderRadius: 46 / 2,\n    height: 46,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  yearLabel: {\n    fontSize: 16,\n  },\n  opacity0: {\n    opacity: 0,\n  },\n  opacity1: {\n    opacity: 1,\n  },\n})\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT,EAAmBC,UAAnB,EAA+BC,IAA/B,QAA2C,cAA3C;AACA,SAAmBC,IAAnB,EAAyBC,eAAzB,EAA0CC,QAA1C,QAA0D,oBAA1D;AACA,SAASC,KAAT,QAAsB,UAAtB;AAEA,MAAMC,WAAW,GAAG,EAApB;AAEA,eAAe,SAASC,UAAT,OAYZ;EAAA,IAZgC;IACjCC,YADiC;IAEjCC,aAFiC;IAGjCC,WAHiC;IAIjCC,SAJiC;IAKjCC;EALiC,CAYhC;EACD,MAAMC,KAAK,GAAGT,QAAQ,EAAtB;EACA,MAAMU,QAAQ,GAAGhB,KAAK,CAACiB,MAAN,CAAsC,IAAtC,CAAjB;EACA,MAAMC,KAAK,GAAGX,KAAK,CACjBY,KAAK,CAACN,SAAD,CAAL,GAAmB,IAAnB,GAA0BA,SADT,EAEjBM,KAAK,CAACL,OAAD,CAAL,GAAiB,IAAjB,GAAwBA,OAFP,CAAnB,CAHC,CAQD;;EACAd,KAAK,CAACoB,SAAN,CAAgB,MAAM;IACpB,IAAIJ,QAAQ,CAACK,OAAT,IAAoBX,YAAxB,EAAsC;MACpC,MAAMY,SAAS,GAAGZ,YAAY,GAAGG,SAAjC;MACAG,QAAQ,CAACK,OAAT,CAAiBE,cAAjB,CAAgC;QAC9BC,MAAM,EAAGF,SAAS,GAAG,CAAb,GAAkBd,WAAlB,GAAgCA,WADV;QAE9BiB,QAAQ,EAAE;MAFoB,CAAhC;IAID;EACF,CARD,EAQG,CAACT,QAAD,EAAWN,YAAX,EAAyBG,SAAzB,CARH;EAUA,oBACE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLX,UAAU,CAACwB,YADN,EAELC,MAAM,CAACC,IAFF,EAGL;MAAEC,eAAe,EAAEd,KAAK,CAACe,MAAN,CAAaC;IAAhC,CAHK,EAILpB,aAAa,GAAGgB,MAAM,CAACK,QAAV,GAAqBL,MAAM,CAACM,QAJpC,CADT;IAOE,aAAa,EAAEtB,aAAa,GAAG,MAAH,GAAY;EAP1C,gBASE,oBAAC,QAAD;IACE,GAAG,EAAEK,QADP;IAEE,KAAK,EAAEW,MAAM,CAACO,IAFhB;IAGE,IAAI,EAAEhB,KAHR;IAIE,UAAU,EAAE;MAAA,IAAC;QAAEiB;MAAF,CAAD;MAAA,oBACV,oBAAC,IAAD;QACE,IAAI,EAAEA,IADR;QAEE,QAAQ,EAAEzB,YAAY,KAAKyB,IAF7B;QAGE,WAAW,EAAEvB;MAHf,EADU;IAAA,CAJd;IAWE,YAAY,EAAGuB,IAAD,IAAW,GAAEA,IAAK,EAXlC;IAYE,UAAU,EAAE;EAZd,EATF,CADF;AA0BD;;AAED,SAASC,QAAT,QAQG;EAAA,IARe;IAChBC,IADgB;IAEhBC,QAFgB;IAGhB1B;EAHgB,CAQf;EACD,MAAMG,KAAK,GAAGT,QAAQ,EAAtB;EAEA,IAAIiC,QAAQ,GAAGxB,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEyB,IAAP,GACXzB,KAAK,CAAC0B,KAAN,CAAYC,SADD,GAEV3B,KAAD,CAA2B0B,KAA3B,CAAiCE,MAFrC;EAIA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEhB,MAAM,CAACU;EAApB,gBACE,oBAAC,eAAD;IACE,OAAO,EAAE,MAAMzB,WAAW,CAACyB,IAAD,CAD5B;IAEE,iBAAiB,EAAC,QAFpB;IAGE,kBAAkB,EAAEO,MAAM,CAACP,IAAD,CAH5B;IAIE,KAAK,EAAEV,MAAM,CAACkB;EAJhB,gBAME,oBAAC,IAAD;IACE,KAAK,EAAE,CACLlB,MAAM,CAACmB,SADF,EAELR,QAAQ,GAAG;MAAET,eAAe,EAAEd,KAAK,CAACe,MAAN,CAAaiB;IAAhC,CAAH,GAA+C,IAFlD;EADT,gBAME,oBAAC,IAAD;IACE,KAAK,EAAE,CACLpB,MAAM,CAACqB,SADF,EAELV,QAAQ,GAAGX,MAAM,CAACjB,YAAV,GAAyB,IAF5B,EAGL,EAAE,GAAG6B;IAAL,CAHK,CADT;IAME,UAAU,EAAE;EANd,GAQGF,IARH,CANF,CANF,CADF,CADF;AA4BD;;AACD,MAAMY,IAAI,gBAAGjD,KAAK,CAACkD,IAAN,CAAWd,QAAX,CAAb;AAEA,MAAMT,MAAM,GAAGzB,UAAU,CAACiD,MAAX,CAAkB;EAC/BvB,IAAI,EAAE;IACJwB,IAAI,EAAE,CADF;IAEJC,GAAG,EAAE,EAFD;IAGJC,MAAM,EAAE;EAHJ,CADyB;EAO/BpB,IAAI,EAAE;IACJkB,IAAI,EAAE;EADF,CAPyB;EAU/Bf,IAAI,EAAE;IACJe,IAAI,EAAE,CADF;IAEJG,UAAU,EAAE,EAFR;IAGJC,WAAW,EAAE,EAHT;IAIJC,MAAM,EAAEjD,WAJJ;IAKJkD,cAAc,EAAE;EALZ,CAVyB;EAiB/BhD,YAAY,EAAE;IAAEiD,KAAK,EAAE;EAAT,CAjBiB;EAkB/Bd,UAAU,EAAE;IACVe,YAAY,EAAE,KAAK,CADT;IAEVC,QAAQ,EAAE;EAFA,CAlBmB;EAsB/Bf,SAAS,EAAE;IACTc,YAAY,EAAE,KAAK,CADV;IAETH,MAAM,EAAE,EAFC;IAGTK,UAAU,EAAE,QAHH;IAITJ,cAAc,EAAE;EAJP,CAtBoB;EA4B/BV,SAAS,EAAE;IACTe,QAAQ,EAAE;EADD,CA5BoB;EA+B/B9B,QAAQ,EAAE;IACR+B,OAAO,EAAE;EADD,CA/BqB;EAkC/BhC,QAAQ,EAAE;IACRgC,OAAO,EAAE;EADD;AAlCqB,CAAlB,CAAf"}

package/lib/module/TextInputMask.js

@@ -64,12 +64,16 @@ function TextInputWithMask(_ref, ref) {
   const [controlledValue, setControlledValue] = React.useState(value || '');
 
   const onInnerChange = text => {
-    const enhancedText = enhanceTextWithMask(text, mask, controlledValue);
-    setControlledValue(enhancedText);
-
     if (text.length === mask.length) {
       onChangeText && onChangeText(text);
     }
+
+    setControlledValue(text);
+  };
+
+  const onInnerBlur = () => {
+    const enhancedText = enhanceTextWithMask(value, mask, controlledValue);
+    setControlledValue(enhancedText);
   };
 
   React.useEffect(() => {
@@ -79,7 +83,8 @@ function TextInputWithMask(_ref, ref) {
     ref: ref
   }, rest, {
     value: controlledValue,
-    onChangeText: onInnerChange
+    onChangeText: onInnerChange,
+    onBlur: onInnerBlur
   }));
 }
 

package/lib/module/TextInputMask.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","TextInput","splitCharacters","detectCharacter","mask","c","find","ch","includes","enhanceTextWithMask","text","previousValue","isBackSpace","length","splitCharacter","maskParts","split","textParts","finalString","maskPartIndex","partString","maskPart","textPart","maskDigitIndex","currentCharacter","undefined","character","push","join","lastPart","lastMaskPart","TextInputWithMask","ref","onChangeText","value","rest","controlledValue","setControlledValue","useState","onInnerChange","enhancedText","useEffect","forwardRef"],"sources":["TextInputMask.tsx"],"sourcesContent":["import * as React from 'react'\nimport { TextInput } from 'react-native-paper'\n\nconst splitCharacters = ['-', '/', '.', '年', ' ']\nfunction detectCharacter(mask: string): string {\n  const c = splitCharacters.find((ch) => mask.includes(ch))\n  return c || ''\n}\n\nfunction enhanceTextWithMask(\n  text: string,\n  mask: string,\n  previousValue: string\n): string {\n  const isBackSpace = previousValue.length > text.length\n  const splitCharacter = detectCharacter(mask)\n\n  const maskParts = mask.split(splitCharacter)\n  const textParts = text.split(splitCharacter)\n\n  let finalString: string[] = []\n  for (let maskPartIndex = 0; maskPartIndex < mask.length; maskPartIndex++) {\n    let partString: string[] = []\n\n    const maskPart = maskParts[maskPartIndex]\n    const textPart = textParts[maskPartIndex]\n    if (!textPart) {\n      continue\n    }\n\n    for (\n      let maskDigitIndex = 0;\n      maskDigitIndex < maskPart.length;\n      maskDigitIndex++\n    ) {\n      const currentCharacter = textPart[maskDigitIndex]\n\n      if (isBackSpace && currentCharacter === undefined) {\n        continue\n      }\n\n      const character = textPart[maskDigitIndex]\n\n      if (character !== undefined) {\n        partString.push(character)\n      }\n    }\n\n    finalString.push(partString.join(''))\n  }\n\n  const lastPart = finalString[finalString.length - 1]\n  const lastMaskPart = maskParts[finalString.length - 1]\n  if (\n    // if mask is completed\n    finalString.length !== maskParts.length &&\n    // or ...\n    lastPart &&\n    lastMaskPart &&\n    lastPart.length === lastMaskPart.length\n  ) {\n    return (\n      finalString.join(splitCharacter) + (isBackSpace ? '' : splitCharacter)\n    )\n  }\n  return finalString.join(splitCharacter)\n}\n\nfunction TextInputWithMask(\n  {\n    onChangeText,\n    value,\n    mask,\n    ...rest\n  }: React.ComponentProps<typeof TextInput> & { mask: string },\n  ref: any\n) {\n  const [controlledValue, setControlledValue] = React.useState<string>(\n    value || ''\n  )\n\n  const onInnerChange = (text: string) => {\n    const enhancedText = enhanceTextWithMask(text, mask, controlledValue)\n    setControlledValue(enhancedText)\n\n    if (text.length === mask.length) {\n      onChangeText && onChangeText(text)\n    }\n  }\n\n  React.useEffect(() => {\n    setControlledValue(value || '')\n  }, [value])\n\n  return (\n    <TextInput\n      ref={ref}\n      {...rest}\n      value={controlledValue}\n      onChangeText={onInnerChange}\n    />\n  )\n}\n\nexport default React.forwardRef(TextInputWithMask)\n"],"mappings":"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"}
+{"version":3,"names":["React","TextInput","splitCharacters","detectCharacter","mask","c","find","ch","includes","enhanceTextWithMask","text","previousValue","isBackSpace","length","splitCharacter","maskParts","split","textParts","finalString","maskPartIndex","partString","maskPart","textPart","maskDigitIndex","currentCharacter","undefined","character","push","join","lastPart","lastMaskPart","TextInputWithMask","ref","onChangeText","value","rest","controlledValue","setControlledValue","useState","onInnerChange","onInnerBlur","enhancedText","useEffect","forwardRef"],"sources":["TextInputMask.tsx"],"sourcesContent":["import * as React from 'react'\nimport { TextInput } from 'react-native-paper'\n\nconst splitCharacters = ['-', '/', '.', '年', ' ']\nfunction detectCharacter(mask: string): string {\n  const c = splitCharacters.find((ch) => mask.includes(ch))\n  return c || ''\n}\n\nfunction enhanceTextWithMask(\n  text: string,\n  mask: string,\n  previousValue: string\n): string {\n  const isBackSpace = previousValue.length > text.length\n  const splitCharacter = detectCharacter(mask)\n\n  const maskParts = mask.split(splitCharacter)\n  const textParts = text.split(splitCharacter)\n\n  let finalString: string[] = []\n  for (let maskPartIndex = 0; maskPartIndex < mask.length; maskPartIndex++) {\n    let partString: string[] = []\n\n    const maskPart = maskParts[maskPartIndex]\n    const textPart = textParts[maskPartIndex]\n    if (!textPart) {\n      continue\n    }\n\n    for (\n      let maskDigitIndex = 0;\n      maskDigitIndex < maskPart.length;\n      maskDigitIndex++\n    ) {\n      const currentCharacter = textPart[maskDigitIndex]\n\n      if (isBackSpace && currentCharacter === undefined) {\n        continue\n      }\n\n      const character = textPart[maskDigitIndex]\n\n      if (character !== undefined) {\n        partString.push(character)\n      }\n    }\n\n    finalString.push(partString.join(''))\n  }\n\n  const lastPart = finalString[finalString.length - 1]\n  const lastMaskPart = maskParts[finalString.length - 1]\n  if (\n    // if mask is completed\n    finalString.length !== maskParts.length &&\n    // or ...\n    lastPart &&\n    lastMaskPart &&\n    lastPart.length === lastMaskPart.length\n  ) {\n    return (\n      finalString.join(splitCharacter) + (isBackSpace ? '' : splitCharacter)\n    )\n  }\n  return finalString.join(splitCharacter)\n}\n\nfunction TextInputWithMask(\n  {\n    onChangeText,\n    value,\n    mask,\n    ...rest\n  }: React.ComponentProps<typeof TextInput> & { mask: string; value: string },\n  ref: any\n) {\n  const [controlledValue, setControlledValue] = React.useState<string>(\n    value || ''\n  )\n\n  const onInnerChange = (text: string) => {\n    if (text.length === mask.length) {\n      onChangeText && onChangeText(text)\n    }\n    setControlledValue(text)\n  }\n\n  const onInnerBlur = () => {\n    const enhancedText = enhanceTextWithMask(value, mask, controlledValue)\n    setControlledValue(enhancedText)\n  }\n\n  React.useEffect(() => {\n    setControlledValue(value || '')\n  }, [value])\n\n  return (\n    <TextInput\n      ref={ref}\n      {...rest}\n      value={controlledValue}\n      onChangeText={onInnerChange}\n      onBlur={onInnerBlur}\n    />\n  )\n}\n\nexport default React.forwardRef(TextInputWithMask)\n"],"mappings":"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"}

package/lib/module/Time/AmPmSwitcher.js

@@ -20,7 +20,7 @@ export default function AmPmSwitcher(_ref) {
       return Color(theme.colors.surface).lighten(1.2).hex();
     }
 
-    return Color(theme.colors.surface).darken(0.1).hex();
+    return Color(theme.isV3 ? theme.colors.inverseOnSurface : theme.colors.surface).darken(0.1).hex();
   }, [theme]);
   const isAM = mode === 'AM';
   return /*#__PURE__*/React.createElement(View, {
@@ -69,6 +69,7 @@ function SwitchButton(_ref2) {
     backgroundColor,
     color
   } = useSwitchColors(selected);
+  let textFont = theme !== null && theme !== void 0 && theme.isV3 ? theme.fonts.bodyMedium : theme.fonts.medium;
   return /*#__PURE__*/React.createElement(TouchableRipple, {
     onPress: onPress,
     style: styles.switchButton,
@@ -88,7 +89,7 @@ function SwitchButton(_ref2) {
     }]
   }, /*#__PURE__*/React.createElement(Text, {
     selectable: false,
-    style: [{ ...theme.fonts.medium,
+    style: [{ ...textFont,
       color: color
     }]
   }, label)));

package/lib/module/Time/AmPmSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","StyleSheet","Text","TouchableRipple","useTheme","useMemo","Color","useSwitchColors","DisplayModeContext","AmPmSwitcher","onChange","hours","setMode","mode","useContext","theme","backgroundColor","dark","colors","surface","lighten","hex","darken","isAM","styles","root","borderColor","borderRadius","roundness","switchSeparator","SwitchButton","label","onPress","selected","disabled","color","switchButton","switchButtonInner","fonts","medium","create","width","height","borderWidth","overflow","flex","alignItems","justifyContent"],"sources":["AmPmSwitcher.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { Text, TouchableRipple, useTheme } from 'react-native-paper'\nimport { useMemo } from 'react'\nimport Color from 'color'\nimport { useSwitchColors } from './timeUtils'\nimport { DisplayModeContext } from './TimePicker'\n\nexport default function AmPmSwitcher({\n  onChange,\n  hours,\n}: {\n  hours: number\n  onChange: (newHours: number) => any\n}) {\n  const { setMode, mode } = React.useContext(DisplayModeContext)\n  const theme = useTheme()\n  const backgroundColor = useMemo<string>(() => {\n    if (theme.dark) {\n      return Color(theme.colors.surface).lighten(1.2).hex()\n    }\n    return Color(theme.colors.surface).darken(0.1).hex()\n  }, [theme])\n\n  const isAM = mode === 'AM'\n  return (\n    <View\n      style={[\n        styles.root,\n        {\n          borderColor: backgroundColor,\n          borderRadius: theme.roundness,\n        },\n      ]}\n    >\n      <SwitchButton\n        label=\"AM\"\n        onPress={() => {\n          setMode('AM')\n          if (hours - 12 >= 0) {\n            onChange(hours - 12)\n          }\n        }}\n        selected={isAM}\n        disabled={isAM}\n      />\n      <View style={[styles.switchSeparator, { backgroundColor }]} />\n      <SwitchButton\n        label=\"PM\"\n        onPress={() => {\n          setMode('PM')\n          if (hours + 12 <= 24) {\n            onChange(hours + 12)\n          }\n        }}\n        selected={!isAM}\n        disabled={!isAM}\n      />\n    </View>\n  )\n}\n\nfunction SwitchButton({\n  label,\n  onPress,\n  selected,\n  disabled,\n}: {\n  label: string\n  onPress: (() => any) | undefined\n  selected: boolean\n  disabled: boolean\n}) {\n  const theme = useTheme()\n  const { backgroundColor, color } = useSwitchColors(selected)\n\n  return (\n    <TouchableRipple\n      onPress={onPress}\n      style={styles.switchButton}\n      accessibilityLabel={label}\n      // @ts-ignore old React Native versions\n      accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}\n      // @ts-ignore old React Native versions\n      accessibilityComponentType=\"button\"\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n      disabled={disabled}\n    >\n      <View style={[styles.switchButtonInner, { backgroundColor }]}>\n        <Text\n          selectable={false}\n          style={[\n            {\n              ...theme.fonts.medium,\n              color: color,\n            },\n          ]}\n        >\n          {label}\n        </Text>\n      </View>\n    </TouchableRipple>\n  )\n}\n\nconst styles = StyleSheet.create({\n  root: {\n    width: 50,\n    height: 80,\n    borderWidth: 1,\n    overflow: 'hidden',\n  },\n  switchSeparator: {\n    height: 1,\n    width: 48,\n  },\n  switchButton: {\n    flex: 1,\n  },\n  switchButtonInner: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n})\n"],"mappings":"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"}
+{"version":3,"names":["React","View","StyleSheet","Text","TouchableRipple","useTheme","useMemo","Color","useSwitchColors","DisplayModeContext","AmPmSwitcher","onChange","hours","setMode","mode","useContext","theme","backgroundColor","dark","colors","surface","lighten","hex","isV3","inverseOnSurface","darken","isAM","styles","root","borderColor","borderRadius","roundness","switchSeparator","SwitchButton","label","onPress","selected","disabled","color","textFont","fonts","bodyMedium","medium","switchButton","switchButtonInner","create","width","height","borderWidth","overflow","flex","alignItems","justifyContent"],"sources":["AmPmSwitcher.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'\nimport { useMemo } from 'react'\nimport Color from 'color'\nimport { useSwitchColors } from './timeUtils'\nimport { DisplayModeContext } from './TimePicker'\n\nexport default function AmPmSwitcher({\n  onChange,\n  hours,\n}: {\n  hours: number\n  onChange: (newHours: number) => any\n}) {\n  const { setMode, mode } = React.useContext(DisplayModeContext)\n  const theme = useTheme()\n  const backgroundColor = useMemo<string>(() => {\n    if (theme.dark) {\n      return Color(theme.colors.surface).lighten(1.2).hex()\n    }\n    return Color(\n      theme.isV3 ? theme.colors.inverseOnSurface : theme.colors.surface\n    )\n      .darken(0.1)\n      .hex()\n  }, [theme])\n\n  const isAM = mode === 'AM'\n  return (\n    <View\n      style={[\n        styles.root,\n        {\n          borderColor: backgroundColor,\n          borderRadius: theme.roundness,\n        },\n      ]}\n    >\n      <SwitchButton\n        label=\"AM\"\n        onPress={() => {\n          setMode('AM')\n          if (hours - 12 >= 0) {\n            onChange(hours - 12)\n          }\n        }}\n        selected={isAM}\n        disabled={isAM}\n      />\n      <View style={[styles.switchSeparator, { backgroundColor }]} />\n      <SwitchButton\n        label=\"PM\"\n        onPress={() => {\n          setMode('PM')\n          if (hours + 12 <= 24) {\n            onChange(hours + 12)\n          }\n        }}\n        selected={!isAM}\n        disabled={!isAM}\n      />\n    </View>\n  )\n}\n\nfunction SwitchButton({\n  label,\n  onPress,\n  selected,\n  disabled,\n}: {\n  label: string\n  onPress: (() => any) | undefined\n  selected: boolean\n  disabled: boolean\n}) {\n  const theme = useTheme()\n  const { backgroundColor, color } = useSwitchColors(selected)\n\n  let textFont = theme?.isV3\n    ? theme.fonts.bodyMedium\n    : (theme as any as MD2Theme).fonts.medium\n\n  return (\n    <TouchableRipple\n      onPress={onPress}\n      style={styles.switchButton}\n      accessibilityLabel={label}\n      // @ts-ignore old React Native versions\n      accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}\n      // @ts-ignore old React Native versions\n      accessibilityComponentType=\"button\"\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n      disabled={disabled}\n    >\n      <View style={[styles.switchButtonInner, { backgroundColor }]}>\n        <Text\n          selectable={false}\n          style={[\n            {\n              ...textFont,\n              color: color,\n            },\n          ]}\n        >\n          {label}\n        </Text>\n      </View>\n    </TouchableRipple>\n  )\n}\n\nconst styles = StyleSheet.create({\n  root: {\n    width: 50,\n    height: 80,\n    borderWidth: 1,\n    overflow: 'hidden',\n  },\n  switchSeparator: {\n    height: 1,\n    width: 48,\n  },\n  switchButton: {\n    flex: 1,\n  },\n  switchButtonInner: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n})\n"],"mappings":"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"}

package/lib/module/Time/AnalogClock.js

@@ -96,7 +96,7 @@ function AnalogClock(_ref) {
     ref: clockRef
   }, panResponder.panHandlers, {
     style: [styles.clock, {
-      backgroundColor: theme.dark ? Color(theme.colors.surface).lighten(1.2).hex() : Color(theme.colors.surface).darken(0.1).hex()
+      backgroundColor: theme.dark ? Color(theme.colors.surface).lighten(1.4).hex() : theme.isV3 ? Color(theme.colors.outline).lighten(0.9).hex() : Color(theme.colors.surface).darken(0.1).hex()
     }] // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506
     ,
     cursor: 'pointer'

package/lib/module/Time/AnalogClock.js.map

@@ -1 +1 @@
-{"version":3,"names":["Color","PanResponder","StyleSheet","View","useTheme","circleSize","clockTypes","getAngle","getHours","getHourType","getHourTypeFromOffset","getMinutes","hourTypes","React","useLatest","AnalogClockHours","AnimatedClockSwitcher","AnalogClockMinutes","DisplayModeContext","AnalogClock","hours","minutes","focused","is24Hour","onChange","theme","mode","useContext","shortPointer","clockRef","useRef","hoursRef","onChangeRef","minutesRef","focusedRef","is24HourRef","modeRef","onPointerMove","useCallback","e","final","x","nativeEvent","locationX","y","locationY","angle","current","hours24","previousHourType","pickedHours","hours12AndPm","hourTypeFromOffset","hours24AndPM","pm","undefined","pickedMinutes","panResponder","create","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","onStartShouldSetPanResponder","returnTrue","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderTerminationRequest","onShouldBlockNativeResponder","dynamicSize","pointerNumber","degreesPerNumber","panHandlers","styles","clock","backgroundColor","dark","colors","surface","lighten","hex","darken","line","primary","transform","rotate","translateX","width","endPoint","absoluteFill","center","middlePoint","height","position","justifyContent","alignItems","borderRadius","right","bottom","marginBottom","memo"],"sources":["AnalogClock.tsx"],"sourcesContent":["import Color from 'color'\nimport {\n  GestureResponderEvent,\n  PanResponder,\n  StyleSheet,\n  View,\n} from 'react-native'\nimport { useTheme } from 'react-native-paper'\nimport {\n  circleSize,\n  clockTypes,\n  getAngle,\n  getHours,\n  getHourType,\n  getHourTypeFromOffset,\n  getMinutes,\n  hourTypes,\n  PossibleClockTypes,\n} from './timeUtils'\nimport * as React from 'react'\nimport { useLatest } from '../utils'\nimport AnalogClockHours from './AnalogClockHours'\nimport AnimatedClockSwitcher from './AnimatedClockSwitcher'\nimport AnalogClockMinutes from './AnalogClockMinutes'\nimport { DisplayModeContext } from './TimePicker'\nfunction AnalogClock({\n  hours,\n  minutes,\n  focused,\n  is24Hour,\n  onChange,\n}: {\n  hours: number\n  minutes: number\n  focused: PossibleClockTypes\n  is24Hour: boolean\n  onChange: (hoursMinutesAndFocused: {\n    hours: number\n    minutes: number\n    focused?: undefined | PossibleClockTypes\n  }) => any\n}) {\n  const theme = useTheme()\n  const { mode } = React.useContext(DisplayModeContext)\n  // used to make pointer shorter if hours are selected and above 12\n  const shortPointer = (hours === 0 || hours > 12) && is24Hour\n  const clockRef = React.useRef<View | null>(null)\n  // Hooks are nice, sometimes... :-)..\n  // We need the latest values, since the onPointerMove uses a closure to the function\n  const hoursRef = useLatest(hours)\n  const onChangeRef = useLatest(onChange)\n  const minutesRef = useLatest(minutes)\n  const focusedRef = useLatest(focused)\n  const is24HourRef = useLatest(is24Hour)\n  const modeRef = useLatest(mode)\n  const onPointerMove = React.useCallback(\n    (e: GestureResponderEvent, final: boolean) => {\n      let x = e.nativeEvent.locationX\n      let y = e.nativeEvent.locationY\n      let angle = getAngle(x, y, circleSize)\n      if (focusedRef.current === clockTypes.hours) {\n        let hours24 = is24HourRef.current\n        let previousHourType = getHourType(hoursRef.current)\n        let pickedHours = getHours(angle, previousHourType)\n\n        let hours12AndPm = !hours24 && modeRef.current === 'AM'\n\n        let hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize)\n        let hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm\n\n        // Avoiding the \"24h\"\n        // Should be 12h for 12 hours and PM mode\n\n        if (hours12AndPm || hours24AndPM) {\n          pickedHours += 12\n        }\n        if (modeRef.current === 'AM' && pickedHours === 12) {\n          pickedHours = 0\n        }\n\n        if (\n          (!hours24 && modeRef.current === 'AM' && pickedHours === 12) ||\n          pickedHours === 24\n        ) {\n          pickedHours = 0\n        }\n\n        if (hoursRef.current !== pickedHours || final) {\n          onChangeRef.current({\n            hours: pickedHours,\n            minutes: minutesRef.current,\n            focused: final ? clockTypes.minutes : undefined,\n          })\n        }\n      } else if (focusedRef.current === clockTypes.minutes) {\n        let pickedMinutes = getMinutes(angle)\n        if (minutesRef.current !== pickedMinutes) {\n          onChangeRef.current({\n            hours: hoursRef.current,\n            minutes: pickedMinutes,\n          })\n        }\n      }\n    },\n    [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef, modeRef]\n  )\n  const panResponder = React.useRef(\n    PanResponder.create({\n      onPanResponderGrant: (e) => onPointerMove(e, false),\n      onPanResponderMove: (e) => onPointerMove(e, false),\n      onPanResponderRelease: (e) => onPointerMove(e, true),\n      onStartShouldSetPanResponder: returnTrue,\n      onStartShouldSetPanResponderCapture: () => false,\n      onMoveShouldSetPanResponder: returnTrue,\n      onMoveShouldSetPanResponderCapture: returnTrue,\n      onPanResponderTerminationRequest: returnTrue,\n      onShouldBlockNativeResponder: returnTrue,\n    })\n  ).current\n  const dynamicSize = focused === clockTypes.hours && shortPointer ? 33 : 0\n  const pointerNumber = focused === clockTypes.hours ? hours : minutes\n  const degreesPerNumber = focused === clockTypes.hours ? 30 : 6\n  return (\n    <View\n      ref={clockRef}\n      {...panResponder.panHandlers}\n      style={[\n        styles.clock,\n        {\n          backgroundColor: theme.dark\n            ? Color(theme.colors.surface).lighten(1.2).hex()\n            : Color(theme.colors.surface).darken(0.1).hex(),\n        },\n      ]}\n      // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506\n      cursor={'pointer'}\n    >\n      <View\n        style={[\n          styles.line,\n          {\n            backgroundColor: theme.colors.primary,\n            transform: [\n              { rotate: -90 + pointerNumber * degreesPerNumber + 'deg' },\n              {\n                translateX: circleSize / 4 - 4 - dynamicSize / 2,\n              },\n            ],\n            width: circleSize / 2 - 4 - dynamicSize,\n          },\n        ]}\n        pointerEvents=\"none\"\n      >\n        <View\n          style={[styles.endPoint, { backgroundColor: theme.colors.primary }]}\n        />\n      </View>\n      <View\n        style={[StyleSheet.absoluteFill, styles.center]}\n        pointerEvents=\"none\"\n      >\n        <View\n          style={[\n            styles.middlePoint,\n            {\n              backgroundColor: theme.colors.primary,\n            },\n          ]}\n        />\n      </View>\n      <AnimatedClockSwitcher\n        focused={focused}\n        hours={<AnalogClockHours is24Hour={is24Hour} hours={hours} />}\n        minutes={<AnalogClockMinutes minutes={minutes} />}\n      />\n    </View>\n  )\n}\nconst styles = StyleSheet.create({\n  clock: {\n    height: circleSize,\n    width: circleSize,\n    position: 'relative',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: circleSize / 2,\n  },\n  middlePoint: {\n    borderRadius: 4,\n    height: 8,\n    width: 8,\n  },\n  center: { justifyContent: 'center', alignItems: 'center' },\n  endPoint: {\n    borderRadius: 15,\n    height: 30,\n    width: 30,\n    position: 'absolute',\n    right: 0,\n    bottom: -14,\n  },\n  line: {\n    position: 'absolute',\n    marginBottom: -1,\n    height: 2,\n    borderRadius: 4,\n  },\n})\nfunction returnTrue() {\n  return true\n}\nexport default React.memo(AnalogClock)\n"],"mappings":"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"}
+{"version":3,"names":["Color","PanResponder","StyleSheet","View","useTheme","circleSize","clockTypes","getAngle","getHours","getHourType","getHourTypeFromOffset","getMinutes","hourTypes","React","useLatest","AnalogClockHours","AnimatedClockSwitcher","AnalogClockMinutes","DisplayModeContext","AnalogClock","hours","minutes","focused","is24Hour","onChange","theme","mode","useContext","shortPointer","clockRef","useRef","hoursRef","onChangeRef","minutesRef","focusedRef","is24HourRef","modeRef","onPointerMove","useCallback","e","final","x","nativeEvent","locationX","y","locationY","angle","current","hours24","previousHourType","pickedHours","hours12AndPm","hourTypeFromOffset","hours24AndPM","pm","undefined","pickedMinutes","panResponder","create","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","onStartShouldSetPanResponder","returnTrue","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderTerminationRequest","onShouldBlockNativeResponder","dynamicSize","pointerNumber","degreesPerNumber","panHandlers","styles","clock","backgroundColor","dark","colors","surface","lighten","hex","isV3","outline","darken","line","primary","transform","rotate","translateX","width","endPoint","absoluteFill","center","middlePoint","height","position","justifyContent","alignItems","borderRadius","right","bottom","marginBottom","memo"],"sources":["AnalogClock.tsx"],"sourcesContent":["import Color from 'color'\nimport {\n  GestureResponderEvent,\n  PanResponder,\n  StyleSheet,\n  View,\n} from 'react-native'\nimport { useTheme } from 'react-native-paper'\nimport {\n  circleSize,\n  clockTypes,\n  getAngle,\n  getHours,\n  getHourType,\n  getHourTypeFromOffset,\n  getMinutes,\n  hourTypes,\n  PossibleClockTypes,\n} from './timeUtils'\nimport * as React from 'react'\nimport { useLatest } from '../utils'\nimport AnalogClockHours from './AnalogClockHours'\nimport AnimatedClockSwitcher from './AnimatedClockSwitcher'\nimport AnalogClockMinutes from './AnalogClockMinutes'\nimport { DisplayModeContext } from './TimePicker'\nfunction AnalogClock({\n  hours,\n  minutes,\n  focused,\n  is24Hour,\n  onChange,\n}: {\n  hours: number\n  minutes: number\n  focused: PossibleClockTypes\n  is24Hour: boolean\n  onChange: (hoursMinutesAndFocused: {\n    hours: number\n    minutes: number\n    focused?: undefined | PossibleClockTypes\n  }) => any\n}) {\n  const theme = useTheme()\n  const { mode } = React.useContext(DisplayModeContext)\n  // used to make pointer shorter if hours are selected and above 12\n  const shortPointer = (hours === 0 || hours > 12) && is24Hour\n  const clockRef = React.useRef<View | null>(null)\n  // Hooks are nice, sometimes... :-)..\n  // We need the latest values, since the onPointerMove uses a closure to the function\n  const hoursRef = useLatest(hours)\n  const onChangeRef = useLatest(onChange)\n  const minutesRef = useLatest(minutes)\n  const focusedRef = useLatest(focused)\n  const is24HourRef = useLatest(is24Hour)\n  const modeRef = useLatest(mode)\n  const onPointerMove = React.useCallback(\n    (e: GestureResponderEvent, final: boolean) => {\n      let x = e.nativeEvent.locationX\n      let y = e.nativeEvent.locationY\n      let angle = getAngle(x, y, circleSize)\n      if (focusedRef.current === clockTypes.hours) {\n        let hours24 = is24HourRef.current\n        let previousHourType = getHourType(hoursRef.current)\n        let pickedHours = getHours(angle, previousHourType)\n\n        let hours12AndPm = !hours24 && modeRef.current === 'AM'\n\n        let hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize)\n        let hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm\n\n        // Avoiding the \"24h\"\n        // Should be 12h for 12 hours and PM mode\n\n        if (hours12AndPm || hours24AndPM) {\n          pickedHours += 12\n        }\n        if (modeRef.current === 'AM' && pickedHours === 12) {\n          pickedHours = 0\n        }\n\n        if (\n          (!hours24 && modeRef.current === 'AM' && pickedHours === 12) ||\n          pickedHours === 24\n        ) {\n          pickedHours = 0\n        }\n\n        if (hoursRef.current !== pickedHours || final) {\n          onChangeRef.current({\n            hours: pickedHours,\n            minutes: minutesRef.current,\n            focused: final ? clockTypes.minutes : undefined,\n          })\n        }\n      } else if (focusedRef.current === clockTypes.minutes) {\n        let pickedMinutes = getMinutes(angle)\n        if (minutesRef.current !== pickedMinutes) {\n          onChangeRef.current({\n            hours: hoursRef.current,\n            minutes: pickedMinutes,\n          })\n        }\n      }\n    },\n    [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef, modeRef]\n  )\n  const panResponder = React.useRef(\n    PanResponder.create({\n      onPanResponderGrant: (e) => onPointerMove(e, false),\n      onPanResponderMove: (e) => onPointerMove(e, false),\n      onPanResponderRelease: (e) => onPointerMove(e, true),\n      onStartShouldSetPanResponder: returnTrue,\n      onStartShouldSetPanResponderCapture: () => false,\n      onMoveShouldSetPanResponder: returnTrue,\n      onMoveShouldSetPanResponderCapture: returnTrue,\n      onPanResponderTerminationRequest: returnTrue,\n      onShouldBlockNativeResponder: returnTrue,\n    })\n  ).current\n  const dynamicSize = focused === clockTypes.hours && shortPointer ? 33 : 0\n  const pointerNumber = focused === clockTypes.hours ? hours : minutes\n  const degreesPerNumber = focused === clockTypes.hours ? 30 : 6\n  return (\n    <View\n      ref={clockRef}\n      {...panResponder.panHandlers}\n      style={[\n        styles.clock,\n        {\n          backgroundColor: theme.dark\n            ? Color(theme.colors.surface).lighten(1.4).hex()\n            : theme.isV3\n            ? Color(theme.colors.outline).lighten(0.9).hex()\n            : Color(theme.colors.surface).darken(0.1).hex(),\n        },\n      ]}\n      // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506\n      cursor={'pointer'}\n    >\n      <View\n        style={[\n          styles.line,\n          {\n            backgroundColor: theme.colors.primary,\n            transform: [\n              { rotate: -90 + pointerNumber * degreesPerNumber + 'deg' },\n              {\n                translateX: circleSize / 4 - 4 - dynamicSize / 2,\n              },\n            ],\n            width: circleSize / 2 - 4 - dynamicSize,\n          },\n        ]}\n        pointerEvents=\"none\"\n      >\n        <View\n          style={[styles.endPoint, { backgroundColor: theme.colors.primary }]}\n        />\n      </View>\n      <View\n        style={[StyleSheet.absoluteFill, styles.center]}\n        pointerEvents=\"none\"\n      >\n        <View\n          style={[\n            styles.middlePoint,\n            {\n              backgroundColor: theme.colors.primary,\n            },\n          ]}\n        />\n      </View>\n      <AnimatedClockSwitcher\n        focused={focused}\n        hours={<AnalogClockHours is24Hour={is24Hour} hours={hours} />}\n        minutes={<AnalogClockMinutes minutes={minutes} />}\n      />\n    </View>\n  )\n}\nconst styles = StyleSheet.create({\n  clock: {\n    height: circleSize,\n    width: circleSize,\n    position: 'relative',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: circleSize / 2,\n  },\n  middlePoint: {\n    borderRadius: 4,\n    height: 8,\n    width: 8,\n  },\n  center: { justifyContent: 'center', alignItems: 'center' },\n  endPoint: {\n    borderRadius: 15,\n    height: 30,\n    width: 30,\n    position: 'absolute',\n    right: 0,\n    bottom: -14,\n  },\n  line: {\n    position: 'absolute',\n    marginBottom: -1,\n    height: 2,\n    borderRadius: 4,\n  },\n})\nfunction returnTrue() {\n  return true\n}\nexport default React.memo(AnalogClock)\n"],"mappings":"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"}

package/lib/module/Time/TimeInputs.js

@@ -7,6 +7,7 @@ import { clockTypes, toHourInputFormat, toHourOutputFormat } from './timeUtils';
 import TimeInput from './TimeInput';
 import AmPmSwitcher from './AmPmSwitcher';
 import { useLatest } from '../utils';
+import Color from 'color';
 
 function TimeInputs(_ref) {
   let {
@@ -48,6 +49,7 @@ function TimeInputs(_ref) {
     pressed: focused === clockTypes.hours,
     onPress: onFocusInput,
     inputType: inputType,
+    selectionColor: theme.dark ? Color(theme.colors.primary).darken(0.2).hex() : theme.colors.primary,
     returnKeyType: 'next',
     onSubmitEditing: onSubmitStartInput,
     blurOnSubmit: false,
@@ -62,21 +64,20 @@ function TimeInputs(_ref) {
         hours: newHours,
         minutes
       });
-    } // onChangeText={onChangeStartInput}
-
+    }
   }), /*#__PURE__*/React.createElement(View, {
     style: styles.hoursAndMinutesSeparator
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.spaceDot
   }), /*#__PURE__*/React.createElement(View, {
     style: [styles.dot, {
-      backgroundColor: theme.colors.text
+      backgroundColor: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onBackground : theme.colors.text
     }]
   }), /*#__PURE__*/React.createElement(View, {
     style: styles.betweenDot
   }), /*#__PURE__*/React.createElement(View, {
     style: [styles.dot, {
-      backgroundColor: theme.colors.text
+      backgroundColor: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onBackground : theme.colors.text
     }]
   }), /*#__PURE__*/React.createElement(View, {
     style: styles.spaceDot
@@ -88,6 +89,7 @@ function TimeInputs(_ref) {
     pressed: focused === clockTypes.minutes,
     onPress: onFocusInput,
     inputType: inputType,
+    selectionColor: theme.dark ? Color(theme.colors.primary).darken(0.2).hex() : theme.colors.primary,
     onSubmitEditing: onSubmitEndInput,
     onChanged: newMinutesFromInput => {
       let newMinutes = newMinutesFromInput;

package/lib/module/Time/TimeInputs.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","StyleSheet","useWindowDimensions","useTheme","clockTypes","toHourInputFormat","toHourOutputFormat","TimeInput","AmPmSwitcher","useLatest","TimeInputs","hours","minutes","onFocusInput","focused","inputType","onChange","is24Hour","startInput","useRef","endInput","dimensions","isLandscape","width","height","theme","onSubmitStartInput","useCallback","current","focus","onSubmitEndInput","minutesRef","onChangeHours","newHours","styles","inputContainer","inputContainerLandscape","newHoursFromInput","hoursAndMinutesSeparator","spaceDot","dot","backgroundColor","colors","text","betweenDot","newMinutesFromInput","newMinutes","spaceBetweenInputsAndSwitcher","create","flexDirection","alignItems","flex","fontSize","borderRadius","memo"],"sources":["TimeInputs.tsx"],"sourcesContent":["// @typescript-eslint/no-unused-vars\n// WORK IN PROGRESS\n\nimport * as React from 'react'\nimport {\n  View,\n  StyleSheet,\n  useWindowDimensions,\n  TextInput as TextInputNative,\n} from 'react-native'\nimport { useTheme } from 'react-native-paper'\n\nimport {\n  clockTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  toHourInputFormat,\n  toHourOutputFormat,\n} from './timeUtils'\nimport TimeInput from './TimeInput'\nimport AmPmSwitcher from './AmPmSwitcher'\nimport { useLatest } from '../utils'\n\nfunction TimeInputs({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  is24Hour,\n}: {\n  inputType: PossibleInputTypes\n  focused: PossibleClockTypes\n  hours: number\n  minutes: number\n  onFocusInput: (type: PossibleClockTypes) => any\n  onChange: (hoursMinutesAndFocused: {\n    hours: number\n    minutes: number\n    focused?: undefined | PossibleClockTypes\n  }) => any\n  is24Hour: boolean\n}) {\n  const startInput = React.useRef<TextInputNative | null>(null)\n  const endInput = React.useRef<TextInputNative | null>(null)\n  const dimensions = useWindowDimensions()\n  const isLandscape = dimensions.width > dimensions.height\n  const theme = useTheme()\n\n  const onSubmitStartInput = React.useCallback(() => {\n    if (endInput.current) {\n      endInput.current.focus()\n    }\n  }, [endInput])\n\n  const onSubmitEndInput = React.useCallback(() => {\n    // TODO: close modal and persist time\n  }, [])\n\n  const minutesRef = useLatest(minutes)\n  const onChangeHours = React.useCallback(\n    (newHours: number) => {\n      onChange({\n        hours: newHours,\n        minutes: minutesRef.current,\n        focused: clockTypes.hours,\n      })\n    },\n    [onChange, minutesRef]\n  )\n\n  return (\n    <View\n      style={[\n        styles.inputContainer,\n        isLandscape && styles.inputContainerLandscape,\n      ]}\n    >\n      <TimeInput\n        ref={startInput}\n        placeholder={'00'}\n        value={toHourInputFormat(hours, is24Hour)}\n        clockType={clockTypes.hours}\n        pressed={focused === clockTypes.hours}\n        onPress={onFocusInput}\n        inputType={inputType}\n        returnKeyType={'next'}\n        onSubmitEditing={onSubmitStartInput}\n        blurOnSubmit={false}\n        onChanged={(newHoursFromInput) => {\n          let newHours = toHourOutputFormat(newHoursFromInput, hours, is24Hour)\n          if (newHoursFromInput > 24) {\n            newHours = 24\n          }\n          onChange({\n            hours: newHours,\n            minutes,\n          })\n        }}\n        // onChangeText={onChangeStartInput}\n      />\n      <View style={styles.hoursAndMinutesSeparator}>\n        <View style={styles.spaceDot} />\n        <View style={[styles.dot, { backgroundColor: theme.colors.text }]} />\n        <View style={styles.betweenDot} />\n        <View style={[styles.dot, { backgroundColor: theme.colors.text }]} />\n        <View style={styles.spaceDot} />\n      </View>\n      <TimeInput\n        ref={endInput}\n        placeholder={'00'}\n        value={minutes}\n        clockType={clockTypes.minutes}\n        pressed={focused === clockTypes.minutes}\n        onPress={onFocusInput}\n        inputType={inputType}\n        onSubmitEditing={onSubmitEndInput}\n        onChanged={(newMinutesFromInput) => {\n          let newMinutes = newMinutesFromInput\n          if (newMinutesFromInput > 59) {\n            newMinutes = 59\n          }\n          onChange({\n            hours,\n            minutes: newMinutes,\n          })\n        }}\n      />\n      {!is24Hour && (\n        <>\n          <View style={styles.spaceBetweenInputsAndSwitcher} />\n          <AmPmSwitcher hours={hours} onChange={onChangeHours} />\n        </>\n      )}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  spaceBetweenInputsAndSwitcher: { width: 12 },\n  inputContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  inputContainerLandscape: {\n    flex: 1,\n  },\n  hoursAndMinutesSeparator: {\n    fontSize: 65,\n    width: 24,\n    alignItems: 'center',\n  },\n  spaceDot: {\n    flex: 1,\n  },\n  dot: {\n    width: 7,\n    height: 7,\n    borderRadius: 7 / 2,\n  },\n  betweenDot: {\n    height: 12,\n  },\n})\n\nexport default React.memo(TimeInputs)\n"],"mappings":"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"}
+{"version":3,"names":["React","View","StyleSheet","useWindowDimensions","useTheme","clockTypes","toHourInputFormat","toHourOutputFormat","TimeInput","AmPmSwitcher","useLatest","Color","TimeInputs","hours","minutes","onFocusInput","focused","inputType","onChange","is24Hour","startInput","useRef","endInput","dimensions","isLandscape","width","height","theme","onSubmitStartInput","useCallback","current","focus","onSubmitEndInput","minutesRef","onChangeHours","newHours","styles","inputContainer","inputContainerLandscape","dark","colors","primary","darken","hex","newHoursFromInput","hoursAndMinutesSeparator","spaceDot","dot","backgroundColor","isV3","onBackground","text","betweenDot","newMinutesFromInput","newMinutes","spaceBetweenInputsAndSwitcher","create","flexDirection","alignItems","flex","fontSize","borderRadius","memo"],"sources":["TimeInputs.tsx"],"sourcesContent":["// @typescript-eslint/no-unused-vars\n// WORK IN PROGRESS\n\nimport * as React from 'react'\nimport {\n  View,\n  StyleSheet,\n  useWindowDimensions,\n  TextInput as TextInputNative,\n} from 'react-native'\nimport { MD2Theme, useTheme } from 'react-native-paper'\n\nimport {\n  clockTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  toHourInputFormat,\n  toHourOutputFormat,\n} from './timeUtils'\nimport TimeInput from './TimeInput'\nimport AmPmSwitcher from './AmPmSwitcher'\nimport { useLatest } from '../utils'\nimport Color from 'color'\n\nfunction TimeInputs({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  is24Hour,\n}: {\n  inputType: PossibleInputTypes\n  focused: PossibleClockTypes\n  hours: number\n  minutes: number\n  onFocusInput: (type: PossibleClockTypes) => any\n  onChange: (hoursMinutesAndFocused: {\n    hours: number\n    minutes: number\n    focused?: undefined | PossibleClockTypes\n  }) => any\n  is24Hour: boolean\n}) {\n  const startInput = React.useRef<TextInputNative | null>(null)\n  const endInput = React.useRef<TextInputNative | null>(null)\n  const dimensions = useWindowDimensions()\n  const isLandscape = dimensions.width > dimensions.height\n  const theme = useTheme()\n\n  const onSubmitStartInput = React.useCallback(() => {\n    if (endInput.current) {\n      endInput.current.focus()\n    }\n  }, [endInput])\n\n  const onSubmitEndInput = React.useCallback(() => {\n    // TODO: close modal and persist time\n  }, [])\n\n  const minutesRef = useLatest(minutes)\n  const onChangeHours = React.useCallback(\n    (newHours: number) => {\n      onChange({\n        hours: newHours,\n        minutes: minutesRef.current,\n        focused: clockTypes.hours,\n      })\n    },\n    [onChange, minutesRef]\n  )\n\n  return (\n    <View\n      style={[\n        styles.inputContainer,\n        isLandscape && styles.inputContainerLandscape,\n      ]}\n    >\n      <TimeInput\n        ref={startInput}\n        placeholder={'00'}\n        value={toHourInputFormat(hours, is24Hour)}\n        clockType={clockTypes.hours}\n        pressed={focused === clockTypes.hours}\n        onPress={onFocusInput}\n        inputType={inputType}\n        selectionColor={\n          theme.dark\n            ? Color(theme.colors.primary).darken(0.2).hex()\n            : theme.colors.primary\n        }\n        returnKeyType={'next'}\n        onSubmitEditing={onSubmitStartInput}\n        blurOnSubmit={false}\n        onChanged={(newHoursFromInput) => {\n          let newHours = toHourOutputFormat(newHoursFromInput, hours, is24Hour)\n          if (newHoursFromInput > 24) {\n            newHours = 24\n          }\n          onChange({\n            hours: newHours,\n            minutes,\n          })\n        }}\n      />\n      <View style={styles.hoursAndMinutesSeparator}>\n        <View style={styles.spaceDot} />\n        <View\n          style={[\n            styles.dot,\n            {\n              backgroundColor: theme?.isV3\n                ? theme.colors.onBackground\n                : (theme as any as MD2Theme).colors.text,\n            },\n          ]}\n        />\n        <View style={styles.betweenDot} />\n        <View\n          style={[\n            styles.dot,\n            {\n              backgroundColor: theme?.isV3\n                ? theme.colors.onBackground\n                : (theme as any as MD2Theme).colors.text,\n            },\n          ]}\n        />\n        <View style={styles.spaceDot} />\n      </View>\n      <TimeInput\n        ref={endInput}\n        placeholder={'00'}\n        value={minutes}\n        clockType={clockTypes.minutes}\n        pressed={focused === clockTypes.minutes}\n        onPress={onFocusInput}\n        inputType={inputType}\n        selectionColor={\n          theme.dark\n            ? Color(theme.colors.primary).darken(0.2).hex()\n            : theme.colors.primary\n        }\n        onSubmitEditing={onSubmitEndInput}\n        onChanged={(newMinutesFromInput) => {\n          let newMinutes = newMinutesFromInput\n          if (newMinutesFromInput > 59) {\n            newMinutes = 59\n          }\n          onChange({\n            hours,\n            minutes: newMinutes,\n          })\n        }}\n      />\n      {!is24Hour && (\n        <>\n          <View style={styles.spaceBetweenInputsAndSwitcher} />\n          <AmPmSwitcher hours={hours} onChange={onChangeHours} />\n        </>\n      )}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  spaceBetweenInputsAndSwitcher: { width: 12 },\n  inputContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  inputContainerLandscape: {\n    flex: 1,\n  },\n  hoursAndMinutesSeparator: {\n    fontSize: 65,\n    width: 24,\n    alignItems: 'center',\n  },\n  spaceDot: {\n    flex: 1,\n  },\n  dot: {\n    width: 7,\n    height: 7,\n    borderRadius: 7 / 2,\n  },\n  betweenDot: {\n    height: 12,\n  },\n})\n\nexport default React.memo(TimeInputs)\n"],"mappings":"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"}

package/lib/module/Time/TimePicker.js

@@ -78,7 +78,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 24 * 3 + 96 * 2 + 52 + circleSize
   },
-  rootPortrait: {},
+  rootPortrait: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
   clockContainer: {
     paddingTop: 36,
     paddingLeft: 12,

package/lib/module/Time/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","StyleSheet","useWindowDimensions","inputTypes","toHourInputFormat","toHourOutputFormat","AnalogClock","circleSize","TimeInputs","DisplayModeContext","createContext","mode","setMode","TimePicker","hours","minutes","onFocusInput","focused","inputType","onChange","locale","displayMode","setDisplayMode","useState","undefined","dimensions","isLandscape","width","height","is24Hour","useMemo","formatter","Intl","DateTimeFormat","hour","minute","timeZone","formatted","format","Date","UTC","includes","useEffect","onInnerChange","useCallback","params","styles","rootLandscape","rootPortrait","picker","clockContainer","create","flexDirection","alignItems","justifyContent","paddingTop","paddingLeft","paddingRight","memo"],"sources":["TimePicker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet, useWindowDimensions } from 'react-native'\n\nimport {\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  toHourInputFormat,\n  toHourOutputFormat,\n} from './timeUtils'\n\nimport AnalogClock from './AnalogClock'\nimport { circleSize } from './timeUtils'\nimport TimeInputs from './TimeInputs'\n\nexport const DisplayModeContext = React.createContext<{\n  mode: 'AM' | 'PM' | undefined\n  setMode: React.Dispatch<React.SetStateAction<'AM' | 'PM' | undefined>>\n}>({ mode: 'AM', setMode: () => {} })\n\ntype onChangeFunc = ({\n  hours,\n  minutes,\n  focused,\n}: {\n  hours: number\n  minutes: number\n  focused?: undefined | PossibleClockTypes\n}) => any\n\nfunction TimePicker({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  locale,\n}: {\n  locale?: undefined | string\n  inputType: PossibleInputTypes\n  focused: PossibleClockTypes\n  hours: number\n  minutes: number\n  onFocusInput: (type: PossibleClockTypes) => any\n  onChange: onChangeFunc\n}) {\n  const [displayMode, setDisplayMode] = React.useState<'AM' | 'PM' | undefined>(\n    undefined\n  )\n  const dimensions = useWindowDimensions()\n  const isLandscape = dimensions.width > dimensions.height\n\n  // method to check whether we have 24 hours in clock or 12\n  const is24Hour = React.useMemo(() => {\n    const formatter = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: 'UTC',\n    })\n    const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)))\n    return formatted.includes('23')\n  }, [locale])\n\n  // Initialize display Mode according the hours value\n  React.useEffect(() => {\n    if (hours >= 12) {\n      setDisplayMode('PM')\n    } else {\n      setDisplayMode('AM')\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const onInnerChange = React.useCallback<onChangeFunc>(\n    (params) => {\n      params.hours = toHourOutputFormat(params.hours, hours, is24Hour)\n      onChange(params)\n    },\n    [onChange, hours, is24Hour]\n  )\n\n  return (\n    <DisplayModeContext.Provider\n      value={{ mode: displayMode, setMode: setDisplayMode }}\n    >\n      <View style={isLandscape ? styles.rootLandscape : styles.rootPortrait}>\n        <TimeInputs\n          inputType={inputType}\n          hours={hours}\n          minutes={minutes}\n          is24Hour={is24Hour}\n          onChange={onChange}\n          onFocusInput={onFocusInput}\n          focused={focused}\n        />\n        {inputType === inputTypes.picker ? (\n          <View style={styles.clockContainer}>\n            <AnalogClock\n              hours={toHourInputFormat(hours, is24Hour)}\n              minutes={minutes}\n              focused={focused}\n              is24Hour={is24Hour}\n              onChange={onInnerChange}\n            />\n          </View>\n        ) : null}\n      </View>\n    </DisplayModeContext.Provider>\n  )\n}\n\nconst styles = StyleSheet.create({\n  rootLandscape: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24 * 3 + 96 * 2 + 52 + circleSize,\n  },\n  rootPortrait: {},\n  clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },\n})\n\nexport default React.memo(TimePicker)\n"],"mappings":"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"}
+{"version":3,"names":["React","View","StyleSheet","useWindowDimensions","inputTypes","toHourInputFormat","toHourOutputFormat","AnalogClock","circleSize","TimeInputs","DisplayModeContext","createContext","mode","setMode","TimePicker","hours","minutes","onFocusInput","focused","inputType","onChange","locale","displayMode","setDisplayMode","useState","undefined","dimensions","isLandscape","width","height","is24Hour","useMemo","formatter","Intl","DateTimeFormat","hour","minute","timeZone","formatted","format","Date","UTC","includes","useEffect","onInnerChange","useCallback","params","styles","rootLandscape","rootPortrait","picker","clockContainer","create","flexDirection","alignItems","justifyContent","paddingTop","paddingLeft","paddingRight","memo"],"sources":["TimePicker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet, useWindowDimensions } from 'react-native'\n\nimport {\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  toHourInputFormat,\n  toHourOutputFormat,\n} from './timeUtils'\n\nimport AnalogClock from './AnalogClock'\nimport { circleSize } from './timeUtils'\nimport TimeInputs from './TimeInputs'\n\nexport const DisplayModeContext = React.createContext<{\n  mode: 'AM' | 'PM' | undefined\n  setMode: React.Dispatch<React.SetStateAction<'AM' | 'PM' | undefined>>\n}>({ mode: 'AM', setMode: () => {} })\n\ntype onChangeFunc = ({\n  hours,\n  minutes,\n  focused,\n}: {\n  hours: number\n  minutes: number\n  focused?: undefined | PossibleClockTypes\n}) => any\n\nfunction TimePicker({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  locale,\n}: {\n  locale?: undefined | string\n  inputType: PossibleInputTypes\n  focused: PossibleClockTypes\n  hours: number\n  minutes: number\n  onFocusInput: (type: PossibleClockTypes) => any\n  onChange: onChangeFunc\n}) {\n  const [displayMode, setDisplayMode] = React.useState<'AM' | 'PM' | undefined>(\n    undefined\n  )\n  const dimensions = useWindowDimensions()\n  const isLandscape = dimensions.width > dimensions.height\n\n  // method to check whether we have 24 hours in clock or 12\n  const is24Hour = React.useMemo(() => {\n    const formatter = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: 'UTC',\n    })\n    const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)))\n    return formatted.includes('23')\n  }, [locale])\n\n  // Initialize display Mode according the hours value\n  React.useEffect(() => {\n    if (hours >= 12) {\n      setDisplayMode('PM')\n    } else {\n      setDisplayMode('AM')\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const onInnerChange = React.useCallback<onChangeFunc>(\n    (params) => {\n      params.hours = toHourOutputFormat(params.hours, hours, is24Hour)\n      onChange(params)\n    },\n    [onChange, hours, is24Hour]\n  )\n\n  return (\n    <DisplayModeContext.Provider\n      value={{ mode: displayMode, setMode: setDisplayMode }}\n    >\n      <View style={isLandscape ? styles.rootLandscape : styles.rootPortrait}>\n        <TimeInputs\n          inputType={inputType}\n          hours={hours}\n          minutes={minutes}\n          is24Hour={is24Hour}\n          onChange={onChange}\n          onFocusInput={onFocusInput}\n          focused={focused}\n        />\n        {inputType === inputTypes.picker ? (\n          <View style={styles.clockContainer}>\n            <AnalogClock\n              hours={toHourInputFormat(hours, is24Hour)}\n              minutes={minutes}\n              focused={focused}\n              is24Hour={is24Hour}\n              onChange={onInnerChange}\n            />\n          </View>\n        ) : null}\n      </View>\n    </DisplayModeContext.Provider>\n  )\n}\n\nconst styles = StyleSheet.create({\n  rootLandscape: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24 * 3 + 96 * 2 + 52 + circleSize,\n  },\n  rootPortrait: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },\n})\n\nexport default React.memo(TimePicker)\n"],"mappings":"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"}

package/lib/module/Time/TimePickerModal.js

@@ -5,6 +5,8 @@ import TimePicker from './TimePicker';
 import { clockTypes, getTimeInputTypeIcon, inputTypes, reverseInputTypes } from './timeUtils';
 const supportedOrientations = ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'];
 export function TimePickerModal(_ref) {
+  var _theme$colors;
+
   let {
     visible,
     onDismiss,
@@ -21,6 +23,14 @@ export function TimePickerModal(_ref) {
     clockIcon = 'clock-outline'
   } = _ref;
   const theme = useTheme();
+  let textFont;
+
+  if (theme.isV3) {
+    textFont = theme.fonts.bodyMedium;
+  } else {
+    textFont = theme === null || theme === void 0 ? void 0 : theme.fonts.medium;
+  }
+
   const [inputType, setInputType] = React.useState(inputTypes.picker);
   const [focused, setFocused] = React.useState(clockTypes.hours);
   const [localHours, setLocalHours] = React.useState(getHours(hours));
@@ -53,7 +63,7 @@ export function TimePickerModal(_ref) {
     onPress: onDismiss
   }, /*#__PURE__*/React.createElement(View, {
     style: [StyleSheet.absoluteFill, styles.modalBackground, {
-      backgroundColor: theme.colors.backdrop
+      backgroundColor: (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.backdrop
     }]
   })), /*#__PURE__*/React.createElement(View, {
     style: [StyleSheet.absoluteFill, styles.modalRoot],
@@ -69,8 +79,8 @@ export function TimePickerModal(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.labelContainer
   }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.label, {
-      color: theme.colors.text
+    style: [styles.label, { ...textFont,
+      color: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onBackground : theme.colors.text
     }]
   }, uppercase ? label.toUpperCase() : label)), /*#__PURE__*/React.createElement(View, {
     style: styles.timePickerContainer
@@ -144,7 +154,8 @@ const styles = StyleSheet.create({
     height: 28,
     justifyContent: 'flex-end',
     paddingLeft: 24,
-    paddingRight: 24
+    paddingRight: 24,
+    marginTop: 8
   },
   label: {
     letterSpacing: 1,