Feat(confirm): Toggle value on tab keypress. Fix #731

SBoudrias · Dec 7, 2024 · e625f21 · e625f21
1 parent fca7524
commit e625f21
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 12 deletions.
diff --git a/packages/confirm/confirm.test.ts b/packages/confirm/confirm.test.ts
@@ -16,7 +16,7 @@ describe('confirm prompt', () => {
     events.keypress('enter');
 
     await expect(answer).resolves.toEqual(true);
-    expect(getScreen()).toMatchInlineSnapshot('"✔ Do you want to proceed? yes"');
+    expect(getScreen()).toMatchInlineSnapshot(`"✔ Do you want to proceed? Yes"`);
   });
 
   it('handles "no"', async () => {
@@ -32,7 +32,7 @@ describe('confirm prompt', () => {
     events.keypress('enter');
 
     await expect(answer).resolves.toEqual(false);
-    expect(getScreen()).toMatchInlineSnapshot('"✔ Do you want to proceed? no"');
+    expect(getScreen()).toMatchInlineSnapshot(`"✔ Do you want to proceed? No"`);
   });
 
   it('handles "y"', async () => {
@@ -48,7 +48,7 @@ describe('confirm prompt', () => {
     events.keypress('enter');
 
     await expect(answer).resolves.toEqual(true);
-    expect(getScreen()).toMatchInlineSnapshot('"✔ Do you want to proceed? yes"');
+    expect(getScreen()).toMatchInlineSnapshot(`"✔ Do you want to proceed? Yes"`);
   });
 
   it('handles "n"', async () => {
@@ -64,7 +64,7 @@ describe('confirm prompt', () => {
     events.keypress('enter');
 
     await expect(answer).resolves.toEqual(false);
-    expect(getScreen()).toMatchInlineSnapshot('"✔ Do you want to proceed? no"');
+    expect(getScreen()).toMatchInlineSnapshot(`"✔ Do you want to proceed? No"`);
   });
 
   it('uses default (yes) on empty input', async () => {
@@ -78,7 +78,7 @@ describe('confirm prompt', () => {
     events.keypress('enter');
 
     await expect(answer).resolves.toEqual(true);
-    expect(getScreen()).toMatchInlineSnapshot('"✔ Do you want to proceed? yes"');
+    expect(getScreen()).toMatchInlineSnapshot(`"✔ Do you want to proceed? Yes"`);
   });
 
   it('uses default (no) on empty input', async () => {
@@ -92,7 +92,7 @@ describe('confirm prompt', () => {
     events.keypress('enter');
 
     await expect(answer).resolves.toEqual(false);
-    expect(getScreen()).toMatchInlineSnapshot('"✔ Do you want to proceed? no"');
+    expect(getScreen()).toMatchInlineSnapshot(`"✔ Do you want to proceed? No"`);
   });
 
   it('uses default on gibberish input', async () => {
@@ -107,7 +107,7 @@ describe('confirm prompt', () => {
     events.keypress('enter');
 
     await expect(answer).resolves.toEqual(true);
-    expect(getScreen()).toMatchInlineSnapshot('"✔ Do you want to proceed? yes"');
+    expect(getScreen()).toMatchInlineSnapshot(`"✔ Do you want to proceed? Yes"`);
   });
 
   it('supports transformer option', async () => {
@@ -123,4 +123,25 @@ describe('confirm prompt', () => {
     await expect(answer).resolves.toEqual(true);
     expect(getScreen()).toMatchInlineSnapshot('"✔ Do you want to proceed? Oui!"');
   });
+
+  it('toggle between values with the tab key', async () => {
+    const { answer, events, getScreen } = await render(confirm, {
+      message: 'Do you want to proceed?',
+    });
+
+    expect(getScreen()).toMatchInlineSnapshot('"? Do you want to proceed? (Y/n)"');
+
+    events.keypress('tab');
+    expect(getScreen()).toMatchInlineSnapshot(`"? Do you want to proceed? (Y/n) No"`);
+
+    events.keypress('tab');
+    expect(getScreen()).toMatchInlineSnapshot(`"? Do you want to proceed? (Y/n) Yes"`);
+
+    events.keypress('tab');
+    expect(getScreen()).toMatchInlineSnapshot(`"? Do you want to proceed? (Y/n) No"`);
+
+    events.keypress('enter');
+    await expect(answer).resolves.toEqual(false);
+    expect(getScreen()).toMatchInlineSnapshot('"✔ Do you want to proceed? No"');
+  });
 });
diff --git a/packages/confirm/src/index.ts b/packages/confirm/src/index.ts
@@ -17,22 +17,35 @@ type ConfirmConfig = {
   theme?: PartialDeep<Theme>;
 };
 
+function getBooleanValue(value: string, defaultValue?: boolean): boolean {
+  let answer = defaultValue !== false;
+  if (/^(y|yes)/i.test(value)) answer = true;
+  else if (/^(n|no)/i.test(value)) answer = false;
+  return answer;
+}
+
+function boolToString(value: boolean): string {
+  return value ? 'Yes' : 'No';
+}
+
 export default createPrompt<boolean, ConfirmConfig>((config, done) => {
-  const { transformer = (answer) => (answer ? 'yes' : 'no') } = config;
+  const { transformer = boolToString } = config;
   const [status, setStatus] = useState<Status>('idle');
   const [value, setValue] = useState('');
   const theme = makeTheme(config.theme);
   const prefix = usePrefix({ status, theme });
 
   useKeypress((key, rl) => {
     if (isEnterKey(key)) {
-      let answer = config.default !== false;
-      if (/^(y|yes)/i.test(value)) answer = true;
-      else if (/^(n|no)/i.test(value)) answer = false;
-
+      const answer = getBooleanValue(value, config.default);
       setValue(transformer(answer));
       setStatus('done');
       done(answer);
+    } else if (key.name === 'tab') {
+      const answer = boolToString(!getBooleanValue(value, config.default));
+      rl.clearLine(0); // Remove the tab character.
+      rl.write(answer);
+      setValue(answer);
     } else {
       setValue(rl.line);
     }