diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx index 61b3590..16b60ff 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx @@ -5,6 +5,7 @@ import React from 'react' import BooleanPropEditor from './BooleanPropEditor' import CompoundPropEditor from './CompoundPropEditor' import NumberPropEditor from './NumberPropEditor' +import StringLiteralPropEditor from './StringLiteralPropEditor' /** * Returns the PropTypeConfig by path. Assumes `path` is a valid prop path and that @@ -66,7 +67,7 @@ const propEditorByPropType: { string: () => <>, enum: () => <>, boolean: BooleanPropEditor, - stringLiteral: () => <>, + stringLiteral: StringLiteralPropEditor, } const DeterminePropEditor: React.FC<{ diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx new file mode 100644 index 0000000..3b36fc7 --- /dev/null +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx @@ -0,0 +1,91 @@ +import type {PropTypeConfig_StringLiteral} 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 from 'styled-components' +import { + shadeToColor, + useEditingToolsForPrimitiveProp, +} from './useEditingToolsForPrimitiveProp' +import type {$IntentionalAny} from '@theatre/shared/utils/types' + +const Container = styled.div` + display: flex; + height: 30px; + justify-content: flex-end; + align-items: center; +` + +export const NumberPropEditor_theme = { + label: { + color: `#787878`, + }, +} + +const Label = styled.div` + margin-right: 4px; + font-weight: 200; + font-size: 12px; + color: ${NumberPropEditor_theme.label.color}; + cursor: default; + text-align: right; + + &:hover { + color: white; + } +` +const Body = styled.div` + cursor: ew-resize; + display: flex; + width: 140px; + height: 100%; + margin-right: 16px; + margin-left: 4px; +` + +const StringLiteralPropEditor: React.FC<{ + propConfig: PropTypeConfig_StringLiteral<$IntentionalAny> + pointerToProp: SheetObject['propsP'] + obj: SheetObject +}> = ({propConfig, pointerToProp, obj}) => { + const stuff = useEditingToolsForPrimitiveProp(pointerToProp, obj) + + const label = last(getPointerParts(pointerToProp).path) + + const [labelRef, labelNode] = useRefAndState(null) + + const [contextMenu] = useContextMenu(labelNode, { + items: stuff.contextMenuItems, + }) + + const onChange = useCallback( + (el: React.ChangeEvent) => { + stuff.permenantlySetValue(String(el.target.value)) + }, + [propConfig, pointerToProp, obj], + ) + + const color = shadeToColor[stuff.shade] + + return ( + + {contextMenu} + + {stuff.controlIndicators} + + + + + ) +} + +export default StringLiteralPropEditor