From 0798aa5cedad2a599829f2b13d4573c64a081c29 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 15 Aug 2022 21:36:53 -0300
Subject: modal, popover and portal for select input

---
 .../src/mui/input/SelectStandard.tsx               | 164 +++++++++++++++++++--
 1 file changed, 153 insertions(+), 11 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx')

diff --git a/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx
index 6fb2823c7..b0474a80b 100644
--- a/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx
@@ -15,6 +15,12 @@
  */
 import { css } from "@linaria/core";
 import { h, VNode, Fragment } from "preact";
+import { useRef } from "preact/hooks";
+import { Paper } from "../Paper.js";
+
+function hasValue(value: any): boolean {
+  return value != null && !(Array.isArray(value) && value.length === 0);
+}
 
 const SelectSelect = css`
   height: "auto";
@@ -36,23 +42,159 @@ const SelectNativeInput = css`
   box-sizing: border-box;
 `;
 
-export function SelectStandard({ value }: any): VNode {
+// export function SelectStandard({ value }: any): VNode {
+//   return (
+//     <Fragment>
+//       <div class={SelectSelect} role="button">
+//         {!value ? (
+//           // notranslate needed while Google Translate will not fix zero-width space issue
+//           <span className="notranslate">&#8203;</span>
+//         ) : (
+//           value
+//         )}
+//         <input
+//           class={SelectNativeInput}
+//           aria-hidden
+//           tabIndex={-1}
+//           value={Array.isArray(value) ? value.join(",") : value}
+//         />
+//       </div>
+//     </Fragment>
+//   );
+// }
+function isFilled(obj: any, SSR = false): boolean {
+  return (
+    obj &&
+    ((hasValue(obj.value) && obj.value !== "") ||
+      (SSR && hasValue(obj.defaultValue) && obj.defaultValue !== ""))
+  );
+}
+function isEmpty(display: any): boolean {
+  return display == null || (typeof display === "string" && !display.trim());
+}
+
+export function SelectStandard({
+  value,
+  multiple,
+  displayEmpty,
+  onBlur,
+  onChange,
+  onClose,
+  onFocus,
+  onOpen,
+  renderValue,
+  menuMinWidthState,
+}: any): VNode {
+  const inputRef = useRef(null);
+  const displayRef = useRef(null);
+
+  let display;
+  let computeDisplay = false;
+  let foundMatch = false;
+  let displaySingle;
+  const displayMultiple: any[] = [];
+  if (isFilled({ value }) || displayEmpty) {
+    if (renderValue) {
+      display = renderValue(value);
+    } else {
+      computeDisplay = true;
+    }
+  }
+  if (computeDisplay) {
+    if (multiple) {
+      if (displayMultiple.length === 0) {
+        display = null;
+      } else {
+        display = displayMultiple.reduce((output, child, index) => {
+          output.push(child);
+          if (index < displayMultiple.length - 1) {
+            output.push(", ");
+          }
+          return output;
+        }, []);
+      }
+    } else {
+      display = displaySingle;
+    }
+  }
+
+  // Avoid performing a layout computation in the render method.
+  let menuMinWidth = menuMinWidthState;
+
+  // if (!autoWidth && isOpenControlled && displayNode) {
+  //   menuMinWidth = displayNode.clientWidth;
+  // }
+
+  // let tabIndex;
+  // if (typeof tabIndexProp !== "undefined") {
+  //   tabIndex = tabIndexProp;
+  // } else {
+  //   tabIndex = disabled ? null : 0;
+  // }
+  const update = (open: any, event: any) => {
+    if (open) {
+      if (onOpen) {
+        onOpen(event);
+      }
+    } else if (onClose) {
+      onClose(event);
+    }
+
+    // if (!isOpenControlled) {
+    //   setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+    //   setOpenState(open);
+    // }
+  };
+
+  const handleMouseDown = (event: any) => {
+    // Ignore everything but left-click
+    if (event.button !== 0) {
+      return;
+    }
+    // Hijack the default focus behavior.
+    event.preventDefault();
+    // displayRef.current.focus();
+
+    update(true, event);
+  };
   return (
     <Fragment>
-      <div class={SelectSelect} role="button">
-        {!value ? (
+      <div
+        class={css`
+          height: auto;
+          min-height: 14375em;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        `}
+      >
+        {isEmpty(display) ? (
           // notranslate needed while Google Translate will not fix zero-width space issue
-          <span className="notranslate">&#8203;</span>
+          <span class="notranslate">&#8203;</span>
         ) : (
-          value
+          display
         )}
-        <input
-          class={SelectNativeInput}
-          aria-hidden
-          tabIndex={-1}
-          value={Array.isArray(value) ? value.join(",") : value}
-        />
       </div>
+      <input
+        class={css`
+          bottom: 0px;
+          left: 0px;
+          position: "absolute";
+          opacity: 0;
+          pointer-events: none;
+          width: 100%;
+          box-sizing: border-box;
+        `}
+      />
+      <svg />
     </Fragment>
   );
 }
+
+// function Popover(): VNode {
+//   return;
+// }
+
+// function Menu(): VNode {
+//   return <Paper></Paper>;
+// }
-- 
cgit v1.2.3