[web] Add missing file test

web/src/components/core/Selector.jsx.comp

@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) [2024] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+// @ts-check
+
+import React from "react";
+import {
+  useContextProps,
+  CheckboxContext,
+  GridList, GridListContext,
+  GridListItem
+} from "react-aria-components";
+import { useToggleState } from 'react-stately';
+import { useCheckbox } from 'react-aria';
+
+const MyCustomCheckbox = React.forwardRef((props, ref) => {
+  // Merge the local props and ref with the ones provided via context.
+  [props, ref] = useContextProps(props, ref, CheckboxContext);
+  const state = useToggleState(props);
+  const { inputProps } = useCheckbox(props, state, ref);
+  return <input {...inputProps} ref={ref} type="checkbox" />;
+});
+
+// // TODO: Using "slot-based" components would help to simplify this.
+// const SelectionComponent = ({ allowsSelection, selectionMode, isSelected, isDisabled }) => {
+//   // NOTE: using a noop onChange callback to avoid a React complaint about
+//   // providing a `checked` prop to a form field without `onChange` handler.
+//   // Setting the proposed readOnly prop adds the `readonly` attribute to the
+//   // DOM element, which does not apply for checkboxes.
+//   //
+//   // https://html.spec.whatwg.org/#attr-input-readonly
+//   // https://github.com/facebook/react/blob/60a927d04ad3888facebcdf7da620aa1cfc9528f/packages/react-dom-bindings/src/shared/ReactControlledValuePropTypes.js#L50-L66
+//   // https://github.com/facebook/react/blob/60a927d04ad3888facebcdf7da620aa1cfc9528f/packages/react-dom/src/__tests__/ReactDOMInput-test.js#L150-L167
+//   const type = selectionMode === "multiple" ? "checkbox" : "radio";
+//
+//   return (
+//     <input
+//       type={type}
+//       checked={isSelected}
+//       disabled={isDisabled || !allowsSelection}
+//       onChange={() => {}}
+//     />
+//   );
+// };
+//
+const Option = React.forwardRef((props, ref) => {
+  const state = React.useContext(GridListContext);
+  console.log("option", props, state);
+  [props, ref] = useContextProps(props, ref, GridListContext);
+  const { children } = props;
+  return (
+    <GridListItem {...props}>
+      <MyCustomCheckbox t="c" slot="selection" />
+      { children }
+    </GridListItem>
+  );
+});
+
+/**
+ * Renders children into an HTML section
+ */
+const Selector = ({ selected, onChange, allowsSelection = false, selectionMode = "multiple", disabledBehavior = "selection", children, ...listProps }) => {
+  const isMultiple = selectionMode === "multiple";
+  const selectedKeys = selected ? Array(selected).flat() : [];
+
+  const onSelectionChange = (selection) => {
+    const selected = Array.from(selection);
+    console.log("selected", selection, selected);
+    const nextSelection = isMultiple ? selected : selected[0];
+    typeof onChange === "function" && onChange(nextSelection);
+  };
+
+  return (
+    <GridList
+      {...listProps}
+      data-type="agama/selector"
+      selectionMode={selectionMode}
+      allowsSelection={allowsSelection}
+      disabledBehavior={disabledBehavior}
+      onSelectionChange={onSelectionChange}
+      selectedKeys={selectedKeys}
+    >
+      { children }
+    </GridList>
+  );
+};
+
+Selector.Option = Option;
+export default Selector;