diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/input')
11 files changed, 782 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx new file mode 100644 index 000000000..7a8395705 --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx @@ -0,0 +1,156 @@ +import { css } from "@linaria/core"; +import { ComponentChildren, createContext, h } from "preact"; +import { useContext, useState } from "preact/hooks"; +import { Colors } from "../style"; + +export interface Props { + color: Colors; + disabled: boolean; + error: boolean; + focused: boolean; + fullWidth: boolean; + hiddenLabel: boolean; + required: boolean; + variant: "filled" | "outlined" | "standard"; + margin: "none" | "normal" | "dense"; + size: "medium" | "small"; + children: ComponentChildren; +} + +export const root = css` + display: inline-flex; + flex-direction: column; + position: relative; + min-width: 0px; + padding: 0px; + margin: 0px; + border: 0px; + vertical-align: top; +`; + +const marginVariant = { + none: "", + normal: css` + margin-top: 16px; + margin-bottom: 8px; + `, + dense: css` + margin-top: 8px; + margin-bottom: 4px; + `, +}; +const fullWidthStyle = css` + width: 100%; +`; + +export function FormControl({ + color = "primary", + disabled = false, + error = false, + focused: visuallyFocused, + fullWidth = false, + hiddenLabel = false, + margin = "none", + required = false, + size = "medium", + variant = "standard", + children, +}: Partial<Props>) { + const [filled, setFilled] = useState(false); + const [focusedState, setFocused] = useState(false); + const focused = + visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState; + + const value: FCCProps = { + color, + disabled, + error, + filled, + focused, + fullWidth, + hiddenLabel, + size, + onBlur: () => { + setFocused(false); + }, + onEmpty: () => { + setFilled(false); + }, + onFilled: () => { + setFilled(true); + }, + onFocus: () => { + setFocused(true); + }, + required, + variant, + }; + + return ( + <div + class={[ + root, + marginVariant[margin], + fullWidth ? fullWidthStyle : "", + ].join(" ")} + > + <FormControlContext.Provider value={value}> + {children} + </FormControlContext.Provider> + </div> + ); +} + +export interface FCCProps { + // adornedStart, + // setAdornedStart, + color: Colors; + disabled: boolean; + error: boolean; + filled: boolean; + focused: boolean; + fullWidth: boolean; + hiddenLabel: boolean; + size: "medium" | "small"; + onBlur: () => void; + onEmpty: () => void; + onFilled: () => void; + onFocus: () => void; + // registerEffect, + required: boolean; + variant: "filled" | "outlined" | "standard"; +} + +export const FormControlContext = createContext<FCCProps | null>(null); + +const defaultContextValue: FCCProps = { + color: "primary", + disabled: false, + error: false, + filled: false, + focused: false, + fullWidth: false, + hiddenLabel: false, + size: "medium", + onBlur: () => {}, + onEmpty: () => {}, + onFilled: () => {}, + onFocus: () => {}, + required: false, + variant: "outlined", +}; + +function withoutUndefinedProperties(obj: any) { + return Object.keys(obj).reduce((acc, key) => { + const _acc: any = acc; + if (obj[key] !== undefined) _acc[key] = obj[key]; + return _acc; + }, {}); +} + +export function useFormControl(props: Partial<FCCProps> = {}): FCCProps { + const ctx = useContext(FormControlContext); + const cleanedProps = withoutUndefinedProperties(props); + if (!ctx) return { ...defaultContextValue, ...cleanedProps }; + return { ...ctx, ...cleanedProps }; +} diff --git a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx new file mode 100644 index 000000000..4854a6384 --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx @@ -0,0 +1,54 @@ +import { css } from "@linaria/core"; +import { ComponentChildren, h } from "preact"; +import { theme } from "../style"; +import { useFormControl } from "./FormControl"; + +const root = css` + color: ${theme.palette.text.secondary}; + text-align: left; + margin-top: 3px; + margin-bottom: 0px; + margin-right: 0px; + margin-left: 0px; +`; +const disabledStyle = css` + color: ${theme.palette.text.disabled}; +`; +const errorStyle = css` + color: ${theme.palette.error.main}; +`; +const sizeSmallStyle = css` + margin-top: 4px; +`; +const containedStyle = css` + margin-right: 14px; + margin-left: 14px; +`; + +interface Props { + disabled?: boolean; + error?: boolean; + filled?: boolean; + focused?: boolean; + margin?: "dense"; + required?: boolean; + children: ComponentChildren; +} +export function FormHelperText({ children, ...props }: Props) { + const fcs = useFormControl(props); + const contained = fcs.variant === "filled" || fcs.variant === "outlined"; + return ( + <p + class={[ + root, + theme.typography.caption, + fcs.disabled && disabledStyle, + fcs.error && errorStyle, + fcs.size === "small" && sizeSmallStyle, + contained && containedStyle, + ].join(" ")} + > + {children} + </p> + ); +} diff --git a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx new file mode 100644 index 000000000..e5ca53263 --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx @@ -0,0 +1,67 @@ +import { css } from "@linaria/core"; +import { ComponentChildren, h } from "preact"; +import { Colors, theme } from "../style"; +import { useFormControl } from "./FormControl"; + +export interface Props { + class?: string; + disabled?: boolean; + error?: boolean; + filled?: boolean; + focused?: boolean; + required?: boolean; + color?: Colors; + children?: ComponentChildren; +} + +const root = css` + color: ${theme.palette.text.secondary}; + line-height: 1.4375em; + padding: 0px; + position: relative; + &[data-focused] { + color: var(--color-main); + } + &[data-disabled] { + color: ${theme.palette.text.disabled}; + } + &[data-error] { + color: ${theme.palette.error.main}; + } +`; + +export function FormLabel({ + disabled, + error, + filled, + focused, + required, + color, + class: _class, + children, + ...rest +}: Props) { + const fcs = useFormControl({ + disabled, + error, + filled, + focused, + required, + color, + }); + return ( + <label + data-focused={fcs.focused} + data-error={fcs.error} + data-disabled={fcs.disabled} + class={[_class, root, theme.typography.body1].join(" ")} + {...rest} + style={{ + "--color-main": theme.palette[fcs.color].main, + }} + > + {children} + {fcs.required && <span data-error={fcs.error}> {"*"}</span>} + </label> + ); +} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx new file mode 100644 index 000000000..5714eb1ba --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx @@ -0,0 +1,258 @@ +import { css } from "@linaria/core"; +import { h, JSX } from "preact"; +import { useEffect, useLayoutEffect, useState } from "preact/hooks"; +import { theme } from "../style"; +import { FormControlContext, useFormControl } from "./FormControl"; + +const rootStyle = css` + color: ${theme.palette.text.primary}; + line-height: 1.4375em; + box-sizing: border-box; + position: relative; + cursor: text; + display: inline-flex; + align-items: center; +`; +const rootDisabledStyle = css` + color: ${theme.palette.text.disabled}; + cursor: default; +`; +const rootMultilineStyle = css` + padding: 4px 0 5px; +`; +const fullWidthStyle = css` + width: "100%"; +`; + +export function InputBaseRoot({ + class: _class, + disabled, + error, + multiline, + focused, + fullWidth, + children, +}: any) { + const fcs = useFormControl({}); + return ( + <div + data-disabled={disabled} + data-focused={focused} + data-error={error} + class={[ + _class, + rootStyle, + theme.typography.body1, + disabled && rootDisabledStyle, + multiline && rootMultilineStyle, + fullWidth && fullWidthStyle, + ].join(" ")} + style={{ + "--color-main": theme.palette[fcs.color].main, + }} + > + {children} + </div> + ); +} + +const componentStyle = css` + font: inherit; + letter-spacing: inherit; + color: currentColor; + padding: 4px 0 5px; + border: 0px; + box-sizing: content-box; + background: none; + height: 1.4375em; + margin: 0px; + -webkit-tap-highlight-color: transparent; + display: block; + min-width: 0px; + width: 100%; + animation-name: "auto-fill-cancel"; + animation-duration: 10ms; + + @keyframes auto-fill { + from { + display: block; + } + } + @keyframes auto-fill-cancel { + from { + display: block; + } + } + &::placeholder { + color: "currentColor"; + opacity: ${theme.palette.mode === "light" ? 0.42 : 0.5}; + transition: ${theme.transitions.create("opacity", { + duration: theme.transitions.duration.shorter, + })}; + } + &:focus { + outline: 0; + } + &:invalid { + box-shadow: none; + } + &::-webkit-search-decoration { + -webkit-appearance: none; + } + &:-webkit-autofill { + animation-duration: 5000s; + animation-name: auto-fill; + } +`; +const componentDisabledStyle = css` + opacity: 1; + --webkit-text-fill-color: ${theme.palette.text.disabled}; +`; +const componentSmallStyle = css` + padding-top: 1px; +`; +const componentMultilineStyle = css` + height: auto; + resize: none; + padding: 0px; + padding-top: 0px; +`; +const searchStyle = css` + -moz-appearance: textfield; + -webkit-appearance: textfield; +`; + +export function InputBaseComponent({ + disabled, + size, + multiline, + type, + ...props +}: any) { + return ( + <input + disabled={disabled} + type={type} + class={[ + componentStyle, + disabled && componentDisabledStyle, + size === "small" && componentSmallStyle, + multiline && componentMultilineStyle, + type === "search" && searchStyle, + ].join(" ")} + {...props} + /> + ); +} + +export function InputBase({ + Root = InputBaseRoot, + Input, + onChange, + name, + placeholder, + readOnly, + onKeyUp, + onKeyDown, + rows, + type = "text", + value, + onClick, + ...props +}: any) { + const fcs = useFormControl(props); + // const [focused, setFocused] = useState(false); + useLayoutEffect(() => { + if (value && value !== "") { + fcs.onFilled(); + } else { + fcs.onEmpty(); + } + }, [value]); + + const handleFocus = (event: JSX.TargetedFocusEvent<EventTarget>) => { + // Fix a bug with IE11 where the focus/blur events are triggered + // while the component is disabled. + if (fcs.disabled) { + event.stopPropagation(); + return; + } + + // if (onFocus) { + // onFocus(event); + // } + // if (inputPropsProp.onFocus) { + // inputPropsProp.onFocus(event); + // } + + fcs.onFocus(); + }; + + const handleBlur = () => { + // if (onBlur) { + // onBlur(event); + // } + // if (inputPropsProp.onBlur) { + // inputPropsProp.onBlur(event); + // } + + fcs.onBlur(); + }; + + const handleChange = ( + event: JSX.TargetedEvent<HTMLElement & { value?: string }>, + ) => { + // if (inputPropsProp.onChange) { + // inputPropsProp.onChange(event, ...args); + // } + + // Perform in the willUpdate + if (onChange) { + onChange(event.currentTarget.value); + } + }; + + const handleClick = ( + event: JSX.TargetedMouseEvent<HTMLElement & { value?: string }>, + ) => { + // if (inputRef.current && event.currentTarget === event.target) { + // inputRef.current.focus(); + // } + + if (onClick) { + onClick(event.currentTarget.value); + } + }; + + if (!Input) { + Input = props.multiline ? TextareaAutoSize : InputBaseComponent; + } + + return ( + <Root {...fcs} onClick={handleClick}> + <FormControlContext.Provider value={null}> + <Input + aria-invalid={fcs.error} + // aria-describedby={} + disabled={fcs.disabled} + name={name} + placeholder={placeholder} + readOnly={readOnly} + required={fcs.required} + rows={rows} + value={value} + onKeyDown={onKeyDown} + onKeyUp={onKeyUp} + type={type} + onChange={handleChange} + onBlur={handleBlur} + onFocus={handleFocus} + /> + </FormControlContext.Provider> + </Root> + ); +} + +export function TextareaAutoSize() { + return <input onClick={(e) => null} />; +} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx new file mode 100644 index 000000000..5c50a8b72 --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx @@ -0,0 +1,5 @@ +import { h, VNode } from "preact"; + +export function InputFilled(): VNode { + return <div />; +} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx new file mode 100644 index 000000000..c70c5bfc0 --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx @@ -0,0 +1,98 @@ +import { css } from "@linaria/core"; +import { ComponentChildren, h } from "preact"; +import { Colors, theme } from "../style"; +import { useFormControl } from "./FormControl"; +import { FormLabel } from "./FormLabel"; + +const root = css` + display: block; + transform-origin: top left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + + &[data-form-control] { + position: absolute; + left: 0px; + top: 0px; + transform: translate(0, 20px) scale(1); + } + &[data-size="small"] { + transform: translate(0, 17px) scale(1); + } + &[data-shrink] { + transform: translate(0, -1.5px) scale(0.75); + transform-origin: top left; + max-width: 133%; + } + &:not([data-disable-animation]) { + transition: ${theme.transitions.create( + ["color", "transform", "max-width"], + { + duration: theme.transitions.duration.shorter, + easing: theme.transitions.easing.easeOut, + }, + )}; + } + &[data-variant="filled"] { + z-index: 1; + pointer-events: none; + transform: translate(12px, 16px) scale(1); + max-width: calc(100% - 24px); + &[data-size="small"] { + transform: translate(12px, 13px) scale(1); + } + &[data-shrink] { + user-select: none; + pointer-events: auto; + transform: translate(12px, 7px) scale(0.75); + max-width: calc(133% - 24px); + &[data-size="small"] { + transform: translate(12px, 4px) scale(0.75); + } + } + } + &[data-variant="outlined"] { + z-index: 1; + pointer-events: none; + transform: translate(14px, 16px) scale(1); + max-width: calc(100% - 24px); + &[data-size="small"] { + transform: translate(14px, 9px) scale(1); + } + &[data-shrink] { + user-select: none; + pointer-events: auto; + transform: translate(14px, -9px) scale(0.75); + max-width: calc(133% - 24px); + } + } +`; + +interface InputLabelProps { + color: Colors; + disableAnimation: boolean; + disabled: boolean; + error: boolean; + focused: boolean; + margin: boolean; + required: boolean; + shrink: boolean; + variant: "filled" | "outlined" | "standard"; + children: ComponentChildren; +} +export function InputLabel(props: Partial<InputLabelProps>) { + const fcs = useFormControl(props); + return ( + <FormLabel + data-form-control={!!fcs} + data-size={fcs.size} + data-shrink={props.shrink || fcs.filled || fcs.focused} + data-disable-animation={props.disableAnimation} + data-variant={fcs.variant} + class={root} + {...props} + /> + ); +} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx b/packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx new file mode 100644 index 000000000..3b40ffc70 --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx @@ -0,0 +1,5 @@ +import { h, VNode } from "preact"; + +export function InputOutlined(): VNode { + return <div />; +} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx new file mode 100644 index 000000000..ba5145719 --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx @@ -0,0 +1,124 @@ +import { css } from "@linaria/core"; +import { h, VNode } from "preact"; +import { Colors, theme } from "../style"; +import { useFormControl } from "./FormControl"; +import { InputBase, InputBaseComponent, InputBaseRoot } from "./InputBase"; + +export interface Props { + autoComplete?: string; + autoFocus?: boolean; + color?: Colors; + defaultValue?: string; + disabled?: boolean; + disableUnderline?: boolean; + endAdornment?: VNode; + error?: boolean; + fullWidth?: boolean; + id?: string; + margin?: "dense" | "normal" | "none"; + maxRows?: number; + minRows?: number; + multiline?: boolean; + name?: string; + onChange?: (s: string) => void; + placeholder?: string; + readOnly?: boolean; + required?: boolean; + rows?: number; + startAdornment?: VNode; + type?: string; + value?: string; +} +export function InputStandard({ + type = "text", + multiline, + ...props +}: Props): VNode { + const fcs = useFormControl(props); + return ( + <InputBase + Root={Root} + Input={Input} + fullWidth={fcs.fullWidth} + multiline={multiline} + type={type} + {...props} + /> + ); +} + +const rootStyle = css` + position: relative; +`; +const formControlStyle = css` + label + & { + margin-top: 16px; + } +`; +const underlineStyle = css` + &:after { + border-bottom: 2px solid var(--color-main); + left: 0px; + bottom: 0px; + content: ""; + position: absolute; + right: 0px; + transform: scaleX(0); + transition: ${theme.transitions.create("transform", { + duration: theme.transitions.duration.shorter, + easing: theme.transitions.easing.easeOut, + })}; + pointer-events: none; + } + &[data-focused]:after { + transform: scaleX(1); + } + &[data-error]:after { + border-bottom-color: ${theme.palette.error.main}; + transform: scaleY(1); + } + &:before { + border-bottom: 1px solid + ${theme.palette.mode === "light" + ? "rgba(0, 0, 0, 0.42)" + : "rgba(255, 255, 255, 0.7)"}; + left: 0px; + bottom: 0px; + right: 0px; + content: "\\00a0"; + position: absolute; + transition: ${theme.transitions.create("border-bottom-color", { + duration: theme.transitions.duration.shorter, + })}; + pointer-events: none; + } + &:hover:not([data-disabled]:before) { + border-bottom: 2px solid var(--color-main); + @media (hover: none) { + border-bottom: 1px solid + ${theme.palette.mode === "light" + ? "rgba(0, 0, 0, 0.42)" + : "rgba(255, 255, 255, 0.7)"}; + } + } + &[data-disabled]:before { + border-bottom-style: solid; + } +`; + +function Root({ disabled, focused, error, children }: any) { + return ( + <InputBaseRoot + disabled={disabled} + focused={focused} + error={error} + class={[rootStyle, formControlStyle, underlineStyle].join(" ")} + > + {children} + </InputBaseRoot> + ); +} + +function Input(props: any) { + return <InputBaseComponent {...props} />; +} diff --git a/packages/taler-wallet-webextension/src/mui/input/SelectFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/SelectFilled.tsx new file mode 100644 index 000000000..28b1859f8 --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/input/SelectFilled.tsx @@ -0,0 +1,5 @@ +import { h, VNode } from "preact"; + +export function SelectFilled(): VNode { + return <div />; +} diff --git a/packages/taler-wallet-webextension/src/mui/input/SelectOutlined.tsx b/packages/taler-wallet-webextension/src/mui/input/SelectOutlined.tsx new file mode 100644 index 000000000..10ee4015c --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/input/SelectOutlined.tsx @@ -0,0 +1,5 @@ +import { h, VNode } from "preact"; + +export function SelectOutlined(): VNode { + return <div />; +} diff --git a/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx new file mode 100644 index 000000000..72cb635df --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx @@ -0,0 +1,5 @@ +import { h, VNode } from "preact"; + +export function SelectStandard(): VNode { + return <div />; +} |