Created
February 11, 2021 11:29
-
-
Save Otagera/c491622d8a60e3a7c5a4baa6c4cffd27 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import EditableContainer from './EditableContainer'; | |
const App = () => { | |
const handleSingleTap(text){ | |
//carry out what ever we want to do with the text. | |
} | |
const handleDoubleTap(text){ | |
//carry out what ever we want to do with the text. | |
} | |
return( | |
<div> | |
<EditableContainer | |
doubleClick={false} | |
handleEnter={handleSingleTap} | |
className='What-Ever-Classname'> | |
Single tap to edit me!! | |
</EditableContainer> | |
<EditableContainer | |
doubleClick={true} | |
handleEnter={handleDoubleTap} | |
className='What-Ever-Classname'> | |
Double tap to edit me!! | |
</EditableContainer> | |
</div> | |
) | |
} | |
export default App |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
//import settings from '../settings.js' | |
import Field from './FieldStyle'; | |
export default class EditableContainer extends React.Component { | |
constructor (props) { | |
super(props); | |
// init counter | |
this.count = 0; | |
// init state | |
this.state = { | |
edit: false, | |
value: '' | |
} | |
} | |
static getDerivedStateFromProps(props, state){ | |
//console.log(props.lists); | |
if(props.edit){ | |
return { edit: props.edit }; | |
} | |
return null; | |
} | |
componentWillUnmount () { | |
// cancel click callback | |
if (this.timeout) clearTimeout(this.timeout); | |
} | |
handleDoubleClick (e) { | |
// cancel previous callback | |
if (this.timeout) clearTimeout(this.timeout); | |
// increment count | |
this.count++; | |
// schedule new callback [timeBetweenClicks] ms after last click | |
this.timeout = setTimeout(() => { | |
// listen for double clicks | |
if (this.count === 2) { | |
// turn on edit mode | |
this.setState({ | |
edit: true, | |
value: e.target.textContent | |
}) | |
} | |
// reset count | |
this.count = 0 | |
}, 250) // 250 ms | |
//}, settings.timeBetweenClicks) // 250 ms | |
} | |
handleSingleClick (e) { | |
this.setState({ | |
edit: true, | |
}); | |
} | |
handleBlur (e) { | |
// handle saving here | |
// close edit mode | |
this.setState({ | |
edit: false, | |
value: e.target.value | |
}); | |
} | |
handleEnter(e){ | |
if(e.code === "Enter" || e.charCode === 13 || e.which === 13){ | |
this.props.handleEnter(e.target.value); | |
this.setState({ | |
edit: false, | |
value: '' | |
}); | |
} | |
} | |
render () { | |
const {doubleClick, handleEnter, children, ...rest} = this.props; | |
const {edit, value} = this.state; | |
if (edit) { | |
// edit mode | |
return ( | |
<Field | |
autoFocus | |
defaultValue={value} | |
onBlur={this.handleBlur.bind(this)} | |
onKeyPress={this.handleEnter.bind(this)} | |
/> | |
) | |
} else { | |
// view mode | |
if(doubleClick){ | |
return ( | |
<p | |
onClick={this.handleDoubleClick.bind(this)} | |
{...rest} | |
> | |
{children} | |
</p> | |
) | |
}else{ | |
return ( | |
<p | |
onClick={this.handleSingleClick.bind(this)} | |
{...rest} | |
> | |
{children} | |
</p> | |
) | |
} | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
export default class FieldStyle extends React.Component { | |
componentDidMount () { | |
this.ref && this.ref.focus() | |
} | |
render () { | |
const {autoFocus, ...rest} = this.props | |
// auto focus | |
const ref = autoFocus ? (ref) => { this.ref = ref } : null | |
return ( | |
<input | |
ref={ref} | |
type="text" | |
{...rest} | |
/> | |
) | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import App from './App'; | |
ReactDOM.render(<App />, document.getElementById('root')) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment