diff --git a/app/actions/dat-middleware.js b/app/actions/dat-middleware.js index d953e10c..5fe19fe7 100644 --- a/app/actions/dat-middleware.js +++ b/app/actions/dat-middleware.js @@ -77,10 +77,10 @@ export default class DatMiddleware { this.listeners.forEach(listener => listener(action)) } - async updateTitle ({ key, editValue }) { + async updateTitle ({ key, title }) { const dat = this.dats[key] const filePath = joinPath(dat.path, 'dat.json') - const metadata = { ...dat.dat.metadata, title: editValue } + const metadata = { ...dat.dat.metadata, title: title } try { await writeFile(filePath, JSON.stringify(metadata)) diff --git a/app/components/title-field.js b/app/components/title-field.js index 8d96ceec..2b90ed95 100644 --- a/app/components/title-field.js +++ b/app/components/title-field.js @@ -1,20 +1,21 @@ import React, { Component } from 'react' -import ReactDOM from 'react-dom' import styled from 'styled-components' import Icon from './icon' import { Plain as PlainButton, Green as GreenButton } from './button' const Overlay = styled.div` - position: absolute; + position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.2); + z-index: 1; ` const EditableFieldWrapper = styled.div` position: relative; + z-index: 1; h2 { position: relative; } @@ -36,38 +37,32 @@ const EditableFieldWrapper = styled.div` } ` -const InputFieldStyle = styled.input` +const InputField = styled.input` :focus { outline: none; } ` -class InputField extends Component { - componentDidMount () { - const input = ReactDOM.findDOMNode(this) - input.focus() - input.select() - } - render () { - return - } -} - class TitleField extends Component { - constructor (props) { - super(props) - this.titleInput = React.createRef() + startEditing () { + this.setState({ editing: true }) } onclick (ev) { ev.stopPropagation() ev.preventDefault() - this.setState({ editing: true }) + this.startEditing() + + // setTimeout? Because ref on input is set asynchronously, and later. So we can't do focus, select on it until ref is set + setTimeout(() => { + this.titleInput.focus() + this.titleInput.select() + }, 0) } commit () { const oldValue = this.props.value - const newValue = ReactDOM.findDOMNode(this.titleInput.current).value + const newValue = this.titleInput.value if (oldValue !== newValue) { this.props.onChange(newValue) } @@ -115,12 +110,14 @@ class TitleField extends Component { className='bn f6 pl1 normal w-100' defaultValue={value} onKeyUp={ev => this.handleKeyup(ev)} - ref={this.titleInput} + innerRef={input => { + this.titleInput = input + }} /> - {modified ? ( - this.commit()}>Save + {!modified ? ( + this.commit()}>Save ) : ( - this.cancel()}>Save + this.commit()}>Save )} diff --git a/app/containers/drag-drop.js b/app/containers/drag-drop.js index f2f8970e..17116be8 100644 --- a/app/containers/drag-drop.js +++ b/app/containers/drag-drop.js @@ -34,14 +34,10 @@ const DropIcon = styled(Icon)` color: white; ` -const DragDropContainer = connect(mapStateToProps, mapDispatchToProps)(function ( - props -) { - return ( - - - - ) +const DragDropContainer = connect(mapStateToProps, mapDispatchToProps)(function(props){ + return + + }) export default DragDropContainer