diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/input')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/input/InputBase.tsx | 38 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx | 5 |
2 files changed, 27 insertions, 16 deletions
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` |