@neko-os/ui 0.5.0 → 0.5.2

package/src/components/inputs/datePicker/QuarterPicker.js

@@ -17,14 +17,15 @@ dayjs.extend(quarterOfYear)
 
 const quarters = [1, 2, 3, 4]
 
-function QuarterGrid({ year, selectedValue, onSelect, min, max, onCheckDisabled }) {
+const QuarterGrid = React.memo(function QuarterGrid({ year, selectedKey, onSelect, min, max, onCheckDisabled }) {
   const yearDate = dayjs().year(year).startOf('year')
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
 
   return (
     <Grid colSpan={6} gap="xs">
       {quarters.map((quarter) => {
         const dateVal = yearDate.quarter(quarter)
-        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week')
+        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'quarter')
         const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
 
         return (
@@ -46,7 +47,7 @@ function QuarterGrid({ year, selectedValue, onSelect, min, max, onCheckDisabled
       })}
     </Grid>
   )
-}
+})
 
 export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
@@ -58,18 +59,22 @@ export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, allo
     if (value?.isValid?.()) setCurrentYear(value.startOf('year'))
   }, [value?.quarter?.(), value?.year?.()])
 
-  const handleChange = (v) => {
-    const newValue = v.startOf('quarter')
-    setLocalValue(newValue)
-    onChange?.(newValue)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      const newValue = v.startOf('quarter')
+      setLocalValue(newValue)
+      onChange?.(newValue)
+    },
+    [onChange]
+  )
 
   const yearValue = currentYear.year()
   const minYear = min ? dayjs(min).year() : undefined
   const maxYear = max ? dayjs(max).year() : undefined
