Small styling refactor

2021-07-09 15:28:31 +02:00 · 2021-07-09 15:28:31 +02:00 · 5bf5fc7076
commit 5bf5fc7076
parent 230225ed2c
7 changed files with 93 additions and 93 deletions
--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx
@ -1,84 +1,8 @@
-import type {
-  PropTypeConfig,
-  PropTypeConfig_Boolean,
-} from '@theatre/core/propTypes'
+import type {PropTypeConfig_Boolean} from '@theatre/core/propTypes'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
-import useContextMenu from '@theatre/studio/uiComponents/simpleContextMenu/useContextMenu'
-import useRefAndState from '@theatre/studio/utils/useRefAndState'
-import {getPointerParts} from '@theatre/dataverse'
-import {last} from 'lodash-es'
 import React, {useCallback} from 'react'
-import styled, {css} from 'styled-components'
-import {
-  shadeToColor,
-  useEditingToolsForPrimitiveProp,
-} from './useEditingToolsForPrimitiveProp'
-
-export const labelText = css`
-  font-weight: 300;
-  font-size: 11px;
-  color: #9a9a9a;
-  text-shadow: 0.5px 0.5px 2px black;
-
-  &:hover {
-    color: white;
-  }
-`
-
-const Container = styled.div`
-  display: flex;
-  height: 30px;
-  justify-content: flex-end;
-  align-items: center;
-`
-
-const Label = styled.label`
-  margin-right: 4px;
-  text-align: right;
-  ${labelText};
-`
-const Body = styled.label`
-  display: flex;
-  align-items: center;
-  padding-left: 8px;
-  box-sizing: border-box;
-  width: 140px;
-  height: 100%;
-  margin-right: 16px;
-  margin-left: 4px;
-`
-
-export const PrimitivePropEditor: React.FC<{
-  propConfig: PropTypeConfig
-  pointerToProp: SheetObject['propsP']
-  stuff: ReturnType<typeof useEditingToolsForPrimitiveProp>
-}> = ({propConfig, pointerToProp, stuff, children}) => {
-  const label = propConfig.label ?? last(getPointerParts(pointerToProp).path)
-
-  const [labelRef, labelNode] = useRefAndState<HTMLLabelElement | null>(null)
-
-  const [contextMenu] = useContextMenu(labelNode, {
-    items: stuff.contextMenuItems,
-  })
-
-  const color = shadeToColor[stuff.shade]
-
-  return (
-    <Container>
-      {contextMenu}
-      <Label
-        ref={labelRef}
-        title={['obj', 'props', ...getPointerParts(pointerToProp).path].join(
-          '.',
-        )}
-      >
-        {label}
-      </Label>
-      {stuff.controlIndicators}
-      <Body>{children}</Body>
-    </Container>
-  )
-}
+import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
+import {SingleRowPropEditor} from './utils/SingleRowPropEditor'

 const BooleanPropEditor: React.FC<{
  propConfig: PropTypeConfig_Boolean
@ -95,9 +19,9 @@ const BooleanPropEditor: React.FC<{
  )

  return (
-    <PrimitivePropEditor {...{stuff, propConfig, pointerToProp}}>
+    <SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
      <input type="checkbox" checked={stuff.value} onChange={onChange} />
-    </PrimitivePropEditor>
+    </SingleRowPropEditor>
  )
 }

--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
@ -13,7 +13,7 @@ import {GoChevronRight} from 'react-icons/go'
 import styled from 'styled-components'
 import DeterminePropEditor from './DeterminePropEditor'
 import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors'
