@neko-os/ui 0.0.8 → 0.0.10

package/src/components/helpers/LazyAction.js

@@ -0,0 +1,22 @@
+import { is } from 'ramda'
+import React from 'react'
+
+import { LazyRender } from './LazyRender'
+
+function InnerContent({ action }) {
+  React.useEffect(() => {
+    action?.()
+  }, [])
+
+  return false
+}
+
+export function LazyAction({ children, disabled, action, minHeight: initMinHeight, ...props }) {
+  if (!action || !is(Function, action) || !!disabled) return false
+
+  return (
+    <LazyRender whenVisible minHeight={2} {...props}>
+      <InnerContent action={action} />
+    </LazyRender>
+  )
+}

package/src/components/helpers/LazyRender.js

@@ -42,13 +42,13 @@ export function LazyRender({
   }, [])
 
   React.useEffect(() => {
-    if (ref.current && open) {
+    if (ref.current) {
       setMinHeight(ref.current.offsetHeight)
     }
   }, [open])
 
   return (
-    <View className="neko-lazy-render" {...props} minHeight={minHeight} ref={ref}>
+    <View className="neko-lazy-render" flex="0 0 auto" {...props} minHeight={minHeight} ref={ref}>
       {open ? children : null}
     </View>
   )

package/src/components/helpers/LazyRender.native.js

@@ -51,7 +51,7 @@ export function LazyRender({
   }, [open])
 
   return (
-    <View className="neko-lazy-render" {...props} minHeight={minHeight} ref={ref}>
+    <View className="neko-lazy-render" flex="0 0 auto" {...props} minHeight={minHeight} ref={ref}>
       {open ? children : null}
     </View>
   )

package/src/components/helpers/index.js

@@ -4,3 +4,4 @@ export * from './VerticalView'
 export * from './PortalHandler'
 export * from './Portal'
 export * from './LazyRender'
+export * from './ConditionalLazyRender'

package/src/components/index.js

@@ -12,3 +12,5 @@ export * from './table'
 export * from './feedback'
 export * from './calendar'
 export * from './list'
+export * from './tabs'
+export * from './theme'

package/src/components/inputs/DateInput.js

@@ -30,6 +30,14 @@ export function getDateInputDefaultFormat(type) {
   }
 }
 