+  const selectedKey = value?.valueOf?.()
 
   const renderSlide = (v) => (
-    <QuarterGrid year={v} selectedValue={value} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+    <QuarterGrid year={v} selectedKey={selectedKey} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
   )
 
   return (

package/src/components/inputs/datePicker/WeekPicker.js

@@ -25,7 +25,9 @@ function fromMonthValue(v) {
     .startOf('month')
 }
 
-function MonthWeeks({ month, selectedValue, onSelect, min, max, onCheckDisabled }) {
+const MonthWeeks = React.memo(function MonthWeeks({ monthValue, selectedKey, onSelect, min, max, onCheckDisabled }) {
+  const month = fromMonthValue(monthValue)
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
   const { cells } = useCalendarDays(month)
   const weeks = splitEvery(7, cells)
 
@@ -67,7 +69,7 @@ function MonthWeeks({ month, selectedValue, onSelect, min, max, onCheckDisabled
       </View>
     </View>
   )
-}
+})
 
 export function WeekPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
@@ -79,18 +81,22 @@ export function WeekPicker({ value, onChange, min, max, onCheckDisabled, allowCl
     if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
   }, [value?.day?.(), value?.month?.(), value?.year?.()])
 
-  const handleChange = (v) => {
-    const newValue = v.startOf('week')
-    setLocalValue(newValue)
-    onChange?.(newValue)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      const newValue = v.startOf('week')
+      setLocalValue(newValue)
+      onChange?.(newValue)
+    },
+    [onChange]
+  )
 
   const monthValue = toMonthValue(currentMonth)
   const minMonth = min ? toMonthValue(dayjs(min).startOf('month')) : undefined
   const maxMonth = max ? toMonthValue(dayjs(max).startOf('month')) : undefined
+  const selectedKey = value?.valueOf?.()
 
   const renderSlide = (v) => (
-    <MonthWeeks month={fromMonthValue(v)} selectedValue={value} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+    <MonthWeeks monthValue={v} selectedKey={selectedKey} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
   )
 
   return (

package/src/components/inputs/datePicker/YearPicker.js

@@ -21,15 +21,16 @@ function decadeFromIndex(i) {
   return dayjs().year(i * 10).startOf('year')
 }
 
-function DecadeGrid({ decadeIndex, selectedValue, onSelect, min, max, onCheckDisabled }) {
+const DecadeGrid = React.memo(function DecadeGrid({ decadeIndex, selectedKey, onSelect, min, max, onCheckDisabled }) {
   const decadeStart = decadeFromIndex(decadeIndex)
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
   const years = range(decadeStart.year(), decadeStart.year() + 10)
 
   return (
     <Grid colSpan={12} gap="xs">
       {years.map((year) => {
         const dateVal = decadeStart.year(year)
-        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week')
+        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'year')
         const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
 
         return (
@@ -51,7 +52,7 @@ function DecadeGrid({ decadeIndex, selectedValue, onSelect, min, max, onCheckDis
       })}
     </Grid>
   )
-}
+})
 
 export function YearPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
@@ -64,17 +65,21 @@ export function YearPicker({ value, onChange, min, max, onCheckDisabled, allowCl
     if (value?.isValid?.()) setCurrentDecade(getDecadeIndex(value))
   }, [value?.year?.()])
 
-  const handleChange = (v) => {
-    const newValue = v.startOf('year')
-    setLocalValue(newValue)
-    onChange?.(newValue)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      const newValue = v.startOf('year')
+      setLocalValue(newValue)
+      onChange?.(newValue)
+    },
+    [onChange]
+  )
 
   const minDecade = min ? getDecadeIndex(min) : undefined
   const maxDecade = max ? getDecadeIndex(max) : undefined
+  const selectedKey = value?.valueOf?.()
 
   const renderSlide = (v) => (
-    <DecadeGrid decadeIndex={v} selectedValue={value} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+    <DecadeGrid decadeIndex={v} selectedKey={selectedKey} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
   )
 
   return (

package/src/helpers/index.js

@@ -2,4 +2,6 @@ export * from './debounce'
 export * from './string'
 export * from './random'
 export * from './storage'
+export * from './weekStart'
+export * from './weekStartSetup'
 export * from './../abstractions/helpers/useSafeAreaInsets'

package/src/helpers/weekStart.js

@@ -0,0 +1,25 @@
+import dayjs from 'dayjs'
+import updateLocale from 'dayjs/esm/plugin/updateLocale'
+
+dayjs.extend(updateLocale)
+
+let _override = null
+
+export function getFirstDayOfWeek() {
+  if (_override !== null) return _override
+  return dayjs().$locale().weekStart || 0
+}
+
+export function setFirstDayOfWeek(day) {
+  _override = day
+  dayjs.updateLocale(dayjs().$locale().name || 'en', { weekStart: day })
+}
+
+export function getOrderedWeekdays() {
+  const first = getFirstDayOfWeek()
+  return Array.from({ length: 7 }, (_, i) => (first + i) % 7)
+}
+
+export function getWeekdayOffset(dayIndex) {
+  return (dayIndex - getFirstDayOfWeek() + 7) % 7
+}

package/src/helpers/weekStartSetup.js

@@ -0,0 +1,11 @@
+import { setFirstDayOfWeek } from './weekStart'
+
+export function initFirstDayOfWeek() {
+  try {
+    const locale = new Intl.Locale(navigator.language)
+    const weekInfo = locale.weekInfo ?? locale.getWeekInfo?.()
+    if (weekInfo?.firstDay != null) {
+      setFirstDayOfWeek(weekInfo.firstDay === 7 ? 0 : weekInfo.firstDay)
+    }
+  } catch {}
+}

package/src/helpers/weekStartSetup.native.js

@@ -0,0 +1,11 @@
+import { setFirstDayOfWeek } from './weekStart'
+
+export function initFirstDayOfWeek() {
+  try {
+    const Localization = require('expo-localization')
+    const cal = Localization.getCalendars()[0]
+    if (cal?.firstWeekday != null) {
+      setFirstDayOfWeek((cal.firstWeekday - 1) % 7)
+    }
+  } catch {}
+}

package/src/index.js

@@ -4,5 +4,6 @@ export * from './theme'
 export * from './responsive'
 export * from './i18n'
 export * from './NekoUI'
+export * from './abstractions'
 
 export const version = 41