diff --git a/packages/solid/components/Input/Input.stories.tsx b/packages/solid/components/Input/Input.stories.tsx index 7120b89e..756cf19f 100644 --- a/packages/solid/components/Input/Input.stories.tsx +++ b/packages/solid/components/Input/Input.stories.tsx @@ -47,9 +47,13 @@ const meta: Meta = { defaultValue: { summary: 'neutral' } } }, - password: { + mask: { description: 'character to use as a mask when password is true', control: 'text' + }, + password: { + description: 'hen true the content will be masked to the user', + control: 'boolean' } } }; diff --git a/packages/solid/components/Input/Input.tsx b/packages/solid/components/Input/Input.tsx index fe5e4456..6a1bbe08 100644 --- a/packages/solid/components/Input/Input.tsx +++ b/packages/solid/components/Input/Input.tsx @@ -20,16 +20,15 @@ import { View, Text } from '@lightningtv/solid'; import styles from './Input.styles.js'; import type { InputProps } from './Input.types.js'; -const getformatTitleText = (props, title) => -props.password ? props.password.repeat(title.length) : title; +const getformatTitleText = (props, title) => + props.password ? (props.mask ?? '').repeat(title.length ?? 0) : title; const Input: Component = props => { /* eslint-disable solid/reactivity */ const [title, setTitle] = props.titleSignal; const [position, setPosition] = createSignal(props.position ?? title().length); const [keyEvent, setKeyEvent] = props.keyEvent; - const formatTitleText = createMemo(() => getformatTitleText(props,title())); - + const formatTitleText = createMemo(() => getformatTitleText(props, title())); const formatInputText = (key: string) => { if (key === undefined || key === '') { diff --git a/packages/solid/components/Input/Input.types.ts b/packages/solid/components/Input/Input.types.ts index 7308a431..8a13f113 100644 --- a/packages/solid/components/Input/Input.types.ts +++ b/packages/solid/components/Input/Input.types.ts @@ -19,10 +19,15 @@ export interface InputProps extends UIComponentProps, InputStyleProperties { */ titleSignal: Signal; + /** + * when true the content will be masked to the user + */ + password?: boolean; + /** * character to use as a mask when password is true */ - password?: string; + mask?: string; } export interface InputStyleProperties {