@neko-os/ui 0.4.0 → 0.5.1

package/src/components/carousel/CarouselSlider.native.js

@@ -0,0 +1,121 @@
+import React from 'react'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, runOnJS } from 'react-native-reanimated'
+
+import { View } from '../structure/View'
+import { useCarousel } from './CarouselHandler'
+
+function SlideContent({ item }) {
+  const Content = React.useMemo(
+    () => item.render || item.renderContent || item.Content,
+    [item.render, item.renderContent, item.Content]
+  )
+  return Content ? <Content /> : null
+}
+
+function clampIndex(index, count, loop) {
+  'worklet'
+  if (loop) return ((index % count) + count) % count
+  return Math.max(0, Math.min(index, count - 1))
+}
+
+export function CarouselSlider() {
+  const { items, activeIndex, itemsCount, draggable, goTo, afterChange, pauseAutoplay, resumeAutoplay, loop } =
+    useCarousel()
+
+  const [slideWidth, setSlideWidth] = React.useState(0)
+  const translateX = useSharedValue(0)
+  const gestureStartX = useSharedValue(0)
+  const prevItemsRef = React.useRef(items)
+  const gestureAnimatingRef = React.useRef(false)
+
+  const setGestureAnimating = React.useCallback((v) => {
+    gestureAnimatingRef.current = v
+  }, [])
+
+  React.useEffect(() => {
+    if (slideWidth > 0) {
+      if (prevItemsRef.current !== items) {
+        prevItemsRef.current = items
+        translateX.value = -activeIndex * slideWidth
+      } else if (gestureAnimatingRef.current) {
+        // Gesture onEnd already animating — skip to avoid double animation
+        gestureAnimatingRef.current = false
+      } else {
+        translateX.value = withTiming(-activeIndex * slideWidth, { duration: 300 }, (finished) => {
+          if (finished && afterChange) runOnJS(afterChange)(items?.[activeIndex]?.key, activeIndex)
+        })
+      }
+    }
+  }, [activeIndex, slideWidth, items])
+
+  const onLayout = React.useCallback((e) => {
+    setSlideWidth(e.nativeEvent.layout.width)
+  }, [])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }))
+
+  if (!items?.length) return null
+
+  const minTranslate = -(itemsCount - 1) * slideWidth
+  const maxTranslate = 0
+
+  const panGesture = Gesture.Pan()
+    .activeOffsetX([-10, 10])
+    .failOffsetY([-10, 10])
+    .onStart(() => {
+      gestureStartX.value = translateX.value
+      runOnJS(pauseAutoplay)()
+    })
+    .onUpdate((e) => {
+      const raw = gestureStartX.value + e.translationX
+      if (loop) {
+        translateX.value = raw
+      } else {
+        // Rubber band resistance at edges
+        if (raw > maxTranslate) {
+          translateX.value = maxTranslate + (raw - maxTranslate) * 0.3
+        } else if (raw < minTranslate) {
+          translateX.value = minTranslate + (raw - minTranslate) * 0.3
+        } else {
+          translateX.value = raw
+        }
+      }
+    })
+    .onEnd((e) => {
+      const threshold = slideWidth * 0.25
+      let targetIndex = activeIndex
+
+      if (e.translationX < -threshold || e.velocityX < -500) {
+        targetIndex = activeIndex + 1
+      } else if (e.translationX > threshold || e.velocityX > 500) {
+        targetIndex = activeIndex - 1
+      }
+
+      const clamped = clampIndex(targetIndex, itemsCount, loop)
+      translateX.value = withTiming(-clamped * slideWidth, { duration: 300 }, (finished) => {
+        if (finished && afterChange) runOnJS(afterChange)(items?.[clamped]?.key, clamped)
+      })
+      runOnJS(setGestureAnimating)(true)
+      runOnJS(goTo)(targetIndex)
+      runOnJS(resumeAutoplay)()
+    })
+
+  const track = (
+    <Animated.View style={[{ flexDirection: 'row', width: slideWidth * itemsCount }, animatedStyle]}>
+      {items.map((item) => (
+        <View key={item.key} style={{ width: slideWidth }}>
+          <SlideContent item={item} />
+        </View>
+      ))}
+    </Animated.View>
+  )
+
+  return (
+    <View hiddenOverflow fullW onLayout={onLayout}>
+      {draggable ? <GestureDetector gesture={panGesture}>{track}</GestureDetector> : track}
+    </View>
+  )
+}

