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