@neko-os/ui 0.2.3 → 0.4.0

package/src/components/inputs/InputWrapper.js

@@ -27,6 +27,7 @@ export function InputWrapper({
   suffixIconColor,
   loading,
   error,
+  multiline,
   children,
   ref,
   ...rootProps
@@ -63,7 +64,9 @@ export function InputWrapper({
   return (
     <View
       className="neko-input-wrapper"
-      height={size}
+      height={multiline ? undefined : size}
+      minHeight={multiline ? size : undefined}
+      paddingV={multiline ? 'sm' : undefined}
       onPress={handlePress}
       borderColor={borderColor}
       onMouseEnter={() => setHover(true)}
@@ -71,17 +74,17 @@ export function InputWrapper({
       {...props}
     >
       {!!prefix && (
-        <View paddingV={5} fullHeight center>
+        <View paddingV={5} fullHeight={!multiline} center={!multiline}>
           {prefix}
         </View>
       )}
 
-      <View flex fullH>
+      <View flex fullH={!multiline}>
         {childWithProps}
       </View>
 
       {!!suffix && (
-        <View paddingV={5} fullHeight center>
+        <View paddingV={5} fullHeight={!multiline} center={!multiline}>
           {suffix}
         </View>
       )}

package/src/components/inputs/LinkInput.js

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

package/src/components/inputs/NumberInput.js

@@ -73,7 +73,8 @@ export function formatNumericValue(newValue, prevValue, options = {}) {
   return numericValue
 }
 
-export function NumberInput({ onChange, onBlur, value, useInt, precision, min, max, error, ...props }) {
+export function NumberInput({ onChange, onBlur, value, defaultValue, useInt, precision, min, max, error, ...props }) {
+  if (value === undefined || value === null) value = defaultValue ?? null
   const [hasError, setHasError] = React.useState(false)
   const [inputValue, setInputValue] = React.useState(value)
   const [localValue, setLocalValue] = React.useState(value)
@@ -81,7 +82,8 @@ export function NumberInput({ onChange, onBlur, value, useInt, precision, min, m
 
   if (useInt) precision = 0
   if (!useInt && precision === 0) useInt = true
-  const opts = { useInt, precision, min, max }
+  const opts = { useInt, precision }
+  const optsWithMinMax = { ...opts, min, max }
 
   return (
     <TextInput
@@ -91,11 +93,14 @@ export function NumberInput({ onChange, onBlur, value, useInt, precision, min, m
         setInputValue(newValue?.toString() || '')
         setLocalValue(numericValue)
         onChange?.(numericValue)
-        setHasError(!isValidNumber(newValue, opts))
+        setHasError(!isValidNumber(newValue, optsWithMinMax))
       }}
       onBlur={(e) => {
-        setInputValue(localValue?.toString() || '')
-        setHasError(!isValidNumber(localValue, opts))
+        const clamped = formatNumericValue(localValue, localValue, optsWithMinMax)
+        setLocalValue(clamped)
+        setInputValue(clamped?.toString() || '')
+        setHasError(!isValidNumber(clamped, optsWithMinMax))
+        onChange?.(clamped)
         onBlur?.(e)
       }}
       value={inputValue}

package/src/components/inputs/NumberRangeInput.js

@@ -0,0 +1,41 @@
+import { NumberInput } from './NumberInput'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+
+export function NumberRangeInput({
+  value,
+  onChange,
+  minProps,
+  maxProps,
+  placeholderMin = 'Min',
+  placeholderMax = 'Max',
+  separator = '–',
+  ...props
+}) {
+  const handleChangeMin = (min) => onChange?.({ ...value, min })
+  const handleChangeMax = (max) => onChange?.({ ...value, max })
+
+  return (
+    <View row centerV gap="sm">
+      <NumberInput
+        placeholder={placeholderMin}
+        value={value?.min}
+        onChange={handleChangeMin}
+        max={value?.max}
+        flex
+        {...props}
+        {...minProps}
+      />
+      <Text text4>{separator}</Text>
+      <NumberInput
+        placeholder={placeholderMax}
+        value={value?.max}
+        onChange={handleChangeMax}
+        min={value?.min}
+        flex
+        {...props}
+        {...maxProps}
+      />
+    </View>
+  )
+}

package/src/components/inputs/PasswordInput.js

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { Icon } from '../presentation/Icon'
+import { Link } from '../actions/Link'
+import { TextInput } from './TextInput'
+
+export function PasswordInput({ hideToggle, suffix, ...props }) {
+  const [visible, setVisible] = React.useState(false)
+
+  const toggle = !hideToggle ? (
+    <Link onPress={() => setVisible((v) => !v)}>
+      <Icon name={visible ? 'RiEyeOffLine' : 'RiEyeLine'} color="text3" />
+    </Link>
+  ) : null
+
+  return (
+    <TextInput
+      type={visible ? 'text' : 'password'}
+      secureTextEntry={!visible}
+      suffix={suffix || toggle}
+      {...props}
+    />
+  )
+}

package/src/components/inputs/Picker.js

@@ -10,13 +10,13 @@ import { normalizeString } from '../../helpers/string'
 import { useOptions } from '../../helpers/options'
 
 export function getOption(options, value, config = {}) {
-  if (!options?.length) return value
+  if (!Array.isArray(options) || !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 ''
+  if (!Array.isArray(options) || !options.length) return ''
   const { labelKey } = config
   const selectedOption = getOption(options, value, config)
   const label = selectedOption?.[labelKey] || value
@@ -144,7 +144,7 @@ export function Picker({
   Wrapper = Wrapper || (useFlatList ? FlatListPickerWrapper : DefaultPickerWrapper)
 
   return (
-    <LoadingView active={isFirstLoad} replaceChildren>
+    <LoadingView active={isFirstLoad} replaceChildren flex>
       <Wrapper
         {...rootProps}
         valueKey={valueKey}

package/src/components/inputs/Select.js

@@ -40,6 +40,8 @@ export function Select({
   popoverProps,
   popoverMaxHeight,
   snapPoints,
+  startsOpen,
+  onOpenChange,
   ...props
 }) {
   const [focus, setFocus] = React.useState(false)
@@ -70,7 +72,7 @@ export function Select({
 
   useBottomDrawer = useResponsiveValue(useBottomDrawer)
 
-  value = value || localValue
+  value = value ?? localValue
 
   const handleChange = React.useCallback(
     (value, option) => {
@@ -117,6 +119,11 @@ export function Select({
   return (
     <Popover
       trigger="click"
+      startsOpen={startsOpen}
+      onOpenChange={(open) => {
+        if (open) handleChangeSearch('')
+        onOpenChange?.(open)
+      }}
       placement={placement || 'bottomLeft'}
       snapPoints={snapPoints || [450]}
       useBottomDrawer={useBottomDrawer}
@@ -127,52 +134,59 @@ export function Select({
       maxHeight={popoverMaxHeight}
       {...popoverProps}
       renderContent={({ onClose }) => (
-          <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}
-            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
-                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>
-            )}
-          />
+        <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) {
+              setFocus(false)
+              onClose()
+            }
+          }}
+          {...pickerProps}
+          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
+              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

package/src/components/inputs/TextArea.js

@@ -0,0 +1,5 @@
+import { TextInput } from './TextInput'
+
+export function TextArea(props) {
+  return <TextInput multiline {...props} />
+}

package/src/components/inputs/TextInput.js

@@ -2,21 +2,31 @@ import { AbsTextInput } from '../../abstractions/TextInput'
 import { InputWrapper } from './InputWrapper'
 import { useColors } from '../../theme/ThemeHandler'
 
-export function TextInput({ onChange, ...props }) {
+export function TextInput({ onChange, multiline, rows, ...props }) {
   const colors = useColors()
 
   const STYLE = {
     width: '100%',
-    height: '100%',
     borderWidth: 0,
     background: 'transparent',
     outline: 'none',
     color: colors.text,
+    // fontFamily: 'inherit',
+    // fontSize: 'inherit',
+    // lineHeight: 'inherit',
+    ...(multiline ? { resize: 'none' } : { height: '100%' }),
   }
 
   return (
-    <InputWrapper {...props}>
-      <AbsTextInput style={STYLE} placeholderTextColor={colors.text_op30} {...props} onChange={onChange} />
+    <InputWrapper {...props} multiline={multiline}>
+      <AbsTextInput
+        style={STYLE}
+        placeholderTextColor={colors.text_op30}
+        {...props}
+        multiline={multiline}
+        rows={rows}
+        onChange={onChange}
+      />
     </InputWrapper>
   )
 }

package/src/components/inputs/UploadInput.js

@@ -0,0 +1,140 @@
+import { Icon, Image } from '../presentation'
+import { Link } from '../actions'
+import { LinkInput } from './LinkInput'
+import { Loading } from '../state'
+import { Text } from '../text'
+import { Upload } from './upload/Upload'
+import { View } from '../structure'
+
+function FilePreview({ value, ...props }) {
+  const isImage = value.type?.startsWith('image/')
+  if (!isImage) {
+    return (
+      <View {...props} bg="text4_op10" center>
+        <Icon name="file-line" />
+      </View>
+    )
+  }
+  return <Image src={value?.uri || value?.url} {...props} />
+}
+
+function ListItem({ value, remove, ...props }) {
+  const isDone = !value?.status || value?.status !== 'uploading'
+  const loading = value?.status === 'uploading'
+  const hasError = value?.status === 'error'
+
+  return (
+    <View row gap="sm" centerV border br="md" paddingR="md">
+      <FilePreview value={value} width={50} height={50} br="md" />
+      <Text label={value.name} flex />
+      {hasError && <Text label="Error" sm red />}
+      {loading && <Loading />}
+      {isDone && (
+        <Link onPress={() => remove(value)} padding="xs">
+          <Icon name="delete-bin-2-line" red xs />
+        </Link>
+      )}
+    </View>
+  )
+}
+
+function GridItem({ value, remove }) {
+  const loading = value?.status === 'uploading'
+  const hasError = value?.status === 'error'
+  const isDone = !value?.status || value?.status !== 'uploading'
+
+  return (
+    <View width={80} height={80} br="md" hiddenOverflow relative>
+      <FilePreview value={value} width={80} height={80} br="md" />
+      <View absolute top={0} right={0}>
+        {loading && (
+          <View center bg="backdrop_op70" br="md" padding="xs">
+            <Loading sm />
+          </View>
+        )}
+        {hasError && (
+          <View center bg="backdrop_op70" br="md" padding="xs">
+            <Icon name="error-warning-line" red />
+          </View>
+        )}
+        {isDone && (
+          <Link onPress={() => remove(value)} bg="backdrop_op70" padding="xs">
+            <Icon name="delete-bin-2-line" xxs red />
+          </Link>
+        )}
+      </View>
+    </View>
+  )
+}
+
+function AddTile({ isDragging, ...props }) {
+  return (
+    <Link
+      center
+      width={80}
+      height={80}
+      border
+      borderStyle="dashed"
+      br="md"
+      bg={isDragging ? 'primary_op10' : 'transparent'}
+      {...props}
+    >
+      <Icon name="add-line" />
+    </Link>
+  )
+}
+
+function DropArea({ placeholder, isDragging, ...props }) {
+  return (
+    <Link
+      center
+      gap="sm"
+      border
+      borderStyle="dashed"
+      padding="md"
+      minH={160}
+      br="md"
+      bg={isDragging ? 'primary_op10' : 'transparent'}
+      {...props}
+    >
+      <Icon name="upload-cloud-2-line" />
+      <Text label={placeholder} text4 center />
+    </Link>
+  )
+}
+
+function Content({ value, open, remove, isDragging, multiple, area, grid, maxCount, ...props }) {
+  const items = multiple ? value || [] : value ? [value] : []
+  const showAdd = multiple ? !maxCount || items.length < maxCount : !value
+
+  if (grid) {
+    return (
+      <View row wrap gap="sm">
+        {items.map((item) => (
+          <GridItem key={item._id} value={item} remove={remove} />
+        ))}
+        {showAdd && <AddTile onPress={open} isDragging={isDragging} />}
+      </View>
+    )
+  }
+
+  const placeholder = 'Upload file'
+  const link = area ? (
+    <DropArea onPress={open} placeholder={placeholder} isDragging={isDragging} {...props} />
+  ) : (
+    <LinkInput onPress={open} prefixIcon="upload-cloud-2-line" placeholder={placeholder} {...props} />
+  )
+
+  return (
+    <View gap="xs">
+      {showAdd && link}
+      {items.map((item) => (
+        <ListItem key={item._id} value={item} remove={remove} />
+      ))}
+    </View>
+  )
+}
+
+export function UploadInput({ ...props }) {
+  return <Upload {...props}>{(params) => <Content {...props} {...params} />}</Upload>
+}

package/src/components/inputs/index.js

@@ -3,12 +3,21 @@ export * from './Radio'
 export * from './Switch'
 export * from './InputWrapper'
 export * from './TextInput'
+export * from './PasswordInput'
+export * from './TextArea'
 export * from './NumberInput'
+export * from './NumberRangeInput'
 export * from './LinkInput'
 export * from './MaskInput'
 export * from './DateInput'
+export * from './DateRangeInput'
 export * from './datePicker/DatePicker'
 export * from './Picker'
 export * from './Select'
+export * from './BooleanSelect'
+export * from './EnabledSelect'
 export * from './RateInput'
 export * from './SegmentedPicker'
+export * from './Editable'
+export * from './upload/Upload'
+export * from './UploadInput'

package/src/components/inputs/upload/Upload.js

@@ -0,0 +1,99 @@
+import React, { useRef, useState, useCallback } from 'react'
+
+import { View } from '../../structure/View'
+import { useUploadState } from './useUploadState'
+
+function normalizeFile(file) {
+  return {
+    uri: URL.createObjectURL(file),
+    name: file.name,
+    type: file.type,
+    size: file.size,
+    file,
+  }
+}
+
+export function Upload({ children, onChange, onUpload, value: valueProp, accept, multiple = false, maxCount, disabled = false, dnd = true, ...props }) {
+  const { value, addFiles, remove } = useUploadState({ onUpload, onChange, multiple, maxCount, value: valueProp })
+  const inputRef = useRef()
+  const [isDragging, setIsDragging] = useState(false)
+  const dragCounter = useRef(0)
+
+  const handleClick = useCallback(() => {
+    if (disabled) return
+    inputRef.current?.click()
+  }, [disabled])
+
+  const handleInputChange = useCallback(
+    (e) => {
+      const files = e.target.files
+      if (!files?.length) return
+      addFiles(Array.from(files).map(normalizeFile))
+      e.target.value = ''
+    },
+    [addFiles]
+  )
+
+  const handleDragEnter = useCallback(
+    (e) => {
+      if (!dnd || disabled) return
+      e.preventDefault()
+      e.stopPropagation()
+      dragCounter.current++
+      if (dragCounter.current === 1) setIsDragging(true)
+    },
+    [dnd, disabled]
+  )
+
+  const handleDragOver = useCallback(
+    (e) => {
+      if (!dnd || disabled) return
+      e.preventDefault()
+      e.stopPropagation()
+    },
+    [dnd, disabled]
+  )
+
+  const handleDragLeave = useCallback(
+    (e) => {
+      if (!dnd || disabled) return
+      e.preventDefault()
+      e.stopPropagation()
+      dragCounter.current--
+      if (dragCounter.current === 0) setIsDragging(false)
+    },
+    [dnd, disabled]
+  )
+
+  const handleDrop = useCallback(
+    (e) => {
+      if (!dnd || disabled) return
+      e.preventDefault()
+      e.stopPropagation()
+      dragCounter.current = 0
+      setIsDragging(false)
+      const files = e.dataTransfer?.files
+      if (!files?.length) return
+      addFiles(Array.from(files).map(normalizeFile))
+    },
+    [dnd, disabled, addFiles]
+  )
+
+  const dndHandlers = dnd
+    ? {
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+      }
+    : {}
+
+  const isRenderFn = typeof children === 'function'
+
+  return (
+    <View onPress={!isRenderFn && !disabled ? handleClick : undefined} pointer={!isRenderFn && !disabled} {...dndHandlers} {...props}>
+      {isRenderFn ? children({ value, remove, isDragging, open: handleClick }) : children}
+      <input ref={inputRef} type="file" style={{ display: 'none' }} accept={accept} multiple={multiple} onChange={handleInputChange} />
+    </View>
+  )
+}