diff --git a/src/panels/config/js/script/action_row.tsx b/src/panels/config/js/script/action_row.tsx index 0073d11e38..31b4397b44 100644 --- a/src/panels/config/js/script/action_row.tsx +++ b/src/panels/config/js/script/action_row.tsx @@ -9,8 +9,10 @@ import ActionEdit from "./action_edit"; export default class Action extends Component { public state: { yamlMode: boolean }; - constructor() { - super(); + private moveUp: (event: Event) => void; + private moveDown: (event: Event) => void; + constructor(props) { + super(props); this.state = { yamlMode: false, @@ -18,6 +20,8 @@ export default class Action extends Component { this.onDelete = this.onDelete.bind(this); this.switchYamlMode = this.switchYamlMode.bind(this); + this.moveUp = props.moveUp.bind(this, props.index); + this.moveDown = props.moveDown.bind(this, props.index); } public onDelete() { @@ -38,6 +42,12 @@ export default class Action extends Component {
+ {props.index !== 0 && ( + + )} + {props.index !== props.length - 1 && ( + + )} { this.addAction = this.addAction.bind(this); this.actionChanged = this.actionChanged.bind(this); + this.moveUp = this.moveUp.bind(this); + this.moveDown = this.moveDown.bind(this); } public addAction() { @@ -32,14 +34,25 @@ export default class Script extends Component { this.props.onChange(script); } + public moveUp(index: number) { + this.move(index, index - 1); + } + + public moveDown(index: number) { + this.move(index, index + 1); + } + public render({ script, hass, localize }) { return (
{script.map((act, idx) => ( @@ -54,4 +67,11 @@ export default class Script extends Component {
); } + + private move(index: number, newIndex: number) { + const script = this.props.script.concat(); + const action = script.splice(index, 1)[0]; + script.splice(newIndex, 0, action); + this.props.onChange(script); + } }