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 {label || ""} '{sectionStr}'; } const section = (sectionId == null) ? "" : sectionId; return ( ); } private onSectionChange = (e: React.SyntheticEvent, 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, })); } }