-import {labelText} from './BooleanPropEditor'
+import {labelText} from './utils/SingleRowPropEditor'

 const Container = styled.div<{depth: number}>`
  --depth: ${(props) => props.depth};
--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx
@ -2,8 +2,8 @@ import type {PropTypeConfig_Number} from '@theatre/core/propTypes'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
 import BasicNumberEditor from '@theatre/studio/uiComponents/form/BasicNumberEditor'
 import React from 'react'
-import {useEditingToolsForPrimitiveProp} from './useEditingToolsForPrimitiveProp'
-import {PrimitivePropEditor} from './BooleanPropEditor'
+import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
+import {SingleRowPropEditor} from './utils/SingleRowPropEditor'

 const NumberPropEditor: React.FC<{
  propConfig: PropTypeConfig_Number
@ -13,14 +13,14 @@ const NumberPropEditor: React.FC<{
  const stuff = useEditingToolsForPrimitiveProp<number>(pointerToProp, obj)

  return (
-    <PrimitivePropEditor {...{stuff, propConfig, pointerToProp}}>
+    <SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
      <BasicNumberEditor
        value={stuff.value}
        temporarilySetValue={stuff.temporarilySetValue}
        discardTemporaryValue={stuff.discardTemporaryValue}
        permenantlySetValue={stuff.permenantlySetValue}
      />
-    </PrimitivePropEditor>
+    </SingleRowPropEditor>
  )
 }

--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx
@ -1,11 +1,11 @@
 import type {PropTypeConfig_StringLiteral} from '@theatre/core/propTypes'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
 import React, {useCallback} from 'react'
-import {useEditingToolsForPrimitiveProp} from './useEditingToolsForPrimitiveProp'
+import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
 import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import BasicSwitchEditor from '@theatre/studio/uiComponents/form/BasicSwitchEditor'
 import BasicSelectEditor from '@theatre/studio/uiComponents/form/BasicSelectEditor'
-import {PrimitivePropEditor} from './BooleanPropEditor'
+import {SingleRowPropEditor} from './utils/SingleRowPropEditor'

 const StringLiteralPropEditor: React.FC<{
  propConfig: PropTypeConfig_StringLiteral<$IntentionalAny>
@ -22,7 +22,7 @@ const StringLiteralPropEditor: React.FC<{
  )

  return (
-    <PrimitivePropEditor {...{stuff, propConfig, pointerToProp}}>
+    <SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
      {propConfig.as === 'menu' ? (
        <BasicSelectEditor
          value={stuff.value}
@ -36,7 +36,7 @@ const StringLiteralPropEditor: React.FC<{
          options={propConfig.options}
        />
      )}
-    </PrimitivePropEditor>
+    </SingleRowPropEditor>
  )
 }

--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx
@ -0,0 +1,76 @@
+import type * as propTypes from '@theatre/core/propTypes'
+import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
+import {getPointerParts} from '@theatre/dataverse'
+import useContextMenu from '@theatre/studio/uiComponents/simpleContextMenu/useContextMenu'
+import useRefAndState from '@theatre/studio/utils/useRefAndState'
+import {last} from 'lodash-es'
+import React from 'react'
+import type {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
+import {shadeToColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
+import styled, {css} from 'styled-components'
+
+export const labelText = css`
+  font-weight: 300;
+  font-size: 11px;
+  color: #9a9a9a;
+  text-shadow: 0.5px 0.5px 2px black;
+
+  &:hover {
+    color: white;
+  }
+`
+
+const Container = styled.div`
+  display: flex;
+  height: 30px;
+  justify-content: flex-end;
+  align-items: center;
+`
+
+const Label = styled.label`
+  margin-right: 4px;
+  text-align: right;
+  ${labelText};
+`
+const Body = styled.label`
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+  box-sizing: border-box;
+  width: 140px;
+  height: 100%;
+  margin-right: 16px;
+  margin-left: 4px;
+`
+
+export const SingleRowPropEditor: React.FC<{
+  propConfig: propTypes.PropTypeConfig
+  pointerToProp: SheetObject['propsP']
+  stuff: ReturnType<typeof useEditingToolsForPrimitiveProp>
+}> = ({propConfig, pointerToProp, stuff, children}) => {
+  const label = propConfig.label ?? last(getPointerParts(pointerToProp).path)
+
+  const [labelRef, labelNode] = useRefAndState<HTMLLabelElement | null>(null)
+
+  const [contextMenu] = useContextMenu(labelNode, {
+    items: stuff.contextMenuItems,
+  })
+
+  const color = shadeToColor[stuff.shade]
+
+  return (
+    <Container>
+      {contextMenu}
+      <Label
+        ref={labelRef}
+        title={['obj', 'props', ...getPointerParts(pointerToProp).path].join(
+          '.',
+        )}
+      >
+        {label}
+      </Label>
+      {stuff.controlIndicators}
+      <Body>{children}</Body>
+    </Container>
+  )
+}
--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp.tsx
@ -10,8 +10,8 @@ import {getPointerParts, prism, val} from '@theatre/dataverse'
 import get from 'lodash-es/get'
 import last from 'lodash-es/last'
 import React from 'react'
-import DefaultOrStaticValueIndicator from './utils/DefaultValueIndicator'
-import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors'
+import DefaultOrStaticValueIndicator from './DefaultValueIndicator'
+import NextPrevKeyframeCursors from './NextPrevKeyframeCursors'

 interface CommonStuff<T> {
  value: T
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx
@ -8,7 +8,7 @@ import type {Pointer} from '@theatre/dataverse'
 import {val} from '@theatre/dataverse'
 import React, {useCallback, useRef} from 'react'
 import styled from 'styled-components'
-import {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/useEditingToolsForPrimitiveProp'
+import {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
 import {nextPrevCursorsTheme} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/NextPrevKeyframeCursors'
 import {graphEditorColors} from '@theatre/studio/panels/SequenceEditorPanel/GraphEditor/GraphEditor'
 import {BaseHeader, Container as BaseContainer} from './AnyCompositeRow'