Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 28x 28x 28x 28x 28x 4x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x 1x | import * as React from "react"
import { computed, action } from "mobx"
import { observer } from "mobx-react"
import Select from "react-select"
import { MapProjectionName, MapProjectionLabels } from "./MapProjections"
import { getStylesForTargetHeight } from "../../clientUtils/react-select"
interface ProjectionChooserEntry {
label: string
value: MapProjectionName
}
@observer
export class ProjectionChooser extends React.Component<{
value: string
onChange: (value: MapProjectionName) => void
}> {
@action.bound onChange(selected: ProjectionChooserEntry | null): void {
if (selected) this.props.onChange(selected.value)
}
@computed get options(): { value: MapProjectionName; label: string }[] {
return Object.values(MapProjectionName).map((projectName) => {
return {
value: projectName,
label: MapProjectionLabels[projectName],
}
})
}
render(): JSX.Element {
const { value } = this.props
const style: React.CSSProperties = {
fontSize: "0.75rem",
pointerEvents: "auto",
}
return (
<div style={style}>
<Select
options={this.options}
onChange={this.onChange}
value={this.options.find((opt) => opt.value === value)}
menuPlacement="bottom"
components={{
IndicatorSeparator: null,
}}
styles={getStylesForTargetHeight(22)}
isSearchable={false}
/>
</div>
)
}
}
|