@neko-os/ui 0.5.4 → 0.6.0

package/src/components/inputs/DateInput.js

@@ -11,6 +11,7 @@ dayjs.extend(advancedFormat)
 dayjs.extend(weekOfYear)
 
 import { DatePicker } from './datePicker/DatePicker'
+import { DateWheelPicker } from './dateWheelPicker/DateWheelPicker'
 import { MaskInput } from './MaskInput'
 import { Popover } from '../structure/popover/Popover'
 import { isValidDate } from '../calendar/_helpers/dateDisabled'
@@ -46,6 +47,7 @@ export function DateInput({
   onCheckDisabled,
   placement,
   type = 'day',
+  presentation = 'calendar',
   format,
   startsOpen,
   allowClear,
@@ -85,26 +87,28 @@ export function DateInput({
     setInputValue(!!value ? dayjs(value).format(format) : '')
   }, [value])
 
+  const isWheel = presentation === 'wheel'
   const Input = useBottomDrawer ? LinkInput : FullWidthInputWrapper
+  const Picker = isWheel ? DateWheelPicker : DatePicker
 
   return (
     <Popover
       trigger="click"
       startsOpen={startsOpen}
       placement={placement || 'bottomLeft'}
-      snapPoints={[450]}
+      snapPoints={[isWheel ? 275 : 450]}
       useBottomDrawer={useBottomDrawer}
       bottomDrawerProps={{ contentProps: { padding: 'md' } }}
       watch={[value?.format?.('YYYYMMDD')]}
       renderContent={({ onClose }) => (
         <View flex centerH onMouseDown={(e) => e.preventDefault()}>
-          <DatePicker
+          <Picker
             value={value}
             onChange={(v) => {
               handleChange(v)
-              onClose()
+              if (!isWheel) onClose()
             }}
-            width={useBottomDrawer ? '100%' : 275}
+            width={!isWheel && (useBottomDrawer ? '100%' : 275)}
             allowClear={allowClear}
             {...validations}
             type={type}

package/src/components/inputs/InputWrapper.js

@@ -13,10 +13,9 @@ const DEFAULT_PROPS = ([{ sizeCode }]) => ({
   paddingH: 'sm',
   bg: 'overlayBG',
   border: true,
-  br: 'md',
+  br: sizeCode,
   row: true,
   gap: 'sm',
-  br: sizeCode,
 })
 
 export function InputWrapper({

package/src/components/inputs/NumberWheelInput.js

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { BottomDrawer } from '../modals/bottomDrawer'
+import { LinkInput } from './LinkInput'
+import { NumberWheelPicker } from './NumberWheelPicker'
+import { View } from '../structure/View'
+
+export function NumberWheelInput({
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  decimalStep,
+  useInt,
+  precision,
+  suffix,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(false)
+  const [localValue, setLocalValue] = React.useState(value)
+  value = value ?? localValue
+
+  const handleChange = (v) => {
+    setLocalValue(v)
+    onChange?.(v)
+  }
+
+  const displayValue = value != null ? `${value}${suffix ? ` ${suffix}` : ''}` : ''
+
+  return (
+    <>
+      <LinkInput value={displayValue} onPress={() => setOpen(true)} {...props} />
+      <BottomDrawer open={open} onClose={() => setOpen(false)} snapPoints={[275]} contentProps={{ padding: 'md' }}>
+        <View flex centerH>
+          <NumberWheelPicker
+            value={value}
+            onChange={handleChange}
+            min={min}
+            max={max}
+            step={step}
+            decimalStep={decimalStep}
+            useInt={useInt}
+            precision={precision}
+          />
+        </View>
+      </BottomDrawer>
+    </>
+  )
+}

package/src/components/inputs/NumberWheelPicker.js

@@ -0,0 +1,43 @@
+import { Text } from '../text'
+import { View } from '../structure'
+import { WheelPicker } from './WheelPicker'
+
+export function NumberWheelPicker({ value, onChange, min = 0, max = 100, step = 1, decimalStep = 1, useInt, precision = 2 }) {
+  if (useInt) precision = 0
+
+  const intValue = value != null ? Math.trunc(value) : min
+  const decFactor = Math.pow(10, precision)
+  const decValue = value != null ? Math.round((Math.abs(value) - Math.abs(intValue)) * decFactor) : 0
+
+  const handleIntChange = (v) => {
+    onChange?.(precision === 0 ? v : v + decValue / decFactor)
+  }
+
+  const handleDecChange = (v) => {
+    onChange?.(intValue + v / decFactor)
+  }
+
+  return (
+    <View row gap="xs" centerV>
+      <View flex>
+        <WheelPicker range={[min, max]} step={step} value={intValue} onChange={handleIntChange} />
+      </View>
+      {precision > 0 && (
+        <>
+          <Text h3 strong>
+            .
+          </Text>
+          <View flex>
+            <WheelPicker
+              range={[0, decFactor - 1]}
+              step={decimalStep}
+              value={decValue}
+              onChange={handleDecChange}
+              formatLabel={(v) => String(v).padStart(precision, '0')}
+            />
+          </View>
+        </>
+      )}
+    </View>
+  )
+}

package/src/components/inputs/UploadInput.js

@@ -111,7 +111,7 @@ function Content({ value, open, remove, isDragging, multiple, area, grid, maxCou
     return (
       <View row wrap gap="sm">
         {items.map((item) => (
-          <GridItem key={item._id} value={item} remove={remove} />
+          <GridItem key={item._id ?? item.id} value={item} remove={remove} />
         ))}
         {showAdd && <AddTile onPress={open} isDragging={isDragging} />}
       </View>
@@ -129,7 +129,7 @@ function Content({ value, open, remove, isDragging, multiple, area, grid, maxCou
     <View gap="xs">
       {showAdd && link}
       {items.map((item) => (
-        <ListItem key={item._id} value={item} remove={remove} />
+        <ListItem key={item._id ?? item.id} value={item} remove={remove} />
       ))}
     </View>
   )

package/src/components/inputs/WheelPicker.js

@@ -0,0 +1,49 @@
+import { NumberInput } from './NumberInput'
+
+export function WheelPicker({
+  value,
+  onChange,
+  options,
+  suffix,
+  range,
+  step = 1,
+  labelKey = 'label',
+  valueKey = 'value',
+  useRawOption,
+  formatLabel,
+  ...props
+}) {
+  let min = 0
+  let max = 100
+
+  if (!!range || !options) {
+    const [from, to] = range || [0, 100]
+    const count = Math.floor((to - from) / step) + 1
+    options = Array.from({ length: count }, (_, i) => {
+      const v = from + i * step
+      return { [labelKey]: formatLabel ? formatLabel(v) : v, [valueKey]: v }
+    })
+  }
+
+  const values = (options || []).map((o) => o[valueKey]).filter((v) => typeof v === 'number')
+  if (values.length) {
+    min = Math.min(...values)
+    max = Math.max(...values)
+  }
+
+  function handleChange(newValue) {
+    if (useRawOption) {
+      // NumberInput allows free typing — snap to the nearest option on miss
+      const match = options.find((o) => o[valueKey] === newValue)
+      return onChange(
+        match ||
+          options.reduce((best, o) =>
+            Math.abs(o[valueKey] - newValue) < Math.abs(best[valueKey] - newValue) ? o : best
+          )
+      )
+    }
+    onChange(newValue)
+  }
+
+  return <NumberInput value={value} onChange={handleChange} suffix={suffix} min={min} max={max} precision={0} {...props} />
+}

package/src/components/inputs/WheelPicker.native.js

@@ -0,0 +1,88 @@
+import React from 'react'
+
+import { Text } from '../text'
+import { View } from '../structure'
+import { useColors } from '../../theme'
+import { debounce } from '../../helpers/debounce'
+
+let QuidoneWheelPicker
+
+try {
+  QuidoneWheelPicker = require('@quidone/react-native-wheel-picker').default
+} catch {
+  QuidoneWheelPicker = null
+}
+
+export function WheelPicker({
+  value,
+  onChange,
+  options,
+  suffix,
+  range,
+  step = 1,
+  labelKey = 'label',
+  valueKey = 'value',
+  useRawOption,
+  formatLabel,
+  ...props
+}) {
+  const colors = useColors()
+  const handleChange = React.useMemo(() => debounce(onChange, 300), [onChange])
+
+  if (!!range || !options) {
+    const [from, to] = range || [0, 100]
+    const count = Math.floor((to - from) / step) + 1
+    options = Array.from({ length: count }, (_, i) => {
+      const v = from + i * step
+      return { [labelKey]: formatLabel ? formatLabel(v) : v, [valueKey]: v }
+    })
+  }
+
+  const data = React.useMemo(() => {
+    if (!options) return []
+    return options.map((opt) => ({
+      value: opt[valueKey],
+      label: String(opt[labelKey] ?? opt[valueKey]),
+    }))
+  }, [options, labelKey, valueKey])
+
+  if (!QuidoneWheelPicker) {
+    console.warn('@quidone/react-native-wheel-picker not installed.')
+    return null
+  }
+
+  const resolveValue = (item) => {
+    if (useRawOption) return options.find((o) => o[valueKey] === item.value)
+    return item.value
+  }
+
+  return (
+    <View relative hiddenOverflow>
+      {!!suffix && (
+        <View absoluteFill row centerV>
+          <View flex />
+          <View flex paddingL={20}>
+            <Text text2>{suffix}</Text>
+          </View>
+        </View>
+      )}
+      <QuidoneWheelPicker
+        data={data}
+        value={value}
+        itemTextStyle={{ color: colors.text }}
+        itemHeight={40}
+        overlayItemStyle={{
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderLeftWidth: 0,
+          borderRightWidth: 0,
+          borderColor: colors.divider,
+          opacity: 1,
+        }}
+        _onValueChanging={({ item }) => handleChange(resolveValue(item))}
+        onValueChanged={({ item }) => onChange(resolveValue(item))}
+        {...props}
+      />
+    </View>
+  )
+}

package/src/components/inputs/WheelPicker.web.js

@@ -0,0 +1 @@
+export { WheelPicker } from './WheelPicker.native'

package/src/components/inputs/dateWheelPicker/DateWheelPicker.js

@@ -0,0 +1,24 @@
+import { DayWheelPicker } from './DayWheelPicker'
+import { MonthWheelPicker } from './MonthWheelPicker'
+import { QuarterWheelPicker } from './QuarterWheelPicker'
+import { WeekWheelPicker } from './WeekWheelPicker'
+import { YearWheelPicker } from './YearWheelPicker'
+
+export function DateWheelPicker({ type, ...props }) {
+  switch (type) {
+    case 'year':
+      return <YearWheelPicker {...props} />
+
+    case 'quarter':
+      return <QuarterWheelPicker {...props} />
+
+    case 'month':
+      return <MonthWheelPicker {...props} />
+
+    case 'week':
+      return <WeekWheelPicker {...props} />
+
+    default:
+      return <DayWheelPicker {...props} />
+  }
+}

package/src/components/inputs/dateWheelPicker/DayWheelPicker.js

@@ -0,0 +1,48 @@
+import dayjs from 'dayjs'
+
+import { ClearLink } from '../../actions/ClearLink'
+import { View } from '../../structure'
+import { useColors } from '../../../theme'
+
+let DatePicker
+
+try {
+  DatePicker = require('@quidone/react-native-wheel-picker').DatePicker
+} catch {
+  DatePicker = null
+}
+
+export function DayWheelPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
+  const colors = useColors()
+  if (!DatePicker) {
+    console.warn('@quidone/react-native-wheel-picker not installed.')
+    return null
+  }
+
+  value = value ? dayjs(value) : dayjs()
+
+  return (
+    <View center height={40 * 5} overflow="hidden" relative>
+      <DatePicker
+        locale={'pt'}
+        date={value.format('YYYY-MM-DD')}
+        minDate={min ? dayjs(min).format('YYYY-MM-DD') : undefined}
+        maxDate={max ? dayjs(max).format('YYYY-MM-DD') : undefined}
+        onDateChanged={({ date }) => onChange(dayjs(date))}
+        itemTextStyle={{ color: colors.text }}
+        itemHeight={40}
+        overlayItemStyle={{
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderLeftWidth: 0,
+          borderRightWidth: 0,
+          borderColor: colors.divider,
+          opacity: 1,
+        }}
+        {...props}
+      />
+
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
+    </View>
+  )
+}

package/src/components/inputs/dateWheelPicker/MonthWheelPicker.js

@@ -0,0 +1,19 @@
+import { View } from '../../structure'
+import { DayWheelPicker } from './DayWheelPicker'
+
+let DatePickerDate
+try {
+  DatePickerDate = require('@quidone/react-native-wheel-picker').DatePicker.Date
+} catch {
+  DatePickerDate = null
+}
+
+const renderHiddenDate = () => (
+  <View width={0} hiddenOverflow pointerEvents="none">
+    {DatePickerDate ? <DatePickerDate /> : null}
+  </View>
+)
+
+export function MonthWheelPicker({ value, ...props }) {
+  return <DayWheelPicker {...props} value={value?.startOf?.('month') ?? value} renderDate={renderHiddenDate} />
+}

package/src/components/inputs/dateWheelPicker/QuarterWheelPicker.js

@@ -0,0 +1,61 @@
+import { useMemo } from 'react'
+import dayjs from 'dayjs'
+
+import { ClearLink } from '../../actions/ClearLink'
+import { View } from '../../structure'
+import { WheelPicker } from '../WheelPicker'
+
+const QUARTERS = [
+  { value: 1, label: 'Q1' },
+  { value: 2, label: 'Q2' },
+  { value: 3, label: 'Q3' },
+  { value: 4, label: 'Q4' },
+]
+
+function getYearOptions(min, max) {
+  const minYear = min ? dayjs(min).year() : dayjs().year() - 100
+  const maxYear = max ? dayjs(max).year() : dayjs().year() + 100
+  const options = []
+  for (let y = minYear; y <= maxYear; y++) options.push({ value: y, label: String(y) })
+  return options
+}
+
+export function QuarterWheelPicker({ value, onChange, min, max, allowClear }) {
+  const current = value ? dayjs(value) : dayjs()
+  const quarter = Math.floor(current.month() / 3) + 1
+  const year = current.year()
+
+  const yearOptions = useMemo(() => getYearOptions(min, max), [min, max])
+
+  const handleQuarterChange = (q) => {
+    onChange?.(
+      dayjs()
+        .year(year)
+        .month((q - 1) * 3)
+        .startOf('month')
+    )
+  }
+
+  const handleYearChange = (y) => {
+    onChange?.(
+      dayjs()
+        .year(y)
+        .month((quarter - 1) * 3)
+        .startOf('month')
+    )
+  }
+
+  return (
+    <View>
+      <View row>
+        <View flex>
+          <WheelPicker options={QUARTERS} value={quarter} onChange={handleQuarterChange} />
+        </View>
+        <View flex>
+          <WheelPicker options={yearOptions} value={year} onChange={handleYearChange} />
+        </View>
+      </View>
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
+    </View>
+  )
+}

package/src/components/inputs/dateWheelPicker/WeekWheelPicker.js

@@ -0,0 +1,66 @@
+import { useMemo } from 'react'
+import dayjs from 'dayjs'
+import weekOfYear from 'dayjs/esm/plugin/weekOfYear'
+
+import { ClearLink } from '../../actions/ClearLink'
+import { View } from '../../structure'
+import { WheelPicker } from '../WheelPicker'
+
+dayjs.extend(weekOfYear)
+
+function getWeekOptions(year) {
+  const options = []
+  let d = dayjs().year(year).startOf('year').startOf('week')
+
+  while (d.year() <= year) {
+    const weekStart = d
+    const weekEnd = d.endOf('week')
+    const label = `W${d.week()}  ${weekStart.format('MMM D')} - ${weekEnd.format('MMM D')}`
+    options.push({ value: d.week(), label, date: weekStart })
+    d = d.add(1, 'week')
+  }
+
+  return options
+}
+
+function getYearOptions(min, max) {
+  const minYear = min ? dayjs(min).year() : dayjs().year() - 100
+  const maxYear = max ? dayjs(max).year() : dayjs().year() + 100
+  const options = []
+  for (let y = minYear; y <= maxYear; y++) options.push({ value: y, label: String(y) })
+  return options
+}
+
+export function WeekWheelPicker({ value, onChange, min, max, allowClear }) {
+  const current = value ? dayjs(value) : dayjs()
+  const week = current.week()
+  const year = current.year()
+
+  const weekOptions = useMemo(() => getWeekOptions(year), [year])
+  const yearOptions = useMemo(() => getYearOptions(min, max), [min, max])
+
+  const handleWeekChange = (w) => {
+    const opt = weekOptions.find((o) => o.value === w)
+    if (opt) onChange?.(opt.date.startOf('week'))
+  }
+
+  const handleYearChange = (y) => {
+    const newWeeks = getWeekOptions(y)
+    const closest = newWeeks.find((o) => o.value === week) || newWeeks[0]
+    onChange?.(closest.date.startOf('week'))
+  }
+
+  return (
+    <View>
+      <View row>
+        <View flex>
+          <WheelPicker options={weekOptions} value={week} onChange={handleWeekChange} />
+        </View>
+        <View width={120}>
+          <WheelPicker options={yearOptions} value={year} onChange={handleYearChange} />
+        </View>
+      </View>
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
+    </View>
+  )
+}

package/src/components/inputs/dateWheelPicker/YearWheelPicker.js

@@ -0,0 +1,35 @@
+import { View } from '../../structure'
+import { DayWheelPicker } from './DayWheelPicker'
+
+let DatePickerDate, DatePickerMonth
+try {
+  const dp = require('@quidone/react-native-wheel-picker').DatePicker
+  DatePickerDate = dp.Date
+  DatePickerMonth = dp.Month
+} catch {
+  DatePickerDate = null
+  DatePickerMonth = null
+}
+
+const renderHiddenDate = () => (
+  <View width={0} hiddenOverflow pointerEvents="none">
+    {DatePickerDate ? <DatePickerDate /> : null}
+  </View>
+)
+
+const renderHiddenMonth = () => (
+  <View width={0} hiddenOverflow pointerEvents="none">
+    {DatePickerMonth ? <DatePickerMonth /> : null}
+  </View>
+)
+
+export function YearWheelPicker({ value, ...props }) {
+  return (
+    <DayWheelPicker
+      {...props}
+      value={value?.startOf?.('year') ?? value}
+      renderDate={renderHiddenDate}
+      renderMonth={renderHiddenMonth}
+    />
+  )
+}

package/src/components/inputs/index.js

@@ -21,3 +21,7 @@ export * from './SegmentedPicker'
 export * from './Editable'
 export * from './upload/Upload'
 export * from './UploadInput'
+export * from './WheelPicker'
+export * from './dateWheelPicker/DateWheelPicker'
+export * from './NumberWheelInput'
+export * from './NumberWheelPicker'