diff --git a/theatre/studio/src/panels/DetailPanel/propEditors/DeterminePropEditor.tsx b/theatre/studio/src/panels/DetailPanel/propEditors/DeterminePropEditor.tsx index dda8cb9..4a016e2 100644 --- a/theatre/studio/src/panels/DetailPanel/propEditors/DeterminePropEditor.tsx +++ b/theatre/studio/src/panels/DetailPanel/propEditors/DeterminePropEditor.tsx @@ -6,6 +6,7 @@ import BooleanPropEditor from './BooleanPropEditor' import CompoundPropEditor from './CompoundPropEditor' import NumberPropEditor from './NumberPropEditor' import StringLiteralPropEditor from './StringLiteralPropEditor' +import StringPropEditor from './StringPropEditor' /** * Returns the PropTypeConfig by path. Assumes `path` is a valid prop path and that @@ -64,7 +65,7 @@ const propEditorByPropType: { } = { compound: CompoundPropEditor, number: NumberPropEditor, - string: () => <>, + string: StringPropEditor, enum: () => <>, boolean: BooleanPropEditor, stringLiteral: StringLiteralPropEditor, diff --git a/theatre/studio/src/panels/DetailPanel/propEditors/StringPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/propEditors/StringPropEditor.tsx new file mode 100644 index 0000000..3320516 --- /dev/null +++ b/theatre/studio/src/panels/DetailPanel/propEditors/StringPropEditor.tsx @@ -0,0 +1,33 @@ +import type {PropTypeConfig_String} from '@theatre/core/propTypes' +import type SheetObject from '@theatre/core/sheetObjects/SheetObject' +import React, {useCallback} from 'react' +import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp' +import {SingleRowPropEditor} from './utils/SingleRowPropEditor' +import BasicStringInput from '@theatre/studio/uiComponents/form/BasicStringInput' + +const StringPropEditor: React.FC<{ + propConfig: PropTypeConfig_String + pointerToProp: SheetObject['propsP'] + obj: SheetObject +}> = ({propConfig, pointerToProp, obj}) => { + const stuff = useEditingToolsForPrimitiveProp( + pointerToProp, + obj, + propConfig, + ) + + const onChange = useCallback( + (el: React.ChangeEvent) => { + stuff.permenantlySetValue(String(el.target.value)) + }, + [propConfig, pointerToProp, obj], + ) + + return ( + + + + ) +} + +export default StringPropEditor diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx index c5946cb..626247a 100644 --- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx @@ -1,6 +1,4 @@ -import {theme} from '@theatre/studio/css' import {clamp, isInteger, round} from 'lodash-es' -import {darken, lighten} from 'polished' import type {MutableRefObject} from 'react' import React, {useMemo, useRef, useState} from 'react' import styled from 'styled-components' @@ -53,13 +51,6 @@ const Input = styled.input` height: calc(100% - 4px); border-radius: 2px; - /* &:hover, - &:focus, - ${Container}.dragging > & { - background: ${darken(0.9, theme.panel.bg)}; - border: 1px solid ${lighten(0.1, theme.panel.bg)}; - } */ - &:focus { cursor: text; } diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx new file mode 100644 index 0000000..163f2ee --- /dev/null +++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx @@ -0,0 +1,31 @@ +import styled from 'styled-components' + +const BasicStringInput = styled.input.attrs({type: 'text'})` + background: transparent; + border: 1px solid transparent; + color: rgba(255, 255, 255, 0.9); + padding: 1px 6px; + font: inherit; + outline: none; + cursor: text; + text-align: left; + width: 100%; + height: calc(100% - 4px); + border-radius: 2px; + border: 1px solid transparent; + box-sizing: border-box; + + &:hover { + background-color: #10101042; + border-color: #00000059; + } + + &:hover, + &:focus { + cursor: text; + background-color: #10101042; + border-color: #00000059; + } +` + +export default BasicStringInput