diff options
author | Sebastian <sebasjm@gmail.com> | 2022-11-07 19:29:47 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-11-07 19:29:47 -0300 |
commit | 43c7cff75055f72c7d59a7180ae8da2554456d8d (patch) | |
tree | 40456d9ab678e366a198fb7c491b3a2beb9f5779 /packages/taler-wallet-webextension/src/mui | |
parent | 0249f57b461064520c1ab4bd144f127e4473b298 (diff) | |
download | wallet-core-43c7cff75055f72c7d59a7180ae8da2554456d8d.tar.xz |
un-uglyfy, fix: 7442
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui')
9 files changed, 38 insertions, 27 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx index a409f09f0..7db6b2964 100644 --- a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx @@ -56,13 +56,13 @@ const Input = (variant: Props["variant"]): VNode => { value="disabled" /> <TextField - error + error={"Error"} variant={variant} label="Something" {...{ value, onChange }} /> <TextField - error + error={"Error"} disabled variant={variant} label="Disabled and Error" diff --git a/packages/taler-wallet-webextension/src/mui/TextField.tsx b/packages/taler-wallet-webextension/src/mui/TextField.tsx index 7c6eb40a2..ba05158fa 100644 --- a/packages/taler-wallet-webextension/src/mui/TextField.tsx +++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx @@ -30,7 +30,7 @@ export interface Props { autoFocus?: boolean; color?: Colors; disabled?: boolean; - error?: boolean; + error?: string; fullWidth?: boolean; helperText?: VNode | string; id?: string; @@ -85,7 +85,12 @@ export function TextField({ <FormControl {...props}> {label && <InputLabel>{label}</InputLabel>} <Input {...props}>{children}</Input> - {helperText && <FormHelperText>{helperText}</FormHelperText>} + {helperText && ( + <FormHelperText error={props.error}>{helperText}</FormHelperText> + )} + {props.error ? ( + <FormHelperText error="true">{props.error}</FormHelperText> + ) : undefined} </FormControl> ); } diff --git a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx index 8454b0fad..e80e7f8d8 100644 --- a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx @@ -22,7 +22,7 @@ import { Colors } from "../style"; export interface Props { color: Colors; disabled: boolean; - error: boolean; + error?: string; focused: boolean; fullWidth: boolean; hiddenLabel: boolean; @@ -64,7 +64,7 @@ export const FormControlContext = createContext<FCCProps | null>(null); export function FormControl({ color = "primary", disabled = false, - error = false, + error = undefined, focused: visuallyFocused, fullWidth = false, hiddenLabel = false, @@ -75,9 +75,9 @@ export function FormControl({ children, }: Partial<Props>): VNode { const [filled, setFilled] = useState(false); - const [focusedState, setFocused] = useState(false); + const [focusedState, setFocused] = useState(visuallyFocused); const focused = - visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState; + focusedState !== undefined && !disabled ? focusedState : false; const value: FCCProps = { color, @@ -124,7 +124,7 @@ export interface FCCProps { // setAdornedStart, color: Colors; disabled: boolean; - error: boolean; + error: string | undefined; filled: boolean; focused: boolean; fullWidth: boolean; @@ -142,7 +142,7 @@ export interface FCCProps { const defaultContextValue: FCCProps = { color: "primary", disabled: false, - error: false, + error: undefined, filled: false, focused: false, fullWidth: false, @@ -159,7 +159,7 @@ const defaultContextValue: FCCProps = { function withoutUndefinedProperties(obj: any): any { return Object.keys(obj).reduce((acc, key) => { const _acc: any = acc; - if (obj[key] !== undefined) _acc[key] = obj[key]; + if (obj[key] !== undefined && obj[key] !== false) _acc[key] = obj[key]; return _acc; }, {}); } diff --git a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx index 739b41e32..5e40ba616 100644 --- a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx @@ -43,7 +43,7 @@ const containedStyle = css` interface Props { disabled?: boolean; - error?: boolean; + error?: string; filled?: boolean; focused?: boolean; margin?: "dense"; diff --git a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx index 1d4b5eff5..11404b5c1 100644 --- a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx @@ -22,7 +22,7 @@ import { useFormControl } from "./FormControl.js"; export interface Props { class?: string; disabled?: boolean; - error?: boolean; + error?: string; filled?: boolean; focused?: boolean; required?: boolean; @@ -67,9 +67,9 @@ export function FormLabel({ }); return ( <label - data-focused={fcs.focused} + data-focused={!fcs.focused ? undefined : true} data-error={!fcs.error ? undefined : true} - data-disabled={fcs.disabled} + data-disabled={!fcs.disabled ? undefined : true} class={[_class, root, theme.typography.body1].join(" ")} {...rest} style={{ diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx index e1c6e7af1..94304f16b 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx @@ -60,8 +60,8 @@ export function InputBaseRoot({ const fcs = useFormControl({}); return ( <div - data-disabled={disabled} - data-focused={focused} + data-disabled={!disabled ? undefined : true} + data-focused={!focused ? undefined : true} data-multiline={multiline} data-hasStart={!!startAdornment} data-hasEnd={!!endAdornment} @@ -116,6 +116,12 @@ const componentStyle = css` duration: theme.transitions.duration.shorter, })}; } + &:not(focus)::placeholder { + opacity: 0; + } + &:focus::placeholder { + opacity: ${theme.palette.mode === "light" ? 0.42 : 0.5}; + } &:focus { outline: 0; } @@ -292,11 +298,11 @@ export function InputBase({ <Root {...fcs} onClick={handleClick}> <FormControlContext.Provider value={null}> <Input - aria-invalid={fcs.error} + aria-invalid={fcs.error ? true : undefined} // aria-describedby={} - disabled={fcs.disabled} + disabled={fcs.disabled ? true : undefined} name={name} - placeholder={placeholder} + placeholder={!placeholder ? undefined : placeholder} readOnly={readOnly} required={fcs.required} rows={rows} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx index fa5144ca3..9ab91e7fd 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx @@ -27,7 +27,7 @@ export interface Props { defaultValue?: string; disabled?: boolean; disableUnderline?: boolean; - error?: boolean; + error?: string; fullWidth?: boolean; id?: string; margin?: "dense" | "normal" | "none"; @@ -176,7 +176,7 @@ function Root({ return ( <InputBaseRoot disabled={disabled} - focused={focused} + focused={focused ? true : undefined} fullWidth={fullWidth} multiline={multiline} error={error} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx index 469047afb..35cbd7a41 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx @@ -90,7 +90,7 @@ interface InputLabelProps { color: Colors; disableAnimation: boolean; disabled: boolean; - error: boolean; + error?: string; focused: boolean; margin: boolean; required: boolean; @@ -104,8 +104,8 @@ export function InputLabel(props: Partial<InputLabelProps>): VNode { <FormLabel data-form-control={!!fcs} data-size={fcs.size} - data-shrink={props.shrink || fcs.filled || fcs.focused} - data-disable-animation={props.disableAnimation} + data-shrink={props.shrink || fcs.filled || fcs.focused ? true : undefined} + data-disable-animation={props.disableAnimation ? true : undefined} data-variant={fcs.variant} class={root} {...props} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx index b1152ebec..45614f618 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx @@ -28,7 +28,7 @@ export interface Props { disabled?: boolean; disableUnderline?: boolean; endAdornment?: VNode; - error?: boolean; + error?: string; fullWidth?: boolean; id?: string; margin?: "dense" | "normal" | "none"; @@ -128,7 +128,7 @@ function Root({ fullWidth, disabled, focused, error, children }: any): VNode { return ( <InputBaseRoot disabled={disabled} - focused={focused} + focused={focused ? true : undefined} fullWidth={fullWidth} error={error} class={[rootStyle, formControlStyle, underlineStyle].join(" ")} |