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

Replace few usages of useRefAndState with useState

Browse source
This commit is contained in:
vezwork 2022-05-16 10:48:54 -04:00 committed by Cole Lawrence
parent c5ccb8c28d
commit 1f7206a66f
2 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx
View file

@ -10,7 +10,6 @@ import styled from 'styled-components'
import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
import {includeLockFrameStampAttrs} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider' import {includeLockFrameStampAttrs} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import useRefAndState from '@theatre/studio/utils/useRefAndState'
import useDrag from '@theatre/studio/uiComponents/useDrag' import useDrag from '@theatre/studio/uiComponents/useDrag'
const Container = styled.div` const Container = styled.div`
@ -258,26 +257,26 @@ const HorizontalScrollbar: React.FC<{
return self return self
}, [layoutP, relevantValuesD]) }, [layoutP, relevantValuesD])
const [refRangeDrag, nodeRangeDrag] = useRefAndState<HTMLDivElement | null>( const [rangeDragNode, setRangeDragNode] = useState<HTMLDivElement | null>(
null, null,
) )
useDrag(nodeRangeDrag, { useDrag(rangeDragNode, {
debugName: 'HorizontalScrollbar/onRangeDrag', debugName: 'HorizontalScrollbar/onRangeDrag',
onDragStart: handles.onRangeDragStart, onDragStart: handles.onRangeDragStart,
lockCSSCursorTo: 'ew-resize', lockCSSCursorTo: 'ew-resize',
}) })
const [refRangeStartDrag, nodeRangeStartDrag] = const [rangeStartDragNode, setRangeStartDragNode] =
useRefAndState<HTMLDivElement | null>(null) useState<HTMLDivElement | null>(null)
useDrag(nodeRangeStartDrag, { useDrag(rangeStartDragNode, {
debugName: 'HorizontalScrollbar/onRangeStartDrag', debugName: 'HorizontalScrollbar/onRangeStartDrag',
onDragStart: handles.onRangeStartDragStart, onDragStart: handles.onRangeStartDragStart,
lockCSSCursorTo: 'w-resize', lockCSSCursorTo: 'w-resize',
}) })
const [refRangeEndDrag, nodeRangeEndDrag] = const [rangeEndDragNode, setRangeEndDragNode] =
useRefAndState<HTMLDivElement | null>(null) useState<HTMLDivElement | null>(null)
useDrag(nodeRangeEndDrag, { useDrag(rangeEndDragNode, {
debugName: 'HorizontalScrollbar/onRangeEndDrag', debugName: 'HorizontalScrollbar/onRangeEndDrag',
onDragStart: handles.onRangeEndDragStart, onDragStart: handles.onRangeEndDragStart,
lockCSSCursorTo: 'e-resize', lockCSSCursorTo: 'e-resize',
@ -290,14 +289,14 @@ const HorizontalScrollbar: React.FC<{
> >
<TimeThread> <TimeThread>
<RangeBar <RangeBar
ref={refRangeDrag} ref={setRangeDragNode}
style={{ style={{
width: `${rangeEndX - rangeStartX}px`, width: `${rangeEndX - rangeStartX}px`,
transform: `translate3d(${rangeStartX}px, 0, 0)`, transform: `translate3d(${rangeStartX}px, 0, 0)`,
}} }}
/> />
<RangeStartHandle <RangeStartHandle
ref={refRangeStartDrag} ref={setRangeStartDragNode}
style={{transform: `translate3d(${rangeStartX}px, 0, 0)`}} style={{transform: `translate3d(${rangeStartX}px, 0, 0)`}}
> >
<Tooltip active={beingDragged === 'both' || beingDragged === 'start'}> <Tooltip active={beingDragged === 'both' || beingDragged === 'start'}>
@ -305,7 +304,7 @@ const HorizontalScrollbar: React.FC<{
</Tooltip> </Tooltip>
</RangeStartHandle> </RangeStartHandle>
<RangeEndHandle <RangeEndHandle
ref={refRangeEndDrag} ref={setRangeEndDragNode}
style={{transform: `translate3d(${rangeEndX}px, 0, 0)`}} style={{transform: `translate3d(${rangeEndX}px, 0, 0)`}}
> >
<Tooltip active={beingDragged === 'both' || beingDragged === 'end'}> <Tooltip active={beingDragged === 'both' || beingDragged === 'end'}>

7
theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
View file

@ -1,5 +1,6 @@
import {clamp, isInteger, round} from 'lodash-es' import {clamp, isInteger, round} from 'lodash-es'
import type {MutableRefObject} from 'react' import type {MutableRefObject} from 'react'
import {useState} from 'react'
import React, {useMemo, useRef} from 'react' import React, {useMemo, useRef} from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import mergeRefs from 'react-merge-refs' import mergeRefs from 'react-merge-refs'
@ -320,8 +321,8 @@ const BasicNumberInput: React.FC<{
/> />
) : null ) : null
const [refDrag, nodeDrag] = useRefAndState<HTMLDivElement | null>(null) const [dragNode, setDragNode] = useState<HTMLDivElement | null>(null)
useDrag(nodeDrag, { useDrag(dragNode, {
debugName: 'form/BasicNumberInput', debugName: 'form/BasicNumberInput',
onDragStart: callbacks.transitionToDraggingMode, onDragStart: callbacks.transitionToDraggingMode,
lockCSSCursorTo: 'ew-resize', lockCSSCursorTo: 'ew-resize',
@ -331,7 +332,7 @@ const BasicNumberInput: React.FC<{
return ( return (
<Container className={propsA.className + ' ' + stateRef.current.mode}> <Container className={propsA.className + ' ' + stateRef.current.mode}>
<DragWrap ref={refDrag}>{theInput}</DragWrap> <DragWrap ref={setDragNode}>{theInput}</DragWrap>
{fillIndicator} {fillIndicator}
</Container> </Container>
) )