@neko-os/ui 0.0.7 → 0.0.8

package/src/components/inputs/DateInput.js

@@ -0,0 +1,111 @@
+import React from 'react'
+import advancedFormat from 'dayjs/esm/plugin/advancedFormat'
+import dayjs from 'dayjs'
+import weekOfYear from 'dayjs/esm/plugin/weekOfYear'
+
+import { LinkInput } from './LinkInput'
+import { View } from '../structure/View'
+import { useResponsiveValue } from '../../responsive'
+
+dayjs.extend(advancedFormat)
+dayjs.extend(weekOfYear)
+
+import { DatePicker } from './datePicker/DatePicker'
+import { MaskInput } from './MaskInput'
+import { Popover } from '../structure/popover/Popover'
+import { isValidDate } from '../calendar/_helpers/dateDisabled'
+
+export function getDateInputDefaultFormat(type) {
+  switch (type) {
+    case 'year':
+      return 'YYYY'
+    case 'quarter':
+      return 'YYYY-Q'
+    case 'month':
+      return 'YYYY-MM'
+    case 'week':
+      return 'YYYY-ww'
+    default:
+      return 'YYYY-MM-DD'
+  }
+}
+
+export function DateInput({
+  value,
+  onChange,
+  min,
+  max,
+  onCheckDisabled,
+  placement,
+  type = 'day',
+  format,
+  useBottomDrawer = { native: true, sm: true, md: true },
+  ...props
+}) {
+  useBottomDrawer = useResponsiveValue(useBottomDrawer)
+  format = format || getDateInputDefaultFormat(type)
+  if (value === '') value = undefined
+  const [inputValue, setInputValue] = React.useState('')
+  const [localValue, setLocalValue] = React.useState(value)
+
+  value = value || localValue
+
+  const validations = { min, max, onCheckDisabled }
+
+  const handleChange = (v) => {
+    if (!isValidDate(v, format, validations)) return
+    v = !!v ? dayjs(v) : null
+    setLocalValue(v)
+    onChange?.(v)
+  }
+
+  const handleChangeInput = (v) => {
+    setInputValue(v)
+    if (!isValidDate(v, format, validations)) return
+    handleChange(v)
+  }
+
+  const onBlur = () => {
+    if (isValidDate(inputValue, format, validations)) return
+    handleChange(null)
+    setInputValue('')
+  }
+
+  React.useEffect(() => {
+    setInputValue(!!value ? dayjs(value).format(format) : '')
+  }, [value])
+
+  const Input = useBottomDrawer ? LinkInput : MaskInput
+
+  return (
+    <Popover
+      trigger="click"
+      placement={placement || 'bottomLeft'}
+      snapPoints={[350]}
+      useBottomDrawer={useBottomDrawer}
+      renderContent={({ onClose }) => (
+        <View flex centerH>
+          <DatePicker
+            value={value}
+            onChange={(v) => {
+              handleChange(v)
+              onClose()
+            }}
+            {...validations}
+            type={type}
+          />
+        </View>
+      )}
+    >
+      <Input
+        value={inputValue}
+        onChange={handleChangeInput}
+        suffixIcon="calendar-line"
+        suffixIconColor="text4"
+        onBlur={onBlur}
+        mask={format.replace(/[DMYQwW]/gi, '9')}
+        {...props}
+      />
+    </Popover>
+  )
+}

package/src/components/inputs/InputWrapper.js

@@ -19,10 +19,23 @@ const DEFAULT_PROPS = {
   gap: 'sm',
 }
 
