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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import * as React from "react"
import { EntityPicker } from "./EntityPicker"
import { observer } from "mobx-react"
import {
SampleColumnSlugs,
SynthesizeGDPTable,
} from "../../../coreTable/OwidTableSynthesizers"
import { SortOrder } from "../../../coreTable/CoreTableConstants"
import {
EntityName,
OwidTableSlugs,
} from "../../../coreTable/OwidTableConstants"
import { EntityPickerManager } from "./EntityPickerConstants"
import { computed, observable } from "mobx"
import { SelectionArray } from "../../selection/SelectionArray"
import { ColumnSlug } from "../../../clientUtils/owidTypes"
class PickerHolder extends React.Component {
render(): JSX.Element {
return (
<div
style={{
padding: "20px",
height: "500px",
width: "300px",
display: "grid",
}}
>
{this.props.children}
</div>
)
}
}
const defaultSlugs = [
OwidTableSlugs.entityName,
SampleColumnSlugs.GDP,
SampleColumnSlugs.Population,
]
// A stub class for testing
@observer
class SomeThingWithAPicker
extends React.Component<{
pickerSlugs?: ColumnSlug[]
selection?: EntityName[]
}>
implements EntityPickerManager
{
entityPickerTable = SynthesizeGDPTable({ entityCount: 30 }, 1)
@observable entityPickerMetric?: ColumnSlug
@observable entityPickerSort?: SortOrder
@computed get pickerColumnSlugs(): string[] | undefined {
return this.props.pickerSlugs
}
selection = new SelectionArray(
this.props.selection ?? [],
this.entityPickerTable.availableEntities
)
requiredColumnSlugs = defaultSlugs
render(): JSX.Element {
return (
<PickerHolder>
<EntityPicker manager={this} />
</PickerHolder>
)
}
}
export default {
title: "EntityPicker",
component: EntityPicker,
}
export const Empty = (): JSX.Element => (
<PickerHolder>
<EntityPicker
manager={{
selection: new SelectionArray(),
}}
/>
</PickerHolder>
)
export const WithChoices = (): JSX.Element => <SomeThingWithAPicker />
export const WithPickerMetricsChoices = (): JSX.Element => (
<SomeThingWithAPicker pickerSlugs={defaultSlugs} />
)
export const WithExistingSelectionChoices = (): JSX.Element => (
<SomeThingWithAPicker
pickerSlugs={defaultSlugs}
selection={["Japan", "Samoa"]}
/>
)
|