@tremolo-ui/react 0.0.8 → 0.0.10

package/src/components/NumberInput/DecrementStepper.tsx

@@ -0,0 +1,52 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+import { useNumberInputContext } from './context'
+
+export interface DecrementStepperProps {
+  size?: number
+  children?: ReactNode
+}
+
+export function DecrementStepper({
+  size = 12,
+  children,
+  className,
+  ...props
+}: DecrementStepperProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof DecrementStepperProps>) {
+  const min = useNumberInputContext((s) => s.min)
+  const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber)
+  const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange)
+  const decrement = useNumberInputContext((s) => s.decrement)
+
+  // TODO: add long press event
+
+  return (
+    <div
+      className={clsx('tremolo-number-input-decrement-stepper', className)}
+      role="button"
+      tabIndex={-1}
+      aria-disabled={
+        keepWithinRange && valueAsNumber <= (min ?? Number.MIN_SAFE_INTEGER)
+      }
+      onPointerDown={decrement}
+      {...props}
+    >
+      {children || (
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      )}
+    </div>
+  )
+}

package/src/components/NumberInput/IncrementStepper.tsx

@@ -0,0 +1,52 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+import { useNumberInputContext } from './context'
+
+export interface IncrementStepperProps {
+  size?: number
+  children?: ReactNode
+}
+
+export function IncrementStepper({
+  size = 12,
+  children,
+  className,
+  ...props
+}: IncrementStepperProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof IncrementStepperProps>) {
+  const max = useNumberInputContext((s) => s.max)
+  const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber)
+  const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange)
+  const increment = useNumberInputContext((s) => s.increment)
+
+  // TODO: add long press event
+
+  return (
+    <div
+      className={clsx('tremolo-number-input-increment-stepper', className)}
+      role="button"
+      tabIndex={-1}
+      aria-disabled={
+        keepWithinRange && valueAsNumber >= (max ?? Number.MAX_SAFE_INTEGER)
+      }
+      onPointerDown={increment}
+      {...props}
+    >
+      {children || (
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="18 15 12 9 6 15" />
+        </svg>
+      )}
+    </div>
+  )
+}

