Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
2.4 kB · 91 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192"use client";import { useEffect, useRef, useState, type JSX } from "react";import { onMouseDown } from "src/utils/iosInputMouseDown";import { isIOS } from "src/utils/isDevice";import { focusElement } from "src/utils/focusElement";
export const Input = ( props: { textarea?: boolean; } & JSX.IntrinsicElements["input"] & JSX.IntrinsicElements["textarea"],) => { let { textarea, ...inputProps } = props; let ref = useRef<HTMLInputElement>(null); useEffect(() => { if (!isIOS()) return; if (props.autoFocus) { focusElement(ref.current); } }, [props.autoFocus]);
if (textarea) return <textarea {...inputProps} />; return ( <input {...inputProps} autoFocus={isIOS() ? false : props.autoFocus} ref={ref} onMouseDown={onMouseDown} /> );};
export const AsyncValueInput = ( props: { textarea?: boolean; } & JSX.IntrinsicElements["input"] & JSX.IntrinsicElements["textarea"],) => { let [intermediateState, setIntermediateState] = useState( props.value as string, );
useEffect(() => { setIntermediateState(props.value as string); }, [props.value]);
return ( <Input {...props} value={intermediateState} onChange={async (e) => { if (!props.onChange) return; setIntermediateState(e.currentTarget.value); await Promise.all([ props.onChange(e as React.ChangeEvent<HTMLInputElement>), ]); }} /> );};
export const InputWithLabel = ( props: { label: string; textarea?: boolean; } & JSX.IntrinsicElements["input"] & JSX.IntrinsicElements["textarea"],) => { let { label, textarea, ...inputProps } = props; let style = ` appearance-none resize-none w-full bg-transparent outline-hidden focus:outline-0 font-normal not-italic text-base text-primary disabled:text-tertiary disabled:cursor-not-allowed ${props.className}`; return ( <label className={`input-with-border flex flex-col gap-px leading-tight py-1! px-[6px]! ${props.disabled && "bg-border-light! cursor-not-allowed! hover:border-border! text-tertiary!"}`} > <div className="text-tertiary text-sm font-bold italic"> {props.label} </div> {textarea ? ( <textarea {...inputProps} className={style} /> ) : ( <Input {...inputProps} className={style} /> )} </label> );};