input to multiline
This commit is contained in:
parent
b9da444473
commit
94dada8c42
2 changed files with 7 additions and 7 deletions
|
@ -18,7 +18,7 @@ const Container = deriver(styled.div<{
|
|||
isHighlighted: PropHighlighted
|
||||
}>`
|
||||
display: flex;
|
||||
height: 30px;
|
||||
min-height: 30px;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
// We cannot calculate both the container (details panel) width and the descendant
|
||||
|
|
|
@ -6,7 +6,7 @@ import mergeRefs from 'react-merge-refs'
|
|||
import useRefAndState from '@theatre/studio/utils/useRefAndState'
|
||||
import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside'
|
||||
|
||||
const Input = styled.input.attrs({type: 'text'})`
|
||||
const StyledTextarea = styled.textarea.attrs({type: 'text'})`
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
color: rgba(0, 146, 255, 1);
|
||||
|
@ -59,7 +59,7 @@ const BasicStringInput: React.FC<{
|
|||
permanentlySetValue: (v: string) => void
|
||||
className?: string
|
||||
isValid?: (v: string) => boolean
|
||||
inputRef?: MutableRefObject<HTMLInputElement | null>
|
||||
inputRef?: MutableRefObject<HTMLTextAreaElement | null>
|
||||
/**
|
||||
* Called when the user hits Enter. One of the *SetValue() callbacks will be called
|
||||
* before this, so use this for UI purposes such as closing a popover.
|
||||
|
@ -73,7 +73,7 @@ const BasicStringInput: React.FC<{
|
|||
const propsRef = useRef(props)
|
||||
propsRef.current = props
|
||||
|
||||
const inputRef = useRef<HTMLInputElement | null>(null)
|
||||
const inputRef = useRef<HTMLTextAreaElement | null>(null)
|
||||
|
||||
useOnClickOutside(
|
||||
inputRef.current,
|
||||
|
@ -85,7 +85,7 @@ const BasicStringInput: React.FC<{
|
|||
|
||||
const callbacks = useMemo(() => {
|
||||
const inputChange = (e: React.ChangeEvent) => {
|
||||
const target = e.target as HTMLInputElement
|
||||
const target = e.target as HTMLTextAreaElement
|
||||
const {value} = target
|
||||
const curState = stateRef.current as IState_EditingViaKeyboard
|
||||
|
||||
|
@ -124,7 +124,7 @@ const BasicStringInput: React.FC<{
|
|||
propsRef.current.discardTemporaryValue()
|
||||
stateRef.current = {mode: 'noFocus'}
|
||||
inputRef.current!.blur()
|
||||
} else if (e.key === 'Enter' || e.key === 'Tab') {
|
||||
} else if (e.key === 'Tab') {
|
||||
commitKeyboardInput()
|
||||
inputRef.current!.blur()
|
||||
}
|
||||
|
@ -186,7 +186,7 @@ const BasicStringInput: React.FC<{
|
|||
if (props.inputRef) _refs.push(props.inputRef)
|
||||
|
||||
const theInput = (
|
||||
<Input
|
||||
<StyledTextarea
|
||||
key="input"
|
||||
type="text"
|
||||
className={`${props.className ?? ''} ${!isValid(value) ? 'invalid' : ''}`}
|
||||
|
|
Loading…
Reference in a new issue