package/src/components/NumberInput/Stepper.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+export interface StepperProps {
+  /** Display only when hovering. */
+  dynamic?: boolean
+  children?: ReactNode
+}
+
+export function Stepper({
+  dynamic = true,
+  children,
+  className,
+  ...props
+}: StepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof StepperProps>) {
+  return (
+    <div
+      className={clsx('tremolo-number-input-stepper', className)}
+      data-dynamic={dynamic}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/NumberInput/context.tsx

@@ -0,0 +1,150 @@
+import { createContext, useContext, useEffect, useRef } from 'react'
+import { createStore, useStore } from 'zustand'
+
+import { clamp } from '@tremolo-ui/functions'
+import { parseValue, Units } from '@tremolo-ui/functions/NumberInput'
+
+type State = {
+  value: string
+  valueAsNumber: number
+  min?: number
+  max?: number
+  step?: number
+  keepWithinRange?: boolean
+  units?: string | Units
+  digit?: number
+  onChange?: (value: number, text: string) => void
+}
+
+type Action = {
+  increment: () => void
+  decrement: () => void
+  change: (value: string) => void
+}
+
+type NumberInputStore = ReturnType<typeof createNumberInputStore>
+
+type ProviderProps = Partial<Omit<State, 'value'> & { value: number | string }>
+
+export function safeClamp(
+  value: number,
+  min = Number.MIN_SAFE_INTEGER,
+  max = Number.MAX_SAFE_INTEGER,
+) {
+  return clamp(value, min, max)
+}
+
+const createNumberInputStore = (initProps?: ProviderProps) => {
+  const DEFAULT_PROPS: State = {
+    value: '',
+    valueAsNumber: 0,
+    min: 0,
+    max: 0,
+    step: 1,
+    keepWithinRange: true,
+    onChange: (_v: number, _t: string) => {},
+  }
+
+  return createStore<State & Action>()((set) => ({
+    ...DEFAULT_PROPS,
+    ...initProps,
+    ...{
+      value: parseValue(
+        String(initProps?.value || ''),
+        initProps?.units,
+        initProps?.digit,
+      ).formatValue,
+      valueAsNumber: parseValue(
+        String(initProps?.value || ''),
+        initProps?.units,
+        initProps?.digit,
+      ).rawValue,
+    },
+    increment: () =>
+      set((state) => {
+        let next =
+          parseValue(state.value, state.units, state.digit).rawValue +
+          (state.step ?? 1)
+        if (state.keepWithinRange) {
+          next = safeClamp(next, state.min, state.max)
+        }
+        const v = parseValue(String(next), state.units, state.digit).formatValue
+        state?.onChange?.(next, v)
+        return {
+          value: v,
+          valueAsNumber: next,
+        }
+      }),
+    decrement: () =>
+      set((state) => {
+        let next =
+          parseValue(state.value, state.units, state.digit).rawValue -
+          (state.step ?? 1)
+        if (state.keepWithinRange) {
+          next = safeClamp(next, state.min, state.max)
+        }
+        const v = parseValue(String(next), state.units, state.digit).formatValue
+        state?.onChange?.(next, v)
+        return {
+          value: v,
+          valueAsNumber: next,
+        }
+      }),
+    change: (value) =>
+      set((state) => {
+        const v = value ?? ''
+        return {
+          value: v,
+          valueAsNumber: parseValue(v, state.units, state.digit).rawValue,
+        }
+      }),
+  }))
+}
+
+const NumberInputContext = createContext<NumberInputStore | null>(null)
+
+type NumberInputProviderProps = React.PropsWithChildren<ProviderProps>
+
+export function NumberInputProvider({
+  children,
+  ...props
+}: NumberInputProviderProps) {
+  const storeRef = useRef<NumberInputStore>()
+  if (!storeRef.current) {
+    storeRef.current = createNumberInputStore(props)
+  }
+
+  useEffect(() => {
+    if (storeRef.current) {
+      const parsed = parseValue(
+        String(props?.value || ''),
+        props?.units,
+        props?.digit,
+      )
+      storeRef.current.setState({
+        ...props,
+        ...{
+          value: parsed.formatValue,
+          valueAsNumber: parsed.rawValue,
+        },
+      })
+    } else {
+      storeRef.current = createNumberInputStore(props)
+    }
+  }, [props])
+
+  return (
+    <NumberInputContext.Provider value={storeRef.current}>
+      {children}
+    </NumberInputContext.Provider>
+  )
+}
+
+/** @category NumberInput */
+export function useNumberInputContext<T>(
+  selector: (state: State & Action) => T,
+): T {
+  const store = useContext(NumberInputContext)
+  if (!store) throw new Error('Missing NumberInputContext.Provider in the tree')
+  return useStore(store, selector)
+}

package/src/components/NumberInput/index.css

@@ -1,25 +1,114 @@
-.tremolo-number-input {
-  display: inline-block;
-  font: inherit;
-  margin: 0px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  padding-left: 10px;
-  padding-right: 10px;
+.tremolo-number-input-wrapper {
+  --tremolo-number-input-border-radius: 4px;
+  --tremolo-number-input-stepper-width: 20px;
+
+  display: inline-flex;
+  flex-direction: row;
+  position: relative;
+
   border-style: solid;
   border-width: 1px;
   border-color: #bbb;
-  border-radius: 4px;
-  outline: 0px;
-  transition: all 0.1s linear;
-  appearance: textfield;
+  border-radius: var(--tremolo-number-input-border-radius);
+
+  width: 140px;
+  height: min-content;
 
   &:hover {
     border-color: var(--tremolo-theme-color);
   }
 
-  &:focus {
+  &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {
+    border-color: #f34343;
+  }
+
+  &:focus-within {
     border-color: var(--tremolo-theme-color);
     box-shadow: 0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1);
   }
+
+  &[data-stepper='false'] {
+    --tremolo-number-input-stepper-width: 0px;
+  }
+}
+
+.tremolo-number-input {
+  display: block;
+  width: calc(100% - 20px - var(--tremolo-number-input-stepper-width));
+  background-color: inherit;
+  font: inherit;
+  padding: 6px 10px;
+
+  margin: 0;
+  border: none;
+  outline: none;
+  appearance: textfield;
+}
+
+.tremolo-number-input-stepper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--tremolo-number-input-stepper-width);
+  transition: all 0.1s linear;
+
+  &[data-dynamic='true'] {
+    opacity: 0;
+    transform: translateX(40%);
+  }
+}
+
+.tremolo-number-input-wrapper:hover .tremolo-number-input-stepper {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.tremolo-number-input-increment-stepper {
+  border-inline-start-width: 1px;
+  border-inline-start-style: solid;
+  border-inline-start-color: #ccc;
+  font-size: calc(0.75rem);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 1 0%;
+  max-height: 50%;
+  user-select: none;
+  cursor: pointer;
+  border-top-right-radius: var(--tremolo-number-input-border-radius);
+
+  &[aria-disabled='false']:active {
+    background-color: #3443560e;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+}
+
+.tremolo-number-input-decrement-stepper {
+  border-inline-start-width: 1px;
+  border-inline-start-style: solid;
+  border-inline-start-color: #ccc;
+  border-top: 1px solid #ccc;
+  font-size: calc(0.75rem);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 1 0%;
+  max-height: 50%;
+  user-select: none;
+  cursor: pointer;
+  border-bottom-right-radius: var(--tremolo-number-input-border-radius);
+
+  &[aria-disabled='false']:active {
+    background-color: #3443560e;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
 }

package/src/components/NumberInput/index.tsx

@@ -1,22 +1,35 @@
 import clsx from 'clsx'
-import { ChangeEvent, ComponentPropsWithoutRef, useState } from 'react'
+import { ComponentPropsWithoutRef, ReactNode, useMemo, useState } from 'react'
 
-import { clamp } from '@tremolo-ui/functions'
+import { InputEventOption } from '@tremolo-ui/functions'
 import { parseValue, Units } from '@tremolo-ui/functions/NumberInput'
 
+import {
+  NumberInputProvider,
+  safeClamp,
+  useNumberInputContext,
+} from './context'
+
+/*
+TODO
+- onBlurでは、parse + (clamp) + formatして返す
+- numberMode: focusが当たった時だけ、parse + type="number"にする
+*/
+
+/** @category NumberInput */
 export interface NumberInputProps {
   value: number | string
 
+  /**
+   * @default Number.MIN_SAFE_INTEGER
+   */
   min?: number
+  /**
+   * @default Number.MAX_SAFE_INTEGER
+   */
   max?: number
   step?: number
-  defaultValue?: number
-
-  // wrapping html input
-  disabled?: boolean
-  placeholder?: string
-  readOnly?: boolean
-  tabIndex?: number
+  defaultValue?: number | string
 
   /**
    * @example
@@ -26,11 +39,6 @@ export interface NumberInputProps {
    */
   units?: string | Units
 
-  /**
-   * NOTE: If units is specified, it is forced to `false`
-   */
-  typeNumber?: boolean
-
   /**
    * Digits for rounding numbers.
    * @example
@@ -41,76 +49,94 @@ export interface NumberInputProps {
    * value=100 -> 100Hz, value=1600 -> 1.60Hz
    */
   digit?: number
+
   selectWithFocus?: 'all' | 'number' | 'none'
-  blurWithEnter?: boolean
-  className?: string
-  onChange?: (value: number, event: ChangeEvent<HTMLInputElement>) => void
+  blurOnEnter?: boolean
+  keepWithinRange?: boolean
+  clampValueOnBlur?: boolean
+
+  // TODO
+  /**
+   * wheel control option
+   */
+  wheel?: InputEventOption | null
+  /**
+   * keyboard control option
+   */
+  keyboard?: InputEventOption | null
+
+  wrapperClassName?: string
+
+  onChange?: (value: number, text: string) => void
   onFocus?: (
     value: number,
+    text: string,
     event: React.FocusEvent<HTMLInputElement, Element>,
   ) => void
   onBlur?: (
     value: number,
+    text: string,
     event: React.FocusEvent<HTMLInputElement, Element>,
   ) => void
+
+  children?: ReactNode
 }
 
-/**
- * Input with some useful functions for entering numerical values.
- */
-export function NumberInput({
-  value,
+function InternalInput({
   min,
   max,
   step,
-  defaultValue = min,
+  defaultValue,
   units,
-  disabled = false,
-  placeholder,
-  readOnly,
-  tabIndex,
-  typeNumber = false,
+  disabled,
   digit,
-  selectWithFocus = 'none',
-  blurWithEnter = true,
+  selectWithFocus,
+  blurOnEnter,
+  keepWithinRange,
+  clampValueOnBlur,
+  wheel,
+  keyboard,
+  wrapperClassName,
   className,
   onChange,
   onFocus,
   onBlur,
+  children: _children,
   ...props
-}: NumberInputProps &
+}: Omit<NumberInputProps, 'value'> &
   Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps | 'type'>) {
-  const [showValue, setShowValue] = useState(
-    parseValue(String(value), units, digit, defaultValue).formatValue,
-  )
-  const calculatedTypeNumber = units ? false : typeNumber
+  const [editing, setEditing] = useState(false)
+  const value = useNumberInputContext((s) => s.value)
+  const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber)
+  const change = useNumberInputContext((s) => s.change)
+
+  const error = useMemo(() => {
+    if (editing) return false
+    const v = valueAsNumber
+    return (min ?? -Infinity) > v || v > (max ?? Infinity)
+  }, [editing, max, min, valueAsNumber])
 
   return (
     <input
       className={clsx('tremolo-number-input', className)}
-      value={showValue}
+      value={value}
       min={min}
       max={max}
       step={step}
-      type={calculatedTypeNumber ? 'number' : 'text'}
-      spellCheck={'false'}
+      type="text"
       disabled={disabled}
-      placeholder={placeholder}
-      readOnly={readOnly}
-      tabIndex={tabIndex}
+      tabIndex={-1}
+      data-error={error}
       onChange={(event) => {
         const v = event.currentTarget.value
-        setShowValue(v)
-        const newValue = clamp(
-          parseValue(v, units, digit, defaultValue).rawValue,
-          min ?? -Infinity,
-          max ?? Infinity,
-        )
-        if (onChange) onChange(newValue, event)
+        change(v)
+        const valueAsNumber = parseValue(v, units, digit).rawValue
+        onChange?.(valueAsNumber, v)
       }}
       onFocus={(event) => {
+        setEditing(true)
         const v = event.currentTarget.value
-        const parsed = parseValue(v, units, digit, defaultValue)
+        const parsed = parseValue(v, units, digit)
         if (selectWithFocus == 'all') {
           event.currentTarget.setSelectionRange(0, v.length)
         } else if (selectWithFocus == 'number') {
@@ -119,17 +145,24 @@ export function NumberInput({
             parsed.formatValue.length - parsed.unit.length,
           )
         }
-        if (onFocus) onFocus(parsed.rawValue, event)
+        onFocus?.(parsed.rawValue, parsed.formatValue, event)
       }}
       onBlur={(event) => {
+        setEditing(false)
         // update value
-        const v = event.currentTarget.value
-        const parsed = parseValue(v, units, digit, defaultValue)
-        setShowValue(parsed.formatValue)
-        if (onBlur) onBlur(parsed.rawValue, event)
+        let v = parseValue(event.currentTarget.value, units, digit).rawValue
+        if (clampValueOnBlur) {
+          v = safeClamp(v, min, max)
+        }
+        const parsed = parseValue(String(v), units, digit)
+        change(parsed.formatValue)
+        if (clampValueOnBlur) {
+          onChange?.(parsed.rawValue, parsed.formatValue)
+        }
+        onBlur?.(parsed.rawValue, parsed.formatValue, event)
       }}
       onKeyDown={(event) => {
-        if (blurWithEnter && event.key == 'Enter') {
+        if (blurOnEnter && event.key == 'Enter') {
           event.currentTarget.blur()
         }
       }}
@@ -137,3 +170,79 @@ export function NumberInput({
     />
   )
 }
+
+/**
+ * Input with some useful functions for entering numerical values.
+ * @category NumberInput
+ */
+export function NumberInput({
+  value,
+  min,
+  max,
+  step = 1,
+  defaultValue,
+  units,
+  disabled = false,
+  digit,
+  selectWithFocus = 'none',
+  blurOnEnter = true,
+  keepWithinRange = true,
+  clampValueOnBlur = true,
+  wheel = ['raw', 1],
+  keyboard = ['raw', 1],
+  wrapperClassName,
+  className,
+  onChange,
+  onFocus,
+  onBlur,
+  children,
+  ...props
+}: NumberInputProps &
+  Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps | 'type'>) {
+  return (
+    <NumberInputProvider
+      value={String(value)}
+      min={min}
+      max={max}
+      step={step}
+      units={units}
+      digit={digit}
+      keepWithinRange={keepWithinRange}
+      onChange={onChange}
+    >
+      <div
+        className={clsx('tremolo-number-input-wrapper', wrapperClassName)}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+        data-stepper={!!children}
+      >
+        <InternalInput
+          min={min}
+          max={max}
+          step={step}
+          defaultValue={defaultValue}
+          units={units}
+          disabled={disabled}
+          digit={digit}
+          selectWithFocus={selectWithFocus}
+          blurOnEnter={blurOnEnter}
+          keepWithinRange={keepWithinRange}
+          clampValueOnBlur={clampValueOnBlur}
+          wheel={wheel}
+          keyboard={keyboard}
+          wrapperClassName={wrapperClassName}
+          className={className}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          {...props}
+        />
+        {children}
+      </div>
+    </NumberInputProvider>
+  )
+}
+
+export * from './Stepper'
+export * from './IncrementStepper'
+export * from './DecrementStepper'