Allow options to cascade kicks/bans throughout spaces

src/components/views/dialogs/LeaveSpaceDialog.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { JoinRule } from "matrix-js-sdk/src/@types/partials";
 
@@ -22,108 +22,7 @@ import { _t } from '../../../languageHandler';
 import DialogButtons from "../elements/DialogButtons";
 import BaseDialog from "../dialogs/BaseDialog";
 import SpaceStore from "../../../stores/SpaceStore";
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import { Entry } from "./AddExistingToSpaceDialog";
-import SearchBox from "../../structures/SearchBox";
-import QueryMatcher from "../../../autocomplete/QueryMatcher";
-import StyledRadioGroup from "../elements/StyledRadioGroup";
-
-enum RoomsToLeave {
-    All = "All",
-    Specific = "Specific",
-    None = "None",
-}
-
-const SpaceChildPicker = ({ filterPlaceholder, rooms, selected, onChange }) => {
-    const [query, setQuery] = useState("");
-    const lcQuery = query.toLowerCase().trim();
-
-    const filteredRooms = useMemo(() => {
-        if (!lcQuery) {
-            return rooms;
-        }
-
-        const matcher = new QueryMatcher<Room>(rooms, {
-            keys: ["name"],
-            funcs: [r => [r.getCanonicalAlias(), ...r.getAltAliases()].filter(Boolean)],
-            shouldMatchWordsOnly: false,
-        });
-
-        return matcher.match(lcQuery);
-    }, [rooms, lcQuery]);
-
-    return <div className="mx_LeaveSpaceDialog_section">
-        <SearchBox
-            className="mx_textinput_icon mx_textinput_search"
-            placeholder={filterPlaceholder}
-            onSearch={setQuery}
-            autoFocus={true}
-        />
-        <AutoHideScrollbar className="mx_LeaveSpaceDialog_content">
-            { filteredRooms.map(room => {
-                return <Entry
-                    key={room.roomId}
-                    room={room}
-                    checked={selected.has(room)}
-                    onChange={(checked) => {
-                        onChange(checked, room);
-                    }}
-                />;
-            }) }
-            { filteredRooms.length < 1 ? <span className="mx_LeaveSpaceDialog_noResults">
-                { _t("No results") }
-            </span> : undefined }
-        </AutoHideScrollbar>
-    </div>;
-};
-
-const LeaveRoomsPicker = ({ space, spaceChildren, roomsToLeave, setRoomsToLeave }) => {
-    const selected = useMemo(() => new Set(roomsToLeave), [roomsToLeave]);
-    const [state, setState] = useState<string>(RoomsToLeave.None);
-
-    useEffect(() => {
-        if (state === RoomsToLeave.All) {
-            setRoomsToLeave(spaceChildren);
-        } else {
-            setRoomsToLeave([]);
-        }
-    }, [setRoomsToLeave, state, spaceChildren]);
-
-    return <div className="mx_LeaveSpaceDialog_section">
-        <StyledRadioGroup
-            name="roomsToLeave"
-            value={state}
-            onChange={setState}
-            definitions={[
-                {
-                    value: RoomsToLeave.None,
-                    label: _t("Don't leave any"),
-                }, {
-                    value: RoomsToLeave.All,
-                    label: _t("Leave all rooms and spaces"),
-                }, {
-                    value: RoomsToLeave.Specific,
-                    label: _t("Leave specific rooms and spaces"),
-                },
-            ]}
-        />
-
-        { state === RoomsToLeave.Specific && (
-            <SpaceChildPicker
-                filterPlaceholder={_t("Search %(spaceName)s", { spaceName: space.name })}
-                rooms={spaceChildren}
-                selected={selected}
-                onChange={(selected: boolean, room: Room) => {
-                    if (selected) {
-                        setRoomsToLeave([room, ...roomsToLeave]);
-                    } else {
-                        setRoomsToLeave(roomsToLeave.filter(r => r !== room));
-                    }
-                }}
-            />
-        ) }
-    </div>;
-};
+import SpaceChildrenPicker from "../spaces/SpaceChildrenPicker";
 
 interface IProps {
     space: Room;
@@ -139,6 +38,7 @@ const isOnlyAdmin = (room: Room): boolean => {
 const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
     const spaceChildren = useMemo(() => SpaceStore.instance.getChildren(space.roomId), [space.roomId]);
     const [roomsToLeave, setRoomsToLeave] = useState<Room[]>([]);
+    const selectedRooms = useMemo(() => new Set(roomsToLeave), [roomsToLeave]);
 
     let rejoinWarning;
     if (space.getJoinRule() !== JoinRule.Public) {
@@ -173,12 +73,17 @@ const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
                 { rejoinWarning }
             </p>
 
-            { spaceChildren.length > 0 && <LeaveRoomsPicker
-                space={space}
-                spaceChildren={spaceChildren}
-                roomsToLeave={roomsToLeave}
-                setRoomsToLeave={setRoomsToLeave}
-            /> }
+            { spaceChildren.length > 0 && (
+                <SpaceChildrenPicker
+                    space={space}
+                    spaceChildren={spaceChildren}
+                    selected={selectedRooms}
+                    onChange={setRoomsToLeave}
+                    noneLabel={_t("Don't leave any")}
+                    allLabel={_t("Leave all rooms and spaces")}
+                    specificLabel={_t("Leave specific rooms and spaces")}
+                />
+            ) }
 
             { onlyAdminWarning && <div className="mx_LeaveSpaceDialog_section_warning">
                 { onlyAdminWarning }