diff options
author | Sebastian <sebasjm@gmail.com> | 2022-08-15 21:36:53 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-08-15 21:36:53 -0300 |
commit | 0798aa5cedad2a599829f2b13d4573c64a081c29 (patch) | |
tree | 191ce51f0569c34e124dd20a4a23acecc5f9eae7 /packages/taler-wallet-webextension/src/mui/input | |
parent | cdc8e9afdfb93bd8a90d1e6cf0ea9aa20159e43a (diff) | |
download | wallet-core-0798aa5cedad2a599829f2b13d4573c64a081c29.tar.xz |
modal, popover and portal for select input
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/input')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx | 164 |
1 files changed, 153 insertions, 11 deletions
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">​</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">​</span> + <span class="notranslate">​</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>; +// } |