I've been trying to implement React Dragula (link: https://github.com/bevacqua/react-dragula) and keep coming up with an error because I'm sure my syntax is incorrect. Can someone let me know what I'm doing wrong here?
All I'm trying to do is make the <div> below to become a sortable drag and drop list (this proves to be a lot harder than I'd hoped). React DND is an option however I've run into a fair amount of issues and this appears to be a little more simpler.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Icon} from 'react-fa';
import { Row, Col } from 'react-flexbox-grid';
import styled from 'styled-components';
import Dragula from 'react-dragula';
const style = {
cursor: 'move',
};
const CountCell = styled.div`
border: 1px solid #5C57B1;
background: #6E68C5
width: 320px;
display: flex;
justify-content: center;
height: 50px;
align-items: center;
`
const Score = styled.span`
color: #74D8FF;
font-size: 26px;
font-weight: bold;
padding: 0 0.5em;
display: inline-block;
width: 30px;
text-align: center;
`
const ScoreName = styled.span`
color: white;
font-size: 20px;
padding: 0 0.5em;
display: inline-block;
width: 160px;
text-align: center;
`
const CountButton = styled.button`
display: flex;
justify-content: center;
align-items: center;
align-content: center;
background: #6E68C5;
height: 30px;
border: 0;
border-radius: 50px;
border: 3px solid white;
width: 30px;
transition: all 250ms;
&:focus {outline:0;}
&:hover {background: white;}
`
class Counter extends Component {
incrementCount(e) {
// I need to update the current state's count, and add 1 to it.
this.setState({
count: (this.state.count + 1),
})
}
decrementCount(e) {
this.setState({
count: (this.state.count - 1),
})
}
render() {
const { count } = this.props
const { decrementCount } = this.props
const { incrementCount } = this.props
const { nameof } = this.props
const { text, isDragging, connectDragSource, connectDropTarget } = this.props;
const opacity = isDragging ? 0 : 1;
return (
<div className='container' style={{ ...style, opacity }} ref={this.dragulaDecorator}>
<CountCell>
<Row style={{alignItems: 'center'}}>
<Col>
<CountButton
onClick={incrementCount}>
<Icon
name="icon" className="fa fa-plus score-icon"
/>
</CountButton>
</Col>
<Col >
<ScoreName>{nameof}</ScoreName>
</Col>
<Col >
<Score>{count}</Score>
</Col>
<Col>
<CountButton
onClick={decrementCount}>
<Icon
name="icon" className="fa fa-minus score-icon"
/>
</CountButton>
</Col>
</Row>
</CountCell>
</div>
)
}
}
Counter.propTypes = {
// We are going to _require_ a prop called "count". It _has_ to be a Number.
count: PropTypes.number.isRequired,
// We are going to _require_ a prop called "incrementCount". It _has_ to be a Function.
incrementCount: PropTypes.func.isRequired,
// We are going to _require_ a prop called "decrementCount". It _has_ to be a Function.
decrementCount: PropTypes.func.isRequired,
nameof: PropTypes.string.isRequired,
},
componentDidMount: function () {
var container = React.findDOMNode(this);
dragula([container]);
}
});
export default Counter
The error I get is:
./src/components/pages/projectpages/dnd2/Counter.js
Syntax error: Unexpected token, expected ; (127:17)
125 | nameof: PropTypes.string.isRequired,
126 | },
> 127 | componentDidMount: function () {
| ^
128 | var container = React.findDOMNode(this);
129 | dragula([container]);
130 | }
Should your component be like this?
import Dragula from 'react-dragula';
class Counter extends Component {
incrementCount(e) {
// I need to update the current state's count, and add 1 to it.
this.setState({
count: (this.state.count + 1),
})
}
decrementCount(e) {
this.setState({
count: (this.state.count - 1),
})
}
render() {
const { count } = this.props
const { decrementCount } = this.props
const { incrementCount } = this.props
const { nameof } = this.props
const { text, isDragging, connectDragSource, connectDropTarget } = this.props;
const opacity = isDragging ? 0 : 1;
return (
<div className='container' style={{ ...style, opacity }} ref={this.dragulaDecorator}>
<CountCell>
<Row style={{ alignItems: 'center' }}>
<Col>
<CountButton
onClick={incrementCount}>
<Icon
name="icon" className="fa fa-plus score-icon"
/>
</CountButton>
</Col>
<Col >
<ScoreName>{nameof}</ScoreName>
</Col>
<Col >
<Score>{count}</Score>
</Col>
<Col>
<CountButton
onClick={decrementCount}>
<Icon
name="icon" className="fa fa-minus score-icon"
/>
</CountButton>
</Col>
</Row>
</CountCell>
</div>
)
}
dragulaDecorator = (componentBackingInstance) => {
if (componentBackingInstance) {
let options = {};
Dragula([componentBackingInstance], options);
}
};
}
Counter.propTypes = {
// We are going to _require_ a prop called "count". It _has_ to be a Number.
count: PropTypes.number.isRequired,
// We are going to _require_ a prop called "incrementCount". It _has_ to be a Function.
incrementCount: PropTypes.func.isRequired,
// We are going to _require_ a prop called "decrementCount". It _has_ to be a Function.
decrementCount: PropTypes.func.isRequired,
nameof: PropTypes.string.isRequired,
}
export default Counter;