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