variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

input to multiline

Browse source
This commit is contained in:
jrkb 2023-05-02 13:58:48 +02:00
parent b9da444473
commit 94dada8c42
2 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx
View file

@ -18,7 +18,7 @@ const Container = deriver(styled.div<{
isHighlighted: PropHighlighted isHighlighted: PropHighlighted
}>` }>`
display: flex; display: flex;
height: 30px; min-height: 30px;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
// We cannot calculate both the container (details panel) width and the descendant // We cannot calculate both the container (details panel) width and the descendant

12
theatre/studio/src/uiComponents/form/BasicStringInput.tsx
View file

@ -6,7 +6,7 @@ import mergeRefs from 'react-merge-refs'
import useRefAndState from '@theatre/studio/utils/useRefAndState' import useRefAndState from '@theatre/studio/utils/useRefAndState'
import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside' import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside'
const Input = styled.input.attrs({type: 'text'})` const StyledTextarea = styled.textarea.attrs({type: 'text'})`
background: transparent; background: transparent;
border: 1px solid transparent; border: 1px solid transparent;
color: rgba(0, 146, 255, 1); color: rgba(0, 146, 255, 1);
@ -59,7 +59,7 @@ const BasicStringInput: React.FC<{
permanentlySetValue: (v: string) => void permanentlySetValue: (v: string) => void
className?: string className?: string
isValid?: (v: string) => boolean 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 * 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. * 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) const propsRef = useRef(props)
propsRef.current = props propsRef.current = props
const inputRef = useRef<HTMLInputElement | null>(null) const inputRef = useRef<HTMLTextAreaElement | null>(null)
useOnClickOutside( useOnClickOutside(
inputRef.current, inputRef.current,
@ -85,7 +85,7 @@ const BasicStringInput: React.FC<{
const callbacks = useMemo(() => { const callbacks = useMemo(() => {
const inputChange = (e: React.ChangeEvent) => { const inputChange = (e: React.ChangeEvent) => {
const target = e.target as HTMLInputElement const target = e.target as HTMLTextAreaElement
const {value} = target const {value} = target
const curState = stateRef.current as IState_EditingViaKeyboard const curState = stateRef.current as IState_EditingViaKeyboard
@ -124,7 +124,7 @@ const BasicStringInput: React.FC<{
propsRef.current.discardTemporaryValue() propsRef.current.discardTemporaryValue()
stateRef.current = {mode: 'noFocus'} stateRef.current = {mode: 'noFocus'}
inputRef.current!.blur() inputRef.current!.blur()
} else if (e.key === 'Enter' || e.key === 'Tab') { } else if (e.key === 'Tab') {
commitKeyboardInput() commitKeyboardInput()
inputRef.current!.blur() inputRef.current!.blur()
} }
@ -186,7 +186,7 @@ const BasicStringInput: React.FC<{
if (props.inputRef) _refs.push(props.inputRef) if (props.inputRef) _refs.push(props.inputRef)
const theInput = ( const theInput = (
<Input <StyledTextarea
key="input" key="input"
type="text" type="text"
className={`${props.className ?? ''} ${!isValid(value) ? 'invalid' : ''}`} className={`${props.className ?? ''} ${!isValid(value) ? 'invalid' : ''}`}