package/src/components/carousel/InfiniteCarousel.js

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { Carousel } from './Carousel'
+
+function buildItems(value, min, max, renderSlideRef) {
+  const items = []
+  if (min === undefined || value - 1 >= min) {
+    items.push({ key: value - 1, render: () => renderSlideRef.current(value - 1) })
+  }
+  items.push({ key: value, render: () => renderSlideRef.current(value) })
+  if (max === undefined || value + 1 <= max) {
+    items.push({ key: value + 1, render: () => renderSlideRef.current(value + 1) })
+  }
+  return items
+}
+
+export function InfiniteCarousel({ value, onChange, renderSlide, min, max, ...carouselProps }) {
+  const renderSlideRef = React.useRef(renderSlide)
+  renderSlideRef.current = renderSlide
+
+  const [items, setItems] = React.useState(() => buildItems(value, min, max, renderSlideRef))
+  const [activeKey, setActiveKey] = React.useState(value)
+
+  React.useEffect(() => {
+    setItems(buildItems(value, min, max, renderSlideRef))
+    setActiveKey(value)
+  }, [value, min, max])
+
+  const handleChange = React.useCallback((key) => {
+    setActiveKey(key)
+  }, [])
+
+  const handleAfterChange = React.useCallback(
+    (key) => {
+      if (key !== value) onChange?.(key)
+    },
+    [value, onChange]
+  )
+
+  return (
+    <Carousel
+      items={items}
+      activeKey={activeKey}
+      onChange={handleChange}
+      afterChange={handleAfterChange}
+      draggable
+      {...carouselProps}
+    />
+  )
+}

package/src/components/carousel/index.js

@@ -0,0 +1,6 @@
+export * from './CarouselHandler'
+export * from './Carousel'
+export * from './CarouselSlider'
+export * from './CarouselDots'
+export * from './CarouselArrows'
+export * from './InfiniteCarousel'

package/src/components/form/Form.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { FormWrapperComponent } from './FormWrapperComponent'
+import { KeyboardDismissButton } from '../keyboard/KeyboardDismissButton'
 import { LoadingView } from '../state/LoadingView'
 import { useNewForm } from './useNewForm'
 