-export function InputWrapper({ prefix, suffix, prefixIcon, suffixIcon, loading, error, children, ...rootProps }) {
+export function InputWrapper({
+  prefix,
+  suffix,
+  prefixIcon,
+  prefixIconColor,
+  suffixIcon,
+  suffixIconColor,
+  loading,
+  error,
+  children,
+  ref,
+  ...rootProps
+}) {
   const [hover, setHover] = React.useState(false)
-  const inputRef = React.useRef()
-  const [{ size, sizeCode, onChange }, props] = pipe(
+  const fallbackInputRef = React.useRef()
+  const inputRef = ref || fallbackInputRef
+  const [{ size, sizeCode }, props] = pipe(
     useSizeConverter('elementHeights', 'md'),
     useThemeComponentModifier('InputWrapper'),
     useDefaultModifier(DEFAULT_PROPS)
@@ -34,8 +47,8 @@ export function InputWrapper({ prefix, suffix, prefixIcon, suffixIcon, loading,
 
   if (!!prefix && is(String, prefix)) prefix = <Text>{prefix}</Text>
   if (!!suffix && is(String, suffix)) suffix = <Text>{suffix}</Text>
-  if (!prefix && !!prefixIcon) prefix = <Icon name={prefixIcon} size={sizeCode} />
-  if (!suffix && !!suffixIcon) suffix = <Icon name={suffixIcon} size={sizeCode} />
+  if (!prefix && !!prefixIcon) prefix = <Icon name={prefixIcon} size={sizeCode} color={prefixIconColor} />
+  if (!suffix && !!suffixIcon) suffix = <Icon name={suffixIcon} size={sizeCode} color={suffixIconColor} />
   if (!prefix && !!error) suffix = <Icon name="close-circle-fill" size={sizeCode} red />
   if (!!loading) suffix = <Loading size={sizeCode} />
 
@@ -46,7 +59,6 @@ export function InputWrapper({ prefix, suffix, prefixIcon, suffixIcon, loading,
   const childWithProps = React.cloneElement(child, {
     ...child.props,
     ref: inputRef,
-    onChange: child.props.onChange || onChange,
   })
 
   return (

package/src/components/inputs/LinkInput.js

@@ -0,0 +1,17 @@
+import { InputWrapper } from './InputWrapper'
+import { Link } from '../actions/Link'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { useColors } from '../../theme/ThemeHandler'
+
+export function LinkInput({ onPress, onClick, placeholder, value, disabled, ...props }) {
+  return (
+    <Link 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} />
+        </View>
+      </InputWrapper>
+    </Link>
+  )
+}

package/src/components/inputs/MaskInput.js

@@ -0,0 +1,67 @@
+import React from 'react'
+
+import { TextInput } from './TextInput'
+
+function removeMask(value, mask = '') {
+  let result = ''
+
+  for (let i = 0; i < mask.length; i++) {
+    const maskChar = mask[i]
+    const valueChar = value[i]
+
+    if (!valueChar) break
+
+    if (maskChar === 'A' && /[A-Za-z]/.test(valueChar)) {
+      result += valueChar
+    } else if (maskChar === '9' && /\d/.test(valueChar)) {
+      result += valueChar
+    }
+  }
+
+  return result
+}
+
+function applyMask(value, mask) {
+  const clean = value.replace(/[^0-9A-Za-z]/g, '')
+  let result = ''
+  let index = 0
+
+  for (let i = 0; i < mask.length; i++) {
+    if (index >= clean.length) break
+    const char = mask[i]
+
+    if (char === '9' && /[0-9]/.test(clean[index])) {
+      result += clean[index]
+      index++
+    } else if (char === 'A' && /[A-Za-z]/.test(clean[index])) {
+      result += clean[index].toUpperCase()
+      index++
+    } else if (char === '9' || char === 'A') {
+      index++
+      i--
+    } else {
+      result += char
+    }
+  }
+
+  return result
+}
+
+export function MaskInput({ value = '', onChange, mask = '', useRawValue, ...props }) {
+  const [localValue, setLocalValue] = React.useState(applyMask(value, mask))
+
+  const handleChange = React.useCallback(
+    (text) => {
+      const masked = applyMask(text, mask)
+      onChange?.(useRawValue ? removeMask(masked, mask) : masked)
+      setLocalValue(masked)
+    },
+    [mask, onChange]
+  )
+
+  React.useEffect(() => {
+    setLocalValue(applyMask(value, mask))
+  }, [value])
+
+  return <TextInput value={localValue} onChange={handleChange} {...props} />
+}

package/src/components/inputs/TextInput.js

@@ -2,7 +2,7 @@ import { AbsTextInput } from '../../abstractions/TextInput'
 import { InputWrapper } from './InputWrapper'
 import { useColors } from '../../theme/ThemeHandler'
 
-export function TextInput({ value, ...props }) {
+export function TextInput({ onChange, ...props }) {
   const colors = useColors()
 
   const STYLE = {
@@ -16,7 +16,7 @@ export function TextInput({ value, ...props }) {
 
   return (
     <InputWrapper {...props}>
-      <AbsTextInput style={STYLE} placeholderTextColor={colors.text_op30} {...props} value={value} />
+      <AbsTextInput style={STYLE} placeholderTextColor={colors.text_op30} {...props} onChange={onChange} />
     </InputWrapper>
   )
 }

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

@@ -0,0 +1,89 @@
+import React from 'react'
+import advancedFormat from 'dayjs/esm/plugin/advancedFormat'
+import dayjs from 'dayjs'
+import weekOfYear from 'dayjs/esm/plugin/weekOfYear'
+
+dayjs.extend(advancedFormat)
+dayjs.extend(weekOfYear)
+
+import { DatePicker } from './datePicker/DatePicker'
+import { MaskInput } from './MaskInput'
+import { Popover } from '../structure/popover/Popover'
+import { isValidDate } from '../calendar/_helpers/dateDisabled'
+
+export function getDateInputDefaultFormat(type) {
+  switch (type) {
+    case 'year':
+      return 'YYYY'
+    case 'quarter':
+      return 'YYYY-Q'
+    case 'month':
+      return 'YYYY-MM'
+    case 'week':
+      return 'YYYY-ww'
+    default:
+      return 'YYYY-MM-DD'
+  }
+}
+
+export function DateInput({ value, onChange, min, max, onCheckDisabled, placement, type = 'day', format, ...props }) {
+  format = format || getDateInputDefaultFormat(type)
+  const [inputValue, setInputValue] = React.useState('')
+  const [localValue, setLocalValue] = React.useState(value)
+
+  value = value || localValue
+
+  const validations = { min, max, onCheckDisabled }
+
+  const handleChange = (v) => {
+    if (!isValidDate(v, format, validations)) return
+    v = !!v ? dayjs(v) : null
+    setLocalValue(v)
+    onChange?.(v)
+  }
+
+  const handleChangeInput = (v) => {
+    setInputValue(v)
+    if (!isValidDate(v, format, validations)) return
+    handleChange(v)
+  }
+
+  const onBlur = () => {
+    if (isValidDate(inputValue, format, validations)) return
+    handleChange(null)
+    setInputValue('')
+  }
+
+  React.useEffect(() => {
+    setInputValue(!!value ? dayjs(value).format(format) : '')
+  }, [value])
+
+  return false
+  return (
+    <Popover
+      trigger="click"
+      placement={placement || 'bottomLeft'}
+      renderContent={({ onClose }) => (
+        <DatePicker
+          value={value}
+          onChange={(v) => {
+            handleChange(v)
+            onClose()
+          }}
+          {...validations}
+          type={type}
+        />
+      )}
+    >
+      <MaskInput
+        value={inputValue}
+        onChange={handleChangeInput}
+        suffixIcon="calendar-line"
+        suffixIconColor="text4"
+        onBlur={onBlur}
+        mask={format.replace(/[DMYQwW]/gi, '9')}
+        {...props}
+      />
+    </Popover>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { DayPicker } from './DayPicker'
+import { MonthPicker } from './MonthPicker'
+import { QuarterPicker } from './QuarterPicker'
+import { WeekPicker } from './WeekPicker'
+import { YearPicker } from './YearPicker'
+
+export function DatePicker({ type, ...props }) {
+  switch (type) {
+    case 'year':
+      return <YearPicker {...props} />
+
+    case 'quarter':
+      return <QuarterPicker {...props} />
+
+    case 'month':
+      return <MonthPicker {...props} />
+
+    case 'week':
+      return <WeekPicker {...props} />
+
+    default:
+      return <DayPicker {...props} />
+  }
+}

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

@@ -0,0 +1,65 @@
+import React from 'react'
+import dayjs from 'dayjs'
+
+import { CalendarNav } from '../../calendar/CalendarNav'
+import { Col } from '../../structure/Col'
+import { Grid } from '../../structure/Row'
+import { Link } from '../../actions/Link'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+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)
+
+  React.useEffect(() => {
+    setLocalValue(value)
+  }, [value])
+
+  value = value === undefined ? localValue : value
+
+  const handleChange = (v) => {
+    setLocalValue(v)
+    onChange?.(v)
+  }
+
+  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value).startOf('month'))
+
+  const { cells } = useCalendarDays(currentMonth)
+
+  return (
+    <View className="neko-day-picker" width={275} {...props}>
+      <CalendarNav value={currentMonth} onChange={setCurrentMonth} />
+      <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 disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+          return (
+            <Col key={day ? dateVal.format('YYYYMMDD') : i} className="day-cell" center>
+              <Link
+                ratio={1}
+                fullW
+                center
+                br="md"
+                onPress={() => !!day && handleChange(dateVal)}
+                bg={isActive && 'primary'}
+                disabled={disabled}
+              >
+                <Text sm text2 center strong={isActive}>
+                  {day || ''}
+                </Text>
+              </Link>
+            </Col>
+          )
+        })}
+      </Grid>
+    </View>
+  )
+}

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

@@ -0,0 +1,62 @@
+import React from 'react'
+import dayjs from 'dayjs'
+
+import { CalendarNav } from '../../calendar/CalendarNav'
+import { Col } from '../../structure/Col'
+import { Divider } from '../../helpers'
+import { Grid } from '../../structure/Row'
+import { Link } from '../../actions/Link'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+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 [localValue, setLocalValue] = React.useState(value)
+  value = value === undefined ? localValue : value
+
+  React.useEffect(() => {
+    setLocalValue(value)
+  }, [value?.month?.(), value?.year?.()])
+
+  const handleChange = (v) => {
+    const newValue = v.startOf('month')
+    setLocalValue(newValue)
+    onChange?.(newValue)
+  }
+
+  const [currentYear, setCurrentYear] = React.useState(() => dayjs(value).startOf('year'))
+
+  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>
+    </View>
+  )
+}

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

@@ -0,0 +1,65 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import quarterOfYear from 'dayjs/esm/plugin/quarterOfYear'
+
+import { CalendarNav } from '../../calendar/CalendarNav'
+import { Col } from '../../structure/Col'
+import { Divider } from '../../helpers'
+import { Grid } from '../../structure/Row'
+import { Link } from '../../actions/Link'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
+
+dayjs.extend(quarterOfYear)
+
+const quarters = [1, 2, 3, 4]
+
+export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+  const [localValue, setLocalValue] = React.useState(value)
+  value = value === undefined ? localValue : value
+
+  React.useEffect(() => {
+    setLocalValue(value)
+  }, [value?.quarter?.(), value?.year?.()])
+
+  const handleChange = (v) => {
+    const newValue = v.startOf('quarter')
+    setLocalValue(newValue)
+    onChange?.(newValue)
+  }
+
+  const [currentYear, setCurrentYear] = React.useState(() => dayjs(value).startOf('year'))
+
+  return (
+    <View className="neko-day-picker" width={275} {...props}>
+      <CalendarNav value={currentYear} onChange={setCurrentYear} level="year" />
+      <Divider />
+
+      <Grid colSpan={6} gap="xs">
+        {quarters.map((quarter) => {
+          const dateVal = currentYear.quarter(quarter)
+          const isActive = !!value && dateVal.isSame(value, 'week')
+          const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+          return (
+            <Col key={quarter}>
+              <Link
+                fullW
+                br="md"
+                padding="sm"
+                onPress={() => handleChange(dateVal)}
+                bg={isActive && 'primary'}
+                disabled={disabled}
+              >
+                <Text text2={!isActive} strong={isActive} center>
+                  Q{dateVal.quarter()}
+                </Text>
+              </Link>
+            </Col>
+          )
+        })}
+      </Grid>
+    </View>
+  )
+}

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

@@ -0,0 +1,74 @@
+import { splitEvery, identity } from 'ramda'
+import React from 'react'
+import dayjs from 'dayjs'
+
+import { CalendarNav } from '../../calendar/CalendarNav'
+import { Col } from '../../structure/Col'
+import { Link } from '../../actions/Link'
+import { Row } from '../../structure/Row'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+import { WeekDaysBar } from '../../calendar/WeekDaysBar'
+import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
+import { useCalendarDays } from '../../calendar/_helpers/calendarDays'
+
+export function WeekPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+  const [localValue, setLocalValue] = React.useState(value)
+  value = value === undefined ? localValue : value
+
+  React.useEffect(() => {
+    setLocalValue(value)
+  }, [value?.day?.(), value?.month?.(), value?.year?.()])
+
+  const handleChange = (v) => {
+    const newValue = v.startOf('week')
+    setLocalValue(newValue)
+    onChange?.(newValue)
+  }
+
+  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value).startOf('month'))
+
+  const { cells } = useCalendarDays(currentMonth)
+  const weeks = splitEvery(7, cells)
+
+  return (
+    <View className="neko-day-picker" width={275} {...props}>
+      <CalendarNav value={currentMonth} onChange={setCurrentMonth} />
+      <WeekDaysBar />
+
+      <View colSpan={24 / 7} gap="sm">
+        {weeks.map((week, wi) => {
+          const firstDay = week.find(identity)
+          const dateVal = currentMonth.date(firstDay)
+          const isActive = !!value && !!firstDay && dateVal.isSame(value, 'week')
+          const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+          return (
+            <Link
+              key={firstDay ? dateVal.format('YYYYMMDD') : wi}
+              fullW
+              br="md"
+              onPress={() => !!firstDay && handleChange(dateVal)}
+              bg={isActive && 'primary'}
+              disabled={disabled}
+            >
+              <Row colSpan={24 / 7} gap="sm">
+                {week.map((day, i) => {
+                  const dateVal = currentMonth.date(day)
+
+                  return (
+                    <Col key={day ? dateVal.format('YYYYMMDD') : i} className="day-cell" center ratio={1}>
+                      <Text sm text2 center strong={isActive}>
+                        {day || ''}
+                      </Text>
+                    </Col>
+                  )
+                })}
+              </Row>
+            </Link>
+          )
+        })}
+      </View>
+    </View>
+  )
+}