|
|
|
import { computed } from "mobx";
|
|
|
|
import { observer } from "mobx-react";
|
|
|
|
import * as React from "react";
|
|
|
|
import { DropdownItemProps, DropdownProps, Form } from "semantic-ui-react";
|
|
|
|
|
|
|
|
import { Section } from "@common/sprinklersRpc";
|
|
|
|
|
|
|
|
import "@client/styles/SectionChooser";
|
|
|
|
|
|
|
|
@observer
|
|
|
|
export default class SectionChooser extends React.Component<{
|
|
|
|
label?: string;
|
|
|
|
inline?: boolean;
|
|
|
|
sections: Section[];
|
|
|
|
sectionId?: number;
|
|
|
|
onChange?: (sectionId: number) => void;
|
|
|
|
}> {
|
|
|
|
render() {
|
|
|
|
const { label, inline, sections, sectionId, onChange } = this.props;
|
|
|
|
if (onChange == null) {
|
|
|
|
const sectionStr =
|
|
|
|
sectionId != null ? sections[sectionId].toString() : "";
|
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
{label || ""} '{sectionStr}'
|
|
|
|
</React.Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
const section = sectionId == null ? "" : sectionId;
|
|
|
|
return (
|
|
|
|
<Form.Select
|
|
|
|
className="sectionChooser"
|
|
|
|
label={label}
|
|
|
|
inline={inline}
|
|
|
|
placeholder="Section"
|
|
|
|
options={this.sectionOptions}
|
|
|
|
value={section}
|
|
|
|
onChange={this.onSectionChange}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
private onSectionChange = (
|
|
|
|
e: React.SyntheticEvent<HTMLElement>,
|
|
|
|
v: DropdownProps
|
|
|
|
) => {
|
|
|
|
this.props.onChange!(this.props.sections[v.value as number].id);
|
|
|
|
};
|
|
|
|
|
|
|
|
@computed
|
|
|
|
private get sectionOptions(): DropdownItemProps[] {
|
|
|
|
return this.props.sections.map((s, i) => ({
|
|
|
|
text: s ? `${s.id}: ${s.name}` : null,
|
|
|
|
value: i
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
}
|