|
|
|
|
@ -1,7 +1,9 @@
@@ -1,7 +1,9 @@
|
|
|
|
|
import classNames = require("classnames"); |
|
|
|
|
import { observer } from "mobx-react"; |
|
|
|
|
import * as React from "react"; |
|
|
|
|
import { Form, List } from "semantic-ui-react"; |
|
|
|
|
import * as ReactDOM from "react-dom"; |
|
|
|
|
import { SortableContainer, SortableElement, SortableHandle, SortEnd, arrayMove } from "react-sortable-hoc"; |
|
|
|
|
import { Form, Icon, List } from "semantic-ui-react"; |
|
|
|
|
|
|
|
|
|
import { DurationView, SectionChooser } from "@app/components/index"; |
|
|
|
|
import { Duration } from "@common/Duration"; |
|
|
|
|
@ -9,6 +11,8 @@ import { ProgramItem, Section } from "@common/sprinklersRpc";
@@ -9,6 +11,8 @@ import { ProgramItem, Section } from "@common/sprinklersRpc";
|
|
|
|
|
|
|
|
|
|
import "@app/styles/ProgramSequenceView"; |
|
|
|
|
|
|
|
|
|
const Handle = SortableHandle(() => <Icon name="bars"/>); |
|
|
|
|
|
|
|
|
|
@observer |
|
|
|
|
class ProgramSequenceItem extends React.Component<{ |
|
|
|
|
sequenceItem: ProgramItem, sections: Section[], onChange?: (newItem: ProgramItem) => void, |
|
|
|
|
@ -21,17 +25,15 @@ class ProgramSequenceItem extends React.Component<{
@@ -21,17 +25,15 @@ class ProgramSequenceItem extends React.Component<{
|
|
|
|
|
|
|
|
|
|
if (editing) { |
|
|
|
|
return ( |
|
|
|
|
<Form.Group inline> |
|
|
|
|
<Form.Group> |
|
|
|
|
<SectionChooser |
|
|
|
|
label="Section" |
|
|
|
|
inline |
|
|
|
|
sections={sections} |
|
|
|
|
value={section} |
|
|
|
|
onChange={this.onSectionChange} |
|
|
|
|
/> |
|
|
|
|
<DurationView |
|
|
|
|
label="Duration" |
|
|
|
|
inline |
|
|
|
|
duration={duration} |
|
|
|
|
onDurationChange={this.onDurationChange} |
|
|
|
|
/> |
|
|
|
|
@ -48,11 +50,12 @@ class ProgramSequenceItem extends React.Component<{
@@ -48,11 +50,12 @@ class ProgramSequenceItem extends React.Component<{
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
const editing = this.props.onChange != null; |
|
|
|
|
return ( |
|
|
|
|
<List.Item> |
|
|
|
|
<List.Icon name="caret right"/> |
|
|
|
|
<li className="programSequence-item ui form"> |
|
|
|
|
{editing ? <Handle /> : <List.Icon name="caret right"/>} |
|
|
|
|
<List.Content>{this.renderContent()}</List.Content> |
|
|
|
|
</List.Item> |
|
|
|
|
</li> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -75,22 +78,65 @@ class ProgramSequenceItem extends React.Component<{
@@ -75,22 +78,65 @@ class ProgramSequenceItem extends React.Component<{
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const ProgramSequenceItemD = SortableElement(ProgramSequenceItem); |
|
|
|
|
|
|
|
|
|
type ItemChangeHandler = (newItem: ProgramItem, index: number) => void; |
|
|
|
|
|
|
|
|
|
const ProgramSequenceList = SortableContainer(observer(({ className, list, sections, onChange }: { |
|
|
|
|
className: string, |
|
|
|
|
list: ProgramItem[], |
|
|
|
|
sections: Section[], |
|
|
|
|
onChange?: ItemChangeHandler, |
|
|
|
|
}) => { |
|
|
|
|
const listItems = list.map((item, index) => { |
|
|
|
|
const onChangeHandler = onChange ? (newItem: ProgramItem) => onChange(newItem, index) : undefined; |
|
|
|
|
const key = `item-${index}`; |
|
|
|
|
return ( |
|
|
|
|
<ProgramSequenceItemD |
|
|
|
|
sequenceItem={item} |
|
|
|
|
sections={sections} |
|
|
|
|
key={key} |
|
|
|
|
index={index} |
|
|
|
|
onChange={onChangeHandler} |
|
|
|
|
/> |
|
|
|
|
); |
|
|
|
|
}); |
|
|
|
|
return <ul className={className}>{listItems}</ul>; |
|
|
|
|
}), { withRef: true }); |
|
|
|
|
|
|
|
|
|
@observer |
|
|
|
|
export default class ProgramSequenceView extends React.Component<{ |
|
|
|
|
class ProgramSequenceView extends React.Component<{ |
|
|
|
|
sequence: ProgramItem[], sections: Section[], editing?: boolean, |
|
|
|
|
}> { |
|
|
|
|
render() { |
|
|
|
|
const { sequence, sections } = this.props; |
|
|
|
|
const editing = this.props.editing || false; |
|
|
|
|
const className = classNames("programSequence", { editing }); |
|
|
|
|
const sequenceItems = sequence.map((item, index) => { |
|
|
|
|
const onChange = editing ? (newItem: ProgramItem) => this.changeItem(newItem, index) : undefined; |
|
|
|
|
return <ProgramSequenceItem sequenceItem={item} sections={sections} key={index} onChange={onChange}/>; |
|
|
|
|
}); |
|
|
|
|
return <List className={className}>{sequenceItems}</List>; |
|
|
|
|
const onChange = editing ? this.changeItem : undefined; |
|
|
|
|
return ( |
|
|
|
|
<ProgramSequenceList |
|
|
|
|
className={className} |
|
|
|
|
useDragHandle |
|
|
|
|
list={sequence} |
|
|
|
|
sections={sections} |
|
|
|
|
onChange={onChange} |
|
|
|
|
onSortEnd={this.onSortEnd} |
|
|
|
|
/> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
private changeItem = (newItem: ProgramItem, index: number) => { |
|
|
|
|
private changeItem: ItemChangeHandler = (newItem, index) => { |
|
|
|
|
this.props.sequence[index] = newItem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
private onSortEnd = ({oldIndex, newIndex}: SortEnd) => { |
|
|
|
|
const { sequence: array } = this.props; |
|
|
|
|
if (newIndex >= array.length) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
array.splice(newIndex, 0, array.splice(oldIndex, 1)[0]); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const ProgramSequenceViewD = SortableContainer(ProgramSequenceView); |
|
|
|
|
export default ProgramSequenceViewD; |
|
|
|
|
|
