fix(Input): separates mask and password into tewo different properties

rdkcentral · Jun 18, 2024 · d41e5d9 · d41e5d9
1 parent 627187a
commit d41e5d9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/packages/solid/components/Input/Input.stories.tsx b/packages/solid/components/Input/Input.stories.tsx
@@ -47,9 +47,13 @@ const meta: Meta<typeof Input> = {
         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
@@ -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<InputProps> = 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
@@ -19,10 +19,15 @@ export interface InputProps extends UIComponentProps, InputStyleProperties {
    */
   titleSignal: Signal<string>;
 
+  /**
+   * 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 {