From cdc8e9afdfb93bd8a90d1e6cf0ea9aa20159e43a Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 15 Aug 2022 21:18:39 -0300
Subject: destination ui

---
 .../src/mui/Button.stories.tsx                     |  4 +++
 .../src/mui/TextField.tsx                          |  4 ++-
 .../src/mui/input/InputBase.tsx                    | 38 +++++++++++++---------
 .../src/mui/input/InputFilled.tsx                  |  5 ++-
 4 files changed, 34 insertions(+), 17 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/mui')

diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
index f953b4a36..8f6b47afb 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
@@ -33,6 +33,10 @@ export default {
 const Stack = styled.div`
   display: flex;
   flex-direction: column;
+  & > button {
+    margin: 14px;
+  }
+  background-color: white;
 `;
 
 export const BasicExample = (): VNode => (
diff --git a/packages/taler-wallet-webextension/src/mui/TextField.tsx b/packages/taler-wallet-webextension/src/mui/TextField.tsx
index 82fc155ef..c59bb28b6 100644
--- a/packages/taler-wallet-webextension/src/mui/TextField.tsx
+++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx
@@ -43,6 +43,9 @@ export interface Props {
   placeholder?: string;
   required?: boolean;
 
+  startAdornment?: VNode;
+  endAdornment?: VNode;
+
   //FIXME: change to "grabFocus"
   // focused?: boolean;
   rows?: number;
@@ -75,7 +78,6 @@ export function TextField({
 }: Props): VNode {
   // htmlFor={id} id={inputLabelId}
   const Input = select ? selectVariant[variant] : inputVariant[variant];
-  // console.log("variant", Input);
   return (
     <FormControl {...props}>
       {label && <InputLabel>{label}</InputLabel>}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
index fc16b7ce4..fce82f9d2 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
@@ -53,6 +53,8 @@ export function InputBaseRoot({
   multiline,
   focused,
   fullWidth,
+  startAdornment,
+  endAdornment,
   children,
 }: any): VNode {
   const fcs = useFormControl({});
@@ -61,6 +63,8 @@ export function InputBaseRoot({
       data-disabled={disabled}
       data-focused={focused}
       data-multiline={multiline}
+      data-hasStart={!!startAdornment}
+      data-hasEnd={!!endAdornment}
       data-error={error}
       class={[
         _class,
@@ -156,22 +160,28 @@ export function InputBaseComponent({
   multiline,
   type,
   class: _class,
+  startAdornment,
+  endAdornment,
   ...props
 }: any): VNode {
   return (
-    <input
-      disabled={disabled}
-      type={type}
-      class={[
-        componentStyle,
-        _class,
-        disabled && componentDisabledStyle,
-        size === "small" && componentSmallStyle,
-        // multiline && componentMultilineStyle,
-        type === "search" && searchStyle,
-      ].join(" ")}
-      {...props}
-    />
+    <Fragment>
+      {startAdornment}
+      <input
+        disabled={disabled}
+        type={type}
+        class={[
+          componentStyle,
+          _class,
+          disabled && componentDisabledStyle,
+          size === "small" && componentSmallStyle,
+          // multiline && componentMultilineStyle,
+          type === "search" && searchStyle,
+        ].join(" ")}
+        {...props}
+      />
+      {endAdornment}
+    </Fragment>
   );
 }
 
@@ -388,7 +398,6 @@ export function TextareaAutoSize({
       getStyleValue(computedStyle, "border-bottom-width") +
       getStyleValue(computedStyle, "border-top-width");
 
-    // console.log(boxSizing, padding, border);
     // The height of the inner content
     const innerHeight = inputShallow.scrollHeight;
 
@@ -412,7 +421,6 @@ export function TextareaAutoSize({
       outerHeight + (boxSizing === "border-box" ? padding + border : 0);
     const overflow = Math.abs(outerHeight - innerHeight) <= 1;
 
-    console.log("height", outerHeight, minRows, maxRows);
     setState((prevState) => {
       // Need a large enough difference to update the height.
       // This prevents infinite rendering loop.
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
index 53c6da295..fa5144ca3 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
@@ -27,7 +27,6 @@ export interface Props {
   defaultValue?: string;
   disabled?: boolean;
   disableUnderline?: boolean;
-  endAdornment?: VNode;
   error?: boolean;
   fullWidth?: boolean;
   id?: string;
@@ -42,6 +41,7 @@ export interface Props {
   required?: boolean;
   rows?: number;
   startAdornment?: VNode;
+  endAdornment?: VNode;
   type?: string;
   value?: string;
 }
@@ -108,6 +108,9 @@ const filledRootStyle = css`
   &[data-multiline] {
     padding: 25px 12px 8px;
   }
+  /* &[data-hasStart] {
+    padding-left: 25px;
+  } */
 `;
 
 const underlineStyle = css`
-- 
cgit v1.2.3