@helpwave/hightide/dist/components/user-action/ToggleableInput.mjs.map

helpwave's component and theming library

{"version":3,"sources":["../../../src/components/user-action/ToggleableInput.tsx","../../../src/hooks/useDelay.ts","../../../src/util/noop.ts"],"sourcesContent":["import type { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { Pencil } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { UseDelayOptions } from '../../hooks/useDelay'\nimport { useDelay } from '../../hooks/useDelay'\nimport { noop } from '../../util/noop'\n\ntype InputProps = {\n  /**\n   * The value\n   */\n  value: string,\n  /**\n   * @default 'text'\n   */\n  type?: HTMLInputTypeAttribute,\n  /**\n   * Callback for when the input's value changes\n   * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n   * That could be enforced through a union type but that seems a bit overkill\n   * @default noop\n   */\n  onChangeText?: (text: string) => void,\n  onEditCompleted?: (text: string) => void,\n  labelClassName?: string,\n  initialState?: 'editing' | 'display',\n  size?: number,\n  disclaimer?: string,\n  saveDelayOptions?: UseDelayOptions,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'label' | 'type' | 'crossOrigin'>\n\n/**\n * A Text input component for inputting text. It changes appearance upon entering the edit mode and switches\n * back to display mode on loss of focus or on enter\n *\n * The State is managed by the parent\n */\nexport const ToggleableInput = ({\n                                  type = 'text',\n                                  value,\n                                  onChange = noop,\n                                  onChangeText = noop,\n                                  onEditCompleted = noop,\n                                  labelClassName = '',\n                                  initialState = 'display',\n                                  size = 16,\n                                  disclaimer,\n                                  onBlur,\n                                  saveDelayOptions,\n                                  ...restProps\n                                }: InputProps) => {\n  const [isEditing, setIsEditing] = useState(initialState !== 'display')\n  const { restartTimer, clearTimer } = useDelay(saveDelayOptions)\n  const ref = useRef<HTMLInputElement>(null)\n\n  const onEditCompletedWrapper = (text: string) => {\n    onEditCompleted(text)\n    clearTimer()\n  }\n\n  useEffect(() => {\n    if (isEditing) {\n      ref.current?.focus()\n    }\n  }, [isEditing])\n\n  return (\n    <div>\n      <div\n        className={clsx('flex-row-2 items-center w-full overflow-hidden', { 'cursor-pointer': !isEditing })}\n        onClick={() => !isEditing ? setIsEditing(!isEditing) : undefined}\n      >\n        <div className={clsx('flex-row-2 overflow-hidden', { 'flex-1': isEditing })}>\n          {isEditing ? (\n            <input\n              ref={ref}\n              {...restProps}\n              value={value}\n              type={type}\n              onChange={event => {\n                const value = event.target.value\n                restartTimer(() => {\n                  onEditCompletedWrapper(value)\n                })\n                onChangeText(value)\n                onChange(event)\n              }}\n              onBlur={(event) => {\n                if (onBlur) {\n                  onBlur(event)\n                }\n                onEditCompletedWrapper(value)\n                setIsEditing(false)\n              }}\n              onKeyDown={event => {\n                if (event.key === 'Enter') {\n                  setIsEditing(false)\n                  onEditCompletedWrapper(value)\n                }\n              }}\n              className={clsx(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {\n                underline: isEditing\n              }, labelClassName)}\n              onFocus={event => event.target.select()}\n            />\n          ) : (\n            <span className={clsx('max-w-xs break-words overflow-hidden', labelClassName)}>\n              {value}\n            </span>\n          )}\n        </div>\n        <Pencil\n          className={clsx(`cursor-pointer`, { 'text-transparent': isEditing })}\n          size={size}\n          style={{ minWidth: `${size}px` }}\n        />\n      </div>\n      {(isEditing && disclaimer) && (\n        <label className=\"text-negative\">\n          {disclaimer}\n        </label>\n      )}\n    </div>\n  )\n}\n\nexport const ToggleableInputUncontrolled = ({\n                                              value: initialValue,\n                                              onChangeText = noop,\n                                              ...restProps\n                                            }: InputProps) => {\n  const [value, setValue] = useState(initialValue)\n\n  useEffect(() => {\n    setValue(initialValue)\n  }, [initialValue])\n\n  return (\n    <ToggleableInput\n      value={value}\n      onChangeText={text => {\n        setValue(text)\n        onChangeText(text)\n      }}\n      {...restProps}\n    />\n  )\n}\n","import { useEffect, useState } from 'react'\n\nexport type UseDelayOptionsResolved = {\n  delay: number,\n  disabled: boolean,\n}\n\nexport type UseDelayOptions = Partial<UseDelayOptionsResolved>\n\nconst defaultOptions: UseDelayOptionsResolved = {\n  delay: 3000,\n  disabled: false,\n}\n\nexport function useDelay(options?: UseDelayOptions) {\n  const [timer, setTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n  const { delay, disabled }: UseDelayOptionsResolved = {\n    ...defaultOptions,\n    ...options\n  }\n\n  const clearTimer = () => {\n    clearTimeout(timer)\n    setTimer(undefined)\n  }\n\n  const restartTimer = (onDelayFinish: () => void) => {\n    if(disabled) {\n      return\n    }\n    clearTimeout(timer)\n    setTimer(setTimeout(() => {\n      onDelayFinish()\n      setTimer(undefined)\n    }, delay))\n  }\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [timer])\n\n  useEffect(() => {\n    if(disabled){\n      clearTimeout(timer)\n      setTimer(undefined)\n    }\n  }, [disabled, timer])\n\n  return { restartTimer, clearTimer, hasActiveTimer: !!timer }\n}","export const noop = () => undefined\n"],"mappings":"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","names":["useEffect","useState","useState","useEffect","value"]}