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 { MultiTypeaheadSelect, MultiTypeaheadSelectOption } from "cockpit-components-multi-typeahead-select";
12 :
13 5 : const MultiTypeahead = ({ options } : { options: MultiTypeaheadSelectOption[] }) => {
14 5 : const [notFoundIsString, setNotFoundIsString] = useState(false);
15 5 : const [selected, setSelected] = useState<(string | number)[]>([]);
16 5 : const [toggles, setToggles] = useState(0);
17 5 : const [changes, setChanges] = useState(0);
18 :
19 1 : function add(val: string | number) {
20 1 : setSelected(selected.concat([val]));
21 1 : }
22 :
23 1 : function rem(val: string | number) {
24 1 : setSelected(selected.filter(v => v != val));
25 1 : }
26 :
27 5 : return (
28 5 : <div>
29 5 : <MultiTypeaheadSelect
30 5 : id='multi-typeahead-widget'
31 5 : placeholder="Select flavors"
32 5 : isScrollable
33 1 : noOptionsFoundMessage={notFoundIsString ? "Not found" : val => cockpit.format("'$0' not found", val) }
34 5 : options={options}
35 5 : selected={selected}
36 5 : onAdd={add}
37 5 : onRemove={rem}
38 1 : onToggle={() => setToggles(val => val + 1)}
39 1 : onInputChange={() => setChanges(val => val + 1)}
40 5 : />
41 5 : <div>Selected: <span id="multi-value">{JSON.stringify(selected)}</span></div>
42 5 : <div>Toggles: <span id="multi-toggles">{toggles}</span></div>
43 5 : <div>Changes: <span id="multi-changes">{changes}</span></div>
44 5 : <Checkbox
45 5 : id="notFoundIsStringMulti"
46 5 : label="notFoundIsString"
47 5 : isChecked={notFoundIsString}
48 1 : onChange={(_event, checked) => setNotFoundIsString(checked)}
49 5 : />
50 5 : </div>
51 : );
52 5 : };
53 :
54 5 : export const MultiTypeaheadDemo = () => {
55 5 : const flavors: string[] = [
56 5 : "Alumni Swirl",
57 5 : "Apple Cobbler Crunch",
58 5 : "Arboretum Breeze",
59 5 : "August Pie",
60 5 : "Autumn Delight",
61 5 : "Bavarian Raspberry Crunch",
62 5 : "Berkey Brickle",
63 5 : "Birthday Bash",
64 5 : "Bittersweet Mint",
65 5 : "Black Cow",
66 5 : "Black Raspberry",
67 5 : "Blueberry Cheesecake",
68 5 : "Butter Pecan",
69 5 : "Candy Bar/Snickers",
70 5 : "Caramel Critters",
71 5 : "Centennial Vanilla Bean",
72 5 : "Cherry Cheesecake",
73 5 : "Cherry Chip",
74 5 : "Cherry Quist",
75 5 : "Cherry Sherbet",
76 5 : "Chocolate",
77 5 : "Chocolate Cherry Cordia",
78 5 : "Chocolate Chip",
79 5 : "Chocolate Chip Cheesecake",
80 5 : "Chocolate Chip Cookie Dough",
81 5 : "Chocolate Chocolate Nut",
82 5 : "Chocolate Marble",
83 5 : "Chocolate Marshmallow",
84 5 : "Chocolate Pretzel Crunch",
85 5 : "Chunky Chocolate",
86 5 : "Chunky Chocolate- Vanilla",
87 5 : "Coconut Chip",
88 5 : "Coffee Mocha Fudge",
89 5 : "Coffee w/Cream and Sugar",
90 5 : "Crazy Charlie Sundae Swirl",
91 5 : "Death By Chocolate",
92 5 : "Egg Nog",
93 5 : "Espresso Fudge Pie",
94 5 : "German Chocolate Cake",
95 5 : "Golden Chocolate Pecan",
96 5 : "Goo Goo Cluster",
97 5 : "Grape Sherbet",
98 5 : "Happy Happy Joy Joy",
99 5 : "Heath Bar Candy",
100 5 : "Just Fudge",
101 5 : "Kenney Beany Chocolate",
102 5 : "Lion Tracks",
103 5 : "LionS'more",
104 5 : "Mallo Cup",
105 5 : "Maple Nut",
106 5 : "Mint Nittany",
107 5 : "Monster Mash",
108 5 : "Orange Vanilla Sundae",
109 5 : "Palmer Mousseum With Almonds",
110 5 : "Peachy Paterno",
111 5 : "Peanut Butter Cup",
112 5 : "Peanut Butter Fudge Cluster",
113 5 : "Peanut Butter Marshmallow",
114 5 : "Peanut Butter Swirl",
115 5 : "Pecan Apple Danish",
116 5 : "Peppermint Stick",
117 5 : "Pistachio",
118 5 : "Pralines N Cream",
119 5 : "Pumpkin Pie",
120 5 : "Raspberry Fudge Torte",
121 5 : "Raspberry Parfait",
122 5 : "Rum Raisin",
123 5 : "Russ 'Digs' Roseberry",
124 5 : "Santa Fe Banana",
125 5 : "Scholar's Chip",
126 5 : "Sea Salt Chocolate Caramel",
127 5 : "Somerset Shortcake",
128 5 : "Southern Chocolate Pie",
129 5 : "Southern Pecan Cheesecake",
130 5 : "Strawberry",
131 5 : "Strawberry Cheesecake",
132 5 : "Teaberry",
133 5 : "Tin Roof Sundae",
134 5 : "Toasted Almond",
135 5 : "Toasted Almond Fudge",
136 5 : "Turtle Creek",
137 5 : "Vanilla",
138 5 : "White House",
139 5 : "Wicked Caramel Sundae",
140 5 : "WPSU Coffee Break",
141 5 : ];
142 :
143 5 : const options: MultiTypeaheadSelectOption[] = flavors.map((f, i) => ({ value: i + 1, content: f }));
144 :
145 5 : return <MultiTypeahead options={options} />;
146 5 : };
|
