Line data Source code
1 : /*
2 : * Copyright (C) 2024 Red Hat, Inc.
3 : * SPDX-License-Identifier: LGPL-2.1-or-later
4 : */
5 :
6 5 : import cockpit from "cockpit";
7 :
8 5 : import React, { useState } from "react";
9 :
10 : import { Checkbox } from "@patternfly/react-core/dist/esm/components/Checkbox/index.js";
11 : import { TypeaheadSelect, TypeaheadSelectOption } from "cockpit-components-typeahead-select";
12 :
13 5 : const Typeahead = ({ options } : { options: TypeaheadSelectOption[] }) => {
14 5 : const [isCreatable, setIsCreatable] = useState(false);
15 5 : const [notFoundIsString, setNotFoundIsString] = useState(false);
16 5 : const [value, setValue] = useState<string | number | null>();
17 5 : const [toggles, setToggles] = useState(0);
18 5 : const [changes, setChanges] = useState(0);
19 :
20 5 : return (
21 5 : <div>
22 5 : <TypeaheadSelect
23 5 : id='typeahead-widget'
24 5 : placeholder="Select a state"
25 5 : isScrollable
26 1 : noOptionsFoundMessage={notFoundIsString ? "Not found" : val => cockpit.format("'$0' not found", val) }
27 5 : isCreatable={isCreatable}
28 1 : createOptionMessage={val => cockpit.format("Create $0", val)}
29 1 : onClearSelection={() => setValue(null)}
30 5 : selectOptions={options}
31 5 : selected={value}
32 1 : onSelect={(_, value) => setValue(value) }
33 1 : onToggle={() => setToggles(val => val + 1)}
34 1 : onInputChange={() => setChanges(val => val + 1)}
35 5 : />
36 5 : <div>Selected: <span id="value">{value || "-"}</span></div>
37 5 : <div>Toggles: <span id="toggles">{toggles}</span></div>
38 5 : <div>Changes: <span id="changes">{changes}</span></div>
39 5 : <Checkbox
40 5 : id="isCreatable"
41 5 : label="isCreatable"
42 5 : isChecked={isCreatable}
43 1 : onChange={(_event, checked) => setIsCreatable(checked)}
44 5 : />
45 5 : <Checkbox
46 5 : id="notFoundIsString"
47 5 : label="notFoundIsString"
48 5 : isChecked={notFoundIsString}
49 1 : onChange={(_event, checked) => setNotFoundIsString(checked)}
50 5 : />
51 5 : </div>
52 : );
53 5 : };
54 :
55 5 : export const TypeaheadDemo = () => {
56 5 : const states: Record<string, string> = {
57 5 : AL: "Alabama",
58 5 : AK: "Alaska",
59 5 : AZ: "Arizona",
60 5 : AR: "Arkansas",
61 5 : CA: "California",
62 5 : CO: "Colorado",
63 5 : CT: "Connecticut",
64 5 : DE: "Delaware",
65 5 : FL: "Florida",
66 5 : GA: "Georgia",
67 5 : HI: "Hawaii",
68 5 : ID: "Idaho",
69 5 : IL: "Illinois",
70 5 : IN: "Indiana",
71 5 : IA: "Iowa",
72 5 : KS: "Kansas",
73 5 : KY: "Kentucky",
74 5 : LA: "Louisiana",
75 5 : ME: "Maine",
76 5 : MD: "Maryland",
77 5 : MA: "Massachusetts",
78 5 : MI: "Michigan",
79 5 : MN: "Minnesota",
80 5 : MS: "Mississippi",
81 5 : MO: "Missouri",
82 5 : MT: "Montana",
83 5 : NE: "Nebraska",
84 5 : NV: "Nevada",
85 5 : NH: "New Hampshire",
86 5 : NJ: "New Jersey",
87 5 : NM: "New Mexico",
88 5 : NY: "New York",
89 5 : NC: "North Carolina",
90 5 : ND: "North Dakota",
91 5 : OH: "Ohio",
92 5 : OK: "Oklahoma",
93 5 : OR: "Oregon",
94 5 : PA: "Pennsylvania",
95 5 : RI: "Rhode Island",
96 5 : SC: "South Carolina",
97 5 : SD: "South Dakota",
98 5 : TN: "Tennessee",
99 5 : TX: "Texas",
100 5 : UT: "Utah",
101 5 : VT: "Vermont",
102 5 : VA: "Virginia",
103 5 : WA: "Washington",
104 5 : WV: "West Virginia",
105 5 : WI: "Wisconsin",
106 5 : WY: "Wyoming",
107 5 : };
108 :
109 5 : const options: TypeaheadSelectOption[] = [];
110 5 : let last = "";
111 :
112 5 : options.push({ value: "start", content: "The Start" });
113 :
114 5 : for (const st of Object.keys(states).sort()) {
115 5 : if (st[0] != last) {
116 5 : options.push({ decorator: "divider", key: "_divider-" + st });
117 5 : options.push({
118 5 : decorator: "header",
119 5 : key: "_header-" + st,
120 5 : content: "Starting with " + st[0]
121 5 : });
122 5 : last = st[0];
123 5 : }
124 5 : options.push({ value: st, content: states[st] });
125 5 : }
126 :
127 5 : options.push({ decorator: "divider", key: "_divider-end" });
128 5 : options.push({ value: "end", content: "The End" });
129 :
130 5 : return <Typeahead options={options} />;
131 5 : };
|
