import type { Pointer } from '@theatre/dataverse' ; import React , { useLayoutEffect , useMemo , useRef } from 'react' ; import styled from 'styled-components' ; import type { SequenceEditorPanelLayout } from '@theatre/studio/panels/SequenceEditorPanel/layout/layout' ; import { usePrism , useVal } from '@theatre/react' ; import getStudio from '@theatre/studio/getStudio' ; import type { BasicNumberInputNudgeFn } from '@theatre/studio/uiComponents/form/BasicNumberInput' ; import BasicNumberInput from '@theatre/studio/uiComponents/form/BasicNumberInput' ; import type { CommitOrDiscard } from '@theatre/studio/StudioStore/StudioStore' ; import { propNameText } from '@theatre/studio/panels/DetailPanel/propEditors/utils/SingleRowPropEditor' ; const greaterThanZero = ( v ) => isFinite ( v ) && v > 0 ; const Container = styled . div `
  display: flex;
  gap: 8px;
  padding: 4px 8px;
  height: 28px;
  align-items: center;
` ; const Label = styled . div `
  ${ propNameText };
  white-space: nowrap;
` ; const nudge = ( { deltaX } ) => deltaX * 0.25 ; const LengthEditorPopover = ( { layoutP , onRequestClose } ) => { const sheet = useVal ( layoutP . sheet ) ; const fns = useMemo ( ( ) => { let tempTransaction ; return { temporarilySetValue ( newLength ) { if ( tempTransaction ) { tempTransaction . discard ( ) ; tempTransaction = undefined ; } tempTransaction = getStudio ( ) ! . tempTransaction ( ( { stateEditors } ) => { stateEditors . coreByProject . historic . sheetsById . sequence . setLength ( { ... sheet . address , length : newLength , } ) ; } ) ; } , discardTemporaryValue ( ) { if ( tempTransaction ) { tempTransaction . discard ( ) ; tempTransaction = undefined ; } } , permenantlySetValue ( newLength ) { if ( tempTransaction ) { tempTransaction . discard ( ) ; tempTransaction = undefined ; } getStudio ( ) ! . transaction ( ( { stateEditors } ) => { stateEditors . coreByProject . historic . sheetsById . sequence . setLength ( { ... sheet . address , length : newLength , } ) ; } ) ; } , } ; } , [ layoutP , sheet ] ) ; const inputRef = useRef < HTMLInputElement > ( null ) ; useLayoutEffect ( ( ) => { inputRef . current ! . focus ( ) ; } , [ ] ) ; return usePrism ( ( ) => { const sequence = sheet . getSequence ( ) ; const sequenceLength = sequence . length ; return ( < Container > < Label > Sequence length < /Label> < BasicNumberInput value = { sequenceLength } { ... fns } isValid = { greaterThanZero } inputRef = { inputRef } onBlur = { onRequestClose } nudge = { nudge } / > < /Container>); } , [ sheet , fns , inputRef ] ) ; } ; export default LengthEditorPopover ;