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

Implement BooleanPropEditor

Browse source
This commit is contained in:
Aria Minaei 2021-07-05 00:30:50 +02:00
parent 055c5392b9
commit 9d514362da
3 changed files with 97 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx Normal file
View file

@ -0,0 +1,91 @@
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 from 'styled-components'
import {
shadeToColor,
useEditingToolsForPrimitiveProp,
} from './useEditingToolsForPrimitiveProp'
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 BooleanPropEditor: React.FC<{
propConfig: PropTypeConfig_Boolean
pointerToProp: SheetObject['propsP']
obj: SheetObject
}> = ({propConfig, pointerToProp, obj}) => {
const stuff = useEditingToolsForPrimitiveProp<boolean>(pointerToProp, obj)
const label = last(getPointerParts(pointerToProp).path)
const [labelRef, labelNode] = useRefAndState<HTMLDivElement | null>(null)
const [contextMenu] = useContextMenu(labelNode, {
items: stuff.contextMenuItems,
})
const onChange = useCallback(
(el: React.ChangeEvent<HTMLInputElement>) => {
window.ppause = true
stuff.permenantlySetValue(Boolean(el.target.checked))
},
[propConfig, pointerToProp, obj],
)
const color = shadeToColor[stuff.shade]
return (
<Container>
{contextMenu}
<Label ref={labelRef}>{label}</Label>
{stuff.controlIndicators}
<Body>
<input type="checkbox" checked={stuff.value} onChange={onChange} />
{/* <BasicNumberEditor
value={stuff.value}
temporarilySetValue={stuff.temporarilySetValue}
discardTemporaryValue={stuff.discardTemporaryValue}
permenantlySetValue={stuff.permenantlySetValue}
/> */}
</Body>
</Container>
)
}
export default BooleanPropEditor

9
theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx
View file

@ -2,6 +2,7 @@ import type {PropTypeConfig} from '@theatre/core/propTypes'
import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
import {getPointerParts} from '@theatre/dataverse'
import React from 'react'
import BooleanPropEditor from './BooleanPropEditor'
import CompoundPropEditor from './CompoundPropEditor'
import NumberPropEditor from './NumberPropEditor'
@ -62,10 +63,10 @@ const propEditorByPropType: {
} = {
compound: CompoundPropEditor,
number: NumberPropEditor,
string: () => <>Implement me</>,
enum: () => <>Implement me</>,
boolean: () => <>Implement me</>,
stringLiteral: () => <>Implement me</>,
string: () => <></>,
enum: () => <></>,
boolean: BooleanPropEditor,
stringLiteral: () => <></>,
}
const DeterminePropEditor: React.FC<{

8
theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx
View file

@ -64,13 +64,7 @@ const NumberPropEditor: React.FC<{
const color = shadeToColor[stuff.shade]
return (
<Container
style={
{
/* backgroundColor: color */
}
}
>
<Container>
{contextMenu}
<Label ref={labelRef}>{label}</Label>
{stuff.controlIndicators}