+function FullWidthInputWrapper({ ref, ...props }) {
+  return (
+    <View fullW ref={ref}>
+      <MaskInput {...props} />
+    </View>
+  )
+}
+
 export function DateInput({
   value,
   onChange,
@@ -75,7 +83,7 @@ export function DateInput({
     setInputValue(!!value ? dayjs(value).format(format) : '')
   }, [value])
 
-  const Input = useBottomDrawer ? LinkInput : MaskInput
+  const Input = useBottomDrawer ? LinkInput : FullWidthInputWrapper
 
   return (
     <Popover
@@ -83,6 +91,8 @@ export function DateInput({
       placement={placement || 'bottomLeft'}
       snapPoints={[350]}
       useBottomDrawer={useBottomDrawer}
+      bottomDrawerProps={{ contentProps: { padding: 'md' } }}
+      watch={[value?.format?.('YYYYMMDD')]}
       renderContent={({ onClose }) => (
         <View flex centerH>
           <DatePicker

package/src/components/inputs/InputWrapper.js

@@ -10,7 +10,6 @@ import { useSizeConverter } from '../../modifiers/sizeConverter'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
 const DEFAULT_PROPS = {
-  fullW: '100%', //
   paddingH: 'sm',
   bg: 'overlayBG',
   border: true,

package/src/components/inputs/LinkInput.js

@@ -4,12 +4,12 @@ import { Text } from '../text/Text'
 import { View } from '../structure/View'
 import { useColors } from '../../theme/ThemeHandler'
 
-export function LinkInput({ onPress, onClick, placeholder, value, disabled, ...props }) {
+export function LinkInput({ ref, onPress, onClick, placeholder, value, disabled, ...props }) {
   return (
-    <Link onPress={!props.loading ? onPress || onClick : undefined} flex fullW centerV disabled={disabled}>
+    <Link ref={ref} onPress={!props.loading ? onPress || onClick : undefined} flex fullW centerV disabled={disabled}>
       <InputWrapper {...props}>
         <View centerV flex fullW>
-          <Text color={!!value ? 'text' : 'text_op30'} label={value || placeholder} />
+          <Text color={!!value ? 'text' : 'text_op30'} label={value || placeholder} numberOfLines={1} />
         </View>
       </InputWrapper>
     </Link>

package/src/components/inputs/NumberInput.js

@@ -0,0 +1,105 @@
+import { endsWith, is } from 'ramda'
+import React from 'react'
+
+import { TextInput } from './TextInput'
+
+function isValidNumber(stringValue, options = {}) {
+  const { min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, useInt, precision } = options
+
+  if (stringValue === null || stringValue === undefined || stringValue === '') return true
+
+  if (isNaN(stringValue)) return false
+  const numericValue = parseFloat(stringValue)
+
+  if (numericValue < min) return false
+  if (numericValue > max) return false
+
+  const decimalPart = stringValue?.toString()?.split?.('.')[1]
+
+  if (decimalPart && is(Number, precision)) {
+    if (decimalPart.length > precision) return false
+  }
+
+  return true
+}
+
+export function formatNumericValue(newValue, prevValue, options = {}) {
+  const { min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, useInt, precision } = options
+  let numericValue = newValue
+
+  // Handle number to string conversion
+  if (is(Number, newValue)) newValue = newValue.toString()
+
+  // Handle null/undefined/empty
+  if (newValue === null || newValue === undefined || newValue === '') return null
+
+  // Normalize decimal separator (comma to dot)
+  if (is(String, newValue)) newValue = newValue.replace(',', '.')
+
+  // Allow negative sign as intermediate state
+  if (newValue === '-') return newValue
+
+  if (useInt) {
+    // For integers, don't allow decimal points
+    if (newValue.includes('.')) return prevValue
+    numericValue = parseInt(newValue, 10)
+  } else {
+    // For floats, handle decimal points
+    const dotsCount = newValue.split('.').length
+    if (dotsCount > 2) return prevValue
+
+    // Allow "1." as intermediate state
+    if (endsWith('.', newValue)) return newValue
+
+    numericValue = parseFloat(newValue)
+  }
+
+  if (isNaN(numericValue)) return prevValue
+
+  // Check min/max
+  if (numericValue < min) return min
+  if (numericValue > max) return max
+
+  // Handle decimal precision
+  const decimalPart = newValue.split('.')[1]
+  if (decimalPart && !!precision) {
+    // Exceeded precision, reject
+    if (decimalPart.length > precision) return prevValue
+    // Within precision, keep as string to preserve "1.0" while typing "1.05"
+    return newValue
+  }
+
+  // No decimals, return as number
+  return numericValue
+}
+
+export function NumberInput({ onChange, value, useInt, precision, min, max, error, ...props }) {
+  const [hasError, setHasError] = React.useState(false)
+  const [inputValue, setInputValue] = React.useState(value)
+  const [localValue, setLocalValue] = React.useState(value)
+  React.useEffect(() => setInputValue(value), [value])
+
+  if (useInt) precision = 0
+  if (!useInt && precision === 0) useInt = true
+  const opts = { useInt, precision, min, max }
+
+  return (
+    <TextInput
+      onChange={(newValue) => {
+        const numericValue = formatNumericValue(newValue, localValue, opts)
+        setInputValue(newValue?.toString() || '')
+        setLocalValue(numericValue)
+        onChange?.(numericValue)
+        setHasError(!isValidNumber(newValue, opts))
+      }}
+      onBlur={() => {
+        setInputValue(localValue)
+        setHasError(!isValidNumber(localValue, opts))
+      }}
+      value={inputValue}
+      keyboardType={useInt ? 'number-pad' : 'decimal-pad'}
+      error={error || hasError}
+      {...props}
+    />
+  )
+}

package/src/components/inputs/Picker.js

@@ -1,10 +1,35 @@
+import { is } from 'ramda'
 import React from 'react'
 
 import { Col } from '../structure/Col'
+import { FlatList } from '../list/FlatList'
 import { LoadingView } from '../state/LoadingView'
 import { Row } from '../structure/Row'
+import { normalizeString } from '../../helpers/string'
 import { useOptions } from '../../helpers/options'
 
+export function getOption(options, value, config = {}) {
+  if (!options?.length) return value
+  const option = options.find((option) => compareOptionsValues(option, value, config))
+  return option || value
+}
+
+export function getOptionLabel(options, value, config = {}) {
+  if (!options?.length) return ''
+  const { labelKey } = config
+  const selectedOption = getOption(options, value, config)
+  const label = selectedOption?.[labelKey] || value
+  if (!is(String, label)) return ''
+  return label
+}
+
+export function searchOptions(options, search, config = {}) {
+  const { labelKey } = config
+  if (!options?.length) return options
+  if (!search) return options
+  return options.filter((item) => normalizeString(item?.[labelKey])?.includes(normalizeString(search)))
+}
+
 function isSelected(value, option, config = {}) {
   return !!config.multiple
     ? value?.some?.((item) => compareOptionsValues(item, option, config))
@@ -53,12 +78,33 @@ function PickerItem({ option, onChange, value, renderOption, useRawOption, multi
   const handleChange = () => {
     const formatChangeValueFunc = multiple ? formatMultipleChangeValue : formatSingleChangeValue
     const formattedValue = formatChangeValueFunc(option, value, { selected, useRawOption, valueKey })
-    onChange(formattedValue)
+    onChange(formattedValue, option)
   }
 
   return <Col {...props}>{renderOption({ option, selected, onChange: handleChange, valueKey, labelKey })}</Col>
 }
 
+function DefaultPickerWrapper({ renderItem, options, ...props }) {
+  return (
+    <Row className="neko-picker" gap="md" {...props}>
+      {options?.map?.((option) => renderItem(option))}
+    </Row>
+  )
+}
+
+function FlatListPickerWrapper({ renderItem, options, valueKey, ...props }) {
+  return (
+    <FlatList
+      keyExtractor={(i) => i[valueKey]}
+      data={options}
+      divider
+      fullH
+      renderItem={({ item: option }) => renderItem(option)}
+      {...props}
+    />
+  )
+}
+
 export function Picker({
   value,
   initialValue,
@@ -68,23 +114,24 @@ export function Picker({
   renderOption,
   colProps,
   useRawOption,
+  useFlatList,
   multiple,
   valueKey,
   labelKey,
+  Wrapper,
   ...rootProps
 }) {
   const [localValue, setLocalValue] = React.useState(initialValue)
   value = value === undefined ? localValue : value
   onChange = onChange || setLocalValue
+  const { options: finalOptions, isFirstLoad } = useOptions(options, {})
 
-  const handleChange = (v) => {
+  const handleChange = (v, option) => {
     if (!!disabled) return
     setLocalValue(v)
-    onChange?.(v)
+    onChange?.(v, option)
   }
 
-  const { options: finalOptions, isFirstLoad } = useOptions(options, {})
-
   valueKey = valueKey || 'value'
   labelKey = labelKey || 'label'
 
@@ -93,10 +140,15 @@ export function Picker({
     return false
   }
 
+  Wrapper = Wrapper || (useFlatList ? FlatListPickerWrapper : DefaultPickerWrapper)
+
   return (
     <LoadingView active={isFirstLoad} replaceChildren>
-      <Row className="neko-picker" gap="md" {...rootProps}>
-        {finalOptions?.map?.((option) => (
+      <Wrapper
+        {...rootProps}
+        valueKey={valueKey}
+        options={finalOptions}
+        renderItem={(option) => (
           <PickerItem
             key={option.value}
             option={option}
@@ -109,8 +161,8 @@ export function Picker({
             labelKey={labelKey}
             {...colProps}
           />
-        ))}
-      </Row>
+        )}
+      />
     </LoadingView>
   )
 }

package/src/components/inputs/Radio.js

@@ -33,7 +33,7 @@ export function Radio({ value, onChange, disabled, initialValue, ...rootProps })
         size={sizeCode}
         gap={8}
         content={
-          <View height={size * 0.65} ratio={1} border={2} padding={3} borderColor={color} br={size} center>
+          <View height={size * 0.65} ratio={1} border={2} padding={2} borderColor={color} br={size} center>
             {!!value && <View bg={color} br={size} flex fullW fullH />}
           </View>
         }

package/src/components/inputs/RateInput.js

@@ -0,0 +1,62 @@
+import { pipe, range, is } from 'ramda'
+import React from 'react'
+
+import { Icon } from '../presentation'
+import { Link } from '../actions/Link'
+import { LoadingView } from '../state'
+import { View } from '../structure/View'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  color: 'primary',
+  inactiveColor: 'text4_op50',
+  max: 5,
+  icon: 'star-fill',
+}
+
+export function RateInput({ value, onChange, disabled, loading, ...rootProps }) {
+  let [{ size, sizeCode, color }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('RateInput'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const [localValue, setLocalValue] = React.useState(value)
+  React.useEffect(() => setLocalValue(value), [value])
+
+  const { icon, max, inactiveColor, ...props } = formattedProps
+
+  const handleChange = (v) => {
+    if (!!disabled) return
+    const newValue = v === localValue ? null : v
+    setLocalValue(newValue)
+    onChange?.(newValue)
+  }
+
+  return (
+    <LoadingView active={loading} width="fit-content">
+      <View className="neko-rate-input" row gap="xs" centerV minHeight={sizeCode} {...props}>
+        {range(1, max + 1).map((i) => {
+          const active = localValue >= i
+
+          let finalIcon = icon
+          if (is(Function, icon)) finalIcon = icon?.({ value: localValue, optionValue: i, active })
+
+          let finalColor = color
+          if (is(Function, color)) finalColor = color?.({ value: localValue, optionValue: i, active })
+
+          return (
+            <Link onPress={() => handleChange(i)} disabled={disabled} center key={i}>
+              <Icon name={finalIcon} size={moveScale(sizeCode, 1)} color={active ? finalColor : inactiveColor} />
+            </Link>
+          )
+        })}
+      </View>
+    </LoadingView>
+  )
+}

package/src/components/inputs/SegmentedPicker.js

@@ -0,0 +1,62 @@
+import { pipe } from 'ramda'
+
+import { Button } from '../actions'
+import { Picker } from './Picker'
+import { View } from '../structure'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ sizeCode }]) => ({
+  gap: 1,
+  br: sizeCode,
+  minHeight: sizeCode,
+  bg: 'overlayBG',
+  padding: 2,
+  wrap: false,
+  row: true,
+  border: true,
+  buttonProps: {
+    fullH: true,
+    size: sizeCode,
+  },
+})
+
+function PickerWrapper({ renderItem, options, ...props }) {
+  return (
+    <View row>
+      <View {...props}>{options?.map?.((option) => renderItem(option))}</View>
+    </View>
+  )
+}
+
+export function SegmentedPicker({ ...rootProps }) {
+  const [{ sizeCode }, formattedProps] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('SegmentPicker'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { buttonProps, color, ...props } = formattedProps
+
+  return (
+    <Picker
+      className="neko-segmented-picker"
+      Wrapper={PickerWrapper}
+      {...props}
+      renderOption={({ option, selected, onChange, labelKey, ...props }) => (
+        <Button
+          label={option[labelKey]}
+          onPress={onChange}
+          color={selected ? color || 'primary' : rootProps?.bg || 'overlayBG'}
+          round={rootProps?.round}
+          textProps={{ strong: selected }}
+          opacity={!selected && 0.8}
+          {...option}
+          {...buttonProps}
+        />
+      )}
+    />
+  )
+}

package/src/components/inputs/Select.js

@@ -0,0 +1,189 @@
+import React from 'react'
+
+import { Icon, IconLabel } from '../presentation'
+import { Link } from '../actions'
+import { LinkInput } from './LinkInput'
+import { Picker, getOptionLabel, searchOptions } from './Picker'
+import { Popover } from '../structure/popover/Popover'
+import { TextInput } from './TextInput'
+import { View } from '../structure'
+import { useResponsiveValue } from '../../responsive'
+
+function FullWidthInputWrapper({ ref, ...props }) {
+  return (
+    <View fullW ref={ref}>
+      <TextInput {...props} />
+    </View>
+  )
+}
+
+export function Select({
+  value,
+  onChange,
+  onChangeSearch,
+  options,
+  placement,
+  placeholder,
+  initialLabel,
+  useBottomDrawer = { native: true, sm: true, md: true },
+  useSearch,
+  renderOption,
+  labelKey,
+  valueKey,
+  useRawOption,
+  multiple,
+  onEndReached,
+  renderFooter,
+  renderHeader,
+  pickerProps,
+  popoverProps,
+  popoverMaxHeight,
+  ...props
+}) {
+  const [focus, setFocus] = React.useState(false)
+  const [search, setSearch] = React.useState('')
+  const [inputValue, setInputValue] = React.useState(initialLabel || '')
+  const [localValue, setLocalValue] = React.useState(value)
+
+  labelKey = labelKey || pickerProps?.labelKey || 'label'
+  valueKey = valueKey || pickerProps?.valueKey || 'value'
+  useRawOption = useRawOption || pickerProps?.useRawOption
+  multiple = multiple || pickerProps?.multiple
+  onEndReached = onEndReached || pickerProps?.onEndReached
+  renderFooter = renderFooter || pickerProps?.renderFooter
+  renderHeader = renderHeader || pickerProps?.renderHeader
+  pickerProps = { ...pickerProps, labelKey, valueKey, useRawOption, multiple, onEndReached, renderFooter, renderHeader }
+
+  popoverMaxHeight = popoverMaxHeight || 300
+
+  useBottomDrawer = useResponsiveValue(useBottomDrawer)
+
+  value = value || localValue
+
+  const handleChange = React.useCallback(
+    (value, option) => {
+      if (!!multiple) {
+        setInputValue(value.map((item) => getOptionLabel(options, item, { valueKey, labelKey })).join(', '))
+      } else {
+        setInputValue(option?.[labelKey] || getOptionLabel(options, option, { valueKey, labelKey }))
+      }
+      setLocalValue(value)
+      onChange?.(value)
+    },
+    [labelKey, valueKey]
+  )
+
+  React.useEffect(() => {
+    if (!!multiple) {
+      setInputValue(value?.map?.((item) => getOptionLabel(options, item, { valueKey, labelKey })).join(', '))
+    } else {
+      const label = value?.[labelKey] || getOptionLabel(options, value, { valueKey, labelKey })
+      if (!!label || !value) setInputValue(label)
+    }
+  }, [value])
+
+  const handleChangeSearch = React.useCallback((v) => {
+    onChangeSearch?.(v)
+    setSearch(v)
+  }, [])
+
+  const Input = !useSearch || useBottomDrawer ? LinkInput : FullWidthInputWrapper
+  const valueWatcher = multiple && localValue
+
+  const finalRenderOption = React.useCallback(
+    (params) => {
+      if (!!renderOption) return renderOption(params)
+      const { option, labelKey, selected } = params
+      return <IconLabel {...option} label={option?.[labelKey]} flex strong={selected} />
+    },
+    [renderOption]
+  )
+
+  return (
+    <Popover
+      trigger="click"
+      placement={placement || 'bottomLeft'}
+      snapPoints={[450]}
+      useBottomDrawer={useBottomDrawer}
+      parentWidth
+      padding={0}
+      watch={[search, options, valueWatcher]}
+      unmountOnClose
+      maxHeight={popoverMaxHeight}
+      {...popoverProps}
+      renderContent={({ onClose }) => (
+        <>
+          {useBottomDrawer && useSearch && (
+            <View padding="md" paddingB="xs">
+              <TextInput
+                prefixIcon="search-line"
+                prefixIconColor="text4"
+                value={search}
+                onChange={handleChangeSearch}
+              />
+            </View>
+          )}
+          <Picker
+            row={false}
+            options={searchOptions(options, search, { labelKey })}
+            value={value}
+            gap={0}
+            maxHeight={!useBottomDrawer && popoverMaxHeight}
+            useFlatList
+            onlyOnScreen
+            itemMinHeight={30}
+            onChange={(v, option) => {
+              handleChange(v, option)
+              if (!multiple) onClose()
+            }}
+            {...pickerProps}
+            renderOption={({ option, selected, onChange }) => (
+              <Link
+                row
+                paddingH={useBottomDrawer ? 'md' : 'sm'}
+                paddingV="xs"
+                minHeight={useBottomDrawer ? 'xl' : 'md'}
+                gap="sm"
+                onMouseDown={(e) => !!multiple && e.preventDefault()}
+                onPress={onChange}
+                centerV
+                bg={selected && 'primary_op10'}
+              >
+                <View flex row>
+                  {finalRenderOption({ option, labelKey, selected })}
+                </View>
+                {selected && <Icon name="checkbox-circle-fill" primary />}
+              </Link>
+            )}
+          />
+        </>
+      )}
+    >
+      <Input
+        value={!!focus ? search : inputValue}
+        onChange={handleChangeSearch}
+        onFocus={() => {
+          handleChangeSearch('')
+          setFocus(true)
+        }}
+        onBlur={() => {
+          setTimeout(() => {
+            setFocus(false)
+          }, 200)
+        }}
+        // When the option to use tags presentation, use prefix to render the tags
+        // _prefix={
+        // multiple &&
+        // value?.length && (
+        // <Text>{value?.map((item) => getOptionLabel(options, item, { labelKey, valueKey })).join(', ')}</Text>
+        // )
+        // }
+        placeholder={(!multiple || !value?.length) && placeholder}
+        suffixIcon="arrow-down-s-fill"
+        suffixIconColor="text4"
+        fullW
+        {...props}
+      />
+    </Popover>
+  )
+}