@@ -24,6 +25,7 @@ export function Form({ form, onSubmit, onValuesChange, initialValues, children,
       <LoadingView active={loading} noWrapper>
         <FormWrapperComponent form={form} onSubmit={onSubmit} gap="md" {...props}>
           {children}
+          <KeyboardDismissButton />
         </FormWrapperComponent>
       </LoadingView>
     </FormContext.Provider>

package/src/components/index.js

@@ -7,6 +7,7 @@ export * from './modals'
 export * from './text'
 export * from './helpers'
 export * from './inputs'
+export * from './keyboard'
 export * from './state'
 export * from './layout'
 export * from './table'
@@ -18,3 +19,4 @@ export * from './theme'
 export * from './sections'
 export * from './filter'
 export * from './steps'
+export * from './carousel'

package/src/components/inputs/DateInput.js

@@ -48,6 +48,7 @@ export function DateInput({
   type = 'day',
   format,
   startsOpen,
+  allowClear,
   useBottomDrawer = { native: true, sm: true, md: true },
   ...props
 }) {
@@ -91,7 +92,7 @@ export function DateInput({
       trigger="click"
       startsOpen={startsOpen}
       placement={placement || 'bottomLeft'}
-      snapPoints={[350]}
+      snapPoints={[450]}
       useBottomDrawer={useBottomDrawer}
       bottomDrawerProps={{ contentProps: { padding: 'md' } }}
       watch={[value?.format?.('YYYYMMDD')]}
@@ -103,6 +104,8 @@ export function DateInput({
               handleChange(v)
               onClose()
             }}
+            width={useBottomDrawer ? '100%' : 275}
+            allowClear={allowClear}
             {...validations}
             type={type}
           />

package/src/components/inputs/InputWrapper.js

@@ -65,8 +65,7 @@ export function InputWrapper({
     <View
       className="neko-input-wrapper"
       height={multiline ? undefined : size}
-      minHeight={multiline ? size : undefined}
-      paddingV={multiline ? 'sm' : undefined}
+      minHeight={multiline ? 1.5 * size : undefined}
       onPress={handlePress}
       borderColor={borderColor}
       onMouseEnter={() => setHover(true)}

package/src/components/inputs/Select.js

@@ -2,6 +2,7 @@ import { dissoc } from 'ramda'
 import React from 'react'
 
 import { Icon, IconLabel } from '../presentation'
+import { KeyboardDismissButton } from '../keyboard'
 import { Link } from '../actions'
 import { LinkInput } from './LinkInput'
 import { Picker, getOptionLabel, searchOptions } from './Picker'
@@ -134,6 +135,8 @@ export function Select({
       maxHeight={popoverMaxHeight}
       {...popoverProps}
       renderContent={({ onClose }) => (
+        <>
+        {useBottomDrawer && useSearch && <KeyboardDismissButton />}
         <Picker
           row={false}
           options={searchOptions(options, search, { labelKey })}
@@ -152,21 +155,21 @@ export function Select({
           }}
           {...pickerProps}
           renderHeader={
-            useBottomDrawer && useSearch
-              ? () => (
-                  <>
-                    <View padding="md" paddingB="xs">
-                      <TextInput
-                        prefixIcon="search-line"
-                        prefixIconColor="text4"
-                        value={search}
-                        onChange={handleChangeSearch}
-                      />
-                    </View>
-                    {renderHeader?.()}
-                  </>
-                )
-              : renderHeader
+            useBottomDrawer && useSearch ? (
+              <>
+                <View padding="md" paddingB="xs">
+                  <TextInput
+                    prefixIcon="search-line"
+                    prefixIconColor="text4"
+                    value={search}
+                    onChange={handleChangeSearch}
+                  />
+                </View>
+                {renderHeader?.()}
+              </>
+            ) : (
+              renderHeader
+            )
           }
           renderOption={({ option, selected, onChange }) => (
             <Link
@@ -187,6 +190,7 @@ export function Select({
             </Link>
           )}
         />
+        </>
       )}
     >
       <Input

package/src/components/inputs/TextInput.js

@@ -1,9 +1,11 @@
 import { AbsTextInput } from '../../abstractions/TextInput'
 import { InputWrapper } from './InputWrapper'
 import { useColors } from '../../theme/ThemeHandler'
+import { useSpaces } from '../../theme'
 
 export function TextInput({ onChange, multiline, rows, ...props }) {
   const colors = useColors()
+  const spaces = useSpaces()
 
   const STYLE = {
     width: '100%',
@@ -11,10 +13,9 @@ export function TextInput({ onChange, multiline, rows, ...props }) {
     background: 'transparent',
     outline: 'none',
     color: colors.text,
-    // fontFamily: 'inherit',
-    // fontSize: 'inherit',
-    // lineHeight: 'inherit',
-    ...(multiline ? { resize: 'none' } : { height: '100%' }),
+    flex: 1,
+    height: '100%',
+    ...(multiline ? { paddingTop: spaces.sm, resize: 'none', flex: 1, textAlignVertical: 'top' } : {}),
   }
 
   return (

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

@@ -2,8 +2,10 @@ import React from 'react'
 import dayjs from 'dayjs'
 
 import { CalendarNav } from '../../calendar/CalendarNav'
+import { ClearLink } from '../../actions/ClearLink'
 import { Col } from '../../structure/Col'
 import { Grid } from '../../structure/Row'
+import { InfiniteCarousel } from '../../carousel/InfiniteCarousel'
 import { Link } from '../../actions/Link'
 import { Text } from '../../text/Text'
 import { View } from '../../structure/View'
@@ -11,33 +13,29 @@ import { WeekDaysBar } from '../../calendar/WeekDaysBar'
 import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
 import { useCalendarDays } from '../../calendar/_helpers/calendarDays'
 
-export function DayPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
-  if (!!value) value = dayjs(value)
-  const [localValue, setLocalValue] = React.useState(value)
-  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value || undefined).startOf('month'))
-  value = value === undefined ? localValue : value
-
-  React.useEffect(() => {
-    setLocalValue(value)
-    if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
-  }, [value?.day?.(), value?.month?.(), value?.year?.()])
+function toMonthValue(date) {
+  return date.year() * 12 + date.month()
+}
 
-  const handleChange = (v) => {
-    setLocalValue(v)
-    onChange?.(v)
-  }
+function fromMonthValue(v) {
+  return dayjs()
+    .year(Math.floor(v / 12))
+    .month(v % 12)
+    .startOf('month')
+}
 
-  const { cells } = useCalendarDays(currentMonth)
+const MonthDays = React.memo(function MonthDays({ monthValue, selectedKey, onSelect, min, max, onCheckDisabled }) {
+  const month = fromMonthValue(monthValue)
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
+  const { cells } = useCalendarDays(month)
 
   return (
-    <View className="neko-day-picker" width={275} {...props}>
-      <CalendarNav value={currentMonth} onChange={setCurrentMonth} />
+    <View>
       <WeekDaysBar />
-
       <Grid className="neko-day-picker-days" colSpan={24 / 7} gap="sm">
         {cells.map((day, i) => {
-          const dateVal = currentMonth.date(day)
-          const isActive = !!value && !!day && dateVal.isSame(value, 'day')
+          const dateVal = month.date(day)
+          const isActive = !!selectedValue && !!day && dateVal.isSame(selectedValue, 'day')
           const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
 
           return (
@@ -47,7 +45,7 @@ export function DayPicker({ value, onChange, min, max, onCheckDisabled, ...props
                 fullW
                 center
                 br="md"
-                onPress={() => !!day && handleChange(dateVal)}
+                onPress={() => !!day && onSelect(dateVal)}
                 bg={isActive && 'primary'}
                 disabled={disabled}
               >
@@ -61,4 +59,54 @@ export function DayPicker({ value, onChange, min, max, onCheckDisabled, ...props
       </Grid>
     </View>
   )
+})
+
+export function DayPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
+  if (!!value) value = dayjs(value)
+  const [localValue, setLocalValue] = React.useState(value)
+  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value || undefined).startOf('month'))
+  value = value === undefined ? localValue : value
+
+  React.useEffect(() => {
+    setLocalValue(value)
+    if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
+  }, [value?.day?.(), value?.month?.(), value?.year?.()])
+
+  const handleChange = React.useCallback(
+    (v) => {
+      setLocalValue(v)
+      onChange?.(v)
+    },
+    [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) => (
+    <MonthDays
+      monthValue={v}
+      selectedKey={selectedKey}
+      onSelect={handleChange}
+      min={min}
+      max={max}
+      onCheckDisabled={onCheckDisabled}
+    />
+  )
+
+  return (
+    <View className="neko-day-picker" width={275} maxW={350} {...props}>
+      <CalendarNav value={currentMonth} onChange={setCurrentMonth} />
+      <InfiniteCarousel
+        value={monthValue}
+        onChange={(v) => setCurrentMonth(fromMonthValue(v))}
+        renderSlide={renderSlide}
+        min={minMonth}
+        max={maxMonth}
+      />
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
+    </View>
+  )
 }

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

@@ -2,9 +2,11 @@ import React from 'react'
 import dayjs from 'dayjs'
 
 import { CalendarNav } from '../../calendar/CalendarNav'
+import { ClearLink } from '../../actions/ClearLink'
 import { Col } from '../../structure/Col'
 import { Divider } from '../../helpers'
 import { Grid } from '../../structure/Row'
+import { InfiniteCarousel } from '../../carousel/InfiniteCarousel'
 import { Link } from '../../actions/Link'
 import { Text } from '../../text/Text'
 import { View } from '../../structure/View'
@@ -12,7 +14,39 @@ import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
 
 const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
 
-export function MonthPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+const MonthGrid = React.memo(function MonthGrid({ year, selectedKey, onSelect, min, max, onCheckDisabled }) {
+  const yearDate = dayjs().year(year).startOf('year')
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
+
+  return (
+    <Grid colSpan={8} gap="xs">
+      {months.map((month) => {
+        const dateVal = yearDate.month(month)
+        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'month')
+        const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+        return (
+          <Col key={month}>
+            <Link
+              fullW
+              br="md"
+              padding="sm"
+              onPress={() => onSelect(dateVal)}
+              bg={isActive && 'primary'}
+              disabled={disabled}
+            >
+              <Text text2={!isActive} strong={isActive} center>
+                {dateVal.format('MMM')}
+              </Text>
+            </Link>
+          </Col>
+        )
+      })}
+    </Grid>
+  )
+})
+
+export function MonthPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
   const [currentYear, setCurrentYear] = React.useState(() => dayjs(value || undefined).startOf('year'))
   value = value === undefined ? localValue : value
@@ -22,41 +56,36 @@ export function MonthPicker({ value, onChange, min, max, onCheckDisabled, ...pro
     if (value?.isValid?.()) setCurrentYear(value.startOf('year'))
   }, [value?.month?.(), value?.year?.()])
 
-  const handleChange = (v) => {
-    const newValue = v.startOf('month')
-    setLocalValue(newValue)
-    onChange?.(newValue)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      const newValue = v.startOf('month')
+      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) => (
+    <MonthGrid year={v} selectedKey={selectedKey} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+  )
 
   return (
     <View className="neko-day-picker" width={275} {...props}>
       <CalendarNav value={currentYear} onChange={setCurrentYear} level="year" />
       <Divider />
-
-      <Grid colSpan={8} gap="xs">
-        {months.map((month) => {
-          const dateVal = currentYear.month(month)
-          const isActive = !!value && dateVal.isSame(value, 'week')
-          const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
-
-          return (
-            <Col key={month}>
-              <Link
-                fullW
-                br="md"
-                padding="sm"
-                onPress={() => handleChange(dateVal)}
-                bg={isActive && 'primary'}
-                disabled={disabled}
-              >
-                <Text text2={!isActive} strong={isActive} center>
-                  {dateVal.format('MMM')}
-                </Text>
-              </Link>
-            </Col>
-          )
-        })}
-      </Grid>
+      <InfiniteCarousel
+        value={yearValue}
+        onChange={(v) => setCurrentYear(dayjs().year(v).startOf('year'))}
+        renderSlide={renderSlide}
+        min={minYear}
+        max={maxYear}
+      />
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
     </View>
   )
 }